#imgscontroller{ 
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height:100vh; margin: 0; padding: 0;
    background-color: rgba(60,60,60,.7); position: fixed; top:0; left:0; z-index: 3; display: none;
    opacity: 0; transition: opacity .2s linear;
}

#imgscontroller > .information_area{
    
    display:flex; flex-direction: row; justify-content: flex-start; align-items: center; 
    width: 100%; height:50px; background-color: rgba(20,20,20,.7); position: absolute; top:0; left:0;
    gap:20px; padding:0 10px; z-index: 1;
}

#imgscontroller > .information_area > .pages{
    flex: 0 0 auto; font-size:14pt; color:#fff;
}
#imgscontroller > .information_area > .share{
    flex: 1 1 100% ; text-align: right;
}

#imgscontroller > .information_area > .share > ul{
    display: flex; flex-direction: row; justify-content: flex-end; align-items: center;
    list-style: none; padding: 0; margin: 0; gap:10px;
}

#imgscontroller > .information_area > .share > ul > li{
    width: 30px; height: 30px;
}

#imgscontroller > .information_area > .share > ul > li > div{
    width:100%; position: relative; display:flex; justify-content: center; align-items: center;
    cursor: pointer;
}

#imgscontroller > .information_area > .share > ul > li > div > img{width: 100%; display:block}
#imgscontroller > .information_area > .share > ul > li > div > img.hover{
    position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%);
    opacity: 0;
}

#imgscontroller > .information_area > .share > ul > li:hover > div > img.hover{
    opacity: 1;
}

#select_menu{ 
    position: absolute; bottom:0; left:0; background-color: rgba(20,20,20,.8); z-index: 1;
    display: flex; justify-content: center; align-items: center;padding:0px 5% 0px; width: 100%;
    transition: bottom .2s linear, background-color .2s linear ; 
}
#select_menu.hover{
    background-color: rgba(20,20,20,.3);
}

#select_menu > .select_menu_area{
    width: 100%; max-width: 1400px;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    
    
}

#select_menu > .select_menu_area > .title_area{
    width: 100%; border:0px #c00 solid; margin: 0; padding: 0;
    position: relative;
}

#select_menu > .select_menu_area > .title_area > .title{
    font-size:21pt; color:#fff; text-align: center; padding:8px 0;
}

#select_menu > .select_menu_area > .title_area > .up_down{
position: absolute; color:#fff; top:50%; right:0%; transform: translateY(-50%);
width: 30px; height:30px; cursor: pointer; user-select: none;
}
#select_menu > .select_menu_area > .imgs_list_area{ 
    width: 100%; overflow-x: scroll; overflow-y: hidden; 
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    cursor: grab;
    padding:0 0 10px;
}

#select_menu > .select_menu_area > .imgs_list_area::-webkit-scrollbar{
    display: none;
}


#select_menu > .select_menu_area > .imgs_list_area > ul{
    width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    border:0px #c00 solid; list-style: none; padding: 0; margin: 0; flex-wrap: nowrap;
    gap:5px; left:0;  user-select: none; position: relative; left:0
}

#select_menu > .select_menu_area > .imgs_list_area > ul > li{
    min-width: 140px; width: 140px; max-width: 140px; padding:0px; 
    position: relative; background-color: rgba(30,30,30,.0); 
}

#select_menu > .select_menu_area > .imgs_list_area > ul > li::after{
    content: ''; width: 100%; position: relative; 
    padding-top:75%; left:0; top:0; display: block;
    border:0px #c00 solid;
}

#select_menu > .select_menu_area > .imgs_list_area > ul > li > div{ 
    width: 100%; height:100%; border:3px transparent solid; display: flex;
    justify-content: center; align-items: center;
    position: absolute; left:0; top:0; 
}
#select_menu > .select_menu_area > .imgs_list_area > ul > li:hover > div{border:3px #fff solid;}
#select_menu > .select_menu_area > .imgs_list_area > ul > li.hover > div{border:3px #fff solid;}
#select_menu > .select_menu_area > .imgs_list_area > ul > li > div > img{
    width: auto; height:auto; max-width: 100%; max-height: 100%; user-select: none;
}

#main{
    width: 100%; height:100%; 
    /*background: linear-gradient(to right, red 0%,green 100%);*/
    background-color: rgba(30,30,30,1);
    position: relative;
}

#main > .left_arrow, #main > .right_arrow{
    display: inline-flex; justify-content: center; align-items: center;
    width:40px; height: 40px; position: absolute; top:50%; transform: translateY(-50%);
    color:#fff; font-size:21px; border:2px #ccc solid; border-radius: 10px;
    padding:5px; box-sizing: border-box;
}

#main > .left_arrow{ left:5%; cursor: pointer; z-index: 1;}
#main > .right_arrow{ right:5%; cursor: pointer;z-index: 1;}

#main > .left_arrow > .left_arrow_svg, 
#main > .right_arrow > .right_arrow_svg{
     width: 100%;
}

#main > .left_arrow > .left_arrow_svg > .arrow_path_color, 
#main > .right_arrow > .right_arrow_svg > .arrow_path_color{
    fill: none;
    stroke: #ccc;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3px;
}

#main > .left_arrow:hover, #main > .right_arrow:hover{
    border-color: #fff;
}

#main > .left_arrow:hover > .left_arrow_svg > .arrow_path_color,
#main > .right_arrow:hover > .right_arrow_svg > .arrow_path_color{
 stroke: #fff;   
}

#main > .main_container{ 
    width: 100%; height: 100%; overflow: hidden;
    border:yellow solid 0px; position: relative;
}

#main > .main_container > ul{
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: row; flex-wrap: nowrap;
    position: relative;
    width: 100%; height: 100%; border:#1d0 solid 0px;
    left: 0;
    transition: left .5s ease-out;
}
#main > .main_container > ul > li{
    width: 100%; min-width: 100%; height: 100%; 
    display: flex; overflow: hidden; position: relative;
    justify-content: center; align-items: center;
    border:0px #c00 solid;
}

#main > .main_container > ul > li > div{ 
    width: auto;
    height: auto;
    max-width: 100%; 
    max-height: 100%;
    display: inline-flex;
    justify-content: center; align-items: center;
    border:0px yellow solid;
    transition: transform 0.1s linear;
    
   
}

#main > .main_container > ul > li > div > img{
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    user-select: none;
    display: block;
    object-fit: contain;
    cursor: grab;
    transition: transform .3s linear;
}

@media screen and ( max-width:767px ){
    #select_menu > .select_menu_area > .title_area > .title{
        font-size:17pt;
    }
}

@media screen and ( max-width:540px ) {
    #main > .left_arrow, #main > .right_arrow{
        width:32px; height:32px;
    }
    
}