@charset "UTF-8";     

@media screen and (max-width:580px){
    :root {
 				--g2gridsimplesearchfield : 80px;
    }
}

@media screen and (max-width:360px){
    :root {
 	      --g2gridsimplesearchtitle : 63px;
    }
}

*::-webkit-scrollbar { width:10px;height:10px}
*::-webkit-scrollbar-track { background-color:transparent;-webkit-opacity:0.6}
*::-webkit-scrollbar-thumb { background-color:var(--bg-color);border-radius:4px;background-clip:padding-box;border:1px solid transparent}
*{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--bg-color);}

section,article,div{
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: FadeIn;    
}
@keyframes FadeIn {
    0% { opacity:0; }
    50% { opacity:0.5; }
    100% { opacity:1;}
}

.ImsloadingDiv{display:none;position:fixed;margin:0!important;box-sizing:border-box;width:100%;height:0;border:1px dashed brown;border-radius:1px;background-color:lightgrey;z-index:999999;opacity:0.3} 
.ImsloadingDiv:before{content:'처리중입니다\A잠시만기다려주십시요'!important;white-space:pre;color:midnightblue!important;font-size:1.5rem;position:absolute;top:50%;left:50%;text-align:center;transform:translate(-50%,-50%);}
.ImsloadingOn{
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: LoadOn;    
}
@keyframes LoadOn {
    0% { height:0%;}
    100% { height:100%;}
}
.ImsloadingOff{
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: LoadOff;    
}
@keyframes LoadOff {
    0% { height:100%;}
    100% { height:0%;}
}

div:empty:before {content:attr(placeholder);text-align:center;color:darkkhaki;font-size:o.8rem}
div:empty:focus {text-align:left}
span:empty:before {content:attr(placeholder);text-align:center;color:darkkhaki;font-size:o.8rem}
span:empty:focus {text-align:left}

.required > label:nth-of-type(1):after{content:" ★";position:relative;top:-2px;font-size:0.6rem;color:currentcolor;font-weight:500}

.ImsFieldFrame, .ImsFieldFrame2{
    width:100%;    
    box-sizing:border-box;
    padding:10px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:stretch;
    word-wrap: break-word;
}

.ImsFieldFrame2 > .ImsField {
    box-sizing: border-box;
    position: relative;
    margin: 5px 5px 0 0;
    border: 0.01px dotted var(--border-color);
    border-radius: 1px 2px 10px 2px;
    padding: 15px 20px 2px 30px;
    min-height: 50px;
    min-width: 250px;
    width: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    border-left: 4px solid var(--border-color);
}

.ImsFieldFrame > .ImsField {
    box-sizing: border-box;
    position: relative;
    /* margin: 5px 5px 0 0; */
    border: 0.01px dotted var(--border-color);
    /* border-radius: 1px 2px 10px 2px; */
    padding: 15px 20px 2px 30px;
    min-height: 50px;
    min-width: 200px;
    width: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    border-left: 4px solid var(--border-color);
    line-height:20px;
}

.ImsField input[type=text] + label, 
.ImsField input[type=password] + label, 
.ImsField input[type=tel] + label, 
.ImsField input[type=email] + label, 
.ImsField input[type=search] + label, 
.ImsField input[type=url] + label, 
.ImsField input[type=date] + label, 
.ImsField input[type=month] + label, 
.ImsField input[type=week] + label, 
.ImsField input[type=time] + label, 
.ImsField input[type=datetime] + label, 
.ImsField input[type=number] + label, 
.ImsField input[type=color] + label, 
.ImsField textarea + label{padding-left:5px;position:absolute;left:0;top:0;transition-duration:0.5s;transform:translateY(10%);font-size:0.9rem;color:var(--border-color);text-shadow:0.01em 0.01em 0 gray;font-weight:500}

.ImsField input[type=text]:focus + label, 
.ImsField input[type=password]:focus + label, 
.ImsField input[type=tel]:focus + label, 
.ImsField input[type=email]:focus + label, 
.ImsField input[type=search]:focus + label, 
.ImsField input[type=url]:focus + label, 
.ImsField input[type=date]:focus + label, 
.ImsField input[type=month]:focus + label, 
.ImsField input[type=week]:focus + label, 
.ImsField input[type=time]:focus + label, 
.ImsField input[type=datetime]:focus + label, 
.ImsField input[type=number]:focus + label, 
.ImsField input[type=color]:focus + label, 
.ImsField textarea:focus + label{transform:translateY(20%);font-size:0.8rem;transition-duration:0.5s;font-weight:bolder;color:darkgray}

.ImsField input[type=text]:not(:placeholder-shown) + label, 
.ImsField input[type=password]:not(:placeholder-shown) + label, 
.ImsField input[type=tel]:not(:placeholder-shown) + label, 
.ImsField input[type=email]:not(:placeholder-shown) + label, 
.ImsField input[type=search]:not(:placeholder-shown) + label, 
.ImsField input[type=url]:not(:placeholder-shown) + label, 
.ImsField input[type=date]:not(:placeholder-shown) + label, 
.ImsField input[type=month]:not(:placeholder-shown) + label, 
.ImsField input[type=week]:not(:placeholder-shown) + label, 
.ImsField input[type=time]:not(:placeholder-shown) + label, 
.ImsField input[type=datetime]:not(:placeholder-shown) + label, 
.ImsField input[type=number]:not(:placeholder-shown) + label, 
.ImsField input[type=color]:not(:placeholder-shown) + label, 
.ImsField textarea:not(:placeholder-shown) + label{transform:translateY(30%);font-size:0.8rem;transition-duration:0.5s;font-weight:bolder;color:darkgray}

.ImsField select{border:1px solid transparent;padding:5px 10px;margin-left:20px;margin-top:10px;line-height:1;outline:1px cornsilk;}
.ImsField select:focus{border:1px solid black; }
.ImsField select + label{padding-left:10px;position:absolute;left:0;top:0;transition-duration:0.5s;transform:translateY(10%);font-size:0.8rem;font-weight:bolder;color:darkgray}
.ImsField .imstitle{padding-left:10px;position:absolute;left:0;top:0;transition-duration:0.5s;transform:translateY(10%);font-size:0.8rem;font-weight:bolder;color:rosybrown}
.ImsField > span{padding-top:10px;display:inline-block;word-break: break-all;}
.ImsField textarea{border:1px solid transparent!important}
.ImsField .Imsfileframe{margin-top:10px}
.ImsField .Imsfileframe div[name=_FILELIST_DIV]{margin-top:10px}
.ImsField input[type=radio]{margin-top:12px}  

.ImsField input::-webkit-input-placeholder,.ImsField textarea::-webkit-input-placeholder{text-align:center;color:darkkhaki;font-size:0.8rem}
.ImsField input::-moz-placeholder,.ImsField textarea::-moz-placeholder{text-align:center;color:darkkhaki;font-size:0.8rem}
.ImsField input:focus::-webkit-input-placeholder,.ImsField textarea:focus::-webkit-input-placeholder{text-align:right;}
.ImsField input:focus::-moz-placeholder,.ImsField textarea:focus::-moz-placeholder{text-align:right;}

.ImsField input:-webkit-autofill,
.ImsField input:-webkit-autofill:hover,
.ImsField input:-webkit-autofill:focus,
.ImsField input:-webkit-autofill:active {
    transition: background-color 5000s;
}

.ImsField textarea:-webkit-autofill,
.ImsField textarea:-webkit-autofill:hover,
.ImsField textarea:-webkit-autofill:focus,
.ImsField textarea:-webkit-autofill:active {
    transition: background-color 5000s;
}

.ImsField input[type=text], 
.ImsField input[type=password], 
.ImsField input[type=tel], 
.ImsField input[type=email], 
.ImsField input[type=search], 
.ImsField input[type=url], 
.ImsField input[type=date], 
.ImsField input[type=month], 
.ImsField input[type=week], 
.ImsField input[type=time], 
.ImsField input[type=datetime], 
.ImsField input[type=number], 
.ImsField textarea{font-size:1rem;width:96%;border:0;padding:10px 10px 0 0;background-color:transparent!important}

.ImsField input[type=text]:focus, 
.ImsField input[type=password]:focus, 
.ImsField input[type=tel]:focus, 
.ImsField input[type=email]:focus, 
.ImsField input[type=search]:focus, 
.ImsField input[type=url]:focus, 
.ImsField input[type=date]:focus, 
.ImsField input[type=month]:focus, 
.ImsField input[type=week]:focus, 
.ImsField input[type=time]:focus, 
.ImsField input[type=datetime]:focus, 
.ImsField input[type=number]:focus, 
.ImsField input[type=color]:focus, 
.ImsField textarea{outline:none;}

.ImsField input[type=color]{ margin-left:30% } 

	
/* flex-width  */ 
.fw5 { flex-basis : 5%!important }
.fw10 { flex-basis : 10%!important }
.fw15 { flex-basis : 15%!important }
.fw20 { flex-basis : 20%!important }
.fw25 { flex-basis : 25%!important }
.fw30 { flex-basis : 30%!important }
.fw33 { flex-basis : 33%!important }
.fw663{ flex-basis : 66.3%!important }
.fw35 { flex-basis : 35%!important }
.fw40 { flex-basis : 40%!important }
.fw45 { flex-basis : 45%!important }
.fw50 { flex-basis : 50%!important }
.fw55 { flex-basis : 55%!important }
.fw60 { flex-basis : 60%!important }
.fw65 { flex-basis : 65%!important }
.fw70 { flex-basis : 70%!important }
.fw75 { flex-basis : 75%!important }
.fw80 { flex-basis : 80%!important }
.fw85 { flex-basis : 85%!important }
.fw90 { flex-basis : 90%!important }
.fw95 { flex-basis : 95%!important }
.fw100 { flex-basis : 100%!important }

/* width  */ 
.w5 { width : 5%!important }
.w10 { width : 10%!important }
.w15 { width : 15%!important }
.w20 { width : 20%!important }
.w25 { width : 25%!important }
.w30 { width : 30%!important }
.w35 { width : 35%!important }
.w40 { width : 40%!important }
.w45 { width : 45%!important }
.w50 { width : 50%!important }
.w55 { width : 55%!important }
.w60 { width : 60%!important }
.w65 { width : 65%!important }
.w70 { width : 70%!important }
.w75 { width : 75%!important }
.w80 { width : 80%!important }
.w85 { width : 85%!important }
.w90 { width : 90%!important }
.w95 { width : 95%!important }
.w100 { width : 100%!important }

.w20px { width : 20px!important }
.w30px { width : 30px!important }
.w40px { width : 40px!important }
.w50px { width : 50px!important }
.w60px { width : 60px!important }
.w70px { width : 70px!important }
.w80px { width : 80px!important }
.w90px { width : 90px!important }
.w100px { width : 100px!important }
.w110px { width : 110px!important }
.w120px { width : 120px!important }
.w130px { width : 130px!important }
.w140px { width : 140px!important }
.w150px { width : 150px!important }
.w160px { width : 160px!important }
.w170px { width : 170px!important }
.w180px { width : 180px!important }
.w190px { width : 190px!important }
.w200px { width : 200px!important }
.w250px { width : 250px!important }
.w300px { width : 300px!important }
.w350px { width : 350px!important }
.w400px { width : 400px!important }
.w450px { width : 450px!important }
.w500px { width : 500px!important }
.w600px { width : 600px!important }
.w700px { width : 700px!important }
.w800px { width : 800px!important }
.w900px { width : 900px!important }
.w1000px { width : 1000px!important }

/* height */
.h5px { height : 5px!important }
.h10px { height : 10px!important }
.h15px { height : 15px!important }
.h20px { height : 20px!important }
.h25px { height : 25px!important }
.h30px { height : 30px!important }
.h35px { height : 35px!important }
.h40px { height : 40px!important }
.h45px { height : 45px!important }
.h50px { height : 50px!important }
.h55px { height : 55px!important }
.h60px { height : 60px!important }
.h65px { height : 65px!important }
.h70px { height : 70px!important }
.h75px { height : 75px!important }
.h80px { height : 80px!important }
.h85px { height : 85px!important }
.h90px { height : 90px!important }
.h95px { height : 95px!important }
.h100px { height : 100px!important }	
.h200px { height : 200px!important }	
.h300px { height : 300px!important }	
.h400px { height : 400px!important }	
.h500px { height : 500px!important }