@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.items_container{
    width: 100%; max-width: 1400px;
    display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
    margin:0; padding: 20px 0; gap:4%;
}

.aside_items_container{
    flex:1 1 22%;
}

.aside_items_container > h4{
    margin: 0; color:var(--menubackground); font-weight: 500;
    padding:10px 0; border-bottom: 1px var(--menubackground) solid;
    transition: all .2s linear;
}

.aside_items_container > nav{
    width: 100%;
}
.aside_items_container > nav > ul{ 
    width: 100%; display: flex; flex-direction: column;
    padding: 0; margin: 0; list-style: none;
    
}

.aside_items_container > nav > ul > li{
    border-bottom: 1px var(--menubackground) dashed;
    width: 100%;
    transition: all .2s linear;
}

.aside_items_container > nav > ul > li > a{
    font-size:14pt; color:var(--menubackground); position: relative;
    transition: all .2s linear;
    width: 100%; display: inline-block;
    padding:10px 15px;
}

.aside_items_container > nav > ul > li > a > .menu_arrow{
    width:27px; height:27px; 
    border-radius: 50%; border:1px var(--menubackground) solid;
    position: absolute; top:50%; left: calc(100% - 42px ); 
    transform: translateY(-50%);
    display: inline-flex; justify-content: center; align-items: center;
    font-family: 'Poppins',sans-serif;
    font-weight: 400; font-style: normal;
}

.aside_items_container > nav > ul > li:hover{background-color: var(--menubackground);}
.aside_items_container > nav > ul > li:hover > a{color:#fff;}
.aside_items_container > nav > ul > li:hover > a > .menu_arrow{border:1px #fff solid; color:#fff;}
.aside_items_container > nav > ul > li.hover{background-color: var(--menubackground);}
.aside_items_container > nav > ul > li.hover > a{color:#fff;}
.aside_items_container > nav > ul > li.hover > a > .menu_arrow{border:1px #fff solid; color:#fff;}

.dist_page{ 
    width: 100px; margin:5px 0 20px; padding:5px 0 ; 
    border-top:1px var(--green) solid;
    font-size:17pt;
}

.main_items_container{
    flex:1 1 78%; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
    gap:50px;
}

.main_items_container > .items_container{
    display:flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
    gap:30px
}

.items_container > .items_imgs_area{ 
    flex: 0 0 55%; position: relative;
}

.items_imgs_area > .imgs_area{ 
    width:100%; 
    display:flex; flex-direction: column; justify-items: flex-start; align-items: flex-start;
    position: relative; gap:20px
}

.imgs_container{ width: 100%; position: relative; }
.imgs_container > .imgs_overflow{width: 100%; position: relative; overflow: hidden;}
.imgs_container > .imgs_overflow > ul.imgs_b{ 
    list-style: none; margin: 0; padding: 0; 
    display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap;
    min-width: 100%; position: relative; left:0;
    transition: left .2s linear;
    
}
.imgs_container > .imgs_overflow > ul.imgs_b > li{
    flex: 0 0 100%;
}

.imgs_container > .left_arrow_area, .imgs_container > .right_arrow_area{
    position: absolute;  border:0px #c00 solid; z-index: 1;
    top:50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center;
}

.imgs_container > .left_arrow_area{ left:0;}
.imgs_container > .right_arrow_area{ right: 0;}

.imgs_container > .left_arrow_area > .left_arrow_svg,
.imgs_container > .right_arrow_area > .right_arrow_svg{ 
    width: 34px; height: 34px; padding:5px; cursor: pointer;
    border:1px transparent solid; 
}


.left_arrow_polyline, .right_arrow_polyline{
    fill: none; stroke: #299600; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;
}

.imgs_container > .left_arrow_area > .left_arrow_svg:hover > .left_arrow_polyline,
.imgs_container > .right_arrow_area > .right_arrow_svg:hover > .right_arrow_polyline{
    stroke:var(--coffee); 
}
.imgs_container > .left_arrow_area > .left_arrow_svg:hover,
.imgs_container > .right_arrow_area > .right_arrow_svg:hover{
    border:1px var(--coffee) solid; 
    border-radius: 5px;
}


.imgs_container > .imgs_overflow > ul.imgs_b > li > img{
    width: 100%; display: block; cursor: pointer; user-select: none;
}


.imgs_list_container{ 
    width: 100%; position: relative; overflow: hidden;
}
.imgs_list_container > ul{ 
    list-style: none; margin: 0; padding: 0; 
    display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap;
    min-width: 100%; position: relative; transition: left .2s linear; left:0
}

.imgs_list_container > ul > li{
    flex:0 0 calc(100% / 4); padding:0 5px;
}

.imgs_list_container > ul > li > div{width: 100%; border:3px transparent solid; border-radius: 10px; transition: border .2s linear; }
.imgs_list_container > ul > li > div > img{ width: 100%; display: block; border-radius: 10px; user-select: none; }
.imgs_list_container > ul > li:hover > div{ border:3px var(--menubackground) solid;}
.imgs_list_container > ul > li.hover > div{ border:3px var(--menubackground) solid;}

.items_container > .items_data_area{ flex: 1 1 45%; border:0px #c00 solid;}
.items_data_container{ 
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
    width: 100%; gap:5px;
}
.items_data_container > h1,
.items_data_container > h2,
.items_data_container > h3,
.items_data_container > h4,
.items_data_container > h5,
.items_data_container > h6{ margin: 0; padding:0}

.items_data_container > h2{ 
    font-size:24pt; color:var(--green); line-height: 1.5;
    font-family: 'Noto Sans TC'; font-weight: 600; letter-spacing: 1pt;
}

.items_data_container > ul{
    list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: row;
    justify-content: flex-start; align-items: center; flex-wrap: wrap; gap:15px;
    margin-top:20px;
}
.items_data_container > ul > li > a{display: inline-flex; justify-content: flex-start; align-items: center;
    background-color: var(--coffee); padding:6px 10px; border-radius: 10px; 
    font-size:14pt; color:#fff; font-family: 'Noto Sans TC','微軟正黑體'; gap: 5px;
    transition: all .2s linear;
}
.items_data_container > ul > li > a:hover{ background-color: var(--menubackground);}
.menu_text{padding-bottom:2px}
.menu_imgs{width:28px; height:28px;}
.menu_imgs > img{ width: 100%; display:block;}

.items_sep{
    width:100%; height:1px; display: block; 
    border-bottom: 1px var(--green) solid;
    margin:10px 0;
}

.items_contents{
    width: 100%;
}



.items_contents > h1,
.items_contents > h2,
.items_contents > h3,
.items_contents > h4,
.items_contents > h5,
.items_contents > h6{margin: 0; line-height: 1.5;}

.items_information_container{
    display: flex; flex-direction: column; width: 100%; border:0px #c00 solid; gap:10px;
}
.items_information_button{
    display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
    width: 100%; margin: 0; padding: 0; list-style: none;
}
.items_information_button > li{
    flex:1 1 50%; position: relative;padding:0;
}
.items_information_button > li::after{
    content: ''; position: absolute; left:0; top:100%;
    width:100%; height:5px; background-color: #ccc; 
    transition: all .2s linear;
}

.items_information_button > li.hover::after{
    background-color: var(--green);
}

.items_information_button > li.hover:hover::after{
    background-color: var(--green);
}

.items_information_button > li:hover::after{
    background-color: var(--varyDrakGreen);
}

.items_information_button > li > div{font-size:16pt; line-height: 2; text-align: center; transition: all .2s linear;}
.items_information_button > li:hover > div{color:var(--menubackground); font-weight: 600;}
.items_information_button > li.hover > div{color:var(--menubackground); font-weight: 600;}

.items_information_data{
    display: block; width: 100%; position: relative; overflow: hidden; 
    border:1px #ccc solid; transition: height .2s linear;
}

.items_information_data > .items_mask{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
    width: 100%; position: relative;  flex-wrap: nowrap; transition: left .5s ease-out;
    left:0; 

}
.items_information_data > .items_mask > .items_content{
    display: block; width: 100%; min-width: 100%;
}
.items_information_data > .items_mask > .items_other{
    display: block; width: 100%; min-width: 100%; 
}


.items_information_data > .items_mask > .items_content > .edit_range
{
    width: 100%;
}
.items_information_data > .items_mask > .items_content > .edit_range > img{
    display:block;
    width: auto;
    max-width: 100%;
    height: auto;
}







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

@media screen and ( max-width:1023px ){
    .main_items_container{gap:30px;}
    .items_container{gap:3%;}
    .items_container > .items_imgs_area{flex:0 0 52% }
    .aside_items_container > nav > ul > li > a {
        padding:8px 8px;
        font-size:12pt;
    }
    .aside_items_container > nav > ul > li > a > .menu_arrow{
        width: 21px; height: 21px;
        left:calc( 100% - 29px );
    }

    .main_items_container > .items_container{gap:20px}
    .items_data_container > h2{font-size:18pt}
    .items_contents > h5{ font-size:12pt}
    .items_data_container > ul > li > a{
        font-size:13pt; padding:3px 8px;
        gap:2px;
    }
    .items_data_container > ul{gap:2%}
    .menu_imgs{width:18px; height:18px}

    .items_data_container > ul > li{margin-bottom:5px}
    .items_information_button > li > div{font-size:12pt}
}

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

    .items_container{ flex-direction: column;gap: 20px;}
    .dist_page{ margin: 5px 0 0;}
    .aside_items_container{
        flex:100%; width: 100%; position: relative;
    }
    .aside_items_container > nav{
        overflow: hidden; height: 0;
        position: absolute; top:100%; left:0;
        z-index: 1;
        background-color:#fff;
        transition: height .2s linear; 
        display: block;
    }

    .aside_items_container > h4{
        background-color: var(--menuhover); color:#fff; text-align: center;
        cursor: pointer;
    }

    .aside_items_container > nav > ul > li > a { font-size:13pt; }
    .aside_items_container > nav > ul > li.hover:hover{background-color: var(--menubackground);}
    .aside_items_container > nav > ul > li.hover{background-color: var(--menubackground);}
    .aside_items_container > nav > ul > li:hover{background-color: var(--menuhover);}

    .main_items_container{flex: 100%; width: 100%;}

    .imgs_list_container > ul > li:hover > div{ border:3px transparent solid;}
    .imgs_list_container > ul > li.hover > div{ border:3px var(--menubackground) solid;}

}

@media screen and ( max-width:559px ){
    .main_items_container > .items_container{
        flex-direction: column;
    }
    .items_data_container > ul > li > a{font-size:12pt}
}