@charset "utf-8";

.aljjaPop{position:absolute; z-index:99; background:#dde0e6; box-shadow:2px 2px 16px 1px rgba(0,0,0,0.82);}
.aljjaPop h2{position:relative; display:flex; height:38px; padding:0 35px 0 10px; line-height:38px; text-align:left; font-size:16px; color:#fff; background:#454854;}
.aljjaPop h2 .btnWrap{display:flex; align-items:center; margin-left:auto;}
.aljjaPop h2 .btnWrap .btn{margin-left:3px;}
.aljjaPop a.close{position:absolute; top:50%; margin-top:-10px; right:7px; width: 20px; height: 20px; font-size:0; cursor:pointer;}
.aljjaPop a.close::before,.aljjaPop a.close::after{content:""; position:absolute; top:50%; left:50%; margin-left:-7px; margin-top:-1px; width:14px; height:2px; background:#fff;}
.aljjaPop a.close::before{transform:rotate(45deg);}
.aljjaPop a.close::after{transform:rotate(-45deg);}
.aljjaPop a.close:hover{background:rgba(0,0,0,0.1);}

/*파일업로드 팝업 */
.aljjaFileUld{display:flex! important; flex-wrap: wrap; width:auto; max-height: 408px; overflow:hidden; text-align: center;}
.aljjaFileUld section{display: flex; flex-flow: column; flex: 1 auto; overflow: hidden; transition: width .4s;}
.aljjaFileUld section:first-of-type,.aljjaFileUld section:only-of-type{width:635px; padding: 10px;}
.aljjaFileUld section:nth-child(2){width:0; box-shadow: -2px 0 3px rgba(0,0,0,0.3); background: #cfd2d7;}
.aljjaFileUld section:nth-child(2) .grid{height: 341px}
.aljjaFileUld section:nth-child(2) .grid,.aljjaFileUld section:nth-child(2) .btn{display:none;}
.aljjaFileUld .dropZone{display: flex; flex-direction: column; align-items: center; justify-content: center; min-height:106px; padding:25px;}
.aljjaFileUld .dropZone em{font-size: 18px; font-weight:bold; text-align:center;}
.aljjaFileUld .dropZone strong{color:#3494ff;}
.aljjaFileUld .dropZone:hover,.aljjaFileUld .dropZone:active{background:rgba(39,132,239,0.2);}
.aljjaFileUld .dropZone em{color:#888;}
.aljjaFileUld .dropZone em span{color:#479eff;}
.aljjaFileUld label{cursor: pointer; padding:5px 30px; margin-top: 10px;}
.aljjaFileUld input[type="file"]{display: none;}
.aljjaFileUld .atch{height:190px; /* 217px;  */overflow-y: auto; margin-top:18px; border:1px solid #c7cad7; background:#fff;}
.aljjaFileUld .atch li{position:relative; display:flex; align-items:center; padding:0 10px 0 30px; text-align:left; font-size:14px; line-height: 1.8;}
.aljjaFileUld .atch li:nth-child(even){background: #edeef4;}
.aljjaFileUld .atch li:hover{box-shadow:inset 1px 1px 0 0 #3996ff,inset -1px -1px 0 0 #3996ff; background:#adcef4;}
.aljjaFileUld .atch li span{width:46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.aljjaFileUld .atch li time{margin-left:auto;}
.aljjaFileUld .atch li time::first-letter{padding-left:22px; background:url(/resource/images/sprite-bg.png) 0 -175px;}
.aljjaFileUld .atch li::before{content:""; display:inline-block; width:15px; height:18px; margin-right:5px; background: url(/resource/images/ico-fileUld.png)no-repeat 0 0; vertical-align: text-top;}
.aljjaFileUld .atch li.wrong{color:#ff1d1d; background:rgba(255,14,65,.1);}
.aljjaFileUld .atch li.wrong::before{background-position-x:-27px}
.aljjaFileUld .atch li button.del{position: absolute; top: 5px; left: 8px; margin-right:7px;}
.aljjaFileUld .chkBrk {display:none; margin: 0; text-align: left; padding: 5px 0; background: #b7b7b7; color:#333; font-size:85%;}
.aljjaFileUld .chkBrk label {padding: 0 5px; margin-top: 0;}
.aljjaFileUld .chkBrk input {margin-right:5px;}
.aljjaFileUld .chkBrk span {color: #f71025; margin-left: 5px;}
.aljjaFileUld .atch:not([style*="display:none"]):not([style*="display: none"]) + .chkBrk {display:block;} 
.aljjaFileUld button.uld{width:100%; padding:7px; font-size:16px; color:#fff; background: #1d7fef; margin-top:10px;}
.foldBtn{display:none; position:absolute; top:48px; left:614px;}
.foldBtn::before{content:""; display:block; width:100%; height:100%; background:url(/resource/images/sprite-bg.png) 3px -205px; transition-duration:.2s }

.aljjaFileUld.on section:nth-child(2){width:430px; padding: 10px;}
.aljjaFileUld.on section:nth-child(2) .grid, .aljjaFileUld.on section:nth-child(2) .btn{display:block;}
.aljjaFileUld.on .foldBtn{display:block;}
.foldBtn.on{background: #3090ff;}
.foldBtn.on::before{transform: rotate(180deg);}

/*로딩버튼*/
.uld.loading,.uld.loading:hover,.uld.loading:active{cursor: wait; background:linear-gradient(227deg, #3895ff, #0fccee); background-size: 400% 400%; -webkit-animation: gradient 4s ease infinite;
animation: gradient 4s ease infinite;}
.uld.loading::before,.uld.loading::after,.uld.loading span{display: inline-block; vertical-align:middle; width: 8px; height: 8px; margin:0 3px; border-radius: 100%; background-color: #d8d8d8;}
.uld.loading::before,.uld.loading::after{content:"";}
.uld.loading span{font-size:0;}
.uld.loading::before,.uld.loading::after,.uld.loading span{ -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both; animation-fill-mode: both;}
.uld.loading::before{-webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.uld.loading span{-webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
/*완료 */
.uld.complete,.uld.complete:hover{cursor:default; background:#a0aab5 !important;}

/*로딩화면*/
.loader{width:100%;  height:100%;  position:fixed;  left:0px;  top:0px;  z-index:1000; display:none; background:rgba(0, 0, 0, 0.85); }
.loader div{top: 40px; left: -2.5px;margin:calc(20%) auto 0px auto;text-align:center;}
.loader p{background: rgb(56,149,255); background: linear-gradient(45deg, rgba(56,149,255,1) 0%, rgba(15,235,238,1) 60%);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:22px; font-weight:bold; text-align:center; margin:20px auto; }
.loader span{display: inline-block; width: 5px; height: 20px; background-color: #00d2ff;}
.loader span:nth-child(1){animation: grow 1s ease-in-out infinite;}
.loader span:nth-child(2){ animation: grow 1s ease-in-out 0.15s infinite;}
.loader span:nth-child(3){animation: grow 1s ease-in-out 0.30s infinite;}
.loader span:nth-child(4){  animation: grow 1s ease-in-out 0.45s infinite;}
.loading p{background: rgb(56,149,255); background: linear-gradient(45deg, rgba(56,149,255,1) 0%, rgba(15,235,238,1) 60%);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:22px; font-weight:bold; text-align:center; margin:20px auto; }

/* Animation */ 
/*로딩버튼*/
@-webkit-keyframes bouncedelay {
0%, 80%, 100% {-webkit-transform: scale(0.0)}
40% {-webkit-transform: scale(1.0)}}
@keyframes bouncedelay {
0%, 80%, 100% {transform: scale(0.0);  -webkit-transform: scale(0.0);  }
40% {transform: scale(1.0);  -webkit-transform: scale(1.0); }}
  
@-webkit-keyframes gradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}}
@keyframes gradient { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}} 

/*로딩화면*/
@keyframes grow{
0%, 100%{
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);}
50%{
-webkit-transform: scaleY(1.8);
 -ms-transform: scaleY(1.8);
 -o-transform: scaleY(1.8);
 transform: scaleY(1.8);}}