@charset "utf-8";
/* 
2024-05-21 : .imodal-body .imodal-body .imodal-inner-header 추가 
*/


.imodal{
    position: fixed;
    /* height:100vh; */
    overflow-y: auto;
    left:0;right:0;top:0;bottom:0;
    z-index: 20;
    display: none;
}
.imodal *::-webkit-scrollbar{
    font-size: 16px;
    width:0.5em;
    height:0.5em;
}
.imodal *::-webkit-scrollbar-corner{
    visibility: hidden;
}
.imodal *::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.5em;
}
.imodal.on{
    display: block;
}
.imodal-bg{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    left:0;right:0;top:0;bottom:0;
    z-index: 10;
}
.imodal-bg.backdrop-filter-blur{
    backdrop-filter: blur(5px);
}

/* 모달이 보일 때만 배경 이미지를 가져오도록 한다. */
.imodal.imodal-loading-lazy:not(.on) *{
    background-image: none;
}

/*  imodal.open(.imodal.imodal-body-noscroll) 시 body에 설정 된다. */
body.imodal-on.imodal-body-noscroll{
    overflow: hidden;
}

.imodal-box{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* height: 100vh; */
    overflow: hidden;
    max-height:100vh;

    margin:0 auto;
    position: relative;
    z-index: 21;
    pointer-events: none;
}
.imodal-content{
    max-height: 100%;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;
    pointer-events: all;
}
.imodal-head , .imodal-header{
    flex: 0 0 auto;
    text-align: right;
}
.imodal-foot , .imodal-footer{
    flex: 0 0 auto;
}
.imodal-body{
    flex: 1 1 auto;
    min-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.imodal-close{
    display: inline-block;
    height:2.8em; width: 2.8em;
    margin:0.2em;
    /* background-image: url("imodal/close.png"); */
    /* background-image: url("imodal/close-black.svg"); */
    background-image: url("imodal/close-white.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.imodal-close , .imodal-close.white{
    background-image: url("imodal/close-white.svg");
}
.imodal-close.black{
    background-image: url("imodal/close-black.svg");
}
/* 내부 닫기 버튼 설정 */
.imodal-body .imodal-inner-header{
    position: absolute;
    top:10px;left:10px;right:10px;
    z-index: 20;
}



.imodal-close.mask-image{
    background-image:none;
    -webkit-mask-image: url(imodal/close-white.svg);
    mask-image: url(imodal/close-white.svg);
    background-color: #fff;
}

/* .imodal.fade */
.imodal.fade{
    display: block;
    visibility: hidden;
    filter:opacity(0);
    transition: visibility 0s, filter 0.2s linear;
}
.imodal.fade.on{
    visibility: visible;
    filter:opacity(1);
}

/* PC 화면등의 높이가 1000px 이하인 경우 0.7로 축소 */
/* @deprecated  */
/* 브라우저 지원이 사라짐 */
.imodal-zoom-target{
    zoom:1;
}
@media all and (max-height:1000px) {
	.imodal-zoom-target{zoom:0.7}
}



/* for ios */
/* @supports (-webkit-touch-callout: none) {
    .imodal{
        height: -webkit-fill-available;
    }
    .imodal-box{
        height: -webkit-fill-available;
    }
} */