@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --vh: 100vh;
    --marquee-h: 52px;
}

* {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

body {
    background-color: #FFF;
    overflow-x: hidden;
    height: 100%;
    margin: 0;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-size: 1rem;
    height: 100%;
    margin: 0;
}

/*字級大小*/
#fontDropdown {
    line-height: 1.5;
    padding: .65rem .75rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/*小*/
html.fs-sm {
    font-size: 0.875rem;
}

/*大*/
html.fs-lg {
    font-size: 1.12rem;
}

/* 不跟著縮放的元素，可加 .no-scale */
.no-scale {
    font-size: 1rem !important;
}

a {
    color: #FFF;
    text-decoration: none;
}

a:hover {
    color: #5A5656;
    text-decoration: none;
}

a:active {
    color: #5A5656;
    text-decoration: none;
}

hr {
    color: #868686;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.multiline-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tripleline-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.fs--1 {
    font-size: 0.8rem;
}

.fc-white {
    color: #FFF;
}

.fc-gray {
    color: #C9C9C9;
}

.fc-textblack {
    color: #383838;
}

.fc-pink {
    color: #E44D6C;
}

.fc-blue {
    color: #7BB8E0;
}

.fc-darkblue {
    color: #183650;
}

.fc-yellow {
    color: #F9D440;
}

.fc-orange {
    color: #ED6F30;
}

.fc-green {
    color: #2DA7A4;
}

.bg-green {
    background-color: #2DA7A4;
}

.bg-gray {
    background-color: #F4F5F6;
}

.bg-yellow {
    background-color: #FFF9E1;
}

.bg-orange {
    background-color: #DE764C;
}

.bg-transparent {
    background-color: transparent;
}

.bg-lightpink {
    background-color: #FFF3F5;
}

.btn-gray {
    color: #383838;
    background-color: #F0F0F0;
    border-color: #F0F0F0;
}

.btn-gray:hover,
.btn-gray:focus {
    color: #F0F0F0;
    background-color: #9e9e9e;
    border-color: #9e9e9e;
}

/*nav&tab*/
.nav-pills .nav-link {
    background: #AE354E;
    color: #FFF;
    font-size: 1.2rem;
    margin-right: 10px;
}

.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
    color: #FFF;
    background-color: #FF6C95;
    font-weight: bold;
}

/*table*/
.table-main {
    --bs-table-bg: #AE354E;
    --bs-table-striped-bg: #FFE8EF;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #FFE8EF;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #FFE8EF;
    --bs-table-hover-color: #000;
    color: #FFF;
    border-color: #FFE8EF;
}

.table-striped>tbody>tr:nth-of-type(even)>* {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: #FFF;
    color: #000;
}

.table-striped>tbody>tr:first-child>* {
    color: #FFF;
    --bs-table-accent-bg: #AE354E;
}

/*========================*/
/*========= 首頁  ========*/
/*========================*/

/*===== Header =====*/
.sitemap-button {
    position: absolute;
    top: 0;
    right: 80px;
    background-color: #CA4B57;
    color: #FFF;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    padding: 2px 10px;
    font-size: 0.85rem;
}

/*banner*/
.header-bg {
    background-color: rgba(90, 90, 90, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#vpr1 {
    width: 1000px;
    height: 960px;
    margin: auto;
}

#vpr1 .datalist {
    width: 1920px;
    margin-left: -460px
}

#vpr1 .datalist .item {
    position: relative;
}

#vpr1 .datalist .f1 {
    display: block;
    width: 100%;
    height: 100vh;
}

#vpr1 .datalist .f1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

#vpr1 .datalist .slick-arrow {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 2;
    text-indent: -9999px;
    border: 0;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2)
}

#vpr1 .datalist .slick-prev {
    left: 15%;
    top: 50%;
    background: url(../img/icon/left-arrow.png) no-repeat;
}

#vpr1 .datalist .slick-next {
    right: 15%;
    top: 50%;
    background: url(../img/icon/right-arrow.png) no-repeat;

}

@media screen and (max-width:1536px) {
    #vpr1 .datalist .f1 img {
        object-position: center;
    }
}

@media screen and (max-width:1259px) {
    #vpr1 {
        height: 864px;
    }

    #vpr1 .datalist {
        width: 1728px;
        margin-left: -364px
    }

    #vpr1 .datalist .slick-prev {
        left: 23%;
        top: 50%;
    }

    #vpr1 .datalist .slick-next {
        right: 23%;
        top: 50%;

    }
}

@media screen and (max-width:999px) {
    #vpr1 {
        width: 768px;
        height: 768px;
    }

    #vpr1 .datalist {
        width: 1536px;
        margin-left: -384px
    }

    #vpr1 .datalist .slick-prev {
        left: 23%;
        top: 50%;
    }

    #vpr1 .datalist .slick-next {
        right: 23%;
        top: 50%;

    }
}

@media screen and (max-width:768px) {
    #vpr1 {
        width: 600px;
        height: 672px;
    }

    #vpr1 .datalist {
        width: 1344px;
        margin-left: -372px
    }

}

@media screen and (max-width:599px) {
    #vpr1 {
        width: 320px;
        height: 576px;
    }

    #vpr1 .datalist {
        width: 1152px;
        margin-left: -416px
    }

    #vpr1 .datalist .slick-prev {
        left: 30%;
        top: 50%;
    }

    #vpr1 .datalist .slick-next {
        right: 30%;
        top: 50%;

    }
}

@media screen and (max-width:499px) {
    #vpr1 {
        height: 480px;
    }

    #vpr1 .datalist {
        width: 960px;
        margin-left: -320px
    }
}

@media screen and (max-width:399px) {
    #vpr1 {
        height: 384px;
    }

    #vpr1 .datalist {
        width: 768px;
        margin-left: -224px
    }
}

/* 跑馬燈區塊 */

/* ===== 跑馬燈：壓在 Banner 底部 ===== */
.hero-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--marquee-h);
    display: flex;
    align-items: center;
    background: #D83D5D;
    color: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
    z-index: 2;
    width: 85%;
    margin: 0 auto;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

/* 內容容器：左右元素 + 中間軌道 */
.hero-marquee .container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

/* 左側插圖 */
.marq-fig {
    width: 200px;
    flex: 0 0 auto;
    align-self: flex-end;
}

/* 兩顆 icon 按鈕 */
.btn-icon {
    --size: 36px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F86F95;
    color: #FFF;
    border: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.btn-icon:hover {
    filter: brightness(0.95);
}

/* 中間跑馬燈軌道 */
.marquee-inner {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.marquee-track {
    display: inline-flex;
    gap: 2rem;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 30s linear infinite;
    font-weight: 700;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

.marquee-track a {
    color: #FFF;
}

.marquee-track a:hover {
    color: #FFF;
    text-decoration: underline;
}

/* 右側訪客數 */
.visitor-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #FFF;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.visitor-pill i {
    color: #FFF;
}

.visitorCount {
    color: #D4FF9F;
}

#headernav {
    padding-top: 1.25rem;
}

#navbarNav a {
    white-space: nowrap;
    font-size: 1.1rem;
    font-weight: 500;
    color: #FFF;
    border: 1px solid transparent;
    border-radius: 50rem;
    position: relative;
    z-index: 1;
}

#navbarNav a:hover {
    font-weight: 900;
    border: 1px solid #FFF;
    border-radius: 50rem;
}

#navbarNav .dropdown-item {
    color: #3e3e3e;
}

@media (min-width: 992px) {
    #headernav {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 1280px) {
    #navbarNav .nav-item img {
        max-width: 120px;
    }

    #headernav {
        padding-left: 0;
        padding-right: 0;
    }

    .sitemap-button {
        right: 50px;
    }

}

@media (max-width: 1024px) {
    #navbarNav a {
        font-size: 1rem;
    }
}

@media (max-width: 992px) {
    #navbarNav a {
        padding: .5rem 1rem;
        line-height: 1.5;
        border-bottom: 0;
    }

    #navbarNav a:hover {
        border-bottom: 0;
    }
}

@media (max-width: 768px) {

    #navbarNav a {
        font-size: 1.1rem;
    }

    #navbarNav .nav-item img {
        max-width: 165px;
    }

    .sitemap-button {
        right: 30px;
    }
}

/*===== back to top=====*/
#gotopbutton {
    display: inline-block;
    width: 40px;
    height: 65px;
    background: url(../img/nw-gotop.png) no-repeat center;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 2%;
    display: block;
    width: 80px;
    text-align: center;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

#gotopbutton:hover {
    cursor: pointer;
    font-weight: 700;
}

#gotopbutton.show {
    opacity: 1;
    visibility: visible;
}

/*======  Footer  ======*/

.footer-link a {
    color: #616161;
}

.footer-link a:hover {
    color: #C70000;
}

/*====== 最新消息 ======*/
.news-section {
    padding-top: 80px;
    padding-bottom: 100px;
}

#news-body {
    position: relative;
    margin-right: 150px;
    margin-left: 100px;
}

#news-body:before {
    content: '';
    display: table;
    clear: both;
}

#wrap {
    clear: both;
    position: relative;
    min-height: 50px;
    z-index: 2;
}

#wrap>.container {
    max-width: none;
}

[id*=mainbody] {
    position: relative;
}

[id*=mainbody] .hg1 .ht1 {
    font-size: 3rem;
    color: #000;
    line-height: 1.1;
    font-family: "TTWanjudaedunsanche", sans-serif;
    font-weight: 500;
}

[id*=mainbody] .hg1 .ht2 {
    font-size: 1.1rem;
    color: #000;
    font-weight: 400;
}

[id*=mainbody] .ht2 {
    width: 350px;
}

[id*=mainbody] .hg1 .ht2 span {
    font-weight: 600;
}

[id*=mainbody] .datalist .item {
    vertical-align: top
}

[id*=mainbody] .datalist .item img {
    width: 100%;
}

@media screen and (max-width:1519px) {
    [id*=mainbody]>.container {
        max-width: 1350px;
    }
}

@media screen and (max-width:1379px) {
    [id*=mainbody]>.container {
        max-width: 1200px;
    }

    [id*=mainbody] .hg1 .ht1 {
        font-size: 2.8rem;
    }

    [id*=mainbody] .hg1 .ht2 {
        font-size: 1rem;
        position: absolute;
        left: 50px;
    }
}

@media screen and (max-width:1259px) {
    [id*=mainbody] .hg1 .ht2 br {
        display: none;
    }
}

@media screen and (max-width:1219px) {
    [id*=mainbody]>.container {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box
    }

    [id*=mainbody] .hg1 .ht2 {
        font-size: 1rem;
        position: absolute;
        left: 5px;
        top: 85px;
        width: 280px;
    }
}

@media screen and (max-width:999px) {
    [id*=mainbody] .hg1 .ht1 {
        font-size: 2.5rem;
    }

    [id*=mainbody] .hg1 .ht2 {
        display: none;
    }
}

@media screen and (max-width:599px) {
    [id*=mainbody] .hg1 .ht1 {
        font-size: 2rem;
    }

    [id*=mainbody] .hg1 .ht2 {
        display: none
    }
}

@media screen and (max-width:499px) {
    [id*=mainbody] .hg1 .ht1 {
        font-size: 2rem;
    }
}

@media screen and (max-width:399px) {
    [id*=mainbody] .hg1 .ht1 {
        font-size: 2rem;
    }
}

/* mainbody2 */
#mainbody2 {
    z-index: 1;
    padding-bottom: 170px
}

#mainbody2:before {
    position: absolute;
    top: 8px;
    right: 0;
    content: "";
    display: block;
    width: 843px;
    height: 250px;
}

#news-body:after {
    position: absolute;
    bottom: -100px;
    left: -150px;
    width: 2000px;
    content: "new immigrants";
    text-transform: uppercase;
    display: block;
    font-size: 14rem;
    color: #E7E9ED;
    font-family: "Abhaya Libre", "Noto Sans TC", sans-serif;
    line-height: 1.1;
    z-index: -1;
    text-align: center;
}

#mainbody2>.container {
    padding: 90px 0 35px 400px;
    box-sizing: border-box
}

#mainbody2 .hg1 {
    position: absolute;
    top: 55px;
    left: 0;
}

#mainbody2 .hg1 .ht1 {
    margin-bottom: 30px;

}

#mainbody2 .datalist .slick-track {
    margin: 0
}

#mainbody2 .datalist .slick-list .item:first-child {
    width: auto;
}

#mainbody2 .datalist .item a {
    position: relative;
    display: block;
}

#mainbody2 .datalist .item a .tg1 .h1 {
    font-size: 3.5rem;
    color: #fff;
    line-height: 1;
    font-weight: 400;
}

#mainbody2 .datalist .item a .tg1 .h1 .title {
    font-size: 1.3rem;
    color: #fff;
    margin-top: 16px;
}

#mainbody2 .datalist .item a .tg1 {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    text-align: left;
    color: #fff;
    z-index: 1;
    background: linear-gradient(to bottom, transparent, #000);
    border-radius: 20px;
    padding: 30px;
}

#mainbody2 .menu .m.prev,
#mainbody2 .menu .m.next {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 2;
    text-indent: -9999px;
    border: 0;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2)
}

#mainbody2 .menu .m.prev {
    left: 1043px;
    bottom: 90px;
    background: url(../img/icon/left-arrow.png) no-repeat;
}

#mainbody2 .menu .m.next {
    left: 1090px;
    bottom: 44px;
    background: url(../img/icon/right-arrow.png) no-repeat;
}

#mainbody2 .menu .mControl {
    position: absolute;
    right: 340px;
    bottom: 45px;
}

#mainbody2 .menu .mNum {
    display: inline-block;
    color: #010101;
    letter-spacing: -.075em;
    font-weight: 400
}

#mainbody2 .menu .mNum:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 1px;
    background: #b7b7b7;
    margin: -4px 5px 0 8px
}

#mainbody2 .menu .mNum .on {
    font-weight: 600;
}

#mainbody2 .menu .mNum .on:after {
    content: "/";
    display: inline-block;
    vertical-align: middle;
    font-size: 0.8rem;
    margin: -2px 5px 0;
}

#mainbody2 .menu .m {
    width: 30px;
    height: 30px;
    border: 0;
    text-indent: -9999px;
}

#mainbody2 .menu .m.stop {
    background: url(../img/icon/pause.png) no-repeat;
}

#mainbody2 .menu .m.play {
    background: url(../img/icon/play.png) no-repeat;
    display: none;
}

/* === 垂直輪播 位置與基本排版 === */
#mainbody2 .slick-dots {
    position: absolute;
    top: 280px;
    left: -60px;
    width: 550px;
    z-index: 2;
}

#mainbody2 .slick-dots .slick-list {
    padding: 0 !important;
}

#mainbody2 .slick-dots .dot {
    border: 0;
    background: transparent;
}

#mainbody2 .slick-dots .slick-slide button {
    position: relative;
    height: 120px;
    line-height: 120px;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, .8);
    font-weight: 500;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

#mainbody2 .slick-dots .slick-slide button .num {
    display: none;
}

#mainbody2 .slick-dots .slick-slide button .dot-time {
    display: none;
}

#mainbody2 .slick-dots .slick-slide button .dot-desc {
    display: none;
}

#mainbody2 .slick-dots .slick-center button {
    font-size: 2rem;
    margin-left: 0;
    color: #000;
}

#mainbody2 .slick-dots .slick-slide button .dot-main:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 4px;
    background: #E44D6C;
    z-index: 10;
    margin-left: 20px;
    transition: width .35s ease;
}

#mainbody2 .slick-dots .slick-center button .dot-main:after {
    width: 140px;
}

#mainbody2 .slick-dots .slick-center button .num {
    display: inline-block;
    vertical-align: middle;
    font-size: 2.8rem;
    color: #000;
    font-style: italic;
    margin-right: 2px;
    margin-top: -4px;
}

#mainbody2 .slick-dots .slick-center button .dot-time {
    display: inline-block;
    position: absolute;
    top: -50px;
    left: 80px;
    font-size: 1rem;
    opacity: .75;
    text-align: left;
}

#mainbody2 .slick-dots .slick-center button .dot-desc {
    display: inline-block;
    position: absolute;
    bottom: -50px;
    left: 80px;
    font-size: 1rem;
    opacity: .85;
    text-align: left;
    display:none
}

/*-------mainbody2 RWD---------*/

@media screen and (min-width:1260px) {
    #mainbody2 {
        height: 555px;
        padding-top: 90px;
    }

    #mainbody2>.container {
        height: 100%;
    }

    #mainbody2 .datalist {
        position: absolute;
        top: 0;
        left: 405px;
        width: 680px;
    }

    #mainbody2 .datalist .slick-list {
        padding-bottom: 70px;
    }

    #mainbody2 .datalist .slick-track {
        position: relative;
        top: 0;
        left: 0;
        margin: auto;
        transform: none !important;
    }

    #mainbody2 .datalist .slick-list {
        overflow: visible;
    }

    #mainbody2 .datalist .slick-slide {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all .75s ease-in-out;
    }

    #mainbody2 .datalist .item a {
        position: relative;
        display: block;
        width: 320px;
        height: 320px;
        transition: all .5s ease-in-out;
    }

    #mainbody2 .datalist .item a .f1 .f1p1 img {
        display: block;
        width: auto;
        height: 100%;
        margin: auto;
        object-fit: cover;
    }

    #mainbody2 .datalist .item a .tg1 .num {
        position: absolute;
        left: 30px;
        bottom: 23px;
        width: 100%;
        text-align: left;
        font-size: 2.5rem;
        font-family: "Noto Sans TC", sans-serif;
        font-style: italic;
        color: #fff;
        display:none;
    }

    #mainbody2 .datalist .item a .tg1 .h1 span {
        position: absolute;
        left: 96px;
        bottom: 30px;
        font-size: 1rem;
        opacity: 1;
        width: 100%;
    }

    #mainbody2 .datalist .item a .tg1 .t1 {
        display: block;
        opacity: 0;
        transition: opacity .35s ease .3s;
    }

    #mainbody2 .datalist .slick-active .item a .f1 {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 25px 25px 45px rgba(0, 0, 0, .5);
    }

    #mainbody2 .datalist .slick-active .item a .f1 .f1p1 {
        position: absolute;
        top: 0;
        left: -100%;
        bottom: 0;
        right: -100%;
        width: auto;
    }

    #mainbody2 .datalist .slick-active .item a .f1 .f1p1 img {
        display: block;
        width: auto;
        height: 100%;
        margin: auto;
        object-fit: cover;
    }

    #mainbody2 .datalist .slick-current .item a .tg1 {
        text-align: right;
        padding: 65px;
        border-bottom-right-radius: 80px;
    }

    #mainbody2 .datalist .slick-current .item a .tg1 .num {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        text-align: center;
        border: 1px solid #F5F5F5;
        left: 40px;
        bottom: 170px;
        font-size: 3rem;
        background:white;
        color:black;
        padding-top:14px;
        display:inline;
    }

    #mainbody2 .datalist .slick-current .item a .tg1 span {
        opacity: 0;
        bottom: 153px;
    }

    #mainbody2 .datalist .slick-current .item a .tg1 .t1 {
        position: absolute;
        bottom: 70px;
        right: 53px;
        line-height: 26px;
        font-weight: 400;
        opacity: 1;
    }

    #mainbody2 .datalist .slick-current .item a:hover .tg1 .t1,
    #mainbody2 .datalist .slick-current .item a:focus .tg1 .t1 {
        text-decoration: underline;
        text-underline-position: under;
    }

    #mainbody2 .datalist .slick-current .item a .f1 {
        border-bottom-right-radius: 80px;
    }

    #mainbody2 .datalist .slick-current {
        z-index: 10;
        left: 0;
        top: 35px;
        opacity: 1;
    }

    #mainbody2 .datalist .slick-current a {
        width: 680px;
        height: 480px;
    }

    #mainbody2 .datalist .item a:focus-visible {
        outline-offset: -1px;
    }

    #mainbody2 .datalist .slick-current+.slick-slide {
        left: 742px;
        top: 110px;
        opacity: 1
    }

    #mainbody2 .datalist .slick-current+.slick-slide+.slick-slide {
        left: 1120px;
        top: 0;
        opacity: 1;
    }

    #mainbody2 .datalist .slick-current+.slick-slide+.slick-slide+.slick-slide {
        opacity: 0;
        left: 1437px;
    }
}

@media screen and (max-width:1519px)and (min-width:1370px) {
    #news-body:after {
        bottom: -100px;
        left: -100px;
        width: 1500px;
        font-size: 11rem;
    }

    #mainbody2 {
        height: 500px;
    }

    #mainbody2 .slick-dots {
        left: -28px;
    }

    #mainbody2 .datalist {
        width: 612px;
        left: 365px;
    }

    #mainbody2 .datalist .item a {
        width: 288px;
        height: 288px;
    }

    #mainbody2 .datalist .slick-current a {
        width: 612px;
        height: 432px;
    }

    #mainbody2 .datalist .slick-current+.slick-slide {
        left: 658px;
        top: 99px;
    }

    #mainbody2 .datalist .slick-current+.slick-slide+.slick-slide {
        left: 983px;
    }

    #mainbody2 .menu .m.prev {
        left: 939px;
        bottom: 100px;
    }

    #mainbody2 .menu .m.next {
        left: 981px;
    }

    #mainbody2 .menu .mControl {
        right: 0px;
        bottom: 70px;
    }
}

@media screen and (max-width:1369px) and (min-width:1260px) {
    #mainbody2 .slick-dots {
        left: -28px;
    }

    #news-body:after {
        bottom: -100px;
        left: -100px;
        width: 1500px;
        font-size: 11rem;
    }
}

@media screen and (max-width:1599px) {
    #mainbody2 .slick-dots {
        left: -25px;
    }
}

@media screen and (max-width:1499px) {
    #mainbody2 .slick-dots .slick-center button:after {
        margin-left: 10px;
    }
}

@media screen and (max-width:1379px) {
    #mainbody2:before {
        width: 674px;
        height: 200px;
    }

    #mainbody2:after {
        font-size: 5rem;
    }

    #mainbody2 .datalist .slick-current+.slick-slide {
        left: 727px;
    }

    #mainbody2 .slick-dots {
        left: -35px;
        top: 220px;
    }

    #mainbody2 .menu .mControl {
        right: auto;
        left: 30px;
        bottom: 270px;
    }
}

@media screen and (max-width:1259px) {
    #news-body:after {
        bottom: 100px;
        left: -190px;
        width: 1500px;
        font-size: 11rem;
    }

    .news-section {
        padding-top: 0px;
        padding-bottom: 100px;
    }

    #news-body {
        margin-right: 10px;
        margin-left: 0px;
    }

    #mainbody2:after {
        font-size: 141px;
        left: -25%;
        bottom: 35px;
        width: 150%;
        text-align: center;
    }

    #mainbody2>.container {
        padding: 55px 10px 25px;
    }

    #mainbody2 .hg1 {
        position: relative;
        top: auto;
        left: auto;
        text-align: center;
        margin-bottom: 40px;
    }

    #mainbody2 .hg1 .ht1 {
        margin-bottom: 10px;
    }

    #mainbody2 .datalist {
        max-width: 650px;
        margin-left: auto;
        border-radius: 20px 20px 20px 80px;
        overflow: hidden;
    }

    #mainbody2 .datalist .f1 {
        display: block;
    }

    #mainbody2 .datalist .f1 .f1p1 img {
        border-radius: 0;
        height: 450px;
        object-fit: cover;
    }

    #mainbody2 .datalist .item a .tg1 {
        height: auto;
        background: linear-gradient(to bottom, transparent, #000);
        padding: 30px 50px;
    }

    #mainbody2 .datalist .tg1 .h1 {
        margin-bottom: 10px;
    }

    #mainbody2 .datalist .tg1 .h1 .num {
        font-size: 3rem;
        color: #fff;
        font-family: "Noto Sans TC", sans-serif;
        font-style: italic;
        margin-right: 20px;
    }

    #mainbody2 .datalist .tg1 .h1 span {
        color: #fff;
        font-size: 1.1rem;
    }

    #mainbody2 .datalist .item a .tg1 .t1 {
        display: none;
    }

    #mainbody2 .slick-dots {
        left: 10px;
        top: 300px;
    }

    #mainbody2 .slick-dots .slick-slide button {
        font-size: 1.1rem;
    }

    #mainbody2 .slick-dots .slick-center button:after {
        margin-left: 1.2rem;
    }

    #mainbody2 .slick-dots .slick-center button {
        font-size: 2rem;
    }

    #mainbody2 .slick-dots .slick-center button .num {
        font-size: 2.2rem;
    }

    #mainbody2 .menu .m.prev {
        left: auto;
        right: 655px;
        bottom: 270px;
    }

    #mainbody2 .menu .m.next {
        left: auto;
        right: 625px;
        bottom: 210px;
    }
}

@media screen and (max-width:999px) {
    #news-body {
        margin-right: 20px;
        margin-left: 20px;
    }

    #mainbody2 {
        padding-bottom: 30px;
    }

    #mainbody2:before {
        width: 506px;
        height: 150px;
        top: 45px;
    }

    #mainbody2:after {
        font-size: 118px;
        bottom: 50px;
    }

    #mainbody2>.container {
        padding-top: 50px;
    }

    #mainbody2 .hg1 {
        margin-bottom: 30px
    }

    #mainbody2 .datalist {
        margin: auto;
    }

    #mainbody2 .datalist .item a .tg1 {
        padding: 20px 35px;
    }

    #mainbody2 .datalist .tg1 .h1 .num {
        font-size: 52px;
    }

    #mainbody2 .slick-dots {
        display: none;
    }

    #mainbody2 .menu .mControl {
        left: auto;
        right: 20%;
    }

    #mainbody2 .menu .mNum {
        color: #fff;
    }

    #mainbody2 .menu .m.prev,
    #mainbody2 .menu .m.next {
        bottom: -10px;
    }

    #mainbody2 .menu .m.prev {
        right: auto;
        left: calc(50% - 65px);
    }

    #mainbody2 .menu .m.next {
        right: calc(50% - 65px);
    }
}

@media screen and (max-width:768px) {
    #mainbody2:before {
        display: none;
    }

    #mainbody2:after {
        font-size: 94px;
        bottom: 50px;
    }

    #mainbody2 .hg1 {
        margin-bottom: 25px;
    }

    #mainbody2 .menu .mControl {
        right: 10%;
        bottom: 65px;
    }
}

@media screen and (max-width:680px) {
    #mainbody2 {
        padding-bottom: 130px;
    }

    #mainbody2:after {
        font-size: 71px;
        bottom: 70px;
    }

    #mainbody2 .hg1 {
        margin-bottom: 20px;
    }

    #mainbody2 .datalist {
        width: 100%;
        max-width: none;
    }

    #mainbody2 .datalist .tg1 .h1 .num {
        font-size: 3rem;
        margin-right: 15px;
    }

    #mainbody2 .datalist .tg1 .h1 span {
        font-size: 1rem;
    }

    #mainbody2 .menu .mControl {
        right: 30px;
    }
}

@media screen and (max-width:499px) {
    #mainbody2 {
        padding-bottom: 120px;
    }

    #mainbody2:after {
        font-size: 3rem;
        bottom: 80px;
    }

    #mainbody2 .hg1 {
        margin-bottom: 15px
    }

    #mainbody2 .datalist {
        border-radius: 15px 15px 15px 40px
    }

    #mainbody2 .datalist .item a .tg1 {
        padding: 15px 25px;
        border-radius: 15px
    }

    #mainbody2 .datalist .tg1 .h1 .num {
        font-size: 2.5rem;
    }

    #mainbody2 .datalist .tg1 .h1 span {
        font-size: 1rem;
    }

    #mainbody2 .menu .m.prev,
    #mainbody2 .menu .m.next {
        bottom: 100px;
        width: 36px;
        height: 36px;
        background-position: center;
    }

    #mainbody2 .menu .m.prev {
        right: auto;
        left: calc(50% - 56px);
    }

    #mainbody2 .menu .m.next {
        right: calc(50% - 18px);
    }

    #mainbody2 .menu .mNum {
        display: none
    }

    #mainbody2 .menu .mControl {
        bottom: 103px;
        right: calc(50% - 56px)
    }
}

/*======= 推薦專區 ======*/

.recommend-section {
    margin-top: -80px;
}

#recommendCarousel {
    position: relative;
}

#recommendCarousel .datalist .item a .f1 {
    display: block;
    position: relative;
    width: 450px;
    height: 330px;
    overflow: hidden;
    border-radius: 16px;
    margin: 0 auto;
}

#recommendCarousel .datalist .item a .f1 .f1p1 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#recommendCarousel .datalist .slick-arrow {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 2;
    text-indent: -9999px;
    border: 0;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2)
}

#recommendCarousel .datalist .slick-prev {
    right: 70px;
    bottom: 60px;
    background: url(../img/icon/left-arrow-white.png) no-repeat;
}

#recommendCarousel .datalist .slick-next {
    right: 110px;
    bottom: 0px;
    background: url(../img/icon/right-arrow-white.png) no-repeat;
}

#recommendCarousel .menu {
    position: absolute;
    top: -50px;
    right: 85px;
    z-index: 2;
}

#recommendCarousel .menu .mControl {
    display: flex;
}

#recommendCarousel .menu .m {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0
}

#recommendCarousel .menu .m.stop {
    background: url(../img/icon/pause.png) no-repeat;
    background-position: center;
}

#recommendCarousel .menu .m.play {
    background: url(../img/icon/play.png) no-repeat;
    background-position: center;
    display: none
}

#recommendCarousel .menu .mNum {
    display: inline-block;
    color: #010101;
    letter-spacing: -.075em;
    font-weight: 400;
    line-height: 35px
}

#recommendCarousel .menu .mNum:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 1px;
    background: #b7b7b7;
    margin: -4px 5px 0 8px
}

#recommendCarousel .menu .mNum .on {
    font-weight: 600;
}

#recommendCarousel .menu .mNum .on:after {
    content: "/";
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9rem;
    margin: -2px 5px 0
}

@media screen and (max-width:1519px) {
    #recommendCarousel .menu {
        top: -45px;
        right: 10px;
    }

    #recommendCarousel .datalist .slick-arrow {
        width: 54px;
        height: 54px;
    }

    #recommendCarousel .datalist .slick-prev {
        right: 18px;
        bottom: 55px;
        background-position: center;
    }

    #recommendCarousel .datalist .slick-next {
        right: 59px;
        bottom: 0px;
        background-position: center;
    }

    #recommendCarousel .datalist .item a .f1 {
        width: 450px;
        height: 330px;
    }
}

@media screen and (max-width:1379px) {
    #recommendCarousel .menu {
        top: 242px;
        left: 452px
    }

    #recommendCarousel .datalist .slick-prev {
        right: 16px;
        bottom: 116px;
    }

    #recommendCarousel .datalist .slick-next {
        right: 52px;
        bottom: 78px;
    }

    #recommendCarousel .datalist .item a .f1 {
        width: 450px;
        height: 330px;
    }
}

@media screen and (max-width:1259px) {
    #recommendCarousel {
        width: auto;
        margin-left: 40px;
    }


    #recommendCarousel .datalist .item a {
        position: static;
    }

    #recommendCarousel .menu {
        left: 450px
    }

    #recommendCarousel .datalist .item a .f1 {
        width: 100%;
        height: auto;
    }

}

@media screen and (max-width:1099px) {
    .recommend-section {
        margin-top: -180px;
    }

    #recommendCarousel {
        margin-left: 0;
        text-align: left;
    }

    #recommendCarousel .datalist .slick-list {
        padding-bottom: 40px;
    }

    #recommendCarousel .datalist .slick-prev {
        right: 10px;
        bottom: 75px;
        background-position: center;
    }

    #recommendCarousel .datalist .slick-next {
        right: 42px;
        bottom: 22px;
        background-position: center;
    }

    #recommendCarousel .datalist .item a .f1 {
        width: 90%;
        height: 250px;
    }
}

@media screen and (max-width:768px) {
    #recommendCarousel .datalist .item a {
        width: 350px;
        height: 350px;
    }

    #recommendCarousel .menu {
        left: 333px;
        top: 475px;
    }

    #recommendCarousel .datalist .slick-prev {
        right: 0;
        bottom: 80px;
    }

    #recommendCarousel .datalist .slick-next {
        right: 32px;
        bottom: 25px;
    }

    #recommendCarousel .datalist .item a .f1 {
        width: 90%;
        height: 350px;
    }

    .recommend-section {
        margin-top: -85px;
    }
}

@media screen and (max-width:699px) {
    #recommendCarousel {
        margin-top: 25px;
    }

    #recommendCarousel .datalist {
        overflow: visible;
    }

    #recommendCarousel .datalist .slick-list {
        padding: 0
    }

    #recommendCarousel .datalist .item a {
        max-width: 500px;
        width: 100%;
        height: auto;
        margin: auto;
    }

    #recommendCarousel .datalist .slick-arrow {
        width: 36px;
        height: 36px;
    }

    #recommendCarousel .datalist .slick-prev {
        right: calc(50% + 20px);
        bottom: auto;
        top: -15px;
    }

    #recommendCarousel .datalist .slick-next {
        right: calc(50% - 20px);
        bottom: auto;
        top: -15px;
    }

    #recommendCarousel .menu {
        top: -15px;
        left: calc(50% + 25px);
    }

    #recommendCarousel .menu .mNum {
        display: none
    }

    #recommendCarousel .datalist .item a .f1 {
        width: 100%;
        height: auto;
    }

    .recommend-section {
        margin-top: -170px;
    }
}

/*========= 圓形按鈕 ========*/

.circle-buttons-section {
    background: #B2395B75;
    padding: 150px 0 60px 0;
    margin-top: -150px;
}

.circle-btn {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #CD5777;
    color: white;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: transform 0.3s;
}

.circle-btn span {
    margin-top: 10px;
    text-align:center;
}

.circle-btn:hover {
    transform: scale(1.05);
    background-color: #FF6C95;
    color: #FFF;
}

@media screen and (max-width:768px) {
    .circle-buttons-section {
        padding: 110px 0 60px 0;
    }
}

/*======== 熱門下載 =======*/

.download-section {
    padding: 130px 30px;
}

/* mainbody4 */
#mainbody4>.container {
    z-index: 3;
    padding: 90px 0
}

#mainbody4 .hg1 {
    text-align: center;
    padding-bottom: 5px
}

#mainbody4 .hg1 .ht1 {
    margin-bottom: 25px;
}

#mainbody4 .wrap1 {
    position: relative;
}

#mainbody4:before {
    position: absolute;
    top: 30px;
    left: -20px;
    content: "";
    display: block;
    width: 154px;
    height: 117px;
    background: url(../img/left-cloud.png) no-repeat;
    z-index: -1
}

#mainbody4 .wrap1:before {
    position: absolute;
    top: -100px;
    right: -50px;
    content: "";
    display: block;
    width: 134px;
    height: 97px;
    background: url(../img/right-cloud.png) no-repeat;
    z-index: -1
}

#mainbody4 .h1,
#mainbody4 .h2 {
    font-family: "TTWanjudaedunsanche", sans-serif;
    font-weight: 400;
    line-height: 1.1
}

@media screen and (max-width:1379px) {
    .download-section {
        padding: 80px 30px;
    }

    #mainbody4 .wrap1:before {
        top: -160px;
        right: -50px;
        width: 134px;
        height: 97px;
    }
}

@media screen and (max-width:1259px) {
    #mainbody4 .wrap1:before {
        top: -34px;
        right: -33px;
        width: 450px;
        height: 131px;
    }
}

@media screen and (max-width:1219px) {
    #mainbody4>.container {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 60px;
    }
}

@media screen and (max-width:1099px) {
    #mainbody4 .wrap1 {
        text-align: right;
    }

    #mainbody4 .wrap1:before {
        top: -34px;
        right: -360px;
    }
}

@media screen and (max-width:999px) {
    #mainbody4>.container {
        padding-top: 60px;
    }

    #mainbody4 .wrap1:before {
        top: -50px;
        right: -50px;
        width: 338px;
        height: 98px;
    }

    #mainbody4 .hg1 .ht1 {
        margin-bottom: 10px;
    }
}

@media screen and (max-width:768px) {
    #mainbody4 .wrap1:before {
        display: none
    }

    #mainbody4 .h2 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }
}

@media screen and (max-width:599px) {
    #mainbody4>.container {
        padding-bottom: 40px;
    }

    #mainbody4 .h2 {
        margin-bottom: 6px
    }
}

/* 熱門下載 輪播 */
#download1 {
    position: relative;
    width: 980px;
}

#download1:before {
    position: absolute;
    left: 375px;
    bottom: 0;
    content: "";
    display: block;
    width: 235px;
    height: 184px;
    background: url(../img/user-nb.png) no-repeat;
    z-index: 1
}

#download1:after {
    position: absolute;
    top: 35px;
    left: 165px;
    content: "";
    display: block;
    width: 560px;
    height: 560px;
    border: 80px solid #f2F2F2;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: -1
}

#download1 .datalist {
    overflow: hidden;
    width: 100%;
    height: 600px;
}

#download1 .datalist.slick-slider {
    height: auto;
}

#download1 .datalist .slick-list {
    padding: 0px 30px 0px 0px;
}

#download1 .datalist .item {
    float: left;
    width: 100%
}

#download1 .datalist .slick-list .item {
    float: none;
}

#download1 .datalist .item a {
    position: relative;
    display: block;
    width: 500px;
    height: 500px;
}

#download1 .datalist .item a .f1 {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
}

#download1 .datalist .item a .f1 .f1p1 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

#download1 .datalist .item a .f1 .f1p1 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#download1 .datalist .item a .tg1 {
    position: absolute;
    top: 85px;
    left: 530px;
    width: 460px;
}

#download1 .datalist .item a .tg1 .t2 {
    font-size: 1rem;
    line-height: 28px;
    color: #000;
    font-weight: 400;
    word-break: keep-all;
    margin-left: 30px;
}

#download1 .datalist .slick-arrow {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 2;
    text-indent: -9999px;
    border: 0;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2)
}

#download1 .datalist .slick-prev {
    left: 20px;
    bottom: 90px;
    background: url(../img/icon/left-arrow.png) no-repeat;
}

#download1 .datalist .slick-next {
    left: 65px;
    bottom: 43px;
    background: url(../img/icon/right-arrow.png) no-repeat;

}

#download1 .menu {
    position: absolute;
    top: 303px;
    left: 565px;
    z-index: 2;
    display: flex;
}

#download1 .menu .m {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0
}

#download1 .menu .m.stop {
    background: url(../img/icon/pause.png) no-repeat;
}

#download1 .menu .m.play {
    background: url(../img/icon/play.png) no-repeat;
    display: none
}

#download1 .menu .mNum {
    display: inline-block;
    color: #010101;
    letter-spacing: -.075em;
    font-weight: 400;
    line-height: 35px
}

#download1 .menu .mNum:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 1px;
    background: #b7b7b7;
    margin: -4px 5px 0 8px
}

#download1 .menu .mNum .on {
    font-weight: 600;
}

#download1 .menu .mNum .on:after {
    content: "/";
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9rem;
    margin: -2px 5px 0
}

@media screen and (max-width:1519px) {
    #download1 {
        width: 882px;
    }

    #download1 .datalist .item a {
        width: 450px;
        height: 450px;
    }

    #download1:before {
        left: 338px;
        bottom: 0px;
    }

    #download1 .datalist .item a .tg1 {
        top: 77px;
        left: 477px;
        width: 414px;
    }

    #download1 .datalist .item a .tg1 .t2 {
        margin-left: 27px;
        font-size: 1rem;
        line-height: 26px;
    }

    #download1 .menu {
        top: 273px;
        left: 509px
    }

    #download1 .datalist .slick-arrow {
        width: 54px;
        height: 54px;
    }

    #download1 .datalist .slick-prev {
        left: 18px;
        bottom: 70px;
        background-position: center;
    }

    #download1 .datalist .slick-next {
        left: 59px;
        bottom: 25px;
        background-position: center;
    }
}

@media screen and (max-width:1379px) {
    #download1 .datalist .item a {
        width: 400px;
        height: 400px;
    }

    #download1:before {
        left: 300px;
        bottom: 0px;
        width: 170px;
        height: 192px;
    }

    #download1 .datalist .item a .tg1 {
        top: 54px;
        left: 424px;
        width: 368px
    }

    #download1 .datalist .item a .tg1 .t2 {
        margin-left: 24px;
        font-size: 1rem;
        line-height: 24px
    }

    #download1 .menu {
        top: 242px;
        left: 452px
    }

    #download1 .datalist .slick-arrow {
        width: 48px;
        height: 48px;
    }

    #download1 .datalist .slick-prev {
        left: 16px;
        bottom: 65px;
        background-position: center;
    }

    #download1 .datalist .slick-next {
        left: 52px;
        bottom: 20px;
        background-position: center;
    }

    #download1:after {
        top: 30px;
        left: 120px;
        width: 500px;
        height: 500px;
    }
}

@media screen and (max-width:1259px) {
    #download1 {
        width: auto;
        margin-left: 40px;
    }

    #download1:after {
        width: 498px;
        height: 498px;
        border-width: 80px;
        top: 105px;
        left: 105px;
    }

    #download1 .datalist .item a {
        position: static;
    }

    #download1 .datalist .item a .tg1 {
        left: 400px;
        width: calc(100% - 400px)
    }

    #download1 .menu {
        left: 450px
    }
}

@media screen and (max-width:1099px) {
    #download1 {
        margin-left: 0;
        text-align: left;
    }

    #download1:before {
        left: 240px;
        bottom: 0px;
        width: 148px;
        height: 168px;
    }

    #download1 .datalist .slick-list {
        padding-bottom: 40px;
    }

    #download1 .datalist .item a .f1 {
        box-shadow: 15px 15px 25px rgba(0, 0, 0, .2)
    }

    #download1 .datalist .slick-prev {
        left: 10px
    }

    #download1 .datalist .slick-next {
        left: 42px;
    }
}

@media screen and (max-width:768px) {
    #download1:before {
        left: 130px;
        bottom: -7px;
        width: 240px;
        height: 185px;
    }

    #download1 .datalist .item a {
        width: 350px;
        height: 350px;
    }

    #download1 .datalist .item a .tg1 {
        left: 350px;
        width: calc(100% - 350px);
        top: 43px
    }

    #download1 .menu {
        left: 380px;
    }

    #download1 .datalist .slick-prev {
        left: 0
    }

    #download1 .datalist .slick-next {
        left: 32px;
    }
}

@media screen and (max-width:699px) {
    #download1 {
        margin-top: 25px;
    }

    #download1:before {
        left: calc(50% + 117px);
        bottom: auto;
        top: 0px;
    }

    #download1 .datalist {
        overflow: visible;
    }

    #download1 .datalist .slick-list {
        padding: 0
    }

    #download1 .datalist .item a {
        max-width: 500px;
        width: 100%;
        height: auto;
        margin: auto;
    }

    #download1 .datalist .item a .tg1 {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        text-align: center;
        margin-top: -80px;
        margin-bottom: 30px;
        text-shadow: 0 0 5px rgba(255, 255, 255, 1);
        padding-top: 20px;
    }

    #download1 .datalist .item a .tg1 .h2 {
        background: rgba(255, 255, 255, .5);
        display: inline-block;
        padding-left: 25px;
        padding-right: 25px;
        border-radius: 20px;
        padding-top: 5px;
        margin-bottom: 40px;
    }

    #download1 .datalist .item a .tg1 .t2 {
        font-size: 1rem;
        line-height: 22px;
        margin-left: 0
    }

    #download1 .datalist .slick-arrow {
        width: 36px;
        height: 36px;
    }

    #download1 .datalist .slick-prev {
        left: calc(50% - 60px);
        bottom: auto;
        top: -15px;
    }

    #download1 .datalist .slick-next {
        left: calc(50% - 18px);
        bottom: auto;
        top: -15px;
    }

    #download1 .menu {
        top: -15px;
        left: calc(50% + 25px);
    }

    #download1 .menu .mNum {
        display: none
    }
}

@media screen and (max-width:499px) {
    #download1 .datalist .item a .tg1 {
        margin-bottom: 10px;
        background-color: #fed9d9;
        padding: 8px;
        border-radius: 8px;
    }

    @media screen and (max-width: 699px) {
        #download1:before {
            display: none;
        }
    }

    #mainbody4:before {
        top: -110px;
        left: -30px;
    }
}

/* 熱門下載 */
#mainbody4 [id*=link] {
    position: absolute;
    border-radius: 20px 20px 80px 20px;
    color: #fff;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 25px 25px 45px rgba(0, 0, 0, .3)
}

#mainbody4 [id*=link] .t1 {
    font-size: 1rem;
    line-height: 22px;
    font-weight: 400;
    word-break: keep-all;
    margin-bottom: 35px
}

#mainbody4 [id*=link] .b1.more {
    display: block;
    width: 140px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #fff;
    border-radius: 25px;
    text-align: center;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 400
}

#mainbody4 [id*=link] .b1.more:hover,
#mainbody4 [id*=link] .b1.more:focus {
    text-decoration: underline;
    text-underline-position: under
}

[id*=link]:before {
    position: absolute;
    content: "";
    display: block;
}

[id*=link]:after {
    position: absolute;
    bottom: 40px;
    right: 37px;
    content: "";
    display: block;
    width: 96px;
    height: 92px;
}

#link1 {
    top: 190px;
    right: 430px;
    width: 340px;
    height: 280px;
    margin-top: 145px;
    background: #FB80A2;

}

#link1 .h1 {
    font-size: 2rem;
}

#link1:before {
    top: -65px;
    right: 15px;
    width: 152px;
    height: 137px;
    background: url(../img/speaker.png) no-repeat;
}

#link1:after {
    background: url(../img/heart.png) no-repeat;
}

#link2 {
    top: 56px;
    right: 70px;
    width: 300px;
    height: 340px;
    margin-top: 150px;
    background: #10739a;
}

#link2:before {
    top: -147px;
    right: 12px;
    width: 192px;
    height: 156px;
    background: url(../img/withmagnify.png) no-repeat;
}

#link2:after {
    background: url(../img/book.png) no-repeat;
}

#link2 .h1 {
    font-size: 1.8rem;
}

@media screen and (max-width:1519px) {
    #mainbody4 [id*=link] {
        padding: 36px;
    }

    #link1 {
        top: 250px;
        right: 297px;
        width: 306px;
        height: 252px;
        margin-top: 131px
    }

    #link2 {
        top: 50px;
        right: 0;
        width: 270px;
        height: 305px;
        margin-top: 135px
    }

    [id*=link]:after {
        bottom: 36px;
        right: 33px;
        width: 86px;
        height: 83px;
    }

    #link1:before {
        top: -75px;
        right: -70px;
        width: 233px;
        height: 133px;
    }

    #link2:before {
        top: -140px;
        right: 44px;
        width: 173px;
        height: 140px;
    }
}

@media screen and (max-width:1379px) {
    #mainbody4 [id*=link] {
        padding: 32px
    }

    #mainbody4 [id*=link] .t1 {
        margin-bottom: 28px;
        font-size: 1rem;
        line-height: 20px;
    }

    #mainbody4 [id*=link] .b1.more {
        width: 80px;
        height: 28px;
        line-height: 28px;
        font-size: 0.8rem;
    }

    #link1 {
        top: 152px;
        right: 264px;
        width: 272px;
        height: 224px;
        margin-top: 131px
    }

    #link1 .h1 {
        font-size: 1.5rem;
    }

    #link2 {
        top: 45px;
        width: 240px;
        height: 272px;
        margin-top: 120px
    }

    #link2 .h1 {
        font-size: 1.2rem
    }

    [id*=link]:after {
        bottom: 32px;
        right: 30px;
        width: 77px;
        height: 74px;
    }

    #link1:before {
        top: -114px;
        right: 0;
        width: 207px;
        height: 118px;
    }

    #link2:before {
        top: -117px;
        right: 8px;
        width: 154px;
        height: 125px;
    }
}

@media screen and (max-width:1259px) {
    #mainbody4 [id*=link] {
        position: relative;
        width: 27%
    }

    #link1,
    #link2 {
        top: auto;
        right: -365px;
        float: left;
        margin-left: 20px;
    }

    #link1 {
        margin-left: 44%;
        margin-top: -120px;
    }

    #link2 {
        float: right;
        margin-top: -170px;
    }
}

@media screen and (max-width:1099px) {
    #mainbody4 [id*=link] {
        float: none;
        display: inline-block;
        vertical-align: top;
        text-align: left;
        width: 30%;
        box-shadow: 15px 15px 25px rgba(0, 0, 0, .2)
    }

    #link1 {
        margin-left: 0;
        margin-top: 0
    }

    #link2 {
        margin-top: -100px;
    }

    #link1,
    #link2 {
        top: auto;
        right: -370px;
    }
}

@media screen and (max-width:999px) {
    #mainbody4 [id*=link] {
        width: 35%
    }
}

@media screen and (max-width:768px) {
    #mainbody4 [id*=link] {
        width: 45%
    }

    #link1 {
        margin-top: 80px;
    }

    #link2 {
        margin-top: -10px
    }

    #link1:before {
        top: -50px;
        right: -40px;
    }

    #link1,
    #link2 {
        top: auto;
        right: -30px;
    }
}

@media screen and (max-width:699px) {
    #mainbody4 [id*=link] {
        width: 48%;
        border-radius: 15px 15px 40px 15px;
    }

    [id*=link]:before {
        display: none
    }

    [id*=link]:after {
        right: 10px;
        bottom: 10px;
    }

    #link1 {
        margin-left: 0;
        height: auto;
        margin-top: 0
    }

    #link2 {
        margin-left: 2%;
        height: auto;
        margin-top: 0
    }
}

@media screen and (max-width:499px) {
    #mainbody4 [id*=link] {
        display: block;
        width: 100%;
        margin-left: -30px;
    }

    [id*=link]:before {
        display: none
    }

    #link1 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #link1 .h1,
    #link2 .h1 {
        font-size: 1.3rem;
    }

    #mainbody4 [id*=link] .t1 {
        margin-bottom: 15px
    }

}

/* 友善連結+推廣平台 */
.two-clouds {
    position: absolute;
    right: 0;
    top: -150px;
}

.social-media {
    display: flex;
    flex-wrap: wrap;
}

.social-btn {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.social-btn.-facebook {
    background-color: #3b5998;
}

.social-btn.-youtube {
    background-color: #ff0000;
}

.social-btn.-line {
    background-color: #25d366;
}

.social-btn.-instagram {
    background-color: #8b4513;
}

.social-btn.-linkedin {
    background-color: #0077b5;
}

.social-btn .-podcast {
    background-color: #F9F9F9;
}

.social-media a:hover {
    box-shadow: rgba(50, 50, 93, 0.45) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.7) 0px 18px 36px -18px inset;
}

#linkCarousel {
    position: relative;
    margin-top: 25px;
}

#linkCarousel .datalist .item a .f1 {
    display: block;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 23px 23px 90px 23px;
    margin: 0 auto;
}

    #linkCarousel .datalist .item a .f1 .f1p1 img {
        display: block;
        width: 100%;
        /*height: 100%;*/
        object-fit: cover;
    }

#linkCarousel .datalist .slick-arrow {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 2;
    text-indent: -9999px;
    border: 0;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2)
}

#linkCarousel .datalist .slick-prev {
    right: -30px;
    bottom: 50px;
    background: url(../img/icon/left-arrow.png) no-repeat;
}

#linkCarousel .datalist .slick-next {
    right: 25px;
    bottom: 0px;
    background: url(../img/icon/right-arrow.png) no-repeat;
}

#linkCarousel .menu {
    position: absolute;
    top: -80px;
    left: 220px;
    z-index: 2;
}

#linkCarousel .menu .mControl {
    display: flex;
}

#linkCarousel .menu .m {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0
}

#linkCarousel .menu .m.stop {
    background: url(../img/icon/pause.png) no-repeat;
    background-position: center;
}

#linkCarousel .menu .m.play {
    background: url(../img/icon/play.png) no-repeat;
    background-position: center;
    display: none
}

#linkCarousel .menu .mNum {
    display: inline-block;
    color: #010101;
    letter-spacing: -.075em;
    font-weight: 400;
    line-height: 35px
}

#linkCarousel .menu .mNum:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 1px;
    background: #b7b7b7;
    margin: -4px 5px 0 8px
}

#linkCarousel .menu .mNum .on {
    font-weight: 600;
}

#linkCarousel .menu .mNum .on:after {
    content: "/";
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9rem;
    margin: -2px 5px 0
}

@media screen and (max-width:1519px) {
    #linkCarousel .menu {
        top: -60px;
        right: 10px;
    }

    #linkCarousel .datalist .slick-arrow {
        width: 54px;
        height: 54px;
    }

    #linkCarousel .datalist .slick-prev {
        right: -20px;
        bottom: 55px;
        background-position: center;
    }

    #linkCarousel .datalist .slick-next {
        right: 12px;
        bottom: 0px;
        background-position: center;
    }

    #linkCarousel .datalist .item a .f1 {
        width: 540px;
        height: 330px;
    }
}

@media screen and (max-width:1379px) {
    #linkCarousel .menu {
        top: -60px;
        left: 215px;
    }

    #linkCarousel .datalist .slick-prev {
        right: -20px;
        bottom: 60px;
    }

    #linkCarousel .datalist .slick-next {
        right: 20px;
        bottom: 5px;
    }

    #linkCarousel .datalist .item a .f1 {
        width: 500px;
        height: 330px;
    }
}

@media screen and (max-width:1259px) {
    #linkCarousel {
        width: auto;
        margin-left: 40px;
    }


    #linkCarousel .datalist .item a {
        position: static;
    }

    #linkCarousel .menu {
        left: 450px
    }

    #linkCarousel .datalist .item a .f1 {
        width: 100%;
        height: auto;
    }

}

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

    #linkCarousel {
        margin-left: 0;
        text-align: left;
    }

    #linkCarousel .datalist .slick-list {
        padding-bottom: 40px;
    }

    #linkCarousel .datalist .slick-prev {
        right: -20px;
        bottom: 75px;
        background-position: center;
    }

    #linkCarousel .datalist .slick-next {
        right: 22px;
        bottom: 22px;
        background-position: center;
    }

    #linkCarousel .datalist .item a .f1 {
        width: 100%;
        height: 300px;
    }

    #linkCarousel .menu {
        left: 200px;
    }
}

@media screen and (max-width:768px) {
    #linkCarousel .datalist .item a {
        width: 350px;
        height: 350px;
    }

    #linkCarousel .menu {
        left: 380px;
    }

    #linkCarousel .datalist .slick-prev {
        right: 0;
        bottom: 80px;
    }

    #linkCarousel .datalist .slick-next {
        right: 32px;
        bottom: 25px;
    }

    #linkCarousel .datalist .item a .f1 {
        width: 90%;
        height: 350px;
    }

    .two-clouds {
        position: absolute;
        right: -80px;
        top: -65px;
    }
}

@media screen and (max-width:699px) {
    #linkCarousel {
        margin-top: 25px;
    }

    #linkCarousel .datalist {
        overflow: visible;
    }

    #linkCarousel .datalist .slick-list {
        padding: 0
    }

    #linkCarousel .datalist .item a {
        max-width: 500px;
        width: 100%;
        height: auto;
        margin: auto;
    }

    #linkCarousel .datalist .slick-arrow {
        width: 36px;
        height: 36px;
    }

    #linkCarousel .datalist .slick-prev {
        right: calc(50% + 20px);
        bottom: auto;
        top: -15px;
    }

    #linkCarousel .datalist .slick-next {
        right: calc(50% - 20px);
        bottom: auto;
        top: -15px;
    }

    #linkCarousel .menu {
        top: -15px;
        left: calc(50% + 25px);
    }

    #linkCarousel .menu .mNum {
        display: none
    }

    #linkCarousel .datalist .item a .f1 {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width:576px) {
    .social-btn {
        width: 50px;
        height: 50px;
    }
}

.navbar-dark .navbar-brand {
    display: flex;
    white-space: normal;
}

#navbarNav a {
    white-space: normal;
    font-size: 0.8rem;
}

#navbarNav .dropdown a.dropdown-toggle {
    white-space: nowrap;
}

.dropdown-toggle::after {
    Content: none;
}

#linkCarousel .menu {
    left: 70%;
}

@media (min-width: 1200px) {
    .navbar-dark .navbar-brand .fs-4 {
        font-size: 1rem !important;
    }
}

/*===================================*/
/*========= 內頁 INNER PAGE  ========*/
/*===================================*/

.wrapper {
    flex-grow: 1;
}

.innerpage-section {
    padding: 120px 0 60px 0;
}
.pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > li > a:active, .pagination ul > li > a.active, .control-bar > .bar-item {
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.pagination ul {
    list-style: none;
    display: inline-flex;
}

.pagination ul > li:first-child > a {
    border-left-width: 1px;
}

.pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > li > a:active, .pagination ul > li > a.active {
    color: #303030;
    background-color: #f5f5f5;
}

.pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > li > a:active, .pagination ul > li > a.active, .control-bar > .bar-item {
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.pagination ul > li > a {
    text-decoration: none;
}

.pagination ul > li > a, .pagination ul > li > span {
    color: #777777;
    float: left;
    padding: 4px 8px;
    line-height: 20px;
    background-color: #FFFFFF;
    border: 1px solid #cccccc;
    border-left-width: 0px;
}

table {
    width: 100%;
    --bs-table-bg: #AE354E;
    --bs-table-striped-bg: #FFE8EF;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #FFE8EF;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #FFE8EF;
    --bs-table-hover-color: #000;
    color: #FFF;
    border-color: #FFE8EF;
}



table > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}


table > :not(caption) > * > * {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

table > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #FFF;
    color: #000;
}

table > tbody > tr:first-child > * {
    color: #FFF;
    --bs-table-accent-bg: #AE354E;
}

.map {
    width: 100%;
    height: 650px;
    overflow: hidden;
    border: 1px solid rgb(211, 211, 211);
    border-radius: 3px;
}