/*---------- 歷年業績 ----------*/

.WorksFrame {
    background-color: #fff;
    padding: 20px 0;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: all 0.5s !important;
    -webkit-transition: all 0.5s !important;
    -moz-transition: all 0.5s !important;
}

.WorksFrame:hover {
    background-color: #69b6b8;
}

.WorksFrame:hover .WorksTitle {
    color: #fff;
}

.WorksTitle {
    font-family: 'Noto Serif TC', serif !important;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px !important;
    padding: 20px;
    text-align: center;
    transition: all 0.5s !important;
    -webkit-transition: all 0.5s !important;
    -moz-transition: all 0.5s !important;
}

.SliderLogoFrame {
    text-align: center;
    padding-top: 90px;
}

.SliderLogo {
    max-height: 400px;
    border: 10px solid rgba(255, 255, 255, 0.5);
}

.SliderLogo2 {
    max-height: 400px;
}

.swiper-button-next,
.swiper-button-prev {
    margin: 0 20px;
    background-color: rgba(0, 0, 0, 0) !important;
    -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
}

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

    .SliderLogo {
        max-width: 250px;
    }
    .SliderLogo2 {
    max-height: 300px;
}
}

.SpecFrame {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #fff;
    padding: 20px 10px;
}

.AlbumNameR {
    position: absolute;
    z-index: 1;
    top: 50px;
    right: 10px;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 10px #000;
}


/*---------- 城揚團隊動畫 ----------*/

:root {
    /* 預設桌面端數值 */
    --radius: 300px;
    --img-size: 220px;
}

/* 針對平板與手機調整數值 */
@media (max-width: 768px) {
    :root {
        --radius: 200px;
        --img-size: 150px;
    }
}

@media (max-width: 480px) {
    :root {
        --radius: 120px;
        --img-size: 90px;
    }
}

#container {
    position: relative;
    /* 容器大小設為 0，讓所有子元素以中心點為準 */
    top: 250px;
    width: 0;
    height: 600px;
    margin: 0 auto;
}

.box {
    position: absolute;
    width: var(--img-size);
    height: var(--img-size);
    /* 讓圖片中心點對準容器中心 */
    margin-left: calc(var(--img-size) / -2);
    margin-top: calc(var(--img-size) / -2);
    cursor: pointer;
    transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.box.active {
    z-index: 999 !important;
}

.box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* 響應式文字標籤 */
.label {
    position: absolute;
    top: calc(var(--img-size) + -70px);
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 4px 8px;
    border-left: 4px solid #d25d2f;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    display: none;
    z-index: 1000000 !important;
    pointer-events: none;
    width: 120px;
}

.labelboss {
    top: calc(var(--img-size) + -35px);
}

/* 確保點擊時文字在最上層 */
.box:active .label,
.box.active .label {
    z-index: 200000000 !important;
}

#A01 {
    z-index: 50;
}

#A01 img {
    width: 280px !important;
    height: 280px !important;
    margin-left: -30px;
    margin-top: -30px;
}

.label01 {
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 0;
}

.label02 {
    font-family: 'Noto Serif TC', serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #d25d2f;
    letter-spacing: 3px;
    line-height: 0;
}

@media (max-width: 768px) {

    #container {
        position: relative;
        /* 容器大小設為 0，讓所有子元素以中心點為準 */
        top: 250px;
        width: 0;
        height: 480px;
        margin: 0 auto;
    }

    #A01 img {
        width: 180px !important;
        height: 180px !important;
        margin-left: -15px;
        margin-top: -15px;
    }

    .label {
        position: absolute;
        top: calc(var(--img-size) + -35px);
        left: 50%;
        transform: translateX(-50%);
        background-color: white;
        padding: 4px 8px;
        border-left: 4px solid #d25d2f;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
        display: none;
        z-index: 1000000 !important;
        pointer-events: none;
        width: 120px;
    }
}

@media (max-width: 480px) {

    #container {
        position: relative;
        /* 容器大小設為 0，讓所有子元素以中心點為準 */
        top: 200px;
        width: 0;
        height: 300px;
        margin: 0 auto;
    }

    #A01 img {
        width: 130px !important;
        height: 130px !important;
        margin-left: -20px;
        margin-top: -20px;
    }

    .label {
        position: absolute;
        top: calc(var(--img-size) + -20px);
        left: 50%;
        transform: translateX(-50%);
        background-color: white;
        padding: 4px 8px;
        border-left: 4px solid #d25d2f;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
        display: none;
        z-index: 1000000 !important;
        pointer-events: none;
        width: 120px;
    }
}

/*---------- 內頁單元標題 ----------*/

.PageTitle01 {
    font-size: 25px;
    font-weight: bold;
    color: #000;
    letter-spacing: 5px;
    line-height: 30px;
    padding:0 8px 0 10px;
}

.PageTitle02 {
    font-size: 25px;
    font-weight: bold;
    color: #000;
    line-height: 30px;
letter-spacing: 5px;
    padding:0 8px 0 10px;
    margin-bottom: 10px;
}

.PageTitleEng {
    font-size: 40px;
    font-weight: bold;
    background: linear-gradient(to bottom, rgba(210, 93, 47, 0.8) 0%, rgba(210, 93, 47, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 40px;
}

.PageTitleChin {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    line-height: 20px;
    margin: -10px 0 50px 50px;
}

/*---------- 揚揚文創 ----------*/

.YanyanDisc {
    position: absolute;
    bottom: 0px;
    margin: 0 auto;
    z-index: 2;
    font-size: 20px;
    color: #fff;
    background-color: #d25d2f;
    padding: 4px 10px;
}

/*---------- 內頁縮放動畫 ----------*/

.bg-container2 {
    text-align: center;
    pointer-events: none;
}

.bg-container2 img {
    position: absolute;
    max-width: 700px;
    /* 先置中，後面旋轉會再加上 rotate */
    transform: translate(-50%, -50%) scale(1);
    will-change: transform;
    /* 優化效能 */
}

/* 上面一張：不動，層級較高 */
.img-top2 {
    z-index: -2;
}

/* 下面一張：旋轉，層級較低 */
.img-bottom2 {
    z-index: -2;
    animation: zoomInOut 2s ease-in-out infinite alternate;
}

/* 定義旋轉動畫 */
@keyframes zoomInOut {
    from {
        transform: translate(-50%, -50%) scale(0.3);
    }

    to {
        transform: translate(-50%, -50%) scale(0.8);
        /* 放大到 1.2 倍 */
    }
}

/*---------- 內頁旋轉動畫01 ----------*/

.bg-container {
    position: absolute;
    top: 300px;
    right: 0%;
    z-index: -1;
    /* 確保在最底層 */
    pointer-events: none;
    /* 防止遮擋鼠標點擊事件 */
}

.bg-container img {
    position: absolute;
    width: 400px;
    /* 先置中，後面旋轉會再加上 rotate */
    transform: translate(-50%, -50%);
}

/* 上面一張：不動，層級較高 */
.img-top {
    z-index: -2;
}

/* 下面一張：旋轉，層級較低 */
.img-bottom {
    z-index: -2;
    animation: rotateClockwise 20s linear infinite;
    will-change: transform;
}

/* 定義旋轉動畫 */
@keyframes rotateClockwise {
    from {
        /* 必須保留 translate(-50%, -50%) 否則圖片會跑掉 */
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/*---------- 活動訊息 ----------*/

.AlbumFrame {
    background-color: #eee;
    padding: 5px 0 15px 0;
    text-align: center;
}

/*---------- 允良營造 ----------*/

.tabwidth {
    width: 90%;
}

.nav-tabs.nav-stacked {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0 !important;
}

.nav-tabs.nav-stacked > li > a {
    background-color: #fff !important;
    color: #999 !important;
    margin-bottom: 10px;
}

.nav-tabs.nav-stacked > li > a.active {
    background-color: #d25d2f !important;
    color: #fff !important;
}

@media only screen and (max-width: 992px) {
    .tabwidth {
        width: 100%;
    }
}

/*---------- 經營理念 ----------*/

.page-slide {
    height: 800px;
}

.idea-text {
    padding: 0 0 0 50px;
}

@media only screen and (max-width: 992px) {
    .idea-text {
        padding: 50px 0 50px 0;
    }

    .page-slide {
        height: 600px;
    }
}


/*---------- 覆蓋式廣告 ----------*/
/* 1. 背景遮罩：負責處理捲軸 */
.ad-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    /* 由 JS 控制 */
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(10px);

    /* 修正重點：開啟 Y 軸捲軸，並設定 padding 確保底部圖片不貼邊 */
    -webkit-overflow-scrolling: touch;
    /* 優化手機滑動 */
    padding: 40px 0;
}

.ad-overlay.show-active {
    opacity: 1;
}

/* 2. 廣告內容容器：置中並對齊頂部 */
.ad-content {
    background: #f2f2f2;
    width: 90%;
    margin: 0 auto;
    /* 水平居中 */
    padding: 40px 20px 20px 20px;
    border-radius: 0;
    position: relative;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);

    /* 防止內容溢出 */
    overflow-y: scroll;
    transform: translateY(-30px);
    transition: transform 0.4s ease;
}

.ad-overlay.show-active .ad-content {
    transform: translateY(0);
}

/* 3. 關閉按鈕 */
.ad-close-btn {
    position: absolute;
    top: 4px;
    right: 0;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    z-index: 100;
}

.ad-close-btn:hover {

    color: #d25d2f;
}

/* 4. 圖片網格修正：使用 Bootstrap 內建 row/col */
.img-item-box {
    margin-bottom: 15px;
}

.img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 正方形 */
    background: #eee;
    border-radius: 0;
    overflow: hidden;
    display: block;
}

.img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.img-wrapper:hover img {
    transform: scale(1.15);
}

/* 5. 底部區域 */
.ad-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.ad-font {
    font-family: 'Noto Serif TC', serif !important;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 10px 0 20px 0;
    letter-spacing: 1px;
}

/*---------- 首頁單元圖示 ----------*/

.HomeIconFrame {
    background-color: #333;
    padding: 20px;
    width: 150px;
    height: 160px;
    border-bottom: 10px solid #d25d2f;
}

.HomeIconName {
    font-family: 'Noto Serif TC', serif !important;
    letter-spacing: 4px !important;
    font-size: 22px !important;
    color: #fff !important;
    text-align: center;
}

.HomeIconEng {
    letter-spacing: 4px !important;
    font-size: 12px !important;
    color: #777 !important;
    text-align: center;
}

.HomeIconFrame2 {
    background-color: #333;
    padding: 20px;
    width: 150px;
    height: 160px;
    border-bottom: 10px solid #d25d2f;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
}

.HomeIconName2 {
    font-family: 'Noto Serif TC', serif !important;
    letter-spacing: 4px !important;
    font-size: 22px !important;
    color: #fff !important;
    text-align: center;
}

.HomeIconEng2 {
    letter-spacing: 4px !important;
    font-size: 12px !important;
    color: #777 !important;
    text-align: center;
}

/*---------- 熱銷個案 ----------*/

.CasesFrame {
    background-color: #fff;
    padding: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.CasesFrame img {
    border-radius: 25px 0 0 0 !important;
}

.modal-dialog {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /* -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0) !important;
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); */
}

/*---------- 熱銷個案標題動畫：由原寬延伸至 90% ----------*/

.CasesTitle {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 1px !important;
    padding: 20px 16px 0 16px;
    /* 1. 移除原本靜態底線 */
    text-decoration: none !important; 
    position: relative;
    display: block; /* 讓容器寬度撐開，以便計算 90% */
}

/* 2. 偽元素底線設定 */
.CasesTitle::after {
    content: '';
    position: absolute;
    
    /* 核心設定：置中定位 */
    left: 50%;         
    bottom: -8px;      
    transform: translateX(-50%); /* 確保動畫從中心點向兩側展開 */
    
    /* 初始狀態：與文字寬度接近 (原 .CasesTitle 下劃線感覺) */
    width: 120px;      /* 您可以依據平均文字長度調整此初始值 */
    height: 5px;       /* 底線粗細 */
    background-color: #d25d2f; /* 橘色 */
    
    /* 動畫過渡：寬度與背景色變化 */
    transition: width 0.5s ease-in-out, background-color 0.3s; 
    will-change: width;
}

/* 3. 滑鼠移入 CasesFrame 時，底線延伸為容器的 90% */
.CasesFrame:hover .CasesTitle::after {
    width: 90%; 
    background-color: #d25d2f; /* 保持或加深橘色 */
}

.NewsFrame01:hover .CasesTitle::after {
    width: 90%; 
    background-color: #d25d2f; /* 保持或加深橘色 */
}

.CasesDisc {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    padding: 20px 30px 0 30px;
    text-align: center;
}

.CasesDisc02 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    padding: 20px 30px 30px 30px;
    border-radius: 25px;
}

.CasesAddPhone {
    font-size: 15px;
    color: #666;
    padding: 10px 30px 20px 30px;
    background-color: #fff;
    border-radius: 0 0 30px 30px;
    text-align: center;
}

.CasesYear {
    position: absolute;
    top: 0;
    right: -10px;
    z-index: 2;
    font-size: 15px;
    color: #fff;
    background-color: #d25d2f;
    padding: 4px 10px;
    border-radius: 8px 8px 8px 0;
}

.CasesYear2 {
    position: absolute;
    top: -10px;
    right: 5px;
    z-index: 2;
    font-size: 15px;
    color: #fff;
    background-color: #d25d2f;
    padding: 4px 10px;
    border-radius: 8px 8px 8px 0;
}

.CasesYear3 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    font-size: 15px;
    color: #fff;
    background-color: #d25d2f;
    padding: 4px 10px;
    border-radius: 8px 8px 8px 0;
}

/*---------- 最新訊息 ----------*/

.NewsFrame01 {
    background-color: #fff;
    padding: 0;
    border-radius: 25px 25px 25px 25px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.NewsFrame01 img {
    border-radius: 25px 25px 0 0 !important;
}

.NewsTitle {
    font-family: 'Noto Serif TC', serif !important;
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: 1px !important;
    padding: 30px 20px;
    margin-bottom: 6px;
    text-align: justify;
}

.NewsYear {
    font-size: 13px;
    color: #999;
    padding: 10px;
    text-align: center;
    background-color: #ddd;
}

/*---------------- 幻燈片 ----------------*/

.tp-bannertimer {
    display: none !important;
}

.HomeSliderTitle {
    font-size: 50px !important;
    font-weight: 400 !important;
    font-family: 微軟正黑體 !important;
    color: #fff !important;
    text-shadow: 0 0 10px #000 !important;
}

.HomeSliderEng {
    font-size: 25px !important;
    font-weight: 100 !important;
    font-family: 微軟正黑體 !important;
    color: #fff !important;
    text-shadow: 0 0 10px #000 !important;
}

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

    .HomeSliderEng {
        font-size: 20px !important;
        margin-top: 15px !important;
    }

}

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

    .HomeSliderTitle {
        font-size: 40px !important;
    }

    .HomeSliderEng {
        font-size: 20px !important;
        margin-top: 10px !important;
    }

}

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

    .HomeSliderTitle {
        font-size: 30px !important;
    }

    .HomeSliderEng {
        font-size: 15px !important;
        margin-top: 20px !important;
        line-height: 20px !important;
    }

}

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

    .HomeSliderTitle {
        font-size: 30px !important;
    }

    .HomeSliderEng {
        font-size: 15px !important;
        margin-top: 40px !important;
        line-height: 20px !important;
    }


}

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

    .HomeSliderTitle {
        font-size: 18px !important;
    }

    .HomeSliderEng {
        font-size: 10px !important;
        margin-top: 20px !important;
    }


}

/*---------------- 選單 ----------------*/

.menuA01 {
    width: 90% !important;
    margin: 0 auto;
}

.logo01 {
    max-width: 250px;
    padding: 20px 0 0 0;
}

@media only screen and (max-width: 992px) {
    #header #topNav a.logo > img {
        max-height: 100px !important;
        padding: 8px 10px 3px 20px;
    }

    .menuA01 {
        width: 100% !important;
        margin: 0 auto;
    }
}

#topMain > li > a {
    height: 100px !important;
    line-height: 25px !important;
}

.menuB01 {
    font-size: 18px !important;
    color: #000 !important;
    padding: 25px 0 0 0;
    text-align: center;
    font-family: 'Noto Serif TC', serif !important;
    letter-spacing: 2px;
}

.menuact {
    color: #d25d2f !important;
}

.menuB02 {
    font-size: 12px !important;
    font-weight: 100;
    color: #999 !important;
    text-align: center;
}

#topNav ul.dropdown-menu {
    box-shadow: none !important;
    -webkit-box-shadow: rgba(0, 0, 0, 0) 0 6px 12px !important;
    box-shadow: rgba(0, 0, 0, 0) 0 6px 12px !important;
}

#topNav ul.dropdown-menu li.active > a,
#topNav ul.dropdown-menu li.active:hover > a,
#topNav ul.dropdown-menu li.active:focus > a,
#topNav ul.dropdown-menu li:hover > a,
#topNav ul.dropdown-menu li:focus > a,
#topNav ul.dropdown-menu li:focus > a {
    color: #fff !important;
    background-color: rgba(210, 93, 47, 0.8) !important;
}

.menuC01 {
    background-color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 0 10px 10px !important;
    padding: 20px 0 !important;
    left: -50%;
}

.menuC02 {
    font-size: 18px !important;
    color: #000 !important;
    font-family: 'Noto Serif TC', serif !important;
    padding: 10px 0 !important;
    text-align: center;
}

.menuC02m {
    font-size: 18px !important;
    color: #000 !important;
    font-family: 'Noto Serif TC', serif !important;
    padding: 0 0 !important;
    text-align: center;
}

div.side-nav ul.list-group-bordered > li > a {
    display: block;
    /* border-bottom: rgba(0, 0, 0, 0.05) 1px solid; */
    padding: 0 10px !important;
    border-bottom: rgba(148, 149, 150, 0.1) 0 solid !important;
}

div.toggle > label:before {
    content: '' !important;
    border: 4px solid transparent !important;
    border-top-color: rgba(0, 0, 0, 0.3) !important;
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    margin-top: 0 !important;
}

div.toggle.active > label:before {
    border: 4px solid transparent !important;
    border-bottom-color: rgba(0, 0, 0, 1) !important;
    right: 10px !important;
    margin-top: -5px !important;
}

/*---------- 選單高度調整與下拉保持橘底效果 ----------*/

/* 讓 a 標籤填滿 li，並垂直置中文字 */
#topMain > li > a.menuB01 {
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 100px !important; /* 維持 100px 高度 */
    display: flex !important;
    flex-direction: column;
    justify-content: center;   /* 垂直置中，解決上方留白過多問題 */
    align-items: center;
    padding: 0 10px; !important;     /* 移除原本偏向一邊的 padding */
    transition: color 0.4s ease;
    text-decoration: none !important;
}

/* 橘色背景偽元素：初始高度 0 */
#topMain > li > a.menuB01::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background-color: #d25d2f;
    transition: height 0.4s ease-in-out; /* 由下往上伸展動畫 */
}

/* 關鍵修正：當滑鼠在 li 上 (包含下拉選單) 時，a 的背景保持 100% */
#topMain > li:hover > a.menuB01::before,
#topMain > li.active > a.menuB01::before {
    height: 100%;
}

/* 當橘色背景出現時，文字轉為白色 */
#topMain > li:hover > a.menuB01,
#topMain > li:hover > a.menuB01 .menuB02 {
    color: #fff !important;
}

/* 調整 menuB01 與 menuB02 的文字間距 */
.menuB01 {
    padding-top: 0 !important; /* 覆蓋原本 mystyle.css 的 padding */
}
.menuB02 {
    margin-top: 5px; /* 英文標題微調 */
}

/* 下拉選單出現時，確保選單項目的 z-index 正常 */
#topNav ul.dropdown-menu {
    margin-top: 0 !important; /* 讓下拉選單與母選單無縫接軌 */
    z-index: 1000;
}

/*---------------- 全局樣式 ----------------*/
body,
button,
input,
select,
textarea,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "メイリオ", "맑은 고딕", sans-serif !important;
}

.NoteSerifTC {
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "メイリオ", "맑은 고딕", sans-serif !important;
    /*---------------- font-family: 'Noto Serif TC', serif !important; ----------------*/
}

.Cinzel {
    font-family: 'Cinzel', serif !important;
}

.FSmin {
    font-family: 'Noto Serif TC', serif !important;
}

.FSminFS {
    font-size: 50px !important;
    line-height: 60px;
}

.FSTrirong {
    font-family: 'Trirong', serif !important;
}

.container {
    width: 1500px !important;
    max-width: 100% !important;
    padding: 0 30px;
}

/*---------------- 文字樣式 ----------------*/

a:link.one {
    color: #000 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.one {
    color: #000 !important;
    text-decoration: none !important;
}

a:hover.one {
    color: #d25d2f !important;
    text-decoration: none !important;
}

a:link.two {
    color: #666666 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.two {
    color: #666666 !important;
    text-decoration: none !important;
}

a:hover.two {
    color: #d25d2f !important;
    text-decoration: none !important;
}

a:link.three {
    color: #000 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.three {
    color: #000 !important;
    text-decoration: none !important;
}

a:hover.three {
    color: #d25d2f !important;
    text-decoration: none !important;
}

.TextBlock {
    white-space: nowrap;
    display: inline-block;
}

/*---------------- 分隔線 ----------------*/
.Dividers001 {
    border-top: 1px dashed #444;
    margin: 100px 0;
}

/*---------------- 行動裝置選單 ----------------*/
.sidepanel_btn {
    position: fixed;
    z-index: 99;
    top: 10px;
    right: 10px;
    text-align: center;
    padding: 6px 11px;
    background-color: rgba(255, 255, 255, 0.5);
}

@media (orientation: landscape) and (min-width: 992px) and (max-width: 1200px) {
    .sidepanel_btn {
    position: fixed;
    z-index: 99;
    top: 25px;
    right: 10px;
    text-align: center;
    padding: 6px 11px;
    background-color: rgba(255, 255, 255, 0.5);
}
    .logo01 {
    max-width: 250px;
    padding: 20px 0 10px 0;
}
}

.sidepanel-light {
    overflow: auto !important;
}

.sidepanel-dark {
    overflow: auto !important;
}

#sidepanel ul ul > li {
    padding: 5px 0 5px 0 !important;
}

/*---------- 新聞邊框 ----------*/

.Frame01 {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 20px;
}

/*---------- owl-carousel ----------*/

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    height: 100%;
    max-width: 1500px !important;

}

.owl-carousel-2 .owl-dots {
    position: absolute;
    left: 10%;
    right: 10%;
    margin: 20px 0 0 0 !important;
}

.owl-dot span {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    color: #999;
    padding: 2px;
    margin: 3px !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
    -webkit-transition: all 0.2s !important;
    -moz-transition: all 0.2s !important;
}

.owl-carousel-2 .owl-dots .owl-dot.active span {
    background-color: #d25d2f !important;
    color: #fff;
    font-size: 16px !important;
    font-weight: bolder !important;
    padding: 3px 0 2px 0;
    width: 30px !important;
    height: 30px !important;
}

.owl-dots {
    counter-reset: dots;
}

.owl-dot :hover {
    color: #fff;
    background-color: rgba(210, 93, 47, 0.5) !important;
}

.owl-dot :before {
    counter-increment: dots;
    content: counter(dots);
}

body .owl-nav {
    position: absolute;
    top: 20%;
    width: 100%;
    left: 0;
    visibility: hidden !important;

}

body .owl-nav div {
    position: absolute;
    top: 26%;
    border: 1px solid #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

body .owl-prev {
    left: -10px;
    display: flex;
    background: #fff;
}

body .owl-next {
    right: -10px;
    display: flex;
    background: #fff;
}

body .owl-prev i,
body .owl-next i {
    margin: auto;
}

#owl-example .owl-item {
    box-sizing: border-box;
    padding: 40px;
    text-align: center;
}

#owl-example .owl-item p {
    font-size: 25px;
}

.owl-carousel-2:hover .owl-nav div.owl-next {
    right: -2%;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;

}

.owl-carousel-2:hover .owl-nav div.owl-prev {
    left: -2%;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
}

.owl-carousel-2:hover .owl-nav div.owl-next,
.owl-carousel-2:hover .owl-nav div.owl-prev {}

/*---------- 頁尾 ----------*/

.FooterFrame {
    background: #ffffff !important;
}

.FooterLogoFrame {
    background-color: #fff;
    text-align: center;
    padding: 180px 0;
}

.FooterCopyRight {
    background: #efefef;
}

@media only screen and (max-width: 992px) {
    .FooterLogoFrame {
        background-color: #fff;
        text-align: center;
        padding: 120px 0 80px 0;
    }
}

/*---------- 捲動到頂部 ----------*/
#toTop {
    right: 10px !important;
    bottom: 10px !important;
    background-color: #333 !important;
}

/*---------- WOW動畫 ----------*/

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        bottom: 50px;
        bottom: 50px
    }

    to {
        opacity: 1;
        bottom: 0;
        bottom: 0
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        bottom: 50px;
        bottom: 50px
    }

    to {
        opacity: 1;
        bottom: 0;
        bottom: 0
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}


@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        right: 50px;
        right: 50px
    }

    to {
        opacity: 1;
        right: 0;
        right: 0
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        right: 50px;
        right: 50px
    }

    to {
        opacity: 1;
        right: 0;
        right: 0
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        left: 50px;
        left: 50px
    }

    to {
        opacity: 1;
        left: 0;
        left: 0
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        left: 50px;
        left: 50px
    }

    to {
        opacity: 1;
        left: 0;
        left: 0
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        top: 50px;
        top: 50px
    }

    to {
        opacity: 1;
        top: 0;
        top: 0
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        top: 50px;
        top: 50px
    }

    to {
        opacity: 1;
        top: 0;
        top: 0
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

/*---------------- AOS animation ----------------*/

.blurhere {
    filter: blur(20px);
    opacity: 0;
    transform: translateX(0);
}

.blurLtoR {
    filter: blur(20px);
    opacity: 0;
    transform: translateX(-100px);
}

.blurRtoL {
    filter: blur(20px);
    opacity: 0;
    transform: translateX(100px);
}

.blurUtoD {
    filter: blur(20px);
    opacity: 0;
    transform: translatey(-100px);
}

.blurDtoU {
    filter: blur(20px);
    opacity: 0;
    transform: translate(0, 100px);
}

.blurIn {
    filter: blur(20px);
    opacity: 0;
    transform: scale(0.6);
}

.blurOut {
    filter: blur(20px);
    opacity: 0;
    transform: scale(3);
}

/* 當 AOS 啟動 (進入畫面) 時，自動加上 .aos-animate */
[data-aos="blur"].aos-animate {
    filter: blur(0);
    opacity: 1;
    transform: translate(0);
}

.zoomOut {
    opacity: 0;
    transform: scale(2.5);
}

.zoomIn {
    opacity: 0;
    transform: scale(0.3);
}

/* 當 AOS 啟動 (進入畫面) 時，自動加上 .aos-animate */
[data-aos="zoom"].aos-animate {
    opacity: 1;
    transform: translate(0);
}

/*---------------- Photoswipe ----------------*/

.pswp__counter {
    height: 30px;
    margin: 15px 0 0 20px;
    font-size: 16px !important;
    line-height: 30px;
    color: #000 !important;
    text-shadow: 0 0 0 rgb(255, 255, 255) !important;
    padding: 2px 6px !important;
    background-color: #fff !important;
    opacity: 1;
}

.ImgZoom {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1);
    color: #747474;
    padding: 8px 10px;
    margin: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/*---------------- unitegallery ----------------*/

.ug-lightbox .ug-textpanel-title,
.ug-lightbox .ug-textpanel-description {
    font-size: 14px;
    font-weight: normal;
    color: #e5e5e5;
    text-align: center !important;
}

/*---------------- 單元標題色塊動畫 ----------------*/
/* 動畫外層容器 */
.PageTitle-Animation-Wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* 橘色色塊：初始狀態 */
.Orange-Mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d25d2f; /* 橘色 */
    z-index: 10;
    
    /* 設定動畫效果 */
    transform-origin: bottom;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* 觸發動畫後的狀態：縮小為底部的線條 */
.PageTitle-Animation-Wrapper.is-active .Orange-Mask {
    /* 縮小為極低的高度，剛好蓋在原本 PageTitle02 的底線位置 */
    transform: scaleY(0.08); 
    /* 若線條位置需要微調，可改用：transform: translateY(92%) scaleY(0.08); */
}

/* 初始文字隱藏，確保遮罩完全蓋住後再出現（可選） */
.PageTitle01, .PageTitle02 {
    position: relative;
    z-index: 5;
}