.caption_font{ color:var(--green); line-height: 1.5; font-weight: 700; margin: 0;}
.contents_font{color:var(--black); line-height: 1.5; font-weight: 400;}
.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: 0px 0;margin: 5px 0;}


.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; user-select: none;
}

.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; 
}

#banner_container{ width: 100%;}
#banner_container > .banner_area{ 
    border:0px #c00 solid;
    width: 100%;
    text-align: right;
}
#banner_container > .banner_area > .left_banner > .leaf{
    position: absolute; 
    left:-40%;
    top:96%;
    width: 45%;
}

#banner_container > .banner_area > .left_banner > .leaf > img{
    width: 100%; display: block; height: auto;
}

#banner_container > .banner_area > .left_banner{
    position: absolute; 
    left:17%;
    top:0;
    width:28%;
    background-color: #eee;
}
#banner_container > .banner_area > .left_banner > img{
    width: 100%;
    display: block;
    height: auto;
}
#banner_container > .banner_area > .right_banner{
    position: relative;
    right:0; top:0;
    background-color: #eee;
    width: 41%;
    z-index: 1;
}
#banner_container > .banner_area > .right_banner > img{
    width: 100%;
    display: block;
    height: auto;
}

#banner_container > .banner_area > .slogen_area{
    position: absolute; 
    left:50%;
    transform: translateX(-20%);
    writing-mode:vertical-rl;
    text-align: left;
    top:20%;
    letter-spacing: 2px;

}
#banner_container > .banner_area > .slogen_area > .slogen_caption{
    font-size:41pt;
    font-family: 'Noto Sans TC','微軟正黑體';
    font-weight: 600;
    color:var(--green)
}
#banner_container > .banner_area > .slogen_area > .slogen_description{
    font-size:21pt;
    font-family: 'Noto Sans TC','微軟正黑體';
    font-weight: 400;
}

#brand_container{ 
    width: 100%; overflow: hidden;
    background-color: #f2f2f2; position: relative; 
    top:-30px; padding:70px 5%;
 }

 #brand_container > .brand_area{
    display: flex; flex-direction: row; justify-content: center; 
    align-items: center; flex-wrap: nowrap;
    width: 100%; text-align: left; gap:50px;
 }
/*.brand_img{ }*/
.brand_img > img{display:block; width: 100%; height: auto;}
.brand_content{flex:30%; min-width: 300px; }
.brand_txt{
    color:var(--black); line-height: 1.5; font-weight: 400;
    font-size:14pt; margin:20px 0; display: block;
}
 .index_wood{position: absolute; left:0%;top: 50%; width: 24vw;}
 .index_wood > img{width: 170%;height: auto;}
 /*.index_wood > img{width: 100%;}*/

 .index_years_area{flex:35%; position: relative; top:-120px; }
 .index_years{
    font-size:24vw; font-family: 'arial';font-weight: 700; 
    line-height: .8;color:#d8e8e2; width: 100%;
}
 .index_years > .index_years_txt{
    font-size:1.1vw; font-weight: 300;text-align: right;
    width: 24vw; position: absolute; left:0%; top:30%;
    line-height: 1.2;color:#6a6a6a;
    padding-right:10%;
 }

 


#index_svlk_container{
    width:100%; padding:5% 5%; 
    background-image: url("../public/parset/svlk_background.jpg");
    position: relative; top:-30px;
    margin: 0;
}

.index_svlk_area{ width: 100%; max-width: 1400px; gap: 50px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
.sub_caption_font{color:var(--drakCoffee); font-size:24pt; line-height: 1.3; font-weight: 700; padding:10px 0;}
.index_svlk_txt{flex:45%; gap:50px}
.index_svlk_slogen_area{flex:55%;}
.index_svlk_slogen{ width: 100%; position: relative;}
.index_svlk_slogen > img{width: 100%; display: block; height: auto;}

.svlk_content{
    color:var(--black); line-height: 1.5; font-weight: 400;
    font-size:14pt; margin:20px 0; display: block;
}

.index_wood_style{width: 100%;}
.index_wood_style > ul{width: 100%; list-style: none; gap:20px; border:0px #c00 solid;padding: 0; margin-top:40px;}
.index_wood_style > ul > li{width: calc( 100% / 3 ); position: relative;border:0px #c00 solid;}
.index_wood_style > ul > li > a{width: 100%;}
.index_wood_style > ul > li > a > img{width: 100%;display: block; height: auto;}
.index_wood_style > ul > li > a > div{
    position: absolute;top:0;left:0; width: 100%;
    height: 100%; background-color: rgba(0,0,0,.5);
    font-size:18pt; border-radius: 50%;
    vertical-align: middle;color:#fff; 
    display:flex; justify-content: center; align-items: center;
    transition: all .5s linear;
}
.index_wood_style > ul > li > a:hover > div{
    background-color: rgba(0,0,0,0);
    color:yellow;
}


.wood_1_area{
    width: 55%; position: absolute;top:70%;left:50%;
    transform: translate(-50%,-50%);
}
.wood_1_area > .wood_1{ width:100%;}
.cls-1 {fill: none;stroke: #fff;stroke-width: 2px;}


#display_container{
    width: 100%; 
    background-color: #333;
    display: block;
    position: relative;
    top:-45px;
}


.display_range{
    display: block;
    width: 100%; 
    height: auto;
    position: relative;
    overflow: hidden;
    height: 100%; 
}
.display_range::after{
    content: ""; display:block; width: 100%; padding-top:50%; position: relative;
    top:0; left: 0;
}

.display_range > ul{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
    flex-wrap: nowrap;
    width: 100%; 
    height: 100%;
    padding: 0;
    margin: 0; 
    list-style: none;
    position: absolute; 
    left:0; top:0;
}
.display_range > ul > li{
    width: calc(100% / 2 / 3); 
    height: 100%;
    overflow-x: hidden; 
    position: relative;
    transition: all .5s ease-out;
    cursor: pointer;
}
.display_range > ul > li::before{ 
    content: '';
    position: absolute; 
    /*background-color: rgba(0,0,0,.65); */
    background: linear-gradient(to right, rgba(50,50,50,.65) 0%, rgba(0,0,0,.65) 100%);
    
    left: 0;top:0; width: 100%; height:100%; 
    z-index: 1; display: block;
    transition: all .5s ease-out;
}

.display_range > ul > li > img{
    display: block;
    width: auto;
    height: 100%;
}

.display_range > ul > li.hover{
    width: calc(100% / 2);
}

.display_range > ul > li.hover::before{
    background: linear-gradient(to right, rgba(50,50,50,.65) 0%, rgba(0,0,0,.65) 100%);
    opacity: 0;
}
.display_range > ul > li > div{
    position: absolute; left:30px; bottom: 20px;color: #fff;z-index: 1;
    font-size:18pt; 
}

.display_range > ul > li.hover > div{ color: #fff; text-shadow: 0 0 4px #333; }

#index_products_container{width: 100%;padding: 20px 5% 50px;}
#index_products_container > .products_area{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap:40px;
}
.select_area{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
    margin-top: 30px; gap: 10px;
}

.products_contents{ flex:100%; border:0px #c00 solid;}

.select_area > .products_photo{
    flex:40%; border:0px #c00 solid;
}
.select_area > .products_photo > ul{
    list-style: none; padding: 0; margin: 0;
    width: 100%;
}

.select_area > .products_photo > ul > li > .products_images_area{
    width: 100%; display: block;margin-bottom: 20px; position: relative;
}

.select_area > .products_photo > ul > li > .products_images_area::after{
    content: ''; position: relative; display: block; width: 100%; padding-top:75%;
    left:0; top:0; margin: 0;
}

.select_area > .products_photo > ul >li > .products_images_area > img{
    width: auto; height:auto; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; display: block;
    transform: translate(-50%,-50%); z-index: 1; user-select: none;
}

.select_area > .products_photo > ul >li > .products_images_area > .imgs_error{
    width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    display: flex; flex-direction: row; justify-content: center; align-items: center; 
    font-size:16pt; color:#c00; font-weight: 400; background-color: #fff;
    z-index: 1;
}

.select_area > .products_photo > ul >li > .products_images_area > img.hidden{
    opacity: 0; 
    transition: opacity .3s linear;
}

.select_area > .products_photo > ul >li > .products_images_area > img.show{
    animation: .3s linear 0s 1 forwards op;
    
}

.select_area > .products_photo > ul > li > .products_more_area{
    width: 100%; display:flex; flex-direction: row; justify-content: center;
}


@keyframes op{
    0%{opacity: 0;}
    100%{opacity: 1;}
}


.select_items_area{ 
    flex:60%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
}

.select_items_area > .arrow_area{ 
    width: 5%; display: inline-block; text-align: center; z-index: 1; cursor: pointer;
}
.select_items_area > .arrow_area > .left_arrow, .select_items_area > .arrow_area > .right_arrow{
    margin:150% 0 0;
    width: 100%;
    padding:20% 25%;
    display: inline-block;
    border-radius: 10px;
    transition: all .2s linear;
}

.left_arrow_svg, .right_arrow_svg{
    fill: none; stroke: #299600; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;
}
.left_arrow:hover, .right_arrow:hover{
    background-color: var(--green);
}
.left_arrow:hover > .left_arrow_svg, .right_arrow:hover > .right_arrow_svg{
    stroke: #fff;
}


.select_items_area > .right_arrow_area{ 
    width: 5%; display: inline-block; text-align: center;
}
.select_items_area > .right_arrow_area > .right_arrow{
    width: 80%;
}

.select_items{
    width: 90%;
    margin: 0;
    display:inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    border:0px #c00 solid;
    overflow-x: hidden;
}

.select_items > ul{ 
    width:100%; padding: 0; margin: 0;
    position: relative; 
    left:0%;
    border:0px #c00 solid;
    transition: left .2s ease-out;

}
.select_items > ul > li{
    flex:calc(100% / 3); display: inline-block;
    min-width: calc(100% / 3);
    margin: 0; padding: 0; 
    border:0px #c00 solid;
    padding:0 2%;
    text-align: center;
}
.select_items > ul > li > .s_imgs_area{
    width: 100%; max-width: 120px; position: relative; display:inline-block;
     margin:0px 0 15px; padding: 0; 

 }
 
.select_items > ul > li > .s_imgs_area::after{
    content: ''; width:100%; 
    padding-top:100%; 
    position: relative;
    left:0; top:0; background-color:var(--green); 
    display:block; border-radius: 50%;
 }
 
.select_items > ul > li > .s_imgs_area > img{
    width: 100%; position: absolute;  left:0 ; top:0; z-index: 1; display: block; height: auto;
    user-select: none; 
}

.select_items > ul > li > .products_caption{ 
    display: block; text-align: center; font-size:18pt;
    padding:5px 0; border-bottom: 2px var(--green) solid;
    margin:0px 0 20px; position: relative;
}

.select_items > ul > li > .products_caption::after{
    content: '▾'; position: absolute; top: calc(100% - 7pt);
    left:50%; transform: translateX(-50%) scaleX(1.6); font-size: 14pt;
}


.select_items > ul > li > ul{
    list-style: none; margin: 0; padding: 0; width: 100%;
}

.select_items > ul > li > ul > li{
    width: 100%;
    border:0px #c00 solid;
    padding: 0; margin: 0;
}

.select_items > ul > li > ul > li > .items{
    font-size:14pt; text-align: center; line-height: 1.2;
    padding:8px 0px; border-bottom: 1px #ccc dashed;
    transition: all .2s linear;
}

.select_items > ul > li > ul > li > .items:hover{
    background-color: var(--coffee);
    color:#fff; border-radius: 10px;
}

.select_items > ul > li > ul > li > .items.hover{
    background-color: var(--drakCoffee);
    color:#fff; border-radius: 10px;
}


@media screen and ( max-width:1279px ){

    #banner_container > .banner_area{
        align-items: stretch; position: relative;
    }

    #banner_container > .banner_area > .left_banner{
        position: relative;
        left:0;
        top:0;
        width:50%;
        overflow: hidden;
        background-color: #eee;
    }

    #banner_container > .banner_area > .left_banner > img{
        width: auto;
        height:100%;
        max-height: 100%;
    } 
    #banner_container > .banner_area > .right_banner > img{
        width: auto;
        height:100%;
        max-height: 100%;
    }

    #banner_container > .banner_area > .right_banner{
        position: relative;
        right:0; top:0;
        background-color: #eee;
        width: 50%;
        z-index: 0;
        overflow: hidden;
    }

    #banner_container > .banner_area > .left_banner > .leaf{
        display:none
    }

    #banner_container > .banner_area > .slogen_area{
    position: absolute; 
    left:50%; top:50%;
    transform: translate(-50%,-50%);
    writing-mode:vertical-rl;
    text-align: left;
    letter-spacing: 2px;
    white-space: nowrap;
}
#banner_container > .banner_area > .slogen_area > .slogen_caption{
    font-size:41pt;
    font-family: 'Noto Sans TC','微軟正黑體';
    font-weight: 600;
    color:var(--green);
    text-shadow: 
    2px 2px 1px #fff,
    -2px 2px 1px #fff,
    2px -2px 1px #fff,
    -2px -2px 1px #fff,
    2px 2px 15px #fff,
    -2px 2px 15px #fff,
    2px -2px 15px #fff,
    -2px -2px 15px #fff;
}
#banner_container > .banner_area > .slogen_area > .slogen_description{
    font-size:21pt;
    font-family: 'Noto Sans TC','微軟正黑體';
    font-weight: 400;
    text-shadow: 
    2px 2px 1px #fff,
    -2px 2px 1px #fff,
    2px -2px 1px #fff,
    -2px -2px 1px #fff,
    2px 2px 15px #fff,
    -2px 2px 15px #fff,
    2px -2px 15px #fff,
    -2px -2px 15px #fff;
}

#brand_container{top: 0;}
#brand_container > .brand_area{
    width: 100%; text-align: left;
    gap:30px;
}

.brand_img > img{display:block; width: 100%;height: auto;}
.brand_content{flex:30%; min-width: 300px; }
.index_wood{position: absolute; left:0%;top: 50%; width: 22vw;}
.index_years_area{flex:35%; position: relative; top:-120px; }
.index_years{
    font-size:22vw; font-family: 'arial';font-weight: 700; 
    line-height: .8;color:#d8e8e2; width: 100%;
}
.index_years > .index_years_txt{
    font-size:1.1vw; font-weight: 300;text-align: right;
    width: 22vw; position: absolute; left:0%; top:30%;
    line-height: 1.2;color:#6a6a6a;
    padding-right:10%;
}

    
}

@media screen and ( max-width:1023px ){
    #banner_container > .banner_area{
        height: 65vh;
    }
    #banner_container > .banner_area > .left_banner > img{
        width:auto ;
        height:100%;
        max-height: 100%;
    } 
    #banner_container > .banner_area > .right_banner > img{
        width: auto;
        height:100%;
        max-height: 100%;
    }

    #brand_container > .brand_area{
    width: 100%; gap:20px; flex-wrap: wrap;
    }

    .brand_content{flex:30%; min-width: 200px; z-index: 1; }
    .brand_txt{
        font-size:12pt;
    }
    .brand_img{width: 50%;}
    .index_years_area{flex:1; position: absolute; top:5%; z-index: 0; right: 0; }
    .index_wood{display: none;}

    .index_years{font-size:28vw;}
    .index_years > .index_years_txt{ width: 28vw; }


    #index_svlk_container{top:0}
    .index_svlk_area{gap:50px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .index_svlk_txt{flex:45%; gap:0px}
    .index_svlk_txt h5{margin: 0px 0 30px;}
    .svlk_content{font-size:12pt}

    /*.sub_caption_font{ font-size:2pt; }*/
    .index_wood_style > ul{ margin: 50px auto 0; width: 100%; max-width: 600px;}
    .index_wood_style > ul{gap:30px}
    .index_wood_style > ul > li > a > div{ font-size:20pt}
    .index_svlk_slogen_area{ width: 100%; max-width: 600px;}

    #display_container{top:0}

    .display_range > ul > li > div{font-size:16pt; left:5%;}

    #index_products_container > .products_area{ flex-wrap: wrap;}
    .select_area{ flex-direction:column-reverse; width: 100%; gap:50px}
    .products_area > .products_contents{ width: 100%;}
    .select_items > ul > li{
        flex:calc(100% / 4); display: inline-block;
        min-width: calc(100% / 4);
        margin: 0; padding: 0; 
        border:0px #c00 solid;
        padding:0 2%;
        text-align: center;
    }

    .select_area > .products_photo{
        flex:40%; border:0px #c00 solid; width: 100%;
    }
}

@media screen and ( max-width:767px ){
    #banner_container > .banner_area > .slogen_area > .slogen_caption{
        font-size:31pt;
    }
    #banner_container > .banner_area > .slogen_area > .slogen_description{
        font-size:15pt;
    }

    #brand_container > .brand_area{ flex-direction: column;}

    .brand_img{width: 60%;}

    .index_years_area{ top: calc(100% - 40vw);  }
    .index_years{
        font-size:50vw; 
    }
    .index_years > .index_years_txt{
        font-size:2.5vw; font-weight: 300;text-align: right;
        width: 50vw; position: absolute; left:0%; top:50%; transform: translateY(-50%);
        line-height: 1.2;color:#caac90;
        padding-right:10%;
    }

    .select_items > ul > li{
        flex:calc(100% / 3); display: inline-block;
        min-width: calc(100% / 3);
        margin: 0; padding: 0; 
        border:0px #c00 solid;
        padding:0 2%;
        text-align: center;
    }

    .index_wood_style > ul > li > a > div{font-size:18pt}

    .display_range > ul > li > div{font-size:14pt}

    .select_items > ul > li > .products_caption{
        font-size:14pt;
    }
    .select_items > ul > li > ul > li > .items{
        font-size:12pt;
    }

}

@media screen and ( max-width:560px ){
    .brand_img{width: 80%;}
    #brand_container{padding:40px 5% ;}
    .index_wood_style > ul{gap:10px}
    .index_wood_style > ul > li > a > div{font-size:15.5pt}

    #index_svlk_container{padding:40px 5%}

    .display_range{ overflow: inherit;}
    .display_range::after{
        padding: auto;
        height: auto;
        position: absolute; 
        z-index: -1;
    }
    .display_range > ul{ flex-wrap: wrap; position: relative;}
    .display_range > ul > li{ width:100%; height: auto; position: relative; overflow: hidden;}
    .display_range > ul > li::before{ 
        width: 100%; padding-top: 25%; position: relative;
        background: linear-gradient(to bottom, rgba(70,70,70,.65) 0%, rgba(0,0,0,.65) 40%);
    }
    .display_range > ul > li.hover::before{width:100%; padding-top: 100%;}
    .display_range > ul > li.hover{width:100%; height: auto;}
    .display_range > ul > li > img{
        width: 100%; height: auto; position: absolute;
        top:0; left: 0;
    }
    .display_range > ul > li.hover > img{
        width: 100%; height: auto; position: absolute;
        top:0; left: 0;
    }

    .select_items > ul > li{
        flex:calc(100% / 2);
        min-width:calc(100% / 2)
    }

    .select_items > ul > li > .products_caption{
        font-size:14pt;
    }
    .select_items > ul > li > ul > li > .items{
        font-size:12pt;
    }
    
    .select_items > ul > li > .s_imgs_area{
        max-width: 120px;
    }
    .select_items_area > .arrow_area{
        width: 10%;
        display: flex; flex-direction: row; justify-content: center; align-items: flex-end;
    }

    .select_items_area > .arrow_area > .left_arrow, 
    .select_items_area > .arrow_area > .right_arrow{
        margin: 150% 0 ;
    }
}