:root{
    --main:#2e6375;
    --lightGreen:rgba(118,163,102,1);
    --green:rgba(0,128,35,1);
    --drakGreen:rgba(41,104,0,1);
    --varyDrakGreen:rgba(33,71,48,1);
    --yellowGreen:rgba(115,131,92,1);
    --menubackground:rgba(91,128,82,1);
    --menuhover:rgba(110,155,100,1);
    --lightCoffee:rgba(201,162,125,1);
    --coffee:rgba(173,146,93,1);
    --drakCoffee:rgba(127,114,85,1);
    --superDrakCoffee: rgba(122,95,35,1);
    --yellow:rgba(255,240,0,1);
    --black:rgba(70,70,70,1);
    --gray:rgba(158,158,158,1);
    --lightGray: rgba(240,240,240,1);
}

body{margin: 0; padding: 0; box-sizing: border-box; color:var(--black)}

h1,h2,h3,h4,h5,h6{font-family: 'Noto Sans TC','微軟正黑體'; font-weight: 400;}
h1{font-size:48pt; }
h2{font-size:36pt;}
h3{font-size:27pt;}
h4{font-size:18pt;}
h5{font-size:14pt;}
h6{font-size:13pt;}

.displayRow_left_center{
    display: flex; 
    flex-direction: row;
    justify-content: flex-start; 
    align-items: center;
    flex-wrap: nowrap;
}
.displayRow_left_top{
    display: flex; 
    flex-direction: row;
    justify-content: flex-start; 
    align-items: flex-start;
    flex-wrap: nowrap;
}

.displayRow_right_center{
    display: flex; 
    flex-direction: row;
    justify-content: flex-end; 
    align-items: center;
    flex-wrap: nowrap;
}

.displayRow_center_center{
    display: flex; 
    flex-direction: row;
    justify-content: center; 
    align-items: center;
    flex-wrap: nowrap;
}

.displayColumn_right_center{
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items:flex-end;
    flex-wrap: wrap;
}

.displayColumn_left_center{
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items:flex-start;
    flex-wrap: wrap;
}

.displayColumn_left_top{
    display: flex; 
    flex-direction: column;
    justify-content: flex-start; 
    align-items:flex-start;
    flex-wrap: wrap;
}

.displayColumn_center_top{
    display: flex; 
    flex-direction: column;
    justify-content: flex-start; 
    align-items:center;
    flex-wrap: wrap;
}

a{text-decoration: none;}

/**/
.caption_font{ color:var(--green); line-height: 1.5; font-weight: 700; margin: 0;}
.subCaption_font{color:var(--coffee);}
.contents_font{color:var(--black); line-height: 1.5; font-weight: 400;}
.caption_coffee{color:var(--coffee);}
.contation_bg_gray{background-color:var(--lightGray)}

/*line*/
.caption_sep{width:30%;height:1px; border-bottom:1px var(--green) solid; margin: 30px 0}
.caption_underline{ width:10%; height:1px; border-bottom:1px var(--green) solid; margin: 5px 0;}
.caption_underline_brand{ width:30%; height:1px; border-bottom:1px var(--green) solid; margin: 10px auto;}
.caption_underline_svlk{width:30%; height:1px; border-bottom:1px var(--green) solid; margin: 10px auto;}
.banner_sep{width:100%;height:1px; border-bottom:1px var(--green) solid; margin: 30px 0}


/* 麵包削 路徑 */
#breadcrumb_container{ width: 100%; text-align: center;padding:20px 0}
#breadcrumb_container > ul{
    display: inline-flex; flex-direction: row; justify-content: center; flex-wrap: nowrap; list-style: none;
    gap:20px; margin: 0; padding: 0;
}
#breadcrumb_container > ul > li{
    display:inline-block; position: relative;
}
#breadcrumb_container > ul > li:nth-child(n+2)::before{
    content: "/"; 
    position: absolute;
    left:-10px; top:50%; transform: translateY(-40%);
}
#breadcrumb_container > ul > li > a{color:var(--gray)}
#breadcrumb_container > ul > li > a:hover{color:var(--drakCoffee)}
#breadcrumb_container > ul > li > a h5{margin: 0;}

/*內容標題有//////的 */
.caption_container{width: 100%; padding:0%; display: flex; justify-content: center; align-items: center;}
.caption_area{ 
    width: 100%; max-width: 1600px; margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap;
    gap:20px;
 }
.caption_area > li{padding:0; }
.caption_area > li:nth-child(1),.caption_area > li:nth-child(3){ 
    flex:0 0 1; overflow-x: hidden;
}

.caption_area > li:nth-child(2){flex:0 0 auto;}
.caption_area > li:nth-child(2) > h3{ width: max-content;margin: 0 auto; position: relative; white-space: nowrap;}

.caption_area > li:nth-child(1) > div, .caption_area > li:nth-child(3) > div{
    width: 100%; display:flex; flex-direction: row; align-items: center;
}
.caption_area > li:nth-child(1) > div{justify-content: flex-end;}
.caption_area > li:nth-child(3) > div{justify-content: flex-start;}
.caption_area > li:nth-child(1) > img, .caption_area > li:nth-child(3) > img{min-width: 100%; height:auto}
/**/

.content_container_0p, .content_container_5p{
    width: 100%; display:flex; flex-direction: row; justify-content: center; align-items: flex-start;
}

.content_container_0p{ padding:0px 0; }
.content_container_5p{ padding:0px 5%;}

.content_area{width: 100%; max-width: 1400px; }

.imgarea{width: 100%;}
.imgarea > img{width:100%; display: block; height:auto}



@media screen and ( max-width:1023px ){
    h1{font-size:42pt; }
    h2{font-size:31pt;}
    h3{font-size:24pt;}
    h4{font-size:15pt;}
    h5{font-size:12pt;}
    h6{font-size:10pt;}

    #breadcrumb_container{padding:10px 0}
    .caption_sep{margin: 15px 0;}
    .banner_sep{margin: 20px 0;}
}

@media screen and ( max-width:959px ){
    .banner_sep{margin: 15px 0;}
}

@media screen and ( max-width:767px ){
    h1{font-size:48pt; }
    h2{font-size:31pt;}
    h3{font-size:21pt;}
    h4{font-size:16pt;}
    h5{font-size:12pt;}
    h6{font-size:11pt;}
}