@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
#main {overflow:hidden;}
nav.recruit-legacy-nav {padding: 3rem 2rem;}
.emailbox-btn {padding: 0 2rem;}
/*FAQ 20201203*/
.content .recruit-fix ul, .content .recruit-fix ol {margin-left: 0;}
.categorylink {
    margin-bottom: 78px;
    text-align: center;
}
.categorylink ul {margin-bottom: 0;}
.categorylink ul li {
    list-style: none;
    margin: 0 auto 16px;
    width: 230px;        
}
.categorylink ul li:last-child {margin-bottom: 0;}
.categorylink ul li a {
    background-color: #f5f5f5;
    border-radius: 5px;
    line-height: 3;
    display: block;
    color: #000;
    border: none;
}
.categorylink ul li a:hover {background-color: hsla(0, 0%, 95%, 0.35);}
.accordion {margin-bottom: 60px;}
.accordion dd {
    overflow: hidden;
    margin: 0 0 60px;
    padding: 0 25px;
    text-align: left;
}
.accordion dt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 8px;
    background-color: #f5f5f5;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 20px;
}
.accordion dt span {
    color: #000;
    border: none;
    display: block;
    padding: 25px;
    width: 100%;
}

/*20210114*/
.email-marketing-by-b {display: none!important;}
.emailbox-btn fieldset {
    padding: 0!important;
    max-width: 235px;
    margin: 0 auto!important;    
}
.emailbox-btn h2 {
    margin: 10vh 0 0;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .recruit-fix.columns {margin-left: 0; margin-right: 0;padding-bottom: 100px;}
    .recruit-fix > .column {padding: 0.75rem 0 0;}
    nav.recruit-legacy-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5vw;    
    }
    .navbar-burger {margin: 0;}
    .content h2.is-size-3 {
        font-size: 5vw!important;
        margin-bottom: 0;
    }
    .emailbox-btn {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: rgb(247, 87, 72);
        padding: 3vh 0;
        text-align: center;
        left: 0;
        z-index: 100;
    }
    .emailbox-btn h2 {
        color: #ffffff;
        font-size: 3vh;
        margin: 0;
    }
    .emailbox-btn fieldset > div {
        background-color: #000000!important;    
    }    
}

/*2024renew*/
.noto-serif-tc-normal, .noto-serif-tc-normal p, .noto-serif-tc-normal span {
  font-family: "Noto Serif TC", serif!important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.noto-serif-tc-bold, .content h1.noto-serif-tc-bold, .content h2.noto-serif-tc-bold, .content h3.noto-serif-tc-bold, .content h4.noto-serif-tc-bold, .content h5.noto-serif-tc-bold, .content h6.noto-serif-tc-bold {
  font-family: "Noto Serif TC", serif!important;
  font-optical-sizing: auto;
  font-weight: 700!important;
  font-style: normal;
}
.recruit-fix {min-height: initial !important;}
.top-quicklink .image-box img {border-radius: 20px;}
.recruit-fix a:hover img {opacity:0.7;}
.top-quicklink .value-box {position: absolute;top: 0;background-color: #1b1919; color:#fff;padding: 14px;border-top-left-radius: 17px;border-bottom-right-radius: 20px;}
.orientation-bg {height: 100%;border-radius: 20px; overflow:hidden;background: url('https://tscloud.com.tw/assets/img/recruit/orientation-top.png') no-repeat right bottom 6% #6b9da9;background-size: 32% auto;}
.orientation-bg > span.is-block {height: 100%;padding: 4em 30% 3em 5%;}
.orientation-bg > span > span {color:#fff; height: calc(100% / 5);border-bottom: 1px solid #fff; font-size: 1.5rem;}
.orientation-bg:hover > span > span {color:#000;}
.recruit-fix .cta-bg:before {content:"";position: absolute; top: 0; left: 0; width: 100%; height: 100%;opacity: 0.2; background: url('https://tscloud.com.tw/assets/img/recruit/recruit-cta.jpg') no-repeat center center;}
.recruit-fix .cta-bg.is-medium .hero-body {padding: 11rem 4.5rem 4rem;}
.recruit-fix .slideshow {position: relative;}
.recruit-fix .slides img, .recruit-fix .slides_sp img {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
.recruit-fix .slides img.eye02, .recruit-fix .slides_sp img.eye02 {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}
.recruit-fix .slides img.active, .recruit-fix .slides_sp img.active {opacity: 1;}
.toppage-job .column p.is-size-4 {display:none;}
.toppage-job .column p span.has-text-weight-bold {font-weight: normal!important;}
.toppage-job .box, .toppage-staff .column a {border-radius: 20px;overflow:hidden;}
body.category .column .box > div h2 , body.archive .column .box > div h2 {font-size:1.1em;}
.page-template-recruit-new .content h1:not(:first-child) {margin-top:0;}
.single p span.first-slogan {font-size: 1.5em; font-weight: bold;}
.recruit-subeyecatch h1, .recruit-subeyecatch p {font-family: "Noto Sans TC",'微軟正黑體', 'Microsoft JhengHei', sans-serif !important;}
@media screen and (min-width: 769px) {
.recruit-subeyecatch {margin-top: 3.25rem;}
}

@media screen and (min-width: 1024px) {
    .page-template-recruit-new {padding-top:3.25rem;} 
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .page-template-recruit-new nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1em;   
    }
    .page-template-recruit-new .content h2.is-size-3 {
        font-size: 2em !important;
        margin-bottom: 0;
    }    
}
    
@media screen and (max-width: 768px) {
.recruit-fix .cta-bg.is-medium .hero-body {padding: 48% 10% 15%;}
.recruit-fix .cta-bg:before {background-size: cover;}
.toppage-job .box, .toppage-staff .column, .top-quicklink .column {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.orientation-bg > span > span {font-size: 1rem;}
.page-template-recruit-new .recruit-fix > .column {padding: 0;}
}


/*職級與職務說明*/
    /* JD 頁面專用樣式 - 避免全域影響 */
        .jd-page-container {
            background-color: #ffffff;
            font-family: "Segoe UI", Roboto, "Helvetica Neue", "Microsoft JhengHei", sans-serif;
        }

        /* JD 頁面頂部頁籤容器 */
        .jd-tabs-wrapper {
            background: white;
            padding: 2rem 0 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        /* JD 頁面簡潔頁籤樣式 */
        .jd-segmented-control {
            background-color: #f8f9fa;
            padding: 4px;
            border-radius: 8px;
            display: inline-flex !important;
            border: none !important;
            margin: 0 auto !important;
        }

        .jd-segmented-control li {
            margin: 0 !important;
        }

        .jd-segmented-control li a {
            border: none !important;
            border-radius: 6px !important;
            padding: 0.75rem 2rem !important;
            transition: all 0.2s ease;
            color: #6b7280;
            font-weight: 500;
            display: flex !important;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
        }

        .jd-segmented-control li.is-active a {
            background-color: white !important;
            color: #374151 !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            font-weight: 600;
        }

        /* JD 頁面表格容器樣式 */
        .jd-table-container {
            background: white;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        /* JD 頁面表格樣式 */
        .jd-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            table-layout: fixed; /* 固定表格佈局 */
        }

        .jd-table thead th {
            background: #f8f9fa;
            padding: 1rem 0.75rem;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 1px solid #e5e7eb;
            font-size: 0.875rem;
        }

        .jd-table thead th:first-child {
            text-align: center;
            width: 5em;
        }

        .jd-table thead th:nth-child(2) {
            width: 10em;
        }
        .jd-table thead th:nth-child(5) {
            text-align: right;
            width: 20%;
        }

        .jd-table thead th:nth-child(6) {
            text-align: right;
            width: 17%;
        }        

        .jd-table tbody tr {
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid #f3f4f6;
        }

        .jd-table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .jd-table tbody tr:last-child {
            border-bottom: none;
        }

        .jd-table tbody td {
            padding: 1rem 0.75rem;
            color: #374151;
            vertical-align: middle;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .jd-table tbody td:first-child {
            text-align: center;
        }

        .jd-table tbody td:nth-child(5),
        .jd-table tbody td:nth-child(6) {
            text-align: right;
        }

        /* 手機版表格優化 */
        @media screen and (max-width: 768px) {
            .jd-table-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .jd-table {
                min-width: 600px; /* 確保表格有最小寬度 */
                font-size: 0.8rem;
            }
            
            .jd-table thead th,
            .jd-table tbody td {
                padding: 0.75rem 0.5rem;
                font-size: 0.8rem;
            }
            
            .jd-table thead th:first-child {
                width: 15%;
            }
            
            .jd-table thead th:nth-child(2) {
                width: 20%;
            }
            
            .jd-table thead th:nth-child(3) {
                width: 30%;
            }
            
            .jd-table thead th:nth-child(4) {
                width: 35%;
            }
        }

        .jd-grade-badge {
            background: #e0f2fe;
            color: #0369a1;
            padding: 0.375rem 0.75rem;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.875rem;
            display: inline-block;
        }
        /* 隱藏其他部門的內容 */
        .dept-content {
            display: none;
        }

        .dept-content.is-active {
            display: block;
        }

        /* JD 頁面 Drawer 樣式 - 桌面版 (右側滑出) */
        .jd-drawer {
            position: fixed;
            top: 0;
            right: -100%;
            width: 50%;
            height: 100vh;
            background-color: white;
            box-shadow: -15px 0 40px rgba(0,0,0,0.1);
            transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 100;
            display: flex;
            flex-direction: column;
        }

        .jd-drawer.is-active {
            right: 0;
        }

        .jd-drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.35);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
            z-index: 90;
            backdrop-filter: blur(4px);
        }

        .jd-drawer-overlay.is-active {
            opacity: 1;
            visibility: visible;
        }

        /* JD 頁面 Drawer Header */
        .jd-drawer-header {
            padding: 2.5rem 3rem 1.5rem;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }
        #drawerTitle {font-family: "Noto Sans TC",'微軟正黑體','Microsoft JhengHei', sans-serif!important;}

        /* 關閉按鈕固定在右上角 */
        .jd-drawer.is-active button.delete {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 101;
        }

        /* JD 頁面 Drawer Content Area */
        .jd-drawer-body {
            padding: 1.5rem 3rem 3rem;
            flex-grow: 1;
        }

        /* JD 頁面 Drawer 滾動容器 */
        .jd-drawer-scroll {
            overflow-y: auto;
            height: 100%;
        }

        /* 平板尺寸 (769px - 1215px) - Drawer 佔 90% 寬度 */
        @media screen and (max-width: 1215px) and (min-width: 769px) {
            .jd-drawer {
                width: 90%;
            }
        }

        /* 手機尺寸 (768px 以下) - 改為 Lightbox 樣式 */
        @media screen and (max-width: 768px) {
            .jd-drawer {
                /* 重置 drawer 樣式，改為 lightbox */
                right: auto;
                top: 5vh; /* 改為從頂部 5vh 開始，不固定在中間 */
                left: 50%;
                transform: translateX(-50%) scale(0.9);
                width: 95%;
                max-width: 500px;
                height: auto; /* 改為自動高度 */
                max-height: 90vh; /* 最大高度 90vh */
                border-radius: 12px;
                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                opacity: 0;
                visibility: hidden;
                margin-bottom: 5vh; /* 底部留空間 */
            }
            
            .jd-drawer.is-active {
                transform: translateX(-50%) scale(1);
                opacity: 1;
                visibility: visible;
            }
            
            .jd-drawer-header {
                padding: 1.5rem 1.5rem 1rem;
                border-radius: 12px 12px 0 0;
                flex-shrink: 0; /* 防止 header 被壓縮 */
            }
            
            .jd-drawer-body {
                padding: 0 1.5rem 1.5rem;
                flex-grow: 1;
                max-height: calc(90vh - 200px); /* 減去 header 高度 */
            }
            
            /* 手機版遮罩更深 */
            .jd-drawer-overlay {
                background: rgba(0, 0, 0, 0.6);
            }
            
            /* 手機版雙欄改為單欄 */
            .jd-grid-layout {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }

        /* 超小螢幕 (480px 以下) */
        @media screen and (max-width: 480px) {
            .jd-drawer {
                width: 98%;
                top: 2vh;
                max-height: 96vh;
                margin-bottom: 2vh;
            }
            
            .jd-drawer-header {
                padding: 1rem 1rem 0.75rem;
            }
            
            .jd-drawer-body {
                padding: 0 1rem 1rem;
                max-height: calc(96vh - 150px);
            }
            
            .jd-grid-layout {
                gap: 1rem;
            }
            
            /* 手機版標題字體調整 */
            .jd-drawer-header .title {
                font-size: 1.25rem !important;
                line-height: 1.3;
            }
        }

        /* JD 頁面職位說明書樣式 */
        .jd-spec-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .jd-spec-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .jd-section-label {
            font-size: 0.75rem;
            font-weight: 700;
            color: #9ca3af;
            margin-bottom: 12px;
            letter-spacing: 0.05em;
        }

        .jd-spec-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f3f4f6;
        }
        .jd-spec-row:last-child { border-bottom: none; }

        .jd-spec-label {
            font-size: 0.85rem;
            color: #9ca3af;
            display: flex;
            align-items: center;
            min-width: 7em;
        }
        
        .jd-spec-value {
            font-size: 0.9rem;
            font-weight: 600;
            color: #111827;
            text-align: right;
        }

        .jd-highlight-value {
            background-color: #fff7ed;
            color: #c2410c;
            padding: 2px 8px;
            border-radius: 4px;
        }

        .jd-skill-group {
            margin-bottom: 24px;
        }
        
        .jd-group-title {
            font-size: 0.85rem;
            color: #9ca3af;
            margin-bottom: 8px;
        }

        .jd-skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .jd-skill-tag {
            font-size: 0.85rem;
            font-weight: 500;
            color: #1e40af;
            background: #eff6ff;
            padding: 4px 10px;
            border-radius: 4px;
        }

        .jd-comp-text {
            font-size: 0.9rem;
            color: #4b5563;
            line-height: 1.5;
            background: #f3e8ff;
            padding: 12px;
            border-radius: 6px;
        }
        .jd-icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            stroke-width: 2;
        }
        .jd-icon-sm {
            width: 12px;
            height: 12px;
            margin-right: 6px;
            stroke-width: 2;
        }
        .jd-icon-lg {
            width: 32px;
            height: 32px;
            margin-right: 16px;
            stroke-width: 2;
            color: #15803d;
        }
        .jd-text-green { color: #16a34a; }
        .jd-text-orange { color: #f97316; }
        .jd-text-blue { color: #2563eb; }
        .jd-text-purple { color: #7c3aed; }

        .jd-grid-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
        }

        @media screen and (max-width: 768px) {
            .jd-grid-layout {
                grid-template-columns: 1fr;
                gap: 32px;
            }
        }
footer a, footer ul li a {color: #fff;}