/*.aa,.bb,.cc{width: 100%; height:1px; border:1px #c00 solid; position: absolute; top:0; z-index: 99;}
.dd,.ee,.ff{width: 100%; height:1px; border:1px #00c solid; position: absolute; top:0; z-index: 99;}
.gg,.hh,.ii{width: 100%; height:1px; border:1px #c0c solid; position: absolute; top:0; z-index: 99;}
.xx{width: 100%; height:1px; border:1px #0cc solid; position: absolute; top:0; z-index: 99;}
*/

#certification_banner_container{ width: 100%; display: block; position: relative; margin: 0; padding: 0; }
#certification_banner_container > img{ width: 100%; display: block;}
#certification_banner_container > div{
    position: absolute; width: 100%; max-width: 550px; left:50%;
    top:50%; transform: translate(-50%,-50%); text-align: center;
}

#certification_banner_container > div > h2{ color:var(--lightCoffee); margin: 0;}
#certification_banner_container > div > h4{ color:#fff; margin: 0; font-weight: 300; letter-spacing: 1pt;}
#certification_banner_container > div > .certification_banner_sep{
    width:100%; height:1px; border-bottom:1px var(--lightCoffee) solid; margin: 20px 0;
}

.guaranteed_area{
    width: 100%; max-width: 1400px; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; 
    gap: 30px; padding:60px 0;
 }
.guaranteed_imgs{flex:1 1 30%; }
.guaranteed_imgs > img{width: 100%; display:block;}
.guaranteed_data{flex:1 1 70%; }

.guaranteed_slogan_en{ 
    color:#fff; 
    text-shadow: 
    1px 1px 0px var(--lightCoffee), 
    -1px -1px 0px var(--lightCoffee),
    1px -1px 0px var(--lightCoffee),
    -1px 1px 0px var(--lightCoffee);
    margin: 0;
    font-family: 'arial'; font-weight: bold; letter-spacing: 1pt;
}

.guaranteed_content_area{display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap:80px;}
.guaranteed_content_area > .data_area{ flex:1 1 75%;}
.guaranteed_content_area > .data_area > .caption{
    margin: 20px 0; padding:5px; border-top:1px var(--lightCoffee) solid; border-bottom:1px var(--lightCoffee) solid;
    background:linear-gradient(to right,#8e7234 0%, #a8802f 40%, #d5ba41 70%, #8e7234 100%);
    font-weight: 700; font-size:25pt;
    background-clip: text; color:transparent; display: inline-block;
}
.guaranteed_content_area > .data_area > .text{ margin: 0; line-height: 1.8; text-align: justify; letter-spacing: 1pt;}
.guaranteed_content_area > .data_download{flex:1 1 25%;}


.guaranteed_content_area > .data_download > div{
    display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 160px;
    margin-top:10px;
}

.guaranteed_content_area > .data_download > div > img{ width: 100%; min-width:160px ;height:auto; display:block}
.guaranteed_content_area > .data_download > div > a{ 
    display:flex; flex-direction: row; justify-content: flex-start;
    align-items: center; width: 100%; gap:10px; margin-top:5px; line-height: 1.2;
    color:var(--black);
}
.guaranteed_content_area > .data_download > div > a:hover{color:#c00}

.guaranteed_content_area > .data_download > div > a > h6{margin: 0; flex:1 1 1;}
.guaranteed_content_area > .data_download > div > a > span{
    flex:0 0 21px; height:24px; position: relative; overflow: hidden;
}
.guaranteed_content_area > .data_download > div > a > span > img{
    width: 21px; display: block;
    position: absolute; top:0; left:0;
}
.guaranteed_content_area > .data_download > div > a:hover > span > img{ top: -24px;}



.process_area{
    width: 100%; padding:0px 5%; position: relative;
    display: flex; flex-direction: row; justify-content: center; align-items: center;
}

.process_data{
    width: 100%; max-width: 690px; padding:50px; border:5px var(--menubackground) solid;
    border-radius: 20px; background-color: #fff; margin:0 auto; position: relative;
    z-index: 1; box-shadow: 0px 0px 4px 0px var(--black);
}
.process_data > .process_caption{
    display: inline-block;
    background-color: var(--menubackground); position: absolute; 
    top:0; left:50%; transform: translate(-50%,-50%); padding:5px 25px; border-radius: 25px;
    text-align: center;
    white-space: nowrap;
}

.process_data > .process_caption > h3{margin: 0; color:#fff; font-size:24pt;}

.process_data > .process_text{ width: 100%;}
.process_data > .process_text > h5{margin: 0; line-height: 1.8;}

.process_bg{ 
    background-color: var(--varyDrakGreen); position: absolute; z-index: -1;
    top:50%; left:0; width: 100%; height:75%; transform: translateY(-50%);
}

.display_process_area{
    width: 100%; max-width:1400px; padding:60px 0%; position: relative;
    display: flex; flex-direction: row; justify-content: center; align-items: center;
}
.process_display{
    list-style: none; margin: 0;padding: 0; display: flex; flex-direction: row; justify-content: center;
    width: 95%; gap:50px;
}
.process_display > li{
    flex:0 0 calc(100% / 5 - (50px * 4 / 5 )); 

}
.process_display > li > div.origin{ 
    width:92%; padding:15px 0px;
    text-align: center; 
    position: relative; 
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px;
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px;
}
.process_display > li > div.origin > img{ width: 100%; max-width: 158px; display: block; margin: 0 auto;}
.process_display > li > div.origin > .origin_arrow{
    position: absolute; 
    transform: translate(-0%,-50%);  top:50%; left: calc(100% - 0.5px);
    width: 40px;
    height: 100%;
    /* clip-path: polygon(中心點, 左下角, 右下角); 製作一個向上的三角形 */
    clip-path: polygon(0% 4%, 50% 50%, 0% 96%);
    }

.origin_bg1{ background-color: #8e7234;}
.origin_bg2{ background-color:#467380}
.origin_bg3{ background-color: #4c9285;}
.origin_bg4{ background-color:#4c832a}
.origin_bg5{ background-color:#b19500}


.process_display > li > div.text{ width: 100%; margin-top:5px}
.process_display > li > div.text > h4{ 
     margin:0; font-size:16pt; text-align: center;
}

#svlk_container_area{padding:80px 0; width:100%; max-width: 1400px; gap:30px}
.svlk_caption_area{ width: 100%;}
.svlk_caption_area > h3{ text-align: center; margin: 0 auto; width: max-content; }

.svlk_display_area{
    width: 100%;
    display: flex; flex-direction: row; justify-content: center; align-items: stretch;
    gap:50px;
    
}

.svlk_display_area > .svlk_img_area, .svlk_display_area > .svlk_data_area{ flex:1; }


.svlk_display_area > .svlk_img_area > ul{
    display: flex; width: 100%; list-style: none; padding: 0; margin: 0;
    flex-direction: column; justify-content: flex-start; align-items: center;
    gap:30px;
}

/**/.svlk_display_area > .svlk_img_area > ul > li{width: 100%;}

.svlk_display_area > .svlk_img_area > ul > li > .text{ width: 100%;padding:10px 0; display:none}
.svlk_display_area > .svlk_img_area > ul > li > .text > h3{margin: 0;}
.svlk_display_area > .svlk_img_area > ul > li > .text > h4{margin: 0; font-weight: 700; font-size:24pt}
.svlk_display_area > .svlk_img_area > ul > li > .text > h5{margin: 0; text-align: justify;}

.svlk_data_area > .svlk_item_area{ 
    width: 100%; 
    max-width: 500px;
    position: absolute;
    top:100%;
    /*border:1px #c00 solid;*/
    transition: opacity .2s linear, height .2s linear;
    opacity: 0;

}
.svlk_data_area > .svlk_item_area > .imgarea > img{ width: 100%; max-width: 90%; display:block}
.svlk_data_area > .svlk_item_area > .svlk_item_text_area{position: relative;}


.svlk_data_area > .svlk_item_area > .svlk_item_text_area > .svlk_item_text{
    max-width:500px; padding: 20px 0; opacity: 0; transition: opacity .2s linear; 
    position: absolute; top:0; left:0;
}

.svlk_data_area > .svlk_item_area > .svlk_item_text_area > .svlk_item_text.hover{
    opacity: 1; z-index: 1;
}

.svlk_data_area > .svlk_item_area > .svlk_item_text_area > .svlk_item_text:nth-child(1){ 
     position: relative; 
}


.svlk_data_area > .svlk_item_area > .svlk_item_text_area > .svlk_item_text > h4{margin: 0; font-size:25pt; font-weight:700; line-height: 1.8;}
.svlk_data_area > .svlk_item_area > .svlk_item_text_area > .svlk_item_text > h5{margin: 0; line-height: 1.5; font-size:15pt}

#wood_introduce_container{
    width: 100%; max-width: 1400px; border:0px #c00 solid ; padding:80px 0; gap:30px;
}


.wood_introduce_caption_area{ width: 100%;padding:0 5%;}
.wood_introduce_caption_area > h3{ text-align: center; margin: 0 auto; width: max-content; }

.wood_introduce_content_area{
    width: 100%; 
    position: relative;
    display: flex; flex-direction: row; justify-content: center; align-items: center;
}

.wood_introduce_scroll_area{ 
    width: 95%; position: relative;
    overflow: hidden;
}

.wood_introduce_content_area > .wood_introduce_left_arrow,
.wood_introduce_content_area > .wood_introduce_right_arrow{ 
    position: absolute; top:50%; transform: translate(-50%,-50%);
    width:40px; height:auto; padding:10px; display: flex; justify-content: center; align-items: center;
    background-color: #299600; border-radius: 10px;
}

.wood_introduce_content_area > .wood_introduce_left_arrow{ left: 0%;}
.wood_introduce_content_area > .wood_introduce_right_arrow{ left: 100%;}


.left_arrow, .right_arrow{
    fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;
    width: 100%;
}

.left_arrow:hover, .right_arrow:hover{stroke: #fff;}


.wood_introduce_scroll_area > ul{
    display:flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap;
    padding: 0; margin: 0; list-style: none; gap:0px; border:0px #c00 solid;
    min-width: 100%; transition: left .2s linear; position: relative;
    margin:20px 0;}


.wood_introduce_scroll_area > ul > li{
    flex: 0 0 calc(100% / 3); border:0px #c00 solid;
    padding: 0 2%;
    text-align: center;
}

.wood_introduce_scroll_area > ul > li > .text{ padding:10px 0; margin-bottom: 10px;}
.wood_introduce_scroll_area > ul > li > .text > .caption{ width: 100%;}
.wood_introduce_scroll_area > ul > li > .text > .caption > h4{ 
    position: relative; text-align: center; margin:0; display: block;
    font-size:21pt; font-weight: 700; padding:20px 0;
}

.wood_introduce_scroll_area > ul > li > .text > .caption > h4::after,
.wood_introduce_scroll_area > ul > li > .text > .caption > h4::before{
    content:'';
    width:28%; height:2px; border-top:1px var(--coffee) solid;
    top:50%; position: absolute;
}

.wood_introduce_scroll_area > ul > li > .text > .caption > h4::after{right: 0;}
.wood_introduce_scroll_area > ul > li > .text > .caption > h4::before{left: 0;}
.wood_introduce_scroll_area > ul > li > .text > h5{ 
    margin: 0; line-height: 1.8;
    text-align: left;
    display: -moz-box;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;

}

.index_more{display:inline-block;}
 .index_more > a{
    background-color: var(--green); color:#fff; padding:10px 25px; border-radius: 20px;
    font-size:14pt; position: relative; transition: all .2s linear;
}
 .index_more > a::after{
    content:"→";border:1px #fff solid; border-radius: 30px; width: 21px; height:21px;
    font-size:10pt; display:inline-flex; justify-content: center; align-items: center;
    margin:0 0 0 5px; top:-1px; position: relative; font-weight: bold; 
    font-family: 'Noto Sans TC','微軟正黑體';
}
.index_more > a:hover{ color:var(--yellow); background-color: var(--drakGreen);}
.index_more > a:hover::after{border:1px var(--yellow) solid; 
}


@media screen and ( max-width:1279px ) {
    .guaranteed_content_area{gap:40px}
    .guaranteed_data{ flex: 1 1 50%;}
    .guaranteed_slogan_en{font-size:21pt}
    .guaranteed_content_area > .data_area > .caption{
        font-size:24pt;
    }
    .wood_introduce_content_area > ul > li > .text > .caption > h4{font-size:18pt}
    .wood_introduce_scroll_area > ul > li > .text > .caption > h4{font-size: 16pt;}
    /*.wood_introduce_content_area > ul{gap:50px}*/
    .svlk_data_area{display: none;}
    .svlk_display_area > .svlk_img_area > ul > li > .text{display: block;}
    .svlk_display_area > .svlk_img_area > ul > li > .text > h4{ font-size:19pt; text-align: center;}
    .svlk_display_area > .svlk_img_area > ul > li > .text > h5{font-size:14pt;}

    .svlk_display_area > .svlk_img_area, 
    .svlk_display_area > .svlk_data_area{
        flex:0 0 80%;
    }

    #svlk_container_area{padding:50px 0}
}

@media screen and ( max-width:1023px ) {
    .guaranteed_content_area{gap:40px}
    .guaranteed_data{ flex: 1 1 50%;}
    .guaranteed_slogan_en{font-size:21pt}
    .guaranteed_content_area > .data_area > .caption{
        font-size:22pt;
    }
    #wood_introduce_container{padding:50px 0}
    .svlk_data_area > .svlk_item_area > .svlk_item_text_area > .svlk_item_text > h4{line-height: 1.4; font-size:20pt}
    .svlk_data_area > .svlk_item_area > .svlk_item_text_area > .svlk_item_text > h5{ margin:10px 0;}

    .wood_introduce_content_area > ul > li > .text > .caption > h4{font-size: 16pt;}
    .process_data > .process_caption > h3{font-size:21pt}
    
}

@media screen and ( max-width:959px ){
    .guaranteed_area{
        flex-direction: column;
    }
    .guaranteed_slogan_en{font-size:24pt}
    .guaranteed_content_area > .data_area > .caption{font-size:24pt}

    .process_display{ flex-wrap: wrap;}
    .process_display > li{ flex: 0 0 calc(100% / 3 - (50px * 2 / 3))}
}

@media screen and ( max-width:767px ) {
    #certification_banner_container{
        overflow: hidden; display: flex; flex-direction: row; justify-content: center; align-items: center;}
    #certification_banner_container > div{
        padding: 0 5%;
    }
    
    #certification_banner_container > div > h2{padding:0 5%;}
    #certification_banner_container > img{ height:300px; width: auto;}

    .process_data{padding:30px}

    .process_display{ flex-wrap: wrap; gap:40px}
    .process_display > li{ flex: 0 0 calc(100% / 3 - (40px * 2 / 3))}

    .svlk_display_area{gap:20px}
    .wood_introduce_scroll_area{ width: 85%;}
    .wood_introduce_scroll_area > ul > li{ 
         min-width: calc(100% / 2);
    }

    .svlk_display_area > .svlk_img_area, 
    .svlk_display_area > .svlk_data_area{
        flex:1;
    }

    .display_process_area{padding: 50px 0 20px}
    #wood_introduce_container{padding:20px 0; gap:0}
    
}

@media screen and ( max-width:589px ){
    .guaranteed_content_area{ flex-direction: column; justify-content: center; align-items: center;
    gap:20px}
    .guaranteed_content_area > .data_area{
        flex:1 1 100%;
    }
    .guaranteed_content_area > .data_download > div{ max-width: 300px; width: 100%; }

    .process_display > li > div.text > h4{font-size:14pt}

    .wood_introduce_content_area > .wood_introduce_left_arrow,
    .wood_introduce_content_area > .wood_introduce_right_arrow{
        width: 30px; padding:7px;
    }

    .wood_introduce_scroll_area > ul > li > .text > .caption > h4{
        font-size:16pt; padding: 5px 0;
    }

    .guaranteed_area{padding:30px 0 50px}
    #svlk_container_area{padding:30px 0}
    #wood_introduce_container{padding: 30px 0; gap: 0;}
    .svlk_display_area > .svlk_img_area > ul > li > .text > h4{
        font-size:18pt;
    }
    .svlk_display_area > .svlk_img_area > ul > li > .text > h5{
        font-size:12.5pt;
    }
}

@media screen and ( max-width:449px ){
    .process_display{ flex-wrap: wrap; gap:40px}
    .process_display > li{ flex: 0 0 calc(100% / 2 - (40px / 2 ))}
    .process_display > li > div.text > h4{font-size:16pt}

    .index_more > a{padding:8px 10px}

    .wood_introduce_scroll_area > ul > li{ min-width: 100%;}

    .guaranteed_slogan_en{font-size:18pt}
    .guaranteed_content_area > .data_area > .caption{
        font-size: 18pt;
    }
    .wood_introduce_scroll_area > ul > li > .text > .caption > h4{
        font-size:18pt
    }
.process_data > .process_caption > h3{font-size: 18pt;}
    .process_display > li > div.text > h4{font-size:14pt}
    #certification_banner_container > div > h2{font-size:24pt}
    #certification_banner_container > div > h4{font-size: 13pt;}

    .process_display{ flex-wrap: wrap; gap:30px}

    .wood_introduce_content_area > .wood_introduce_left_arrow{ left:2%}
    .wood_introduce_content_area > .wood_introduce_right_arrow{left:98%}
}