@import url("common.css");
html, body{height:100%;}
#wrap{height:100%;overflow-x:hidden;}

/*header 공통*/
#header{width:100%;height:64px;min-width:1280px;border-bottom:1px solid #2AAED9;margin-bottom:5px;align-items:center;display:flex;}
#header div{height:100%;display:flex;align-items:center;}
#header div.leftArea{}
#header div.leftArea > img{margin-left:20px;}
#header div.leftArea .homeImg{}
#header div.leftArea .logImg{width:100px;}
#header div.leftArea .hIdArea{margin-left:20px;font-weight:bold;font-size:16px;}
#header div.middleArea{flex-grow:1;}
#header div.rightArea ul.reportOpenArea li{float:left;height:36px;line-height:36px;font-size:14px;border:1px solid #679198;box-sizing:border-box;margin-left:2px;padding:0 8px;text-align:center;color:#8ea1a0;font-weight:bold;background-color:#31363e;cursor:pointer;user-select: none;}
#header div.rightArea ul.reportOpenArea li:hover{background-color:#040f1c;color:#85C1CC;}
#header div.rightArea ul.reportOpenArea li.selReport{background-color:#040f1c;color:#85C1CC;}
#header div.rightArea ul.reportOpenArea li.confirmReport{border:1px solid #FF9B00;color:#FF9B00;}
#header div.rightArea .optionImg{margin-left:3px;}
#header div.rightArea .closeImg{margin:0px 8px 0px 3px;}
#header div.rightArea ul.adminMenuArea{position:absolute;top:60px;right:52px;background-color:#000;z-index:9;border:double 1px #fff;width:150px;text-align:center;display:none;}
#header div.rightArea ul.adminMenuArea li{font-size:14px;height:30px;line-height:30px;}
#header div.rightArea ul.adminMenuArea li:hover{background-color:#31363e;color:#ba843e;cursor:pointer;}

#contents{min-width:900px;width:100%;height:calc(100% - 69px);position:relative;}
#contents > div{border:1px solid #2AAED9;position:absolute;}

/*------------------ 세로모드 ------------------ */
#contents div.searchArea{top:0px;left:0px;width:100%;height:100px;display:flex;}

#contents div.searchArea .peopleSearch,#contents.twoList div.searchArea .peopleSearch,#contents.twoList div.searchArea2 .peopleSearch{margin-top: 5px;width:200px;display:inline-block;position:absolute;left:0px;}
#contents div.searchArea .peopleSearch p,#contents.twoList div.searchArea .peopleSearch p,#contents.twoList div.searchArea2 .peopleSearch p{margin-top:1px;width:100%;}
#contents div.searchArea .peopleSearch p input[type='text'],#contents.twoList div.searchArea .peopleSearch p input[type='text'],#contents.twoList div.searchArea2 .peopleSearch p input[type='text']{width:calc(100% - 50px);height:26px;padding-left:5px;background-color:#000;border:none;border-bottom:1px solid #85C1CC;font-size:14px;}
#contents div.searchArea .peopleSearch p:last-child,#contents.twoList div.searchArea .peopleSearch p:last-child,#contents.twoList div.searchArea2 .peopleSearch p:last-child{text-align:center;position:absolute;top:60px;left:190px;width:55px;}
#contents div.searchArea .peopleSearch p:last-child > img:last-child,#contents.twoList div.searchArea .peopleSearch p:last-child > img:last-child,#contents.twoList div.searchArea2 .peopleSearch p:last-child > img:last-child{margin-right:0px;}

#contents div.searchArea .btnSearch, #contents.twoList div.searchArea .btnSearch,#contents.twoList div.searchArea2 .btnSearch{left:270px;top:20px;width:450px;height:30px;margin-top:0px;display:inline-block;position:absolute;}
#contents div.searchArea .btnSearch:nth-of-type(2),#contents.twoList div.searchArea .btnSearch:nth-of-type(2),#contents.twoList div.searchArea2 .btnSearch:nth-of-type(2){top:55px;}
#contents div.searchArea .btnSearch h3,#contents.twoList div.searchArea .btnSearch h3,#contents.twoList div.searchArea2 .btnSearch h3{position:absolute;border:none;left:0px;display:flex;gap:6px;flex-wrap:wrap;}
#contents div.searchArea .btnSearch h3 > span,#contents.twoList div.searchArea .btnSearch h3 > span,#contents.twoList div.searchArea2 .btnSearch h3 > span{display:none;}
#contents div.searchArea .btnSearch ul,#contents.twoList div.searchArea .btnSearch ul,#contents.twoList div.searchArea2 .btnSearch ul{margin-top:0px;position:absolute;left:40px;width:calc(100% - 50px);display:flex;gap:6px;flex-wrap:wrap;padding:0 8px;}
#contents div.searchArea .btnSearch ul li,#contents.twoList div.searchArea .btnSearch ul li,#contents.twoList div.searchArea2 .btnSearch ul li{flex: 1 1 20%;max-width:52px;cursor:pointer;height:24px;line-height:24px;font-size:18px;border:1px solid #85C1CC;background-color:#31363e;text-align:center;}
#contents div.searchArea .btnSearch ul li:hover,#contents.twoList div.searchArea .btnSearch ul li:hover,#contents.twoList div.searchArea2 .btnSearch ul li:hover{color:#85C1CC;background-color:#000;}
#contents div.searchArea .btnSearch ul li.active,#contents.twoList div.searchArea .btnSearch ul li.active,#contents.twoList div.searchArea2 .btnSearch ul li.active{color:#85C1CC;background-color:#000;}
#contents div.searchArea .btnSearch ul li:last-child:after,#contents.twoList div.searchArea .btnSearch ul li:last-child:after,#contents.twoList div.searchArea2 .btnSearch ul li:last-child:after{clear:both;display:block;content:"";}

#contents div.searchArea .calenderSearch, #contents.twoList div.searchArea .calenderSearch,#contents.twoList div.searchArea2 .calenderSearch{margin-top:0px;top:30px;width:220px;position:absolute;left:700px;}
#contents div.searchArea .calenderSearch .mainCalendar, #contents.twoList div.searchArea .calenderSearch .mainCalendar,#contents.twoList div.searchArea2 .calenderSearch .mainCalendar{display:none;}
#contents div.searchArea .calenderSearch input[type='text'], #contents.twoList div.searchArea .calenderSearch input[type='text'],#contents.twoList div.searchArea2 .calenderSearch input[type='text']{margin-top:5px;width:35%;background-color:#000;border:none;border:1px solid #85C1CC;height:24px;text-align:center;}

#contents div.listArea{top:105px;left:0px;width:100%;height:calc(100% - 24% - 110px);}
#contents div.listArea .lASubject, #contents div.listArea2 .lASubject2{display:flex;width:100%;height:38px;line-height:38px;border-bottom:1px solid #2AAED9;}
#contents div.listArea .lASubject h2, #contents div.listArea2 .lASubject2 h2{width:400px;padding-left:10px;font-size:24px;color:#2AAED9;font-weight:normal;}
#contents div.listArea .lAContents, #contents div.listArea2 .lAContents2{height:calc(100% - 38px);overflow-y:scroll;overflow-x:scroll;}
#contents div.listArea .lAContents ul.lACSubject, #contents div.listArea2 .lAContents2 ul.lACSubject2{width: fit-content;width:max-content;min-width:100%;background-color:#000;display:flex;position:sticky;top: 0;height:34px;border-bottom:1px solid #2AAED9;z-index:10;}
#contents div.listArea .lAContents ul.lACSubject li, #contents div.listArea2 .lAContents2 ul.lACSubject2 li{border-left:2px solid #0b3340;font-size:18px;height:100%;line-height:34px;color:#85C1CC;flex-shrink:0;flex-basis:150px;white-space:nowrap;text-overflow:ellipsis;text-align:center;cursor:move;position:relative;outline:none;}
#contents div.listArea .lAContents ul.lACContents, #contents div.listArea2 .lAContents2 ul.lACContents2{width: fit-content;width: max-content;min-width: 100%;display: flex;flex-direction:column;flex:1;}
#contents div.listArea .lAContents ul.lACContents .lACCList, #contents div.listArea2 .lAContents2 ul.lACContents2 .lACCList2{display:flex;border-bottom:1px solid #1e4046;cursor:pointer;height:28px;line-height:28px;}
#contents div.listArea .lAContents ul.lACContents .lACCList:hover, #contents div.listArea2 .lAContents2 ul.lACContents2 .lACCList2:hover{background-color:#31363E;color:#ba843e;color:#fff;}
#contents div.listArea .lAContents ul.lACContents .lACCList.active, #contents div.listArea2 .lAContents2 ul.lACContents2 .lACCList2.active{background-color:#31363E;color:#ba843e;color:#fff;}
#contents div.listArea .lAContents ul.lACContents .lACCList > div, #contents div.listArea2 .lAContents2 ul.lACContents2 .lACCList2 > div{font-size:16px;height:100%;overflow: hidden;flex-shrink:0;flex-basis:150px;white-space:nowrap;text-overflow:ellipsis;text-align:center;cursor:pointer;position:relative;outline:none;}

#contents div:is(.reportArea, .historyArea, .thumbnailArea, .remarkArea) {height:24%;top:76%;display:block;}
#contents div.historyArea, #contents div.historyArea2{width:270px;left:0px;overflow:hidden;}
#contents div.historyArea .hASubject, #contents div.historyArea2 .hASubject2{display:flex;}
#contents div.historyArea .hASubject h2, #contents div.historyArea2 .hASubject2 h2{width:100px;height:38px;padding-top:5px;padding-left:10px;font-size:24px;line-height:24px;color:#2AAED9;font-weight:normal;}
#contents div.historyArea .hASubject .hASContents, #contents div.historyArea2 .hASubject2 .hASContents2{flex-grow: 1;text-align:right;} 
#contents div.historyArea .hASubject .hASContents select, #contents div.historyArea2 .hASubject2 .hASContents2 select{border:1px solid #85C1CC;background-color:#000 !important;color:#fff;padding:2px;height:22px;width:60px;margin:7px 7px 0 0;-webkit-appearance: none;-moz-appearance: none;appearance:none;background:url("../images/c_search_arrow.png") no-repeat 98% 50%;}
#contents div.historyArea ul.hAcontents, #contents div.historyArea2 ul.hAcontents2{width:100%;display:flex;gap:6px;flex-wrap: wrap;padding:5px 0 10px 16px;height:calc(100% - 38px);overflow-y:scroll;}
#contents div.historyArea ul.hAcontents li, #contents div.historyArea2 ul.hAcontents2 li{width:74px;height:60px;position:relative;cursor:pointer;border:3px solid #000;background-repeat:no-repeat;}
#contents div.historyArea ul.hAcontents li.active, #contents div.historyArea2 ul.hAcontents2 li.active{border:3px solid #f26c4f;}
#contents div.historyArea ul.hAcontents li span,#contents div.historyArea2 ul.hAcontents2 li span{position:absolute;}
#contents div.historyArea ul.hAcontents li span:first-child, #contents div.historyArea2 ul.hAcontents2 li span:first-child{top:12px;left:38px;font-size:14px;}
#contents div.historyArea ul.hAcontents li span:nth-child(2), #contents div.historyArea2 ul.hAcontents2 li span:nth-child(2){top:34px;left:8px;font-size:16px;}

#contents div.thumbnailArea{width:380px;left:275px;overflow:hidden;}
#contents div.thumbnailArea .tASubject, #contents div.thumbnailArea2 .tASubject2{display:flex;}
#contents div.thumbnailArea .tASubject h2, #contents div.thumbnailArea2 .tASubject2 h2{width:100px;height:38px;padding-top:5px;padding-left:10px;font-size:24px;line-height:24px;color:#2AAED9;font-weight:normal;display:flex;}
#contents div.thumbnailArea .tASubject .tASContents, #contents div.thumbnailArea2 .tASubject2 .tASContents2{flex-grow: 1;display: flex;align-items:center;justify-content:flex-end;}
#contents div.thumbnailArea .tASubject .tASContents .tascEachView{display:none;font-weight:bold;font-size:20px;margin-right:10px;cursor:pointer;color:#fff;}
#contents div.thumbnailArea .tASubject .tASContents .tascEachView:hover{color:#2AAED9;}
#contents div.thumbnailArea .tASubject .tASContents .tascEachView.active{color:#2AAED9;}
#contents div.thumbnailArea .tASubject .tASContents .tascEachView.active:hover{color:#fff;}
#contents div.thumbnailArea .tASubject .tASContents select, #contents div.thumbnailArea2 .tASubject2 .tASContents2 select{border:1px solid #85C1CC;background-color:#000 !important;color:#fff;padding:2px;margin-right:7px;height:22px;width:60px;-webkit-appearance: none;-moz-appearance: none;appearance:none;background:url("../images/c_search_arrow.png") no-repeat 98% 50%;}
#contents div.thumbnailArea .tAContents, #contents div.thumbnailArea2 .tAContents2{width:100%;display:flex;gap:20px;flex-wrap: wrap;height:calc(100% - 38px);overflow-y:scroll;padding:0 0 10px 7px;}
#contents div.thumbnailArea .tAContents li, #contents div.thumbnailArea2 .tAContents2 > li{width:155px;height:155px;position:relative;cursor:pointer;border:3px solid #000;border: 1px solid #85C1CC;}
#contents div.thumbnailArea .tAContents li.active, #contents div.thumbnailArea2 .tAContents2 > li.active{border: 1px dashed #BA843E;}
#contents div.thumbnailArea .tAContents li p, #contents div.thumbnailArea2 .tAContents2 > li p{width:100%;height:20px;line-height:20px;display:flex;}
#contents div.thumbnailArea .tAContents li p span, #contents div.thumbnailArea2 .tAContents2 > li p span{flex-grow: 1;font-weight:bold;font-size:14px;}
#contents div.thumbnailArea .tAContents li p span:first-child, #contents div.thumbnailArea2 .tAContents2 > li p span:first-child{text-align:left;padding-left:3px;color:#4687bd;}
#contents div.thumbnailArea .tAContents li p span:last-child, #contents div.thumbnailArea2 .tAContents2 > li p span:last-child{text-align:right;padding-right:3px;color:red;}
#contents div.thumbnailArea .tAContents li div, #contents div.thumbnailArea2 .tAContents2 > li div{width:100%;display:flex;height: calc(100% - 20px);align-items:center;justify-content:center;}
#contents div.thumbnailArea .tAContents .grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:none;}

#contents div.remarkArea{width:230px;left:660px;}
#contents div.remarkArea .rASubject{display:flex;height:38px;}
#contents div.remarkArea .rASubject h2{width:100px;height:100%;padding-top:5px;padding-left:10px;font-size:24px;line-height:24px;color:#2AAED9;font-weight:normal;}
#contents div.remarkArea .rASubject .rASContents{flex-grow: 1;text-align:right;} 
#contents div.remarkArea .rASubject .rASContents button{float:right;margin: 7px 7px 0 0;color:#fff;font-weight:normal;text-align:center;cursor:pointer;width:50px;height:26px;line-height:26px;font-size:16px;border:1px solid #85C1CC;background-color:#31363e;}
#contents div.remarkArea .rAContents{width:100%;height:calc(100% - 38px);text-align:center;}
#contents div.remarkArea .rAContents textarea{width: 90%;height: 95%;background-color: #000;padding: 3px;font-size: 16px;border: 1px solid #85C1CC;box-sizing: border-box;}

#contents div.reportArea{left:895px;width:calc(100% - 895px);}
#contents div.reportArea .reASubject{width:100%;height:38px;}
#contents div.reportArea .reASubject h2{width:100px;height:100%;padding-top:5px;padding-left:10px;font-size:24px;line-height:24px;color:#2AAED9;font-weight:normal;}
#contents div.reportArea .reAContents{padding: 5px 0 0 20px;font-size: 16px;}

#contents.viewMode div.listArea{display:none;}
#contents.viewMode div.searchArea{display:none;}
#contents.viewMode div.viewArea{top:0px;left:0px;width:100%;height:calc(100% - 24% - 5px);display:flex;justify-content:center;}
#contents.viewMode div.viewArea .vAmenu{width:50px;flex-shrink:0;text-align:center;display: flex;flex-direction: column;padding: 10px 0;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select:none;}
#contents.viewMode div.viewArea .vAmenu ul{margin-top:auto;width:100%;display: flex;flex-direction: column;align-items: center;}
#contents.viewMode div.viewArea .vAmenu ul li{margin-bottom:5px;font-weight:bold;font-size:30px;line-height:40px;width:40px;height:40px;border: 1px solid #2AAED9;cursor:pointer;text-align:center;}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast{position:relative;}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast > span{font-weight:bold;cursor:pointer;}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast > .vambCtrl{display:none;position:absolute;top:-40px;left:40px;width:160px;background:rgba(0,0,0,0.85);padding:10px;border:1px solid #2AAED9;z-index:9999;border-radius:5px;}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast > .vambCtrl > div.vambcDetail{display:flex; align-items:center;}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast > .vambCtrl > div.vambcDetail > span{color:#fff; font-size:12px; width:20px; font-weight:bold;}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast > .vambCtrl > div.vambcDetail > div{flex:1; height:6px; background:#555; position:relative; cursor:pointer; border-radius:3px;}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast > .vambCtrl > div.vambcDetail > div > div{width:14px; height:14px; background:#2AAED9; border-radius:50%; position:absolute; top:-4px; left:50%; transform:translateX(-50%); box-shadow:0 0 5px rgba(0,0,0,0.5);}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast > .vambCtrl > div.vambcReset{text-align:center; border-top:1px solid #444; padding-top:8px;}
#contents.viewMode div.viewArea .vAmenu ul li.vamBtnContrast > .vambCtrl > div.vambcReset > span{color:#2AAED9; font-size:14px; cursor:pointer; font-weight:bold;}
#contents.viewMode div.viewArea .vAmenu ul li.vamStar{position:relative;}
#contents.viewMode div.viewArea .vAmenu ul li.vamStar.rated span{color:#FFD700;font-weight:bold;cursor:pointer;}
#contents.viewMode div.viewArea .vAmenu ul li.vamStar .star-rating-panel{display:none; position:absolute; top:-5px; left:40px; width:150px; background:rgba(0,0,0,0.9); padding:5px; border:1px solid #2AAED9; border-radius:5px; z-index:100; box-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
#contents.viewMode div.viewArea .vAmenu ul li.vamStar .star-rating-panel .star-area{display:flex; align-items:center; justify-content:space-between;}
#contents.viewMode div.viewArea .vAmenu ul li.vamStar .star-rating-panel .star-area .star-container{display:flex; gap:2px;}
#contents.viewMode div.viewArea .vAmenu ul li.vamStar .star-rating-panel .star-area .star-container .star-item{cursor:pointer; font-size:20px; color:#555;transition: color 0.1s;}
#contents.viewMode div.viewArea .vAmenu ul li.vamStar .star-rating-panel .star-area .star-container .star-item.active{ color: #FFD700 !important; /* 금색 */text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);}
#contents.viewMode div.viewArea .vAmenu ul li.vamStar .star-rating-panel .star-area .star-reset-btn{cursor:pointer; color:#2AAED9; font-size:16px; margin-left:8px;}
#contents.viewMode div.viewArea .vAContents{flex-grow:1;height:100%;display:flex;flex-direction:column;}
#contents.viewMode div.viewArea .vAContents .vACInfo{height:50px;flex-shrink: 0;display:flex;align-items:center;justify-content:flex-start;padding-left:20px;font-size:30px;font-weight:bold;}
#contents.viewMode div.viewArea .vAContents .vACViewer{width:100%;height:100%;text-align:center;display:flex;flex: 1;align-items:center;justify-content:center;min-height: 0;cursor:pointer;overflow:hidden;position: relative;}
#contents.viewMode div.viewArea .vAContents .vACViewer .videoPlayer{width:100%;height:100%;object-fit:contain;transform-origin: center center;transition: transform 0.1s ease-out;cursor: grab;}
#contents.viewMode div.viewArea .vAContents .vACViewer .videoPlayer.grabbing {cursor: grabbing;transition: none;}
#contents.viewMode div.viewArea .vAContents .vACCtrl{height:70px;width:100%;display:flex;flex-shrink:0;align-items:center;justify-content:center;}
#contents.viewMode div.viewArea .vAContents .vACCtrl img{width:50px;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress{width:34%;height:100%;display:flex;align-items:center;justify-content:flex-end;position:relative;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter{position:relative;height:44px;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter > div{position:absolute;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter .barArea {height:20px;width: 200px;top:0px;right:0px;z-index:1;cursor:pointer;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter .barArea > div {position:absolute;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter .barArea .bFull {width:200px;height:3px;background-color:#fff;top:7px;left:0px;z-index:2;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter .barArea .bBlank {width:0px;height:3px;background-color:#2AAED9;top:7px;left:0px;z-index:3;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter .barArea .bHandle {left:0px;width:10px;height:10px;background:#2AAED9;top:4px;border:2px solid #2AAED9;border-radius:50%;outline:none;z-index:4;pointer-events:none;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter .numArea{position:absolute;width:40px;top:25px;right:160px;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCProgress .vACCPCenter .speedArea > img{width:32px;position:absolute;right:0px;top:20px;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCPlay{width:32%;display:flex;justify-content:center;gap:5px;}
#contents.viewMode div.viewArea .vAContents .vACCtrl .vACCSize{width:34%;display:flex;justify-content:flex-start;gap:5px;}
#contents.viewMode div.viewArea2{display:none !important;}
#contents.viewMode div.MultiviewArea{display:none;}



/*------------------  멀티 View 모드 ------------------      flex-direction: column;  */
#contents.multiMode.viewMode div.multiviewArea{top:0px;left:0px;width:100%;height:calc(100% - 24% - 5px);display:flex;justify-content:flex-start;display: flex;flex-wrap: wrap;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea{width:50%;height:50%;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea {&:nth-child(-n+2){border-bottom: 1px solid #2AAED9;}&:nth-child(odd){border-right: 1px solid #2AAED9;}}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAmenu{width:40px;flex-shrink:0;text-align:center;display: flex;flex-direction: column;padding: 10px 0;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select:none;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAmenu ul{margin-top:auto;width:100%;display: flex;flex-direction: column;align-items: center;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAmenu ul li{margin-bottom:5px;font-weight:bold;font-size:20px;line-height:30px;width:30px;height:30px;border: 1px solid #2AAED9;cursor:pointer;text-align:center;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAmenu ul li img{width:35px;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents{flex-grow:1;height:100%;display:flex;flex-direction:column;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACInfo{height:30px;flex-shrink: 0;display:flex;align-items:center;justify-content:flex-start;padding-left:20px;font-size:20px;font-weight:bold;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACViewer{width:100%;height:100%;text-align:center;display:flex;flex: 1;align-items:center;justify-content:center;min-height: 0;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACViewer .videoPlayer{width:100%;height:100%;object-fit:contain;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl{height:50px;width:100%;display:flex;flex-shrink:0;align-items:center;justify-content:center;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl img{width:35px;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn{height:100%;width:100%;display:flex;align-items:center;gap:5px;justify-content:center;position:relative;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress {position:relative;height:44px;width:210px;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress  > div{position:absolute;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress .barArea {height:20px;width:200px;top:0px;right:0px;z-index:1;cursor:pointer;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress .barArea > div {position:absolute;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress .barArea .bFull {width:200px;height:3px;background-color:#fff;top:7px;left:0px;z-index:2;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress .barArea .bBlank {width:0px;height:3px;background-color:#2AAED9;top:7px;left:0px;z-index:3;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress .barArea .bHandle {left:0px;width:10px;height:10px;background:#2AAED9;top:4px;border:2px solid #2AAED9;border-radius:50%;outline:none;z-index:4;pointer-events:none;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress .numArea{position:absolute;width:40px;top:25px;right:160px;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress .speedArea{position:absolute;right:0px;top:18px;}
#contents.multiMode.viewMode div.multiviewArea div.viewArea .vAContents .vACCtrl .vACCMultiBtn .vACCMProgress .speedArea img{width:30px;}

#contents.multiMode div.thumbnailArea .tAContents .grid-overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;}
#contents.multiMode div.thumbnailArea .tAContents .grid-overlay > li{position:absolute !important;width:49% !important;height:49% !important;background-color:transparent;cursor:pointer;border-radius:10px;transition:all 0.2s;}
#contents.multiMode div.thumbnailArea .tAContents .grid-overlay > li:hover{background-color:rgba(42, 174, 217, 0.3);border:1px solid #2AAED9;}
#contents.multiMode div.thumbnailArea .tAContents .grid-overlay > :nth-child(1){top:0;left:0;}
#contents.multiMode div.thumbnailArea .tAContents .grid-overlay > :nth-child(2){top:0;right:0;}
#contents.multiMode div.thumbnailArea .tAContents .grid-overlay > :nth-child(3){bottom:0;left:0;}
#contents.multiMode div.thumbnailArea .tAContents .grid-overlay > :nth-child(4){bottom:0;right:0;}
#contents.multiMode div.thumbnailArea .tASubject .tASContents .tascEachView{display:block;}
/* 각 위치 잡아주기 */

/*------------------ 멀티 View 모드 끝 ------------------ */

@media all and (max-width: 1080px) and (orientation:portrait){
	#contents div.thumbnailArea{width:200px;left:275px;overflow:hidden;}
	#contents div.remarkArea{width:230px;left:480px;}
	#contents div.reportArea{left:715px;width:calc(100% - 715px);border-right:1px solid #2AAED9;text-align:center;}
}
/*------------------ 세로모드 끝 ------------------ */

/*------------------ 가로모드 ------------------ */
/* 브라우저가 1280미만이고 모니터가 가로 모드일때 (기본가로모드)*/
@media (max-width: 1280px) and (orientation: landscape){
	#contents.viewMode div.searchArea{display:none;}
	#contents.viewMode div.listArea{display:none;}
	#contents.viewMode div.reportArea{display:none;}
	#contents.viewMode div.historyArea{display:block;width:200px;height:200px;left:0;top:0px;}
	#contents.viewMode div.thumbnailArea{display:block;width:200px;height:calc(100% - 205px);left:0;top:205px;}
	#contents.viewMode div.remarkArea{display:none;}
	#contents.viewMode div.viewArea,#contents.multiMode.viewMode > div.multiviewArea{display:flex;width:calc(100% - 200px - 5px);height:100%;left:calc(200px + 5px);top:0px;}
}

/* 브라우저가 1280이상이고 모니터가 가로 모드일때 (기본가로모드)*/
@media (min-width: 1281px) and (orientation: landscape){

	#contents div.searchArea{width:280px;height:calc(74% - 5px);top:0px;overflow-y:scroll;position:relative;text-align:center;display:inline-block;}
	#contents div.searchArea .peopleSearch{margin-top:5px;width:260px;display:inline-block;position:static;}
	#contents div.searchArea .peopleSearch p{margin-top:3px;width:100%;display:inline-block;}
	#contents div.searchArea .peopleSearch p input[type='text']{width:calc(100% - 50px);height:26px;padding-left:5px;background-color:#000;border:none;border-bottom:1px solid #85C1CC;font-size:14px;}
	#contents div.searchArea .peopleSearch p:last-child{text-align:right;position:static;width:auto;display:block;}
	#contents div.searchArea .peopleSearch p:last-child > img:last-child{margin-right:10px;}
	
	#contents div.searchArea .btnSearch{margin-top:20px;;width:240px;display:inline-block;text-align:center;position:static;height:auto;}
	#contents div.searchArea .btnSearch h3{position:relative;border-bottom:1px solid #85C1CC;text-align:left;display:block;}
	#contents div.searchArea .btnSearch h3 span{position:absolute;display:inline-block;left:50px;top:7px;font-size:14px;font-family:'NanumGothicBold';color:#85C1CC;}
	#contents div.searchArea .btnSearch ul{margin-top:10px;width:100%;display:flex;gap:6px;flex-wrap:wrap;padding:0 8px;position:static;}
	#contents div.searchArea .btnSearch ul li{flex: 1 1 20%;max-width:52px;cursor:pointer;height:28px;line-height:28px;font-size:18px;border:1px solid #85C1CC;background-color:#31363e;}
	#contents div.searchArea .btnSearch ul li:hover{color:#85C1CC;background-color:#000;}
	#contents div.searchArea .btnSearch ul li:last-child:after{clear:both;display:block;content:"";}
	
	#contents div.searchArea .calenderSearch{margin-top:20px;;width:240px;display:inline-block;text-align:center;position:static;}
	#contents div.searchArea .calenderSearch input[type='text']{margin-top:5px;width:35%;background-color:#000;border:none;border:1px solid #85C1CC;height:24px;text-align:center;}
	#contents div.searchArea .calenderSearch .mainCalendar{display:block;}
	
	#contents div.listArea{width:calc(100% - 660px);height:calc(74% - 5px);top:0px;left:285px;}
	#contents div.reportArea{width:370px;height:calc(74% - 5px);top:0px;left:auto;right:0px;overflow-y: scroll;}
	#contents div.historyArea{width:280px;height:26%;top:74%;}
	#contents div.thumbnailArea{width:calc(100% - 660px);height:26%;top:74%;left:285px;}
	#contents div.remarkArea{width:370px;height:26%;top:74%;right:0px;left:auto;}

	#contents div:is(.viewArea, .viewArea2, .reportArea2, .historyArea2, .thumbnailArea2, .remarkArea2) {height:24%;top:76%;display:block;}

	#contents.viewMode div.searchArea{display:none;}
	#contents.viewMode div.listArea{display:none;}
	#contents.viewMode div.reportArea{display:none;}
	#contents.viewMode div.historyArea{display:block;width:670px;height:200px;left:0;top:0px;}
	#contents.viewMode div.thumbnailArea{display:block;width:670px;height:calc(100% - 205px);left:0;top:205px;}
	#contents.viewMode div.thumbnailArea .tAContents{gap:7px;padding:0 0 10px 7px;}
	#contents.viewMode div.remarkArea{display:none;}
	#contents.viewMode div.viewArea,#contents.multiMode.viewMode > div.multiviewArea{display:flex;width:calc(100% - 670px - 5px);height:100%;left:calc(670px + 5px);top:0px;}
}

/* 브라우저가 1601이상이고 모니터가 가로 모드일때 */
@media all and (min-width: 1281px) and (max-width: 1600px) and (orientation: landscape) {

	#contents.viewMode div.searchArea{display:none;}
	#contents.viewMode div.listArea{display:none;}
	#contents.viewMode div.reportArea{display:none;}
	#contents.viewMode div.historyArea{display:block;width:355px;height:200px;left:0;top:0px;}
	#contents.viewMode div.thumbnailArea{display:block;width:355px;height:calc(100% - 205px);left:0;top:205px;}
	#contents.viewMode div.thumbnailArea .tAContents{gap:5px;padding:0 0 10px 7px;}
	#contents.viewMode div.remarkArea{display:none;}
	#contents.viewMode div.viewArea,#contents.multiMode.viewMode > div.multiviewArea{display:flex;width:calc(100% - 355px - 5px);height:100%;left:calc(355px + 5px);top:0px;}
}

/*리스트 화면 display:none처리*/
#contents div.viewArea,#contents div.listArea2,#contents div.searchArea2,#contents div.historyArea2,#contents div.thumbnailArea2,#contents div.viewArea2,#contents div.multiviewArea,#contents.multiMode.viewMode > div.viewArea,#contents div.miniMenuArea,#contents div.miniMenuArea2{display:none;}
/*------------------ 가로모드 끝 ------------------ */

/*------------------ Two List 모드 ------------------ */
#contents.twoList{min-width:1280px;}

#contents.twoList div.searchArea{top:0px;left:0px;width:calc(50% - 5px);height:100px;overflow-y: hidden;overflow: hidden;}
#contents.twoList div.searchArea2{top:0px;left:calc(50% + 5px);width:calc(50% - 5px);height:100px;text-align: center;display:block;}

#contents.twoList div.listArea{top:105px;left:0px;width:calc(50% - 5px);height:calc(100% - 24% - 110px - 35px);}
#contents.twoList div:is(.historyArea, .thumbnailArea, .miniMenuArea, .listArea2, .miniMenuArea2, .historyArea2, .thumbnailArea2){height:24%;top:76%;display:block;}
#contents.twoList div.miniMenuArea{top:calc(100% - 24% - 35px);width:calc(50% - 5px);height:30px;}
#contents.twoList div.historyArea{left:0px;width:calc(200px - 5px);min-width:182px;}
#contents.twoList div.thumbnailArea{left:200px;width:calc(50% - 200px - 5px);}
#contents.twoList div.remarkArea{height:24%;display:none;}
#contents.twoList div.reportArea{display:none;}
#contents.twoList div.viewArea{display:none;}

#contents.twoList div.listArea2{top:105px;left:calc(50% + 5px);width:calc(50% - 5px);height:calc(100% - 24% - 110px - 35px);}
#contents.twoList div.miniMenuArea2{top:calc(100% - 24% - 35px);left:calc(50% + 5px);width:calc(50% - 5px);height:30px;}
#contents.twoList div.historyArea2{left:calc(50% + 5px);width:calc(200px - 5px);}
#contents.twoList div.thumbnailArea2{left:calc(50% + 200px + 5px);width:calc(50% - 200px - 5px);}
#contents.twoList div.viewArea2{display:none;}

#contents.twoList div.thumbnailArea .tAContents, #contents div.thumbnailArea2 .tAContents2{gap:20px;}

#contents.twoList.viewMode div.searchArea{display:block;top:0px;left:0px;width:calc(50% - 5px);height:100px;}
#contents.twoList.viewMode div.searchArea2{display:block;top:0px;left:calc(50% + 5px);width:calc(50% - 5px);height:100px;}
#contents.twoList.viewMode > div.viewArea{top:105px;left:0px;width:calc(50% - 5px);height:calc(100% - 24% - 110px - 35px);display:flex;justify-content:center;}
#contents.twoList.viewMode div.listArea{display:none;}
#contents.twoList.viewMode div.viewArea2{display:flex !important;top:105px;left:calc(50% + 5px);width:calc(50% - 5px);height:calc(100% - 24% - 110px - 35px);display:flex;justify-content:center;}
#contents.twoList.viewMode div.listArea2{display:none;}
/*------------------ Two List 모드 끝 ------------------ */
.barArea {height:20px;width:200px;}
.bHandle {width:10px;height:10px}

/* ========================================================= */
/* [추가] Flexbox 강제 고정 (DB 데이터 길이 차이로 인한 깨짐 방지) */
/* ========================================================= */

.header-cell, .data-cell {
    /* 1. 내용이 길어도 줄바꿈 금지 */
    white-space: nowrap !important;
    
    /* 2. 넘치는 텍스트는 ... 처리 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    /* 3. ★ 핵심: 공간이 남아도 늘어나지 말고(0), 부족해도 줄어들지 마라(0) */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    
    /* 4. 너비 계산 시 테두리/패딩 포함 (오차 방지) */
    box-sizing: border-box !important;
    
    /* 5. CSS가 HTML 인라인 width를 덮어쓰지 못하게 함 */
    min-width: 0 !important;
    max-width: none !important;
}

/* 드래그 시 빈 공간 스타일 */
.ui-sortable-placeholder { 
    border: 1px dashed #444 !important; 
    background: rgba(255,255,255,0.05) !important; 
    visibility: visible !important;
    height: 100% !important;
}

.ui-resizable-handle.ui-resizable-e { 
    position: absolute !important; 
    top: 0; 
    right: 0; 
    width: 10px !important; /* 마우스 잡기 편하게 10px로 늘림 */
    height: 100%; 
    cursor: col-resize !important; 
    z-index: 90;
    /* background: red; */ /* 테스트할 때 주석 풀면 빨간색으로 보임 */
}

/* ========================================================= */
/* [필수] 리사이즈 핸들 영역 확장 (마우스 인식 개선) */
/* ========================================================= */

/* jQuery UI가 만드는 핸들 강제 스타일링 */
.ui-resizable-handle.ui-resizable-e {
    position: absolute !important;
    right: 0px !important;      /* 오른쪽 끝에 딱 붙임 */
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    
    width: 15px !important;     /* ★ 핵심: 잡기 편하게 15px로 넓힘 */
    cursor: col-resize !important; /* ★ 핵심: 커서 모양 강제 적용 */
    
    z-index: 9999 !important;   /* ★ 핵심: 글자나 드래그 영역보다 무조건 위에 둠 */
    
    background: transparent;    /* 평소엔 투명 */
    touch-action: none;         /* 터치 오동작 방지 */
    display: block !important;  /* 숨겨지지 않게 함 */
}

/* (테스트용) 마우스 올렸을 때 빨간색으로 표시 */
/* 리사이즈 잘 되는거 확인하시면 아래 3줄은 지우세요! */
.ui-resizable-handle.ui-resizable-e:hover {
    background-color: rgba(255, 0, 0, 0.5) !important; 
    border-right: 2px solid red;
}