/* 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: 767px){
    :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);
}
/* 主要 banner */
.main_banner{
    background: url(/images/foodsafety/footsafety_bg1.jpg) top center no-repeat;
    background-size: cover;
}
.main_content_block{
    display: flex;
    padding: var(--sds-size-space-600) 0;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
}
.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 */
}
/* 用數據說話的食安承諾 */
.unit_one{
    background: url(/images/foodsafety/footsafety_bg2.png) center center repeat-y;
    background-size: cover;
    align-items: inherit;
}
.unit_one .content_block{
    display: flex;
    max-width: 1280px;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}
.unit_one .group_block{
    display: flex;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    position: relative;
}
.unit_one .line_block{
    content: '';
    display: flex;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    width: 100%;
    position: absolute;
}
.unit_one .line_block::after{
    content: '';
    height: 1px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 6.3px;
    background: var(--color-secondary-main, #333);
}
.unit_one .item_block{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    z-index: 1;
}
.unit_one .item_block .icon{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.unit_one .item_block .icon > div{
    display: flex;
    width: 40px;
    height: 40px;
    padding: 3px 7px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
    border-radius: 6.3px;
    border: 1px solid var(--color-secondary-main, #333);
    background: var(--color-secondary-main, #333);
}
.unit_one .item_block .icon > div > svg{
    width: 27px;
    height: 27px;
    flex-shrink: 0;
}
.unit_one .item_block .icon::after{
    content: '';
    width: 1px;
    height: 30px;
    border-radius: 6.3px;
    background: var(--color-secondary-main, #333);
}
.unit_one .item_block .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sds-size-space-200);
    align-self: stretch;
}
.unit_one .item_block .content .number{
    color: var(--color-secondary-main, #333);
    text-align: center;
    font-size: var(--font-size-h2, 48px);
    font-weight: 700;
    line-height: 125%; /* 60px */
}
.unit_one .item_block .content .title{
    color: var(--color-primary-main, #80725C);
    text-align: center;
    font-size: var(--font-size-h4, 24px);
    font-weight: 400;
    line-height: 150%; /* 36px */
}
.unit_one .item_block .content .description{
    color: var(--color-secondary-main, #333);
    text-align: center;
    font-size: var(--font-size-body, 18px);
    font-weight: 400;
    line-height: 150%; /* 27px */
}
/*安心饗食 五大守護*/
.unit_two{
    background: url(/images/foodsafety/footsafety_bg3.png) center center repeat-y;
    background-size: cover;
}
.unit_two .content_block{
    display: flex;
    align-items: center;
    gap: var(--sds-size-space-400);
}
.unit_two .area_block{
    display: flex;
    width: 200px;
    padding: var(--sds-size-space-0) 0;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sds-size-space-1600);
}
.unit_two .area_block.area_right{
    align-items: flex-start;
}
.unit_two .area_block .title{
    color: var(--color-primary-main, #80725C);
    font-size: var(--font-size-h4, 24px);
    font-weight: 400;
    line-height: 125%; /* 30px */
}
.unit_two .area_block .description{
    color: var(--color-gray-gray800, #333);
    font-size: var(--font-size-body, 18px);
    font-weight: 400;
    line-height: 125%; /* 22.5px */
}
.unit_two .img_block{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
}
/*從源頭開始的安全把關*/
.unit_three{
    background-color: #DAC9B5;
}
.start_safe_block{
    display: flex;
    width: 100%;
    max-width: 1280px;
    align-items: flex-start;
}
.start_safe_block .owl-carousel {
    touch-action: pan-y;
}
.start_safe_block .owl-carousel .owl-stage {
    display: flex;
    display: -webkit-flex;
}
.start_safe_block .owl-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
    overflow: hidden;
    min-width: 168px;
    border-radius: var(--Corner-Small, 8px);
    background: #FFF;
    box-shadow: var(--sds-size-depth-0) var(--sds-size-depth-025) var(--sds-size-depth-100) var(--sds-size-depth-0) var(--sds-color-black-200), var(--sds-size-depth-0) var(--sds-size-depth-025) var(--sds-size-depth-100) var(--sds-size-depth-0) var(--sds-color-black-100);
}
.start_safe_block .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.start_safe_block .img_block img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 如果圖片比例不同，這可以防止圖片變形 */
    display: block; /* 移除圖片底部的空白間隙 */
}
.start_safe_block .content_block{
    display: flex;
    padding: var(--Card-space-V-padding, 16px) var(--Card-space-H-padding, 16px);
    flex-direction: column;
    align-items: center;
    gap: var(--Card-space-between, 16px);
    align-self: stretch;
    flex-grow: 1; 
}
.start_safe_block .content_block .title{
    color: #000;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 24px;
    font-weight: 500;
    line-height: 125%; /* 30px */
    margin-bottom: 0;
}
.start_safe_block .content_block .description *{
    color: var(--color-secondary-lighten, #656464);
    font-size: var(--font-size-body, 18px);
    font-weight: 400;
    line-height: 150%; /* 27px */
    margin-bottom: 0;
}
.start_safe_block .content_block .description ul{
    padding: 0 0 0 30px;
}
/*冷鏈不中斷的新鮮承諾*/
.unit_four{
    background: url(/images/foodsafety/footsafety_bg4.jpg) center center repeat-y;
    background-size: cover;
}
.unit_four .headline_block .subtitle{
    color: var(--color-primary-main, #80725C);
}
.unit_four .m_top_block{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Unit-space-between, 32px);
    align-self: stretch;
}
.cold_carousel_block{
    display: flex;
    width: 100%;
    max-width: 1280px;
    align-items: flex-start;
}
.cold_carousel_block .owl-carousel {
    touch-action: pan-y;
}
.cold_carousel_block .owl-carousel .owl-stage {
    display: flex;
    display: -webkit-flex;
}
.cold_carousel_block .owl-carousel .owl-item {
    display: flex;
    padding: var(--sds-size-space-600);
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 16px;
    border: var(--stroke-weight-1, 1px) solid var(--color-form-border, #E8E7E6);
    background: var(--color-white, #FFF);
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.cold_carousel_block .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Card-space-2-between-md, 16px);
    flex: 1 0 0;
}
.cold_carousel_block .cold_label_tag{
    display: flex;
    width: 64px;
    height: 64px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--Linear-primary, linear-gradient(135deg, #B5A58B 0%, var(--color-gold, #80725C) 100%));
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.cold_carousel_block .title_block{
    display: flex;
    align-items: center;
    gap: var(--Card-space-2-between-md, 16px);
}
.cold_carousel_block .title_block .title > h4{
    color: var(--color-secondary-main, #333);
    font-family: var(--font-family-Font-1, "Noto Sans TC");
    font-size: var(--font-size-h4, 24px);
    font-weight: var(--font-weight-700, 700);
    line-height: var(--line-height-28, 28px); /* 116.667% */
}
.cold_carousel_block .title_block .title > p{
    color: var(--color-primary-main, #80725C);
    font-size: var(--font-size-tag, 14px);
    font-weight: 500;
    line-height: var(--line-height-20, 20px); /* 142.857% */
}
.cold_carousel_block .description_block{
    color: var(--color-font-main, #222);
    font-size: var(--font-size-body, 18px);
    font-weight: 400;
    line-height: var(--line-height-26, 26px); /* 144.444% */
}
.cold_carousel_block .group_block{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Card-space-2-between-md, 16px);
    align-self: stretch;
}
.cold_carousel_block .group_block .item_block{
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: var(--sds-size-space-200);
    flex: 1 0 0;
    border-radius: 12px;
    background: var(--color-primary-less, #ECEAE7);
}
.cold_carousel_block .group_block .item_block .number_block{
    display: flex;
    align-items: center;
    gap: var(--sds-size-space-200);
}
.cold_carousel_block .group_block .item_block .number_block > svg{
    fill: var(--color-primary-main, #80725C);
    opacity: var(--opacity-100, 1);
}
.cold_carousel_block .group_block .item_block .number_block > h4{
    color: var(--color-primary-main, #80725C);
    font-size: var(--font-size-h4, 24px);
    font-weight: 700;
    line-height: var(--item-spacing-m, 32px); /* 133.333% */
}
.cold_carousel_block .group_block .item_block .description{
    color: var(--color-font-main, #222);
    font-size: var(--font-size-tag, 14px);
    font-weight: 500;
    line-height: var(--item-spacing-16, 16px); /* 114.286% */
}
.unit_four .m_bottom_block{
    background: url(/images/foodsafety/footsafety_bg5.png) center center no-repeat;
    background-size: cover;
    display: flex;
    max-width: 1280px;
    padding: var(--Unit-space-V-padding, 48px) var(--Unit-space-H-padding, 48px);
    flex-direction: column;
    align-items: flex-start;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
}
.unit_four .m_bottom_block .content_block{
    display: flex;
    max-width: 672px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Card-space-between, 16px);
}
.unit_four .m_bottom_block .content_block > .label_tag{
    margin-bottom: 0;
}
.unit_four .m_bottom_block .content_block > h2{
    color: var(--color-white-solid, #FFF);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    font-size: var(--font-size-h2, 48px);
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 60px */
}
.unit_four .m_bottom_block .content_block > p{
    color: var(--color-white, #FFF);
    font-size: var(--font-size-body, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.unit_four .m_bottom_block .content_block .group_block{
    display: flex;
    align-items: flex-start;
    gap: var(--Card-space-between, 16px);
}
.unit_four .m_bottom_block .content_block .group_block a,
.unit_four .m_bottom_block .content_block .group_block a:link{
    display: flex;
    padding: var(--Card-space-V-padding, 16px) var(--Card-space-H-padding, 16px);
    align-items: center;
    gap: var(--Card-space-between, 16px);

    border-radius: 8px;
    border: var(--stroke-weight-1, 1px) solid var(--color-white-10, rgba(255, 255, 255, 0.10));
    background: var(--color-white-30, rgba(255, 255, 255, 0.30));
    backdrop-filter: blur(2px);

    color: var(--color-white-solid, #FFF);
    font-size: var(--font-size-tag, 14px);
    font-weight: 500;
    line-height: var(--line-height-20, 20px); /* 142.857% */
}
/* 以專業標準化 築起食安防線 */
.unit_five {
    background: url(/images/foodsafety/footsafety_bg6.png) center center repeat-y;
    background-size: cover;
}
.unit_five .content_block{
    display: inline-grid;
    max-width: 1280px;
    row-gap: var(--sds-size-space-600);
    column-gap: var(--sds-size-space-600);
    align-self: stretch;
    grid-template-rows:   172px fit-content(100%);
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin: 0 auto;
}
.unit_five .content_block .card{
    display: flex;
    padding: var(--Card-space-2-V-padding, 24px) 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_five .content_block .card .title_block{
    display: flex;
    align-items: center;
    gap: var(--sds-size-space-400);
    align-self: stretch;
}
.unit_five .content_block .card .title_block .program_tag{
    display: flex;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    margin-bottom: 0;
}
.unit_five .content_block .card .title_block .title > h4{
    color: var(--color-black, #000);
    font-family: Gelasio;
    font-size: var(--font-size-h4, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 33.75px; /* 140.625% */
}
.unit_five .content_block .card:nth-child(1) .program_tag{
    background: var(--Linear-primary, linear-gradient(135deg, #B5A58B 0%, var(--color-gold, #80725C) 100%));
}
.unit_five .content_block .card:nth-child(2) .program_tag{
    background: var(--linear-teal, linear-gradient(135deg, var(--color-darkseagreen, #6F786B) 0%, var(--color-green, #355F43) 100%));
}
.unit_five .content_block .card:nth-child(3) .program_tag{
    background: var(--Linear-deeppink, linear-gradient(135deg, var(--color-red, #D54835) 0%, var(--color-darkred, #962C2A) 100%));
}
.unit_five .content_block .card:nth-child(4) .program_tag{
    background: var(--Linear-darkblue, linear-gradient(135deg, var(--color-blue, #007C92) 0%, var(--color-deep-blue, #152D4C) 100%));
}
.unit_five .content_block .card:nth-child(5) .program_tag{
    background: var(--Linear-Purple, linear-gradient(135deg, var(--color-red, #D54835) 0%, var(--color-purple, #A050FF) 100%));
}
.unit_five .content_block .card:nth-child(6) .program_tag{
    background: var(--Linear-green, linear-gradient(135deg, var(--color-green, #355F43) 0%, var(--color-deep-green, #004339) 100%));
}
.unit_five .content_block .card .description_block{
    color: var(--color-font-sub, #656464);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
/* 科學守護 */
.unit_six{
    background: url(/images/foodsafety/footsafety_bg7.png) center center no-repeat;
    background-size: cover;
}
.unit_six .headline_block .title{
    color: var(--color-white, #FFF);
}
.unit_six .headline_block .subtitle{
    color: var(--color-white, #FFF);
}
.technology_block{
    display: flex;
    width: 100%;
    max-width: 1280px;
    align-items: flex-start;
}
.technology_block .owl-carousel {
    touch-action: pan-y;
}
.technology_block .owl-carousel .owl-stage {
    display: flex;
    display: -webkit-flex;
}
.technology_block .owl-carousel .owl-item {
    display: flex;
    padding: var(--sds-size-space-0);
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 16px;
    border: var(--stroke-weight-1, 1px) solid var(--color-grey-96, #ECFEFF);
    background: var(--color-white, #FFF);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}
.technology_block .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sds-size-space-0);
    flex: 1 0 0;
    align-self: stretch;
}
.technology_block .item .img_block{
    width: 100%;
}
.technology_block .item .content_block{
    display: flex;
    padding: var(--Card-space-2-V-padding, 24px) var(--Card-space-2-H-padding, 24px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Card-space-2-between-md, 16px);
    align-self: stretch;
}
.technology_block .item .content_block .title_block{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Card-space-2-between-sm, 8px);
}
.technology_block .item .content_block .title_block h4{
    color: var(--color-secondary-main, #333);
    font-size: var(--font-size-h4, 24px);
    font-weight: 700;
    line-height: var(--line-height-28, 28px); /* 116.667% */
}
.technology_block .item .content_block .title_block p{
    color: var(--color-primary-main, #80725C);
    font-size: var(--font-size-body, 18px);
    font-weight: 500;
    line-height: var(--line-height-20, 20px); /* 111.111% */
}
.technology_block .item .content_block .description{
    color: var(--color-font-main, #222);
    font-size: var(--font-size-body, 18px);
    font-weight: 400;
    line-height: var(--line-height-26, 26px); /* 144.444% */
}
/* 清潔守護 */
.unit_seven {
    background: url(/images/foodsafety/footsafety_bg8.png) center center repeat-y;
    background-size: cover;
}
.unit_seven > .content_block{
    display: inline-grid;
    max-width: 1280px;
    row-gap: var(--Card-space-2-between-lg, 24px);
    column-gap: var(--Card-space-2-between-lg, 24px);
    align-self: stretch;
    grid-template-rows: repeat(2,fit-content(100%));
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin: 0 auto;
}
.unit_seven .card{
    display: flex;
    padding: var(--sds-size-space-0);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sds-size-space-0);

    border-radius: 16px;
    background: var(--color-white, #FFF);
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}
.unit_seven .card:nth-child(1){
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}
.unit_seven .card .img_block{
    position: relative;
    height: 256px;
    width: 100%;
    background-size: cover;
}
.unit_seven .card .img_block .label_clean_tag{
    display: flex;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--Linear-primary, linear-gradient(135deg, #B5A58B 0%, var(--color-gold, #80725C) 100%));
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 1;
}
.unit_seven .card .img_block .title_block{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sds-size-space-100);
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 1;
}
.unit_seven .card .img_block .title_block > h4{
    color: var(--color-white, #FFF);
    font-size: var(--font-size-h4, 24px);
    font-weight: 700;
    line-height: var(--line-height-28, 28px); /* 116.667% */
}
.unit_seven .card .img_block .title_block > p{
    color: var(--color-primary-less, #ECEAE7);
    font-size: var(--font-size-body, 18px);
    font-weight: 500;
    line-height: var(--line-height-20, 20px); /* 111.111% */
}
.unit_seven .card .img_block::after{
    content: '';
    background: linear-gradient(0deg, var(--color-black-60, rgba(0, 0, 0, 0.60)) 0%, var(--color-black-20, rgba(0, 0, 0, 0.20)) 50%, var(--color-black-0, rgba(0, 0, 0, 0.00)) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.unit_seven .card .content_block{
    display: flex;
    padding: var(--Card-space-2-V-padding, 24px) var(--Card-space-2-H-padding, 24px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Card-space-2-between-md, 16px);
    align-self: stretch;
}
.unit_seven .card .content_block .description{
    color: var(--color-font-main, #222);
    font-size: var(--font-size-body, 18px);
    font-weight: 400;
    line-height: var(--line-height-26, 26px); /* 144.444% */
}
.unit_seven .card .content_block .group_block{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Card-space-2-between-md, 16px);
    align-self: stretch;
}
.unit_seven .card .content_block .group_block .item{
    display: flex;
    padding: var(--Card-space-V-padding, 16px) var(--Card-space-H-padding, 16px);
    flex-direction: column;
    align-items: center;
    gap: var(--Card-space-2-between-sm, 8px);
    flex: 1 0 0;
    border-radius: 12px;
    background: var(--color-primary-less, #ECEAE7);
}
.unit_seven .card .content_block .group_block .item > h4{
    color: var(--color-primary-main, #80725C);
    font-size: var(--font-size-h4, 24px);
    font-weight: 700;
    line-height: var(--item-spacing-m, 32px); /* 133.333% */
}
.unit_seven .card .content_block .group_block .item > p{
    color: var(--color-font-main, #222);
    font-size: var(--font-size-body, 18px);
    font-weight: 500;
    line-height: var(--item-spacing-16, 16px); /* 88.889% */
}
/* 攜手守護食安 */
.unit_eight{
    background: url(/images/foodsafety/footsafety_bg9.png) center center no-repeat;
    background-size: cover;
}
.unit_eight::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.60);
    width: 100%;
    height: 100%;
}
.unit_eight .content_block{
    position: relative;
    display: flex;
    max-width: 1032px;
    padding: var(--sds-size-space-0);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Card-space-2-between-md, 16px);
    z-index: 1;
    color: #FFF;
}
.unit_eight .content_block .title_block{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sds-size-space-0);
}
.unit_eight .content_block .title_block *{
    color: #FFF;
}
.unit_eight .content_block .title_block > h2{
    color: var(--color-white-solid, #FFF);
    font-size: var(--font-size-h2, 48px);
    font-weight: 500;
    line-height: 150%; /* 72px */
}
.unit_eight .content_block .title_block > h4{
    color: var(--color-white-solid, #FFF);
    font-size: var(--font-size-h4, 24px);
    font-weight: 400;
    line-height: 150%; /* 36px */
}
.unit_eight .content_block .discription{
    color: var(--color-white-solid, #FFF);
    font-size: var(--font-size-body, 18px);
    font-weight: 400;
    line-height: 28.8px; /* 160% */
}
@media only screen and (max-width: 992px){
    .unit_five .content_block{
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
@media only screen and (max-width: 767px){
    .unit_section{
        min-height: 320px;
        padding: var(--Unit-space-V-padding, 24px) var(--Unit-space-H-padding, 16px);
        gap: var(--Unit-space-between, 16px);
    }
    /*安心饗食 五大守護*/
    .unit_two{
        display: none;
    }
    /* 用數據說話的食安承諾 */
    .unit_one .content_block{
        margin: 0;
    }
    .unit_one .group_block{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        align-self: stretch;
    }
    .unit_one .line_block{
        display: none;
    }
    .unit_one .item_block{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: var(--Card-space-2-between-md, 8px);
        align-self: stretch;
    }
    .unit_one .item_block .icon{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        margin: 0;
    }
    .unit_one .item_block .content{
        display: flex;
        padding-bottom: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sds-size-space-200);
        flex: 1 0 0;
    }
    .unit_one .item_block .icon::after{
        height: calc(100% - 40px);
    }
    /*從源頭開始的安全把關*/ 
    /*冷鏈不中斷的新鮮承諾*/
    .unit_four{
        padding: 0;
        gap: 0;
    }
    .unit_four .m_top_block{
        min-height: 320px;
        padding: var(--Unit-space-V-padding, 24px) var(--Unit-space-H-padding, 16px);
        gap: var(--Unit-space-between, 16px);
    }
    .unit_four .m_bottom_block{
        border-radius: 0;
        padding: var(--Unit-space-V-padding, 24px) var(--Unit-space-H-padding, 16px);
    }
    .unit_four .m_bottom_block .content_block{
        gap: var(--Card-space-between, 8px);
    }
    .unit_four .m_bottom_block .content_block > p{
        font-size: var(--font-size-body, 16px);
    }
    .cold_carousel_block .title_block{
        gap: var(--Card-space-2-between-md, 8px);
    }
    .cold_carousel_block .description_block{
        font-size: var(--font-size-body, 16px);
    }
    .cold_carousel_block .group_block .item_block .number_block > h4{
        font-size: var(--font-size-h4, 18px);
    }
    /* 以專業標準化 築起食安防線 */
    .unit_five .content_block{
        display: flex;
        max-width: 1280px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Card-space-2-between-lg, 12px);
        align-self: stretch;
    }
    .unit_five .content_block .card{
        padding: var(--Card-space-2-V-padding, 16px) var(--Card-space-2-H-padding, 16px);
        gap: var(--Card-space-2-between-sm, 4px);
    }
    /* 科學守護 */
    .technology_block .item .content_block{
        padding: var(--Card-space-2-V-padding, 16px) var(--Card-space-2-H-padding, 16px);
        gap: var(--Card-space-2-between-md, 8px);
    }
    .technology_block .item .content_block .title_block{
        gap: var(--Card-space-2-between-sm, 4px);
    }
    /* 清潔守護 */
    .unit_seven > .content_block{
        display: flex;
        max-width: 1280px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Card-space-2-between-lg, 12px);
        align-self: stretch;
    }
    .unit_seven .card{
        width: 100%;
    }
    .unit_seven .card .content_block{
        padding: var(--Card-space-2-V-padding, 16px) var(--Card-space-2-H-padding, 16px);
        gap: var(--Card-space-2-between-md, 8px);
    }
}