ddd

pom.xml

@@ -135,12 +135,12 @@
    		<dependency>
 		    <groupId>org.apache.logging.log4j</groupId>
 		    <artifactId>log4j-api</artifactId>
-		    <version>2.6.2</version>
+		    <version>2.12.1</version>
 		</dependency>
 		<dependency>
 		    <groupId>org.apache.logging.log4j</groupId>
 		   <artifactId>log4j-core</artifactId>
-		    <version>2.6.2</version>
+		    <version>2.12.1</version>
 		</dependency>
 		<dependency>
 		    <groupId>org.apache.logging.log4j</groupId>
@@ -150,7 +150,7 @@
 		<dependency>
 		    <groupId>org.apache.logging.log4j</groupId>
 		    <artifactId>log4j-slf4j-impl</artifactId>
-		    <version>2.6.2</version>
+		    <version>2.12.1</version>
 		</dependency>
 
 		<dependency>
@@ -169,11 +169,15 @@
 			<artifactId>mapstruct</artifactId>
 			<version>${org.mapstruct.version}</version>
 		</dependency>
-
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-devtools</artifactId>
+			<optional>true</optional>
+		</dependency>
 		<dependency>
 			<groupId>org.slf4j</groupId>
 			<artifactId>slf4j-api</artifactId>
-			<version>2.0.6</version>
+			<version>1.7.33</version>
 		</dependency>
 
 		<!-- 타일즈 -->

src/main/java/egovframework/controller/AdminController.java

@@ -2,10 +2,10 @@ package egovframework.controller;
 
 import egovframework.service.impl.AdminServiceImpl;
 import egovframework.service.impl.NoticeServiceImpl;
+import egovframework.utill.CommonPath;
 import egovframework.utill.PageCriteria;
 import egovframework.utill.PageMaker;
 import egovframework.utill.SHA256;
-import egovframework.vo.AdminVO;
 import egovframework.vo.NoticeVO;
 import egovframework.vo.PopupVO;
 import egovframework.vo.StatsVO;
@@ -13,12 +13,8 @@ import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestMethod;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
-import org.springframework.web.servlet.mvc.support.RedirectAttributes;
 
 import javax.annotation.PostConstruct;
 import javax.imageio.ImageIO;
@@ -39,7 +35,8 @@ public class AdminController {
 
     private final AdminServiceImpl adminService;
     private final NoticeServiceImpl adminNoticeService;
-
+    private final String ATTATCH_FILE_PATH = CommonPath.getFilePath();
+    private final String IMAGE_FILE_PATH = CommonPath.getImageUploadPath();
     private PageCriteria criteria;
 
     @PostConstruct
@@ -56,33 +53,17 @@ public class AdminController {
             return "redirect:/admin/noticeList.do";
         }
 
-        return "admin/indexNew.tiles";
+        //return "admin/indexNew.tiles";
+        return "admin/index.tiles";
     }
 
-    @RequestMapping(value = "/admin/login.do", method = RequestMethod.POST)
-    public String login(Model model, RedirectAttributes redirectAttributes, HttpServletRequest request, HttpServletResponse response, @RequestParam Map<String, Object> paramMap) {
+    @ResponseBody
+    @RequestMapping(value = "/admin/login.do", method = RequestMethod.POST,	produces = {"application/json; charset=utf8"})
+    public Map<String,Object> login(Model model, @RequestBody Map<String,Object> paramMap, HttpSession session){
         model.addAttribute("siteSubInfo", "sub admin");
-
-        AdminVO userInfo = this.adminService.getUser(paramMap.get("email").toString());
-
-        if (userInfo != null) {
-
-            String pw = SHA256.encrypt(paramMap.get("password").toString()); // 원본
-            if (userInfo.getPassword().equals(pw)) {
-                //로그인성공
-                String id = userInfo.getEmail();
-                HttpSession session = request.getSession();
-                session.setAttribute("userId", id);
-                this.adminService.adminLoginMake(null);
-                return "redirect:/admin/noticeList.do";
-            } else {
-                //로그인 실패
-                redirectAttributes.addFlashAttribute("message", "비밀번호가틀렸습니다.");
-            }
-        } else {
-            redirectAttributes.addFlashAttribute("message", "아이디가 없습니다.");
-        }
-        return "redirect:/admin/index.do";
+        log.error("paramMap : {}", paramMap);
+        Map<String, Object> resultMap = adminService.loginCheck(paramMap, session);
+        return resultMap;
     }
 
     @RequestMapping(value = "/admin/logout.do", method = RequestMethod.GET)
@@ -163,6 +144,7 @@ public class AdminController {
             try {
                 Date date = transFormat.parse(vo.getRegDate());
                 vo.setRegDate(format.format(date));
+                log.error("bSubject{}", vo.getbSubject());
             } catch (ParseException e) {
                 log.error("/admin/noticeList.do, date format Exception...");
             }
@@ -180,13 +162,33 @@ public class AdminController {
         this.adminNoticeService.updateNoticeReadCount(paramMap);
 
         NoticeVO result = this.adminNoticeService.getNotice(paramMap);
-        if (!"||".equals(result.getAttachFile())) {
-            String attachfile = result.getAttachFile();
-            String[] attachfileArr = attachfile.split("[|]", -1);
 
-            result.setAttachFile1(attachfileArr[0]);
-            result.setAttachFile2(attachfileArr[1]);
-            result.setAttachFile3(attachfileArr[2]);
+        if (result.getAttachFile() != null) {
+            String attatchFile = result.getAttachFile();
+            String[] fileArr = attatchFile.split("[|]", -1);
+            List<String> attatchFiles = new ArrayList<>();
+            if (fileArr.length > 0) {
+                for (String file : fileArr) {
+                    if (!file.isEmpty()) {
+                        attatchFiles.add(file);
+                    }
+                }
+            }
+            result.setAttatchFiles(attatchFiles);
+        }
+
+        if (result.getAttachFileId() != null) {
+            String attatchFileId = result.getAttachFileId();
+            String[] idArr = attatchFileId.split("[|]", -1);
+            List<String> attatchFileIds = new ArrayList<>();
+            if (idArr.length > 0) {
+                for (String id : idArr) {
+                    if (!id.isEmpty()) {
+                        attatchFileIds.add(id);
+                    }
+                }
+            }
+            result.setAttatchFileIds(attatchFileIds);
         }
 
         SimpleDateFormat transFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
@@ -213,10 +215,8 @@ public class AdminController {
                                @RequestParam("attachFile1") MultipartFile file1,
                                @RequestParam("attachFile2") MultipartFile file2,
                                @RequestParam("attachFile3") MultipartFile file3) {
-
-        File uploadFile = null;
-        File uploadFileHome = new File(request.getSession().getServletContext().getRealPath("/attatchFile"));
-        String fileNames = null;
+        MultipartFile[] fileArr = new MultipartFile[]{file1, file2, file2};
+        File uploadFileHome = new File(ATTATCH_FILE_PATH);
 
         uploadFileHome.setExecutable(false, true);
         uploadFileHome.setReadable(true);
@@ -225,48 +225,27 @@ public class AdminController {
             uploadFileHome.mkdir();
         }
 
-        fileNames = file1.getOriginalFilename() + "|" + file2.getOriginalFilename() + "|" + file3.getOriginalFilename();
+        String fileNames = file1.getOriginalFilename() + "|" + file2.getOriginalFilename() + "|" + file3.getOriginalFilename();
+        String fileIds = "";
 
-        if (!"".equals(file1.getOriginalFilename())) {
-            try {
-                if (file1.getSize() <= 200000000) {
-                    uploadFile = new File(uploadFileHome, file1.getOriginalFilename());
-                    file1.transferTo(uploadFile);
-                } else {
-                    log.error("/admin/insertNotice.do, file1 is Too Large Size(Limit Size 200000000)");
-                }
-            } catch (IllegalStateException | IOException e) {
-                log.error("/admin/insertNotice.do, can not transferTo file1...");
-            }
-        }
-
-        if (!"".equals(file2.getOriginalFilename())) {
-            try {
-                if (file1.getSize() <= 200000000) {
-                    uploadFile = new File(uploadFileHome, file2.getOriginalFilename());
-                    file2.transferTo(uploadFile);
-                } else {
-                    log.error("/admin/insertNotice.do, file2 is Too Large Size(Limit Size 200000000)");
-                }
-            } catch (IllegalStateException | IOException e) {
-                log.error("/admin/insertNotice.do, can not transferTo file2...");
-            }
-        }
-
-        if (!"".equals(file3.getOriginalFilename())) {
-            try {
-                if (file3.getSize() <= 200000000) {
-                    uploadFile = new File(uploadFileHome, file3.getOriginalFilename());
-                    file3.transferTo(uploadFile);
-                } else {
-                    log.error("/admin/insertNotice.do, file1 is Too Large Size(Limit Size 200000000)");
+        for (MultipartFile file : fileArr) {
+            if (!"".equals(file.getOriginalFilename())) {
+                try {
+                    if (file.getSize() <= 200000000) {
+                        String fileUuid = UUID.randomUUID().toString().replace("-", "");
+                        File uploadFile = new File(uploadFileHome, fileUuid);
+                        file.transferTo(uploadFile);
+                        fileIds += fileUuid;
+                    } else {
+                        log.error("/admin/insertNotice.do, {} is Too Large Size(Limit Size 200000000)", file.getOriginalFilename());
+                    }
+                } catch (IllegalStateException | IOException e) {
+                    log.error("/admin/insertNotice.do, can not upload {}", file.getOriginalFilename());
                 }
-            } catch (IllegalStateException | IOException e) {
-                log.error("/admin/insertNotice.do, can not transferTo file3...");
             }
+            fileIds += "|";
         }
-
-
+        fileIds = fileIds.substring(0, fileIds.length() - 1);
         Map<String, Object> paramMap = new HashMap<String, Object>();
         HttpSession session = request.getSession();
         paramMap.put("categoryCd", "N");
@@ -274,6 +253,7 @@ public class AdminController {
         paramMap.put("bContent", request.getParameter("content"));
         paramMap.put("webUserId", session.getAttribute("userId"));
         paramMap.put("attachFile", fileNames);
+        paramMap.put("ATTACHFILEID", fileIds);
         paramMap.put("bNotice", (request.getParameter("notice") == null) ? "N" : "Y");
 
         this.adminService.insertNotice(paramMap);
@@ -296,9 +276,9 @@ public class AdminController {
             String attachfile = resultList.getAttachFile();
             String[] attachfileArr = attachfile.split("[|]", -1);
 
-            resultList.setAttachFile1(attachfileArr[0]);
-            resultList.setAttachFile2(attachfileArr[1]);
-            resultList.setAttachFile3(attachfileArr[2]);
+            resultList.setAttachfile1(attachfileArr[0]);
+            resultList.setAttachfile2(attachfileArr[1]);
+            resultList.setAttachfile3(attachfileArr[2]);
         }
 
         model.addAttribute("noticeEdit", resultList);
@@ -308,19 +288,30 @@ public class AdminController {
 
     @RequestMapping(value = "/admin/updateNotice.do", method = RequestMethod.POST)
     public String updateNotice(Model model, HttpServletRequest request, HttpServletResponse response,
+                               @RequestParam HashMap<String, String> param,
                                @RequestParam("attachFile1") MultipartFile file1,
                                @RequestParam("attachFile2") MultipartFile file2,
                                @RequestParam("attachFile3") MultipartFile file3) {
-
         model.addAttribute("siteSubInfo", "sub admin");
-        MultipartFile[] fileArr = new MultipartFile[]{file1, file2, file2};
+        MultipartFile[] fileArr = new MultipartFile[]{file1, file2, file3};
+        NoticeVO vo = this.adminNoticeService.getNotice(param);
+        String[] orginAttatch = new String[]{};
+        String[] orginAttatId = new String[]{};
+
+        if (vo.getAttachFile() != null) {
+            orginAttatch = vo.getAttachFile().split("\\|");
+        }
+        if (vo.getAttachFileId() != null) {
+            orginAttatId = vo.getAttachFileId().split("\\|");
+        }
 
         String file1Name = request.getParameter("attachFile1Name");
         String file2Name = request.getParameter("attachFile2Name");
         String file3Name = request.getParameter("attachFile3Name");
+        String[] fileNameArr = new String[]{file1Name, file2Name, file3Name};
 
         File uploadFile;
-        File uploadFileHome = new File(request.getSession().getServletContext().getRealPath("/attatchFile"));
+        File uploadFileHome = new File(ATTATCH_FILE_PATH);
         uploadFileHome.setExecutable(false, true);
         uploadFileHome.setReadable(true);
         uploadFileHome.setWritable(false, true);
@@ -330,12 +321,17 @@ public class AdminController {
         }
 
         String fileNames = file1Name + "|" + file2Name + "|" + file3Name;
-        for (MultipartFile file : fileArr) {
+        String fileIds = "";
+
+        for (int ii = 0; ii < fileArr.length; ii++) {
+            MultipartFile file = fileArr[ii];
             if (!"".equals(file.getOriginalFilename())) {
                 try {
                     if (file.getSize() <= 200000000) {
-                        uploadFile = new File(uploadFileHome, file.getOriginalFilename());
+                        String fileUuid = UUID.randomUUID().toString().replace("-", "");
+                        uploadFile = new File(uploadFileHome, fileUuid);
                         file.transferTo(uploadFile);
+                        fileIds += fileUuid;
                     } else {
                         log.error("/admin/updateNotice.do, {} is Too Large Size(Limit Size 200000000)", file.getOriginalFilename());
                     }
@@ -343,56 +339,25 @@ public class AdminController {
                     log.error("/admin/updateNotice.do, can not upload {}", file.getOriginalFilename());
                 }
             }
+            else {
+                if (orginAttatch.length > ii && fileNameArr.length > ii) {
+                    if (!orginAttatch[ii].isEmpty() && !fileNameArr[ii].isEmpty()) {
+                        if (orginAttatch[ii].equals(fileNameArr[ii])) {
+                            fileIds += orginAttatId[ii];
+                        }
+                    }
+                }
+            }
+            fileIds += "|";
         }
-//		if(!"".equals(file1.getOriginalFilename())) {
-//			try {
-//				if (file1.getSize() <= 200000000) {
-//					uploadFile = new File(uploadFileHome, file1.getOriginalFilename());
-//					file1.transferTo(uploadFile);
-//				}
-//				else {
-//					log.error("/admin/updateNotice.do, file1 is Too Large Size(Limit Size 200000000)");
-//				}
-//			} catch (IllegalStateException | IOException e) {
-//				log.error("/admin/updateNotice.do, can not upload file1...");
-//			}
-//		}
-//		
-//		if (!"".equals(file2.getOriginalFilename())) {
-//			try {
-//				if (file2.getSize() <= 200000000) {
-//					uploadFile = new File(uploadFileHome, file2.getOriginalFilename());
-//					file2.transferTo(uploadFile);
-//				}
-//				else {
-//					log.error("/admin/updateNotice.do, file2 is Too Large Size(Limit Size 200000000)");
-//				}
-//			} catch (IllegalStateException | IOException e) {
-//				log.error("/admin/updateNotice.do, can not upload file2...");
-//			}
-//		}
-//		
-//		if (!"".equals(file3.getOriginalFilename())) {
-//			try {
-//				if (file3.getSize() <= 200000000) {
-//					uploadFile = new File(uploadFileHome, file3.getOriginalFilename());
-//					file3.transferTo(uploadFile);
-//				}
-//				else {
-//					log.error("/admin/updateNotice.do, file3 is Too Large Size(Limit Size 200000000)");
-//				}
-//			} catch (IllegalStateException | IOException e) {
-//				log.error("/admin/updateNotice.do, can not upload file3...");
-//			}
-//		}
-
-        HttpSession session = request.getSession();
 
+        fileIds = fileIds.substring(0, fileIds.length() - 1);
         Map<String, Object> paramMap = new HashMap<String, Object>();
         paramMap.put("boardNo", request.getParameter("boardNo"));
         paramMap.put("bSubject", request.getParameter("subject"));
         paramMap.put("bContent", request.getParameter("content"));
         paramMap.put("attachFile", fileNames);
+        paramMap.put("ATTACHFILEID", fileIds);
         paramMap.put("bNotice", (request.getParameter("notice") == null) ? "N" : "Y");
         this.adminService.updateNotice(paramMap);
         model.addAttribute("boardNo", request.getParameter("boardNo"));
@@ -419,10 +384,8 @@ public class AdminController {
         } catch (UnsupportedEncodingException e) {
             log.error("/admin/popupInsert.do request can not characterEncoding utf-8...");
         }
-        String imguploadPath = request.getSession().getServletContext().getRealPath(File.separator + "images" + File.separator + "img_upload");
 
-        File uploadImgFile;
-        File uploadFileHome = new File(imguploadPath);
+        File uploadFileHome = new File(IMAGE_FILE_PATH);
         uploadFileHome.setExecutable(false, true);
         uploadFileHome.setReadable(true);
         uploadFileHome.setWritable(false, true);
@@ -437,7 +400,7 @@ public class AdminController {
         fileName = file.getOriginalFilename();
         String fileExe = fileName.substring(fileName.lastIndexOf("."));
         fileUuid = UUID.randomUUID().toString().replace("-", "") + fileExe;
-        uploadImgFile = new File(uploadFileHome, fileUuid);
+        File uploadImgFile = new File(uploadFileHome, fileUuid);
         try {
             if (file.getSize() <= 200000000) {
                 file.transferTo(uploadImgFile);
@@ -480,12 +443,12 @@ public class AdminController {
         List<PopupVO> listVo = this.adminService.getPopupList(paramMap);
         String imgFileName = listVo.get(0).getImg_id();
 
-        String imguploadPath = request.getSession().getServletContext().getRealPath(File.separator + "images" + File.separator + "img_upload");
+        String imguploadPath = IMAGE_FILE_PATH;
         File tempImgFile = new File(imguploadPath, imgFileName);
         tempImgFile.setExecutable(false, true);
         tempImgFile.setReadable(true);
         tempImgFile.setWritable(false, true);
-
+        log.error("tempImgFile : {}",tempImgFile);
         if (tempImgFile.exists()) {
             tempImgFile.delete();
         }
@@ -505,10 +468,7 @@ public class AdminController {
             paramMap.put("imgId", vo.getImg_id());
             paramMap.put("imgName", vo.getImg_name());
         } else {
-            //adminService.get
-            String imguploadPath = request.getSession().getServletContext().getRealPath(File.separator + "images" + File.separator + "img_upload");
-            File uploadImgFile;
-            File uploadFileHome = new File(imguploadPath);
+            File uploadFileHome = new File(IMAGE_FILE_PATH);
             uploadFileHome.setExecutable(false, true);
             uploadFileHome.setReadable(true);
             uploadFileHome.setWritable(false, true);
@@ -532,7 +492,7 @@ public class AdminController {
 
                 String fileExe = fileName.substring(fileName.lastIndexOf("."));
                 fileUuid = UUID.randomUUID().toString().replace("-", "") + fileExe;
-                uploadImgFile = new File(uploadFileHome, fileUuid);
+                File uploadImgFile = new File(uploadFileHome, fileUuid);
                 try {
                     if (file.getSize() <= 200000000) {
                         file.transferTo(uploadImgFile);
@@ -586,10 +546,7 @@ public class AdminController {
     @RequestMapping(value = "/admin/pwUpdate.do", method = RequestMethod.POST)
     public String pwUpdate(Model model, HttpServletRequest request, @RequestParam Map<String, Object> paramMap) {
 
-        //System.out.println("updatePW : "+SHA256.encrypt(paramMap.get("afterPw").toString()));
-        //System.out.println("EMAIL :"+paramMap.get("EMAIL") );
         paramMap.put("pwd", SHA256.encrypt(paramMap.get("afterPw").toString()));//원본
-        //paramMap.put("pwd",paramMap.get("afterPw").toString());//temp
 
         this.adminService.updatePw(paramMap);
         HttpSession session = request.getSession();
@@ -642,7 +599,7 @@ public class AdminController {
         String filenameExt = filename.substring(filename.lastIndexOf(".") + 1);
         filenameExt = filenameExt.toLowerCase();
 
-        String filePath = request.getSession().getServletContext().getRealPath(File.separator + "images" + File.separator + "img_upload");
+        String filePath = IMAGE_FILE_PATH;
         File file = new File(filePath);
         file.setExecutable(false, true);
         file.setReadable(true);
@@ -676,7 +633,7 @@ public class AdminController {
 
         sFileInfo += "&bNewLine=true";
         sFileInfo += "&sFileName=" + filename;
-        sFileInfo += "&sFileURL=" + "/images/img_upload/" + realFileNm;
+        sFileInfo += "&sFileURL=" + "/upload/" + realFileNm;
 
         return sFileInfo;
     }
@@ -692,9 +649,7 @@ public class AdminController {
         String callback = request.getParameter("callback");
         String callbackFunc = request.getParameter("callback_func");
 
-        String imguploadPath = request.getSession().getServletContext().getRealPath(File.separator + "images" + File.separator + "img_upload");
-        File uploadImgFile;
-        File uploadFileHome = new File(imguploadPath);
+        File uploadFileHome = new File(IMAGE_FILE_PATH);
         uploadFileHome.setExecutable(false, true);
         uploadFileHome.setReadable(true);
         uploadFileHome.setWritable(false, true);
@@ -707,7 +662,7 @@ public class AdminController {
 
         fileUuid = UUID.randomUUID().toString().replace("-", "") + fileExe;
 
-        uploadImgFile = new File(uploadFileHome, fileUuid);
+        File uploadImgFile = new File(uploadFileHome, fileUuid);
         try {
             if (file.getSize() <= 200000000) {
                 file.transferTo(uploadImgFile);
@@ -720,7 +675,7 @@ public class AdminController {
 
         String fileResult = "";
         if (!"".equals(file.getOriginalFilename())) {
-            fileResult += "&bNewLine=true&sFileName=" + file.getOriginalFilename() + "&sFileURL=/images/img_upload/" + fileUuid;
+            fileResult += "&bNewLine=true&sFileName=" + file.getOriginalFilename() + "&sFileURL=/upload/" + fileUuid;
         } else {
             fileResult += "&errstr=error";
         }

src/main/java/egovframework/controller/CommonController.java

@@ -1,6 +1,7 @@
 package egovframework.controller;
 
 import egovframework.service.impl.CommonServiceImpl;
+import egovframework.utill.TrafficData;
 import egovframework.vo.*;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
@@ -33,19 +34,34 @@ public class CommonController {
     @ResponseBody
     @RequestMapping(value = "/common/getLinkVertexArr.do", method = {RequestMethod.POST, RequestMethod.GET})
     public List<RoadVertexArrVO> getLinkVertexArr(HttpServletRequest request) {
-        return this.commonService.getLinkVertexArr();
+        if (TrafficData.getLink() != null) {
+            return TrafficData.getLink();
+        }
+        else {
+            return this.commonService.getLinkVertexArr();
+        }
     }
 
     @ResponseBody
     @RequestMapping(value = "/common/getIfscVertexArr.do", method = {RequestMethod.POST, RequestMethod.GET})
     public List<RoadVertexArrVO> getIfscVertexArr(HttpServletRequest request) {
-        return this.commonService.getIfscVertexArr();
+        if (TrafficData.getIfsc() != null) {
+            return TrafficData.getIfsc();
+        }
+        else {
+            return this.commonService.getIfscVertexArr();
+        }
     }
 
     @ResponseBody
     @RequestMapping(value = "/common/getRoadVertexArr.do", method = {RequestMethod.POST, RequestMethod.GET})
     public List<RoadVertexArrVO> getRoadVertexArr(HttpServletRequest request) {
-        return this.commonService.getRoadVertexArr();
+        if (TrafficData.getRoad() != null) {
+            return TrafficData.getRoad();
+        }
+        else {
+            return this.commonService.getRoadVertexArr();
+        }
     }
 
     @ResponseBody

src/main/java/egovframework/controller/MainController.java

@@ -45,7 +45,7 @@ public class MainController {
 
     @RequestMapping(value = "/main/main.do", method = RequestMethod.GET)
     public String main(ModelMap model, HashMap<String, String> paramMap) {
-        log.error("/main/main.do, paramMap: {} EA.", paramMap.size());
+//        log.error("/main/main.do, paramMap: {} EA.", paramMap.size());
         List<NoticeVO> noticeList = this.noticeService.getNoticeList(this.criteria);
         SimpleDateFormat transFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
         SimpleDateFormat format = new SimpleDateFormat("yy.MM.dd");

src/main/java/egovframework/controller/NoticeController.java

@@ -1,6 +1,7 @@
 package egovframework.controller;
 
 import egovframework.service.impl.NoticeServiceImpl;
+import egovframework.utill.CommonPath;
 import egovframework.utill.PageCriteria;
 import egovframework.utill.PageMaker;
 import egovframework.vo.NoticeVO;
@@ -23,10 +24,7 @@ import java.io.OutputStream;
 import java.net.URLEncoder;
 import java.text.ParseException;
 import java.text.SimpleDateFormat;
-import java.util.Date;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
 
 @Slf4j
 @RequiredArgsConstructor
@@ -34,7 +32,8 @@ import java.util.Map;
 public class NoticeController {
 
     private final NoticeServiceImpl noticeService;
-
+    private final String ATTATCH_FILE_PATH = CommonPath.getFilePath();
+    private final String IMAGE_FILE_PATH = CommonPath.getImageUploadPath();
     private PageCriteria criteria;
 
     @PostConstruct
@@ -92,14 +91,28 @@ public class NoticeController {
         model.addAttribute("subTitle", "공지사항 상세페이지");
         this.noticeService.updateNoticeReadCount(paramMap);
         NoticeVO result = this.noticeService.getNotice(paramMap);
+        String attatchFile = result.getAttachFile();
+        String attatchFileId = result.getAttachFileId();
+        if (!attatchFile.equals(null) && !attatchFile.isEmpty()) {
+            String[] fileArr = attatchFile.split("[|]", -1);
+            List<String> attatchFiles = new ArrayList<>();
+            if (fileArr.length > 0) {
+                for (String file : fileArr) {
+                    attatchFiles.add(file);
+                }
+            }
+            result.setAttatchFiles(attatchFiles);
+        }
 
-        if (!"||".equals(result.getAttachFile())) {
-            String attachfile = result.getAttachFile();
-            String[] attachfileArr = attachfile.split("[|]", -1);
-
-            result.setAttachFile1(attachfileArr[0]);
-            result.setAttachFile2(attachfileArr[1]);
-            result.setAttachFile3(attachfileArr[2]);
+        if (!attatchFileId.equals(null) && !attatchFileId.isEmpty()) {
+            String[] idArr = attatchFileId.split("[|]", -1);
+            List<String> attatchFileIds = new ArrayList<>();
+            if (idArr.length > 0) {
+                for (String id : idArr) {
+                    attatchFileIds.add(id);
+                }
+            }
+            result.setAttatchFileIds(attatchFileIds);
         }
 
         SimpleDateFormat transFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
@@ -126,17 +139,18 @@ public class NoticeController {
         //System.out.println(paramMap.get("fileName"));
 
         String CHARSET = "euc-kr";
-        File uploadFileHome = new File(request.getSession().getServletContext().getRealPath("/attatchFile"));
+        File uploadFileHome = new File(ATTATCH_FILE_PATH);
 
         //String fileName = new String(paramMap.get("fileName").toString().getBytes("8859_1"),"UTF-8");
         String fileName = paramMap.get("fileName").toString();
+        String fileId   = paramMap.get("fileId").toString();
         String filtered_name = "";
 
         if (fileName != null && !"".equals(fileName)) {
             filtered_name = fileName.replaceAll("/", "").replaceAll("&", "").replaceAll("\r", "").replaceAll("\n", "");
         }
 
-        File downloadFile = new File(uploadFileHome, filtered_name);
+        File downloadFile = new File(uploadFileHome, fileId);
         FileInputStream inStream = null;
         OutputStream outStream = null;
         try {

src/main/java/egovframework/controller/TrafficController.java

@@ -7,8 +7,8 @@ import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.servlet.ModelAndView;
 
+import javax.servlet.http.HttpServletResponse;
 import java.util.Map;
 
 @RequiredArgsConstructor
@@ -23,17 +23,33 @@ public class TrafficController {
         return "traffic/cctvNew.tiles";
     }
 
+//    @RequestMapping(value = "/traffic/popupCctv.do", method = RequestMethod.GET)
+//    public ModelAndView popupCctv(Model model, @RequestParam Map<String, Object> paramMap) {
+//        String cctv_nmbr = paramMap.get("cctv_mngm_nmbr").toString();
+//        System.out.println("gg");
+//        return new ModelAndView("traffic/cctvPopup.empty", "cctv", this.commonService.getOneCctvCtlr(cctv_nmbr));
+//    }
+//
+//    @RequestMapping(value = "/traffic/popupCctvM.do", method = RequestMethod.GET)
+//    public ModelAndView popupCctvM(Model model, @RequestParam Map<String, Object> paramMap, HttpServletRequest req) {
+//        String cctv_nmbr = paramMap.get("cctv_mngm_nmbr").toString();
+//        System.out.println("gg");
+//        return new ModelAndView("traffic/cctvPopupM.empty", "cctv", this.commonService.getOneCctvCtlr(cctv_nmbr));
+//    }
+
     @RequestMapping(value = "/traffic/popupCctv.do", method = RequestMethod.GET)
-    public ModelAndView popupCctv(Model model, @RequestParam Map<String, Object> paramMap) {
+    public String popupCctv(Model model, @RequestParam Map<String, Object> paramMap, HttpServletResponse response) {
         String cctv_nmbr = paramMap.get("cctv_mngm_nmbr").toString();
-        return new ModelAndView("traffic/cctvPopup.empty", "cctv", this.commonService.getOneCctvCtlr(cctv_nmbr));
-
+        model.addAttribute("cctv", this.commonService.getOneCctvCtlr(cctv_nmbr));
+        model.addAttribute("subTitle", "CCTV 영상");
+        return "traffic/cctvPopup";
     }
 
     @RequestMapping(value = "/traffic/popupCctvM.do", method = RequestMethod.GET)
-    public ModelAndView popupCctvM(Model model, @RequestParam Map<String, Object> paramMap) {
+    public String popupCctvM(Model model, @RequestParam Map<String, Object> paramMap, HttpServletResponse response) {
         String cctv_nmbr = paramMap.get("cctv_mngm_nmbr").toString();
-        return new ModelAndView("traffic/cctvPopupM.empty", "cctv", this.commonService.getOneCctvCtlr(cctv_nmbr));
+        model.addAttribute("cctv", this.commonService.getOneCctvCtlr(cctv_nmbr));
+        return "traffic/cctvPopupM";
     }
 
     @RequestMapping(value = "/traffic/vms.do", method = RequestMethod.GET)

src/main/java/egovframework/controller/TrafficStatsController.java

@@ -36,7 +36,6 @@ public class TrafficStatsController {
         paramMap.put("yyyymmddhh", yyyymmddhh);
         paramMap.put("yyyymmddhh2", yyyymmddhh2);
         paramMap.put("sTimeTypeVal", sTimeTypeVal);
-
         return this.trafficStatsService.getVertexHistoryByRoadText(paramMap);
     }
 

src/main/java/egovframework/interceptors/LogAdapterInterceptor.java

@@ -82,7 +82,7 @@ public class LogAdapterInterceptor extends HandlerInterceptorAdapter {
 
 	@Override
 	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception {
-        log.error("{}, {}", request.getMethod(), request.getRequestURI());
+        //log.error("{}, {}", request.getMethod(), request.getRequestURI());
 		return true;
 	}
 

src/main/java/egovframework/scheduler/TrafficSchedule.java

@@ -0,0 +1,48 @@
+package egovframework.scheduler;
+
+import egovframework.service.impl.CommonServiceImpl;
+import egovframework.utill.TrafficData;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.scheduling.annotation.EnableScheduling;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.stereotype.Component;
+
+import javax.annotation.PostConstruct;
+import javax.annotation.PreDestroy;
+import java.text.SimpleDateFormat;
+import java.util.Date;
+
+@Slf4j
+@RequiredArgsConstructor
+@EnableScheduling
+@Component
+public class TrafficSchedule {
+    private final CommonServiceImpl cs;
+    public String getSysTime() {
+        SimpleDateFormat sdfDate = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+        Date dtLog = new Date();
+        return sdfDate.format(dtLog);
+    }
+
+    @Scheduled(cron = "0 0/5 * * * ?")  // 5분주기 작업 실행
+    public void trafficSchedule() {
+        log.info("Traffic Schedule Work Time : {}", getSysTime());
+        TrafficData.setRoad(this.cs.getRoadVertexArr());
+        TrafficData.setIfsc(this.cs.getIfscVertexArr());
+        TrafficData.setLink(this.cs.getLinkVertexArr());
+    }
+
+    @PostConstruct
+    private void init() {
+        log.info("Traffic Schedule init : {}", getSysTime());
+        TrafficData.setRoad(this.cs.getRoadVertexArr());
+        TrafficData.setIfsc(this.cs.getIfscVertexArr());
+        TrafficData.setLink(this.cs.getLinkVertexArr());
+    }
+
+    @PreDestroy
+    public void preDestroy() {
+    }
+
+}

src/main/java/egovframework/service/AdminService.java

@@ -4,6 +4,7 @@ import egovframework.vo.AdminVO;
 import egovframework.vo.PopupVO;
 import egovframework.vo.StatsVO;
 
+import javax.servlet.http.HttpSession;
 import java.util.List;
 import java.util.Map;
 
@@ -41,4 +42,6 @@ public interface AdminService {
     void adminLoginMake(Map<String, Object> paramMap);
 
     void adminLogoutMake(Map<String, Object> paramMap);
+
+    Map<String, Object> loginCheck(Map<String, Object> paramMap, HttpSession session);
 }

src/main/java/egovframework/service/impl/AdminServiceImpl.java

@@ -3,13 +3,19 @@ package egovframework.service.impl;
 import egovframework.rte.fdl.cmmn.EgovAbstractServiceImpl;
 import egovframework.service.AdminService;
 import egovframework.service.mapper.AdminMapper;
+import egovframework.utill.SHA256;
 import egovframework.vo.AdminVO;
 import egovframework.vo.PopupVO;
 import egovframework.vo.StatsVO;
 import lombok.RequiredArgsConstructor;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
+import javax.servlet.http.HttpSession;
 import java.util.Arrays;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
@@ -19,7 +25,7 @@ import java.util.Map;
 public class AdminServiceImpl extends EgovAbstractServiceImpl implements AdminService {
 
     private final AdminMapper adminMapper;
-
+    Logger logger = LoggerFactory.getLogger(AdminServiceImpl.class);
     @Override
     public AdminVO getUser(String id) {
         return this.adminMapper.getUser(id);
@@ -167,4 +173,53 @@ public class AdminServiceImpl extends EgovAbstractServiceImpl implements AdminSe
     public void adminLogoutMake(Map<String, Object> paramMap) {
         this.adminMapper.adminLogoutMake(paramMap);
     }
+
+    @Override
+    @Transactional(rollbackFor = {RuntimeException.class, Exception.class})
+    public Map<String, Object> loginCheck(Map<String, Object> paramMap, HttpSession session) {
+        Map<String,Object> resultMap = new HashMap<>();
+        AdminVO userInfo = adminMapper.getUser(paramMap.get("email").toString());
+
+        if (userInfo != null) {
+            String pw = SHA256.encrypt(paramMap.get("password").toString()); // 원본
+            if (userInfo.getIs_account_lock().equals("Y") ) {
+                resultMap.put("msg", "3회 이상 로그인 실패로 계정 이용 불가\n관리자에게 문의하세요.");
+            }
+            else if (userInfo.getPassword().equals(pw)) {
+                //로그인성공
+                String id = userInfo.getEmail();
+                session.setAttribute("userId", id);
+                adminMapper.adminLoginMake(null);
+                resultMap.put("code", "S");
+                paramMap.put("count", 0);
+                adminMapper.setFailCount(paramMap);
+            }
+            else {
+                Map<String,Object> failCountMap = adminMapper.getFailCount(paramMap);
+                int count;
+                if (failCountMap == null) {
+                    count = 0;
+                }
+                else {
+                    count =  Integer.parseInt(String.valueOf(failCountMap.get("LOGIN_FAIL_COUNT")));
+                }
+                paramMap.put("count", ++count);
+                adminMapper.setFailCount(paramMap);
+                if (count > 2) {
+                    adminMapper.setAcountLock(paramMap);
+                    resultMap.put("msg", "3회 이상 로그인 실패로 계정 이용 불가\n관리자에게 문의하세요");
+                }
+                else {
+                    //로그인 실패
+                    resultMap.put("msg", "정보입력 " + count + " 회 오류");
+                }
+                resultMap.put("code", "F");
+            }
+        }
+        else {
+            resultMap.put("code", "F");
+            resultMap.put("msg", "입력하신 정보를 다시 확인해주세요.");
+        }
+        return resultMap;
+    }
 }

src/main/java/egovframework/service/mapper/AdminMapper.java

@@ -1,13 +1,13 @@
 package egovframework.service.mapper;
 
-import java.util.List;
-import java.util.Map;
-
 import egovframework.rte.psl.dataaccess.mapper.Mapper;
 import egovframework.vo.AdminVO;
 import egovframework.vo.PopupVO;
 import egovframework.vo.StatsVO;
 
+import java.util.List;
+import java.util.Map;
+
 @Mapper
 public interface AdminMapper {
 
@@ -42,4 +42,10 @@ public interface AdminMapper {
 	void adminLoginMake(Map<String, Object> paramMap);
 	
 	void adminLogoutMake(Map<String, Object> paramMap);
+
+	Map<String, Object> getFailCount(Map<String, Object> paramMap);
+
+	void setAcountLock(Map<String, Object> paramMap);
+
+	void setFailCount(Map<String, Object> paramMap);
 }

src/main/java/egovframework/utill/CommonPath.java

@@ -0,0 +1,20 @@
+package egovframework.utill;
+
+public class CommonPath {
+
+    public static String getFilePath() {
+        final String OS = System.getProperty("os.name").toLowerCase();
+        if (OS.contains("win")) {
+            return "D:/PTATMS/web-data/attatchFile";
+        }
+        return "home/web-data/attatchFile";
+    }
+
+    public static String getImageUploadPath() {
+        final String OS = System.getProperty("os.name").toLowerCase();
+        if (OS.contains("win")) {
+            return "D:/PTATMS/web-data/upload";
+        }
+        return "home/web-data/upload";
+    }
+}

src/main/java/egovframework/utill/TrafficData.java

@@ -0,0 +1,31 @@
+package egovframework.utill;
+
+import egovframework.vo.RoadVertexArrVO;
+
+import java.util.List;
+
+public class TrafficData {
+    static List<RoadVertexArrVO> road;
+    static List<RoadVertexArrVO> ifsc;
+    static List<RoadVertexArrVO> link;
+
+    public static List<RoadVertexArrVO> getRoad(){
+        return road;
+    }
+    public static List<RoadVertexArrVO> getIfsc(){
+        return ifsc;
+    }
+    public static List<RoadVertexArrVO> getLink(){
+        return link;
+    }
+
+    public static void setRoad(List<RoadVertexArrVO> roadList){
+        road = roadList;
+    }
+    public static void setIfsc(List<RoadVertexArrVO> ifscList){
+        ifsc = ifscList;
+    }
+    public static void setLink(List<RoadVertexArrVO> linkList){
+        link = linkList;
+    }
+}

src/main/java/egovframework/vo/AdminVO.java

@@ -10,5 +10,5 @@ public class AdminVO {
     private String email;
     private String username;
     private String password;
-
+    private String is_account_lock;
 }

src/main/java/egovframework/vo/NoticeVO.java

@@ -2,27 +2,63 @@ package egovframework.vo;
 
 import lombok.Getter;
 import lombok.Setter;
+import lombok.ToString;
+
+import java.util.List;
 
 @Getter
 @Setter
+@ToString
 public class NoticeVO {
 
     private String boardId;
-    private int boardNo;
-    private String categoryCd;
-    private String parentBoardNo;
+    private int    boardNo;
     private String regDate;
     private String bSubject;
     private String bContent;
-    private String bWriter;
+    private String webUserId;
     private String attachFile;
     private String attachFileId;
+    private String parentBoardno;
+    private String bWriter;
     private String bNotice;
-    private int readCount;
+    private int    readCount;
     private String remark;
-    private String webUserId;
-    private String attachFile1;
-    private String attachFile2;
-    private String attachFile3;
+    private List<String> attatchFiles;
+    private List<String> attatchFileIds;
+    private String attachfile1;
+    private String attachfile2;
+    private String attachfile3;
+
+    public void setbSubject(String bSubject) {
+        this.bSubject = bSubject;
+    }
+
+    public void setbContent(String bContent) {
+        this.bContent = bContent;
+    }
+
+    public void setbWriter(String bWriter) {
+        this.bWriter = bWriter;
+    }
+
+    public void setbNotice(String bNotice) {
+        this.bNotice = bNotice;
+    }
+
+    public String getbSubject() {
+        return bSubject;
+    }
+
+    public String getbContent() {
+        return bContent;
+    }
+
+    public String getbWriter() {
+        return bWriter;
+    }
 
+    public String getbNotice() {
+        return bNotice;
+    }
 }

src/main/resources/egovframework/spring/context-common.xml

@@ -12,8 +12,8 @@
 		<property name="basenames">
 			<list>
 				<value>classpath:/egovframework/message/message-common</value>
-				<value>classpath:/egovframework/rte/fdl/idgnr/messages/idgnr</value>
-				<value>classpath:/egovframework/rte/fdl/property/messages/properties</value>
+<!--				<value>classpath:/egovframework/rte/fdl/idgnr/messages/idgnr</value>-->
+<!--				<value>classpath:/egovframework/rte/fdl/property/messages/properties</value>-->
 			</list>
 		</property>
 		<property name="cacheSeconds">

src/main/resources/egovframework/sqlmap/mappers/admin.xml

@@ -4,14 +4,14 @@
 
 	<select id="getUser" parameterType="java.lang.String" resultType="egovframework.vo.AdminVO">
 		SELECT 
-				EMAIL,
-				NAME USERNAME,
-				PWD PASSWORD
+				EMAIL AS email,
+				NAME AS username,
+				PWD AS password,
+				IS_ACCOUNT_LOCK AS is_account_lock
 		FROM 
 				TB_WWW_MEMBER
 		WHERE 
 				EMAIL  = #{id}
-
 	</select>
 
  	<update id="insertNotice" parameterType="java.util.HashMap">
@@ -22,6 +22,7 @@
 								  BCONTENT,
 								  EMAIL,
 								  ATTACHFILE,
+								  ATTACHFILEID,
 								  BNOTICE,
 								  BWRITER,
 								  BOARDID,
@@ -33,6 +34,7 @@
 								 #{bContent},
 								 #{webUserId},
 								 #{attachFile},
+		                         #{ATTACHFILEID},
 								 #{bNotice},
 								 '관리자',
 								 '1',
@@ -50,14 +52,14 @@
 			   BSUBJECT   = #{bSubject},
 			   BCONTENT   = #{bContent},
 			   ATTACHFILE = #{attachFile},
+			   ATTACHFILEID = #{ATTACHFILEID},
 			   BNOTICE    = #{bNotice}
 	     WHERE BOARDNO = #{boardNo}
 	</update>
 	
 	
 	<select id="getPopupList" parameterType="java.util.HashMap" resultType="egovframework.vo.PopupVO">
-		SELECT ROWNUM RN,
-               POPUPID,
+		SELECT POPUPID,
                IMG_ID,
                IMG_NAME,
                POST_FROM,
@@ -70,7 +72,7 @@
         <if test="id != null">
         	WHERE POPUPID = #{id}
         </if>
-        ORDER BY POPUPID
+        ORDER BY USE_YN DESC, REGDATE ASC
 	</select>
 	<insert id="insertPopup" parameterType="java.util.HashMap">
 		INSERT INTO TB_WWW_POPUP
@@ -374,4 +376,31 @@
 										MAXHMS=LOGIN_HMS
 								 )
 	</update>
+
+	<update id="setFailCount" parameterType="java.util.HashMap">
+		UPDATE
+			TB_WWW_MEMBER
+		SET
+			LOGIN_FAIL_COUNT = #{count}
+		WHERE
+			EMAIL = #{email}
+	</update>
+
+	<select id="getFailCount" parameterType="java.util.HashMap" resultType="java.util.HashMap">
+		SELECT
+			LOGIN_FAIL_COUNT
+		FROM
+			TB_WWW_MEMBER
+		WHERE
+			EMAIL = #{email}
+	</select>
+
+	<update id="setAcountLock" parameterType="java.util.HashMap">
+		UPDATE
+			TB_WWW_MEMBER
+		SET
+			IS_ACCOUNT_LOCK = 'Y'
+		WHERE
+			EMAIL = #{email}
+	</update>
 </mapper>

src/main/resources/egovframework/sqlmap/mappers/common.xml

@@ -74,6 +74,7 @@
                         '눈', 'DB07',
                         '소나기', 'DB08',
                         'DB00') AS WEATHERCODE,
+
                  LWST_TMPR AS MINTEMPERATURE,
                  HGHS_TMPR AS MAXTEMPERATURE,
                  PRST_TMPR
@@ -85,7 +86,7 @@
         WHERE ROWNUM = 1
     </select>
     
-	<select id="getIfscVertexArr" resultType="egovframework.vo.RoadVertexArrVO" fetchSize="2000">
+	<select id="getIfscVertexArr" resultType="egovframework.vo.RoadVertexArrVO" fetchSize="7000">
         SELECT
                 TT.ATRD_ID,
                 NVL(TT.ATRD_NM,TI.IFSC_NM) ATRD_NM,
@@ -141,7 +142,7 @@
                   ORDER BY LEVL,DRCT_CD,ROAD_ORD,IFSC_ORD,LINK_ORD
     </select>
 
-	<select id="getLinkVertexArr" resultType="egovframework.vo.RoadVertexArrVO" fetchSize="2000">
+	<select id="getLinkVertexArr" resultType="egovframework.vo.RoadVertexArrVO" fetchSize="12000">
     SELECT
             TT.ATRD_ID,
             NVL(TT.ATRD_NM,TL.ROAD_NAME) ATRD_NM,
@@ -398,19 +399,27 @@
                 --  WHERE VMS_CTLR_NMBR = A.VMS_CTLR_NMBR
                 --    AND UPDT_DT >= TO_CHAR((SYSDATE - 8/1440),'YYYYMMDDHH24MISS')), 'CMS1') AS CMNC_STTS_CD
 		  FROM TB_VMS_CTLR A
-		INNER JOIN TB_VMS_TYPE B
-		ON A.VMS_CTLR_NMBR = #{vms_ctlr_nmbr}
-		AND A.VMS_TYPE_CD = B.VMS_TYPE_CD
-		LEFT OUTER JOIN (SELECT VMS_CTLR_NMBR, PHASE, VMS_DSPL_MSG_IMAG, VMS_DSPL_MSG_TXT
-		                   FROM TB_VMS_DSPL_PRST WHERE (VMS_CTLR_NMBR, DSPL_DT) IN
-		                        (SELECT VMS_CTLR_NMBR, MAX(DSPL_DT) AS DSPL_DT
-		                           FROM TB_VMS_DSPL_PRST
-		                           WHERE VMS_CTLR_NMBR = #{vms_ctlr_nmbr}
-		                             AND DSPL_DT >= TO_CHAR((SYSDATE - 8/1440),'YYYYMMDDHH24MISS')
-		                          GROUP BY VMS_CTLR_NMBR
+		    INNER JOIN TB_VMS_TYPE B
+		            ON A.VMS_CTLR_NMBR = #{vms_ctlr_nmbr}
+		           AND A.VMS_TYPE_CD = B.VMS_TYPE_CD
+		    LEFT OUTER JOIN (SELECT
+		                            VMS_CTLR_NMBR,
+		                            PHASE,
+		                            VMS_DSPL_MSG_IMAG,
+		                            VMS_DSPL_MSG_TXT
+		                       FROM TB_VMS_DSPL_PRST
+		                      WHERE (VMS_CTLR_NMBR, DSPL_DT)
+                                    IN
+                                      (SELECT
+                                              VMS_CTLR_NMBR,
+                                              MAX(DSPL_DT) AS DSPL_DT
+		                                 FROM TB_VMS_DSPL_PRST
+		                                WHERE VMS_CTLR_NMBR = #{vms_ctlr_nmbr}
+		                                  AND DSPL_DT >= TO_CHAR((SYSDATE - 8/1440),'YYYYMMDDHH24MISS')
+		                                GROUP BY VMS_CTLR_NMBR
 		                          ) 
-		                ) C
-		ON  A.VMS_CTLR_NMBR  = C.VMS_CTLR_NMBR
+		                    ) C
+		    ON  A.VMS_CTLR_NMBR  = C.VMS_CTLR_NMBR
 	</select>
 
 	<select id="getWcamCtlr" resultType="egovframework.vo.WcamCtlrVO">
@@ -547,7 +556,7 @@
                LISTAGG(ATRD_ID,',') as atrd_id
         FROM TB_ATRD
         WHERE DEL_YN = 'N'
-        GROUP BY ATRD_NM
+        GROUP BY ATRD_NM ORDER BY ATRD_NM
 
 <!-- (티베로) AGGR_CONCAT : 여러행 데이터를 하나의 컬럼으로..
         SELECT ATRD_NM as atrd_nm,

src/main/resources/egovframework/sqlmap/mappers/notice.xml

@@ -9,12 +9,12 @@
 			categoryCd as categoryCd,
 			parentBoardNo as parentBoardNo,
 			regDate as regDate,
-			bSubject as bSubject,
-			bContent as bContent,
-			bWriter as bWriter,
+			bSubject as bsubject,
+			bContent as bcontent,
+			bWriter as bwriter,
 			attachFile as attachFile,
 			attachFileId as attachFileId,
-			bNotice as bNotice,
+			bNotice as bnotice,
 			readCount as readCount,
 			remark as remark
 		FROM (SELECT A.*,
@@ -46,12 +46,12 @@
 			categoryCd as categoryCd,
 			parentBoardNo as parentBoardNo,
 			regDate as regDate,
-			bSubject as bSubject,
-			bContent as bContent,
-			bWriter as bWriter,
+			bSubject as bsubject,
+			bContent as bcontent,
+			bWriter as bwriter,
 			attachFile as attachFile,
 			attachFileId as attachFileId,
-			bNotice as bNotice,
+			bNotice as bnotice,
 			readCount as readCount,
 			remark as remark
 		FROM TB_WWW_BOARD

src/main/resources/log4j2.xml

@@ -8,11 +8,11 @@
   <Console name="console" target="SYSTEM_OUT">
    <PatternLayout pattern="${layoutPattern}" />
   </Console>
-  
+
   <RollingFile name="file" fileName="/log/${logNm}.log" filePattern="/log/logs/${logNm}_%d{yyyy-MM-dd}_%i.log">
    <PatternLayout pattern="${layoutPattern}" />
    <Policies>
-    <SizeBasedTriggeringPolicy size="10MB" /> <!-- 10MB 용량이 초과시 DefaultRolloverStrategy 정책만큼 넘버링 -->      
+    <SizeBasedTriggeringPolicy size="10MB" /> <!-- 10MB 용량이 초과시 DefaultRolloverStrategy 정책만큼 넘버링 -->
     <TimeBasedTriggeringPolicy module="true" interval="1" /><!-- 일별 로그 파일 생성-->
    </Policies>
    <DefaultRolloverStrategy max="500" fileIndex="min" /><!-- 롤링 파일 500개 까지 생성 -->
@@ -20,7 +20,7 @@
  </Appenders>
 
  <Loggers>
- 
+
   <!-- 기본 레벨은 debug -->
   <Root level="info" additivity="false" >
    <AppenderRef ref="console" />
@@ -38,7 +38,7 @@
       <AppenderRef ref="file" />
      </logger>-->
 
-     
+
      <!-- rolling file에는 debug, console에는 info 분리하여 처리 가능하다. -->
      <logger name="egovframework" additivity="false" >
       <AppenderRef ref="console" level="info" />

src/main/webapp/WEB-INF/jsp/egovframework/admin/editPopupNew.jsp

@@ -273,7 +273,7 @@
             alert("팝업이미지는 필수 입니다.");
             return false;
         }
-        if (image[0].files && image[0].files[0].files[0].size > 200000000) {
+        if (image[0].files && image[0].files[0].size > 200000000) {
         	alert("팝업이미지 첨부 파일 사이즈는 190MB 이내로 등록 가능합니다.");
         	return false;
         }

src/main/webapp/WEB-INF/jsp/egovframework/admin/index.jsp

@@ -0,0 +1,116 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+         pageEncoding="UTF-8"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+
+<section class="sub-container">
+    <article class="menu-history">
+        <ul>
+            <li><a href="/main/main.do" class="home">홈</a></li>
+            <li><a href="/admin/index.do">관리자 로그인</a></li>
+        </ul>
+    </article>
+    <article class="contents-wrap">
+        <div class="title-box">
+            <h2 class="h2-title">로그인</h2>
+            <p class="title-info">평택시 교통정보센터 <span>관리자</span></p>
+        </div>
+        <div class='login-form'>
+            <h2>홈페이지 관리를 위해서는 관리자 로그인이 필요합니다.</h2>
+            <ul>
+                <li style="width: 70%;">
+                    <p><input
+                            type="text"
+                            class="form inoff"
+                            title="아이디"
+                            name="email"
+                            id="email"
+                            placeholder="아이디를 입력하세요"/></p>
+                    <p><input
+                            type="password"
+                            class="form inoff mt-01"
+                            title="비밀번호"
+                            name="password"
+                            id="password"
+                            placeholder="비밀번호를 입력하세요"/></p>
+
+                </li >
+                <li style="width: 30%;">
+                    <input type="button" id="login" value="로그인" class='btn-login fadio300'/>
+                </li>
+                <c:if test="${message != null}">
+                    <li style="padding:10px;color:red"><c:out value="${message }"/></li>
+                </c:if>
+            </ul>
+
+            <%--                <ul>--%>
+            <%--                    <li style="visibility: hidden" class='id-save' ><label for="idSave"><input type="checkbox" name="" id="idSave" value=""  />아이디 저장</label></li>--%>
+            <%--                    <li style="width: 70%;">--%>
+            <%--                        <p><input type="text" name="" placeholder="아이디를 입력하세요" value="" class='inoff' title="아이디" /></p>--%>
+            <%--                        <p><input type="password" name="" placeholder="비밀번호를 입력하세요" value="" class='inoff mt-01'  title="비밀번호" /></p>--%>
+            <%--                    </li>--%>
+            <%--                    <li style="width: 30%;"><input type="button" name="" value="로그인" class='btn-login fadio300' onclick="location.href='../admin/admin_notice.html'" /></li>--%>
+            <%--                </ul>--%>
+        </div>
+    </article>
+</section>
+
+<!--//contents-->
+<script type="text/javascript">
+
+    $("#login").click(function () {
+
+        if ($("#email").val() == "") {
+            alert("아이디를 정확하게 입력하세요.");
+            $("#email").focus();
+            return false;
+        }
+
+        if ($("#password").val() == "") {
+            alert("비밀번호를 정확하게 입력하세요.");
+            $("#password").focus();
+            return false;
+        }
+
+        const param = {
+            email : $("#email").val(),
+            password : $("#password").val()
+        };
+        console.log(param);
+        loginCheck(param)
+        //$("#loginForm").submit();
+
+    });
+
+    $("#password").keypress(function (event) {
+        if (event.which == 13) {
+            $("#login").click();
+        }
+    });
+
+    function loginCheck(param){
+        $.ajax({
+            type: "POST",
+            url: '/admin/login.do',
+            data : JSON.stringify(param),
+            contentType : "application/json; charset=UTF-8",
+            success: function (data) {
+                loginResult(data);
+            },
+            error: function (error) {
+                alert("로그인 에러");
+            }
+        })
+    }
+
+    function loginResult(data){
+        if (data){
+            const {msg, code} = data;
+            if (code === 'S') {
+                location.href = '/admin/index.do';
+            }
+            else {
+                alert(msg);
+            }
+        }
+    }
+</script>

src/main/webapp/WEB-INF/jsp/egovframework/admin/noticeViewNew.jsp

@@ -1,5 +1,6 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
 
     <section class="sub-container">
         <article class="menu-history">
@@ -30,24 +31,12 @@
                     <div class="view-form">
                         <div class="download">
                             <%--									<a href="#">첨부파일명자료.jpg</a>--%>
-                            <c:if test="${not empty notice.attachfile1}">
-                                <a class="file1" onclick="fileDownload('${notice.attachfile1}')" style="cursor:pointer;">
-                                	<img src="/images/icon_file.png" class='pt12 pr05' alt="첨부파일1" />
-                                	${notice.attachfile1 }</a>
+                            <c:if test="${not empty notice.attatchFiles && not empty notice.attatchFileIds}" >
+                                <c:forEach var="attatchFile" items="${notice.attatchFiles}" varStatus="status">
+                                     <a class="file${status.count}" onclick="fileDownload('${notice.attatchFileIds.get(status.index)}', '${attatchFile}')" style="cursor:pointer;">
+                                        <img src="/images/icon_file.png" class='pt12 pr05' alt="첨부파일${status.count}" />${attatchFile}</a>
+                                </c:forEach>
                             </c:if>
-                            <c:if test="${not empty notice.attachfile2}">
-                                <a class="file2" onclick="fileDownload('${notice.attachfile2}')" style="cursor:pointer;">
-                                	<img src="/images/icon_file.png" class='pt12 pr05' alt="첨부파일2" />
-                                	${notice.attachfile2 }
-                               	</a>
-                            </c:if>
-                            <c:if test="${not empty notice.attachfile3}">
-                                <a class="file3" onclick="fileDownload('${notice.attachfile3}')" style="cursor:pointer;">
-                                	<img src="/images/icon_file.png" class='pt12 pr05' alt="첨부파일3" />
-                                	${notice.attachfile3 }
-                               	</a>
-                            </c:if>
-
                         </div>
                         <p class="day">${notice.regDate}</p>
                     </div>
@@ -66,8 +55,8 @@
         </article>
     </section>
     <script>
-    	function fileDownload(fileName) {
-    		location.href = "/notice/getFile.do?fileName=" + encodeURIComponent(fileName);
+    	function fileDownload(fileId, fileName) {
+    		location.href = "/notice/getFile.do?fileId="+ fileId + "&fileName=" + encodeURIComponent(fileName);
     	}
     	
     </script>

src/main/webapp/WEB-INF/jsp/egovframework/admin/popupListNew.jsp

@@ -43,7 +43,7 @@
 
                         <c:forEach var="item" items="${popupList}" varStatus="status">
                             <dl title="${item.title}" style="width:100%;">
-                                <dd class="width5 board-no">${item.rn}</dd>
+                                <dd class="width5 board-no">${status.index + 1}</dd>
                                 <dd class="width30 board-tit">${item.title}</dd>
                                 <dd class="width15 board-file">${item.img_name}</dd>
                                 <dd class="width20 board-term">${item.post_from} ~ ${item.post_to }</dd>
@@ -302,7 +302,7 @@
                     return false;
                 }
                
-                if (image[0].files[0].files[0].size > 200000000) {
+                if (image[0].files[0].size > 200000000) {
                 	alert("팝업이미지 첨부 파일 사이즈는 190MB 이내로 등록 가능합니다.");
                 	return false;
                 }

src/main/webapp/WEB-INF/jsp/egovframework/admin/statusNew.jsp

@@ -29,7 +29,6 @@
 				<img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;z-index:10"/>
 				<div class="adminStatsWrap">
 					<div class="searchBox" style="background: none; border-bottom: none; position: inherit;">
-						<label>검색일&nbsp;&nbsp;&nbsp;&nbsp;</label>
 						<select title="검색 년도" id="year">
 							<c:forEach begin="${thisYear-5}" end="${thisYear}" varStatus="status"><option value="<fmt:formatNumber pattern="00" value="${status.current}"/>" <c:if test="${status.current == thisYear}">selected</c:if>>${status.current}년</option>
 							</c:forEach>

src/main/webapp/WEB-INF/jsp/egovframework/include/daumApiKey.jsp

@@ -1,4 +1,4 @@
-<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=03241b6fc7c5e84f34038975038dcb4a"></script>
+<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d63cb13f040afc64412390c1c84288a6"></script>
 
 <!--
 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d63cb13f040afc64412390c1c84288a6"></script>

src/main/webapp/WEB-INF/jsp/egovframework/main/mainNew.jsp

@@ -1,84 +1,21 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 
-<script type="text/javascript">
-
-    function setCookie(name, value, expiredays) {
-        var todayDate = new Date();
-        todayDate.setDate(todayDate.getDate() + expiredays);
-        console.log( todayDate.toGMTString());
-        document.cookie = name + "=" + escape(value) + "; path=/; expires=" +
-            todayDate.toGMTString() + " Secure;"
-    }
-    function closeWin(id) {
-        if ($("input:checkbox[name='chkbox']").is(":checked")) {
-            setCookie("divpop" + id, "done", 1);
-        } else {}
-        $("#" + id)
-            .parent()
-            .css('visibility', 'hidden');
-    }
-    var left = 0;
-    var t = 0;
-    
-    function getCookie (name) {
-		var nameOfCookie = name + "=";
-        var x = 0; while (x <= document.cookie.length) {
-            var y = (x + nameOfCookie.length);
-            if (document.cookie.substring(x, y) == nameOfCookie) {
-                if ((endOfCookie = document.cookie.indexOf(";", y)) == -1)
-                    endOfCookie = document.cookie.length;
-                return unescape(document.cookie.substring(y, endOfCookie));
-            }
-            x = document.cookie.indexOf(" ", x) + 1; if (x == 0)
-                break;
-        }
-        return "";
-	}
-</script>
-
 <!-- POPUP -->
 <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-<c:forEach var="item" items="${possiblePopupList}" begin="0" end="5"  varStatus="status">
-	<script>
-		var popupYn = getCookie('gm-${item.POPUPID}');
-		console.log(popupYn);
-		if (popupYn !== 'Y') {
-			var image = new Image();
-			var width = 0;
-			var height = 0;
-			image.src = `/images/img_upload/${item.IMG_ID }`;
-			image.onload = function() {
-				width = this.width;
-				height = this.height;
-				if (width <= 310) {
-					width = 310;
-				}
-				if (height <= 383) {
-					height = 383;
-				} 
-				window.open(`/main/popup.do?id=${item.POPUPID}`, '${item.POPUPID}', 'width=' + (width + 20) +', height=' + (height + 100) + ', left=' + left + ', top=' + t);
-				left += 50;
-				t += 50;
-			}	
-		}
-		
-	</script>
-</c:forEach>
 
 <!--mainContent-->
 
 <section class="main-container">
     <!-- 좌측목록 지도 영역 -->
-    <article class="left-Area">
+    <article class="left-Area main">
             <div class="left-Tab">
             <button type="button" title="도로" class="mapRoadList" id="trafficInfo" style="display: none">도로</button>
+            <button type="button" title="도로" class="road on" id="roadInfo">도로</button>
             <button type="button" title="돌발" class="outbreak on" id="inciInfo">돌발</button>
             <button type="button" title="CCTV" class="cctv" id="cctvInfo">CCTV</button>
             <button type="button" title="VMS" class="vms" id="VMSInfo">VMS</button>
         </div>
-        <script>
-        </script>
         <div class="left-list">
             <div class="road-list">
                 <button class="list-button" type="button" id='show' onclick="dis()">
@@ -97,7 +34,7 @@
                         <option value="javascript:atrdTrfInfo('${item.atrd_id }','${item.atrd_nm }')">${item.atrd_nm }</option>
                     </c:forEach>
                 </select>
-                <label for="atrdList">도로목록</label>
+                <label for="atrdList"></label>
             </div>
         </div>
     </article>
@@ -117,29 +54,38 @@
     init();
     $("#trafficInfo").trigger('click');
 
-
-    <c:if test="${possiblePopupList.size() gt 0}">
-
-    var cookiedata = document.cookie;
-    <c:forEach var="item" items="${possiblePopupList}" begin="0" end="5" varStatus="status">
-    var id = "<c:out value='${item.POPUPID}'/>";
-    if ( cookiedata.indexOf("divpop"+id+"=done") < 0 ){
-        $("#"+id).parent().css('visibility','visible');
-        //document.all['divpop60'].style.visibility = "visible";
-    }else {
-        $("#"+id).parent().css('visibility','hidden');
-        //document.all['divpop'].style.visibility = "hidden";
-    }
-    </c:forEach>
-    </c:if>
-</script>
-
-<script type="text/javascript">
     //_TrafficFlag = false;
     //간선도로를 선택하면 줌 레벨에 상,하향 색상을 바꿔준다..
-    daum.maps.event.addListener(_Map, 'zoom_changed', function() {
+    kakao.maps.event.addListener(_Map, 'zoom_changed', function() {
         if(_AtrdId != null) showAtrdTrfInfo();
     });
     sideInfoList = true;
 
+    //팝업 창 띄우기
+    let left = 0;
+    let t = 0;
+    <c:forEach var="item" items="${possiblePopupList}">
+        let popupYn = getCookie('gm-${item.POPUPID}');
+
+        if (popupYn !== 'Y') {
+            var image = new Image();
+            var width = 0;
+            var height = 0;
+            image.src = `/upload/${item.IMG_ID }`;
+            image.onload = function() {
+                width = this.width;
+                height = this.height;
+                if (width <= 310) {
+                    width = 310;
+                }
+                if (height <= 383) {
+                    height = 383;
+                }
+                window.open(`/main/popup.do?id=${item.POPUPID}`, `${item.POPUPID}`,
+                    'width='+(width + 20) + ', height=' + (height + 100) +', left=' +left +', top=' + t);
+                left += 50;
+                t += 50;
+            }
+        }
+    </c:forEach>
 </script>

src/main/webapp/WEB-INF/jsp/egovframework/main/popup.jsp

@@ -85,12 +85,12 @@
 	<div class="container">
 		<div class="content">
 			<c:if test="${empty popupObject.URL }">
-				<img src="/images/img_upload/${popupObject.IMG_ID }" alt="${popupObject.TITLE }"/>
+				<img src="/upload/${popupObject.IMG_ID }" alt="${popupObject.TITLE }"/>
 			</c:if>
 			<c:if test="${!empty popupObject.URL}">
 				<div class="img-box">
 					<a href="http://${popupObject.URL }" onclick="target='_blank'">
-						<img src="/images/img_upload/${popupObject.IMG_ID }" alt="${popupObject.TITLE }"/>
+						<img src="/upload/${popupObject.IMG_ID }" alt="${popupObject.TITLE }"/>
 					</a>
 				</div>
 				<div class="go-page">

src/main/webapp/WEB-INF/jsp/egovframework/tiles/templateNew.jsp

@@ -39,22 +39,22 @@
 </head>
 <body>
 <script type="text/javascript">
-    if (document.location.href.indexOf("gumi") != -1) {
-        if (document.location.protocol == 'http:') {
-            document.location.href = document.location.href.replace('http:', 'https:');
-        }
+    // console.log(document.location.href);
+    if (document.location.protocol == 'http:') {
+        document.location.href = document.location.href.replace('http:', 'https:');
     }
 
     function dis(){
-        if($('.dis').css('display') == 'none'){
-            $('.dis').show();
-        }else{
-            $('.dis').hide();
-        }
+
+        // if($('.dis').css('display') == 'none'){
+        //     $('.dis').show();
+        // }else{
+        //     $('.dis').hide();
+        // }
     }
 </script>
 
-<div id="wrap" class="${siteSubInfo}" style="height:100%;">
+<div id="wrap" class="${siteSubInfo}" style="width: 100%; height:100%;">
 
     <tiles:insertAttribute name="header"  />
     <tiles:insertAttribute name="content" />
@@ -62,5 +62,4 @@
 </div>
 <script src="/common/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 </body>
-
 </html>

src/main/webapp/WEB-INF/jsp/egovframework/traffic/cctvNew.jsp

@@ -2,7 +2,7 @@
 
 <section class="main-container">
     <!-- 좌측목록 지도 영역 -->
-    <article class="left-Area">
+    <article class="left-Area traffic">
         <ul class="sub-Tab">
             <li ><a href="/traffic/realtime.do">소통정보</a></li>
             <li><a href="/traffic/incd.do">돌발정보</a></li>
@@ -16,8 +16,6 @@
                 </button>
                 <ul class="list cctv dis" id="cctvList">
                 </ul>
-
-
             </div>
             <div class="traffic-list-select">
                 <select id="cctvListM" class="trafficSelect" onchange="showCctvInfo(this.value)">
@@ -43,5 +41,10 @@
 	setInterval(getVertexArr, 1000 * 60 * 5);
 	_TrafficFlag = false;
 	getVertexArr();
-
+    $('.dis li').on('click', function() {
+        for (let ii=0; ii < $('.dis li').length; ii++) {
+            $('.dis li').eq(ii).css('background-color', '#fff');
+        }
+        $(this).css('background-color', '#eee');
+    })
 </script>

src/main/webapp/WEB-INF/jsp/egovframework/traffic/cctvPopup.jsp

@@ -1,10 +1,43 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
+<% request.setCharacterEncoding("UTF-8"); %>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Type" content= "text/html; charset= utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <meta http-equiv="Content-Style-Type" content="text/css">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="format-detection" content="telephone=no">
+    <link rel="favicon" href="/images/favicon.ico">
+    <title>평택시 교통정보센터 - ${subTitle}</title>
 
-<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-<script src="/js/HiVeWebRtcPlayer/webrtcadapter.js"></script>
-<script src="/js/HiVeWebRtcPlayer/HiVeWebRtcPlayer.js"></script>
+    <!--Existing CSS-->
+    <%--    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">--%>
+    <%--    <link rel="stylesheet" type="text/css" href="/css_old/responsive.css" />--%>
+    <%--    <link rel="stylesheet" type="text/css" href="/css_old/style.css" />--%>
+    <!---->
+
+    <!-- Bootstrap CSS -->
+
+    <link href="/common/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="/common/css/reset.css" />
+    <link rel="stylesheet" type="text/css" href="/common/css/layout.css" />
+    <link rel="stylesheet" type="text/css" href="/common/css/contents.css" />
+    <link rel="stylesheet" type="text/css" href="/common/css/Exsting_style.css">
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script type="text/javascript" src="/js/video.min.js"></script>
+    <script type="text/javascript" src="/js/common.js"></script>
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script src="/js/HiVeWebRtcPlayer/webrtcadapter.js"></script>
+    <script src="/js/HiVeWebRtcPlayer/HiVeWebRtcPlayer.js"></script>
+</head>
+<body>
 <div class="map_popup_cctv">
     <dl>
         <dt>
@@ -22,30 +55,16 @@
 </div>
 <div id="dialog" class="selector ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 116px; display:none;">
 </div>
+</body>
 <script type="text/javascript">
-    <%--let strm_http_addr = "${cctv.strm_http_addr}";--%>
-    <%--openCCTV(strm_http_addr);--%>
+    //if (document.location.protocol == 'https:') {
+    //    document.location.href = document.location.href.replace('https:', 'http:');
+    //}
+
+    let WEB_RTC_SVR_IP = "${cctv.web_rtc_svr_ip}";
+    let WEB_RTC_SVR_PORT = "${cctv.web_rtc_svr_port}";
+    let WEB_RTC_ID = "${cctv.web_rtc_id}";
 
-    let WEB_RTC_SVR_IP = "${cctv.WEB_RTC_SVR_IP}";
-    let WEB_RTC_SVR_PORT = "${cctv.WEB_RTC_SVR_PORT}";
-    let WEB_RTC_ID = "${cctv.WEB_RTC_ID}";
-	
-	const cctvArr = window.opener.getCctvArr();
-	let cctvObj;
-	cctvArr.map((item)=>{
-		if (item.cctv_mngm_nmbr === ${cctv.cctv_mngm_nmbr}) {
-			cctvObj = item;
-		}
-	})
-  	$(window).bind('beforeunload', ()=>{
-        if (cctvObj) {
-        	cctvObj.cctvMarker.setImage(cctvObj.normalImage);
-        	cctvObj.click = false;
-        }
-    })
     var webrtcPlayer1 = new HiVeWebRtcPlayer("11", WEB_RTC_SVR_IP, WEB_RTC_SVR_PORT, WEB_RTC_ID);
     openCCTV();
-	function getOpenerCctvNmber(){
-		return ${cctv.cctv_mngm_nmbr};
-	}
 </script>

src/main/webapp/WEB-INF/jsp/egovframework/traffic/cctvPopupM.jsp

@@ -1,10 +1,43 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
+<% request.setCharacterEncoding("UTF-8"); %>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Type" content= "text/html; charset= utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <meta http-equiv="Content-Style-Type" content="text/css">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="format-detection" content="telephone=no">
+    <link rel="favicon" href="/images/favicon.ico">
+    <title>평택시 교통정보센터 - ${subTitle}</title>
 
-<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-<script src="/js/HiVeWebRtcPlayer/webrtcadapter.js"></script>
-<script src="/js/HiVeWebRtcPlayer/HiVeWebRtcPlayer.js"></script>
+    <!--Existing CSS-->
+    <%--    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">--%>
+    <%--    <link rel="stylesheet" type="text/css" href="/css_old/responsive.css" />--%>
+    <%--    <link rel="stylesheet" type="text/css" href="/css_old/style.css" />--%>
+    <!---->
+
+    <!-- Bootstrap CSS -->
+
+    <link href="/common/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="/common/css/reset.css" />
+    <link rel="stylesheet" type="text/css" href="/common/css/layout.css" />
+    <link rel="stylesheet" type="text/css" href="/common/css/contents.css" />
+    <link rel="stylesheet" type="text/css" href="/common/css/Exsting_style.css">
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script type="text/javascript" src="/js/video.min.js"></script>
+    <script type="text/javascript" src="/js/common.js"></script>
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script src="/js/HiVeWebRtcPlayer/webrtcadapter.js"></script>
+    <script src="/js/HiVeWebRtcPlayer/HiVeWebRtcPlayer.js"></script>
+</head>
+<body>
 <div class="map_popup_cctv_m">
     <dl>
         <dt>
@@ -22,30 +55,16 @@
 </div>
 <div id="dialog" class="selector ui-dialog-content ui-widget-content" style="width: auto; fint-size:30px; height: 160px; display:none;">
 </div>
+</body>
 <script type="text/javascript">
-    <%--let strm_http_addr = "${cctv.strm_http_addr}";--%>
-    <%--openCCTV(strm_http_addr);--%>
+    //if (document.location.protocol == 'https:') {
+    //    document.location.href = document.location.href.replace('https:', 'http:');
+    //}
 
-    let WEB_RTC_SVR_IP = "${cctv.WEB_RTC_SVR_IP}";
-    let WEB_RTC_SVR_PORT = "${cctv.WEB_RTC_SVR_PORT}";
-    let WEB_RTC_ID = "${cctv.WEB_RTC_ID}";
+    let WEB_RTC_SVR_IP = "${cctv.web_rtc_svr_ip}";
+    let WEB_RTC_SVR_PORT = "${cctv.web_rtc_svr_port}";
+    let WEB_RTC_ID = "${cctv.web_rtc_id}";
 
-    const cctvArr = window.opener.getCctvArr();
-	let cctvObj;
-	cctvArr.map((item)=>{
-		if (item.cctv_mngm_nmbr === ${cctv.cctv_mngm_nmbr}) {
-			cctvObj = item;
-		}
-	})
-  	$(window).bind('beforeunload', ()=>{
-        if (cctvObj) {
-        	cctvObj.cctvMarker.setImage(cctvObj.normalImage);
-        	cctvObj.click = false;
-        }
-    })
     var webrtcPlayer1 = new HiVeWebRtcPlayer("11", WEB_RTC_SVR_IP, WEB_RTC_SVR_PORT, WEB_RTC_ID);
     openCCTV();
-    function getOpenerCctvNmber(){
-		return ${cctv.cctv_mngm_nmbr};
-	}
 </script>

src/main/webapp/WEB-INF/jsp/egovframework/traffic/incdNew.jsp

@@ -3,7 +3,7 @@
 <!--contents-->
 <section class="main-container">
     <!-- 좌측목록 지도 영역 -->
-    <article class="left-Area">
+    <article class="left-Area traffic">
         <ul class="sub-Tab">
             <li ><a href="/traffic/realtime.do">소통정보</a></li>
             <li class="on"><a href="/traffic/incd.do">돌발정보</a></li>
@@ -27,7 +27,7 @@
     </article>
 
     <!-- 서브 지도 영역 -->
-    <div id="map" class="mapArea"><h3 id="selectIncd">지도</h3></div>
+    <div id="map" class="mapArea"></div>
 
 	 <img class="legend-img" alt="소통등급" src="/common/images/trafficStatus.png">
 </section>

src/main/webapp/WEB-INF/jsp/egovframework/traffic/realtime.jsp

@@ -1,125 +0,0 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
-
-<!--contents-->
-<div id="divContent">
-    <section >
-        <div class="mapUIWrap">
-        	<h1>소통 정보</h1>
-            <div class="mapTop">
-               <h2>사이드 정보 목록</h2>
-                <dl class="f-clear">
-                    <dt>
-                    	<h3>도로목록</h3>
-                        <a href="javascript:void(0)" title="도로목록">도로 목록</a>
-                        <a href="javascript:sideListShow('도로')" title="도로목록숨김" class="hideShowButton" ></a></dt>
-                    <dd>
-                    	<h3>소통정보 속도별 색정보</h3>
-                        <span>원활</span>
-                        <span>
-                            <img src="/images/mapping-green.png" width="65" height="10" alt="도로소통정보범례(소통정보원활)" style="margin:0 -40px 0 0">
-                            <img src="/images/mapping-yellow.png" width="90" height="10" alt="도로소통정보범례(소통정보지체)" style="margin:0 -40px 0 0">
-                            <img src="/images/mapping-red.png" width="60" height="10" alt="도로소통정보범례(소통정보정체)" style="margin:0 0 0 0">
-                        </span>
-                        <span>정체</span>
-                    </dd>
-                </dl>
-                <!--모바일인 경우-->
-                <div class="trafficListM">
-                	<h3>모바일 도로목록</h3>
-                    <label for="trafficSelect"></label>
-                    <select class="trafficSelect" id="trafficSelect" onchange="atrdTrfInfo(this.value)">
-                        <option value="">도로선택</option>                            
-						<c:forEach var="item" items="${atrdNmList }">
-						<option value="${item.atrd_id }">${item.atrd_nm }</option>
-						</c:forEach>                     
-                    </select>
-                </div>
-                <div class="commu_info" id="trafficInfo">
-                	<h3>상하행 문자정보</h3>
-                    <dl>
-                        <dt><a href="javascript:void(0)" title="상행">상행</a></dt>
-                        <dd>
-                            <a href="javascript:void(0)" title="평균속도 : 0 km/h거리 : 0 km">
-                                <span>평균속도 : 0 km/h</span>
-                                <span>거리 : 0 km</span>
-                            </a>
-                        </dd>
-                    </dl>
-                    <dl>
-                        <dt>
-                            <a href="javascript:void(0)" title="하행">하행</a>
-                        </dt>
-                        <dd>
-                            <a href="javascript:void(0)" title="평균속도 : 0 km/h거리 : 0 km">
-                                <span>평균속도 : 0 km/h</span>
-                                <span>거리 : 0 km</span>
-                            </a>
-                        </dd>
-                    </dl>
-                </div>
-            </div>
-
-            <div class="mapContent">
-            	<h2>소통 정보 컨텐츠</h2>
-           		<div class="mapButton" id="contents">
-           			<h3>소통정보 방식선택</h3>
-                    <a href="javascript:typeOfMap()" title="소통정보 지도에서 보기" class="bt map">지도</a>
-                    <a href="javascript:typeOfLetters()" title="소통정보 문자로 보기" class="bt roadList">문자</a>
-                </div>
-                <div class="sideInfoList">
-                	<h3>도로 목록</h3>
-                    <div class="infoScroll">
-                   		
-                        <ul class="list control">
-							<c:forEach var="item" items="${atrdNmList }">
-							<li><a href="javascript:atrdTrfInfo('${item.atrd_id }','${item.atrd_nm }')" title="${item.atrd_nm }">${item.atrd_nm }</a></li>
-							</c:forEach>
-                        </ul>
-                    </div>
-                </div>
-
-                <aside class="mapRoadList" style="display: none;">
-                    <div class="tableStyle">
-                    	<h3 id="selectRoadFont">도로 문자정보</h3>
-                        <table class="table">
-                            <caption>문자소통정보</caption>
-							<thead>
-								<tr>
-									<th scope="col">방향/도로명/속도</th>
-									<th scope="col">진행방향</th>
-									<th scope="col">소통정보</th>
-								</tr>
-							</thead>
-                            <tbody id="mapOfLetters">
-                            </tbody>
-                        </table>
- 
-                    </div>
-
-                </aside>
-				<!-- 맵 div -->
-				<img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;top:25%;z-index:10"/>
-				<div id="map" class="mapArea" style="width: 100%; height: 750px; float:left; display:block;"><h3 id="selectRoad">지도소통정보</h3></div>
-				
-            </div>
-        </div>
-    </section>
-</div>
-    
-    <!--//contents-->
-<%@ include file="/WEB-INF/jsp/egovframework/include/daumApiKey.jsp" %>
-<script src="/js/main.js" type="text/javascript"></script>
-<script src="/js/common.js" type="text/javascript"></script>
-<script src="/js/traffic.js" type="text/javascript"></script>
-<script type="text/javascript">
-	_TrafficFlag = false;
-	setInterval(getVertexArr, 1000 * 60 * 5);
-	getVertexArr();
-	//간선도로를 선택하면 줌 레벨에 상,하향 색상을 바꿔준다..
-	daum.maps.event.addListener(_Map, 'zoom_changed', function() {
-		if(_AtrdId != null) showAtrdTrfInfo();
-	});
-	sideInfoList = true;
-
-</script>

src/main/webapp/WEB-INF/jsp/egovframework/traffic/realtimeNew.jsp

@@ -2,34 +2,44 @@
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 
 <style>
-.mapPop.traffic_LTC0,
-.mapPop.traffic_LTC2,
-.mapPop.traffic_LTC3,
-.mapPop.traffic_LTC1 {
-	position: absolute;top:181px !important;left:351px;z-index:999;
-}
-@media (max-width:900px) {
-	.mapPop.traffic_LTC0,
-	.mapPop.traffic_LTC2,
-	.mapPop.traffic_LTC3,
-	.mapPop.traffic_LTC1 {
-		top:131px !important;
-	}
-}
-@media (max-width: 768px) {
-	.mapPop.traffic_LTC0,
-	.mapPop.traffic_LTC2,
-	.mapPop.traffic_LTC3,
+    .mapPop.traffic_LTC0,
+    .mapPop.traffic_LTC2,
+    .mapPop.traffic_LTC3,
     .mapPop.traffic_LTC1 {
-		top:241px !important; left:0;
-	}
-}
+        position: absolute;top:170px;left:351px;z-index:999;
+    }
+    @media(max-width: 1300px){
+        .mapPop.traffic_LTC0,
+        .mapPop.traffic_LTC2,
+        .mapPop.traffic_LTC3,
+        .mapPop.traffic_LTC1{
+            top:240px;
+        }
+    }
+
+    @media (max-width:992px) {
+        .mapPop.traffic_LTC0,
+        .mapPop.traffic_LTC2,
+        .mapPop.traffic_LTC3,
+        .mapPop.traffic_LTC1 {
+            top:195px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .mapPop.traffic_LTC0,
+        .mapPop.traffic_LTC2,
+        .mapPop.traffic_LTC3,
+        .mapPop.traffic_LTC1 {
+            top:245px; left:0;
+        }
+    }
 </style>
 
 <!--contents-->
 <section class="main-container">
     <!-- 좌측목록 지도 영역 -->
-    <article class="left-Area">
+    <article class="left-Area traffic">
         <ul class="sub-Tab">
             <li class="on"><a href="/traffic/realtime.do">소통정보</a></li>
             <li><a href="/traffic/incd.do">돌발정보</a></li>
@@ -61,38 +71,27 @@
     </article>
     <!-- // 좌측목록 지도 영역 -->
     <!-- 서브 지도 영역 -->
-
-    <article class="searchBox">
-        <div class="searchBox-cont">
-            <div class="upload">
-                <span>평균속도 : 0 km</span>
-                <span>거리 : 0 m</span>
-            </div>
-            <div class="dnload">
-                <span>평균속도 : 0 km</span>
-                <span>거리 : 0 m</span>
-            </div>
-        </div>
-        <div class="stmaptab">
-            <a href="javascript:typeOfMap()" title="소통정보 지도에서 보기" class="bt map on mapBtn">지도</a>
-            <a href="javascript:typeOfLetters()" title="소통정보 문자로 보기" class="bt roadList testBtn">문자</a>
-        </div>
-    </article>
-    <script>
-        $(".testBtn").on('click',function (){
-            $(".testBtn").addClass("on");
-            $(".mapBtn").removeClass("on");
-        })
-        $(".mapBtn").on('click',function (){
-            $(".mapBtn").addClass("on");
-            $(".testBtn").removeClass("on");
-        })
-    </script>
     <div id="trafficInfo"></div>
     <img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;top:40%;z-index:10"/>
-    <div class="mapArea">
-        <div class="mapContent traffic">
-            <div id="map" class="mapArea" style="top:0px !important;"></div>
+    <div class="mapArea atrd">
+        <article class="searchBox">
+            <div class="searchBox-cont">
+                <div class="upload">
+                    <span>평균속도 : 0 km</span>
+                    <span>거리 : 0 m</span>
+                </div>
+                <div class="dnload">
+                    <span>평균속도 : 0 km</span>
+                    <span>거리 : 0 m</span>
+                </div>
+            </div>
+            <div class="stmaptab">
+                <a href="javascript:typeOfMap()" title="소통정보 지도에서 보기" class="bt map on mapBtn">지도</a>
+                <a href="javascript:typeOfLetters()" title="소통정보 문자로 보기" class="bt roadList textBtn">문자</a>
+            </div>
+        </article>
+        <div class="mapContent traffic map">
+            <div id="map" class="atrd-map"></div>
         </div>
         <div class="mapContent traffic mapRoadList" style="display: none;">
             <div class="road_info-box sub-road_info">
@@ -120,4 +119,14 @@
     });
     sideInfoList = true;
 
+    $(".textBtn").on('click',function (){
+        $(".textBtn").addClass("on");
+        $(".mapBtn").removeClass("on");
+    })
+    $(".mapBtn").on('click',function (){
+        $(".mapBtn").addClass("on");
+        $(".textBtn").removeClass("on");
+    })
+</script>
+
 </script>

src/main/webapp/WEB-INF/jsp/egovframework/traffic/realtimeNew_org.jsp

@@ -1,110 +0,0 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
-
-<!--contents-->
-<section class="main-container">
-    <!-- 좌측목록 지도 영역 -->
-    <article class="left-Area">
-        <ul class="sub-Tab">
-            <li class="on"><a href="/traffic/realtime.do">소통정보</a></li>
-            <li><a href="/traffic/incd.do">돌발정보</a></li>
-            <li><a href="/traffic/cctv.do">CCTV</a></li>
-            <li><a href="/traffic/vms.do">VMS</a></li>
-        </ul>
-        <div class="left-list">
-            <div class="road-list">
-                <button class="list-button" type="button" id="show" onclick="dis()">
-                    도로목록
-                </button>
-                <ul class="dis">
-                    <c:forEach var="item" items="${atrdNmList }">
-                        <li><a href="javascript:atrdTrfInfo('${item.atrd_id }','${item.atrd_nm }')" title="${item.atrd_nm }">${item.atrd_nm }</a></li>
-                    </c:forEach>
-                </ul>
-            </div>
-            <div class="traffic-list-select">
-                <select id="atrdList" onchange="if(this.value) location.href=(this.value);">
-                    <option value="">도로목록</option>
-                    <c:forEach var="item" items="${atrdNmList }">
-                        <option value="javascript:atrdTrfInfo('${item.atrd_id }','${item.atrd_nm }')">${item.atrd_nm }</option>
-                    </c:forEach>
-                </select>
-                <label for="atrdList">도로목록</label>
-            </div>
-
-        </div>
-
-    </article>
-    <!-- // 좌측목록 지도 영역 -->
-    <!-- 서브 지도 영역 -->
-
-    <!--쓰이는곳이 있는듯하다 지우면 안나옴-->
-    <div id="trafficInfo"></div>
-    <img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;top:40%;z-index:10"/>
-    <div id="map" class="mapArea" style="top: 181px !important;">
-        <div class="searchBox" style="display:none !important;">
-            <div class="searchBox-cont">
-                <div class="upload">
-                    <span>평균속도 : 0 km/h</span>
-                    <span>거리 : 0 km</span>
-                </div>
-                <div class="dnload">
-                    <span>평균속도 : 0 km/h</span>
-                    <span>거리 : 0 km</span>
-                </div>
-            </div>
-
-            <div class="stmaptab">
-                <a href="javascript:typeOfMap()" title="소통정보 지도에서 보기" class="bt map">지도</a>
-                <a href="javascript:typeOfLetters()" title="소통정보 문자로 보기" class="bt roadList">문자</a>
-            </div>
-        </div>
-    </div>
-
-
-    <div class="mapArea" style="top: 181px !important;">
-        <div class="searchBox " style="top: -61px !important;">
-            <div class="searchBox-cont">
-                <div class="upload">
-                    <span>평균속도 : 0 km/h</span>
-                    <span>거리 : 0 km</span>
-                </div>
-                <div class="dnload">
-                    <span>평균속도 : 0 km/h</span>
-                    <span>거리 : 0 km</span>
-                </div>
-            </div>
-
-            <div class="stmaptab">
-                <a href="javascript:typeOfMap()" title="소통정보 지도에서 보기" class="bt map">지도</a>
-                <a href="javascript:typeOfLetters()" title="소통정보 문자로 보기" class="bt roadList">문자</a>
-            </div>
-        </div>
-
-        <div class="mapContent traffic mapRoadList" style="display: none;">
-            <div class="road_info-box sub-road_info">
-                <ul class="traffic-road-list " id="mapOfLetters">
-                </ul>
-            </div>
-        </div>
-    </div>
-
-
-</section>
-
-<!--//contents-->
-<%@ include file="/WEB-INF/jsp/egovframework/include/daumApiKey.jsp" %>
-<script src="/js/main.js" type="text/javascript"></script>
-<script src="/js/common.js" type="text/javascript"></script>
-<script src="/js/traffic.js" type="text/javascript"></script>
-<script type="text/javascript">
-    _TrafficFlag = false;
-    setInterval(getVertexArr, 1000 * 60 * 5);
-    getVertexArr();
-    //간선도로를 선택하면 줌 레벨에 상,하향 색상을 바꿔준다..
-    daum.maps.event.addListener(_Map, 'zoom_changed', function() {
-        if(_AtrdId != null) showAtrdTrfInfo();
-    });
-    sideInfoList = true;
-
-</script>

src/main/webapp/WEB-INF/jsp/egovframework/traffic/vmsNew.jsp

@@ -3,7 +3,7 @@
 <!--contents-->
 <section class="main-container">
     <!-- 좌측목록 지도 영역 -->
-    <article class="left-Area">
+    <article class="left-Area traffic">
         <ul class="sub-Tab">
             <li ><a href="/traffic/realtime.do">소통정보</a></li>
             <li><a href="/traffic/incd.do">돌발정보</a></li>

src/main/webapp/WEB-INF/jsp/egovframework/trafficStats/infoNew.jsp

@@ -32,7 +32,7 @@
                     <label for="sTimeType"></label>
                 </div>
                 <div class="condition2 statisticList">
-                    <label for="statisticSearch" class="statisticSearch">검색선택</label>
+                    <label>검색선택</label>
                     <span>
                         <select id="infoYear" name="year" class="statis-search-select" style="width: 70px;">
                             <c:forEach begin="2022" end="${thisYear}" varStatus="status">
@@ -103,7 +103,7 @@
     </article>
     <!-- // 좌측목록 지도 영역 -->
     <!-- 서브 지도 영역 -->
-    <article class="mapArea">
+    <article class="mapArea statistics">
         <div class="mapContent statistics">
             <div class="road_info-box sub-road_info">
                 <img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:45%;top:30%;z-index:10"/>

src/main/webapp/WEB-INF/jsp/egovframework/trafficStats/trafficStats.jsp

@@ -41,7 +41,6 @@
 									<option value="${item.LINK_ID }">${item.STR_NAME } &rarr; ${item.END_NAME }</option>
 									</c:forEach>
 								</select>
-								<label for="">검색선택</label>
 								<select class="select w80" id="statsStrtYear" tabIndex="20">
 									<c:forEach begin="${thisYear - 1}" end="${thisYear}" varStatus="status">
 									<option value="${status.current}" <c:if test="${status.current == thisYear}">selected</c:if>>${status.current}</option>

src/main/webapp/common/css/Exsting_style.css

@@ -31,12 +31,13 @@
 /*실시간교통 문자 아이콘색상*/
 .traffic소통원활{background-color:#0ebe39 !important;}/*소통원활*/
 .traffic부분지체{background-color:#fea100 !important;}/*서행지체*/
+.traffic서행{background-color:#fea100 !important;}/*서행지체*/
 .traffic정체{background-color:#f90000 !important;}/*정체*/
 .traffic사고{background-color:#000 !important; color:#ffe400 !important;}/*사고*/
 
 
 /*admin접속통계*/
-.adminStatsWrap {margin-top:35px;}
+.adminStatsWrap {margin-top:35px; overflow: auto;}
 /*.adminStatsWrap .searchBox {padding:15px 20px;border:solid 1px #d4d4d4;background-color:#f6f6f6;}*/
 .adminStatsWrap .searchBox select {width:100px;height:35px;line-height:35px;padding:0 30px 0 10px;color:#333;border:solid 1px #ccc;background:#fff url("../images/select_arrow_small.png") right 10px top 13px no-repeat;}
 .adminStatsWrap .searchBox .bt {display:inline-block;margin-left:5px;height:33px;padding:0 20px;line-height:33px;background-color:#00bbbe;color:#fff;border-radius:3px;vertical-align:middle;}
@@ -88,15 +89,28 @@
 .mapPop.traffic_LTC2,
 .mapPop.traffic_LTC3,
 .mapPop.traffic_LTC1 {
-	position: absolute;top:121px;left:351px;z-index:999;
+    position: absolute;top:121px;left:351px;z-index:999;
 }
-@media (max-width: 768px) {
-	.mapPop.traffic_LTC0,
-	.mapPop.traffic_LTC2,
-	.mapPop.traffic_LTC3,
+
+.mapPop.traffic_LTC0.off,
+.mapPop.traffic_LTC2.off,
+.mapPop.traffic_LTC3.off,
+.mapPop.traffic_LTC1.off {
+    position: absolute;top:121px;left:60px;z-index:999;
+}
+
+
+@media (max-width:992px) {
+    .mapPop.traffic_LTC0.off,
+    .mapPop.traffic_LTC2.off,
+    .mapPop.traffic_LTC3.off,
+    .mapPop.traffic_LTC1.off,
+    .mapPop.traffic_LTC0,
+    .mapPop.traffic_LTC2,
+    .mapPop.traffic_LTC3,
     .mapPop.traffic_LTC1 {
-		top:164px !important; left:0px;
-	}
+        top:75px;
+    }
 }
 @media (max-width:900px) {
     /*.systemWrapper .systemInfo li dl {width:100%;}*/
@@ -107,12 +121,21 @@
     .map_popup_cctv > dl > dl{height:calc(100% - 56px);}
     .map_popup_cctv dl dt .lctn_nm {font-size: 20px;}
     .map_popup_cctv dl dt .restTime{font-size:15px; width: 160px;}
-	.mapPop.traffic_LTC0,
-	.mapPop.traffic_LTC2,
-	.mapPop.traffic_LTC3,
-	.mapPop.traffic_LTC1 {
-		top:71px;
-	}
+}
+
+@media (max-width: 768px) {
+    .mapPop.traffic_LTC0,
+    .mapPop.traffic_LTC2,
+    .mapPop.traffic_LTC3,
+    .mapPop.traffic_LTC1 {
+        top:165px; left:0px;
+    }
+    .mapPop.traffic_LTC0.off,
+    .mapPop.traffic_LTC2.off,
+    .mapPop.traffic_LTC3.off,
+    .mapPop.traffic_LTC1.off{
+        top:115px; left:0px;
+    }
 }
 
 @media (max-width:640px) {
@@ -144,7 +167,7 @@
 /* cctv팝업 M */
 .map_popup_cctv_m {width:100%;height:600px;left:0px;top:0px;
     position: relative;
-    top: 400px;
+    /*top: 400px;*/
     background: #3a3a3a;
     /*background-image:url(/images/cctv/cctvback.png);*/
     clear:both;margin:0 auto;z-index:9;box-shadow:3px 3px 3px #353535}
@@ -159,8 +182,14 @@
     line-height: 50px;
     position: relative;
     left: 10px;
-    color:#c8c8c8;padding-left:5px;font-size:30px;font-family:굴림,Gulim;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
-.map_popup_cctv_m dl dt .restTime{position:absolute;top:10px;color:#c8c8c8;font-size:30px;font-family:굴림,Gulim;right:75px;}
+    color:#c8c8c8;
+    padding-left:5px;
+    font-size:15px;
+    font-family:굴림,Gulim;
+    text-overflow:ellipsis;
+    overflow:hidden;
+    white-space:nowrap;}
+.map_popup_cctv_m dl dt .restTime{position:absolute;height: 50px; line-height: 50px;color:#c8c8c8;font-size:15px;font-family:굴림,Gulim;right:60px;}
 .map_popup_cctv_m dl dt a{position:absolute;top:9px;right:15px;}
 .map_popup_cctv_m dl dt a img{z-index:20; height: 40px;}
 .map_popup_cctv_m dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}

src/main/webapp/common/css/Exsting_style_org.css

@@ -0,0 +1,199 @@
+@charset "utf-8";
+/*!* Reset *!*/
+/** {box-sizing:border-box;}*/
+/*html,body{width:100%;height:100%;padding:0px; margin:0px;background:#e8edf4;}*/
+/*body {font-size:14px;font-family:'Nanum Barun Gothic',Helvetica,sans-serif;line-height:100%;letter-spacing:-1px;}*/
+/*body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td { margin:0; padding:0; -webkit-text-size-adjust:none;line-height:100%;}*/
+/*img,fieldset{border:0}*/
+/*ul,ol,li{list-style:none;}*/
+/*h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }*/
+/*hr {display:none;}*/
+
+/*!*전체메뉴  css 충돌로 주석처리함*!*/
+/*!*a, a:link {color:inherit;text-decoration:none;}*!*/
+/*!*a:visited {color:inherit;}*!*/
+/*!*a:hover, a:active {color:inherit;text-decoration:none;}*!*/
+
+
+/*address {font-style:normal; font-weight:normal;}*/
+/*legend,caption {font-size:18px;padding:10px;text-align:left;}*/
+/*input,textarea,select,button,table { font-size:inherit;font-family:inherit;line-height:inherit; }!**font-size:100%;*!*/
+/*input,select {vertical-align:middle}*/
+/*textarea, input {outline-color:-moz-use-text-color;outline-style:none;outline-width:medium;}*/
+/*textarea {resize:none;}*/
+/*table {border-collapse:collapse}*/
+
+/*button {border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:0 none;background-color:transparent;border-radius:0;}*/
+
+/*article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block;margin:0;}*/
+/*command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr { display: inline; }*/
+
+/*실시간교통 문자 아이콘색상*/
+.traffic소통원활{background-color:#0ebe39 !important;}/*소통원활*/
+.traffic부분지체{background-color:#fea100 !important;}/*서행지체*/
+.traffic정체{background-color:#f90000 !important;}/*정체*/
+.traffic사고{background-color:#000 !important; color:#ffe400 !important;}/*사고*/
+
+
+/*admin접속통계*/
+.adminStatsWrap {margin-top:35px;}
+/*.adminStatsWrap .searchBox {padding:15px 20px;border:solid 1px #d4d4d4;background-color:#f6f6f6;}*/
+.adminStatsWrap .searchBox select {width:100px;height:35px;line-height:35px;padding:0 30px 0 10px;color:#333;border:solid 1px #ccc;background:#fff url("../images/select_arrow_small.png") right 10px top 13px no-repeat;}
+.adminStatsWrap .searchBox .bt {display:inline-block;margin-left:5px;height:33px;padding:0 20px;line-height:33px;background-color:#00bbbe;color:#fff;border-radius:3px;vertical-align:middle;}
+.adminStatsWrap .statsList {margin-top:35px;}
+.adminStatsWrap .statsList .tabUI li {float:left;height:35px;width:80px;margin-right:1px;border:solid 1px #d4d4d4;border-bottom:0;text-align:center;line-height:35px;cursor:pointer;}
+.adminStatsWrap .statsList .tabUI a li.on {background-color:#00bbbe;color:#fff !important; border:solid 1px #00bbbe;}
+.adminStatsWrap .statsList table {width:100%;border-top:solid 1px #d4d4d4;border-left:solid 1px #d4d4d4;}
+.adminStatsWrap .statsList table thead th {text-align: center;height:35px;background-color:#f6f6f6;font-size:12px;border-right:solid 1px #d4d4d4;border-bottom:solid 1px #d4d4d4;color:#666;}
+.adminStatsWrap .statsList table tbody td {height:35px;font-size:12px;border-right:solid 1px #d4d4d4;border-bottom:solid 1px #d4d4d4;text-align:center;color:#666;}
+.adminStatsWrap .statsList table tbody th {padding-left:5px;text-align:left;border-bottom:solid 1px #d4d4d4;border-right:solid 1px #d4d4d4;font-size:11px;background-color:#e8edf4;color:#666;}
+
+
+
+/* 소통정보 마우스오버 오버레이 */
+.mapPop {width:300px;padding:10px;border:solid 1px #e1e1e1;border-radius:5px;box-shadow: 2px 2px 2px #d4d4d4;background-color:#fff;}
+.mapPop .head {position:relative;height:30px;border-bottom:solid 1px #24b841; font-weight: bold;}
+.mapPop .head span {display:inline-block;}
+.mapPop .head span.title {font-size:18px;padding-top:5px}
+
+.mapPop .head span.traffic {position:absolute;top:0;right:0;width:55px;height:20px;text-align:center;font-size:13px;line-height:20px;background-color:#24b841;color:#fff;border-radius:3px;}
+.mapPop .cont {padding:10px 0 0 0;}
+.mapPop .cont dl dt {margin-bottom:10px;color:#666;line-height:20px;}
+.mapPop .cont dl dd {color:#666;line-height:20px;}
+
+.traffic_LTC0 .head {border-color:#888888 !important;color:#000;}
+.traffic_LTC0 .head span.traffic {background-color:#888888 !important;color:#eee;}
+.traffic_LTC1 .head {border-color:#24b841 !important;color:#000;}
+.traffic_LTC1 .head span.traffic {background-color:#24b841 !important;color:#eee;}
+.traffic_LTC2 .head {border-color:#fead0e !important;color:#000;}
+.traffic_LTC2 .head span.traffic {background-color:#fead0e !important;color:#eee;}
+.traffic_LTC3 .head {border-color:#ED240D !important;color:#000;}
+.traffic_LTC3 .head span.traffic {background-color:#ED240D !important;color:#eee;}
+/* cctv팝업 */
+.map_popup_cctv {width:calc(100% - 6px);min-width:320px;min-height:278px;height:calc(100% - 6px);left:0px;top:0px;background-color:#2e2c2c; clear:both;margin:0 auto;z-index:9;box-shadow:3px 3px 3px #353535}
+.map_popup_cctv > dl {width: 100%;height: 100%;}
+.map_popup_cctv > dl > dl {width: 100%; height: calc(100% - 56px);}
+.map_popup_cctv dl dt {font-weight:600;display: flex; align-items: center; width: 100%; min-height: 30px; height: 50px;}
+.map_popup_cctv dl dt #hlsPlayEx{width:320px;height:auto}
+.map_popup_cctv dl dt video{width:100%}
+.map_popup_cctv dl dt p {display:inline-block; margin: 0;}
+.map_popup_cctv dl dt .lctn_nm {width:auto;color:#c8c8c8;padding-left:15px;font-size:20px;font-family:굴림,Gulim;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
+.map_popup_cctv dl dt .restTime{margin-left: auto; margin-right: 5px; width: 170px; min-width:125px; color:#c8c8c8;font-size:16px;font-family:굴림,Gulim}
+.map_popup_cctv dl dt a{margin-right: 5px;}
+.map_popup_cctv dl dt a img{z-index:20; height: 80%; width:80%;}
+.map_popup_cctv dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}
+.map_popup_cctv dl .video-box{margin: 0;width: 100%;height: 100%;}
+.map_popup_cctv dl .video-js{width: 95%;height: 97%;}
+.mapPop.traffic_LTC0,
+.mapPop.traffic_LTC2,
+.mapPop.traffic_LTC3,
+.mapPop.traffic_LTC1 {
+    position: absolute;top:121px;left:351px;z-index:999;
+}
+
+@media (max-width:992px) {
+    .mapPop.traffic_LTC0,
+    .mapPop.traffic_LTC2,
+    .mapPop.traffic_LTC3,
+    .mapPop.traffic_LTC1 {
+        top:75px;
+    }
+}
+@media (max-width:900px) {
+    /*.systemWrapper .systemInfo li dl {width:100%;}*/
+    /*.systemWrapper .systemInfo li figure {position:relative;top:auto;margin-top:10px;text-align:center;}*/
+    /* 팝업 div */
+    .popDetail {display:none;}
+    .map_popup_cctv dl dt {height:50px}
+    .map_popup_cctv > dl > dl{height:calc(100% - 56px);}
+    .map_popup_cctv dl dt .lctn_nm {font-size: 20px;}
+    .map_popup_cctv dl dt .restTime{font-size:15px; width: 160px;}
+}
+
+@media (max-width: 768px) {
+    .mapPop.traffic_LTC0,
+    .mapPop.traffic_LTC2,
+    .mapPop.traffic_LTC3,
+    .mapPop.traffic_LTC1 {
+        top:165px; left:0px;
+    }
+}
+
+@media (max-width:640px) {
+    .map_popup_cctv dl dt {height:30px}
+    .map_popup_cctv > dl > dl{height:calc(100% - 36px);}
+    .map_popup_cctv dl dt .lctn_nm {font-size: 16px;padding-left: 5px;}
+    .map_popup_cctv dl dt .restTime{font-size:12px; width: 135px;}
+}
+
+/*.map_popup_cctv {width:328px;height:278px;left:0px;top:0px;background-image:url(/images/cctv/cctvback.png);clear:both;margin:0 auto;z-index:9;box-shadow:3px 3px 3px #353535}*/
+/*!*.map_popup_cctv dl {padding:1px 5px 5px 2px}*!*/
+/*.map_popup_cctv dl dt {font-weight:600;margin:0 0 0 0;padding:5px 0 5px 0;}*/
+/*.map_popup_cctv dl dt #hlsPlayEx{width:320px;height:auto}*/
+/*.map_popup_cctv dl dt video{width:100%}*/
+/*.map_popup_cctv dl dt p {display:inline-block}*/
+/*.map_popup_cctv dl dt .lctn_nm {width:180px;color:#c8c8c8;padding-left:5px;font-size:15px;font-family:굴림,Gulim;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}*/
+/*.map_popup_cctv dl dt .restTime{position:absolute;top:10px;color:#c8c8c8;font-size:12px;font-family:굴림,Gulim}*/
+/*.map_popup_cctv dl dt a{position:absolute;top:5px;right:10px;}*/
+/*.map_popup_cctv dl dt a img{z-index:20}*/
+/*.map_popup_cctv dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}*/
+
+/*@media (max-width:900px) {*/
+/*    .systemWrapper .systemInfo li dl {width:100%;}*/
+/*    .systemWrapper .systemInfo li figure {position:relative;top:auto;margin-top:10px;text-align:center;}*/
+/*    !* 팝업 div *!*/
+/*    .popDetail {display:none;}*/
+/*}*/
+
+/* cctv팝업 M */
+.map_popup_cctv_m {width:100%;height:600px;left:0px;top:0px;
+    position: relative;
+    top: 400px;
+    background: #3a3a3a;
+    /*background-image:url(/images/cctv/cctvback.png);*/
+    clear:both;margin:0 auto;z-index:9;box-shadow:3px 3px 3px #353535}
+/*.map_popup_cctv dl {padding:1px 5px 5px 2px}*/
+.map_popup_cctv_m dl dt {font-weight:600;height:60px;margin:0 0 0 0;padding:5px 0 5px 0;}
+.map_popup_cctv_m dl dt #hlsPlayEx{width:320px;height:auto}
+.map_popup_cctv_m dl dt video{width:100%}
+.map_popup_cctv_m dl dt p {display:inline-block}
+.map_popup_cctv_m dl dt .lctn_nm {
+    width: 255px;
+    height: 50px;
+    line-height: 50px;
+    position: relative;
+    left: 10px;
+    color:#c8c8c8;padding-left:5px;font-size:30px;font-family:굴림,Gulim;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
+.map_popup_cctv_m dl dt .restTime{position:absolute;top:10px;color:#c8c8c8;font-size:30px;font-family:굴림,Gulim;right:75px;}
+.map_popup_cctv_m dl dt a{position:absolute;top:9px;right:15px;}
+.map_popup_cctv_m dl dt a img{z-index:20; height: 40px;}
+.map_popup_cctv_m dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}
+
+
+/* VMS팝업 */
+.map_popup_vms {clear:both;top:50%;left:0;right:0;width:200px;margin:0 auto;padding-top:5px;background-image:url(/images/vms/vmsview.png);z-index:9;box-shadow:5px 5px 5px #353535}
+.map_popup_vms dl {padding:3px 5px 5px 5px}
+.map_popup_vms dl dt {font-weight:600;margin:0 0 0 0}
+.map_popup_vms dl dt p {display:inline-block;color:#c8c8c8;text-align:left;}
+.map_popup_vms dl dt .vmsMenu{float:right}
+.map_popup_vms dl dt .vmsPrev{float:right}
+.map_popup_vms dl dt .vmsNext{float:right}
+.map_popup_vms dl dt .vmsPause{float:right}
+.map_popup_vms dl dt .vmsClose{float:right}
+.map_popup_vms dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}
+.map_popup_vms dl dd .nodata{text-align:center;background-color:black;width:220px;height:50px;padding-top:20px;color:#c8c8c8}
+.map_popup_vms dl dd .vmsPic{display:none;height:100%}
+
+/* 돌발정보 인포윈도우 */
+.incdPop {width:325px;padding:10px;border:solid 1px #e1e1e1;border-radius:5px;box-shadow: 2px 2px 2px #d4d4d4;background-color:#fff;}
+.incdPop .head {position:relative;height:30px;border-bottom:solid 1px #d8240d;}
+.incdPop .head span {display:inline-block;}
+.incdPop .head span.title {font-size:15px;padding-top:5px;}
+.incdPop .head span.ellip {width:285px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height: 30px;}
+.incdPop .head img {position:absolute;right:5px;top:5px;cursor:pointer}
+.incdPop .cont {padding:10px 0 0 0;}
+.incdPop .cont dl dd {margin-bottom:5px;color:#666;line-height:20px;}
+.incdPop .cont dl dd p{margin-left:30px}
+
+.file-btn {display:flex; align-items: center;justify-content: center; margin-left: 10px;border: 1px solid #ccc; width: 80px; height: 36px;}
+.file-btn:hover {cursor: pointer; background-color: #eee;}

src/main/webapp/common/css/contents.css

@@ -1,30 +1,11 @@
-.main-container {
-    position: relative;
-    width: 100%;    
-    height: calc(100% - 90px);
-    padding-top: 120px;
-}
+
 .sub-container {
     position: relative;
-    width: 100%;    
+    width: 100%;
     min-height: calc(100% - 90px);
     padding-top: 120px;
 }
-.left-Area {
-    position: absolute;
-    z-index: 999;
-    left: 0;
-    top: 120px;
-    bottom: 0;
-    width: 350px;
-}
-.left-Tab {
-    position: absolute;
-    width: 60px;
-    height: 100%;
-    background: #fff;
-    border-right: solid 1px #ccc;
-}
+
 .left-Tab button {
     width: 60px;
     height: 60px;
@@ -59,11 +40,11 @@
 .left-Tab button.vms.on::before {
     background: url(/common/images/icon_vms_on.png) center center no-repeat;
 }
-.left-list {
-    position: absolute;
-    left: 60px;
-    width: 290px;
-    height: 100%;
+.left-Tab button.road::before {
+    background: url(/common/images/icon_road.png) center center no-repeat;
+}
+.left-Tab button.road.on::before {
+    background: url(/common/images/icon_road_on.png) center center no-repeat;
 }
 .list-button {
     width: 100%;
@@ -76,22 +57,22 @@
     align-items: center;
 }
 a:focus-visible {
-	outline: 3px solid #009EA5;
+    outline: 3px solid #009EA5;
 }
 a:focus:not(:focus-visible){
-	outline: none;
+    outline: none;
 }
 button:focus-visible {
-  outline: 3px solid #009EA5;
+    outline: 3px solid #009EA5;
 }
 button:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }
 button.sitemap:focus-visible {
-	outline: 3px solid #fff;
+    outline: 3px solid #fff;
 }
 button.sitemap:focus:not(:focus-visible) {
-	outline: none;
+    outline: none;
 }
 .list-button::after {
     content: "";
@@ -146,20 +127,7 @@ button.sitemap:focus:not(:focus-visible) {
 .traffic-list-select {
     display: none;
 }
-.mapArea {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    top: 120px;
-    left: 0;
-}
-.mapContent {    
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
+
 .mapControls {
     position: absolute;
     z-index: 10;
@@ -183,31 +151,56 @@ button.sitemap:focus:not(:focus-visible) {
     display: flex;
 }
 .mapContent.statistics {
-    left: 350px;
+    width: 100%;
+    height: 100%;
+}
+.mapArea.traffic {
+    width: calc(100% - 350px);
+    height: calc(100% - 50px);
+    margin-left: 350px;
+    position: relative;
+    margin-top : 50px;
+    top: 0;
+}
+
+.mapContent.traffic{
+    width: 100%;
+    height: calc(100% - 50px);
+    position: relative;
     top: 0;
 }
-.mapContent.traffic {
-    top: 60px;
+.atrd-map{
+    width: 100%;
+    height: 100%;
+}
+.mapContent.traffic.mapRoadList{
+    width: 100%;
+    height: calc(100% - 50px);
 }
-.searchBox {
-    position: absolute;
+.adminStatsWrap .searchBox {
+    height: 35px;
+    display: flex;
+    align-items: center;
+}
+.searchBox{
+    width: 100%;
+    height: 50px;
     z-index: 20;
-    left: 350px;
-    top: 120px;
-    right: 0;
     background: #f5f5f5;
     border-bottom: solid 1px #ddd;
+    display: flex;
 }
-.searchBox-cont {    
-    height: 60px;
-    padding: 0 15px;
+.searchBox-cont {
+    height: 50px;
+    padding: 0 10px;
     display: flex;
     align-items: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-.searchBox-cont>div {
-    font-size: 16px;
-    margin-right: 50px;
+.searchBox-cont > div {
+    font-size: 14px;
 }
 .searchBox-cont>div::before {
     display: inline-block;
@@ -225,19 +218,31 @@ button.sitemap:focus:not(:focus-visible) {
     content: "상행";
     background: #1C69FF;
 }
+.upload > span:nth-child(1),
+.dnload > span:nth-child(1) {
+    margin-right: 10px;
+}
+.dnload,
+.upload{
+    margin-right: 10px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
 .dnload::before {
     content: "하행";
     background: #EF3E6C;
 }
 .stmaptab {
-    position: absolute;
-    top: 15px;
-    right: 15px;
     display: flex;
+    align-items: center;
+    margin-left: auto;
+    margin-right: 10px;
 }
 .stmaptab a {
     display: block;
     width: 80px;
+    height: 30px;
     line-height: 30px;
     text-align: center;
     background: #fff;
@@ -248,52 +253,40 @@ button.sitemap:focus:not(:focus-visible) {
     background: #009EA5;
     color: #fff;
 }
-
 #gtx-trans{display: none}
-@media (max-width: 1250px) { 
-	.searchBox-cont{
-		height: 80px;
-    	display: flex;
-    	align-items: flex-start;
-    	flex-direction: column;
-    	justify-content: center;
-	}
-	.stmaptab{
-		flex-direction: column;
-		top: 5px;
-	}
-	.upload{
-		margin-bottom: 10px;
-	}
-	.stmaptab > a:nth-child(1) {
-		margin-bottom: 5px;
-	}
-}
-@media (max-width: 992px) {
-    .left-Area {
-        top: 75px;
-        border: 0;
+@media (max-width: 1300px) {
+    .searchBox{height: 120px !important;}
+    .mapArea.traffic{margin-top: 120px;}
+    .searchBox-cont{
+        height: 120px;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        justify-content: center;
     }
-    .mapArea {
-        top: 75px;
+    .stmaptab{
+        flex-direction: column;
+        justify-content: center;
     }
-    .mapContent.traffic {
-        top: 80px;
+    /*.upload{*/
+    /*    margin-bottom: 10px;*/
+    /*}*/
+    .stmaptab > a:nth-child(1) {
+        margin-bottom: 5px;
     }
-    .searchBox {top: 75px;}
-    .searchBox-cont {    
-        height: 80px;
-        padding: 10px;
-        display: block;
+    .mapContent.traffic.mapRoadList{
+        height: calc(100% - 120px);
     }
-    .searchBox-cont>div.upload {
-        margin-bottom: 10px;
-    }
-    .stmaptab {
-        top: 10px;
-        right: 15px;
-        display: block;
+}
+@media (max-width: 992px) {
+    .searchBox {top: 75px;}
+    .searchBox-cont {
+        height: 120px;
     }
+    /*.searchBox-cont>div.upload {*/
+    /*    margin-bottom: 10px;*/
+    /*}*/
+
     .stmaptab a {
         width: 60px;
         height: 30px;
@@ -304,13 +297,9 @@ button.sitemap:focus:not(:focus-visible) {
     }
 }
 @media (max-width: 768px) {
-    .main-container {height: 100%;}
-    .left-Area {
-        top: 65px;
-        bottom: unset;
-        width: 100%;
-    }
-    .left-Tab {        
+
+    /*.main-container {height: 100%;}*/
+    .left-Tab {
         width: 100%;
         height: 50px;
         left: 0;
@@ -339,7 +328,7 @@ button.sitemap:focus:not(:focus-visible) {
     }
     .sub-Tab + .left-list {
         width: 100%;
-        height: 50px;
+        height: auto;
     }
     .list-button {
         height: 50px;
@@ -353,21 +342,20 @@ button.sitemap:focus:not(:focus-visible) {
         height: 50px;
     }
     .traffic-list-select select {
-        width: 100%; 
-        height: 50px; 
+        width: 100%;
+        height: 50px;
         color: #fff;
-        outline: 0; 
-        background: #000 url(../images/arrow_dropdown.png) right 10px center no-repeat; 
+        outline: 0;
+        background: #000 url(../images/arrow_dropdown.png) right 10px center no-repeat;
         border: 0;
         padding: 0 15px;
     }
-    .mapArea {
-        top: 100px;
-        left: 0;
-    }
-    .mapContent.statistics {
-        left: 0;
-        top: 230px;
+    /*.mapArea {*/
+    /*    top: 165px;*/
+    /*    left: 0;*/
+    /*}*/
+    .mapArea.atrd{
+        height: calc(100% - 165px);
     }
     .mapContent.traffic {
         left: 0;
@@ -377,22 +365,45 @@ button.sitemap:focus:not(:focus-visible) {
         bottom: 0;
     }
     .searchBox {
-        left: 0;
-        top: 160px;
+        width: 100%;
+        height: 80px !important;
+    }
+    .adminStatsWrap .searchBox {
+        height: 35px !important;
+    }
+    .searchBox-cont{
+        height: 80px;
     }
     .searchBox-cont>div::before {
         margin-right: 5px;
+        margin-left: 5px;
     }
-    .searchBox-cont>div {
-        font-size: 14px;
+    .searchBox-cont > div {
+        font-size: 13px;
+    }
+    .atrd-name{
+        display: none !important;
+    }
+    /*.road_info-box.sub-road_info {*/
+    /*    margin-top: 0 !important;*/
+    /*    margin-left: 0 !important;*/
+    /*    height: calc(100% - 85px);*/
+    /*}*/
+    .mapContent.traffic.mapRoadList{
+        height: calc(100% - 80px);
+    }
+}
+@media (max-width: 680px) {
+    .mapArea.statistics {
+        height: calc(100% - 338px);
     }
 }
 
 /* 도로상태 팝업 */
 #mapTrafficPop{
-	position:absolute; top:280px; left:50%; width:300px; transform: translateX(-50%); /*height:145px;*/background-color:#fff;
-	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
-	box-shadow : 5px 5px 10px  rgba(0, 0, 0, .3), -1px 1px 10px  rgba(0, 0, 0, .1), 1px -1px 10px  rgba(0, 0, 0, .1), -1px -1px 5px  rgba(0, 0, 0, .1); 
+    position:absolute; top:280px; left:50%; width:300px; transform: translateX(-50%); /*height:145px;*/background-color:#fff;
+    -webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
+    box-shadow : 5px 5px 10px  rgba(0, 0, 0, .3), -1px 1px 10px  rgba(0, 0, 0, .1), 1px -1px 10px  rgba(0, 0, 0, .1), -1px -1px 5px  rgba(0, 0, 0, .1);
 }
 .traffic-pop-inner{padding:10px;}
 .map-area-tit{overflow:hidden; border-bottom:1px solid #0060af; color:#555; font-size:14px; font-weight:400}
@@ -414,23 +425,61 @@ button.sitemap:focus:not(:focus-visible) {
 /* 소통정보 도로 목록 */
 .traffic-road-list li{height:41px;  border-bottom:1px dashed #ccc; padding:8px 5%; overflow:hidden;}
 .traffic-road-list li a{display:block; overflow:hidden;}
-.traffic-road-list li .road_info{float:left; width:70%;}
+.traffic-road-list li .road_info{float:left; width: auto; display: flex;}
 .traffic-road-list li .road_info p{line-height:1.6em; }
-.traffic-road-list li .road_info p strong{color:#EF3E6C; font-weight:400;}
-.traffic-road-list li .road_info p .arrow-icon{margin:0 15px; }
+.atrd-top,
+.atrd-bottom{
+    width: auto;
+    display: flex;
+    align-items: center;
+    height: 35px;
+    font-weight: bold;
+}
+.atrd-name{
+    height: 25px;
+    padding: 9px;
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    border-radius: 12px;
+    background: #a5a5a5;
+    /*font-weight: bold;*/
+    font-size: 14px !important;
+    color: white;
+}
+.atrd-front {
+    display: flex;
+    margin-left: 10px;
+}
+.atrd-end,
+.atrd-front{
+    width: 160px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-weight: bold;
+}
+.traffic-road-list li .road_info .atrd-top div{
+    width: 310px;
+}
+.traffic-road-list li .road_info div strong{color:#EF3E6C; width: 70px; display: flex; justify-content: right; align-items: center;}
+.atrd-top strong{
+    display: none !important;
+}
+.traffic-road-list li .road_info div .arrow-icon{margin:0 10px; }
 .traffic-road-list li .road_info p .arrow-icon img{vertical-align:middle; margin-top:-2px}
-.traffic-road-list li .road-traffic{float:right; width:22%; margin-left:8%; padding:12px 0;}
+.traffic-road-list li .road-traffic{float:right; padding:5px 0;}
 .traffic-road-list li .road-traffic span{
-	display:block; width:60px; height:25px; color:#fff; text-align:center; background-color:#ccc; line-height:25px; margin:0px auto;
-	-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;
+    display:block; width:65px; height:30px; color:#fff; text-align:center; background-color:#ccc; line-height:30px; margin:0px auto;
+    -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px; font-weight: bold;
 }
 .no-info-box{text-align:center; width:100%;}
 .no-info-box p{color:#333; padding-top:17px; font-size:19px; }
 .no-info-box p strong{color:#dd6161; font-size:19px; font-weight:400}
 
 .road_info-box {padding: 30px;}
-.road_info-box.sub-road_info{height: 100%;overflow-y: auto;margin-top: 0px; position:relative;padding: 0 30px 30px 30px;}
-.sub-road_info.road_info-box li{padding:0; height:auto; max-width:1200px; margin:0px auto; border-bottom:1px solid #ccc;}
+.road_info-box.sub-road_info{height: 100%;overflow-y: auto; position:relative;padding: 0 5px 5px 5px;}
+.sub-road_info.road_info-box li{padding:0 10px; width: 100%; height:auto; border-bottom:1px solid #ccc;}
 .sub-road_info.road_info-box li:first-child{border-top:2px solid #009EA5}
 .sub-road_info.road_info-box li a{padding:0 2%;}
 .sub-road_info.road_info-box li a:hover{background-color:#eee;}
@@ -472,6 +521,32 @@ button.sitemap:focus:not(:focus-visible) {
 
 @media (max-width: 768px) {
     .sub-road_info.road_info-box li p{line-height:36px;}
+    .atrd-front {margin-left: 0;}
+    .traffic-road-list li .road_info{
+        width: 100%;
+    }
+    .traffic-road-list li .road_info .atrd-top div {
+        width: calc(100% - 70px);
+    }
+    .atrd-top {
+        width: 100%;
+    }
+    .atrd-end,
+    .atrd-front {
+        width: calc(50% - 18px);
+    }
+    .searchBox-cont{
+        padding: 0px;
+    }
+    .dnload, .upload{
+        margin-right: 5px;
+    }
+    .upload > span:nth-child(1), .dnload > span:nth-child(1) {
+        margin-right: 5px;
+    }
+    .stmaptab a {
+        width: 40px;
+    }
 }
 
 /* -------- 공지사항 -------- */
@@ -501,8 +576,8 @@ button.sitemap:focus:not(:focus-visible) {
 .board-list span.blue {display:inline-block;background-color:#00bbbe;color:#fff;line-height:22px;padding:0 10px 0 10px;border-radius:4px; margin-right: 5px;}
 .board-list img {vertical-align:middle}
 .width15.board-file {
-	overflow: hidden;
-	text-overflow: ellipsis;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .board-no, .board-count {width: 10%;}
 .board-title {width: 45%;}
@@ -513,9 +588,9 @@ button.sitemap:focus:not(:focus-visible) {
 /* paging */
 .paging {width:100%;margin:20px auto 20px auto;text-align:center}
 .paging p {
-	display:inline-block;vertical-align: middle;width:30px;height:30px;line-height:22px;
-	margin:0 10px 0 10px;border:1px solid #ccc;
-	text-align:center;font-weight:600;font-size:19px;
+    display:inline-block;vertical-align: middle;width:30px;height:30px;line-height:22px;
+    margin:0 10px 0 10px;border:1px solid #ccc;
+    text-align:center;font-weight:600;font-size:19px;
 }
 .paging p a {display:block;color:#aaa;line-height:28px;}
 .paging > a {display:inline-block;width:30px;height:30px;line-height:30px;}
@@ -529,16 +604,15 @@ button.sitemap:focus:not(:focus-visible) {
 /*.board-view p {display:inline-block}*/
 .board-view .writer {display:inline-block;padding:0 25px 0 17px}
 .board-view .visited {display:inline-block;padding:0 25px 0 22px}
-.board-view .day {width: 150px; padding:0 10px 0 10px}
+.board-view .day {margin-left: auto;}
 .view-form .download{
-	width: calc(100% - 150px);
-	height: 100%;
-	display: flex;
-	align-items: center;
+    width: calc(100% - 150px);
+    height: 100%;
+    display: flex;
 }
 /*.board-view .day {display:inline-block;padding:0 25px 0 17px}*/
 /*.board-view .download {position: absolute;}*/
-.board-view .download a {width:calc(100% / 3 - 20px); margin-right: 20px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; color:#00bbbe; text-decoration:underline}
+.board-view .download a {width:auto;max-width: calc(100% / 3 - 20px); margin-right: 5px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; color:#00bbbe; text-decoration:underline}
 .board-view .download a:hover {color:#00bbbe;text-decoration:underline}
 .board-view .reple {margin:15px auto 0;padding:15px;border-top:1px solid #ddd;background-color:#fff}
 .board-view .reple dt {position:relative;font-weight:600;line-height:26px;padding-right:80px;}
@@ -564,12 +638,12 @@ button.sitemap:focus:not(:focus-visible) {
     .board-count {display: none;}
     .board-list .board-view {display: none;}
     .board-view .download {position: relative; flex-direction: column;}
-    .board-view .download a {width: calc(100% - 15px); margin: 0 0 0 15px}
+    .board-view .download a {max-width: calc(100% - 15px);}
     /*.board-view .download a {padding: 0 0 10px 0;}*/
-    .board-view .view-form {text-align:left;}    
+    .board-view .view-form {text-align:left;}
     .board-view .writer {display:inline-block;padding:10px 10px 0 0;}
     .board-view .visited {display:inline-block;padding:10px 10px 0 0;}
-    .board-view .day {display:inline-block;padding:10px 10px 0 0;}
+    .board-view .day {display:inline-block;}
 
     /* paging */
     .paging {margin:10px auto 10px auto;}
@@ -672,7 +746,7 @@ button.sitemap:focus:not(:focus-visible) {
 
 
 /* -------- 사이트맵 -------- */
-.offcanvas-top {height: 40vh;}
+.offcanvas-top {height: 305px;}
 .offcanvas-header {border-bottom: solid 1px #ccc;}
 .off-title {font-size: 24px; color: #000;}
 .sitemap-wrap {display: flex; align-items: flex-start;}
@@ -681,7 +755,8 @@ button.sitemap:focus:not(:focus-visible) {
 .sitemap-wrap li {border-bottom: solid 1px #ccc;}
 .sitemap-wrap li a {display: block; font-size: 16px; padding: 15px 10px; font-weight: 700}
 
-@media (max-width: 1024px) {    
+@media (max-width: 1024px) {
+
     .sub-container {
         padding-top: 75px;
     }
@@ -725,11 +800,11 @@ button.sitemap:focus:not(:focus-visible) {
     .waybox dl.way1, .waybox dl.way2 {width: 100%;}
     .waybox dl.way3 {width: 100%;}
     /* 관련사이트 */
-	.relate-list{width:96%;}
+    .relate-list{width:96%;}
     .relate-list li {width: 50%;}
-	.relate-list .relate-site-logo span{font-size:12px;}
+    .relate-list .relate-site-logo span{font-size:12px;}
 
-    /* 사이트맵 */	
+    /* 사이트맵 */
 }
 
 /*** admin ***/
@@ -762,8 +837,8 @@ input[type="button"]{cursor:pointer;}
 .board-write-form dl dd {width:80%}
 .board-write-form dl dd p {margin:5px 0 0 0;line-height:35px}
 .board-form-btn {width:100%;margin:30px auto 0;text-align:center}
-.board-form-btn .send {max-width:30%;min-width:150px;height:60px;border:none;background-color:#00bbbe;color:#fff;font-size:15px} 
-.board-form-btn .cancel {max-width:30%;min-width:150px;height:60px;border:none;background-color:#aaa;color:#fff;font-size:15px} 
+.board-form-btn .send {max-width:30%;min-width:150px;height:60px;border:none;background-color:#00bbbe;color:#fff;font-size:15px}
+.board-form-btn .cancel {max-width:30%;min-width:150px;height:60px;border:none;background-color:#aaa;color:#fff;font-size:15px}
 .board-form-btn .send:hover {background-color:#00bbbe}
 .board-form-btn .cancel:hover {background-color:#555;}
 /* -------- 관리자 - 팝업창관리 -------- */
@@ -792,39 +867,39 @@ input[type="button"]{cursor:pointer;}
 @media all and ( max-width:1024px ) {
     .board-head {height: 2px; overflow: hidden;}
     .board-list dl dd {height:46px;line-height:46px;}
-	/* 관리자 - 공지사항쓰기 */
-	.board-write-form{max-width:auto; width:96%; padding:20px 2%;}
-	/* 관리자 - 팝업창관리 */
-	.board-list .board-tit{width:60%; font-size:15px; font-weight:600;}
-	.board-list .board-term{clear:both;float:none; display:block; margin-left:90px; width:70%; text-align:left;}
-	.board-list .board-term:before{float:none; content:"기간 : "; color:#888}
-	.board-list .board-use{position:absolute; left: 0; top: 46px; width:50px; text-align:left;}
-	.board-list .board-use span{width:80px; text-align:center;}
-	.board-list .board-use span.useY{width:80px; text-align:center;}
-	.board-list .board-file,.board-list .board-day{display:none;}
+    /* 관리자 - 공지사항쓰기 */
+    .board-write-form{max-width:auto; width:96%; padding:20px 2%;}
+    /* 관리자 - 팝업창관리 */
+    .board-list .board-tit{width:60%; font-size:15px; font-weight:600;}
+    .board-list .board-term{clear:both;float:none; display:block; font-size: 13px; margin-left:70px; width:70%; text-align:left;}
+    .board-list .board-term:before{float:none; content:"기간 : "; color:#888}
+    .board-list .board-use{position:absolute; left: 0; top: 46px; width:50px; text-align:left;}
+    .board-list .board-use span{width:60px; text-align:center;}
+    .board-list .board-use span.useY{width:60px; text-align:center;}
+    .board-list .board-file,.board-list .board-day{display:none;}
     .board-list .board-day:before{float:none; content:"등록일 : "; color:#888}
-	.board-list .board-manage{float:none; display:block; width:15%; position:absolute; right:2%; line-height: 1;}
-	.board-list .board-manage{
-		top: 0px;
-		display: flex;
-		flex-direction: column;
-		height: 95px;
-		justify-content: space-between;
-		padding: 10px 0;
-	}
-	.board-list .board-manage input[type="button"]{padding:2px 0; width:100%; height: 30px; line-height: 1; margin-bottom:3px; }
-	
+    .board-list .board-manage{float:none; display:block; width:15%; position:absolute; right:2%; line-height: 1;}
+    .board-list .board-manage{
+        top: 0px;
+        display: flex;
+        flex-direction: column;
+        height: 95px;
+        justify-content: space-between;
+        padding: 10px 0;
+    }
+    .board-list .board-manage input[type="button"]{padding:2px 0; width:100%; height: 30px; line-height: 1; margin-bottom:3px; }
+
 }
 @media all and ( max-width:639px ) {
-	/* 관리자 - 로그인 */
-	.login-form{max-width:auto; width:100%; margin:0px auto; padding: 30px 15px;}
-	.login-form ul{width:96%; max-width:400px; margin: 0;}
-	.login-form h2{font-size:15px}
-	/* 관리자 - 공지사항쓰기 */
-	.board-write-form dl dt{text-indent:3px;}
-	/* 관리자 - 팝업창쓰기 */
-	.board-form{position:relative;}
-	.view-form .useY{width: 30px;}
+    /* 관리자 - 로그인 */
+    .login-form{max-width:auto; width:100%; margin:0px auto; padding: 30px 15px;}
+    .login-form ul{width:96%; max-width:400px; margin: 0;}
+    .login-form h2{font-size:15px}
+    /* 관리자 - 공지사항쓰기 */
+    .board-write-form dl dt{text-indent:3px;}
+    /* 관리자 - 팝업창쓰기 */
+    .board-form{position:relative;}
+    .view-form .useY{width: 30px;}
 }
 
 .condition-box {
@@ -833,6 +908,7 @@ input[type="button"]{cursor:pointer;}
     background: #fff;
     border-right: solid 1px #ccc;
     padding: 20px;
+    overflow: auto;
 }
 .condition-box>div>label {
     display: block;
@@ -850,8 +926,8 @@ input[type="button"]{cursor:pointer;}
     text-align: center;
     margin-top: 5px;
 }
-.btn-box > button { 
-    flex: 1;   
+.btn-box > button {
+    flex: 1;
     height: 36px;
     border: none;
     background-color: #aaa;
@@ -887,7 +963,7 @@ input[type="button"]{cursor:pointer;}
         height: auto;
         border-right: 0;
         padding: 10px;
-        border-bottom: solid 1px #ccc;        
+        border-bottom: solid 1px #ccc;
     }
     .condition-box>div>label {
         margin: 5px 0;
@@ -898,7 +974,7 @@ input[type="button"]{cursor:pointer;}
     }
     .condition2 {
         width: 100%;
-        margin: 0 10px 5px 0;        
+        margin: 0 10px 5px 0;
     }
     .btn-box {
         width: 50%;
@@ -973,11 +1049,20 @@ input[type="button"]{cursor:pointer;}
     .service-con {flex-wrap: wrap;}
     .service-con li {width: calc(50% - 20px); flex: unset; margin:10px;}
     .service-con li dd {height: 240px;}
+    .atrd-top strong{
+        display: flex !important;
+    }
+    .atrd-bottom strong {
+        display: none !important;
+    }
+    .traffic-road-list li .road_info {
+        flex-direction: column;
+    }
 }
 @media all and ( max-width:639px ) {
     .center-con1 img {width: 100%;}
     .service-con li {width: 100%; margin:5px;}
-    .service-con li dd {height: auto;}    
+    .service-con li dd {height: auto;}
     .service-con li dd>div {
         position: relative;
         bottom: unset;
@@ -994,33 +1079,33 @@ input[type="button"]{cursor:pointer;}
 .service-img li img {width: 100%; height: calc(100% - 62px);}
 @media all and ( max-width:1250px ) {
     /* 소개 - 센터안내 */
-	.intro-inner-con{width:100%; margin:0px auto;}
-	.center-con1-left,.center-con1-right{float:none; width:100%; text-align:center;}
-	.center-con1-left img,.center-con1-right img{width:100%; max-width:500px; vertical-align:top;}
-	.center-con2 li{flex: unset; width:100%;height:auto;text-align:left; overflow:hidden; padding: 20px;}
-	.center-con2 li .icon{float:left; display:table; width:15%; margin-right:5%; text-align:center;} 
-	.center-con2 li .icon span{display:table-cell;  height:80px; vertical-align:middle;}
-	.center-con2 li .icon img{width:100%; max-width:120px;}
-	.center-con2 li .center-con2-txt{float:left; width:80%;}
-	.center-con2 li .center-con2-txt strong{position:static; display:block; padding-top:2%; margin-bottom: 5px;}
-	.center-con2 li .center-con2-txt p{padding:10px 0 0 0; }
-	.center-con2 li .center-con2-txt p span{margin-right:5%; margin-bottom: 5px;}
-	.center-con2 li .center-con2-txt p span:before{content:"·"; padding-right:1%;}
+    .intro-inner-con{width:100%; margin:0px auto;}
+    .center-con1-left,.center-con1-right{float:none; width:100%; text-align:center;}
+    .center-con1-left img,.center-con1-right img{width:100%; max-width:500px; vertical-align:top;}
+    .center-con2 li{flex: unset; width:100%;height:auto;text-align:left; overflow:hidden; padding: 20px;}
+    .center-con2 li .icon{float:left; display:table; width:15%; margin-right:5%; text-align:center;}
+    .center-con2 li .icon span{display:table-cell;  height:80px; vertical-align:middle;}
+    .center-con2 li .icon img{width:100%; max-width:120px;}
+    .center-con2 li .center-con2-txt{float:left; width:80%;}
+    .center-con2 li .center-con2-txt strong{position:static; display:block; padding-top:2%; margin-bottom: 5px;}
+    .center-con2 li .center-con2-txt p{padding:10px 0 0 0; }
+    .center-con2 li .center-con2-txt p span{margin-right:5%; margin-bottom: 5px;}
+    .center-con2 li .center-con2-txt p span:before{content:"·"; padding-right:1%;}
     /* 소개 - 서비스소개 */
     .service-img li h3 {font-size: 14px;}
     .service-img li p {font-size: 12px;}
 }
 @media all and ( max-width:639px ) {
-	/* 소개 - 센터소개 */
-	.intro-inner-con h2{font-size:18px; padding:0 0 13px 0;}
-	.sub-txt{font-size:20px; line-height: 1.4;}
-	.center-con1-right p{font-size:14px; line-height:24px;}
+    /* 소개 - 센터소개 */
+    .intro-inner-con h2{font-size:18px; padding:0 0 13px 0;}
+    .sub-txt{font-size:20px; line-height: 1.4;}
+    .center-con1-right p{font-size:14px; line-height:24px;}
     .center-con1 p{line-height:20px; font-size:14px;}
     .center-con2 li .icon {}
-	.center-con2 li{padding: 15px;display: flex;}
-	.center-con2 li .center-con2-txt{width:100%;}
-	.center-con2 li .center-con2-txt strong{font-size:14px;}
-	.center-con2 li .center-con2-txt p{font-size:14px}
+    .center-con2 li{padding: 15px;display: flex;}
+    .center-con2 li .center-con2-txt{width:100%;}
+    .center-con2 li .center-con2-txt strong{font-size:14px;}
+    .center-con2 li .center-con2-txt p{font-size:14px}
     .center-con2 li .center-con2-txt p span {display: block;}
     /* 소개 - 서비스소개 */
     .service-img ul {flex-wrap: wrap; margin-bottom: 10px;}
@@ -1041,7 +1126,7 @@ input[type="button"]{cursor:pointer;}
     height: 1px;
     background: #ccc;
 }
-.tab-btn p {margin-right: 5px;} 
+.tab-btn p {margin-right: 5px;}
 .tab-btn a {
     display: inline-block;
     border: 1px solid #ccc;
@@ -1057,8 +1142,8 @@ input[type="button"]{cursor:pointer;}
     border: solid 1px #000;
     color: #fff;
 }
-@media all and ( max-width:639px ) {    
-    .tab-btn p {margin-bottom: 5px;} 
+@media all and ( max-width:639px ) {
+    .tab-btn p {margin-bottom: 5px;}
     .tab-btn::after {display: none;}
 }
 
@@ -1083,59 +1168,59 @@ input[type="button"]{cursor:pointer;}
 .stats-tit-tbl .stats-tit{border-top:1px solid #222; background-color: #eee;}
 .stats-tit-tbl td>span {display: block;min-width: 40px;}
 #statsContent {
-	float:right; 
+    float:right;
     width: calc(100% - 150px);
     height: 640px;
-	background: #fff;
-	overflow-x: auto;
-}
-#scroller {	
-	-webkit-tap-highlight-color: rgba(0,0,0,0);
-	width: 100%;
-	height: 151px;
-	-webkit-transform: translateZ(0);
-	-moz-transform: translateZ(0);
-	-ms-transform: translateZ(0);
-	-o-transform: translateZ(0);
-	transform: translateZ(0);
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	-webkit-text-size-adjust: none;
-	-moz-text-size-adjust: none;
-	-ms-text-size-adjust: none;
-	-o-text-size-adjust: none;
-	text-size-adjust: none;
+    background: #fff;
+    overflow-x: auto;
+}
+#scroller {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    width: 100%;
+    height: 151px;
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    -o-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-text-size-adjust: none;
+    -moz-text-size-adjust: none;
+    -ms-text-size-adjust: none;
+    -o-text-size-adjust: none;
+    text-size-adjust: none;
 }
 
 #statsContent ul {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	width: 100%;
-	text-align: center;
-	overflow:hidden;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    text-align: center;
+    overflow:hidden;
 }
 
 #statsContent li {
-	display: block;
-	float: left;
-	width: 4%;
-	height: 49px;
-	line-height:49px;
-	border-left: 1px solid #ccc;
-	border-bottom: 1px solid #ccc;
-	background-color: #fafafa;
-	font-size: 14px;
+    display: block;
+    float: left;
+    width: 4%;
+    height: 49px;
+    line-height:49px;
+    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    background-color: #fafafa;
+    font-size: 14px;
 }
 #statsContent .time-tit li {
-	border-top:1px solid #222;
-	height:49px;
-	background-color:#eee
+    border-top:1px solid #222;
+    height:49px;
+    background-color:#eee
 }
-	
+
 .stats-content-tbl th,.stats-content-tbl td{border-left:1px solid #ccc; border-bottom:1px solid #ccc; width:50px; height:49px; text-align:center ; font-size:17.5px;}
 
 .stats-content-tbl th{background-color:#eee; height:49px;}

src/main/webapp/common/css/contents_org.css

@@ -0,0 +1,1313 @@
+.main-container {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 90px);
+    padding-top: 120px;
+}
+.fixed-top{
+    width: 100%;
+    height: 121px;
+}
+.sub-container {
+    position: relative;
+    width: 100%;
+    min-height: calc(100% - 90px);
+    padding-top: 120px;
+}
+.left-Area {
+    position: absolute;
+    z-index: 999;
+    left: 0;
+    top: 120px;
+    bottom: 0;
+    width: 350px;
+}
+.left-Tab {
+    position: absolute;
+    width: 60px;
+    height: 100%;
+    background: #fff;
+    border-right: solid 1px #ccc;
+}
+.left-Tab button {
+    width: 60px;
+    height: 60px;
+    font-size: 12px;
+}
+.left-Tab button.on {
+    color: #fff;
+    background: #EF3E6C;
+}
+.left-Tab button::before {
+    content: "";
+    display: block;
+    height: 24px;
+}
+
+
+.left-Tab button.outbreak::before {
+    background: url(/common/images/icon_outbreak.png) center center no-repeat;
+}
+.left-Tab button.outbreak.on::before {
+    background: url(/common/images/icon_outbreak_on.png) center center no-repeat;
+}
+.left-Tab button.cctv::before {
+    background: url(/common/images/icon_cctv.png) center center no-repeat;
+}
+.left-Tab button.cctv.on::before {
+    background: url(/common/images/icon_cctv_on.png) center center no-repeat;
+}
+.left-Tab button.vms::before {
+    background: url(/common/images/icon_vms.png) center center no-repeat;
+}
+.left-Tab button.vms.on::before {
+    background: url(/common/images/icon_vms_on.png) center center no-repeat;
+}
+.left-list {
+    position: absolute;
+    left: 60px;
+    width: 290px;
+    height: 100%;
+}
+.list-button {
+    width: 100%;
+    height: 60px;
+    background: #333;
+    color: #fff;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+a:focus-visible {
+    outline: 3px solid #009EA5;
+}
+a:focus:not(:focus-visible){
+    outline: none;
+}
+button:focus-visible {
+    outline: 3px solid #009EA5;
+}
+button:focus:not(:focus-visible) {
+    outline: none;
+}
+button.sitemap:focus-visible {
+    outline: 3px solid #fff;
+}
+button.sitemap:focus:not(:focus-visible) {
+    outline: none;
+}
+.list-button::after {
+    content: "";
+    width: 24px;
+    height: 24px;
+    background: url(../images/arrow_dropdown.png);
+}
+.sub-Tab + .left-list {
+    left: 0;
+    width: 350px;
+    height: calc(100% - 50px);
+}
+.sub-Tab {
+    display: flex;
+    background: #fff;
+    border-right: solid 1px #ccc;
+}
+.sub-Tab li {
+    flex: 1;
+    text-align: center;
+    border-bottom: solid 1px #ccc;
+}
+.sub-Tab li>a {
+    display: block;
+    height: 47px;
+    line-height: 45px;
+}
+.sub-Tab li.on {
+    border-bottom: solid 3px #EF3E6C;
+}
+.sub-Tab li.on>a {
+    color: #EF3E6C;
+}
+.road-list {
+    display: block;
+    height: 100%;
+}
+.road-list ul {
+    height: calc(100% - 60px);
+    background: #fff;
+    border-right: solid 1px #ccc;
+    overflow-y: auto;
+}
+.road-list li {
+    border-bottom: solid 1px #ddd;
+    background: url(../images/icon_next.png) right 10px center no-repeat;
+}
+.road-list a {
+    display: block;
+    padding: 15px;
+}
+.traffic-list-select {
+    display: none;
+}
+.mapArea {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 120px;
+    left: 0;
+}
+.mapContent {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+.mapControls {
+    position: absolute;
+    z-index: 10;
+    top: 10px;
+}
+.mapControls1 {
+    right:90px;
+}
+.mapControls2 {
+    right:15px;
+}
+.mapControls ul {
+    margin-bottom: 20px;
+}
+.mapControls li {width: 60px; height:30px; line-height:30px; text-align:center; background: #fff; border:1px solid #ccc; margin-top: -1px; margin-left: -1px;}
+.mapControls li a {display:block; color:#555; font-size:12px;}
+.mapControls li:first-child {margin-top:0;}
+.mapControls li.select {background-color:#000;}
+.mapControls li.select a {color:#fff;}
+.mapControls1 ul {
+    display: flex;
+}
+.mapContent.statistics {
+    left: 350px;
+    top: 0;
+}
+.mapArea.traffic {
+    width: calc(100% - 350px);
+    height: calc(100% - 50px);
+    margin-left: 350px;
+    position: relative;
+    margin-top : 50px;
+    top: 0;
+}
+.atrd-map{
+    width: calc(100%  - 350px);
+    margin-left: 350px;
+    height: calc(100% - 50px);
+    margin-top : 50px;
+}
+.mapContent.traffic{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: 0;
+}
+.mapContent.traffic.mapRoadList{
+    width: 100%;
+    height: calc(100% - 50px);
+}
+.searchBox{
+    width: calc(100% - 350px);
+    height: 50px;
+
+}
+.searchBox {
+    position: absolute;
+    z-index: 20;
+    left: 350px;
+    top: 120px;
+    right: 0;
+    background: #f5f5f5;
+    border-bottom: solid 1px #ddd;
+}
+.searchBox-cont {
+    height: 50px;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+}
+
+.searchBox-cont>div {
+    font-size: 16px;
+    margin-right: 50px;
+}
+.searchBox-cont>div::before {
+    display: inline-block;
+    vertical-align: middle;
+    color: #fff;
+    font-size: 14px;
+    line-height: 22px;
+    height: 24px;
+    border-radius: 12px;
+    width: 50px;
+    text-align: center;
+    margin-right: 10px;
+}
+.upload::before {
+    content: "상행";
+    background: #1C69FF;
+}
+.dnload::before {
+    content: "하행";
+    background: #EF3E6C;
+}
+.stmaptab {
+    position: absolute;
+    top: 9px;
+    right: 15px;
+    display: flex;
+}
+.stmaptab a {
+    display: block;
+    width: 80px;
+    line-height: 30px;
+    text-align: center;
+    background: #fff;
+    border:solid 1px #ccc;
+    margin-left: -1px;
+}
+.stmaptab a.on {
+    background: #009EA5;
+    color: #fff;
+}
+
+#gtx-trans{display: none}
+@media (max-width: 1250px) {
+    .atrd-map{
+        margin-top: 80px;
+        height: calc(100% - 80px);
+    }
+    .searchBox{height: 80px !important;}
+    .mapArea.traffic{margin-top: 80px;}
+    .searchBox-cont{
+        height: 80px;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        justify-content: center;
+    }
+    .stmaptab{
+        flex-direction: column;
+        top: 5px;
+    }
+    .upload{
+        margin-bottom: 10px;
+    }
+    .stmaptab > a:nth-child(1) {
+        margin-bottom: 5px;
+    }
+    .mapContent.traffic.mapRoadList{
+        height: calc(100% - 80px);
+    }
+    .road_info-box.sub-road_info{
+        margin-top: 80px !important;
+    }
+}
+@media (max-width: 992px) {
+
+    .fixed-top{height: 70px;}
+    .left-Area {
+        top: 75px;
+        border: 0;
+    }
+    .mapArea {
+        top: 75px;
+    }
+    .searchBox {top: 75px;}
+    .searchBox-cont {
+        height: 80px;
+        padding: 10px;
+        display: block;
+    }
+    .searchBox-cont>div.upload {
+        margin-bottom: 10px;
+    }
+    .stmaptab {
+        top: 10px;
+        right: 15px;
+        display: block;
+    }
+    .stmaptab a {
+        width: 60px;
+        height: 30px;
+        line-height: 28px;
+        font-size: 12px;
+        margin-left: 0;
+        margin-top: -1px;
+    }
+}
+@media (max-width: 768px) {
+    .atrd-map{
+        margin-top: 0;
+        margin-left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .fixed-top{height: 65px;}
+    .main-container {height: 100%;}
+    .left-Area {
+        top: 65px;
+        bottom: unset;
+        width: 100%;
+    }
+    .left-Tab {
+        width: 100%;
+        height: 50px;
+        left: 0;
+        display: flex;
+    }
+    .left-Tab button {
+        flex: 1;
+        line-height: 48px;
+        height: 50px;
+        font-size: 14px;
+    }
+    .left-Tab button::before {
+        display: inline-block;
+        vertical-align: middle;
+        width: 24px;
+        margin-right: 5px;
+    }
+    .sub-Tab {
+        border: 0;
+    }
+    .left-list {
+        width: 100%;
+        height: 50px;
+        top: 50px;
+        left: 0;
+    }
+    .sub-Tab + .left-list {
+        width: 100%;
+        height: 50px;
+    }
+    .list-button {
+        height: 50px;
+    }
+    .road-list {
+        display: none;
+    }
+    .traffic-list-select {
+        display: block;
+        background: #262626;
+        height: 50px;
+    }
+    .traffic-list-select select {
+        width: 100%;
+        height: 50px;
+        color: #fff;
+        outline: 0;
+        background: #000 url(../images/arrow_dropdown.png) right 10px center no-repeat;
+        border: 0;
+        padding: 0 15px;
+    }
+    .mapArea {
+        top: 165px;
+        left: 0;
+    }
+    .mapArea.atrd{
+        top: 242px;
+    }
+    .mapContent.statistics {
+        left: 0;
+        top: 230px;
+    }
+    .mapContent.traffic {
+        left: 0;
+    }
+    .mapControls {
+        top: unset;
+        bottom: 0;
+    }
+    .searchBox {
+        left: 0;
+        top: 165px;
+        width: 100%;
+    }
+    .searchBox-cont>div::before {
+        margin-right: 5px;
+    }
+    .searchBox-cont>div {
+        font-size: 14px;
+    }
+    .road_info-box.sub-road_info {
+        margin-top: 0 !important;
+        margin-left: 0 !important;
+    }
+    .mapContent.traffic.mapRoadList{
+        height: 100%;
+    }
+}
+
+/* 도로상태 팝업 */
+#mapTrafficPop{
+    position:absolute; top:280px; left:50%; width:300px; transform: translateX(-50%); /*height:145px;*/background-color:#fff;
+    -webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
+    box-shadow : 5px 5px 10px  rgba(0, 0, 0, .3), -1px 1px 10px  rgba(0, 0, 0, .1), 1px -1px 10px  rgba(0, 0, 0, .1), -1px -1px 5px  rgba(0, 0, 0, .1);
+}
+.traffic-pop-inner{padding:10px;}
+.map-area-tit{overflow:hidden; border-bottom:1px solid #0060af; color:#555; font-size:14px; font-weight:400}
+.map-area-tit.traffic-style1{border-bottom:1px solid #0ebe39}
+.map-area-tit.traffic-style2{border-bottom:1px solid #fea100}
+.map-area-tit.traffic-style3{border-bottom:1px solid #f90000}
+.map-area-tit span{float: right; display:block; width:60px; height:25px; line-height:23px; text-align:center; color:#fff; font-weight:400; font-size:12px; *display:inline;*zoom:1;}
+.map-area-tit span.time {color: #999; width: auto; line-height: 1;}
+.road-to-from-txt{line-height:26px; color:#555; font-size:14px; padding:5px 5px 10px 5px; }
+.road-traffic-stats{text-align:right;}
+.road-traffic-stats dt,.road-traffic-stats dd{display:inline-block; font-size:14px; *display:inline;*zoom:1;}
+.road-traffic-stats dt{padding-left:10px;}
+.road-traffic-stats dd strong{font-weight:500}
+/* CCTV 팝업 */
+.cctv-inner-con{width:100%; height:185px; margin-top:10px; -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px; background-color:#000; overflow:hidden;}
+
+
+
+/* 소통정보 도로 목록 */
+.traffic-road-list li{height:41px;  border-bottom:1px dashed #ccc; padding:8px 5%; overflow:hidden;}
+.traffic-road-list li a{display:block; overflow:hidden;}
+.traffic-road-list li .road_info{float:left; width:70%;}
+.traffic-road-list li .road_info p{line-height:1.6em; }
+.traffic-road-list li .road_info p strong{color:#EF3E6C; font-weight:400;}
+.traffic-road-list li .road_info p .arrow-icon{margin:0 15px; }
+.traffic-road-list li .road_info p .arrow-icon img{vertical-align:middle; margin-top:-2px}
+.traffic-road-list li .road-traffic{float:right; width:22%; margin-left:8%; padding:12px 0;}
+.traffic-road-list li .road-traffic span{
+    display:block; width:60px; height:25px; color:#fff; text-align:center; background-color:#ccc; line-height:25px; margin:0px auto;
+    -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;
+}
+.no-info-box{text-align:center; width:100%;}
+.no-info-box p{color:#333; padding-top:17px; font-size:19px; }
+.no-info-box p strong{color:#dd6161; font-size:19px; font-weight:400}
+
+.road_info-box {padding: 30px;}
+.road_info-box.sub-road_info{height: 100%;overflow-y: auto;margin-top: 50px; margin-left: 350px; position:relative;padding: 5px;}
+.sub-road_info.road_info-box li{padding:0; height:auto; max-width:1200px; margin:0px auto; border-bottom:1px solid #ccc;}
+.sub-road_info.road_info-box li:first-child{border-top:2px solid #009EA5}
+.sub-road_info.road_info-box li a{padding:0 2%;}
+.sub-road_info.road_info-box li a:hover{background-color:#eee;}
+.sub-road_info.road_info-box li p{float:left; margin-right:5%; line-height:49px;}
+.sub-road_info.road_info-box li .road-traffic{width:auto;}
+
+.info-road-list {
+    width: 100%;
+    margin-top: 30px;
+}
+.info-road-list th {
+    position: sticky;
+    top: 0;
+    background: #222;
+    color: #fff;
+    font-weight: 100;
+    text-align: center;
+    padding: 10px 0;
+    border-right: solid 1px #fff;
+}
+.info-road-list td {
+    text-align: center;
+    padding: 10px 0;
+    border-bottom: solid 1px #ddd;
+    border-right: dashed 1px #ddd;
+}
+.info-road-list tbody {
+    border-right: solid 1px #ddd;
+    border-left: solid 1px #ddd;
+}
+.info-road-list th:last-child,
+.info-road-list td:last-child {
+    border-right: 0;
+}
+.traffic1{background-color:#0ebe39 !important;}/*소통원활*/
+.traffic2{background-color:#fea100 !important;}/*서행지체*/
+.traffic3{background-color:#f90000 !important;}/*정체*/
+.traffic4{background-color:#000 !important; color:#ffe400 !important;}/*사고*/
+
+@media (max-width: 768px) {
+    .sub-road_info.road_info-box li p{line-height:36px;}
+}
+
+/* -------- 공지사항 -------- */
+/* search form */
+.board_search {text-align:right;margin:0 auto;height:50px}
+.board_search * {vertical-align:middle}
+.board_search select {border:1px solid #ddd; width:105px; padding:9px;max-height:37px;}
+.board_search input[type="text"] {border:1px solid #ddd; width:180px; padding:10px;}
+/* LIST */
+.board-form {min-width:320px;font-size:14px;padding:0 0 55px 0}
+.board-form .write-btn {position:absolute;bottom:95px;right:0;}
+.board-form .write-btn input {border:none;background-color:#000;padding:10px;font-size:14px;color:#fff;text-align:center;width:80px;cursor:pointer;border-radius:5px;}
+.board-form .write-btn input:hover {background-color:#00bbbe}
+.board-form .board-head {width:100%;border-top: solid 2px #333;border-bottom: solid 1px #ccc;text-align: center; background: #f5f5f5;}
+.board-form .board-head span {position:absolute;top:0;right:15px}
+.board-form .board-head dl {position:relative;overflow:hidden; display: flex;}
+.board-form .board-head dl dt {text-align:left;text-indent:15px}
+.board-form .board-head dl dd {text-align:center; line-height: 50px; font-size: 14px;}
+
+.board-list {clear:both;width:100%;text-align:center;color:#555;}
+.board-list dl {position: relative; overflow:hidden;border-bottom:1px solid #ccc;cursor:pointer}
+.board-list dl:hover {background-color:#f5f5f5}
+.board-list dl dd {position: relative; float:left;text-align:center;height:50px;line-height:50px; white-space: nowrap;}
+.board-list dl dd.board-title {text-align: left;}
+.board-list span{font-size: 12px;}
+.board-list span.red {display:inline-block;background-color:#e2946d;color:#fff;line-height:24px;padding:0 10px 0 10px;border-radius:4px}
+.board-list span.blue {display:inline-block;background-color:#00bbbe;color:#fff;line-height:22px;padding:0 10px 0 10px;border-radius:4px; margin-right: 5px;}
+.board-list img {vertical-align:middle}
+.width15.board-file {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.board-no, .board-count {width: 10%;}
+.board-title {width: 45%;}
+.board-writer {width: 10%;}
+.board-day {width: 20%;}
+.board-noti {width: 5%;}
+
+/* paging */
+.paging {width:100%;margin:20px auto 20px auto;text-align:center}
+.paging p {
+    display:inline-block;vertical-align: middle;width:30px;height:30px;line-height:22px;
+    margin:0 10px 0 10px;border:1px solid #ccc;
+    text-align:center;font-weight:600;font-size:19px;
+}
+.paging p a {display:block;color:#aaa;line-height:28px;}
+.paging > a {display:inline-block;width:30px;height:30px;line-height:30px;}
+.paging .active {border-bottom:2px solid #777;font-weight:600;font-size:15px}
+
+/* view */
+.board-view-head {width:100%;text-align:center;color:#000;font-size:18px;font-weight:700; border-top: solid 2px #333; border-bottom: solid 1px #ccc;padding: 15px; margin-top: 20px;}
+.board-view-head p {line-height: 24px;}
+.board-view {position:relative;padding:0; width: 100%; line-height:20px;border-bottom:1px solid #ddd}
+.board-view .view-form {height:calc(100% - 20px); display:flex; aling-items:center; padding:10px;border-bottom:1px solid #ddd;text-align:right; background: #f5f5f5;}
+/*.board-view p {display:inline-block}*/
+.board-view .writer {display:inline-block;padding:0 25px 0 17px}
+.board-view .visited {display:inline-block;padding:0 25px 0 22px}
+.board-view .day {margin-left: auto;}
+.view-form .download{
+    width: calc(100% - 150px);
+    height: 100%;
+    display: flex;
+}
+/*.board-view .day {display:inline-block;padding:0 25px 0 17px}*/
+/*.board-view .download {position: absolute;}*/
+.board-view .download a {width:calc(100% / 3 - 20px); overflow: hidden; text-overflow:ellipsis; white-space:nowrap; color:#00bbbe; text-decoration:underline}
+.board-view .download a:hover {color:#00bbbe;text-decoration:underline}
+.board-view .reple {margin:15px auto 0;padding:15px;border-top:1px solid #ddd;background-color:#fff}
+.board-view .reple dt {position:relative;font-weight:600;line-height:26px;padding-right:80px;}
+.board-view .reple input {margin:10px auto 0;border:1px solid #ddd;padding:9px}
+.board-view .reple textarea {margin:10px auto 0;border:1px solid #ddd;width:100%}
+.board-view .reple .reple-btn {position:absolute;top:0;right:0;}
+.board-view .reple .reple-btn input {border:none;padding:10px;color:#fff;background-color:#333}
+.board-view .reple .edit-btn {position:absolute;top:-10px;right:0;}
+.board-view .reple .edit-btn input {border:none;margin-left:3px;padding:5px;color:#fff;background-color:#ccc}
+.board-view .content{padding:20px 2% 30px;}/* 공지사항 - view */
+.prevnext {margin:15px 0 50px 0;font-size:14px; display: flex; justify-content:space-between; align-items: flex-start;}
+.prevnext span {display: inline-block;}
+.prevnext a {display: inline-block; border:1px solid #ccc;min-width:40px;padding:15px;font-weight:600;text-align:center;color:#777;background-color:#fff}
+.prevnext a:hover {text-decoration:none; color:#00bbbe;border:1px solid #00bbbe}
+
+@media (max-width: 768px) {
+    .road_info-box {padding: 15px;}
+    .board-noti {width: 15%;}
+    .board-title {width: 85%;}
+    .board-no,
+    .board-writer,
+    .board-day,
+    .board-count {display: none;}
+    .board-list .board-view {display: none;}
+    .board-view .download {position: relative; flex-direction: column;}
+    .board-view .download a {width: calc(100% - 15px);}
+    /*.board-view .download a {padding: 0 0 10px 0;}*/
+    .board-view .view-form {text-align:left;}
+    .board-view .writer {display:inline-block;padding:10px 10px 0 0;}
+    .board-view .visited {display:inline-block;padding:10px 10px 0 0;}
+    .board-view .day {display:inline-block;}
+
+    /* paging */
+    .paging {margin:10px auto 10px auto;}
+    .paging p {
+        display:inline-block;vertical-align: middle;width:24px;height:24px;line-height:22px;
+        margin:0 5px 0 5px;font-size:14px;}
+    .paging p>a {line-height: 22px;}
+    .paging > a {width:24px;height:24px;line-height:24px;}
+    .paging .active {font-size:14px}
+}
+.sub-container {
+    position: relative;
+    width: 100%;
+    padding-top: 120px;
+    min-height: calc(100% - 90px);
+}
+.contents-wrap {
+    position: relative;
+    margin: 0 auto;
+    max-width: 1200px;
+    padding: 50px 0;
+}
+.menu-history {
+    background: #f5f5f5;
+    height: 40px;
+}
+.menu-history ul {
+    display: flex;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 10px;
+}
+.menu-history a:before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 24px;
+    height: 24px;
+    background: url(../images/icon_next.png) no-repeat;
+    background-size: 24px;
+}
+.menu-history a.home:before {
+    background: url(../images/icon_home.png) center center no-repeat;
+    background-size: 16px;
+}
+.menu-history a {
+    line-height: 40px;
+    color: #777;
+}
+.title-box {
+    margin-bottom: 50px;
+    text-align: center;
+}
+.h2-title {
+    font-size: 40px;
+    line-height: 40px;
+    margin-bottom: 15px;
+    font-weight: bold;
+}
+.h3-title {
+    color: #000;
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+.title-info {
+    font-size: 20px;
+    color: #777;
+    text-align: center;
+    font-weight: 700;
+}
+.title-info>span {color: #00bbbe;}
+.location-map {
+    width: 100%; height: 450px; border: solid 1px #ddd; margin-bottom: 30px;
+}
+
+.waybox{display: flex; width: 100%; overflow: hidden;}
+.waybox dl{flex: 1; height:155px; border: 1px solid #dadada; padding:30px 20px; margin-right: 30px; float: left; text-align:center;}
+.waybox dl:last-child{margin-right: 0;}
+.waybox dt::before {
+    content: "";
+    display:inline-block;
+    vertical-align: middle;
+    width: 42px;
+    height: 42px;
+    margin-bottom: 5px;
+}
+.waybox dl.way1 dt:before{background: url(../images/way1.png) center 0 no-repeat; background-size:42px;}
+.waybox dl.way2 dt:before{background: url(../images/way2.png) center 0 no-repeat; background-size:42px;}
+.waybox dl.way3 dt:before{background: url(../images/way3.png) center 0 no-repeat; background-size:42px;}
+.waybox dt {font-size: 24px; margin-bottom: 10px;}
+.waybox dd {color: #777; font-size: 16px; line-height: 1.4; letter-spacing: -1px;}
+
+/* -------- 관련사이트 -------- */
+.relate-list{display: flex; flex-wrap: wrap; border-top:1px solid #ddd; border-left: solid 1px #ddd;}
+.relate-list li{width: 33.33%; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; text-align: center;}
+.relate-list .relate-site-logo{display:inline-block;}
+.relate-list .relate-site-logo img{height: 100%; margin:10px 0;}
+.relate-list li>p {border-top:1px solid #ddd; height:48px; line-height:48px; text-align: center;}
+.relate-list li>p>a{color:#00bbbe; font-size:16px }
+
+
+/* -------- 사이트맵 -------- */
+.offcanvas-top {height: 40vh;}
+.offcanvas-header {border-bottom: solid 1px #ccc;}
+.off-title {font-size: 24px; color: #000;}
+.sitemap-wrap {display: flex; align-items: flex-start;}
+.sitemap-wrap dl {flex: 1; margin: 10px;}
+.sitemap-wrap dt {font-size: 17px; font-weight: 700; color: #fff; padding: 15px 0; background: #00bbbe; text-align: center;}
+.sitemap-wrap li {border-bottom: solid 1px #ccc;}
+.sitemap-wrap li a {display: block; font-size: 16px; padding: 15px 10px; font-weight: 700}
+
+@media (max-width: 1024px) {
+    .sub-container {
+        padding-top: 75px;
+    }
+    .contents-wrap {
+        padding: 30px;
+    }
+    .h2-title {
+        font-size: 30px;
+        line-height: 30px;
+        margin-bottom: 10px;
+    }
+    .h3-title {
+        font-size: 18px;
+    }
+    .title-info {
+        font-size: 16px;
+    }
+    .waybox{flex-wrap: nowrap;}
+    .waybox dl{flex:unset; padding: 15px; margin-right: 15px;}
+    .waybox dl.way1, .waybox dl.way2 {width: 25%;}
+    .waybox dl.way3 {width: 50%;}
+    .waybox dd {font-size: 14px;}
+
+    /* 관련사이트 */
+    .relate-list{width:80%; margin:0px auto; border-bottom:0; border-right:0;}
+    .relate-list .relate-site-logo{float:none; width:100%; height:auto; box-sizing:border-box;}
+    .relate-list .relate-site-logo img{width:100%; max-width:128px; margin:5% 0;}
+}
+
+@media (max-width: 768px) {
+    .sub-container {
+        padding-top: 65px;
+        min-height: calc(100% - 122px);
+    }
+    .contents-wrap {
+        width: 100%;
+        padding: 20px 15px;
+    }
+    .waybox{flex-wrap: wrap;}
+    .waybox dl{height: auto; padding: 15px; margin-right: 0; margin-bottom: 10px;}
+    .waybox dl.way1, .waybox dl.way2 {width: 100%;}
+    .waybox dl.way3 {width: 100%;}
+    /* 관련사이트 */
+    .relate-list{width:96%;}
+    .relate-list li {width: 50%;}
+    .relate-list .relate-site-logo span{font-size:12px;}
+
+    /* 사이트맵 */
+}
+
+/*** admin ***/
+
+input[type="button"]{cursor:pointer;}
+/* -------- 관리자 - 로그인 -------- */
+.login-form{max-width:600px; margin:0px auto; padding:40px 0; width:100%; background: #f5f5f5;}
+.login-form h2{text-align:center; font-weight:400; font-size:18px; line-height: 28px;}
+.login-form h2 strong{font-weight:500; color:#008cff}
+.login-form ul {overflow:hidden;width:400px;min-width:320px;margin:30px auto;}
+.login-form ul li {float:left;}
+.login-form ul li>p {margin-bottom: 10px;}
+.login-form ul li.id-save{float:none; margin-bottom:10px;}
+.login-form ul li.id-save input {width: 20px; height: 20px; margin-right: 5px;}
+.login-form ul li .inoff {width:96.5%;height:40px; text-indent:10px; border:0; border:1px solid #ccc;}
+.login-form ul li .inoff:focus{height:40px; background-color:#fff;}
+.login-form .mt-01 {margin-top:-1px}
+.login-form .btn-login {width:100%;height:88px;background-color:#00bbbe;font-size:19px;color:#fff;border:none;}
+.login-form .btn-login:hover {background-color:#222}
+
+/* -------- 관리자 - 공지사항 -------- */
+/* write */
+.board-write-form {width:100%;min-width:320px;margin:20px auto;padding:20px 30px 40px 30px;border-top:1px solid #777;border-bottom:1px solid #ccc;background-color:#f5f5f5;}
+.board-write-form input {padding:0 10px;border-radius:3px; border:1px solid #ccc;;}
+.board-write-form textarea {width:90%;border:1px solid #ccc;padding:10px;border-radius:3px; resize:none;}
+.board-write-form dl {clear:both;overflow:hidden;}
+.board-write-form dl dt, .board-write-form dl dd {float:left;font-size:14px;padding:3px 0 3px 0;line-height:30px}
+.board-write-form dl dt {width:15%;text-indent:15px}
+.board-write-form dl dt span {display:inline-block;margin:0;font-weight:600;color:#00bbbe;}
+.board-write-form dl dd {width:80%}
+.board-write-form dl dd p {margin:5px 0 0 0;line-height:35px}
+.board-form-btn {width:100%;margin:30px auto 0;text-align:center}
+.board-form-btn .send {max-width:30%;min-width:150px;height:60px;border:none;background-color:#00bbbe;color:#fff;font-size:15px}
+.board-form-btn .cancel {max-width:30%;min-width:150px;height:60px;border:none;background-color:#aaa;color:#fff;font-size:15px}
+.board-form-btn .send:hover {background-color:#00bbbe}
+.board-form-btn .cancel:hover {background-color:#555;}
+/* -------- 관리자 - 팝업창관리 -------- */
+.width5{width: 5%;}
+.width10{width:10%;}
+.width15{width:15%;}
+.width20{width:20%;}
+.width30{width:30%;}
+.board-list .board-tit{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align: left;}
+.board-list .board-use span{display:inline-block; width:70%; line-height:36px; background-color:#ccc; color:#fff;}
+.board-list .board-use span.useY{
+    display: inline-block;
+    width: 70%;
+    line-height: 36px;
+    background-color:#00bbbe
+}
+.board-list .board-manage input[type="button"]{background-color:#333; padding:0 10px; border:0; color:#fff; height: 24px; line-height: 20px;}
+.view-form .useY{display:inline-block; width:60px; line-height:20px; background-color:#EF3E6C; font-size: 12px; color:#fff; text-align:center;}
+.view-form .useN{display:inline-block; width:60px; line-height:20px; background-color:#ccc; font-size: 12px; color:#fff; text-align:center;}
+
+/* -------- 관리자 - 정보변경 -------- */
+.login-form .btn-pwd {width:100%;height:124px;background-color:#00bbbe;font-size:19px;color:#fff;border:none;}
+.login-form .btn-pwd:hover {background-color:#222}
+
+
+@media all and ( max-width:1024px ) {
+    .board-head {height: 2px; overflow: hidden;}
+    .board-list dl dd {height:46px;line-height:46px;}
+    /* 관리자 - 공지사항쓰기 */
+    .board-write-form{max-width:auto; width:96%; padding:20px 2%;}
+    /* 관리자 - 팝업창관리 */
+    .board-list .board-tit{width:60%; font-size:15px; font-weight:600;}
+    .board-list .board-term{clear:both;float:none; display:block; margin-left:90px; width:70%; text-align:left;}
+    .board-list .board-term:before{float:none; content:"기간 : "; color:#888}
+    .board-list .board-use{position:absolute; left: 0; top: 46px; width:50px; text-align:left;}
+    .board-list .board-use span{width:80px; text-align:center;}
+    .board-list .board-use span.useY{width:80px; text-align:center;}
+    .board-list .board-file,.board-list .board-day{display:none;}
+    .board-list .board-day:before{float:none; content:"등록일 : "; color:#888}
+    .board-list .board-manage{float:none; display:block; width:15%; position:absolute; right:2%; line-height: 1;}
+    .board-list .board-manage{
+        top: 0px;
+        display: flex;
+        flex-direction: column;
+        height: 95px;
+        justify-content: space-between;
+        padding: 10px 0;
+    }
+    .board-list .board-manage input[type="button"]{padding:2px 0; width:100%; height: 30px; line-height: 1; margin-bottom:3px; }
+
+}
+@media all and ( max-width:639px ) {
+    /* 관리자 - 로그인 */
+    .login-form{max-width:auto; width:100%; margin:0px auto; padding: 30px 15px;}
+    .login-form ul{width:96%; max-width:400px; margin: 0;}
+    .login-form h2{font-size:15px}
+    /* 관리자 - 공지사항쓰기 */
+    .board-write-form dl dt{text-indent:3px;}
+    /* 관리자 - 팝업창쓰기 */
+    .board-form{position:relative;}
+    .view-form .useY{width: 30px;}
+}
+
+.condition-box {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    border-right: solid 1px #ccc;
+    padding: 20px;
+}
+.condition-box>div>label {
+    display: block;
+    margin: 10px 0;
+}
+.condition-box>div>select {
+    width: 100%;
+}
+.condition-box>div>span {
+    display: inline-block;
+    margin-bottom: 5px;
+}
+.btn-box {
+    display: flex;
+    text-align: center;
+    margin-top: 5px;
+}
+.btn-box > button {
+    flex: 1;
+    height: 36px;
+    border: none;
+    background-color: #aaa;
+    color: #fff;
+    margin: 2px;
+}
+.btn-box > button.btn-main {
+    background-color: #EF3E6C;
+}
+.btn-box > button.btn-sub {
+    background-color: #00bbbe;
+}
+.btn-box > button.on {
+    background-color: #000;
+}
+.datepicker {
+    width: 110px;
+    height:36px;
+    padding:0 30px 0 5px;
+    border:solid 1px #cbcbcb;
+    border-radius: 4px;
+    font-size:14px;
+    color:#667080;
+    background:url("../images/icon_date.png") right 8px center no-repeat #fff;
+    outline: 0;
+}
+
+@media all and ( max-width:768px ) {
+    .condition-box {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        height: auto;
+        border-right: 0;
+        padding: 10px;
+        border-bottom: solid 1px #ccc;
+    }
+    .condition-box>div>label {
+        margin: 5px 0;
+    }
+    .condition {
+        width: calc(50% - 10px);
+        margin: 0 10px 5px 0;
+    }
+    .condition2 {
+        width: 100%;
+        margin: 0 10px 5px 0;
+    }
+    .btn-box {
+        width: 50%;
+        padding: 0;
+    }
+}
+.road-info-box {
+    width: 100%;
+    height: 600px;
+    overflow-y: auto;
+}
+
+/* -------- 소개 -------- */
+.intro-inner-con{padding-bottom:8%; text-align: center;}
+.intro-inner-con h2{position: relative; display: inline-block;margin-bottom: 30px; padding:0 0 15px 0;font-size:24px;font-weight:500;}
+.intro-inner-con h2 strong{font-weight:600;}
+.intro-inner-con h2 span{width:100%; height:2px; background-color:#EF3E6C; display:block; position:absolute; bottom:0px;}
+.sub-txt{font-size:30px; margin-bottom:20px; color:#333; font-weight:500; text-align:center;}
+.sub-txt strong{font-weight:700;}
+/* 소개 -  센터소개 */
+.center-con1 {position: relative; margin: 0 auto; width: 89%;}
+.center-con1 p {line-height:28px; font-size:18px; margin-top: 20px;}
+.center-con1 p strong{font-size:18px; font-weight:500; color:#EF3E6C;}
+.center-con2{display: flex; flex-wrap: wrap;}
+.center-con2 li{position:relative; flex: 1; padding:60px 0 10px 0; text-align:center; background:#eee; margin: 10px;}
+.center-con2 li .center-con2-txt strong{position:absolute; top:30px; left:0px; width:100%; font-size:20px; color:#555;}
+.center-con2 li .center-con2-txt p{color:#555; font-size:16px; line-height:20px; padding:15px 20px; letter-spacing: -0.5px;}
+.center-con2 li .center-con2-txt p span{display:block;}
+
+/* 소개 -  서비스소개 */
+.service-con {display: flex;}
+.service-con li {flex: 1;padding: 15px;border:solid 1px #ccc;margin: 0 10px;}
+.service-con li dt {background: #00bbbe;color: #fff;font-size: 18px;font-weight: 500;line-height: 42px;text-align: center;}
+.service-con li dd {position: relative;height: 270px;padding: 15px;text-align: center;}
+.service-con li dd h3 {display: inline-block;width: 80%;text-align: center;font-size: 18px;font-weight: 500;color: #000;margin-bottom: 10px;}
+.service-con li dd>p {
+    position: relative;
+    text-align: left;
+    margin-top: 5px;
+    line-height: 1.2;
+    padding-left: 12px;
+}
+.service-con li dd>p::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 6px;
+    width: 6px;
+    height: 6px;
+    background: #00bbbe;
+    border-radius: 50%;
+    margin-right: 5px;
+}
+.service-con li dd>div {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-bottom: 10px;
+}
+.service-con li dd>div::before {
+    content: "";
+    display: inline-block;
+    width: 38px;
+    height: 38px;
+    background: url(../images/arrow_up.png) no-repeat;
+    margin-bottom: 10px;
+}
+.service-con li dd>div>strong {display: block;font-size: 18px;margin-bottom: 10px;}
+
+@media all and ( max-width:1250px ) {
+    .service-con {flex-wrap: wrap;}
+    .service-con li {width: calc(50% - 20px); flex: unset; margin:10px;}
+    .service-con li dd {height: 240px;}
+}
+@media all and ( max-width:639px ) {
+    .center-con1 img {width: 100%;}
+    .service-con li {width: 100%; margin:5px;}
+    .service-con li dd {height: auto;}
+    .service-con li dd>div {
+        position: relative;
+        bottom: unset;
+        width: 100%;
+        padding-bottom: 0;
+        padding-top: 10px;
+    }
+}
+
+.service-img ul {display: flex; margin-bottom: 20px;}
+.service-img li {flex: 1; margin: 10px; position: relative;}
+.service-img li h3 {display: block;text-align: center;font-size: 16px;font-weight: 500;line-height: 1.2;color: #fff;background: #aaa;padding: 10px 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
+.service-img li p {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, .7);color: #fff;line-height: 36px; padding: 0px 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
+.service-img li img {width: 100%; height: calc(100% - 62px);}
+@media all and ( max-width:1250px ) {
+    /* 소개 - 센터안내 */
+    .intro-inner-con{width:100%; margin:0px auto;}
+    .center-con1-left,.center-con1-right{float:none; width:100%; text-align:center;}
+    .center-con1-left img,.center-con1-right img{width:100%; max-width:500px; vertical-align:top;}
+    .center-con2 li{flex: unset; width:100%;height:auto;text-align:left; overflow:hidden; padding: 20px;}
+    .center-con2 li .icon{float:left; display:table; width:15%; margin-right:5%; text-align:center;}
+    .center-con2 li .icon span{display:table-cell;  height:80px; vertical-align:middle;}
+    .center-con2 li .icon img{width:100%; max-width:120px;}
+    .center-con2 li .center-con2-txt{float:left; width:80%;}
+    .center-con2 li .center-con2-txt strong{position:static; display:block; padding-top:2%; margin-bottom: 5px;}
+    .center-con2 li .center-con2-txt p{padding:10px 0 0 0; }
+    .center-con2 li .center-con2-txt p span{margin-right:5%; margin-bottom: 5px;}
+    .center-con2 li .center-con2-txt p span:before{content:"·"; padding-right:1%;}
+    /* 소개 - 서비스소개 */
+    .service-img li h3 {font-size: 14px;}
+    .service-img li p {font-size: 12px;}
+}
+@media all and ( max-width:639px ) {
+    /* 소개 - 센터소개 */
+    .intro-inner-con h2{font-size:18px; padding:0 0 13px 0;}
+    .sub-txt{font-size:20px; line-height: 1.4;}
+    .center-con1-right p{font-size:14px; line-height:24px;}
+    .center-con1 p{line-height:20px; font-size:14px;}
+    .center-con2 li .icon {}
+    .center-con2 li{padding: 15px;display: flex;}
+    .center-con2 li .center-con2-txt{width:100%;}
+    .center-con2 li .center-con2-txt strong{font-size:14px;}
+    .center-con2 li .center-con2-txt p{font-size:14px}
+    .center-con2 li .center-con2-txt p span {display: block;}
+    /* 소개 - 서비스소개 */
+    .service-img ul {flex-wrap: wrap; margin-bottom: 10px;}
+    .service-img li {flex: unset; width: 100%;}
+}
+.tab-btn {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+}
+.tab-btn::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: #ccc;
+}
+.tab-btn p {margin-right: 5px;}
+.tab-btn a {
+    display: inline-block;
+    border: 1px solid #ccc;
+    min-width: 40px;
+    padding: 15px;
+    font-weight: 600;
+    text-align: center;
+    color: #777;
+    background-color: #fff;
+}
+.tab-btn a.active {
+    background: #000;
+    border: solid 1px #000;
+    color: #fff;
+}
+@media all and ( max-width:639px ) {
+    .tab-btn p {margin-bottom: 5px;}
+    .tab-btn::after {display: none;}
+}
+
+
+.admin-tab {width: 100%; display: flex;}
+.admin-tab li {background: #f5f5f5; border: solid 1px #ccc; width: 100px; text-align: center; margin-left: -1px;}
+.admin-tab li a {display: block; line-height: 42px;}
+.admin-tab li a.selected, .admin-tab li a:hover {background: #00bbbe; color: #fff;}
+
+
+#roadStatCon{margin-left:280px; margin-right:30px; padding-top:26px; }
+.road-state-info{float:right;}
+.road-state-info strong{font-size:16px; font-weight:400; color:#555; line-height:50px;}
+.road-state-info span{display:inline-block; width:50px; height:50px; color:#fff; text-align:center; line-height:50px;margin-left:4px;}
+.road-state-info .state1{background-color:#ff0000}
+.road-state-info .state2{background-color:#eec400;}
+.road-state-info .state3{background-color:#48cd00;}
+.road-stats-table-con{width:100%;height: 640px;}
+.stats-tit-tbl{float:left; width:150px; }
+.stats-tit-tbl th{height:49px; border-bottom:1px solid #ccc; border-left:1px solid #ccc;background-color:#ebf7f7; text-align: center;}
+.stats-tit-tbl td{height:49px; border-bottom:1px solid #ccc; border-left:1px solid #ccc; background-color:#fff; text-align: center;}
+.stats-tit-tbl .stats-tit{border-top:1px solid #222; background-color: #eee;}
+.stats-tit-tbl td>span {display: block;min-width: 40px;}
+#statsContent {
+    float:right;
+    width: calc(100% - 150px);
+    height: 640px;
+    background: #fff;
+    overflow-x: auto;
+}
+#scroller {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    width: 100%;
+    height: 151px;
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    -o-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-text-size-adjust: none;
+    -moz-text-size-adjust: none;
+    -ms-text-size-adjust: none;
+    -o-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+#statsContent ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    text-align: center;
+    overflow:hidden;
+}
+
+#statsContent li {
+    display: block;
+    float: left;
+    width: 4%;
+    height: 49px;
+    line-height:49px;
+    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    background-color: #fafafa;
+    font-size: 14px;
+}
+#statsContent .time-tit li {
+    border-top:1px solid #222;
+    height:49px;
+    background-color:#eee
+}
+
+.stats-content-tbl th,.stats-content-tbl td{border-left:1px solid #ccc; border-bottom:1px solid #ccc; width:50px; height:49px; text-align:center ; font-size:17.5px;}
+
+.stats-content-tbl th{background-color:#eee; height:49px;}
+.stats-content-tbl td{font-size:17.5px;}
+#statsContent li.state3{color:#eec400;}
+#statsContent li.state2{color:#48cd00}
+#statsContent li.state1{color:#d60000}
+.guide-text{display:none;}
+.stats-text{clear:both; color:#555; font-size:15px; padding-top:15px; line-height:22px;}
+.road-stats-map-con{position: relative; width:100%; height:450px; margin-bottom:50px; overflow:hidden; border:1px solid #ccc; }
+
+
+@media all and ( max-width:639px ) {
+    .road-stats-table-con{height: 521px;}
+    .admin-tab li {flex:1;}
+    .stats-tit-tbl {width: 100px;}
+    .stats-tit-tbl .stats-tit {font-size: 12px;}
+    #statsContent {
+        width: calc(100% - 100px);
+        height: 521px;
+    }
+    .stats-tit-tbl th {font-size: 12px; height: 40px;}
+    .stats-tit-tbl td {height: 40px;}
+    .stats-tit-tbl td>span {font-size: 12px;}
+}
+
+.system-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.system-box>div {
+    position: relative;
+    border:solid 1px #ccc;
+    text-align: center;
+    padding: 15px;
+}
+.system-box>div>h2 {
+    display: block;
+    background: #00bbbe;
+    color: #fff;
+    font-size: 18px;
+    line-height: 1;
+    padding: 10px 0 12px 0;
+    margin: 0;
+}
+.system-box>div.box1 {
+    margin: 0 40px;
+}
+.system-box>div.box1::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 40%;
+    display: block;
+    width: 38px;
+    height: 38px;
+    background: url(../images/arrow_up.png) no-repeat;
+    margin-left: -39px;
+    transform: rotate(90deg);
+}
+.system-box>div.box1::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 40%;
+    display: block;
+    width: 38px;
+    height: 38px;
+    background: url(../images/arrow_up.png) no-repeat;
+    margin-right: -39px;
+    transform: rotate(-90deg);
+}
+.system-box .img img {width: 100%;}
+.system-box ul {
+    background: #f1f1f1;
+    padding: 15px;
+}
+.system-box ul li {
+    line-height: 24px;
+}
+.system-box ul li::before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 5px;
+    height: 5px;
+    background-color: #333;
+    border-radius: 50%;
+    margin-right: 5px;
+}
+@media all and ( max-width:768px ) {
+    .system-box {display: block;}
+    .system-box>div {width: 100%;}
+    .system-box>div.box1 {
+        margin: 40px 0;
+        padding-bottom: 20px;
+    }
+    .system-box>div.box1::before {
+        left: 45%;
+        top: 0;
+        margin-top: -39px;
+        margin-left: 0;
+        transform: rotate(180deg);
+    }
+    .system-box>div.box1::after {
+        content: "";
+        position: absolute;
+        right: unset;
+        left: 45%;
+        top:unset;
+        bottom: 0;
+        margin-right: 0;
+        margin-bottom: -39px;
+        transform: rotate(0deg);
+    }
+}

src/main/webapp/common/css/layout.css

@@ -1,15 +1,66 @@
-.fixed-top {background: #fff;}
+header {
+  background: #fff;
+  width: 100%;
+  height: 121px;
+}
+
+.main-container{
+  width: 100%;
+  height: calc(100% - 90px);
+  overflow: hidden;
+  display: flex;
+}
+
+.left-Area.main{
+  position: relative;
+  margin-top: 121px;
+  width: auto;
+  height: calc(100% - 121px);
+  display: flex;
+  flex-direction: row;
+}
+.left-Area,
+.left-Area.traffic{
+  position: relative;
+  margin-top: 121px;
+  width: auto;
+  height: calc(100% - 121px);
+  display: flex;
+  flex-direction: column;
+}
+
+.left-Tab{
+  width: 60px;
+  height: 100%;
+  background: #fff;
+  border-right: solid 1px #ccc;
+}
+.left-list{
+  width: 290px;
+  height: 100%;
+  overflow: hidden;
+  z-index: 999;
+}
+.mapArea{
+  margin-top: 121px;
+  width: calc(100% - 60px);
+  height: calc(100% - 121px);
+}
 .top-tab {
   width: 100%;
   background: #009EA5;
+  height: 40px;
+}
+.offcanvas-body{
+  padding : 0;
 }
 .legend-img{
-	position : absolute;
-	right: 0px;
-	bottom : 0px;
-	width: 350px;
-	height: 25px;
-	z-index: 999;
+  position : absolute;
+  right: 0px;
+  bottom : 90px;
+  width: 350px;
+  height: 25px;
+  z-index: 999;
 }
 .top-tab>div {
   position: relative;
@@ -45,6 +96,7 @@
 }
 .navbar-nav {
   width: 100%;
+  display: flex;
   justify-content: flex-end;
 }
 .navbar-brand {
@@ -87,14 +139,14 @@ footer {
   display: flex;
 }
 footer .count{
-	width: 340px;
-	height: calc(100% - 10px);
-	margin-top: 10px;
-	margin-left: 10px;
-	color: #fff !important;
-	
-}
-footer section {  
+  width: 340px;
+  height: calc(100% - 10px);
+  margin-top: 10px;
+  margin-left: 10px;
+  color: #fff !important;
+
+}
+footer section {
   position: relative;
   width: 1200px;
   padding: 15px 0 15px 180px;
@@ -123,7 +175,7 @@ footer a {
   .navbar-expand-lg .navbar-nav .nav-link {
     font-size: 16px;
   }
-   .navbar-brand {
+  .navbar-brand {
     width: 280px;
   }
 }
@@ -134,6 +186,24 @@ footer a {
 
 }
 @media (max-width: 992px) {
+  .mapArea,
+  .left-Area,
+  .left-Area.main {
+    margin-top: 75px;
+    border: 0;
+    height: calc(100% - 75px);
+  }
+  .left-Area.traffic{
+    margin-top: 75px;
+    height: calc(100% - 75px);
+  }
+  .navbar-collapse {
+    border-top: solid 1px #009EA5;
+    background-color: white;
+  }
+  header{
+    height: 75px;
+  }
   .top-tab {
     height: 5px;
   }
@@ -145,15 +215,45 @@ footer a {
     height: 70px;
     margin-left: 15px;
   }
-  footer {
+  /*footer {*/
+  /*  height: auto;*/
+  /*}*/
+  /*footer section {*/
+  /*  width: 100%;*/
+  /*}*/
+
+}
+@media (max-width: 768px) {
+  .mapArea.statistics{
+    height: calc(100% - 297px);
+  }
+  .main-container {
+    flex-direction: column;
+    height: 100%;
+  }
+  .mapArea.atrd{
+    top: 80px;
+  }
+  .left-Area.main {
+    width: 100%;
+    flex-direction: column;
+    margin-top: 65px;
     height: auto;
   }
-  footer section {
+  .left-Area,
+  .left-Area.traffic{
+    margin-top: 65px;
+    height: auto;
+  }
+  .mapArea{
     width: 100%;
+    margin-top: 0px;
+    height: calc(100% - 50px);
   }
-  
-}
-@media (max-width: 768px) {
+  .legend-img{
+    bottom: 0px;
+  }
+  header{height: 65px;}
   .navbar-brand {
     width: 200px;
     height: 60px;
@@ -162,20 +262,17 @@ footer a {
     margin: 0;
     padding: 0 15px;
   }
-  .navbar-collapse {
-    border-top: solid 1px #009EA5;
-  }
   footer {
-  	height : 155px;
+    height : 155px;
   }
-  footer section {  
+  footer section {
     text-align: center;
     padding: 10px;
     margin-top : 25px;
   }
   footer .count {
-  	position : absolute;
-  	height   : 121.39px;
+    position : absolute;
+    height   : 121.39px;
   }
   footer .f-logo {
     position: relative;

src/main/webapp/common/css/layout_org.css

@@ -0,0 +1,189 @@
+.fixed-top {background: #fff;}
+.top-tab {
+  width: 100%;
+  background: #009EA5;
+}
+.legend-img{
+  position : absolute;
+  right: 0px;
+  bottom : 0px;
+  width: 350px;
+  height: 25px;
+  z-index: 999;
+}
+.top-tab>div {
+  position: relative;
+  width: calc(100% - 20px);
+  height: 40px;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  color: #fff;
+  padding-right: 20px;
+}
+.top-tab .sitemap {
+  display: inline-block;
+  vertical-align: middle;
+  color: #fff;
+  margin-left: 20px;
+  height: 30px;
+  width: 95px;
+}
+.top-tab .sitemap::before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 14px;
+  background: url(../images/icon_sitemap.png) no-repeat;
+  margin-right: 5px;
+}
+.navbar {
+  width: 100%;
+  border-bottom: solid 1px #009EA5;
+  padding: 0;
+}
+.navbar-nav {
+  width: 100%;
+  justify-content: flex-end;
+}
+.navbar-brand {
+  width: 341px;
+  height: 80px;
+  font-size: 0;
+  background: url(../images/logo.png) 0 center no-repeat;
+  background-size: 100%;
+}
+.navbar-toggler {padding: 0;}
+.navbar-toggler:focus {box-shadow: none;}
+.navbar-toggler-icon {
+  width: 40px;
+  height: 36px;
+  background: url(../images/m_menu.png) no-repeat;
+  border: 0;
+}
+.nav-item {margin-left: 30px;}
+.navbar-expand-lg .navbar-nav .nav-link {
+  display: block;
+  color: #000;
+  font-size: 18px;
+  font-weight: 700;
+  padding: 15px 0;
+}
+.navbar-expand-lg .navbar-nav .nav-link:hover {
+  color: #009EA5;
+}
+.container-fluid {
+  position: relative;
+  margin: 0 auto;
+  width: 1200px;
+  padding: 0;
+}
+footer {
+  width: 100%;
+  height: 90px;
+  background: #262626;
+  overflow: hidden;
+  display: flex;
+}
+footer .count{
+  width: 340px;
+  height: calc(100% - 10px);
+  margin-top: 10px;
+  margin-left: 10px;
+  color: #fff !important;
+
+}
+footer section {
+  position: relative;
+  width: 1200px;
+  padding: 15px 0 15px 180px;
+}
+footer .f-logo {
+  position: absolute;
+  left: 0;
+  width: 130px;
+  height: 44px;
+  font-size: 0;
+  background: url(../images/f_logo.png) no-repeat;
+}
+footer p {
+  font-size: 12px;
+  color: #999;
+  line-height: 1.4;
+}
+footer a {
+  display: inline-block;
+  font-size: 14px;
+  color: #fff !important;
+  margin: 0 10px 5px 0;
+}
+
+@media (max-width: 1100px) {
+  .navbar-expand-lg .navbar-nav .nav-link {
+    font-size: 16px;
+  }
+  .navbar-brand {
+    width: 280px;
+  }
+}
+@media (max-width: 1024px) {
+  .container-fluid {
+    width: 100%;
+  }
+
+}
+@media (max-width: 992px) {
+  .navbar-collapse {
+    border-top: solid 1px #009EA5;
+    background-color: white;
+  }
+  .top-tab {
+    height: 5px;
+  }
+  .top-tab>div {
+    display: none;
+  }
+  .navbar-brand {
+    width: 240px;
+    height: 70px;
+    margin-left: 15px;
+  }
+  footer {
+    height: auto;
+  }
+  footer section {
+    width: 100%;
+  }
+
+}
+@media (max-width: 768px) {
+  .navbar-brand {
+    width: 200px;
+    height: 60px;
+  }
+  .nav-item {
+    margin: 0;
+    padding: 0 15px;
+  }
+  footer {
+    height : 155px;
+  }
+  footer section {
+    text-align: center;
+    padding: 10px;
+    margin-top : 25px;
+  }
+  footer .count {
+    position : absolute;
+    height   : 121.39px;
+  }
+  footer .f-logo {
+    position: relative;
+    width: 100%;
+    height: 36px;
+    background: url(../images/f_logo.png) center top no-repeat;
+    background-size: auto 100%;
+  }
+  footer p, footer a {font-size: 12px;}
+}

src/main/webapp/common/css/reset_org.css

@@ -0,0 +1,53 @@
+@charset "utf-8";
+
+/* Reset */
+* {box-sizing:border-box; letter-spacing: -0.5px;}
+html,body{width:100%;height:100%;padding:0px; margin:0px;}
+body {font-size:14px;font-family:'Noto Sans KR',Dotum,'돋움',Gulim,'굴림',Malgun Gothic,Helvetica,AppleGothic,'애플고딕',sans-serif,Tahoma;line-height:100%;}
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td { margin:0; padding:0; -webkit-text-size-adjust:none;line-height:100%;}
+img,fieldset{border:0}
+ul,ol,li{list-style:none;}
+h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
+hr {display:none;}
+a {text-decoration:none; color: #000;}
+address {font-style:normal; font-weight:normal;}
+legend,caption {display:none; clear:both;}
+input,textarea,select,button,table { font-size:inherit;font-family:inherit;line-height:inherit; }/**font-size:100%;*/
+input,select {vertical-align:middle; height: 36px;}
+textarea, input {outline-color:-moz-use-text-color;outline-style:none;outline-width:medium;}
+textarea {resize:none;}
+table {border-collapse:collapse}
+
+button {border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:0 none;background-color:transparent;border-radius:0;}
+
+article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block;margin:0;}
+command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr { display: inline; }
+
+/* blind */
+.hidden{visibility:hidden;position:absolute;overflow:hidden;height:0;width:0;font-size:0}
+
+/* float */
+.fl{float:left!important}
+.fr{float:right!important}
+.clear{clear:both!important}
+
+/* align */
+.left{text-align:left!important}
+.right{text-align:right!important}
+.center,.center td,.center th {text-align:center}
+.middle{vertical-align:middle!important}
+.top{vertical-align:top!important}
+
+/* float 해제 */
+.f-clear:after { content:""; display:block; clear:both; height:0; visibility:hidden; }
+.f-clear { display:inline-block; }
+* html .f-clear { height:1%; }
+.f-clear {display:block; }
+
+
+.bor-radi{-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;}
+input::-webkit-input-placeholder {font-size:14px;color:#626263;}
+select {-webkit-appearance:none;appearance:none;height:36px;padding:0 25px 0 5px;border:solid 1px #cbcbcb; border-radius: 4px;font-size:14px;color:#667080;background:url("../images/select_arrow_small.png") right 6px center no-repeat #fff; outline: 0;}
+select::-ms-expand {display: none;}
+
+.skiptoContent {display:none;} 

src/main/webapp/js/HiVeWebRtcPlayer/HiVeWebRtcPlayerSSL.js

@@ -41,7 +41,7 @@ function HiVeWebRtcPlayer(
             video_module.srcObject = null;
             state = "start";
             is_connected = false;
-            video_module.setAttribute('style', 'background: black url(loader.gif) center no-repeat;');
+            video_module.setAttribute('style', 'background: black url(/js/HiVeWebRtcPlayer/loader.gif) center no-repeat;');
 
             show_controls = video_module.controls;
             video_module.controls = false;
@@ -151,7 +151,7 @@ function HiVeWebRtcPlayer(
 
         video_module.removeAttribute('src');
         if (state !== "stop")
-            video_module.setAttribute('style', 'background:black url(error.png) center no-repeat;');
+            video_module.setAttribute('style', 'background:black url(/js/HiVeWebRtcPlayer/error.png) center no-repeat;');
         else
             video_module.setAttribute('style', 'background-color:black');
         video_module.load();

src/main/webapp/js/main.js

@@ -35,7 +35,8 @@ var mapContainer = document.getElementById('map'), // 지도를 표시할 div
             .LatLng('37.01423130393533', '126.93995173968553'), // 평택지도의 중심좌표
         maxLevel: 9,
         minLevel: 4,
-        level: 9 // 지도의 확대 레벨
+        level: 9, // 지도의 확대 레벨
+        disableDoubleClickZoom: true
     };
 
 // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
@@ -312,6 +313,23 @@ $('#inciInfo').click(function() {
 	}
 });
 
+$('#roadInfo').click(function (){
+    $(".road").toggleClass("on");
+    let left;
+    let title;
+    let display;
+    if(_RoadFlag){
+        display  = 'block';
+        title    = '선택됨';
+    }else{
+        display = 'none';
+        title = '도로목록 보기';
+    }
+    _RoadFlag = !_RoadFlag;
+    $('.left-list').css('display', display);
+    $(this).attr('title', title);
+    _Map.relayout();
+})
 $('#parkingInfo').click(function() {
 	if (_ParkingFlag) 
 	{

src/main/webapp/js/naverEditor/sample/photo_uploader/attach_photo.js

@@ -0,0 +1,681 @@
+	//변수 선언 및 초기화
+	var nImageInfoCnt = 0;
+	var htImageInfo = [];		//image file정보 저장
+	var aResult = [];
+	
+	var rFilter = /^(image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;  
+	var rFilter2 = /^(bmp|gif|jpg|jpeg|png)$/i; 
+	var nTotalSize = 0;
+	var nMaxImageSize = 10*1024*1024;
+	var nMaxTotalImageSize = 50*1024*1024;
+	var nMaxImageCount = 10;
+	var nImageFileCount = 0;
+	var bSupportDragAndDropAPI = false;
+	var oFileUploader;
+	var bAttachEvent = false;
+
+	//마크업에 따른 할당
+	var elContent= $("pop_content");  
+	var elDropArea = jindo.$$.getSingle(".drag_area",elContent);
+	var elDropAreaUL = jindo.$$.getSingle(".lst_type",elContent);
+	var elCountTxtTxt = jindo.$$.getSingle("#imageCountTxt",elContent);
+	var elTotalSizeTxt = jindo.$$.getSingle("#totalSizeTxt",elContent);
+	var elTextGuide = $("guide_text");
+	var welUploadInputBox = $Element("uploadInputBox");
+	var oNavigator = jindo.$Agent().navigator();
+	
+	//마크업-공통 
+	var welBtnConfirm = $Element("btn_confirm");				//확인 버튼
+	var welBtnCancel= $Element("btn_cancel");				//취소 버튼
+	
+	//진도로 랩핑된 element
+	var welTextGuide = $Element(elTextGuide);
+	var welDropArea = $Element(elDropArea);
+	var welDropAreaUL = $Element(elDropAreaUL); 
+	var fnUploadImage = null;
+	
+	//File API 지원 여부로 결정
+	function checkDragAndDropAPI(){
+		try{
+			if( !oNavigator.ie ){
+				if(!!oNavigator.safari && oNavigator.version <= 5){
+					bSupportDragAndDropAPI = false;
+				}else{
+					bSupportDragAndDropAPI = true;
+				}
+			} else {
+				bSupportDragAndDropAPI = false;
+			}
+		}catch(e){
+			bSupportDragAndDropAPI = false;
+		}
+	}
+	
+	//--------------- html5 미지원 브라우저에서 (IE9 이하) ---------------
+	/** 
+	 * 이미지를 첨부 후 활성화된 버튼 상태
+	 */
+     function goStartMode(){
+    	 var sSrc = welBtnConfirm.attr("src")|| "";
+    	 if(sSrc.indexOf("btn_confirm2.png") < 0 ){
+    		 welBtnConfirm.attr("src","./img/btn_confirm2.png");
+    		 fnUploadImage.attach(welBtnConfirm.$value(), "click");
+    	 }
+     } 
+     /**
+      * 이미지를 첨부 전 비활성화된 버튼 상태
+      * @return
+      */
+     function goReadyMode(){
+    	 var sSrc = welBtnConfirm.attr("src")|| "";
+    	 if(sSrc.indexOf("btn_confirm2.png") >= 0 ){
+    		 fnUploadImage.detach(welBtnConfirm.$value(), "click");
+	    	 welBtnConfirm.attr("src","./img/btn_confirm.png");
+    	 }
+     }   
+	
+	/**
+	 * 일반 업로드 
+	 * @desc oFileUploader의 upload함수를 호출함. 
+	 */
+	function generalUpload(){
+		oFileUploader.upload();
+	}
+	
+    /** 
+     * 이미지 첨부 전 안내 텍스트가 나오는 배경으로 '설정'하는 함수.
+     * @return
+     */
+ 	function readyModeBG (){
+ 		var sClass = welTextGuide.className();
+ 		if(sClass.indexOf('nobg') >= 0){
+ 			welTextGuide.removeClass('nobg');
+ 			welTextGuide.className('bg');
+ 		}
+ 	}
+ 	
+ 	/**
+ 	 * 이미지 첨부 전 안내 텍스트가 나오는 배경을 '제거'하는 함수. 
+ 	 * @return
+ 	 */
+ 	function startModeBG (){
+ 		var sClass = welTextGuide.className();
+ 		if(sClass.indexOf('nobg') < 0){
+	 		welTextGuide.removeClass('bg');
+	 		welTextGuide.className('nobg');
+ 		}
+ 	}
+
+	//--------------------- html5  지원되는 브라우저에서 사용하는 함수  --------------------------
+ 	/**
+ 	 * 팝업에 노출될 업로드 예정 사진의 수.
+ 	 * @param {Object} nCount 현재 업로드 예정인 사진 장수
+ 	 * @param {Object} nVariable 삭제되는 수
+ 	 */
+ 	function updateViewCount (nCount, nVariable){
+ 		var nCnt = nCount + nVariable;
+ 		elCountTxtTxt.innerHTML = nCnt +"장";
+ 		nImageFileCount = nCnt;
+ 		return nCnt;
+ 	}
+ 	
+ 	/**
+ 	 * 팝업에 노출될 업로드될 사진 총 용량
+ 	 */
+ 	function updateViewTotalSize(){
+ 		var nViewTotalSize = Number(parseInt((nTotalSize || 0), 10) / (1024*1024));
+ 		elTotalSizeTxt.innerHTML = nViewTotalSize.toFixed(2) +"MB";
+ 	}
+ 	
+ 	/**
+ 	 * 이미지 전체 용량 재계산.
+ 	 * @param {Object} sParentId
+ 	 */
+ 	function refreshTotalImageSize(sParentId){
+ 		var nDelImgSize = htImageInfo[sParentId].size;
+ 		if(nTotalSize - nDelImgSize > -1 ){
+ 			nTotalSize = nTotalSize - nDelImgSize;
+ 		} 
+ 	}
+	
+ 	/**
+ 	 * hash table에서 이미지 정보 초기화.
+ 	 * @param {Object} sParentId
+ 	 */
+ 	function removeImageInfo (sParentId){
+ 		//삭제된 이미지의 공간을 초기화 한다.
+ 		htImageInfo[sParentId] = null;
+ 	}
+ 	
+ 	
+ 	/**
+ 	 * byte로 받은 이미지 용량을 화면에 표시를 위해 포맷팅
+ 	 * @param {Object} nByte
+ 	 */
+ 	function setUnitString (nByte) {
+ 		var nImageSize;
+ 		var sUnit;
+ 		
+ 		if(nByte < 0 ){
+ 			nByte = 0;
+ 		}
+ 		
+ 		if( nByte < 1024) {
+ 			nImageSize = Number(nByte);
+ 			sUnit = 'B';
+ 			return nImageSize + sUnit;
+ 		} else if( nByte > (1024*1024)) {
+ 			nImageSize = Number(parseInt((nByte || 0), 10) / (1024*1024));
+ 			sUnit = 'MB';
+ 			return nImageSize.toFixed(2) + sUnit;
+ 		} else {
+ 			nImageSize = Number(parseInt((nByte || 0), 10) / 1024);
+ 			sUnit = 'KB';
+ 			return nImageSize.toFixed(0) + sUnit;
+ 		}
+     }
+ 	
+ 	/**
+ 	 * 화면 목록에 적당하게 이름을 잘라서 표시.
+ 	 * @param {Object} sName 파일명
+ 	 * @param {Object} nMaxLng 최대 길이
+ 	 */
+ 	function cuttingNameByLength (sName, nMaxLng) {
+ 		var sTemp, nIndex;
+ 		if(sName.length > nMaxLng){
+ 			nIndex = sName.indexOf(".");
+ 			sTemp = sName.substring(0,nMaxLng) + "..." + sName.substring(nIndex,sName.length) ;
+ 		} else {
+ 			sTemp = sName;
+ 		}
+ 		return sTemp;
+ 	}
+ 	
+ 	/**
+ 	 * Total Image Size를 체크해서 추가로 이미지를 넣을지 말지를 결정함.
+ 	 * @param {Object} nByte
+ 	 */
+ 	function checkTotalImageSize(nByte){
+ 		if( nTotalSize + nByte < nMaxTotalImageSize){
+ 			nTotalSize = nTotalSize + nByte;
+ 			return false;
+ 		} else {
+ 			return true;
+ 		}
+ 	}
+	
+ 	// 이벤트 핸들러 할당
+ 	function dragEnter(ev) {
+ 		ev.stopPropagation();
+ 		ev.preventDefault();
+     }
+ 	
+     function dragExit(ev) {
+     	ev.stopPropagation();
+     	ev.preventDefault();
+     }
+     
+ 	function dragOver(ev) {
+ 		ev.stopPropagation();
+ 		ev.preventDefault();
+     }
+ 	
+	/**
+	 * 드랍 영역에 사진을 떨구는 순간 발생하는 이벤트
+	 * @param {Object} ev
+	 */
+    function drop(ev) {
+		ev.stopPropagation();
+		ev.preventDefault();
+		
+		if (nImageFileCount >= 10){
+			alert("최대 10장까지만 등록할 수 있습니다.");
+			return;
+		}
+		
+		if(typeof ev.dataTransfer.files == 'undefined'){
+			alert("HTML5를 지원하지 않는 브라우저입니다.");
+		}else{
+			//변수 선언
+			var wel,
+				files,
+				nCount,
+				sListTag = '';
+			
+			//초기화	
+			files = ev.dataTransfer.files;
+			nCount = files.length;
+						
+			if (!!files && nCount === 0){
+				//파일이 아닌, 웹페이지에서 이미지를 드래서 놓는 경우.
+				alert("정상적인 첨부방식이 아닙니다.");
+				return ;
+			}
+			
+			for (var i = 0, j = nImageFileCount ; i < nCount ; i++){
+				if (!rFilter.test(files[i].type)) {
+					alert("이미지파일 (jpg,gif,png,bmp)만 업로드 가능합니다.");
+				} else if(files[i].size > nMaxImageSize){
+					alert("이미지 용량이 10MB를 초과하여 등록할 수 없습니다.");
+				} else {
+					//제한된 수만 업로드 가능.
+					if ( j < nMaxImageCount ){
+						sListTag += addImage(files[i]);
+						
+						//다음 사진을위한 셋팅
+						j = j+1;
+						nImageInfoCnt = nImageInfoCnt+1;
+					} else {
+						alert("최대 10장까지만 등록할 수 있습니다.");
+						break;			
+					}
+				}
+			}
+			if(j > 0){
+				//배경 이미지 변경
+				startModeBG();
+				if ( sListTag.length > 1){
+					welDropAreaUL.prependHTML(sListTag);
+				}
+				//이미지 총사이즈 view update 
+				updateViewTotalSize();
+				//이미치 총 수 view update
+				nImageFileCount = j;
+				updateViewCount(nImageFileCount, 0);
+				// 저장 버튼 활성화
+				goStartMode();
+			}else{
+				readyModeBG();
+			}
+		}
+    }
+	
+    /**
+     * 이미지를 추가하기 위해서 file을 저장하고, 목록에 보여주기 위해서 string을 만드는 함수.
+     * @param ofile 한개의 이미지 파일
+     * @return
+     */
+    function addImage(ofile){
+    	//파일 사이즈
+		var ofile = ofile,
+			sFileSize = 0,
+			sFileName = "",
+			sLiTag = "",
+			bExceedLimitTotalSize = false,
+			aFileList = [];
+		
+		sFileSize = setUnitString(ofile.size);
+		sFileName = cuttingNameByLength(ofile.name, 15);
+		bExceedLimitTotalSize = checkTotalImageSize(ofile.size);
+
+		if( !!bExceedLimitTotalSize ){
+			alert("전체 이미지 용량이 50MB를 초과하여 등록할 수 없습니다. \n\n (파일명 : "+sFileName+", 사이즈 : "+sFileSize+")");
+		} else {
+			//이미지 정보 저장							
+			htImageInfo['img'+nImageInfoCnt] = ofile;
+			
+    		//List 마크업 생성하기
+			aFileList.push('	<li id="img'+nImageInfoCnt+'" class="imgLi"><span>'+ sFileName +'</span>');
+			aFileList.push('	<em>'+ sFileSize +'</em>');
+	        aFileList.push('	<a onclick="delImage(\'img'+nImageInfoCnt+'\')"><img class="del_button" src="./img/btn_del.png"  width="14" height="13" alt="첨부 사진 삭제"></a>');
+			aFileList.push('	</li> ');   
+			
+			sLiTag = aFileList.join(" ");
+			aFileList = [];
+		}
+		return sLiTag;
+    }
+    
+    /**
+     * HTML5 DragAndDrop으로 사진을 추가하고, 확인버튼을 누른 경우에 동작한다.
+     * @return
+     */
+    function html5Upload() {
+    	var tempFile,
+    		sUploadURL;
+    	
+    	sUploadURL= '/admin/noticeImgupload.do'; 	//upload URL
+    	
+    	//파일을 하나씩 보내고, 결과를 받음.
+    	for(var j=0, k=0; j < nImageInfoCnt; j++) {
+    		tempFile = htImageInfo['img'+j];
+    		try{
+	    		if(!!tempFile){
+	    			//Ajax통신하는 부분. 파일과 업로더할 url을 전달한다.
+	    			callAjaxForHTML5(tempFile,sUploadURL);
+	    			k += 1;
+	    		}
+	    	}catch(e){}
+    		tempFile = null;
+    	}
+	}
+    
+    function callAjaxForHTML5 (tempFile, sUploadURL){
+    	var oAjax = jindo.$Ajax(sUploadURL, {
+			type: 'xhr',
+			method : "post",
+			onload : function(res){ // 요청이 완료되면 실행될 콜백 함수
+				var sResString = res._response.responseText;
+				if (res.readyState() == 4) {
+					if(sResString.indexOf("NOTALLOW_") > -1){
+						var sFileName = sResString.replace("NOTALLOW_", "");
+						alert("이미지 파일(jpg,gif,png,bmp)만 업로드 하실 수 있습니다. ("+sFileName+")");
+					}else{
+						//성공 시에  responseText를 가지고 array로 만드는 부분.
+						makeArrayFromString(res._response.responseText);
+					}
+				}
+			},
+			timeout : 3,
+			onerror :  jindo.$Fn(onAjaxError, this).bind()
+		});
+		oAjax.header("contentType","multipart/form-data");
+		oAjax.header("file-name",encodeURIComponent(tempFile.name));
+		oAjax.header("file-size",tempFile.size);
+		oAjax.header("file-Type",tempFile.type);
+		oAjax.request(tempFile);
+    }
+    
+    function makeArrayFromString(sResString){
+    	var	aTemp = [],
+    		aSubTemp = [],
+    		htTemp = {}
+    		aResultleng = 0;
+    	
+ 		try{
+ 			if(!sResString || sResString.indexOf("sFileURL") < 0){
+ 	    		return ;
+ 	    	}
+ 			aTemp = sResString.split("&");
+	    	for (var i = 0; i < aTemp.length ; i++){
+	    		if( !!aTemp[i] && aTemp[i] != "" && aTemp[i].indexOf("=") > 0){
+	    			aSubTemp = aTemp[i].split("=");
+	    			htTemp[aSubTemp[0]] = aSubTemp[1];
+	    		}
+	 		}
+ 		}catch(e){}
+ 		
+ 		aResultleng = aResult.length;
+    	aResult[aResultleng] = htTemp;
+    	
+    	if(aResult.length == nImageFileCount){
+    		setPhotoToEditor(aResult); 
+    		aResult = null;
+    		window.close();
+    	}
+    }
+    
+    /**
+ 	 * 사진 삭제 시에 호출되는 함수
+ 	 * @param {Object} sParentId 
+ 	 */
+ 	function delImage (sParentId){
+ 		var elLi = jindo.$$.getSingle("#"+sParentId);
+ 		
+ 		refreshTotalImageSize(sParentId);
+ 		
+ 		updateViewTotalSize();
+ 		updateViewCount(nImageFileCount,-1);
+ 		//사진 file array에서 정보 삭제.
+ 		removeImageInfo(sParentId);
+ 		//해당 li삭제
+ 		$Element(elLi).leave();
+ 		
+ 		//마지막 이미지인경우.
+ 		if(nImageFileCount === 0){
+ 			readyModeBG();
+ 			//사진 추가 버튼 비활성화
+ 			goReadyMode();
+ 		}
+ 		
+ 		// drop 영역 이벤트 다시 활성화.
+ 		if(!bAttachEvent){
+ 			addEvent();
+ 		}
+ 	}
+
+ 	/**
+     * 이벤트 할당
+     */
+	function addEvent() {
+		bAttachEvent = true;
+		elDropArea.addEventListener("dragenter", dragEnter, false);
+		elDropArea.addEventListener("dragexit", dragExit, false);
+		elDropArea.addEventListener("dragover", dragOver, false);
+		elDropArea.addEventListener("drop", drop, false);
+	}
+	
+	function removeEvent(){
+		bAttachEvent = false;
+		elDropArea.removeEventListener("dragenter", dragEnter, false);
+	    elDropArea.removeEventListener("dragexit", dragExit, false);
+	    elDropArea.removeEventListener("dragover", dragOver, false);
+	    elDropArea.removeEventListener("drop", drop, false);	
+	}
+ 	
+	/**
+	 * Ajax 통신 시 error가 발생할 때 처리하는 함수입니다.
+	 * @return
+	 */
+	function onAjaxError (){
+		alert("[가이드]사진 업로더할 서버URL셋팅이 필요합니다.-onAjaxError");
+	}
+
+ 	/**
+      * 이미지 업로드 시작
+      * 확인 버튼 클릭하면 호출되는 msg
+      */
+     function uploadImage (e){
+    	 if(!bSupportDragAndDropAPI){
+    		 generalUpload();
+    	 }else{
+    		 html5Upload();
+    	 }
+     }
+     
+ 	/**
+ 	 * jindo에 파일 업로드 사용.(iframe에 Form을 Submit하여 리프레시없이 파일을 업로드하는 컴포넌트)
+ 	 */
+ 	function callFileUploader (){
+ 		oFileUploader = new jindo.FileUploader(jindo.$("uploadInputBox"),{
+ 			sUrl  : '/admin/noticeImguploadSingle.do',	//샘플 URL입니다.
+ 	        sCallback : location.href.replace(/\/[^\/]*$/, '') + '/callback.html',	//업로드 이후에 iframe이 redirect될 콜백페이지의 주소
+ 	    	sFiletype : "*.jpg;*.png;*.bmp;*.gif",						//허용할 파일의 형식. ex) "*", "*.*", "*.jpg", 구분자(;)	
+ 	    	sMsgNotAllowedExt : 'JPG, GIF, PNG, BMP 확장자만 가능합니다',	//허용할 파일의 형식이 아닌경우에 띄워주는 경고창의 문구
+ 	    	bAutoUpload : false,									 	//파일이 선택됨과 동시에 자동으로 업로드를 수행할지 여부 (upload 메소드 수행)
+ 	    	bAutoReset : true 											// 업로드한 직후에 파일폼을 리셋 시킬지 여부 (reset 메소드 수행)
+ 	    }).attach({
+ 	    	select : function(oCustomEvent) {
+ 	    		//파일 선택이 완료되었을 때 발생
+// 		    	 oCustomEvent (이벤트 객체) = {
+// 	    			sValue (String) 선택된 File Input의 값
+// 	    			bAllowed (Boolean) 선택된 파일의 형식이 허용되는 형식인지 여부
+// 	    			sMsgNotAllowedExt (String) 허용되지 않는 파일 형식인 경우 띄워줄 경고메세지
+// 	    		}
+//  				선택된 파일의 형식이 허용되는 경우만 처리 
+ 	    		if(oCustomEvent.bAllowed === true){
+ 		    		goStartMode();
+ 		    	}else{
+ 		    		goReadyMode();
+ 		    		oFileUploader.reset();
+ 		    	}
+// 	    		bAllowed 값이 false인 경우 경고문구와 함께 alert 수행 
+// 	    		oCustomEvent.stop(); 수행시 bAllowed 가 false이더라도 alert이 수행되지 않음
+ 	    	},
+ 	    	success : function(oCustomEvent) {
+ 	    		// alert("success");
+ 	    		// 업로드가 성공적으로 완료되었을 때 발생
+ 	    		// oCustomEvent(이벤트 객체) = {
+ 	    		//	htResult (Object) 서버에서 전달해주는 결과 객체 (서버 설정에 따라 유동적으로 선택가능)
+ 	    		// }
+ 	    		var aResult = []; 
+ 	    		aResult[0] = oCustomEvent.htResult;
+ 	    		setPhotoToEditor(aResult); 
+ 	    		//버튼 비활성화
+ 	    		goReadyMode();
+ 	    		oFileUploader.reset();
+ 	    		window.close();
+ 	    	},
+ 	    	error : function(oCustomEvent) {
+ 	    		//업로드가 실패했을 때 발생
+ 	    		//oCustomEvent(이벤트 객체) = {
+ 	    		//	htResult : { (Object) 서버에서 전달해주는 결과 객체. 에러발생시 errstr 프로퍼티를 반드시 포함하도록 서버 응답을 설정하여야한다.
+ 	    		//		errstr : (String) 에러메시지
+ 	    		// 	}
+ 	    		//}
+ 	    		//var wel = jindo.$Element("info");
+ 	    		//wel.html(oCustomEvent.htResult.errstr);
+ 	    		alert(oCustomEvent.htResult.errstr);
+ 	    	}
+ 	    });
+ 	}
+	
+    /**
+     * 페이지 닫기 버튼 클릭
+     */
+    function closeWindow(){
+	   	if(bSupportDragAndDropAPI){
+	   		removeEvent();
+	   	}
+	   	window.close();
+    }
+    
+	window.onload = function(){
+  		checkDragAndDropAPI();
+  		
+  		if(bSupportDragAndDropAPI){
+  			$Element("pop_container2").hide();
+  			$Element("pop_container").show();
+  			
+  			welTextGuide.removeClass("nobg");
+  			welTextGuide.className("bg");
+  			
+  			addEvent();
+  		} else {
+  			$Element("pop_container").hide();
+  			$Element("pop_container2").show();
+  			callFileUploader();
+  		}
+  		fnUploadImage = $Fn(uploadImage,this);
+  		$Fn(closeWindow,this).attach(welBtnCancel.$value(), "click");
+	};
+
+	/**
+	 *  서버로부터 받은 데이타를 에디터에 전달하고 창을 닫음.
+	 * @parameter aFileInfo [{},{},...] 
+	 * @ex aFileInfo = [
+	 * 	{
+			sFileName : "nmms_215646753.gif",
+			sFileURL :"http://static.naver.net/www/u/2010/0611/nmms_215646753.gif",
+			bNewLine : true
+		},
+		{
+			sFileName : "btn_sch_over.gif",
+			sFileURL :"http://static1.naver.net/w9/btn_sch_over.gif",
+			bNewLine : true
+		}
+	 * ]
+	 */
+ 	function setPhotoToEditor(oFileInfo){
+		if (!!opener && !!opener.nhn && !!opener.nhn.husky && !!opener.nhn.husky.PopUpManager) {
+			//스마트 에디터 플러그인을 통해서 넣는 방법 (oFileInfo는 Array)
+			opener.nhn.husky.PopUpManager.setCallback(window, 'SET_PHOTO', [oFileInfo]);
+			//본문에 바로 tag를 넣는 방법 (oFileInfo는 String으로 <img src=....> )
+			//opener.nhn.husky.PopUpManager.setCallback(window, 'PASTE_HTML', [oFileInfo]);
+		}
+	}
+ 	
+ 	// 2012.05 현재] jindo.$Ajax.prototype.request에서 file과 form을 지원하지 안함. 
+ 	jindo.$Ajax.prototype.request = function(oData) {
+ 		this._status++;
+ 		var t   = this;
+ 		var req = this._request;
+ 		var opt = this._options;
+ 		var data, v,a = [], data = "";
+ 		var _timer = null;
+ 		var url = this._url;
+ 		this._is_abort = false;
+
+ 		if( opt.postBody && opt.type.toUpperCase()=="XHR" && opt.method.toUpperCase()!="GET"){
+ 			if(typeof oData == 'string'){
+ 				data = oData;
+ 			}else{
+ 				data = jindo.$Json(oData).toString();	
+ 			}	
+ 		}else if (typeof oData == "undefined" || !oData) {
+ 			data = null;
+ 		} else {
+ 			data = oData;
+ 		}
+ 		
+ 		req.open(opt.method.toUpperCase(), url, opt.async);
+ 		if (opt.sendheader) {
+ 			if(!this._headers["Content-Type"]){
+ 				req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
+ 			}
+ 			req.setRequestHeader("charset", "utf-8");
+ 			for (var x in this._headers) {
+ 				if(this._headers.hasOwnProperty(x)){
+ 					if (typeof this._headers[x] == "function") 
+ 						continue;
+ 					req.setRequestHeader(x, String(this._headers[x]));
+ 				}
+ 			}
+ 		}
+ 		var navi = navigator.userAgent;
+ 		if(req.addEventListener&&!(navi.indexOf("Opera") > -1)&&!(navi.indexOf("MSIE") > -1)){
+ 			/*
+ 			 * opera 10.60에서 XMLHttpRequest에 addEventListener기 추가되었지만 정상적으로 동작하지 않아 opera는 무조건 dom1방식으로 지원함.
+ 			 * IE9에서도 opera와 같은 문제가 있음.
+ 			 */
+ 			if(this._loadFunc){ req.removeEventListener("load", this._loadFunc, false); }
+ 			this._loadFunc = function(rq){ 
+ 				clearTimeout(_timer);
+ 				_timer = undefined; 
+ 				t._onload(rq); 
+ 			}
+ 			req.addEventListener("load", this._loadFunc, false);
+ 		}else{
+ 			if (typeof req.onload != "undefined") {
+ 				req.onload = function(rq){
+ 					if(req.readyState == 4 && !t._is_abort){
+ 						clearTimeout(_timer); 
+ 						_timer = undefined;
+ 						t._onload(rq);
+ 					}
+ 				};
+ 			} else {
+ 	            /*
+ 				 * IE6에서는 onreadystatechange가 동기적으로 실행되어 timeout이벤트가 발생안됨.
+ 				 * 그래서 interval로 체크하여 timeout이벤트가 정상적으로 발생되도록 수정. 비동기 방식일때만
+ 		
+ 	             */
+ 				if(window.navigator.userAgent.match(/(?:MSIE) ([0-9.]+)/)[1]==6&&opt.async){
+ 					var onreadystatechange = function(rq){
+ 						if(req.readyState == 4 && !t._is_abort){
+ 							if(_timer){
+ 								clearTimeout(_timer);
+ 								_timer = undefined;
+ 							}
+ 							t._onload(rq);
+ 							clearInterval(t._interval);
+ 							t._interval = undefined;
+ 						}
+ 					};
+ 					this._interval = setInterval(onreadystatechange,300);
+
+ 				}else{
+ 					req.onreadystatechange = function(rq){
+ 						if(req.readyState == 4){
+ 							clearTimeout(_timer); 
+ 							_timer = undefined;
+ 							t._onload(rq);
+ 						}
+ 					};
+ 				}
+ 			}
+ 		}
+
+ 		req.send(data);
+ 		return this;
+ 	};

src/main/webapp/js/naverEditor/sample/photo_uploader/photo_uploader.html

@@ -6,7 +6,7 @@
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>사진 첨부하기 :: SmartEditor2</title>
 <style type="text/css">
-/* NHN Web Standard 1Team JJS 120106 */ 
+/* NHN Web Standard 1Team JJS 120106 */
 /* Common */
 body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
 body,input,textarea,select,button,table{font-family:'돋움',Dotum,Helvetica,sans-serif;font-size:12px}
@@ -51,7 +51,7 @@ h1{color:#333;font-size:14px;letter-spacing:-1px}
     </div>
     <!-- //header -->
     <!-- container -->
-	
+
     <!-- [D] HTML5인 경우 pop_container 클래스와 하위 HTML 적용
 	    	 그밖의 경우 pop_container2 클래스와 하위 HTML 적용      -->
 	<div id="pop_container2" class="pop_container2">
@@ -68,9 +68,9 @@ h1{color:#333;font-size:14px;letter-spacing:-1px}
     	<!-- content -->
         <div id="pop_content">
 	        <p class="dsc"><em id="imageCountTxt">0장</em>/10장 <span class="bar">|</span> <em id="totalSizeTxt">0MB</em>/50MB</p>
-        	<!-- [D] 첨부 이미지 여부에 따른 Class 변화 
+        	<!-- [D] 첨부 이미지 여부에 따른 Class 변화
             	 첨부 이미지가 있는 경우 : em에 "bg" 클래스 적용 //첨부 이미지가 없는 경우 : em에 "nobg" 클래스 적용   -->
-				 
+
             <div class="drag_area" id="drag_area">
 				<ul class="lst_type" >
 				</ul>

src/main/webapp/js/traffic.js

@@ -9,6 +9,7 @@ var _AtrdTrafficInfoArr = [];
 let _prevLevel = 0;
 
 function atrdTrfInfo(atrdId, atrdNm) {
+
 	$('#selectRoad').text(atrdNm+' 지도 소통정보');
 	$('#selectRoadFont').text(atrdNm+' 문자 소통정보');
 	
@@ -27,7 +28,6 @@ function atrdTrfInfo(atrdId, atrdNm) {
 
     showAtrdTrfInfo();
 
-    var boundsArr = [];
     var roadCnt = 0;
     var atrdFwdSped = 0;
     var atrdFwdLngt = 0;
@@ -36,7 +36,7 @@ function atrdTrfInfo(atrdId, atrdNm) {
 
     //지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
     var bounds = new daum.maps.LatLngBounds();
-    
+
     if (_FwdLineArr.length > 0) {
 	    _FwdLineArr.forEach(function (el) {
 	        if (el.sped > 0) {
@@ -44,7 +44,7 @@ function atrdTrfInfo(atrdId, atrdNm) {
 	            atrdFwdSped += el.sped;
 	        } else {}
 	        atrdFwdLngt += el.sect_lngt;
-	
+
 	        bounds.extend(new daum.maps.LatLng(el.y_crdn_min, el.x_crdn_min));
 	        bounds.extend(new daum.maps.LatLng(el.y_crdn_max, el.x_crdn_max));
 	    });
@@ -63,7 +63,6 @@ function atrdTrfInfo(atrdId, atrdNm) {
     //간선도로를 지도 가운데로 위치
     if ($('.mapRoadList').css('display') == 'none') {
         _Map.setBounds(bounds);
-
     	if (_prevLevel == _Level) {
     		_Map.setLevel(_Map.getLevel()+1);
     	}
@@ -75,17 +74,9 @@ function atrdTrfInfo(atrdId, atrdNm) {
     	atrdBwdSped = isNumberText((atrdBwdSped / roadCnt).toFixed(2), ' km/h');
     	atrdFwdLngt = isNumberText((atrdFwdLngt / 1000).toFixed(2), ' km');
     	atrdBwdLngt = isNumberText((atrdBwdLngt / 1000).toFixed(2), ' km');
-        
-        // var str = '<dl><dt><a href="javascript:void(0)" title="상행">상행</a></dt><dd><a href="javasc' +
-        //         'ript:void(0)" title="평균속도 : ' + atrdFwdSped + '거리 : ' + atrdFwdLngt + '"><span' +
-        //         '>평균속도 : ' + atrdFwdSped + '</span><span>거리 : ' + atrdFwdLngt + '</span></a></d' +
-        //         'd></dl>';
-        // str += '<dl><dt><a href="javascript:void(0)" title="하행">하행</a></dt><dd><a href="javasc' +
-        //         'ript:void(0)" title="평균속도 : ' + atrdFwdSped + '거리 : ' + atrdFwdLngt + '"><span' +
-        //         '>평균속도 : ' + atrdBwdSped + '</span><span>거리 : ' + atrdBwdLngt + '</span></a></d' +
-        //         'd></dl>';
-
-        var strNew =  '    <div class="upload">'+
+
+        var strNew =  ' <div class="atrd-name">'+ atrdNm +'</div>' +
+                    '   <div class="upload">'+
                     '        <span>평균속도 : '+atrdFwdSped+'</span>'+
                     '        <span>거리 : '+atrdFwdLngt+'</span>'+
                     '    </div>'+
@@ -94,9 +85,7 @@ function atrdTrfInfo(atrdId, atrdNm) {
                     '        <span>거리 : '+atrdBwdLngt+'</span>'+
                     '    </div>'
 
-        $(".searchBox-cont").html(strNew)
-        //$('#trafficInfo').html(str);
-        //$('#trafficInfo').show();
+        $(".searchBox-cont").html(strNew);
     }
     //도로목록에서 도로선택시 문자탭으로 이동..
     $('#trafficInfo dl:nth-of-type(1) dt:nth-of-type(1) a').focus();
@@ -150,37 +139,18 @@ function showAtrdTrfInfo() {
     
     var lettersStr = '';
     var lettersStrNew = '';
-    //console.log(_Level);
     var Level = _Level;
+
     if (_Level <= 3) {
         Level = 0;
     }
-//    _TrafficInfoArr[Level].forEach(function (el) {
-//        if (_AtrdId[0] == el.atrd_id) { //시작 라인
-//
-//            _FwdLineArr.push(el);
-//        } else if (_AtrdId[1] == el.atrd_id) { // 끝라인
-//
-//            _BwdLineArr.push(el);
-//        }
-//    });
-
-
-//    if (typeof _TrafficInfoArr[Level] == 'undefined') {
-//    	if (Level != 0) {
-//    		Level--;
-//    	}
-//    }
-//    if (typeof _TrafficInfoArr[Level] == 'undefined') {
-//    	Level = Level + 2;
-//    }
+
     if (_TrafficInfoArr[Level] && _TrafficInfoArr[Level].length > 0) {
 	    _TrafficInfoArr[Level].forEach(function (el) {
 	        if (_AtrdId[0] == el.atrd_id) { //시작 라인
 	            el
 	                .polylineBack
 	                .setOptions({
-	                    //strokeColor : '#0000FF' blue
 	                    strokeColor: '#000000', //black
 	                    zIndex: 3
 	                });
@@ -197,17 +167,21 @@ function showAtrdTrfInfo() {
 	                        '/a></td><td><a href="javascript:void(0)" title="소통정보:' + el.cmtrGradText + '">' +
 	                        '<strong class="traffic ' + el.cmtr_grad_cd + '">' + el.cmtrGradText + '</stron' +
 	                        'g></a></td></tr>';
-	
-	
-	                lettersStrNew +=    '<li>'+
-	                    '    <div class="road_info">'+
-	                    '        <p>['+ el.drct_cd +']' + el.atrd_nm +'<strong>' + el.sped + ' km/h</strong><br></p>'+
-	                    '        <p>'+ el.strt_nm_node +' <span class="arrow-icon"><img src="../common/images/arrow_icon.png" alt=""></span>'+ el.end_nm_node +'</p>'+
-	                    '    </div>'+
-	                    '    <aside class="road-traffic">'+
-	                    '        <span class="traffic'+el.cmtrGradText+'">'+el.cmtrGradText+'</span>'+
-	                    '    </aside>'+
-	                    '</li>'
+
+
+                    lettersStrNew += '<li>'+
+                        '    <div class="road_info">'+
+                        '        <div class="atrd-top"><div>['+ el.drct_cd +']' + el.atrd_nm +'</div><strong>' + el.sped + ' km/h</strong></div>'+
+                        '        <div class="atrd-bottom">' +
+                        '           <div class="atrd-front">'+ el.strt_nm_node +'</div>' +
+                        '           <span class="arrow-icon"><img src="../common/images/arrow_icon.png" alt=""></span>' +
+                        '           <div class="atrd-end">'+ el.end_nm_node +'</div>' +
+                        '           <strong>' + el.sped + ' km/h</strong></div>'+
+                        '    </div>'+
+                        '    <aside class="road-traffic">'+
+                        '        <span class="traffic'+el.cmtrGradText+'">'+el.cmtrGradText+'</span>'+
+                        '    </aside>'+
+                        '</li>'
 	            }
 	            _FwdLineArr.push(el);
 	        } else if (_AtrdId[1] == el.atrd_id) { // 끝라인
@@ -231,16 +205,22 @@ function showAtrdTrfInfo() {
 	                        '/a></td><td><a href="javascript:void(0)" title="소통정보:' + el.cmtrGradText + '">' +
 	                        '<strong class="traffic ' + el.cmtr_grad_cd + '">' + el.cmtrGradText + '</stron' +
 	                        'g></a></td></tr>';
-	
-	                lettersStrNew +=    '<li>'+
-	                    '    <div class="road_info">'+
-	                    '        <p>['+ el.drct_cd +']' + el.atrd_nm +'<strong>' + el.sped + ' km/h</strong><br></p>'+
-	                '        <p>'+ el.strt_nm_node +' <span class="arrow-icon"><img src="../common/images/arrow_icon.png" alt=""></span>'+ el.end_nm_node +'</p>'+
-	                '    </div>'+
-	                '    <aside class="road-traffic">'+
-	                '        <span class="traffic'+el.cmtrGradText+'">'+el.cmtrGradText+'</span>'+
-	                '    </aside>'+
-	                '</li>'
+
+                    lettersStrNew += '<li>'+
+                        '    <div class="road_info">'+
+                        '        <div class="atrd-top"><div>['+ el.drct_cd +']' + el.atrd_nm +'</div>' +
+                        '        <strong>' + el.sped + ' km/h</strong></div>'+
+                        '        <div class="atrd-bottom">' +
+                        '           <div class="atrd-front">'+ el.strt_nm_node +'</div>' +
+                        '           <span class="arrow-icon"><img src="../common/images/arrow_icon.png" alt=""></span>' +
+                        '           <div class="atrd-end">'+ el.end_nm_node +'</div>' +
+                        '           <strong>' + el.sped + ' km/h</strong>' +
+                        '       </div>'+
+                        '    </div>'+
+                        '    <aside class="road-traffic">'+
+                        '        <span class="traffic'+el.cmtrGradText+'">'+el.cmtrGradText+'</span>'+
+                        '    </aside>'+
+                        '</li>'
 	            }
 	            _BwdLineArr.push(el);
 	        }
@@ -277,7 +257,7 @@ function showAtrdTrfInfo() {
 	        _BwdLineArr[0].polyline.getPath()[0].getLng()
 	    );
     }
-    
+
 }
 
 function drawAtrdSideMarker(src, lat, lng) {
@@ -323,13 +303,13 @@ function typeOfMap() {
         _IncdInfoWindow.setMap(null);
     $('#mapOfLetters').empty();
     $('.mapRoadList').hide();
-    $('#map').show();
+    $('.mapContent.traffic.map').show();
     $('.mylocation').show();
     $('.legend-img').show();
 }
 
 function typeOfLetters() {
-    $('#map').hide();
+    $('.mapContent.traffic.map').hide();
     $('#mapOfLetters').html(_RoadListStr);
     $('.mapRoadList').show();
     $('.mylocation').hide();