/* =======================================================================
   pages.css — 各頁內文專屬樣式（CSP 重構：從各頁行內 <style> / style="" 抽離）
   為套用嚴格 Content-Security-Policy（禁止 'unsafe-inline'），原本散在
   src/index.njk 與 src/_includes/content/*.html 的行內樣式集中到這裡。
   各段以註解標明來源頁；內容自原行內 <style> 逐字搬入，未做任何精簡改寫。
   class 名稱各頁不重複，合併不衝突。
======================================================================= */

/* --- index（首頁：最新商品區塊，原 mod-custom114 行內 <style>） --- */
.home-wrapper { margin-top: -40px; }
.home-title { font-size: 25px; color: #505050; font-weight: bold; padding-bottom: 20px; }
.home-section { float: left; margin: 0 20px 30px 0; width: 260px; border: solid 1px #ddd; border-radius: 4px; padding: 4px; background-color: #fff; }
.home-section:last-child { margin-right: 0px; }
.home-section-title { font-size: 25px; text-align: center; padding: 20px 0; }
.home-section-text { font-size: 13px; padding: 9px; }
.home-section-text p { margin-bottom: 0; }
.home-section-contact { text-align: center; margin-bottom: 20px; }
.home-section-button { color: white; background-color: #337ab7; border-radius: 4px; padding: 8px 14px; border-color: #2e6da4; }
.home-section-button:hover { background-color: #286090; color: #fff; }
.home-hr { clear: both; }
.home-logo { width: 160px; border: solid 1px #ddd; border-radius: 4px; padding: 4px; float: left; margin: 15px 15px 0 0; }
@media screen and (max-width: 500px) {
  .home-section { width: 100%; }
  .home-logo { width: 100%; }
}

/* --- index（首頁：DJ 輪播行內 style="" 抽離。尺寸為原站靜態快照，
       slider.js 載入後會用 jQuery .css() 動態重算並覆寫，此處僅維持
       JS 執行前的初始外觀，避免 FOUC。） --- */
.dj-loader-box { border: 0px !important; }
#djslider112 { height: 459px; width: 1115px; }
#slider112 > li { margin: 0 0px 0px 0 !important; height: 459px; width: 1115px; }
#navigation112 { top: 50.108932461874%; margin: 0 0.89686098654709%; }
#djslider113 { height: 110px; width: 1142px; max-width: 1142px !important; }
#slider113 > li { margin: 0 10px 0px 0 !important; height: 110px; width: 134px; }
.dj-image { width: 100%; height: auto; }
.djslider-end { clear: both; }

/* --- careers（招募菁英） --- */
    .page-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-frame {
        float: left;
        font-size: 13px;
        width: 160px;
        border: 0;
    }

    .page-type {
        margin-bottom: 16px;
        width: 120px;
        border-bottom: 3px solid #c65752;
        padding: 5px 0;
        font-family: Noto Sans TC;
        font-size: 18px;
    }

    .page-images {
        max-width: 130px;
        /*height: 150px;*/
        position: center;
        border: 0;
    }

    .page-images>img {
        width: 400px;
        /*height: 150px;*/
        position: center;
        border: 0;
    }

    .contact-frame {
        float: left;
        font-size: 13px;
        width: 400px;
    }

    .contact-type {
        margin-bottom: 12px;
        width: 350px;
        border-bottom: 3px solid #f1025e;
        padding: 5px 0;
        font-family: Noto Sans TC;
        font-size: 18px;
    }

    .contact-info {
        max-width: 280px;
        /*height: 150px;*/
        position: center;
        border: 0;
        font-size: 14px;
        font-weight: 600;
    }

    .contact-images {
        width: 400px;
        /*height: 150px;*/
        position: center;
        border: 0;
    }

    .contact-images>img {
        width: 400px;
        /*height: 150px;*/
        position: center;
        border: 0;
    }
    .title-frame {
        float: left;
        font-size: 13px;
        width: 800px;
    }

    .title-info {
        max-width: 800px;
        /*height: 150px;*/
        position: center;
        border: 0;
        font-size: 18px;
        font-weight: 600;
    }
/* careers：招募聲明紅字（原 <p style="color: red; ...">） */
.careers-warning { color: red; font-weight: bold; font-size: 18px; }

/* --- company（公司資訊） --- */
        .com-info-wrapper {
                color: #333;
                font-size: 16px;
                line-height: 25px;
        }

        .com-info-banner hr {
                margin-top: 20px;
                margin-bottom: 24px;
                border-top: 1px solid #eee;
                opacity: 100;
        }

        .com-info-title {
                font-size: 30px;
        }

        .com-info-text {
                padding: 40px 0;
        }

        .com-panasonic-image {
                width: 200px;
        }

        .com-panasonic-item {
                padding: 30px 0 0;
                font-size: 18px;
                font-weight: bold;
        }

        .com-product-image {
                text-align: right;
        }

        .com-product-image img {
                width: 200px;
                display: inline;
        }

/* --- history（大事紀） --- */
    .column-title {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 16px;
            font-weight: bold;
            background: linear-gradient(to bottom, #7093BA 0%, #6382A5 100%);
            border-bottom: 2px solid #6382A5;
            padding: 5px 0;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
    }

    .column-title-year {
            display: inline;
            font-weight: bold;
            color: white;
            padding: 0 30px;
    }

    .column-title-description {
            display: inline;
            padding: 0 300px;
            font-weight: bold;
            color: white;
     }

    .column-content {
            border-bottom: 1px solid #e1e1e1;
            overflow: auto;
            /* background: linear-gradient(to bottom, #fcfcfc 0%, #efefef 100%);*/
            clear: both;
    }

    .column-content:nth-child(even) {
            background: #f3f3f3;
    }

    .column-content:last-child {
            /*   border-bottom: 0px;*/
    }

    .column-content-year {
            float: left;
            width: 120px;
            padding: 25px 0px 0 20px;
            font-size: 18px;
    }

    .column-content-description {
            float: left;
            max-width: 600px;
            color: #666666;
            font-size: 15px;
            padding-top: 12px;
    }

    .column-content-description ul li {
            padding: 10px 0;
            list-style-image: url("/images/icon/sq02.gif")
    }

    .column-content-description ul li+li {
            border-top: 1px dotted #666666;
    }

    .pages {
            text-align: center;
            color: #666666;
    }

/* --- contact（業務單位） --- */
        .contact-sales-wrapper {
                color: #333;
                font-size: 16px;
                line-height: 25px;
        }

        .contact-sales-banner hr {
                margin-top: 20px;
                margin-bottom: 24px;
                border-top: 1px solid #eee;
                opacity: 100;
        }

        .contact-sales-title {
                font-size: 30px;
        }

        .contact-sales-text {
                padding: 20px 0;
        }

        .contact-sales-item {
                padding: 30px 0 0;
                font-size: 18px;
                font-weight: bold;
        }

        .contact-sales-table {
                text-align: center;
                font-size: 14px;
        }

        .contact-sales-table table {
                width: 100%;
        }

        .contact-sales-table thead tr {
                background-color: #EBEBEB;
                border-bottom-width: 2px;
                border-bottom-color: #ddd;
        }

        .contact-sales-table th,
        .contact-sales-table td {
                border: 1px solid #ddd;
                line-height: 2.4;
        }

        @media screen and (max-width: 500px) {
                .contact-sales-table {
                        overflow-x: auto;
                }

                .contact-sales-table table {
                        width: 600px;
                }
        }

/* --- lines（代理線） --- */
        .productions-wrapper {
                margin-top: -20px;
        }

        .productions-title {
                font-size: 36px;
        }

        .productions-title-eng {
                color: #777;
                font-size: 24px;
        }

        .productions-title-contact {
                color: white;
                background-color: #337ab7;
                border-color: #2e6da4;
                border-radius: 4px;
                padding: 8px 14px;
                vertical-align: middle;
                font-size: 14px;
                margin-left: 10px;
        }

        .productions-title-contact:hover {
                color: #fff;
                background-color: #286090;
        }

        .productions-title hr {
                margin-top: 12px;
                margin-bottom: 24px;
                border-top: 1px solid #eee;
                opacity: 100;
        }

        .productions-service {
                font-size: 20px;
                padding: 66px 0 20px;
        }

        .productions-section {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
        }

        .productions-text {
                font-size: 18px;
                padding-bottom: 40px;
        }

        .productions-item {
                width: 240px;
                text-align: center;
                margin: 30px 4px 40px;
        }

        @media screen and (max-width: 500px) {
                .productions-section {
                        justify-content: center;
                }
        }

/* --- location（交通資訊） --- */
        .contact-traffic-wrapper {
                color: #333;
                font-size: 16px;
                line-height: 25px;
        }

        .contact-traffic-map hr {
                margin-top: 20px;
                margin-bottom: 24px;
                border-top: 1px solid #eee;
                opacity: 100;
        }

        .contact-traffic-content {
                display: flex;
        }

        .contact-traffic-title {
                font-size: 30px;
                margin: 10px 0;
        }

        .contact-traffic-koho {
                width: 280px;
                margin: 0 auto;
        }

        .contact-traffic-panasonic {
                width: 180px;
                margin: 0 auto;
        }

        .contact-traffic-text {
                padding: 30px 0 0 30px;
        }

        .contact-traffic-text b {
                font-size: 20px;
        }

        @media screen and (max-width: 500px) {
                .contact-traffic-content {
                        display: block;
                }

                .contact-traffic-text {
                padding-top: 50px;
        }
        }
/* location：Google Maps 內嵌地圖（原 iframe style='border: 0px solid #000000'） */
.embedGoogleMap { border: 0px solid #000000; }

/* --- philosophy（經營理念） --- */
        .idea-wrapper {
                color: #333;
                font-size: 16px;
                line-height: 25px;
        }

        .idea-banner hr {
                margin-top: 20px;
                margin-bottom: 24px;
                border-top: 1px solid #eee;
                opacity: 100;
        }

        .idea-title {
                font-size: 30px;
        }

        .idea-text-1,
        .idea-text-2 {
                padding: 40px 0;
        }

        .idea-text-1 {
                max-width: 680px;
        }

        .idea-image {
                width: 300px;
                float: left;
        }

        .idea-product-image {
                text-align: right;
        }

        .idea-product-image img {
                width: 300px;
                display: inline;
        }

        @media screen and (max-width: 500px) {
                .idea-image {
                        width: 300px;
                        float: none;
                }
        }

/* --- team（團隊組織） --- */
        .org-wrapper hr {
                margin-top: 0px;
                margin-bottom: 24px;
                border-top: 1px solid #eee;
                opacity: 100;
        }

        .org-title {
                font-size: 30px;
        }

        .org-image {
                padding-top: 20px;
        }

/* --- applications（產業應用） --- */
        .applications-wrapper {
                margin-top: -20px;
        }

        .applications-title {
                font-size: 36px;
        }

        .applications-title-eng {
                color: #777;
                font-size: 24px;
        }

        .applications-title-contact {
                color: white;
                background-color: #337ab7;
                border-color: #2e6da4;
                border-radius: 4px;
                padding: 8px 14px;
                vertical-align: middle;
                font-size: 14px;
                margin-left: 10px;
        }

        .applications-title-contact:hover {
                color: #fff;
                background-color: #286090;
        }

        .applications-title hr {
                margin-top: 12px;
                margin-bottom: 24px;
                border-top: 1px solid #eee;
                opacity: 100;
        }

        .applications-section {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
        }

        .applications-item {
                width: 240px;
                text-align: center;
                margin: 0px 4px 40px;
        }

        .applications-item img {
                border: 1px solid #ddd;
                border-radius: 4px;
                padding: 4px;
        }

        @media screen and (max-width: 500px) {
                .applications-title {
                        font-size: 28px;
                }

                .applications-section {
                        justify-content: center;
                }
        }