/* PC */
:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-deep-gray: #333333;
    --color-gold: #80725c;
    --color-blue: #007c92;
    --color-deep-blue: #152d4c;
    --color-darkseagreen: #6f786b;
    --color-green: #355f43;
    --color-deep-green: #004339;
    --color-teal: #0f4752;
    --color-red: #d54835;
    --color-darkred: #962c2a;
    --color-orange: #ff9659;
    --color-purple: #a050ff;
    --color-font-main: var(--color-gray-gray900);
    --color-form-bg: var(--color-gray-gray50);
    --color-form-border: var(--color-gray-gray100);
    --color-font-sub: var(--color-gray-gray600);
    --color-font-placeholder: var(--color-gray-gray400);
    --color-bg-defualt: #faf7ee;
    --color-bg-white: var(--color-white);
    --color-primary-main: var(--color-gold);
    --color-secondary-main: var(--color-deep-gray);
    --color-secondary-darken: var(--color-gray-gray900);
    --color-secondary-lighten: var(--color-gray-gray600);
    --color-secondary-less: var(--color-gray-gray100);
    --color-info-main: var(--color-blue);
    --color-info-darken: #006a7c;
    --color-info-lighten: #2690a2;
    --color-info-less: #d9ebef;
    --color-primary-darken: #6d614e;
    --color-primary-lighten: #938774;
    --color-primary-less: #eceae7;
    --font-size-h1: 64px;
    --font-size-h2: 48px;
    --font-size-h3: 32px;
    --font-size-h4: 24px;
    --font-size-body: 18px;
    --font-size-tag: 14px;
    --unit-space-h-padding: 48px;
    --unit-space-v-padding: 48px;
    --card-space-h-padding: 16px;
    --card-space-v-padding: 16px;
    --card-space-between: 16px;
    --unit-space-between: 32px;
    --unit-space-between-h1: 16px;
    --color-gray-gray50: #f2f1f0;
    --color-gray-gray100: #e8e7e6;
    --color-gray-gray200: #d6d6d5;
    --color-gray-gray300: #bdbcbb;
    --color-gray-gray400: #979796;
    --color-gray-gray500: #7e7e7d;
    --color-gray-gray600: #656464;
    --color-gray-gray700: #4c4c4b;
    --color-gray-gray800: #333333;
    --color-gray-gray900: #222222;
    --color-white-10: rgba(255, 255, 255, 0.1000);
    --color-white-20: rgba(255, 255, 255, 0.2000);
    --color-white-30: rgba(255, 255, 255, 0.3000);
    --color-white-40: rgba(255, 255, 255, 0.4000);
    --color-white-50: rgba(255, 255, 255, 0.5000);
    --color-white-60: rgba(255, 255, 255, 0.6000);
    --color-white-70: rgba(255, 255, 255, 0.7000);
    --color-white-80: rgba(255, 255, 255, 0.8000);
    --color-white-90: rgba(255, 255, 255, 0.9000);
    --card-space-2-h-padding: 24px;
    --card-space-2-v-padding: 24px;
    --card-space-2-between-lg: 24px;
    --card-space-2-between-md: 16px;
    --card-space-2-between-sm: 8px;
    --sds-size-space-0: 0;
    --sds-size-space-100: 4px;
    --sds-size-space-200: 8px;
    --sds-size-space-400: 16px;
    --sds-size-space-600: 24px;
    --sds-size-space-800: 32px;
    --sds-size-space-1000: 40px;
    --sds-size-space-1200: 48px;
    --sds-size-space-1400: 56px;
    --sds-size-space-1600: 64px;
    --Card-space-V-padding: 16px;
    --Card-space-H-padding: 16px;
    --Card-space-between: 16px;
    --Corner-Small: 8px;
    --sds-size-depth-0: 0;
    --sds-size-depth-025: 1px;
    --sds-size-depth-100: 4px;
    --sds-color-black-200: rgba(12, 12, 13, 0.1);
    --sds-color-black-100: rgba(12, 12, 13, 0.05);
    --Card-space-2-between-sm: 8px;
    --Card-space-2-between-md: 16px;
    --Card-space-2-between-lg: 24px;
    
}

/* Moblie */
@media only screen and (max-width: 719px){
    :root {
        --color-white: #ffffff;
        --color-black: #000000;
        --color-deep-gray: #333333;
        --color-gold: #80725c;
        --color-blue: #007c92;
        --color-deep-blue: #152d4c;
        --color-darkseagreen: #6f786b;
        --color-green: #355f43;
        --color-deep-green: #004339;
        --color-teal: #0f4752;
        --color-red: #d54835;
        --color-darkred: #962c2a;
        --color-orange: #ff9659;
        --color-purple: #a050ff;
        --color-font-main: var(--color-gray-gray900);
        --color-form-bg: var(--color-gray-gray50);
        --color-form-border: var(--color-gray-gray100);
        --color-font-sub: var(--color-gray-gray600);
        --color-font-placeholder: var(--color-gray-gray400);
        --color-bg-defualt: #faf7ee;
        --color-bg-white: var(--color-white);
        --color-primary-main: var(--color-gold);
        --color-secondary-main: var(--color-deep-gray);
        --color-secondary-darken: var(--color-gray-gray900);
        --color-secondary-lighten: var(--color-gray-gray600);
        --color-secondary-less: var(--color-gray-gray100);
        --color-info-main: var(--color-blue);
        --color-info-darken: #006a7c;
        --color-info-lighten: #2690a2;
        --color-info-less: #d9ebef;
        --color-primary-darken: #6d614e;
        --color-primary-lighten: #938774;
        --color-primary-less: #eceae7;
        --font-size-h1: 32px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --font-size-h4: 18px;
        --font-size-body: 16px;
        --font-size-tag: 12px;
        --unit-space-h-padding: 16px;
        --unit-space-v-padding: 24px;
        --card-space-h-padding: 8px;
        --card-space-v-padding: 8px;
        --card-space-between: 8px;
        --unit-space-between: 16px;
        --unit-space-between-h1: 12px;
        --color-gray-gray50: #f2f1f0;
        --color-gray-gray100: #e8e7e6;
        --color-gray-gray200: #d6d6d5;
        --color-gray-gray300: #bdbcbb;
        --color-gray-gray400: #979796;
        --color-gray-gray500: #7e7e7d;
        --color-gray-gray600: #656464;
        --color-gray-gray700: #4c4c4b;
        --color-gray-gray800: #333333;
        --color-gray-gray900: #222222;
        --color-white-10: rgba(255, 255, 255, 0.1000);
        --color-white-20: rgba(255, 255, 255, 0.2000);
        --color-white-30: rgba(255, 255, 255, 0.3000);
        --color-white-40: rgba(255, 255, 255, 0.4000);
        --color-white-50: rgba(255, 255, 255, 0.5000);
        --color-white-60: rgba(255, 255, 255, 0.6000);
        --color-white-70: rgba(255, 255, 255, 0.7000);
        --color-white-80: rgba(255, 255, 255, 0.8000);
        --color-white-90: rgba(255, 255, 255, 0.9000);
        --card-space-2-h-padding: 16px;
        --card-space-2-v-padding: 16px;
        --card-space-2-between-lg: 12px;
        --card-space-2-between-md: 8px;
        --card-space-2-between-sm: 4px;
        --Card-space-V-padding: 8px;
        --Card-space-H-padding: 8px;
        --Card-space-between: 8px;
        --Card-space-2-between-sm: 4px;
        --Card-space-2-between-md: 8px;
        --Card-space-2-between-lg: 12px;
    }
}

/*共用*/
html, body, h1, h2, h3, h4, h5, h6, p{
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-style: normal;
  margin-bottom: 0;
}
.unit_section{
    display: flex;
    min-height: 320px;
    padding: var(--Unit-space-V-padding, 48px) var(--Unit-space-H-padding, 48px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Unit-space-between, 32px);
    align-self: stretch;
}
.label_tag{
    display: inline-flex;
    padding: var(--sds-size-space-200) var(--sds-size-space-400);
    align-items: center;
    gap: var(--sds-size-space-200);
    border-radius: 9999px;
    text-align: center;
    font-size: var(--font-size-14, 14px);
    font-weight: 500;
    line-height: var(--line-height-20, 20px); /* 142.857% */
    margin-bottom: 0;
}
.label_tag.white_style{
    background: var(--color-bg-white, #FFF);
    color: var(--color-primary-main, #80725C);
}
.label_tag.black_style{
    background: var(--color-secondary-main, #333);
    color: var(--color-bg-white, #FFF);
}
.label_tag.brown_style{
    background: var(--color-primary-main, #80725C);
    color: var(--color-bg-white, #FFF);
}
/* ---------- 平板 720–1099px ---------- */
@media (max-width: 1099px) {
    .unit_section{
        padding: var(--space-1200, 48px);
    }
}
/* ---------- 手機 <720px ---------- */
@media (max-width: 719px) {
    .unit_section{
        padding: var(--space-1200, 48px);
    }
    .unit_section{
        min-height: 320px;
        padding: var(--Unit-space-V-padding, 24px) var(--Unit-space-H-padding, 16px);
        gap: var(--Unit-space-between, 16px);
    }
}
/* 主要 banner */
.main_banner{
    background: url(/images/worksafety/worksafety_bg1.jpg) top center no-repeat;
    background-size: cover;
}
.main_banner::before{
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--color-black-40, #00000066);
    backdrop-filter: blur(4px);
}
.main_content_block{
    display: flex;
    padding: var(--sds-size-space-600) 0;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
    z-index: 1;
}
.main_content_block .title{
    color: #FFF;
    text-align: center;
    font-size: var(--font-size-h1, 64px);
    font-weight: 500;
    line-height: 125%; /* 80px */
}
.main_content_block .description{
    color: #FFF;
    text-align: center;

    /* M3/Elevation Light/2 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.15);
    font-size: var(--font-size-h4, 24px);
    font-weight: 400;
    line-height: 150%; /* 36px */
}
/* 共用元素-標題 */
.headline_block{
    display: flex;
    padding: var(--sds-size-space-0) 0;
    flex-direction: column;
    align-items: center;
    gap: var(--sds-size-space-400);
}
.headline_block .title{
    color: var(--color-font-main, #222);
    text-align: center;
    font-size: var(--font-size-h2, 48px);
    font-weight: 500;
    line-height: 125%; /* 60px */
}
.headline_block .title .mark_text{
    color: var(--color-bg-white, #FFF);
}
.headline_block .title .mark_text2{
    color: var(--color-primary-main, #80725C);
}
.headline_block .subtitle{
    color: var(--color-font-main, #222);
    text-align: center;
    font-size: var(--font-size-h4, 24px);
    font-weight: 400;
    line-height: 125%; /* 30px */
}
.section-title {
  margin: 0;
  font-size: var(--font-size-h2, 48px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.section-title-left { text-align: left; }
.section-title-dark { color: var(--color-font-main, #222222); }
.section-title-brown { color: var(--color-primary-darken, #6D614E); }
.section-title-gold { color: var(--color-primary-lighten, #938774); }
/* 共同元素 - 背景 */
.section-cream {
  background:
    url("/images/worksafety/worksafety_bg-cream.png") center / cover no-repeat,
    var(--color-bg-defualt, #FAF7EE);
}
.section-beige {
  background:
    url("/images/worksafety/worksafety_bg-beige.png") center / cover no-repeat,
    var(--color-primary-less, #ECEAE7);
}
.section-dark {
  background:
    url("/images/worksafety/worksafety_bg-dark.png") center / contain no-repeat,
    var(--color-black, #000000);
}
/* 共同元素 - 左圖右文 */
.media-text-grid,
.split-grid {
    display: grid;
    width: 100%;
    max-width: 1280px;
    align-items: start;
    gap: var(--space-1200, 48px);
}
.media-text-grid { 
    grid-template-columns: 0.85fr 1.15fr; 
}
.split-grid { 
    grid-template-columns: 0.9fr 1.1fr; 
}
.media-frame {
    position: relative;
    overflow: hidden;
    margin: 0;
    height: 400px;
    border-radius: 48px 0 48px 0;
    box-shadow: 0 0 8px 0 var(--black-100, #0C0C0D0D);
    background:
        repeating-linear-gradient(135deg,
            var(--color-primary-less, #ECEAE7) 0 12px,
            var(--color-primary-less-2, #F2F0EB) 12px 24px);
}
.split-grid .media-frame{
    height: auto;
}
.split-grid .media-frame .media-image{
    min-height: 560px;
}
.media-image { 
    width: 100%; height: 100%; object-fit: cover; display: block; 
}
.prose-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-400, 16px);
    min-width: 0;
}
.quote {
    margin: 0;
    font-size: var(--font-size-h3, 32px);
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-primary-darken, #6D614E);
    text-wrap: balance;
}
.rule {
    width: 64px;
    height: 2px;
    background: var(--color-primary-lighten, #938774);
}
.prose {
    margin: 0;
    font-size: var(--font-size-body, 18px);
    line-height: 2;
    color: var(--color-font-main, #222222);
    text-wrap: pretty;
}
/* ---------- 平板 720–1099px ---------- */
@media (max-width: 1099px) {
    .media-frame { 
        height: 300px; 
    }
    .media-text-grid,
    .split-grid { 
        grid-template-columns: 1fr; 
        gap: var(--space-600, 24px); 
    }
    .split-grid .media-frame{
        height: 320px;
        min-height: 320px;
    }
    .split-grid .media-frame .media-image{
        min-height: 320px;
    }
}
/* ---------- 手機 <720px ---------- */
@media (max-width: 719px) {
    .media-frame{ 
        border-radius: 24px 0 24px 0; 
    }
    .media-frame { 
        height: 220px; 
    }
    .split-grid .media-frame{
        height: 240px;
        min-height: 240px;
    }
    .split-grid .media-frame .media-image{
        min-height: 240px;
    }
}
/*職業安全衛生政策*/
/*八大政策與管理原則*/
.unit_two .content_block{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-400, 16px);
    width: 100%;
    max-width: 1280px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.unit_two .content_block .card{
    display: flex;
    padding: var(--Card-space-2-V-padding, 16px) var(--Card-space-2-H-padding, 24px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Card-space-2-between-sm, 8px);
    align-self: stretch;
    justify-self: stretch;

    border-radius: 36px 0;
    background: var(--color-white, #FFF);

    /* shadow-sm */
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
}
.unit_two .content_block .card .title_block{
    display: flex;
    align-items: center;
    gap: var(--sds-size-space-400);
    align-self: stretch;
}
.unit_two .content_block .card .title_block h4{
    font-size: var(--font-size-body, 18px);
    line-height: 32px;
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: var(--space-200, 8px);
}
.unit_two .content_block .card .title_block .policy_no{
    color: var(--color-primary-lighten, #938774);
    font-weight: 500;
}
/* ---------- 手機 <720px ---------- */
@media (max-width: 719px) {
    .unit_two .content_block{
        grid-template-columns: 1fr;
    }
    .unit_two .content_block .card {
        padding: var(--space-400, 16px);
    }
}
/* 職業安全衛生管理系統 */
/* 安全第一／健康至上 */
.split-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-600, 24px);
  min-width: 0;
}
.group-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-600, 24px);
}
.group {
  display: flex;
  flex-direction: column;
  gap: var(--space-200, 8px);
}
.group-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-400, 16px);
}
.group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  box-shadow:
    0 10px 15px -3px var(--black-200, #0C0C0D1A),
    0 4px 6px -4px var(--black-200, #0C0C0D1A);
}
.group-icon .material-symbols-rounded {
    font-size: 28px;
    color: var(--color-white, #FFFFFF);
}
.group-icon-gold {
  background: linear-gradient(135deg, #80725C80 0%, var(--color-gold, #80725C) 100%);
}
.group-icon-green {
  background: linear-gradient(135deg, var(--color-darkseagreen, #6F786B) 0%, var(--color-green, #355F43) 100%);
}
.group-icon-gray {
  background: linear-gradient(135deg, var(--color-gray-gray600, #656464) 0%, var(--color-deep-gray, #333333) 100%);
}
.group-title {
  margin: 0;
  font-size: var(--font-size-h4, 24px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-font-main, #222222);
}
.group-title-light { 
    color: var(--color-white, #FFFFFF); 
}
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-200, 8px);
  margin: 0;
  padding: 0 0 0 var(--space-600, 24px);
}
.bullet-item {
  font-size: var(--font-size-body, 18px);
  line-height: 1.85;
  color: var(--color-font-main, #222222);
  text-wrap: pretty;
}
.bullet-item-light { color: var(--color-white-80, #FFFFFFCC); }
/* ---------- 平板 720–1099px ---------- */
@media (max-width: 1099px) {
}
/* ---------- 手機 <720px ---------- */
@media (max-width: 719px) {

}