div.develop_gallery_new_div{min-height: 17px;}
div.develop_gallery_new_div input[type="file"]{display: none;}
div.attach_box:not(.noneStyle) input + label{
    width: var(--gallery-icon-size); height: var(--gallery-icon-size); display: inline-block; content: '';
    -webkit-mask: var(--gallery-iconUrl) var(--gallery-background-pos); margin-left: 5px; margin-bottom: 3px;
    mask: var(--gallery-iconUrl) var(--gallery-background-pos); cursor: pointer;
    -webkit-mask-size: cover; mask-size: cover; background-color: var(--gallery-color1); vertical-align: sub;
}
div.develop_gallery_new_div:not(.noneStyle) input + label:hover{background-color: var(--gallery-color-lblue);}
div.develop_gallery_new_div .att_zone{width: 100%; overflow-y: auto; min-height: 100px; border-radius: 5px; padding: 10px 10px 20px; border: 2px dotted var(--gallery-color2); display: flex; gap: 5px; flex-wrap: wrap;}
div.develop_gallery_new_div .att_zone.over{border: 2px dotted var(--gallery-color-lblue);}
div.develop_gallery_new_div .att_zone:empty:before {content: attr(data-placeholder); color: var(--gallery-color2); font-size: .9em;}
div.develop_gallery_new_div .att_zone > div.imgGroup{width: calc(10% - 5px); max-height: 90px; overflow:hidden; position: relative;}
div.develop_gallery_new_div .att_zone > div.imgGroup img.previewImg{width: 100%; height:100%; object-fit:cover;}
div.develop_gallery_new_div .att_zone > div.imgGroup input.deleteBtn{
    position: absolute; right: 5px; top: 5px; border: 1px solid var(--gallery-color-red); border-radius: 50%; 
    color: var(--gallery-color-red); padding: 0px 5px 2px 5px;
    background: var(--gallery-background-white-op5);
}
.ug-slider-control.ug-button-fullscreen.ug-skin-default{display: none;}
.ug-slider-control.ug-button-play.ug-skin-default{left: 10px !important;}
div.more_img_load_div{position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 999;}
div.more_img_load_div div.img_load_div_group{position: relative; width: 100%; height: 100%;}
div.more_img_load_div div.img_load_div_group > div#more_gallery_list{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 999;}
@media (min-width: 1025px){div.more_img_load_div div.img_load_div_group > div#more_gallery_list{width: 85vw !important; height: 85vh !important; max-width: none !important;}}
div.more_img_load_div div.img_load_div_group > div#more_gallery_list > span.close{display: block; border: 1px solid #c9c3bb; cursor: pointer; position: absolute; z-index: 999; padding: 5px 10px 3px; font-size: 20px; color: #c9c3bb; right: 39px; top: 10px;}
div.more_img_load_div div.bg{position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background: #000; opacity: .5; z-index: 990;}




ul.galleryImgDiv{margin: 20px 0; display: flex; gap: 5px; flex-wrap: wrap;}
ul.galleryImgDiv li{width: calc(16.5% - 5px); max-height: 140px; overflow:hidden; border-radius: 3px;}
ul.galleryImgDiv li img{width: 100%; height:100%; object-fit:cover; cursor: pointer;}
ul.galleryImgDiv li img:hover{opacity: 0.8;}
ul.galleryImgDiv li.line1,
ul.galleryImgDiv li.line2{position: relative;}
ul.galleryImgDiv li.line1::after{
    content: attr(maxcnt);
    position: absolute;
    text-align: center;
    display: block; width: 100%;
    top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: bold;
    color: var(--gallery-color-white); cursor: pointer;
}

ul.galleryImgDiv li.line1::before{
    content: '';
    background: var(--gallery-background-black-op5);
    position: absolute;
    left: 0px; top: 0px; right: 0px; bottom: 0px; cursor: pointer;
}

div.galleryDiv{padding: 10px; border: 1px solid var(--gallery-color3); border-radius: 6px;}
div.galleryDiv ul{display: flex; gap: 5px; flex-wrap: wrap;}
div.galleryDiv ul li{width: calc(10% - 5px); max-height: 90px; overflow:hidden; position: relative;}
div.galleryDiv ul li.IMAGE,
div.galleryDiv ul li.CODE{max-height: none;}
div.galleryDiv.rows5 ul li{width: calc(25% - 5px); }
div.galleryDiv ul li label,
div.galleryDiv ul li img{width: 100%; height:100%; object-fit:cover;}
div.galleryDiv ul li.CODE img{height: calc(100% - 20px);}
div.galleryDiv ul li.CODE span{display: block; text-align: center; width: 100%;}
div.galleryDiv ul li input[type="checkbox"]{display: none;}
div.galleryDiv ul li label{position: relative; display: block; cursor: pointer;}
div.galleryDiv ul li label::after{content: 'X'; color: var(--gallery-color-white); position: absolute; right: 5px; top: 5px; padding: 0px 3px 2px 3px; font-size: 11px; border: 1px solid var(--gallery-color-white); border-radius: 5px; background: var(--gallery-background-black-op5);}
div.galleryDiv ul li input[type="checkbox"]:checked + label::after{content: '✔'; font-size: 10px; color: var(--gallery-color-lgreen);}



@media all and (max-width: 1024px) {
    div.more_img_load_div div.img_load_div_group > div#more_gallery_list{min-width: 80% !important;}
}

@media all and (max-width: 640px) {
    div.more_img_load_div div.img_load_div_group > div#more_gallery_list{min-width: 96% !important;}
    div.develop_gallery_new_div .att_zone > div.imgGroup{width: calc(25% - 5px); max-height: 60px; overflow:hidden; position: relative;}

    ul.galleryImgDiv li.line2 ~ li{display: none;}
    ul.galleryImgDiv li{width: calc(50% - 5px); max-height: 140px; overflow:hidden; border-radius: 3px;}
    ul.galleryImgDiv li.line2::after{
        content: attr(maxcnt);
        position: absolute;
        text-align: center;
        display: block; width: 100%;
        top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: bold;
        color: var(--gallery-color-white); cursor: pointer;
    }

    ul.galleryImgDiv li.line2::before{
        content: '';
        background: var(--gallery-background-black-op5);
        position: absolute;
        left: 0px; top: 0px; right: 0px; bottom: 0px; cursor: pointer;
    }
    
    div.galleryDiv ul li{width: calc(20% - 5px); max-height: 90px; overflow:hidden; position: relative;}
}

:root{
    --gallery-iconUrl : url(/images/icon/icon_photo_upload.svg);
    --gallery-icon-size : 20px;
    --gallery-background-pos : no-repeat 50% 50%;
    --gallery-color1 : #7b7b7b;
    --gallery-color2 : #aaa;
    --gallery-color3 : #ddd;
    --gallery-color-lblue : #39a0e2;
    --gallery-color-lgreen : #68c74a;
    --gallery-color-lred : #fc8f8f;
    --gallery-color-white : #fff;
    --gallery-color-red : #ff0000;
    --gallery-background-white-op5 : rgba( 255, 255, 255, 0.5 );
    --gallery-background-black-op5 : rgba(0, 0, 0, 0.5);
}