@charset "utf-8";


/*=================================================================================================
** 최종 파일 업로드에 관한 css 작성 : 2023.11.28, 2025.03.26:: 추후 아래의 형식을 따라 css 순서 변경 예정 강제성은 없음
**-----------------------------------------------------------------------------------------------*/
 
/*=================================================================================================
 * 속성 선언 순서 :: 강제성은 없으나 되도록 맞출 것  ::: 추후 변경할 사항( 2024-11-28(목) )
 *
 * 순서 의미 대표되는 속성
 * 1 레이아웃 display, visibility, overflow, float, clear, position, top, right, bottom, left, zindex,
 * 2 BOX width, height, margin, padding, border
 * 3 배경 background
 * 4 폰트 font,color, letter-spacing, text-align, text-decoration, text-indent, verticalalign, white-space
 * 5 기타 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타
 * 	 속성 내의 선언 순서는 무관함
 *   [속성 선언 순서 기준:1:레이아웃, 2:BOX, 3:배경, 4:폰트, 5:기타]
 * 	 밴더속성과 핵속성은 해당 속성 뒤에 선언한다.
 * 	 .btn{border:1px solid #f60;*border:2px solid #f60;border-radius:2px;-webkit-boderradius:2px}
 * 
 *  [속성 선언 순서 기준:1:레이아웃, 2:BOX, 3:배경, 4:폰트, 5:기타]
**-----------------------------------------------------------------------------------------------*/

/*===============================================
**기본 설정 정의
**---------------------------------------------*/
/* 파일 업로드내 버튼 정의 */
.file_loader .btn1{margin:0px;padding:0px 15px 0px 15px;height:25px;box-shadow:0px 2px 6px -1px #a5a5a5;border:solid 1px #c3c3c3;background:#fdfdfd;border-radius:2px;background-image:linear-gradient(to bottom, #fdfdfd 5%, #ebebeb 90%);font-size:12px;line-height:25px;letter-spacing:3px;color:#828282;text-shadow:0px 2px 3px #dfdfdf;font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;cursor:pointer;}
.file_loader .btn1 .file_image{display: inline-block;margin:0 0 1px 0;width:12px;height:12px;background:url(../../multi_uploader/images/file_image.png);background-size: cover;vertical-align: text-bottom;}
.file_loader .btn1:hover{background-image: linear-gradient(to bottom, #f2f2f2 5%, #cacaff 90%);}
.file_loader .btn1:focus{border: solid 1px #c3c3c3;background: #fef0d1;background-image: linear-gradient(to bottom, #fef0d1 5%, #ffd9b3 90%);box-shadow: 0px 2px 6px -1px #a5a5a5;} 
.file_loader input, .file_loader button{margin:0;padding:0;font-size:12px;}
.file_loader button{cursor:pointer;border:none;}
.file_loader textarea, .file_loader input, .file_loader button, .file_loader select, .file_loader input[type]{border-color:#adadad;}
.file_loader label, .file_loader input, .file_loader button, .file_loader select, .file_loader img{vertical-align:middle;}
.file_loader p{margin:0px;padding:0px;}
.file_loader ul, .file_loader dl,.file_loader dt,.file_loader dd {margin:0;padding:0;list-style:none}
/*.file_loader input[type="checkbox"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;height: 13px;outline: 0;width: 13px;background: #fff;border: 1px solid #adadad;border-radius: 2px;cursor: pointer;}*/
.file_loader input[type="checkbox"] {height: 13px;outline: 0;width: 13px;background: #fff;border: 1px solid #adadad;border-radius: 2px;cursor: pointer;}

/*===============================================
** 주요 영역에 대한 기본 정의
**---------------------------------------------*/
.file_loader{display:flex;margin:0px;padding:0px;width:100%;height:100%;min-width:240px;font-size:12px;font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;-webkit-font-smoothing: antialiased;}
.file_loader .row{margin:5px 0px;padding:0px;}
.file_loader .left{float:left;margin:0px;padding:0px;}
.file_loader .right{float:right;margin:0px;padding:0px;}
.file_loader .clear{clear:both;margin:0px;padding:0px;}
.file_loader .blind {display: block;overflow: hidden;position: absolute;top:0;left:0;width:0;height:0;border:0;background:#000;font-size:0;line-height:0;}
.file_loader .module_bg{position:absolute;display:block;z-index:auto;margin:0px;padding:0px;width: calc(100% - 0px);height: calc(100% - 0px);min-height: 100px;overflow: hidden;}

/* 모듈 백그라운드 이미지 */
.file_loader .module_bg.use_bg{background-image: url('../../multi_uploader/images/uploader_background.jpg');background-position-x: center;background-position-y: center;background-size: cover; background-repeat: no-repeat;filter: blur(3px);opacity: 0.7;}

.file_loader .file_zone{position: relative;z-index:2;display: flex;margin:0px;padding:0px;width: calc(100% - 0px);height: calc(100% - 65px);min-height: 100px;border: 2px dotted #ccc;overflow: hidden;border-radius: 0px;flex-direction: column;}
.file_loader .loader_main{display: flex;flex-direction: column;position:relative;margin:0px;padding:0px;width:100%;min-width: 80px;height:auto;background:#fff;}

/*===============================================
** 이미지 에디터
**---------------------------------------------*/
.file_loader .file_zone .file_editor{position:absolute;top:0px;left:0px;z-index:11;margin:0px;padding:10px;width:calc(100% - 0px);height:calc(100% - 24px);background: yellow;display:none;}
.file_loader .file_zone .loader_menu{display:block;float:left;margin:0px 5px 0px 0px;padding:10px;width:150px;height:calc(100% - 20px);background:#f2f2f2;}

/*=================================================================================================
** 파일 업로더 상단 :시작
**-----------------------------------------------------------------------------------------------*/
/* 상단 왼쪽 선택한 n개 파일 삭제 :시작 */
.row .n_del_bt{display:block;float:left}
.row .del_file_cnt{font-size:12px;color:#ff3300;}
.row .n_del_bt_wrap{float:right;position:relative;z-index:3;display:none;}
.row .n_del_bt_alt{position:absolute;z-index:4;left:3px;bottom:-28px;display:block;margin:0px;padding:5px 10px;min-width:100px;max-width:450px;width:max-content;min-height:10px;height:auto;max-height:150px;border-radius:5px;border:1px solid #ccc;box-shadow:1px 1px 5px -1px #a5a5a5;background:#fff;white-space:nowrap;word-wrap:break-word;word-spacing:3px;font-size:13px;line-height:20px;letter-spacing:1px;}
.row .n_del_bt_alt span  {display:inline-block;float:left;margin:2px 5px 2px 5px;min-width:12px;line-height:17px;}
.row .n_del_bt_alt:before{content:"";position:absolute;bottom:8px;left:-10px;border-style:solid;display:block;width:0;border-width:0px 10px 10px 0;border-color:transparent #ccc;}
.row .n_del_bt_alt:after {content:"";position:absolute;bottom:7px;left:-7.5px;border-style:solid;display:block;width:0;border-width:0px 10px 10px 0;border-color:transparent #fff;}
.row .n_del_bt_alt_cont{width:100%;max-height:125px;height:auto;overflow-y:auto;overflow-x:hidden;}
.row .n_del_bt button{padding:0px 7px 0px 7px;letter-spacing:1px;}
.row .n_del_bt button:hover{background-image:linear-gradient(to bottom, #f2f2f2 5%, #cacaff 90%);}
.row .n_del_bt .trash{display: inline-block;margin:0 -5px 0 0;width:17px;height:17px;background:url(../../multi_uploader/images/trash.png);background-size: cover;vertical-align: text-bottom;}

/* 상단 왼쪽 2번째 버튼 */
.row .n_edit_bt{display:block;float:left;margin:0 0 0 5px;}

/* 상단 오른쪽 SHIF, ctrl :시작 */
.row .help_key1{display:inline-block;margin:0px -5px 0px 0px;padding:0 5px;height:23px;width:auto;min-width:50px;font-size:12px;line-height:23px;text-align:center;}
.row .help_key1 .blue{color:#0655e6}
.row .help_key1 .gray{color:#e0e0e0}
.row .help_key2{display:inline-block;margin:0px 10px 0px 0px;padding:0 5px;height:23px;width:auto;min-width:50px;font-size:12px;line-height:23px;text-align:center;}
.row .help_key2 .blue{color:#0655e6}
.row .help_key2 .gray{color:#e0e0e0}

/* 상단 오른쪽 썸네일타입 선택, 미리보기, 상세보기, 전체보기 :시작 */
.row .file_opt_btn_panel{position:relative;left:0px;top:1px;display:inline-block;margin:0px 0px;padding:0px;height:24px;width:auto;}
.row .file_opt_btn_panel .file_opt_btn_panel_div{display:inline-block;position:relative;top:0px;left:0px;margin:0px;padding:0px 7px 0px 7px;min-width:128px;height:25px;border-top-left-radius: 5px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 5px;line-height:24px;background:#ededed;}
.row .file_opt_btn_panel .file_opt_btn_panel_div button{position:relative;top:-1px;color:#898989;background:transparent;}
.row .file_opt_btn_panel .file_opt_btn_panel_div button.on{position:relative;top:-1px;color:#ff6600;background:transparent;}
.row .file_opt_btn_panel .file_opt_btn_panel_div button i{font-size:14px}
.row .file_opt_btn_panel .file_opt_btn_panel_div .line_bar{position:relative;top:3px;display:inline-block;margin:0px 3px 0px 3px;padding:0px;width:2px;height:15px;border-left: 1px solid #ccc;background:#e0e0e0;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .moreLine{position:relative;top:0px;left:calc(50% - 2px);display:block;margin:0px;padding:0px;width:3px;height:3px;border-radius:100%;background:#333;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .moreLine:before{content:'';position:relative;top:-4px;display:block;margin:0px;padding:0px;width:3px;height:3px;border-radius:100%;background:#333;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .moreLine:after{content:'';position:relative;top:1px;display:block;margin:0px;padding:0px;width:3px;height:3px;border-radius:100%;background:#333;}

/* 파일 업로더 헬프 버튼, 상세보기 버튼, 미리보기 버튼 */
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_help, 
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type1, 
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type2,
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_full_view,
.row .file_opt_btn_panel .file_opt_btn_panel_div .moreBar{margin:0px;padding:2px;font-size:16px;color:#717171;line-height:14px;height:20px;width:26px;height:20px;background:transparent;border:1px solid #ededed;text-align:center;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .moreBar.on{margin:0px;padding:2px;font-size:16px;color:#717171;line-height:14px;height:20px;width:26px;height:20px;background:#dbefff;border:1px solid #3c9dff;text-align:center;}

/* 버튼 호버 */
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_help:hover, 
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type1:hover, 
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type2:hover, 
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_full_view:hover,
.row .file_opt_btn_panel .file_opt_btn_panel_div .moreBar:hover{margin:0px;padding:2px;font-size:16px;color:#3f87bb;line-height:14px;height:20px;background:transparent;width:26px;height:20px;background:#dbefff;border:1px solid #3c9dff;}

/* 버튼 on */
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_help.on,
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type1.on,
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type2.on,
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_full_view.on{margin:0px;padding:2px;font-size:16px;color:#f88554;line-height:14px;height:20px;width:26px;height:20px;background:transparent;border:1px solid #3c9dff;}

/* 버튼 on 호버*/
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_help.on:hover,
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type1.on:hover,
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type2.on:hover,
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_full_view.on:hover{margin:0px;padding:2px;font-size:16px;color:#f88554;line-height:14px;height:20px;width:26px;height:20px;background:#dbefff;border:1px solid #3c9dff;}

/* 버튼 아래 i => 백그라운드 이미지 */
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type1 .preview_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/preview_view_off_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type1.on .preview_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/preview_view_on_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type2 .detail_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/detail_view_off_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_view_type2.on .detail_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/detail_view_on_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_full_view .detail_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/detail_view_off_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.row .file_opt_btn_panel .file_opt_btn_panel_div .file_zone_full_view.on .detail_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/detail_view_on_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}

/* 모양별로 보기 버튼 */
.file_view_type_bt0{display:inline-block;width:20px;height:17px;background-size:contain;background-repeat:no-repeat;background-position:0px -2px;vertical-align:middle;}
.file_view_type_bt1{display:inline-block;width:20px;height:17px;background-size:contain;background-image:url("../images/image-square.png");background-repeat:no-repeat;background-position:0px 0px;vertical-align: text-bottom;}
.file_view_type_bt2{display:inline-block;width:20px;height:17px;background-size:contain;background-image:url("../images/images-square.png");background-repeat:no-repeat;background-position:0px 0px;vertical-align: text-bottom;}
.file_view_type_bt3{display:inline-block;width:20px;height:17px;background-size:contain;background-image:url("../images/image.png");background-repeat:no-repeat;background-position:0px 0px;vertical-align: text-bottom;}
.file_view_type_bt4{display:inline-block;width:20px;height:17px;background-size:contain;background-image:url("../images/images.png");background-repeat:no-repeat;background-position:0px 0px;vertical-align: text-bottom;}
.file_view_type_bt5{display:inline-block;width:20px;height:17px;background-size:contain;background-image:url("../images/spreadsheet-regular-24.png");background-repeat:no-repeat;background-position:0px 0px;vertical-align: text-bottom;}
.file_view_type_bt6{display:inline-block;width:20px;height:17px;background-size:contain;background-image:url("../images/news-regular-24.png");background-repeat:no-repeat;background-position:0px 0px;vertical-align: text-bottom;}
.file_view_type_bt7{display:inline-block;width:20px;height:17px;background-size:contain;background-image:url("../images/grid-alt-regular-24.png");background-repeat:no-repeat;background-position:0px 0px;vertical-align: text-bottom;}
.file_view_type_bt8{display:inline-block;width:20px;height:17px;background-size:contain;background-image:url("../images/receipt-regular-24.png");background-repeat:no-repeat;background-position:0px 0px;vertical-align: text-bottom;}
.shape1{background-image:url("../images/image-square.png");}
.shape2{background-image:url("../images/images-square.png");}
.shape3{background-image:url("../images/image.png");}
.shape4{background-image:url("../images/images.png");}
.shape5{background-image:url("../images/spreadsheet-regular-24.png");}
.shape6{background-image:url("../images/news-regular-24.png");}
.shape7{background-image:url("../images/grid-alt-regular-24.png");}
.shape8{background-image:url("../images/receipt-regular-24.png");}

/* 셀렉트 담긴 곳 */
.select_div{position: relative;top:2px;display:inline-block;margin:0;padding:0px;width:50px;height:20px;cursor:pointer;}
.select_div .triangel{display: inline-block;margin:0 0 2px 0;width:15px;height:15px;background:url(../../multi_uploader/images/triangel.png);background-size: cover;vertical-align: text-bottom;}
.select_div:hover .triangel{display: inline-block;margin:0 0 2px 0;width:15px;height:15px;background:url(../../multi_uploader/images/triangel_orange.png);background-size: cover;vertical-align: text-bottom;}

.file_loader .file_opt_btn_panel_div .file_zone_full_view .full_screen{display: inline-block;margin:0 0 4px 0;width:12px;height:12px;background:url(../../multi_uploader/images/full_screen.png);background-size: cover;vertical-align: text-bottom;}
.file_loader .file_opt_btn_panel_div .file_zone_full_view:hover .full_screen{display: inline-block;margin:0 0 4px 0;width:12px;height:12px;background:url(../../multi_uploader/images/full_screen_on.png);background-size: cover;vertical-align: text-bottom;}
.file_loader .file_opt_btn_panel_div .file_zone_full_view .normal_screen{display: inline-block;margin:0 0 4px 0;width:12px;height:12px;background:url(../../multi_uploader/images/normal_screen.png);background-size: cover;vertical-align: text-bottom;}
.file_loader .file_opt_btn_panel_div .file_zone_full_view:hover .normal_screen{display: inline-block;margin:0 0 4px 0;width:12px;height:12px;background:url(../../multi_uploader/images/normal_screen_on.png);background-size: cover;vertical-align: text-bottom;}
.file_loader .help_ion{display: inline-block;margin: 0 7px 1.5px 0;width: 15px;height: 15px;background: url(../../multi_uploader/images/help_icon.png);background-size: contain;vertical-align: text-bottom;}
.colum{display:inline-block;margin:0px;padding:0px;width:26px;height:19px;font-size:16px;color:#f88554;line-height:17px;background:#ededed;border:1px solid #ededed;text-align:center;cursor:pointer;}
.colum:nth-child(2){display:inline-block;margin:0 0 0 -7px;padding:0px;width:20px;height:19px;font-size:16px;color:#333;line-height:17px;background:#ededed;border:1px solid #ededed;text-align:center;cursor:pointer;}
.select_div:hover .colum{background:#dbefff;border:1px solid #3c9dff;cursor:pointer;}
.select_div.on .colum{background:#ededed;color:#f88554;border:1px solid #3c9dff;cursor:pointer;}
.select_div.on:hover .colum{background:#dbefff;border:1px solid #3c9dff;cursor:pointer;} 
.select_div:hover .colum:nth-child(2){color:#f88554;}

/* 셀렉트 후 오픈 레이어*/
.file_loader .open_div{display:none;position:absolute;top:27px;right:0px;left:auto;z-index:105;margin:0;padding:5px;width:240px;min-height:135px;line-height:25px;text-align:left;border:1px solid #ccc;background:#f2f2f2;}
.file_loader .open_div div{margin:0;padding:2px 10px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;background:#fff;cursor:pointer;}
.file_loader .open_div div:last-child{margin:0;padding:2px 10px;border-bottom:1px solid #ccc;background:#fff;}
.file_loader .open_div div:hover{margin:0;padding:2px 10px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;background:#dfeafd;}
.file_loader .open_div div:last-child:hover{margin:0;padding:2px 10px;border-bottom:1px solid #ccc;background:#dfeafd;}
.file_loader .open_div div.on{margin:0;padding:2px 10px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;background:#c1d6fb;}
.file_loader .open_div div.on:last-child:hover{margin:0;padding:2px 10px;border-bottom:1px solid #ccc;background:#c1d6fb;}
.file_loader .open_div div.on:hover{margin:0;padding:2px 10px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;background:#c1d6fb;}

/* 셀렉트 후 오픈 레이어2*/
.file_loader .open_div2{display:none;position:absolute;top:27px;right:0px;z-index:15;margin:0;padding:5px;width:240px;min-height:200px;line-height:25px;text-align:left;border:1px solid #ccc;background:#f2f2f2;}
.file_loader .open_div2 div{margin:0;padding:2px 10px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;background:#fff;cursor:pointer;}
.file_loader .open_div2 div:last-child{margin:0;padding:2px 10px;border-bottom:1px solid #ccc;background:#fff;}
.file_loader .open_div2 div:hover{margin:0;padding:2px 10px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;background:#dfeafd;}
.file_loader .open_div2 div:last-child:hover{margin:0;padding:2px 10px;border-bottom:1px solid #ccc;background:#dfeafd;}
.file_loader .open_div2 div.on{margin:0;padding:2px 10px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;background:#c1d6fb;}
.file_loader .open_div2 div.on:last-child:hover{margin:0;padding:2px 10px;border-bottom:1px solid #ccc;background:#c1d6fb;}
.file_loader .open_div2 div.on:hover{margin:0;padding:2px 10px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;background:#c1d6fb;}
.file_loader .open_div2 label{display:inline-block;width:100%;height:100%;cursor:pointer;font-size:12px;font-weight:normal;}
.file_loader .open_div2 input[type=checkbox]{margin:-5px 5px 0px 0px;padding:0px;line-height:15px;}
/*-------------------------------------------------------------------------------------------------
** 파일 업로더 상단 :끝
**===============================================================================================*/

/*=================================================================================================
** 파일 업로더 중앙단 :시작
** 파일 업로더 높이 (file_zone 기준) : 일반 - 500픽셀,  풀스크린 - 800
**-----------------------------------------------------------------------------------------------*/
.file_loader.full .file_zone .file_list{/*max-height:unset;height: min-content;*/}
.file_loader .file_zone .drop_zone.blur{filter: blur(3px);}
.file_loader.full .file_zone .drop_zone{max-height:unset;min-height: 100%;}
.file_loader.full .file_zone .drop_zone .file_main{height:calc(100% - 0px);}
.file_loader .file_zone .file_up_msg{/*position:absolute;top:calc(50% - 15px);left: 50%;z-index:3;transform: translate(-50%, -50%);*/font-size:15px;color: #797979;text-align: center;pointer-events: none;height:auto;width:100%;min-height: inherit;}
.file_loader .file_zone .file_up_msg .msg_in{position:absolute;top:calc(50% - 0px);left: 50%;z-index:3;transform: translate(-50%, -50%);font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",Dotum,돋움,helvetica,arial,"Apple SD Gothic Neo",sans-serif;letter-spacing: 2px;}
.file_loader .file_zone .focus_heighlight{position:absolute;display:none;left:0px;top:0px;display:block;z-index:100;background:rgba(0, 175, 255, 0.2);border:1px solid rgba(0, 175, 255, 0.8);width:0px;height:0px;cursor:w-resize;}
.file_loader .file_zone .msg_in .file_image{display: inline-block;margin:0;width:12px;height:12px;vertical-align: inherit;background:url(../../multi_uploader/images/file_image.png);background-size: cover;}

/*===============================================
** 리스트 shape css :: 시작 ( 2024-11-25(월) )
**---------------------------------------------*/
.file_loader .drop_zone{position:relative;display:flex;flex-direction: column;overflow:auto; margin:0px;padding:0px;min-width:115px;width: 100%;height:auto;background:none;}
.file_loader .file_main{display: inline-table;position:relative;top:0px;left:0px;margin:0px;padding:0px;width:100%;height:100%;min-height:340px;}
.file_loader .file_main:has(li:only-child) {height:calc(100% - 0px);} /* 리스트가 없다면 가득차게 */
.file_loader .file_list{position:absolute;left:0px;top:0px;z-index:2;margin:0;padding:15px;width:100%;height: fit-content;text-align:left;}
.file_loader .file_list:has(li:only-child) {width: inherit;height:100%} /* 리스트가 한개 있을때 :: 업로드 메세지만 있을 때 */
.file_loader .one_file{position:relative;display:inline-table;margin:1px 1px;padding:1px 5px;width:100%;min-height:30px;min-width:60px;vertical-align:top;text-align:center;border:1px solid transparent;}
.file_loader .one_file:hover{background:#e5f3ff;border:1px solid #e5f3ff;}
.file_loader .one_file::selection{background:#ffff00;} 
.file_loader .one_file:hover .thumb_bt{display:block}
.file_loader .one_file:hover .del_bt{display:block}
.file_loader .one_file em{font-weight:600;color:#525252; font-style: normal}
.file_loader .one_file_before_bar{display:none;position:absolute;top:5%;left:-4.5px;z-index:10;width:1px;border-left:1px solid #ccc;height:90%;background:#0000ff;}
.file_loader .one_file_before_bar:before{position: absolute;left:-8px;top:calc(50% + 0px);z-index:2;content:'';width:4px;height:4px;border-top:2px solid #0000ff;border-right:2px solid #0000ff;transform: rotate(225deg);}
.file_loader .one_file_before_bar:after{position: absolute;left:-8px;top:calc(50% + 1px);z-index:2;content:'';width:8px;height:2px;background:#0000ff;}
.file_loader .one_file_after_bar{display:none;position:absolute;top:5%;right:-4.5px;z-index:10;width:1px;border-right:1px solid #ccc;height:90%;background:#ff8040;}
.file_loader .one_file_after_bar:before{position: absolute;right:-8px;top:calc(50% + 0px);z-index:2;content: '';width:4px;height:4px;border-top:2px solid #ff8040;border-right:2px solid #ff8040;transform: rotate(45deg);}
.file_loader .one_file_after_bar:after{position: absolute;right:-8px;top:calc(50% + 1px);z-index:2;content:'';width:8px;height:2px;background:#ff8040;}
.file_loader .spinner_cover{position: absolute;top: -1px;left: -1px;z-index:10;width: calc(100% + 2px);height: calc(100% + 2px);border: 1px solid #e8e8e8;background: #ffffff;box-shadow: 2px 3px 5px -3px #cecece;opacity:1;}
.file_loader .spinner_cover.off{opacity:0;pointer-events: none;transition: opacity 0.2s ease-in-out 0.1s;}
.file_loader .spinner_in_div{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin:auto;width:30px;height:30px;text-align:center;font-size:30px;line-height:30px;color:#ff6633;}
.file_loader .spinner_in_div img{vertical-align:top;}
.file_loader .spinner_in_div .loader.type1{margin: calc(50% - 10px) auto;width: 20px;height:20px;border: 3px solid rgba(255, 255, 255, 0.3);box-sizing: border-box;border-top-color:#ff8000;border-bottom-color:#ff8000;border-left-color:#f2f2f2;border-right-color:#f2f2f2;border-radius: 100%;animation: spin 1s ease-in-out infinite;}
@keyframes spin{100%{transform: rotate(180deg);}}
.file_loader .spinner_in_div .loader.type2{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:30px;height:5px;-webkit-mask: radial-gradient(circle closest-side,#000 94%,#0000) left/20% 100%;background: linear-gradient(#ff6633 0 0) left/0% 100% no-repeat #ddd;animation: l17 1s infinite steps(15);display:block !important;}
@keyframes l17 {100% {background-size:120% 100%}}
.file_loader .contentDiv{opacity:0;pointer-events: none;} 
.file_loader .contentDiv.on{opacity:1;  transition: opacity 0.2s ease-in-out 0.1s; /* transition: opacity 0.5s ease; */}
.file_loader .thumb_bt,.file_loader .del_bt{ position:absolute;display:none;padding:1px 2px;width:30px;height:15px;line-height:11px;z-index:5;border:1px solid #acd3ff;border-radius:3px;font-size:10px;font-weight:300;font-family:monospace;letter-spacing:1px;text-align:center;overflow:hidden;cursor:pointer;background:rgb(145 145 145 / 20%);color:rgb(255 255 255 / 70%);}
.file_loader .del_bt:hover{background:#ff6633;color:#fff;}
.file_loader .del_bt.on{background:#ff6633;color:#fff;}
.file_loader .del_bt.on:hover{color:#fff;}
.file_loader .del_bt.on:active{color:#fff;}
.file_loader .thumb_bt:hover{display:block;background:#ff6633;color:#fff;}
.file_loader .thumb_bt.on{display:block;background:#3380ff;color:#fff;}
.file_loader .thumb_bt.on:hover{background:#3380ff;color:#fff;}
.file_loader .thumb_bt.on:active{background:#3380ff;color:#fff;}
.file_loader .upload_img_wrap{position:relative;top:0px;z-index:3;}
.file_loader .upload_thumb_wrap {bottom: 0px;left: 50%;margin:2px;padding:0px;border-radius: 5px;cursor: default;display: flex;justify-content: flex-end;align-content: center;flex-direction: column;flex-wrap: wrap;}
.file_loader .upload_thumb_wrap img{margin:0;padding:0}
.file_loader .file_name_in{display: block;position:relative;z-index:2;margin:0;padding:0px;max-width:calc(100% - 0px);max-height:56px;width:100%;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;cursor:default;min-height:18px;line-height:12px;font-size:11.5px;word-spacing:-0.8px;letter-spacing: 0.2px;}
.file_loader .file_name_in img{margin:0px 1px 0px 0px;vertical-align:text-bottom;}
.file_loader .file_name_in .file_name{display:initial;width:100%;min-height: 16px;max-height:62px;background:none;color:#333;outline: none;cursor:text;overflow-x: hidden;overflow-y: hidden;position: relative;top: 0px;padding: 0px;}
.file_loader .file_name_in.edit .file_name{display:inline-block;background:#f2f2f2;line-height:15.5px;pointer-events: auto;}
.file_loader .file_name_in.edit555{background:#fff;border:1px solid #ccc;}
.file_loader .file_name_in.edit:focus{border-color:none;outline:0 none;border-color:#AAA;box-shadow:0 1px 4px rgba(0,0,0,0);}
.file_loader .choice_div{display:none;position:absolute;left:-1px;top:-1px;z-index:1;width:calc(100% + 2px);height:calc(100% + 2px);background:#fffaea;border:1px solid #ffbfbd;}
.file_loader .progressBar{position:absolute;top:0px;left:0px;border:none;width:100%;height:100%;border-radius:0px;background-color:#ff6633;overflow:hidden;}
.file_loader .file_zone_header{display:none;}
.file_loader .file_zone_body{}
.file_loader .file_zone_body .file_list_header{display:none;}
.file_loader .file_zone_foot{display:none;}

/* 타입1 :: 아주 큰 아이콘으로 보기 크기::271 * 228 픽셀*/
.file_loader .drop_zone.shape1 .file_list{display: grid;grid-template-columns: repeat(auto-fit, minmax(273px, 1fr));justify-content: space-between;}
.file_loader .drop_zone.shape1 .one_file{display:flex;flex-direction:column;justify-content:flex-start;margin:1px 1px; padding:5px 5px;width:calc(100% - 4px);min-width:271px;max-width:271px;min-height:10px;max-height:320px;}
.file_loader .drop_zone.shape1 .upload_img_wrap{width: calc(100% - 0px);min-height:15px;margin: 0;display:block;}
.file_loader .drop_zone.shape1 .upload_thumb_wrap img{max-height:241px;max-width:241px;box-shadow:3px 3px 5px -2px #a5a5a5;cursor:default;}
.file_loader .drop_zone.shape1 .file_name_in{margin: 7px 20px 0px 20px;padding: 0px;max-height: 68px;min-height: 16px;width: calc(100% - 40px);line-height: 16px;word-spacing: -0.8px;}
.file_loader .drop_zone.shape1 .file_name{max-height:64px;}
.file_loader .drop_zone.shape1 .file_name_in.edit .file_name{display:block;background:#f2f2f2;border:1px solid #ccc;line-height:15.5px;pointer-events: auto;}
.file_loader .drop_zone.shape1 .file_make_in{display:none;}
.file_loader .drop_zone.shape1 .file_type_in{display:none;}
.file_loader .drop_zone.shape1 .file_pic_size_in{display: none}
.file_loader .drop_zone.shape1 .modified_date_in{display:none;}
.file_loader .drop_zone.shape1 .file_size_in{display:none;}
.file_loader .drop_zone.shape1 .thumb_bt{top:5%;left:15%;}
.file_loader .drop_zone.shape1 .del_bt{top:5%;right:15%;}
.file_loader .drop_zone.shape1 .file_icon{display:inline-block;}

/* 타입2 :: 큰 아이콘으로 보기::105 * 114 픽셀*/
.file_loader .drop_zone.shape2 .file_list{display: grid;grid-template-columns: repeat(auto-fit, minmax(107px, 1fr));align-items: start;justify-content: space-between;}
.file_loader .drop_zone.shape2 .one_file{display:flex;flex-direction:column;justify-content:flex-start;margin:2px 2px; padding:5px 5px;width:calc(100% - 4px);min-width:105px;max-width:105px;min-height:10px;max-height:161px;}
.file_loader .drop_zone.shape2 .upload_img_wrap{width: calc(100% - 0px);min-height:15px;margin: 0;display:block;}
.file_loader .drop_zone.shape2 .upload_thumb_wrap img{max-height:83px;max-width:90px;box-shadow:5px 5px 5px -3px #a5a5a5;cursor:default;}
.file_loader .drop_zone.shape2 .file_name_in{margin: 5px auto 2px auto;padding: 0px;max-height: 64px;min-height: 16px;line-height: 16px;}
.file_loader .drop_zone.shape2 .file_name{max-height:64px;}
.file_loader .drop_zone.shape2 .file_name_in.edit .file_name{display:block;background:#f2f2f2;border:1px solid #ccc;line-height:15.5px;pointer-events: auto;}
.file_loader .drop_zone.shape2 .file_make_in{display:none;}
.file_loader .drop_zone.shape2 .file_type_in{display:none;}
.file_loader .drop_zone.shape2 .file_pic_size_in{display: none}
.file_loader .drop_zone.shape2 .modified_date_in{display:none;}
.file_loader .drop_zone.shape2 .file_size_in{display:none;}
.file_loader .drop_zone.shape2 .thumb_bt{top:5%;left:3%;}
.file_loader .drop_zone.shape2 .del_bt{top:5%;right:3%;}
.file_loader .drop_zone.shape2 .file_icon{display:inline-block;}

/* 타입3 :: 보통 아이콘으로 보기::74 * 70 픽셀*/
.file_loader .drop_zone.shape3 .file_list{display: grid;grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));justify-content: space-between;align-items: start;}
.file_loader .drop_zone.shape3 .one_file{display:flex;flex-direction:column;justify-content:flex-start;margin:1px 1px;/*margin: clamp(1px, 2%, 20px) clamp(1px, 2%, 20px);*/padding:1px 3px;width:calc(100% - 4px);min-width:74px;max-width:74px;min-height:10px;max-height:113px;}
.file_loader .drop_zone.shape3 .upload_img_wrap{width: calc(100% - 0px);min-height:15px;margin: 0;display:block;}
.file_loader .drop_zone.shape3 .upload_thumb_wrap img{max-height:48px;max-width:48px;box-shadow:2px 2px 3px 0px #a5a5a5;cursor:default;}
.file_loader .drop_zone.shape3 .file_name_in{margin: 5px auto 3px auto;padding: 0px;max-height: 64px;min-height: 17px;}
.file_loader .drop_zone.shape3 .file_name{max-height:60px;}
.file_loader .drop_zone.shape3 .file_name_in.edit .file_name{display:block;background:#f2f2f2;border:1px solid #ccc;line-height:15px;pointer-events: auto;}
.file_loader .drop_zone.shape3 .file_make_in{display:none;}
.file_loader .drop_zone.shape3 .file_type_in{display:none;}
.file_loader .drop_zone.shape3 .file_pic_size_in{display: none}
.file_loader .drop_zone.shape3 .modified_date_in{display:none;}
.file_loader .drop_zone.shape3 .file_size_in{display:none;}
.file_loader .drop_zone.shape3 .thumb_bt{top:5%;left:3%;}
.file_loader .drop_zone.shape3 .del_bt{top:5%;right:3%;}
.file_loader .drop_zone.shape3 .file_icon{display:inline-block;}

/* 타입4 :: 작은 아이콘으로 보기 308 * 20 */
.file_loader .drop_zone.shape4 .file_list{display: flex;flex-wrap: wrap;align-items:flex-start;align-content: flex-start;}
.file_loader .drop_zone.shape4 .one_file{display:flex;flex-direction:column;justify-content:flex-end;margin:0.5px 0.1% 0.5px 0.1%;;padding:0px 0px;width:calc(100% - 4px);min-width:443px;max-width:443px;min-height:22px;max-height:22px;text-align: left;}
.file_loader .drop_zone.shape4 .upload_img_wrap{display:none;}
.file_loader .drop_zone.shape4 .upload_thumb_wrap img{display:none;cursor:default;}
.file_loader .drop_zone.shape4 .file_name_in{margin:0 5px 0 5px;-webkit-line-clamp:1;max-width:370px;line-height:18px;text-align: left;word-spacing: -0.8px;}
.file_loader .drop_zone.shape4 .file_name_in.edit{-webkit-line-clamp:none;height:16px;overflow:hidden;}
.file_loader .drop_zone.shape4 .file_name{max-height:16px;}
.file_loader .drop_zone.shape4 .file_name_in.edit .file_name{display:inline-flex;width: calc(100% - 16px);height:15px;background:#f2f2f2;border:1px solid #ccc;line-height:15px;pointer-events: auto;}
.file_loader .drop_zone.shape4 .file_make_in{display:none;}
.file_loader .drop_zone.shape4 .file_type_in{display:none;}
.file_loader .drop_zone.shape4 .file_pic_size_in{display: none}
.file_loader .drop_zone.shape4 .modified_date_in{display:none;}
.file_loader .drop_zone.shape4 .file_size_in{display:none;}
.file_loader .drop_zone.shape4 .thumb_bt{top:2px;right:3px;}
.file_loader .drop_zone.shape4 .del_bt{top:2px;right:35px;}
.file_loader .drop_zone.shape4 .file_icon{display:inline-block;}
 
/* 타입5 :: 목록으로 보기 */
.file_loader .drop_zone.shape5 .file_list{left: 0px;top: 0px;z-index: 2;display: flex;flex-flow: column;flex-wrap: wrap;margin: 0;padding: 15px;width: max-content;height: calc(100% - 0px);min-width:920px/*90px*/;max-width: fit-content;/*background: #fff;*/border-radius: 5px;text-align: left;}
.file_loader .drop_zone.shape5 .file_list:has(.file_up_msg) {position:static;}/*안내글만 있을 때*/
.file_loader .drop_zone.shape5 .one_file{display:flex;flex-direction:column;justify-content:flex-end;margin:0.5px 5px 0.5px 5px;padding:0px 0px;width:auto;min-width:60px;max-width:900px;min-height:20px;max-height:20px;text-align: left;}
.file_loader .drop_zone.shape5 .upload_img_wrap{display:none;}
.file_loader .drop_zone.shape5 .upload_thumb_wrap img{display:none;cursor:default;}
.file_loader .drop_zone.shape5 .file_name_in{margin: 0 5px 0 5px;-webkit-line-clamp: 1;max-width:790px;line-height: 18px;text-align: left;word-spacing: -0.8px;}
.file_loader .drop_zone.shape5 .file_name_in.edit{white-space: nowrap;}
.file_loader .drop_zone.shape5 .file_name{max-height:16px;}
.file_loader .drop_zone.shape5 .file_name_in.edit .file_name{display:inline-flex;width: calc(100% - 25px);height:15px;background:#f2f2f2;border:1px solid #ccc;line-height:15px;overflow:hidden;pointer-events: auto;}
.file_loader .drop_zone.shape5 .file_make_in{display:none;}
.file_loader .drop_zone.shape5 .file_type_in{display:none;}
.file_loader .drop_zone.shape5 .file_pic_size_in{display: none}
.file_loader .drop_zone.shape5 .modified_date_in{display:none;}
.file_loader .drop_zone.shape5 .file_size_in{display:none;}
.file_loader .drop_zone.shape5 .thumb_bt{top:2px;right:3px;}
.file_loader .drop_zone.shape5 .del_bt{top:2px;right:40px;}
.file_loader .drop_zone.shape5 .file_icon{display:inline-block;}

/* 타입6 :: 자세히 보기 */ 
.file_loader .drop_zone.shape6 .file_list{ top:-10px;width:auto;} 
.file_loader .drop_zone.shape6 .file_list:has(.file_up_msg) {position:static;}/*안내글만 있을 때*/
.file_loader .drop_zone.shape6 .one_file{display: flex;margin:1px 0px;padding:0px;width: auto;max-height: 20px;min-height: 20px;text-align: left;flex-direction: row;align-items: center;}
.file_loader .drop_zone.shape6 .upload_img_wrap{display:none;}
.file_loader .drop_zone.shape6 .upload_thumb_wrap img{display:none;cursor:default;}
.file_loader .drop_zone.shape6 .contentDiv{display:flex;height:20px;overflow:hidden;}
.file_loader .drop_zone.shape6 .contentDiv div:not(.choice_div) {position:relative;top:0px;left:0px;z-index:2; min-height:20px;border-right:1px solid transparent;margin:0px; padding:0px; -webkit-line-clamp:1;line-height:20px;text-align: left;word-spacing: -0.8px;text-indent:10px;}
.file_loader .drop_zone.shape6 .file_name_in{margin: 0 5px 0 5px;-webkit-line-clamp: 1;min-width:610px;width:610px;line-height: 18px;text-align: left;word-spacing: -0.8px;}
.file_loader .drop_zone.shape6 .file_name_in.edit{white-space: nowrap;}
.file_loader .drop_zone.shape6 .file_name{max-height:16px;}
.file_loader .drop_zone.shape6 .file_name_in.edit .file_name{display:inline-flex;width: calc(100% - 30px);height:15px;background:#f2f2f2;border:1px solid #ccc;line-height:15px;text-indent:0px;overflow:hidden;pointer-events: auto;}
.file_loader .drop_zone.shape6 .file_make_in{display:none;min-width:185px;width:185px;} 
.file_loader .drop_zone.shape6 .file_type_in{min-width:160px;width:160px;} 
.file_loader .drop_zone.shape6 .file_pic_size_in{display: none} 
.file_loader .drop_zone.shape6 .file_size_in{min-width:100px;width:100px;} 
.file_loader .drop_zone.shape6 .modified_date_in{display: none}
.file_loader .drop_zone.shape6 .file_make_in span,
.file_loader .drop_zone.shape6 .file_type_in span,
.file_loader .drop_zone.shape6 .file_pic_size_in span,
.file_loader .drop_zone.shape6 .file_size_in span,
.file_loader .drop_zone.shape6 .modified_date_in span{display:none;}
.file_loader .drop_zone.shape6 .one_file em{font-weight:normal;}
.file_loader .drop_zone.shape6 .thumb_bt{top:2px;left:580px;}
.file_loader .drop_zone.shape6 .del_bt{top:2px;left:545px;}
.file_loader .drop_zone.shape6 .file_icon{display:inline-block;}
.file_loader .file_zone_header{position:relative;display:none;width:100%;height:35px;background:#ddd}
.file_loader .file_zone_body{position: relative;display:flex;width:100%;height:100%;}
.file_loader .file_zone_foot{position:relative;display:none;width:100%;height:25px;background:#ddd}
.file_loader .drop_zone.shape6 .file_list_header{position:sticky;top:0px;z-index:103;display: flex;flex-direction:column;flex-wrap: wrap;align-content: flex-start;margin: 0px;padding:0px;width: calc(100% - 0px);height:35px;}
.file_loader .drop_zone.shape6s .file_list_header{display: inline-table;position: relative;top: 0px;left: 0px;margin: 0px;padding: 0px;width: 100%;height: 100%;}
.file_loader .drop_zone.shape6 .file_list_header div{text-indent:20px;text-align: left;}
.file_loader .drop_zone.shape6 .file_list_header span{display: flex;width:100%;height:100%;align-items: center;justify-content: flex-start;}
.file_loader .drop_zone.shape6 .file_list_header .move_handle{position: absolute;top: calc(50% - 9px);right: 0px;margin: 0;width: 1px;min-width: 1px;height: 18px;background: #ccc;}
.file_loader .drop_zone.shape6 .file_list_header{background: #f7f7f7;border-bottom: 1px solid #e7e7e7;}
.file_loader .drop_zone.shape6 .upload_img_header{position:relative;display:none;min-width:180px;width:180px;height:100%;background:#f7f7f7;}
.file_loader .drop_zone.shape6 .file_name_in_header{position:relative;min-width:630px;width:630px;height:100%;background:#f7f7f7;}
.file_loader .drop_zone.shape6 .file_make_in_header{position:relative;display:none;min-width:160px;align-items: center;width:160px;height:100%;background:#f7f7f7;}
.file_loader .drop_zone.shape6 .file_type_in_header{position:relative;min-width:160px;width:160px;height:100%;background:#f7f7f7;}
.file_loader .drop_zone.shape6 .file_pic_size_in_header{position:relative;min-width:120px;width:120px;height:100%;background:#f7f7f7;;}
.file_loader .drop_zone.shape6 .file_size_in_header{position:relative;min-width:100px;width:100px;height:100%;background:#f7f7f7;}
.file_loader .drop_zone.shape6 .modified_date_in_header{position:relative;min-width:170px;width:170px;height:100%;background:#f7f7f7;}

/* 타입7 :: 타일로 보기 */
.file_loader .drop_zone.shape7 .file_list{display: flex;flex-wrap: wrap;align-items:flex-start;align-content: flex-start;}
.file_loader .drop_zone.shape7 .one_file{display:flex;flex-direction:column;justify-content:flex-end;margin:2px 0.2%;padding:1px 1px;width:calc(100% - 4px);min-width:435px;max-width:435px;min-height:52px;max-height:52px;text-align: left;line-height:18px;}
.file_loader .drop_zone.shape7 .upload_img_wrap{display: flex;align-content: center;flex-direction: column;justify-content: center;height: 50px;width: 48px;margin: 0;}
.file_loader .drop_zone.shape7 .upload_thumb_wrap{padding: 2px;border-radius: 5px;cursor: default;display: flex;justify-content: center;align-content: center;flex-direction: column;flex-wrap: wrap;}
.file_loader .drop_zone.shape7 .upload_thumb_wrap img{height:auto;min-height:5px;max-height:45px;width:auto;min-width:8px;max-width:45px;box-shadow:2px 2px 2px 0px #a5a5a5;cursor:default;}
.file_loader .drop_zone.shape7 .file_name_in{position: absolute;left: 60px;top: 1px;display: inline-block;width: 340px;padding: 1px 0px 1px 0px;min-height: 15px;line-height: 15px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 12.3px;color: #7a7a7a;font-weight: bold;}
.file_loader .drop_zone.shape7 .file_name_in img{display:none;}
.file_loader .drop_zone.shape7 .file_name_in.edit{white-space: nowrap;}
.file_loader .drop_zone.shape7 .file_name{max-height:16px;}
.file_loader .drop_zone.shape7 .file_name_in.edit .file_name{display:inline-flex;width: calc(100% - 0px);height:15px;background:#f2f2f2;border:1px solid #ccc;line-height:15px;overflow:hidden;pointer-events: auto;}
.file_loader .drop_zone.shape7 .file_make_in{display:none;}
.file_loader .drop_zone.shape7 .file_type_in{display: inline-block;position: absolute;left:60px;top:18px;z-index: 2;margin: 0;padding: 1px 0px 1px 0px;width: 170px;max-width: calc(100% - 0px);min-height: 15px;overflow: hidden;line-height: 15px;font-size:11px;word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;white-space: nowrap;font-size:12px;color:#757575;}
.file_loader .drop_zone.shape7 .file_pic_size_in{display: none}
.file_loader .drop_zone.shape7 .modified_date_in{display:none;}
.file_loader .drop_zone.shape7 .file_size_in{display: inline-block;position: absolute;left:60px;top:33px;z-index: 2;margin: 0;padding: 1px 0px 1px 0px;width: 170px;max-width: calc(100% - 0px);min-height: 15px;overflow: hidden;line-height: 15px;font-size:12px;color:#757575;word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;white-space: nowrap;}
.file_loader .drop_zone.shape7 .thumb_bt{top:10px;left:400px;z-index:3;}
.file_loader .drop_zone.shape7 .del_bt{top:30px;left:400px;z-index:3;}
.file_loader .drop_zone.shape7 .file_icon{display:inline-block;}
.file_loader .drop_zone.shape7 .one_file .file_name_in img{display:none;}
.file_loader .drop_zone.shape7 .one_file em{font-weight:normal;}
.file_loader .drop_zone.shape7 .one_file .file_type_in span{display:none;}
.file_loader .drop_zone.shape7 .one_file .file_size_in span{display:none;}

/* 타입8 :: 내용으로 보기 :: 자바스크립트의 도움으로 넓이 변경시 특정 셀 보이고 보이지 않게함 */
.file_loader .drop_zone.shape8 .file_list{display: flex;align-items: flex-start;flex-direction: column;}
.file_loader .drop_zone.shape8 .one_file{display:flex;flex-direction:column;justify-content:flex-end;margin:-1px 0px 0px 0px;padding:0px 0px;width:calc(100% - 4px);min-width:250px;min-height:50px;max-height:50px;border-top: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc;text-align: left;line-height:18px;overflow:hidden;}
.file_loader .drop_zone.shape8 .contentDiv{display:flex;}
.file_loader .drop_zone.shape8 .upload_img_wrap{display: flex;align-content: center;flex-direction: column;justify-content: center;height:48px;width:50px;margin: 0;}
.file_loader .drop_zone.shape8 .upload_thumb_wrap{padding: 2px;border-radius: 5px;cursor: default;display: flex;justify-content: center;align-content: center;flex-direction: column;flex-wrap: wrap;}
.file_loader .drop_zone.shape8 .upload_thumb_wrap img{height:auto;min-height:5px;max-height:30px;width:auto;min-width:8px;max-width:30px;box-shadow:2px 2px 2px 0px #a5a5a5;cursor:default;}
.file_loader .drop_zone.shape8 .file_name_in{display:block;width:320px;padding: 1px 0px 1px 0px;min-height: 15px;line-height:33px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 12.3px;color: #7a7a7a;font-weight: bold;}
.file_loader .drop_zone.shape8 .file_name_in img{display:none;}
.file_loader .drop_zone.shape8 .file_name_in.edit{white-space: nowrap;}
.file_loader .drop_zone.shape8 .file_name{max-height:20px;}
.file_loader .drop_zone.shape8 .file_name_in.edit .file_name{display:inline-flex;width: calc(100% - 0px);height:20px;background:#f2f2f2;border:1px solid #ccc;line-height:20px;overflow:hidden;pointer-events: auto;}
.file_loader .drop_zone.shape8 .file_make_in{display:none;}
.file_loader .drop_zone.shape8 .file_type_in{position:absolute;top:0px;left:400px;z-index: 2;display:block;margin: 0;padding: 1px 10px 1px 10px;width:auto;height:24px;overflow: hidden;line-height:28px;font-size:11px;word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;white-space: nowrap;font-size:12px;color:#757575;}
.file_loader .drop_zone.shape8 .file_pic_size_in{position:absolute;top:24px;left:400px;z-index:2;display:inline-block;margin: 0;padding: 1px 10px 1px 10px;width:auto;height:24px;overflow: hidden;line-height:20px;word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;white-space: nowrap;font-size:12px;color:#757575;}
.file_loader .drop_zone.shape8 .modified_date_in{position:absolute;top:0px;left:620px;z-index: 2;display:block;margin: 0;padding: 1px 10px 1px 10px;width:250px;height:24px;overflow: hidden;line-height:28px;font-size:11px;word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;white-space: nowrap;font-size:12px;color:#757575;}
.file_loader .drop_zone.shape8 .file_size_in{ position:absolute;top:24px;left:620px;z-index: 2;display:block;margin: 0;padding: 1px 10px 1px 10px;width: 170px;height:24px;overflow: hidden;line-height:20px;font-size:11px;word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;white-space: nowrap;font-size:12px;color:#757575;}
.file_loader .drop_zone.shape8 .thumb_bt{top:7px;left:370px;z-index:3;}
.file_loader .drop_zone.shape8 .del_bt{top:27px;left:370px;z-index:3;}
.file_loader .drop_zone.shape8 .file_icon{display:inline-block;}
.file_loader .drop_zone.shape8 .one_file .file_name_in img{display:none;}
.file_loader .drop_zone.shape8 .one_file em{font-weight:normal;}
.file_loader .drop_zone.shape8 .one_file .file_type_in span{display:inline-block;margin:0 5px 0 0;}
.file_loader .drop_zone.shape8 .one_file .file_pic_size_in span{display:inline-block;margin:0 5px 0 0;}
.file_loader .drop_zone.shape8 .one_file .file_size_in span{display:inline-block;margin:0 5px 0 0;}
.file_loader .drop_zone.shape8 .file_list .one_file.thumb_chk3, 
.file_loader .drop_zone.shape8 .file_list .one_file.thumb_chk4 {border-top: 1px solid #8ebfe8;border-bottom: 1px solid #8ebfe8;}
.file_loader .drop_zone.shape8 .one_file_before_bar{display: none;position: absolute;top: 12px;left: 100px;z-index: 10;width:200px;border-top: 1px solid #ccc;height: 1px;background: #0000ff;}
.file_loader .drop_zone.shape8 .one_file_before_bar:before {position: absolute;right: unset;left: calc(50% - 2px);top: calc(50% - 11px);z-index: 2;content: '';width: 4px;height: 4px;border-top: 2px solid #0000ff;border-right: 2px solid #0000ff;transform: rotate(315deg);}
.file_loader .drop_zone.shape8 .one_file_before_bar:after {position: absolute;right: unset;left: calc(50% - 1px);top: calc(50% - 9px);z-index: 2;content: '';width: 2px;height: 8px;background: #0000ff;} 
.file_loader .drop_zone.shape8 .one_file_after_bar{display: none;position: absolute;top: unset;right: unset;bottom: 12px;left: 100px;z-index: 10;width:200px;border-top: 1px solid #ccc;height: 1px;background: #ff8040;}
.file_loader .drop_zone.shape8 .one_file_after_bar:before{position: absolute;right: unset;left: calc(50% - 1px);top: calc(50% + 6px);z-index: 2;content: '';width: 4px;height: 4px;border-top: 2px solid #ff8040;border-right: 2px solid #ff8040;transform: rotate(135deg);}
.file_loader .drop_zone.shape8 .one_file_after_bar:after{position: absolute;right: unset;left: 50%;top: calc(50% + 1px);z-index: 2;content: '';width: 2px;height: 8px;background: #ff8040;} 
/*-----------------------------------------------
 * 리스트 shape css :: 끝 ( 2024-11-25(월) )
**=============================================*/

/*===============================================
 * 리스트 선택, 드래그등에 의한 색변경 지정 css :: 시작
**-----------------------------------------------
 * 진한 배경 진한 보더 ▣ ( thumb_chk1, thumb_chk2 ) => 보더 선택 배경 선택형
 * 배경 없음 진한 보더 □ ( thumb_off1, thumb_off2 ) => 보더 선택 배경 해제형
 *
 * 진한 배경 보더 없음 ■ ( thumb_chk3, thumb_chk4 ) => 배경 선택 보더 해제형
 * 배경 없음 보더 없음 ▩ ( thumb_off3, thumb_off4 ) => 배경 해제 보더 해제형
 *
 * 진한 배경 진한 보더 ▦ ( bgsoft )                 => 배경 선택 보더 해제 가벼운 색형, 마우스 다운시 연한 배경색 (  마우스 업시 진한 배경색으로 바뀌기 전에 사용 )
**---------------------------------------------*/
/*드래그로 범위가 포함되었을 때의 썸네일 선택*/
.file_loader .file_zone .file_list .one_file.thumb_chk1 .choice_div,
.file_loader .file_zone .file_list .one_file.thumb_chk2 .choice_div,
.file_loader .file_zone .file_list .one_file.thumb_chk3 .choice_div,
.file_loader .file_zone .file_list .one_file.thumb_chk4 .choice_div{display:none;position:absolute;left:-1px;top:-1px;z-index:1;width:calc(100% + 2px);height:calc(100% + 2px);background:#ffebb7;border:1px solid #ff9b99;}
.file_loader .file_zone .file_list .one_file:hover .choice_div{background:#ffebb7;border:1px solid #ff9b99;} 

/* ( ▣ )진한 배경, 배경 보다 진한 보더 */
.file_loader .file_zone .file_list .one_file.thumb_chk1,
.file_loader .file_zone .file_list .one_file.thumb_chk2{background:#cce8ff;border:1px solid #84bcea !important;} 
.file_loader .file_zone .file_list .one_file.thumb_chk1:hover,
.file_loader .file_zone .file_list .one_file.thumb_chk2:hover{background:#cce8ff;border:1px solid #84bcea;} 

/* ( ▦ )배경 선택 보더 해제 가벼운 색형, 마우스 다운시 연한 배경색 *//* 콘트롤 키와 함께 마우스 다운시 ( 업은 색이 달라짐 )*/
.file_loader .file_zone .file_list .one_file.bgsoft,
.file_loader .file_zone .file_list .one_file.bgsoft:hover{background:#d8eaf9;border:1px solid #d8eaf9;}

/* ( ■ )진한 배경, 배경색과 같은 보더 */
.file_loader .file_zone .file_list .one_file.thumb_chk3,
.file_loader .file_zone .file_list .one_file.thumb_chk4{background:#cce8ff;border:1px solid #cce8ff;} 
.file_loader .file_zone .file_list .one_file.thumb_chk3:hover,
.file_loader .file_zone .file_list .one_file.thumb_chk4:hover{background:#cce8ff;border:1px solid #99d1ff;}

/* ( □ )배경 없음, 진한 보더 */
.file_loader .file_zone .file_list .one_file.thumb_off1,
.file_loader .file_zone .file_list .one_file.thumb_off2{background:#fff;border:1px solid #99d1ff;}
.file_loader .file_zone .file_list .one_file.thumb_off1:hover{/*background:#cce8ff;border:1px solid #cce8ff;*/background:#d8eaf9;border:1px solid #d8eaf9;}
.file_loader .file_zone .file_list .one_file.thumb_off2:hover{background:#fff;border:1px solid #99d1ff;}

/* (  )배경 없음, 보더 없음 */
.file_loader .file_zone .file_list .one_file.thumb_off3,
.file_loader .file_zone .file_list .one_file.thumb_off4{background:#fff;border:1px solid #fff;}
.file_loader .file_zone .file_list .one_file.thumb_off3:hover,
.file_loader .file_zone .file_list .one_file.thumb_off4:hover{background:#fff;border:1px solid #fff;}

/* (  )배경 없음, 보더 없음  */
.file_loader .file_zone .file_list .one_file.thumb_chk1.thumb_off3,
.file_loader .file_zone .file_list .one_file.thumb_chk1.thumb_off4{background:#fff;border:100px solid #99d1ff;}
.file_loader .file_zone .file_list .one_file.thumb_chk1.thumb_off3:hover,
.file_loader .file_zone .file_list .one_file.thumb_chk1.thumb_off4:hover{background:#fff;border:1px solid #99d1ff;} 

/* 추후 변경내지 삭제 알아볼 것 */
.file_name text{display:none}/* 보통아이콘 크기에서는 이름앞 파일 아이콘을 안보여줘서 공간을 확보한다 */
/* 추후 변경내지 삭제 알아볼 것 */

/*-----------------------------------------------
 * 리스트 선택, 드래그등에 의한 색변경 지정 css :: 끝
**=============================================*/

/*===============================================
 * 고스트 이미지
**---------------------------------------------*/
.file_loader .file_zone .ghost_img{position:fixed;z-index:100;display:none;margin:1px 1px;padding:5px 5px;width:105px;min-height:105px;vertical-align:top;text-align:center;background:rgb(175 222 243 / 20%);border:1px solid rgb(169 221 245 / 50%);box-shadow:1px 1px 5px -1px #373737;border-radius:2px;cursor:default;}
.file_loader .file_zone .ghost_img .ghost_img_wrap{display:table;position:absolute;bottom:0px;left:50%;margin:0px 0px 0px 0px;transform:translate(-50%, 0%);width:calc(100% - 10px);min-height:60px;text-align:center;}
/*한개만 선택시 */
.file_loader .file_zone .ghost_img .ghost_img_wrap.one .ghost_thumb_wrap{text-align:center;}
.file_loader .file_zone .ghost_img .ghost_img_wrap.one{left:calc(50% + 0px);bottom:0px;z-index:5;opacity:1;}
.file_loader .file_zone .ghost_img .ghost_img_wrap.one img{max-height:95px;max-width:95px;height:100%;user-drag:none;}

/*여러개 선택시*/
.file_loader .file_zone .ghost_img .ghost_thumb_panel{position:absolute;top:0px;left:0px;margin:0px;padding:0px;width:100%;height:100%;background:#f2f2f2;filter:blur(10px);opacity:0.5;}
.file_loader .file_zone .ghost_img .ghost_thumb_wrap{display:table-cell;padding:5px;vertical-align:bottom;text-align:left;cursor:default;}
.file_loader .file_zone .ghost_img div:nth-child(3){left:calc(50% + 3px);bottom:5px;z-index:5;opacity:1;}
.file_loader .file_zone .ghost_img div:nth-child(4){left:calc(50% + 1px);bottom:7px;z-index:4;opacity:0.8;}
.file_loader .file_zone .ghost_img div:nth-child(5){left:calc(50% - 1px);bottom:9px;z-index:3;opacity:0.7;}
.file_loader .file_zone .ghost_img div:nth-child(6){left:calc(50% - 3px);bottom:11px;z-index:3;opacity:0.6;}
.file_loader .file_zone .ghost_img div:nth-child(7){left:calc(50% - 5px);bottom:13px;z-index:1;opacity:0.5;}
.file_loader .file_zone .ghost_img .ghost_img_cnt{position:relative;z-index:10;top:40px;display:inline-block;margin:0px auto 0px auto;padding:2px 3px 2px 3px;min-width:10px;min-height:11px;border:1px solid #fff;background:#0077c7;text-align:center;font-size:12px;letter-spacing:1px;line-height:11px;color:#fff;}
.file_loader .file_zone .ghost_img .ghost_thumb_wrap img{max-height:85px;max-width:85px;height:100%;user-drag:none;}

/*===============================================
 * 파일 마우스 오버시 파일 정보 레이어 팝업 ( 타이틀 div )
**---------------------------------------------*/
.file_loader .file_info_div{position:fixed;/*display:none;*//*display:none;opacity:0;*/left:-1000px;top:-1000px;z-index:100;margin:0px;padding:10px;text-align:left;font-size:12px;line-height:20px;background:rgba(0, 175, 255, 0.5);background:#fff;border:1px solid rgba(0, 175, 255, 0.8);box-shadow:1px 0px 8px 1px #969696;border-radius:5px;min-width:200px;min-height:80px;white-space:nowrap;}
.file_loader .file_info_div p{margin:0px;padding:0px;line-height:20px;color:#696969;}
.file_loader .file_info_div p span{margin:0px 10px 0px 0px;padding:0px;line-height:20px;color:#df7000;}
.file_loader .file_info_div p span:nth-child(3){color:#171717;}
.file_loader .file_info_list{margin:0px;padding:0px;color:#df7000;}

/*===============================================
 * 파일 상세보기 이미지, 미리보기 이미지, 창 이동 무빙바
 *---------------------------------------------*/
.file_loader .file_zone .file_info{display:none;position:relative;height:auto;z-index:2;}
.file_loader .drag_bar{display:none;position:relative;left:-4px;z-index:12;height: 100%;width:2px;}
.file_loader .drag_bar_cover{position:absolute;left:1px;z-index:1;margin:0px;padding:0px;width:10px;min-height:100%;cursor:w-resize;}
.file_loader .drag_bar .drag_bar_line{position:absolute;left:2px;content:'';width:2px;height:100%;/*background:#f9f9f9;*/ background:#ffdcce;}
.file_loader .drag_bar:hover .drag_bar_line{background:#ff8282;} /* 마우스 오버 */
.file_loader .drag_bar:active .drag_bar_line{background:#ff3131;}/* 마우스 다운시 */

/*===============================================
 * 파일 상세보기 이미지, 미리보기 이미지
 *-----------------------------------------------
 * file_info( 미리보기 공간 ) ->
 * 		drag_bar ( 좌우 이동용 핸들용 스크롤바 )
 * 		file_view_dp ( 이미지 들어가는 공간 ) -> 
 * 				view_preview
 * 					프리뷰 이미지 하나
 * 				view_detail
 * 					디테일 이미지들 
 * file_view_change_bt ( 하단 미리보기, 상세보기 버튼 ) -> 
 *---------------------------------------------*/
 /* 공통 */
.file_loader .file_view_dp{margin:0px;height:100%;text-align:center;overflow:hidden;font-size:12px;width:100%;height:100%;background :#fff;/*max-height:500px;*/}
.file_loader .file_view_dp.on{margin:0px 0px 0px 11px;background-color:#fff;padding:20px 20px 20px 10px;height:calc(100% - 40px);max-width:calc(100% - 30px);min-width:270px;width:100%;}
.file_loader .msg{position:relative;top:calc(50% - 25px);line-height:25px;text-align:center;color:#7c7c7c;display:none;}
.file_loader .file_zone_bottom{position:relative;bottom:0px;left:0px;display:block;z-index:12;margin:0px;padding:0px;width:calc(100% - 0px);min-height:25px;height:25px;}
.file_loader .file_zone_bottom_in{position:relative;bottom:0px;left:0px;display:block;z-index:15;margin:0px;padding:0px;width:calc(100% - 0px);min-height:25px;height:25px;border-top:1px solid #e3e3e3;background:#f9f9f9;}
.file_loader .loader_foot_right{position:absolute;right:0px;display:flex;margin:0;padding:0px;width:auto;height:25px;}
.file_loader .status_bar{position:absolute;right:110px;margin:0;padding:0px;width:auto;height:25px;line-height: 22px;}
.file_loader .status_bar div{position: relative;display: inline-block;margin: 0 5px;width: auto;max-width:100px; overflow:hidden;height: 100%;color:#828282;text-align:center;white-space: nowrap; }
.file_loader .status_bar .smallbar{position: relative;top:-6px;left:0px;display: inline-block;margin: 0 10px;width: 2px;height: 12px;background: #cfcfcf;}
.file_loader .status_bar div.file_name_container{width: 100px;}
.file_loader .status_bar .file_name_content{left:0px;display: inline-block;position: absolute;white-space: nowrap;min-width: 100px;}  
.marquee_on{animation:marquee1 10s linear 1 1s,marquee2 20s linear 1 11s,marquee3 10s linear 1 31s forwards;}
@keyframes marquee1 {from { transform: translateX(0%); }to { transform: translateX(-100%); }}
@keyframes marquee2 {from { transform: translateX(100px); }to { transform: translateX(-100%); }}
@keyframes marquee3 {from { transform: translateX(100px); }to { transform: translateX(0%); }}

/* 파일 업로더 헬프 버튼, 상세보기 버튼, 미리보기 버튼 */ 
.file_loader .file_zone_bottom_in .file_view_type3, 
.file_loader .file_zone_bottom_in .file_view_type4,
.file_loader .file_zone_bottom_in .file_zone_full_view{position:relative;top:3px;right:5px;margin:0px;padding:2px;font-size:16px;color:#717171;line-height:14px;height:20px;width:26px;height:20px;background:transparent;border:1px solid #ededed;text-align:center;}

/* 버튼 호버 */
.file_loader .file_zone_bottom_in .file_view_type3:hover, 
.file_loader .file_zone_bottom_in .file_view_type4:hover, 
.file_loader .file_zone_bottom_in .file_zone_full_view:hover{margin:0px;padding:2px;font-size:16px;color:#3f87bb;line-height:14px;height:20px;background:transparent;width:26px;height:20px;background:#dbefff;border:1px solid #3c9dff;}

/* 버튼 on */
.file_loader .file_zone_bottom_in .file_view_type3.on,
.file_loader .file_zone_bottom_in .file_view_type4.on,
.file_loader .file_zone_bottom_in .file_zone_full_view.on{margin:0px;padding:2px;font-size:16px;color:#f88554;line-height:14px;height:20px;width:26px;height:20px;background:transparent;border:1px solid #3c9dff;}

/* 버튼 on 호버*/
.file_loader .file_zone_bottom_in .file_view_type3.on:hover,
.file_loader .file_zone_bottom_in .file_view_type4.on:hover,
.file_loader .file_zone_bottom_in .file_zone_full_view.on:hover{margin:0px;padding:2px;font-size:16px;color:#f88554;line-height:14px;height:20px;width:26px;height:20px;background:#dbefff;border:1px solid #3c9dff;}

/* 버튼 아래 i => 백그라운드 이미지 */
.file_loader .file_zone_bottom_in .file_view_type3 .preview_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/preview_view_off_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.file_loader .file_zone_bottom_in .file_view_type3.on .preview_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/preview_view_on_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.file_loader .file_zone_bottom_in .file_view_type4 .detail_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/detail_view_off_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.file_loader .file_zone_bottom_in .file_view_type4.on .detail_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/detail_view_on_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.file_loader .file_zone_bottom_in .file_zone_full_view .detail_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/detail_view_off_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}
.file_loader .file_zone_bottom_in .file_zone_full_view.on .detail_view_bt{display:block;width:20px;height:15px;background-size:contain;background-image:url("../images/detail_view_on_bt2.png");background-repeat:no-repeat;background-position:0px 0px;}

/*하단 우측 영역 늘리고 줄이는 바 */
.resize_handle{position:relative;right:0px;display:inline-block;margin:0 0 0 5px;width:auto;height:100%;overflow:hidden;text-align: right;cursor:se-resize;}
.resize_handle i{margin:3px -3px 0px 0px;transform: rotate( 45deg );font-size:35px;color: #c4c4c4;}
.resize_handle i:hover{color: #575757;}
.resize_handle_curver {pointer-events: none;position: absolute;right: 0px;bottom:0px;z-index:67;margin: 0 0 0 5px;display: inline-block;width:25px;height:25px;overflow: hidden;text-align: right;cursor: se-resize;}
.resize_icon3{position: relative;right: 0px;top: 0px;display: inline-block;padding: 0px;height:25px;width:25px;color: #d8d8d8;font-size:20px;}
.resize_icon3:hover{color: #838383;}
.resizeWd_handle{position:absolute;top:50%;right:1px;transform:translateY(-37px);z-index:12;width:17px;height:50px;color:#333;text-align: center;cursor:e-resize;background:#efefef;border-top-left-radius:10px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius:10px;display: flex;justify-content: center;align-items: center;opacity:0.3;}
.resizeWd_handle:hover{background:#e9e7e7;}
.resizeWd_handle:hover,.resizeWd_handle:active{opacity:1; transition: opacity 0.3s ease;}
.resizeHt_handle{position: absolute;bottom:0px;left: 50%;z-index:51;transform:translateX(-50%);width:50px;height:23px;color:#333;text-align:center;cursor: s-resize;background:#efefef;line-height:23px;opacity:0.3;}
.resizeHt_handle:hover,.resizeHt_handle:active {opacity:1; transition: opacity 0.3s ease;}

/* 리사이즈 등을 할 때 커서의 변경이 이뤄지지 않고 단일 커서만 나오도록 하기 위한 장치 ::: background-color:#333 */
.helperDiv{position: fixed;top: 0;left: 0;z-index:9999;width: 100vw;height: 100vh;background-color:#ababab;opacity:0.01;}

/* 미리 보기 */ 
.file_loader .view_preview,
.file_loader .view_detail {display:none;margin: 0;padding: 0;width: 0px;height: calc(100% - 0px);transform: translate(0%, 0%);object-fit: scale-down;overflow: auto;opacity : 0;/*transition: width 1.5s ease-in-out 0.1s;*//* 0.1초의 속도로 넓이를 넓힘 */background:#fff;}
.file_loader .view_preview{position: relative;top:0%;left: 0%; z-index:0;overflow:hidden;}
.file_loader .view_detail{position: relative;top:0%;left: 0%; z-index:0;padding:10px;}
.file_loader .view_preview.on, 
.file_loader .view_detail.on{z-index:1;opacity : 1;}
.file_loader .file_zone .file_info .drag_bar.on{opacity : 1; /* 열고 나서 1초뒤에 opacity를 0.2s의 속도로 점점 1로 만들어줌 */}
.file_loader.full .file_zone .file_info .file_view_dp .view_preview,
.file_loader.full .file_zone .file_info .file_view_dp .view_detail {/*max-height:fit-content;*/} 
 
/* 미리보기 콘텐츠가 들어가는 div */
.file_loader .preview_in_div{position:absolute;top:10px;left:10px;margin:0px;padding:0px;width:calc(100% - 20px);height:calc(100% - 20px);/*object-fit:scale-down;*/text-align:center;opacity:0;background:#fff;overflow:hidden } 

/* 미리보기 이미지 콘트롤:::start */
.file_loader .preview_img_control{display:block;position:fixed;bottom:0px;left:0px;z-index:3;margin:0px;padding:0px;width:100%;height:30px;pointer-events:auto;}
.file_loader .bgPannel{position:absolute;top:0px;left:0px;width:100%;height:100%;background:#595959;opacity:0.7;/*transition: all 0.2s;*/}  
.imgCtrPannel{position: absolute;top: 50%;left: calc(50% - 55px);transform: translate(-50%, -50%);display: flex;flex-wrap: nowrap;justify-content: center;max-width: 475px;height: 100%;align-items: center;}	
.imgViewNavi{display:none;position:absolute;bottom:45px; right:20px;max-width:120px;max-height:120px;border:2px solid #ffa500;border-radius:5px;cursor:default;}
.naviThumbnail{position:absolute;top:0px; left:0px;z-index:1;width:calc(100% - 0px);height:calc(100% - 0px);background:#333;opacity:0.3;border-radius:3px;}
.naviGuide{position:absolute;top:0px; left:0px;z-index:2;width:calc(100% - 0px);height:calc(100% - 0px);background:#fff;border-radius:3px;}
.naviImg{width:100%;height:100%;border-radius:3px;}
.naviPointer{position:absolute;top:5px; left:5px;z-index:3;width:24px;height:24px;border:1px solid #fff;}
.naviPointerBg{position:absolute;top:0px; left:0px;z-index:1;width:22px;height:22px;background:#0f8fd5;opacity:0.3;}
.naviPointerCursor{position:absolute;top:0px; left:0px;z-index:2;width:22px;height:22px;}
.naviPointerCursor:before{content:'';position:absolute;top:5px; left:10px;z-index:1; width:1px;height:10px;background:#fff;}
.naviPointerCursor:after{content:'';position:absolute;top:10px; left:5px;z-index:2; width:10px;height:1px;background:#fff;}
.imgViewBt{margin:0px 10px 0px 10px;padding:0px;width:25px;height:22px;}
.view_typeBt{margin:0px;padding:0px;width:22px;height:22px;background: transparent;}
.view_typeBt .view_type_bt{display:inline-block;font-size: 16px;color: #f88554;line-height: 14px;background: transparent;border:1px solid #adadad;margin: 0px;padding: 2px;width: 27px;height:22px;background-image: url(../images/view_type1.png);background-size: cover;background-position-y:0px;background-repeat: no-repeat;cursor: pointer;}
.view_type_bt:hover{background-color:#f0f3ff;border:1px solid #3c9dff;}
.view_typeBt.on .view_type_bt{background-image: url(../images/view_type2.png);}
.imgCtrL_on{margin:0px 5px 0px 0px;padding:0px;width:25px;height:22px;background-image:url("../images/minusView1.png");background-repeat: no-repeat;background-size: contain;background-position:2px 0px;cursor:pointer;border:1px solid #adadad;}
.imgCtrR_on{margin:0px 0px 0px 5px;padding:0px;width:25px;height:22px;background-image:url("../images/plusView1.png");background-repeat: no-repeat;background-size: contain;background-position:2px 0px;cursor:pointer;border:1px solid #adadad;}
.imgCtrL_off{margin:0px 5px 0px 0px;padding:0px;width:25px;height:22px;background-image:url("../images/minusView2.png");background-repeat: no-repeat;background-size: contain;background-position:2px 0px;cursor:pointer;border:1px solid #adadad;}
.imgCtrR_off{margin:0px 0px 0px 5px;padding:0px;width:25px;height:22px;background-image:url("../images/plusView2.png");background-repeat: no-repeat;background-size: contain;background-position:2px 0px;cursor:pointer;border:1px solid #adadad;}
.imgCtrL_on:hover,.imgCtrR_on:hover,.imgCtrL_off:hover,.imgCtrR_off:hover{background-color:#505050;border:1px solid #3c9dff;}

/* 미리보기 이미지 확대.축소 셀렉트 */
.imgRatioSelectMenu{position:relative;display:inline-block;margin:0 10px 0px 0px;width:70px;height:22px;}
.selectMenu{position:absolute;top:0px;left:0px;z-index:2;width:70px;height:22px;background:#838383;border:1px solid #adadad;color: #fff;} 
.selectMenu:hover{background-color:#505050;border:1px solid #3c9dff;}
.selectMenu:focus{outline: none;border:1px solid #fff;border:1px solid #3c9dff;background:#838383;border-radius:0px;color:#fff;}
.selectMenu option{text-indent: 10px !important; }
.selectInput{position:absolute;z-index:3;left:0px;top:0px;display:block;margin:0;width:50px;height:22px;background:#838383;border:1px solid #adadad;font-size:14px;text-align:center;color:#fff;} 
.selectInput:hover{background-color:#505050;border:1px solid #3c9dff;}
.selectInput:focus{outline: none; background-color:#505050;border:1px solid #3c9dff;border-radius:0px;color:#fff;}
/*형제 요소를 바꾸고자 할때 :: 단 자신보다 이후에 나온 돔에만 적용 */
.selectMenu:hover + .selectInput {background-color:#505050;border:1px solid #3c9dff;}
.selectMenu:focus + .selectInput {background-color:#505050;border:1px solid #3c9dff;}
/* 인풋창에 마우스오버시 셀렉트창에도 css변경되도록 인풋의 부모를 이용::: 부모요소에서 자식요소를 바꾸고자할 때 */
.imgRatioSelectMenu:hover .selectMenu {background-color:#505050;border:1px solid #3c9dff;}
/*인풋창에 포커스가 일어나면 셀렉트도 css 변경 */
.imgRatioSelectMenu:focus-within select {background-color:#505050;border:1px solid #3c9dff;}
.slider {display:none;position: relative;margin:0px 10px 0px 10px;width:100px;height: 20px;}
.slider-track {position: absolute;width: 100%;height:4px;border:1px solid #ccc;background: #fff;top: 50%;transform: translateY(-50%);border-radius:5px;}
.slider-percent{margin:0px;/*width:15px;*/height:100%;background:orange;}
.slider-handle{position: absolute;top: 50%;z-index:2;width: 15px;height: 15px;background:#3380ff;border-radius: 50%;cursor: pointer;transform: translate(-50%, -50%);transition: background 0.3s;}
.slider-handle:after{content: '';position: absolute;top: 3px;left:3px;z-index: 3;width:9px;height:9px;border-radius: 50%;background:#bfe2ff;transition: all 0.2s;}
.slider-handle:hover {background:#3380ff;opacity:1;}
.slider-handle:hover:after,.slider-handle:active:after {position: absolute;top:3px;left:3px;z-index: 3;width: 9px;height:9px;border-radius: 50%;background:#6fbeff;transition: all 0.2s;}
.slider-value {display:none;position: absolute;top:-35px;left:7px;transform: translateX(-50%);padding:0px;width:70px;height:25px;border-radius:5px;line-height:25px;background:#333;color:#fff;letter-spacing:2px;}
.slider-value:after{content: "";position: absolute;bottom: -10px;left: calc(50% - 8px);z-index: 7;display: block;width: 0;border-width: 12px 8px 0px 8px;border-style: solid;border-color: #333 transparent;}
.slider .bar {position: absolute;top:7px;left:-0.5px;width: 100%;height:6px;z-index:2;}
.slider .tick {position: absolute;width: 0.5px;height:6px;background:#a7a7a7;} 
.slider .tick:first-child,.slider .tick:last-child {opacity:0;}
/* 미리보기 이미지 콘트롤:::end */

/* 미리보기의 눈금자, 눈금선, 안내선, 이미지 줌 콘트롤러등을 담은 */
.preview_img_tools{position: absolute;top:0px;left:0px;z-index:1;width:calc(100% - 0px);height:calc(100% - 0px);pointer-events:none;overflow: hidden;}
/* ============== 미리보기 눈금자 :: 픽셀 잣대 ==============*/ 
.rulerCont{position: absolute;top:0px;left:0px;z-index:2;width:calc(100% - 0px);height:calc(100% - 0px);overflow: hidden;}
.rulerX{position: absolute;top:0px;left:-10px;display: flex;width:fit-content;height: 25px;overflow: hidden;flex-direction: row;flex-wrap: nowrap;pointer-events:none;}
/*50픽셀마다 라인*/
.rulerX:before{content:'';position: absolute;top:0px;left:30px;z-index: 2;width: 100%;height: 10px;background: repeating-linear-gradient(90deg, #ff8306 0px, #ff8306 1px, transparent 0px, transparent 50px);background-size: 50px 10px;}
/*10픽셀마다 작은 라인*/
.rulerX:after{content: '';position: absolute;top:0px;left:30px;z-index:2;width: 100%;height:5px;background: repeating-linear-gradient(90deg, #ff8306 0px, #ff8306 1px,transparent 0px, transparent 10px);background-size: 10px 10x;}
.rulerNumX{position: relative;top:10px;left:10px;display: block;margin: 0px 1px 0px 0px;width: 49px;height: 15px;text-align: left;line-height: 15px;font-size: 10px;}
.rulerNumX span{display:inline-block;width:40px;height:100%;text-align:center;color:#fba37d;pointer-events:none;}
.rulerY{position:absolute;top:-10px;left: 10px;display: flex;width: 50px;height: 100%;overflow: hidden;flex-wrap: wrap;pointer-events:none;}
/*50픽셀마다 라인*/
.rulerY:before{content:'';position: absolute;top:20px;left:0px;z-index: 2;width:10px;height:100%;background: repeating-linear-gradient(180deg, #ff8306 0px, #ff8306 1px, transparent 0px, transparent 50px);background-size: 10px 50px;}
/*10픽셀마다 작은 라인*/
.rulerY:after{content: '';position: absolute;top:20px;left:0px;z-index:2;width:5px;height: 100%;background: repeating-linear-gradient(180deg, #ff8306 0px, #ff8306 1px,transparent 0px, transparent 10px);background-size: 10px 10x;}
.rulerNumY{position: relative;top:10px;left:17px;display: block;margin: 0px 0px 1px 0px;width: 49px;height:49px;text-align: left;line-height:19px;font-size: 10px;}
.rulerNumY span{display:inline-block;width:40px;height:100%;text-align:left;color:#5c88fa;pointer-events:none;}

/* ============== 미리보기 눈금선 :: 격자.모눈자 ==============*/  
.gridLines{display:block;position: absolute;top:0px;left:0px;z-index:3;width:calc(100% - 0px);height:calc(100% - 0px);overflow: hidden;}
.gridLines .lines{position:absolute;top:-9px;left:-16px;z-index:1;height:calc(100% + 1px);width:calc(100% + 11px);background: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%,transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%,transparent 77%, transparent) center / 40px 40px, linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent) center / 40px 40px; pointer-events:none;}
.gridLines .verticalRuler{position: absolute;top:0px;left:calc(50% - 0px);z-index:2;width:1px;height:calc(100% - 0px);background:#ff6600;opacity: 0.7;pointer-events:none;}
.gridLines .verticalRuler.hov{height:calc(100% - 30px);}
.gridLines .horizontalRuler{position:absolute;top:calc(50% - 0px);left:-10px;z-index:3;width:calc(100% + 20px);height:1px;background:#ff6600;opacity: 0.7;pointer-events:none;}
/* 미리보기 격자( 모눈자 ) 콘트롤:::end */ 

/* ============== 미리보기 안내선 :: 십자선 ==============*/
.guidesLine{display:block;position: absolute;top:0px;left:0px;z-index:3;width:calc(100% - 0px);height:calc(100% - 0px);overflow: hidden;}
.guidesLine .verticalGuide{position: absolute;top: 0;left: calc(50% - 0px);z-index: 3;width: 1px;height: 100%;background: repeating-linear-gradient(to bottom,red, red 2px, white 2px, white 4px);opacity:1; cursor:col-resize;pointer-events:visible;}
.guidesLine .verticalGuide.hov{height:calc(100% - 30px);}
.guidesLine .horizontalGuide{position: absolute;top: calc(50% - 0.5px);left: 0;z-index: 4;width: 100%;height: 1px;background: repeating-linear-gradient(to right,red,red 2px,white 2px,white 4px);opacity: 1; cursor:row-resize;pointer-events:visible;}
.guidesLine .verticalGuide:before{content:'';position: absolute;top: 0;left: calc(50% - 3px);z-index: 2;width:6px;height:100%;background:transparent;}
.guidesLine .horizontalGuide:before{content:'';position: absolute;top: calc(50% - 3px);left: 0;z-index: 4;width:100%;height:6px;background:transparent;}
.guidesLine .position-display{display:none2;position: absolute;top: calc(50% - 10px);left: calc(50% - 10px);z-index:5;width:80px;height:22px;background:#333;color:#fff;font-size:11px;text-align:center;line-height:20px;border:1px solid #000;}
 
/* 미리보기 썸네일과 오디오 플레이어등이 들어감 */
.file_loader .preview_upload_thumb{/*background:pink;*/display: flex;margin: 0px;padding: 0px;width: 100%;height: 100%;align-items: center;justify-content: center;flex-wrap: nowrap;flex-direction: column;}

/* 미리보기시 이미지 */
.file_loader .preview_thumb_audio{position:relative;top:calc(50% - 0px);transform:translateY(-50%);max-width:100%;max-height:calc(100% - 20px);}
.file_loader .preview_upload_thumb img{ position: absolute; box-shadow:2px 2px 3px 0px #a5a5a5;}
.file_loader .video_player{position: absolute;width: calc(100% - 20px);height:auto;top: 50%;left: 50%;transform: translate(-50%, -50%);border:1px solid #fff;box-shadow: 2px 2px 3px 0px #a5a5a5;}
.file_loader .preview_upload_thumb.audio img{max-height:calc(100% - 70px);}/*오디오 썸네일일 경우 하단 오디오 플레이어를 두기 위해서 */

/* 미리보기 오디오 플레이어 */
.file_loader .preview_audio_control{position: absolute;bottom: 0px;left: 0px;display: flex;margin: 0px;padding: 0px;width: 100%;height: 50px;justify-content: center;align-items: center;}
.file_loader .preview_audio_control .audio_player{display:block;margin:0px;padding:0px;max-width:250px;width:calc(100% - 0px);height: 30px;}

/*미리보기 오디오 플레이어 자동 재생 체크 박스*/
.chk_msg{position: relative;bottom: 6px;margin: 0px 5px;width: 15px;height: 15px;color:#5b5b5b;}
.file_view_change_bt .auto_audio_chk{position: relative;bottom: 8px;margin: 0px 5px;width: 15px;height: 15px;}

/*===============================================
 * 미리보기 오브젝트 스타일
**---------------------------------------------*/ 
.obj_cls{margin:0;padding:0;height:100%;width:100%;}
.txt_preview{margin:0;padding:0;height:100%;width:100%;text-align:left;font-size:14px;overflow:auto;}
.objet_preview{border:none;margin:0;padding:10px;height:100%;width:100%;text-align:left;font-size:14px;overflow:auto;}
.previewFrame{border:none;margin:0;padding:10px;height:100%;width:100%;text-align:left;font-size:14px;overflow:auto;}
.notReadableMsg{position: relative;top: calc(50% - 25px);margin:0;padding:0;height:100%;width:100%;line-height: 25px;text-align: center;color: #7c7c7c;}

/* 상세 보기 이미지와 각종 세부 정보 포함 :detail :시작 */
.file_loader .view_detail .preview_info1{display: flex;align-items: center;flex-wrap: wrap;margin:0px;padding:0px;text-align:left;font-size:16px;font-weight:bold;line-height:25px;min-height:50px;}
.file_loader .view_detail .preview_info1 .preview_img_file_name{margin:0px;padding:0px;font-size:16px;font-weight:bold;height:25px;width:100%;line-height:25px;color:#333;}
.file_loader .view_detail .preview_info1 .preview_img_file_type{margin:0px;padding:0px;font-size:13px;font-weight:normal;height:25px;width:100%;line-height:25px;color:#5d5d5d}
.file_loader .view_detail .preview_info1 p{/* 여러줄 끝에 말줄임 overflow:hidden;height:50px !important;width:50px !important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis;word-wrap :break-word;word-break:break-all;*/min-width:213px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* 상세 이미지들을 담는 div */
.file_loader .view_detail .preview_info2{position:relative;top:0px;left:0px;margin:10px 0px 10px 0px;padding:0px;max-height:150px;width:100%;min-height:100px;text-align:left;} 

/* 상세 이미지 여러개를 선택했을 때 계층으로 이미지를 쌓음 */
.file_loader .view_detail .preview_info2 img {position:absolute;max-height:100px;max-width:100px;width:auto;height:auto;user-drag:none;}
.file_loader .view_detail .preview_info2 img:nth-child(1){left:0px;bottom:12px;z-index:1;opacity:1;box-shadow:2px 2px 3px 0px #a5a5a5;}
.file_loader .view_detail .preview_info2 img:nth-child(2){left:2px;bottom:10px;z-index:2;opacity:1;box-shadow:2px 2px 3px 0px #a5a5a5;}
.file_loader .view_detail .preview_info2 img:nth-child(3){left:4px;bottom:8px;z-index:3;opacity:1;box-shadow:2px 2px 3px 0px #a5a5a5;}
.file_loader .view_detail .preview_info2 img:nth-child(4){left:6px;bottom:6px;z-index:4;opacity:1;box-shadow:2px 2px 3px 0px #a5a5a5;}
.file_loader .view_detail .preview_info2 img:nth-child(5){left:8px;bottom:4px;z-index:5;opacity:1;box-shadow:2px 2px 3px 0px #a5a5a5;}
.file_loader .view_detail .preview_info2 img:nth-child(6){left:10px;bottom:2px;z-index:6;opacity:1;box-shadow:2px 2px 3px 0px #a5a5a5;}
.file_loader .view_detail .preview_info2 img:nth-child(7){left:12px;bottom:0px;z-index:7;opacity:1;box-shadow:2px 2px 3px 0px #a5a5a5;}

/* 상세 이미지에 대한 각종 정보 영역 */
.file_loader .view_detail .preview_info3{position:relative;top:0px;left:0px;display:flex;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;font-size:13px;}
.file_loader .view_detail .preview_img_info4{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_img_info5{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_img_info6{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_img_info7{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_img_info8{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_img_info9{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_info10{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_info11{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_info12{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_info13{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_info14{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_info15{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_info16{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
.file_loader .view_detail .preview_info17{position:relative;top:0px;left:0px;margin:0px;padding:0px;height:23px;width:100%;line-height:20px;text-align:left;}
 
/* 상세 이미지에 대한 각종 정보 영역 span */
.file_loader .view_detail .preview_title{display:inline-block;width:100px;height:20px;color:#333;font-weight:bold;/*background:#fdd0f4;*/}
.file_loader .view_detail .preview_content{display:inline-block;min-width:100px;height:20px;color:#5d5d5d;width: calc(100% - 100px);max-width:250px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;/*background:#eb8f8f;*/}
/* 상세 보기 이미지와 각종 세부 정보 포함 :detail :끝 */

/*===============================================
 * 파일존 전체 화면으로 보기
**---------------------------------------------*/ 
.file_loader.full{position:fixed;top:0px;left:0px;z-index:150;margin:0px;padding:0px;width:calc(100% - 0px);height:calc(100% - 0px);background:#fff;overflow:hidden;max-height:unset !important;/* 최대창에서는 전체 크기가 될수 있도록 */} 
.file_loader.full > .loader_main{ margin:0px;padding:10px;/*30px;*/background:#fff;}
/*드래그 바 마우스 다운시 생성*/
.front_panel{display:none;position:absolute;top:0px;left:0px;z-index:5;width:100%;height:100%;background:#53a9ff;opacity:0.1}

/*-------------------------------------------------------------------------------------------------
** 파일 업로더 중앙단 :끝
**===============================================================================================*/



/*=================================================================================================
** 파일 업로더 하단 :시작
**-----------------------------------------------------------------------------------------------*/

/*===============================================
** 하단 오픈레이어 히스토리
**---------------------------------------------*/
.file_historyDiv{position:absolute;top:0px;left:0px;z-index:12;width:100%;height:auto;border-top:0px solid #ccc;transition: all 0.3s ease-in-out 0.1s;}
.file_historyDiv .file_historyBg{width:100%;height:100%;border-top:1px solid #ccc;}
.file_historyDiv .openBt{position:absolute;top:-20px;right:0px;z-index:16;width:100px;height:20px;background:#007efd;border-top-left-radius:15px;opacity:0.1;text-align:center;line-height:20px;font-size:13px;color:#fff;letter-spacing: 2px;cursor:pointer;transition: all 0.3s ease-in-out 0.5s;}
.file_historyDiv .openBt:hover{opacity:1;transition: all 0s ease-in-out 0s}
.file_historyDiv .openBt.on{opacity:1;line-height:20px;}
.file_historyBgpannel{position:absolute;top:-20px;left:0px;z-index:14;width:100%;height:calc(100% + 20px);opacity:0;}
.file_historyBlurpannel{position:absolute;top:0px;left:0px;z-index:14;width:100%;height:100%;background:#0f0f0f;opacity:0.8;}
.file_history{position:relative;top:10px;left:10px;z-index:15;width:calc(100% - 20px);height:calc(100% - 65px);padding:10px;}
.file_historyDiv .colorInfo{position:relative;bottom:0px;left:20px;z-index:15;width:calc(100% - 40px);height:40px;padding:0px;line-height:40px;color:#fff;border-top:1px solid #fff;    background: #3f3f3f;}
.file_historyDiv .leftDiv{display:inline-block;margin:0;float:left;}
.file_historyDiv .rightDiv{display:inline-block;margin:0;float:right;}
.file_historyDiv .clearDiv{clear:both;}
.file_historyDiv .rightDiv button:nth-child(1){position:relative;top:-3px;left:-10px;margin:0;padding:4px 5px;height:20px;border-radius:5px;line-height:5px;color:#333;font-size:11px;border: solid 1px #c3c3c3;background: #fdfdfd;background-image: linear-gradient(to bottom, #f2f2f2 5%, #dddddd 90%);box-shadow: 0px 3px 10px -5px #9a64ea;}
.file_historyDiv .rightDiv button:nth-child(2){position:relative;top:-3px;left:0px;margin:0px;padding:4px 5px;height:20px;border-radius:5px;line-height:5px;color:#333;font-size:11px;border: solid 1px #c3c3c3;background: #fdfdfd;background-image: linear-gradient(to bottom, #f2f2f2 5%, #dddddd 90%);box-shadow: 0px 3px 10px -5px #9a64ea;}
.file_historyDiv .circle{display:inline-block;margin:0 0 0 20px;width:10px;height:10px;border-radius:50%;}
.file_historyDiv .square{display:inline-block;margin:0 5px 0 0px;width:10px;height:10px;}
.file_historyDiv .square.on:after{content: '';position: absolute;top:0px;left:15px;width: 5px;height: 12px;border: solid #0029ff;border-width: 0 2px 2px 0;transform: rotate(45deg);}
.file_historyDiv .bg_white{background:#fff;}
.file_historyDiv .bg_yellow{background:#ffff00;}
.file_historyDiv .bg_red{background:#ff7e7e;}
.file_historyDiv .bg_orange{background:#ffcd83;}
.file_historyDiv .bg_blue{background:#8ebbf5;}
.file_historyDiv .bg_pink{background:#ffc3ff;}
.file_historyDiv .bg_check{background:#ffa581;}
.file_historyDiv span:nth-child(1){margin:0 0 0 5px;}
.file_historyDiv pre{overflow-x: auto;}
.file_history .historyIn{width:100%;height:100%;overflow-y:auto;color:#fff;word-wrap: break-word;text-align: left;}
.file_history .historyIn p{line-height:25px;font-size:14px;}
.file_history .historyIn {counter-reset: list-counter;list-style: none;padding-left: 0;}
.file_history .historyIn li {display: flex;align-items: flex-start;margin:0px;padding: 5px 5px 5px 5px;border-bottom:2px dotted #797979;}
.file_history .historyIn li:nth-child(1) {border-top:2px dotted #797979;}
.file_history .historyIn li::before {content: counter(list-counter) ". ";counter-increment: list-counter -1;flex-shrink: 0;width: 40px;text-align: right;margin-right: 10px;}
.file_history .historyIn li > div {flex-grow: 1;} 
.file_history .historyIn li .historyTime {margin: 0px 5px 0px 10px; /* 시간 정보와 내용 사이 여백 */} 
.file_history .historyIn li div:nth-child(1){margin:0 0 0 5px;width:calc(100% - 180px);font-size:14px;line-height:15px;} 
.file_history .historyIn li div:nth-child(2){margin:0 0 0 5px;width: 180px;font-size:12px;line-height:15px;} 
.file_history .historyIn .historyTime{width:130px;color:#c5c5c5;text-align:right;}
.file_history .historyIn .white{color:#fff;}
.file_history .historyIn .yellow{color:#ffff00;}
.file_history .historyIn .red{color:#ff7e7e;}
.file_history .historyIn .orange{color:#ffcd83;}
.file_history .historyIn .blue{color:#8ebbf5;}
.file_history .historyIn .pink{color:#ffc3ff;}
.file_history .historyIn .bold{font-weight:bold;} 
.file_historyDiv .historySpan{display:inline-block;margin:0 0 0 10px;color:#fff;font-size:12px;line-height:17px;cursor:pointer;}
.file_historyDiv .historyCont{display:none;white-space: pre-wrap;word-wrap: break-word;line-height:23px;}

/*===============================================
** 하단 오픈레이어 파일정보
**---------------------------------------------*/
ul.fInfo{margin:0px;/*height: 25px;*/line-height: 25px;/*overflow: hidden;*/}
ul.fInfo li.fTitle{margin:0px;padding:0px;font-size:54px;font-weight:bold;color:#ffc3ff;}
ul.fInfo li{margin:0px;padding:0 0 0 20px;font-size:33px;word-wrap: break-word;}

/* 하단 왼쪽 라벨, 파일 업로더  :시작 */
.row label{margin:0px;padding:0px;}
.row input[name="cnt_multi_file[]"]{display:none;margin:0;font-size:14px;padding:0px;}
.row input[type="file"]{display:none;margin:0;font-size:14px;padding:0px;}

/* 하단 왼쪽 업로드된 갯수 ( n개 업로드 녹새 노란 글씨 푯말 ):시작 */
.row .total_in_file_img{position:relative;z-index:12;display:none;}
.row .total_in_file_img::before{content:"";position:absolute;bottom:20px;left:37.5px;z-index:5;display:block;width:0;border-width:10px 8px 0px 8px;border-style:solid;border-color:#78bf00 transparent;}
.row .total_in_file_img::after{content:"";position:absolute;bottom:21px;left:36.5px;z-index:7;display:block;width:0;border-width:10px 8px 0px 8px;border-style:solid;border-color:#00c73c transparent;}
.row .total_in_file{position:absolute;display:block;top:-48px;left:50%;z-index:7;transform:translate(-50%, 0px);margin:0;padding:2px 5px;min-width:30px;height:20px;white-space:nowrap;border:1px solid #78bf00;border-radius:4px;background:#00c73c;color:#ffff00;line-height:12px;text-align:center;font-size:10px;font-weight:bold;font-family:sans-serif;box-shadow:1px 2px 5px -1px #b9b6b6;}
.row .total_in_file_cnt{font-size:12px;font-weight:bold;color:#fff;letter-spacing:1px;}
.row .total_in_file_ani{animation :total_in_file_rotate 1s 2 linear;-webkit-animation-delay:1s;animation-delay:1s;}

/* 푯말 에니메이션 */
@keyframes total_in_file_rotate{0%{transform-origin :50% -15px;transform :rotate(0deg);}25% {transform-origin :50% -15px;transform :rotate(15deg);}50% {transform-origin :50% -15px;transform :rotate(0deg);}75% {transform-origin :50% -15px;transform :rotate(-15deg);}100%{transform-origin :50% -15px;transform :rotate(0deg);}}

/* 하단 오른쪽 파일 업로드 사이즈 표기 */
.file_size_print{margin:0px;padding:3px 0px 3px 0px;font-size:14px;}
/*-------------------------------------------------------------------------------------------------
** 파일 업로더 하단 :끝
**===============================================================================================*/

/* 잘못된 파일이름 표기시 팝업 알림창 */
.altPopUpLayer{position:absolute;bottom:0px;left:0px;z-index:5;width:300px;height:60px;padding:5px;background:#f2f2f2;border:1px solid #ccc;border-radius:5px;}
.altPopUpLayer::before{content:"";position:absolute;top:-15px;left:36.5px;z-index:7;display:block;width:0;border-width:0px 12px 15px 0px;border-style: solid;border-color: #ccc transparent;}
.altPopUpLayer::after {content:"";position:absolute;top:-12px;left:38px;z-index: 7;display:block;width:0;border-width:0px 9px 12px 0px;border-style: solid;border-color: #f2f2f2 transparent;}
.altPopUpLayer .txt{line-height:25px;text-align:center;color: #7c7c7c;}

/*================================================================================================*
** 이벤트, 드래그 관련 허용. 비허용:: 끝
**-----------------------------------------------------------------------------------------------*/

/*===============================================
 * 이벤트 전파를 막는다
 * drop_zone 더블 클릭시 .file_main으로 이벤트가 넘어가는
 * 잘못된 이벤트 전파를 막는다
**---------------------------------------------*/
.file_name_in                          {pointer-events:auto;} 
.upload_thumb                          {pointer-events:auto;} /* 이미지 : 마우스 이벤트를 사용 가능하도록 */
.del_bt                                {pointer-events:auto;}
.thumb_bt                              {pointer-events:auto;}
.colum                                 {pointer-events:none;}
.focus_heighlight                      {pointer-events:none;}
.file_info_div                         {pointer-events:none;} 
.upload_img_wrap                       {pointer-events:none;}
.upload_thumb_wrap                     {pointer-events:none;}
.upload_thumb                          {pointer-events:none;}  
.file_name_in img                      {pointer-events:none;}
.file_name                             {pointer-events:none;}
.far, .fa-regular                      {pointer-events:none;}  
.resize_icon3                          {pointer-events:none;}  
.drag_bar_line                         {pointer-events:none;}
.drag_bar_cover2                       {pointer-events:none;}  
.open_div i                            {pointer-events:none;} 
.open_div span                         {pointer-events:none;} 
.file_zone_help i                      {pointer-events:none;}  
.file_zone_full_view i                 {pointer-events:none;}  
.loader_main .moreLine                 {pointer-events:none;} 
.file_historyDiv .rightDiv button span {pointer-events:none;}  
.n_del_bt_alt_cont span                {pointer-events:none;}
.naviPointer                           {pointer-events:none;}
.naviPointerBg                         {pointer-events:none;}
.naviPointerCursor                     {pointer-events:none;}
.module_bg                             {pointer-events:none;}
.file_loader .btn1 .file_image         {pointer-events:none;}
/*.previewFrame                        {pointer-events:none;}*/
/*속성이 no일 경우만 = 히스토리 판넬이 닫혀있어서[ 아래로 내려 있어서 ] 가로 스크롤바등이 만약 생길 때 스크롤바 이동이 안되는 경우를 막기 위해 */
.file_historyDiv[divopen="no"] .file_historyBgpannel {pointer-events: none;}


/*===============================================
 * 드래그 셀렉트를 막는다
**---------------------------------------------*/
.file_loader .view_detail {-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.file_loader .view_detail .preview_info1 {-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.file_loader .view_detail .preview_title {-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.file_loader .view_detail .preview_content {-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.file_loader .row .file_size_print{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.focus_heighlight{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.drop_zone, .file_list{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.one_file{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}

/* 이미지 드래그, 셀렉트 안되게 */
.file_loader button, .file_loader img, .file_loader p, .file_loader span, .file_loader ul, .file_loader li{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.file_loader{user-select: none;}
.file_loader .file_zone .file_list.shape5{user-select: none;}
.file_loader .file_zone .file_list{user-select:none;}
.file_loader .file_zone .file_list .one_file{user-select:none;}
.file_loader .file_zone .ghost_img{user-select:none;}
.file_loader .msg{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;} 
.file_name, .thumb_bt, .del_bt, .file_info{-webkit-user-select: none;-moz-user-select: none;-ms-use-select: none;user-select: none;}

/*-------------------------------------------------------------------------------------------------
** 이벤트, 드래그 관련 허용. 비허용:: 끝
**===============================================================================================*/