열람관리 : 화면설계서 반영, API 변경적용, 퍼블 적용 - 중간백업

src/main/java/nlib/col/service/CollectionVO.java

@@ -129,8 +129,14 @@ public class CollectionVO extends PagingVO {
 	//--------------------------------------------
 	// 열람관련  
 	//--------------------------------------------
+	protected String reqId;              /* 열람신청번호 */
+	protected String reqDd;              /* 열람신청일자 */
 	protected String hopeReqPridDtmFrom; /* 방문희망시작일자 */
 	protected String hopeReqPridDtmTo;   /* 방문희망종료일자 */
+	protected String reqStatusDivCd;     /* 열람상태구분코드 */
+	protected String reqStatusDivNm;     /* 열람상태구분명 */
+	protected String reqPsblDtmFrom;     /* 방문예정시작일자 */ 
+	protected String reqPsblDtmTo;       /* 방문예정종료일자 */
 	
 	//--------------------------------------------
 	// 기타 및 처리결과 항목 
@@ -757,5 +763,54 @@ public class CollectionVO extends PagingVO {
 	public void setRsrvDivNm(String rsrvDivNm) {
 		this.rsrvDivNm = rsrvDivNm;
 	}
+
+	public String getReqStatusDivCd() {
+		return reqStatusDivCd;
+	}
+
+	public void setReqStatusDivCd(String reqStatusDivCd) {
+		this.reqStatusDivCd = reqStatusDivCd;
+	}
+
+	public String getReqStatusDivNm() {
+		return reqStatusDivNm;
+	}
+
+	public void setReqStatusDivNm(String reqStatusDivNm) {
+		this.reqStatusDivNm = reqStatusDivNm;
+	}
+
+	public String getReqPsblDtmFrom() {
+		return reqPsblDtmFrom;
+	}
+
+	public void setReqPsblDtmFrom(String reqPsblDtmFrom) {
+		this.reqPsblDtmFrom = reqPsblDtmFrom;
+	}
+
+	public String getReqPsblDtmTo() {
+		return reqPsblDtmTo;
+	}
+
+	public void setReqPsblDtmTo(String reqPsblDtmTo) {
+		this.reqPsblDtmTo = reqPsblDtmTo;
+	}
+
+	public String getReqId() {
+		return reqId;
+	}
+
+	public void setReqId(String reqId) {
+		this.reqId = reqId;
+	}
+
+	public String getReqDd() {
+		return reqDd;
+	}
+
+	public void setReqDd(String reqDd) {
+		this.reqDd = reqDd;
+	}
+	
 }
 

src/main/java/nlib/col/service/ReadService.java

@@ -3,6 +3,8 @@ package nlib.col.service;
 import java.util.HashMap;
 import java.util.List;
 
+import nlib.restful.service.DataApiResVO;
+
 /**
  * <pre>
  * @Class Name : ReadService.java
@@ -46,4 +48,30 @@ public interface ReadService {
 	 */
 	public List<CollectionVO> insertReadItems(List<CollectionVO> list, String mbInfoId, CollectionVO readVO) throws Exception;
 	
+
+	/**
+	 * 사용자의 열람건이 존재하는 문화원 정보 목록을 조회한다. 
+	 * 
+	 * @param mbInfoId
+	 * @return
+	 */
+	public List<HashMap<String, String>> listReadMngOrg(String mbInfoId);
+	
+	/**
+	 * 열람 목록 조회한다.
+	 * 
+	 * @param searchVO
+	 * @return
+	 */
+	public DataApiResVO listReadItems(CollectionVO searchVO);
+	
+
+	/**
+	 * 열람신청을 취소한다.
+	 * 
+	 * @param searchVO
+	 * @return
+	 */
+	public DataApiResVO cancelReadItem(CollectionVO searchVO);
+	
 }

src/main/java/nlib/col/service/impl/ReadDAO.java

@@ -10,4 +10,6 @@ public interface ReadDAO {
 	
 	public List<HashMap<String, String>> listDates();
 
+	public List<HashMap<String, String>> listReadMngOrg(String mbInfoId);
+
 }

src/main/java/nlib/col/service/impl/ReadServiceImpl.java

@@ -29,11 +29,9 @@ public class ReadServiceImpl implements ReadService {
 	@Resource(name="informService")
 	private InformService informService;
 
-	
 	/** RESTFul API 송수신 모듈 */
 	@Resource(name = "dataApi")
 	private DataApi dataApi;
-
 	
 	/**
 	 * 열람신청희망 가능 일자 목록을 조회한다.
@@ -151,5 +149,95 @@ public class ReadServiceImpl implements ReadService {
     	
 		return list;
 	}
+
+	/**
+	 * 사용자의 열람건이 존재하는 문화원 정보 목록을 조회한다. 
+	 * 
+	 * @param mbInfoId
+	 * @return
+	 */
+	public List<HashMap<String, String>> listReadMngOrg(String mbInfoId) {
+		return readDAO.listReadMngOrg(mbInfoId);
+	}
+	
+	/**
+	 * 열람 목록 조회한다.
+	 * 
+	 * @param searchVO
+	 * @return
+	 */
+	public DataApiResVO listReadItems(CollectionVO searchVO) {
+		
+		if(searchVO == null || StringUtil.isEmpty(searchVO.getMbInfoId())) {
+			log.error("listRentItems > 대출 목록 조회 요청 정보가 없습니다.");
+			return null;
+		}
+
+    	// API 호출 
+    	/*
+			mngOrgCd	문화원코드
+			mbInfoId	사용자아이디
+			rows	페이지크기(페이지당최대표출건수)
+			page	페이지번호
+			bookLtRvStatusCd	대출상태구분코드("": 전체, A:신청, B:대출준비완료, C:취소, W:대출중, R0:정상반납, R1:연체반납 P:연체)
+    	*/
+    	DataApiReqVO reqVO = new DataApiReqVO("/uac/service/nlib/col/listReserveItem", HttpMethod.GET);
+    	reqVO.setMbInfoId(searchVO.getMbInfoId()); // 통신 시, 암호화되어 송수신됨 
+    	reqVO.setPageSize(searchVO.getPageSize());
+    	reqVO.setPageIndex(searchVO.getPageIndex());
+    	reqVO.putInfoItem("mngOrgCd", StringUtil.getString(searchVO.getMngOrgCd(), "KCCF")); // DDDDDDDDDDDDDDDDDDDd api 변경시까지 유지
+    	reqVO.putInfoItem("reqStatusDivCd", searchVO.getReqStatusDivCd());
+    	return dataApi.request(reqVO);
+	}
+
+
+	/**
+	 * 열람신청을 취소한다.
+	 * 
+	 * @param searchVO
+	 * @return
+	 */
+	public DataApiResVO cancelReadItem(CollectionVO searchVO) {
+
+		String message = null;
+		
+		if(searchVO == null || StringUtil.isEmpty(searchVO.getMbInfoId())) {
+			message = "로그인하신 후, 이용바랍니다.";
+			log.error("cancelRentItem > " + message);
+			return new DataApiResVO("E", message);
+		}
+
+    	if(StringUtil.isEmpty(searchVO.getMngOrgCd())) {
+			message = "문화원정보가 부적합합니다. 다시 요청하여 주시기 바랍니다.";
+			log.error("cancelRentItem > " + message);
+			return new DataApiResVO("E", message);
+    	}
+
+    	if(StringUtil.isEmpty(searchVO.getReqId())) {
+    		message = "취소할 방문열람신청번호 정보가 부적합합니다. 다시 요청하여 주시기 바랍니다.";
+			log.error("cancelRentItem > " + message);
+			return new DataApiResVO("E", message);
+    	}
+    	
+    	if(StringUtil.isEmpty(searchVO.getMasterId())) {
+    		message = "취소할 자료정보 정보가 부적합합니다. 다시 요청하여 주시기 바랍니다.";
+			log.error("cancelRentItem > " + message);
+			return new DataApiResVO("E", message);
+    	}
+    	
+    	// API 호출 
+    	/*
+			mngOrgCd	문화원코드
+			mbInfoId	사용자아이디
+			reqId	열람신청번호
+			masterId	자료번호
+    	*/
+    	DataApiReqVO reqVO = new DataApiReqVO("/uac/service/nlib/col/deleteReserveItem", HttpMethod.POST);
+    	reqVO.setMbInfoId(searchVO.getMbInfoId()); // 통신 시, 암호화되어 송수신됨 
+    	reqVO.putInfoItem("mngOrgCd", searchVO.getMngOrgCd());
+    	reqVO.putInfoItem("reqId", searchVO.getReqId());
+    	reqVO.putInfoItem("masterId", searchVO.getMasterId());
+    	return dataApi.request(reqVO);
+	}
 	
 }

src/main/java/nlib/col/web/ReadController.java

@@ -8,15 +8,19 @@ import javax.servlet.http.HttpServletRequest;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.ModelMap;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 
 import nlib.cmm.NlibCommonController;
 import nlib.cmm.service.NlibProperty;
+import nlib.cmm.service.PagingVO;
 import nlib.col.service.CollectionService;
 import nlib.col.service.CollectionVO;
 import nlib.col.service.ReadService;
+import nlib.restful.service.DataApiResVO;
 import nlib.util.StringUtil;
 
 /**
@@ -155,4 +159,149 @@ public class ReadController extends NlibCommonController {
     	return retJsp;
     }
     
+
+	/**
+	 * 열람 목록 화면을 호출한다.
+	 * 
+	 * @param request
+	 * @param searchVO
+	 * @param model
+	 * @param message
+	 * @return
+	 * @throws Exception
+	 */
+	@RequestMapping("/read/listReadItems.do")
+    public String listReadItems(HttpServletRequest request, CollectionVO searchVO, ModelMap model, String message) throws Exception {
+		
+    	String mbInfoId = getMbInfoId(request);
+    	
+    	if(StringUtil.isEmpty(mbInfoId)) {
+    		message = "로그인하신 후, 이용바랍니다.";
+    		model.addAttribute("message", message);
+    		return "nlib/read/listReadItems";
+    	}
+
+    	// 대출자료 문화원 목록 조회 
+    	List<HashMap<String, String>> readMngOrgList = readService.listReadMngOrg(mbInfoId);
+    	model.addAttribute("rentMngOrgList"  , readMngOrgList);
+    	
+    	model.addAttribute("reqStatusDivCd", StringUtil.getString(searchVO.getReqStatusDivCd(), "A")); // 기본값 신청
+    	model.addAttribute("pageSize"        , searchVO.getPageSize());
+    	model.addAttribute("pageIndex"       , searchVO.getPageIndex());
+    	model.addAttribute("message"         , message);
+	  	
+    	return "nlib/read/listReadItems";
+    }
+
+	/**
+	 * 대출 목록을 조회한다.
+	 * 
+	 * @param req
+	 * @return
+	 */
+	@RequestMapping(value="/read/listReadItemsAjax.do")
+	public ResponseEntity<String> listRentItemsAjax(
+			HttpServletRequest request,
+			@RequestBody CollectionVO searchVO)  {
+	
+		String message = null;
+    	String mbInfoId = getMbInfoId(request);
+    	int totCount = 0;
+    	
+    	if(StringUtil.isEmpty(mbInfoId)) {
+    		message = "로그인하신 후, 이용바랍니다.";
+    	}
+    	
+    	if(StringUtil.isEmpty(searchVO.getReqStatusDivCd())) {
+    		searchVO.setReqStatusDivCd("A"); // 신청/예약 기본 설정 
+    	}
+    	
+		//-------------------------------
+		// JSON변환 응답 처리
+		//-------------------------------
+		// JS-GRID 페이징 처리를 포함한 응답값 처리
+		// {data: [{...}], 
+		//  itemsCount: 255
+		// }
+		HashMap<String, Object> retMap = new HashMap<String, Object>();
+		
+    	if(StringUtil.isNotEmpty(mbInfoId)) {
+    		
+        	// 로그인 사용자 정보 설정 
+        	searchVO.setMbInfoId(mbInfoId);
+        	
+        	// 조회 
+        	// 대출상태구분코드("": 전체, A:신청, B:대출준비완료, C:취소, W:대출중, R0:정상반납, R1:연체반납, P:연체)
+    		DataApiResVO resVO = readService.listReadItems(searchVO);
+    		totCount = resVO.getRecordTotCount();
+    		retMap.put("data"      , resVO.getRecordList());
+    		retMap.put("pageIndex" , resVO.getPageIndex());
+    	} else {
+    		retMap.put("pageIndex" , searchVO.getPageIndex());
+    		retMap.put("message"   , "로그인하신 후, 이용바랍니다.");
+    	}
+		retMap.put("itemsCount", totCount);
+
+    	PagingVO pageVO = new PagingVO();
+	  	pageVO.setPagingVO(totCount, searchVO.getPageIndex(), searchVO.getPageSize());
+	  	retMap.put("pagingPageIndex"     , pageVO.getPageIndex());
+	  	retMap.put("pagingTotRecordCount", pageVO.getTotRecordCount());
+	  	retMap.put("pagingStartPage"     , pageVO.getStartPage());
+	  	retMap.put("pagingEndPage"       , pageVO.getEndPage());
+	  	retMap.put("pagingLastPage"      , pageVO.getLastPage());
+    	
+		return makeResponseEntityJson(retMap);
+	}
+
+	@RequestMapping(value="/read/cancelReadItemAjax.do")
+	public ResponseEntity<String> cancelRentItemAjax(
+			HttpServletRequest request,
+			@RequestBody CollectionVO searchVO)  {
+	
+		String resultMessage = null;
+		String resultCode = "F";
+    	String mbInfoId = getMbInfoId(request);
+    	int totCount = 0;
+    	
+    	if(StringUtil.isEmpty(mbInfoId)) {
+    		resultMessage = "로그인하신 후, 이용바랍니다.";
+    	}
+    	
+    	if(StringUtil.isEmpty(searchVO.getMngOrgCd())) {
+    		resultMessage = "문화원정보가 부적합합니다. 다시 요청하여 주시기 바랍니다.";
+    	}
+
+    	if(StringUtil.isEmpty(searchVO.getReqId())) {
+    		resultMessage = "취소할 방문열람신청번호 정보가 부적합합니다. 다시 요청하여 주시기 바랍니다.";
+    	}
+
+    	if(StringUtil.isEmpty(searchVO.getMasterId())) {
+    		resultMessage = "취소할 자료정보 정보가 부적합합니다. 다시 요청하여 주시기 바랍니다.";
+    	}
+
+		//-------------------------------
+		// JSON변환 응답 처리
+		//-------------------------------
+		// JS-GRID 페이징 처리를 포함한 응답값 처리
+		// {data: [{...}], 
+		//  itemsCount: 255
+		// }
+		HashMap<String, Object> retMap = new HashMap<String, Object>();
+		
+    	if(resultMessage == null) {
+    		
+        	// 로그인 사용자 정보 설정 
+        	searchVO.setMbInfoId(mbInfoId);
+        	
+        	// 대출취소신청 
+    		DataApiResVO resVO = readService.cancelReadItem(searchVO);
+    		resultCode = resVO.getResultCode();
+    		resultMessage = resVO.getResultMessage();
+    	}
+    	
+	  	retMap.put("resultCode"    , resultCode);
+    	retMap.put("resultMessage" , resultMessage);
+    	
+		return makeResponseEntityJson(retMap);
+	}
 }

src/main/java/nlib/restful/service/impl/DataApiRESTful.java

@@ -104,11 +104,11 @@ public class DataApiRESTful implements DataApiInterface {
 	        		statusCode = responseEntity.getStatusCode();
 	        		resultXML = responseEntity.getBody();
         		} catch(HttpClientErrorException e) {
-        			e.printStackTrace();
+        			//e.printStackTrace();
         			resultXML = e.getResponseBodyAsString();
         			statusCode = e.getStatusCode();
         		} catch(HttpServerErrorException e) {
-        			e.printStackTrace();
+        			//e.printStackTrace();
         			resultXML = e.getResponseBodyAsString();
         			statusCode = e.getStatusCode();
         		}

src/main/resources/egovframework/mapper/nlib/col/ReadDAO_SQL.xml

@@ -32,4 +32,15 @@
     ]]>
  	</select>
  	
+    <select id="listReadMngOrg" parameterType="String" resultType="EgovMap">
+        SELECT DISTINCT A.MNG_ORG_CD, B.DEPT_NM AS MNG_ORG_NM
+        FROM (
+            SELECT DISTINCT MNG_ORG_CD
+            FROM  US_REQ
+            WHERE REQ_USER_ID = #{mbInfoId} 
+        ) A
+        JOIN SM_DEPT B ON (A.MNG_ORG_CD = B.ORG_CD)
+        ORDER BY B.DEPT_NM
+    </select>
+    
 </mapper>

src/main/webapp/WEB-INF/tiles/inc/menu.jsp

@@ -28,7 +28,7 @@
                             <li><a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/userInfo/pwCertMyInfo.do';" title="회원정보관리"><span class="underline blue">회원정보관리</span></a></li>
                             <li><a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/interest/listInterests.do';" title="관심자료"><span class="underline blue">관심자료</span></a></li>
                             <li><a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/rent/listRentItems.do';" title="대출관리"><span class="underline blue">대출관리</span></a></li>
-                            <li><a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/rent/listRequestsForViewingItem.do';" title="방문열람관리"><span class="underline blue">방문열람관리</span></a></li>
+                            <li><a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/read/listReadItems.do';" title="방문열람관리"><span class="underline blue">방문열람관리</span></a></li>
                             
                             <!-- 개발진행 중 임시 추가 : 시작 DDDDDDDDDDDDDD -->
                             <li>--- 이하 임시 추가 메뉴 ---</li>

src/main/webapp/css/default.css

@@ -51,58 +51,66 @@ transition:all .3s ease;
 .wrap .nav-wrap #primary-nav .sub-menu li:hover a {display:block;font-weight: 500;}
 .wrap .nav-wrap #primary-nav .sub-menu li:last-child {border-bottom: 0;}
 .wrap .nav-wrap #primary-nav .sub-menu .downarrow:before {content: '\25b8';}
-.wrap .nav-wrap #primary-nav.mobile {display: none;position: fixed;top:auto;bottom: 0px;background: #1eaabd;width: 100%;height: 100%;min-height: 100vh;margin:0% 0%;left:800px;
+.wrap .nav-wrap #primary-nav li ul li:hover,
+.wrap .nav-wrap #primary-nav li ul li.selected {background: none;}
+
+.wrap .nav-wrap #primary-nav.mobile {display: none;position: absolute;top: 100%;background: #A0D468;width: 100%;
 -webkit-transition:all .3s ease;
 -moz-transition:all .3s ease;
 -o-transition:all .3s ease;
 transition:all .3s ease;
 }
-.wrap .nav-wrap #primary-nav li ul li:hover,
-.wrap .nav-wrap #primary-nav li ul li.selected {background: none;}
-.wrap .nav-wrap #primary-nav.mobile li {width: 100%;margin: 0;border-bottom: 0px solid #4fc3d3;text-align:center;}
-.wrap .nav-wrap #primary-nav.mobile li.selected > a {border-bottom: 0px solid #4fc3d3;}
+.wrap .nav-wrap #primary-nav.mobile li {width: 100%;margin: 0;border-bottom: 1px solid #7cb142;}
+.wrap .nav-wrap #primary-nav.mobile li.selected > a {border-bottom: 1px solid #7cb142;}
 .wrap .nav-wrap #primary-nav.mobile li:last-child {border: none;}
-.wrap .nav-wrap #primary-nav.mobile li a {padding: 15px 0%;display:block;font-size:30px;color:#fff;}
-.wrap .nav-wrap #primary-nav.mobile li:hover a {color:#fff;}
-.wrap .nav-wrap #primary-nav.mobile li.active a {color:#fff;}
+.wrap .nav-wrap #primary-nav.mobile li a {padding: 5%;}
 .wrap .nav-wrap #primary-nav.mobile .sub-menu li a {padding-left: 7%;}
 .wrap .nav-wrap #primary-nav.mobile .sub-menu .submenu li a {padding-left: 9%;}
 .wrap .nav-wrap #primary-nav.mobile .sub-menu .sub-menu .sub-menu li a {padding-left: 11%;}
 .wrap .nav-wrap #primary-nav.mobile .sub-menu {float: left;position: relative;width: 100%;}
-.wrap .nav-wrap .downarrow {background: none;display: inline-block;padding: 0;text-align: center;min-width: 3px;display: none;}
+.wrap .nav-wrap .downarrow {background: none;display: inline-block;padding: 0;text-align: center;min-width: 3px;}
 .wrap .nav-wrap .sub-menu .downarrow {position: absolute;right: 0;padding-right: 10px;}
+/*
 .wrap .nav-wrap .downarrow:before {content: '\25be';color: inherit;display: block;font-family: sans-serif;font-size: 1em;line-height: 1.1;width: 1em;height: 1em;}
+*/
 .wrap .nav-wrap .menu .sub-menu {display: none;position: absolute;left: 0;max-height: 1000px;}
 .wrap .nav-wrap .menu .sub-menu.hide {display: none;}
 .wrap .nav-wrap .mobile .downarrow,
 .wrap .nav-wrap .mobile .sub-menu .downarrow {position: absolute;right: 0;padding-right: 5%;}
-#primary-nav-button {background: transparent;display: none;border: 0px solid #aaa;position: absolute;top: 5px;left: 0;padding: 0;text-decoration: none;color: #333;text-align: center;font-weight: bold;font-size: 0;outline:0;z-index: 9;}
-#primary-nav.mobile .sub-menu .downarrow:before {content: '\25be';}
-#primary-nav-button.mobile {display: inline-block;}
-.wrap .nav-wrap .Btn {display: inline-block;width:25px;height:25px;cursor: pointer;text-decoration: none;position: relative;}
-.wrap .nav-wrap .Btn i {position: relative;border-radius:10px;display: inline-block;width: 25px;height: 2px;color:#707070;text-transform: uppercase;text-indent:-999999999px;background: #707070;}
-.wrap .nav-wrap .Btn i::before, .wrap header .Btn i::after {content:'';border-radius: 10px;width: 25px;height: 2px;position: absolute;left:0;background:#707070;
--webkit-transition:all .2s ease-in;
--moz-transition:all .2s ease-in;
--o-transition:all .2s ease-in;
-transition:all .2s ease-in;
+.wrap .nav-wrap #primary-nav.mobile .sub-menu .downarrow:before {content: '\25be';}
+.wrap .nav-wrap #primary-nav-button.mobile {display: inline-block;}
+.wrap .Btn {display: inline-block;width:25px;height:25px;cursor: pointer;text-decoration: none;position: relative;display: none;}
+.wrap .Btn i {position: relative;display: inline-block;width: 25px;height: 3px;color:#fff;font:bold 14px/.4 Helvetica;text-transform: uppercase;text-indent:-999999999px;
+background: #fff;
+-webkit-transition:all .2s ease-out;
+-moz-transition:all .2s ease-out;
+-o-transition:all .2s ease-out;
+transition:all .2s ease-out;
 }
-.wrap .nav-wrap .Btn i::before {top: -9px;}
-.wrap .nav-wrap .Btn i::after {bottom: -9px;width:20px;left:auto;right:0px;}
-.wrap .nav-wrap .Btn.selected i {background:none;}
-.wrap .nav-wrap .Btn.selected i::before {top:0;background: #fff;
+.wrap .Btn i::before, .Btn i::after {content:'';width: 25px;height: 3px;position: absolute;left:0;background:#fff;
+-webkit-transition:all .2s ease-out;
+-moz-transition:all .2s ease-out;
+-o-transition:all .2s ease-out;
+transition:all .2s ease-out;
+}
+.wrap .Btn i::before {top: -9px;}
+.wrap .Btn i::after {bottom: -9px;}
+
+.wrap .Btn.selected i {background:none;}
+.wrap .Btn.selected i::before {top:0;background: #fff;
 -webkit-transform: rotateZ(45deg);
 -moz-transform: rotateZ(45deg);
 -o-transform: rotateZ(45deg);
 transform: rotateZ(45deg);
 }
-.wrap .nav-wrap .Btn.selected i::after {bottom:-2px;width:25px;background: #fff;border-bottom: 2px solid #1eaabd;
+.wrap .Btn.selected i::after {bottom:0;background: #fff;
 -webkit-transform: rotateZ(-45deg);
 -moz-transform: rotateZ(-45deg);
 -o-transform: rotateZ(-45deg);
 transform: rotateZ(-45deg);
 }
 
+
 /********** 헤더 스크롤 **********/
 .wrap #header.scroll_off {background:rgba(0,0,0,0.3);}
 .wrap #header.scroll_on {background:rgba(55,103,149,1.0);}
@@ -122,6 +130,7 @@ transform: rotateZ(-45deg);
 .wrap .nav-wrap.scroll_on #primary-nav ul li .sub-menu li a span.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);}
 .wrap .nav-wrap.scroll_on #primary-nav ul li .sub-menu li:hover a span.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);}
 
+
 /********** 헤더 서브 **********/
 .wrap.sub {padding-top:128px;}
 .wrap.sub #header {background:rgba(55,103,149,1.0);}
@@ -136,6 +145,7 @@ transform: rotateZ(-45deg);
 .wrap.sub .nav-wrap #primary-nav ul li .sub-menu li a span.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);}
 .wrap.sub .nav-wrap #primary-nav ul li .sub-menu li:hover a span.underline.blue {background-image: linear-gradient(transparent 60%, #d7e1ea 40%);}
 
+
 /********** 호버 언더라인 **********/
 .underline {line-height: 2.0;background-image: linear-gradient(transparent calc(100% - 3px), #000 3px);background-repeat: no-repeat;background-size: 0% 100%;transition: background-size 0.8s;cursor: pointer;}
 .underline.blue {background-image: linear-gradient(transparent 60%, #284a6a 40%);}
@@ -148,7 +158,6 @@ section .inner p.desc {font-size: 18px;color:#666;margin-bottom:40px;}
 .contents {width:1400px;margin:0 auto;padding-bottom:140px;min-height:600px;}
 
 
-
 /********** 메인섹션1 **********/
 .sec1 {}
 .sec1 .inner .banner {position: relative;width:100%;height:600px;background: url(/images/bg/bg-mainbanner.jpg) no-repeat;background-size:cover;}
@@ -194,7 +203,7 @@ transform: rotate(45deg);
 .sec3 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:30px;}
 .sec3 .pickSwiper .swiper-slide .list-box {background: #fff;outline:1px solid #ddd;height:390px;}
 .sec3 .pickSwiper .swiper-slide .list-box .images {padding:30px 0px;height:195px;border-bottom:1px solid #ddd;}
-.sec3 .pickSwiper .swiper-slide .list-box .images a img {height:100%;}
+.sec3 .pickSwiper .swiper-slide .list-box .images a img {width:140px;height:100%;}
 .sec3 .pickSwiper .swiper-slide .list-box .subject {padding:20px 30px 30px;text-align: left;}
 .sec3 .pickSwiper .swiper-slide .list-box .subject .block {display:inline-block;width:100%;margin-bottom:10px;}
 .sec3 .pickSwiper .swiper-slide .list-box .subject .cla {display:inline;background:#e9e6df;padding:2px 10px;font-size:12px;color:#666;border-radius:30px;}
@@ -717,25 +726,27 @@ transform: rotate(45deg);}
 .filter-head h2 {float: left;font-size: 18px;font-weight: 600;}
 .filter-head .btn-filter-reset {float: right;background: url(/images/icon/icon-data-reset.png) no-repeat right center;padding: 4px 22px 4px 0px;font-size:14px;font-weight: 400;color:#666;}
 .filter-wrap .choice-condition {display:inline-block;padding-top: 14px;color: #707070;}
-.filter-wrap .choice-condition ul li {font-size:12px;background:#f4f4f4;float:left;padding:2px 5px 3px 10px;border-radius: 50px;margin:0px 5px 5px 0px;border:1px solid #ddd;background:url(/images/icon/icon-data-close.png) no-repeat #f4f4f4;background-position: 92% center;cursor: pointer;}
+.filter-wrap .choice-condition ul li {font-size:12px;background:#f4f4f4;float:left;padding:2px 30px 3px 10px;border-radius: 50px;margin:0px 5px 5px 0px;border:1px solid #ddd;background:url(/images/icon/icon-data-close.png) no-repeat #f4f4f4;background-position: 92% center;cursor: pointer;}
 .filter-wrap .choice-condition .sign {margin: 0 10px;}
 .filter-wrap .choice-condition em {color: #333;}
-.filter-wrap .choice-condition .btn-del-filter {margin-left: 10px;text-indent: -9999px;overflow: hidden;width: 13px;height: 13px;vertical-align: sub;background: url(/images/kccf/btn/btn-cnl.jpg) no-repeat right center;}
+.filter-wrap .choice-condition .btn-del-filter {margin-left: 10px;text-indent: -9999px;overflow: hidden;width: 13px;height: 13px;vertical-align: sub;background: url(/images/btn/btn-cnl.jpg) no-repeat right center;}
 .filter-wrap .filter {margin-top: 32px;}
 .filter-wrap .filter-tit {clear: both;border-bottom: 1px solid #ccc;padding-bottom: 6px;_margin-bottom: 16px;}
 .filter-wrap .filter-tit h3 {color: #000;font-size: 16px;float: left;}
-.filter-wrap .filter-tit .btn-toggle {float: right;background: url(/images/kccf/btn/btn-minus.jpg) no-repeat center right;text-indent: -9999px;}
-.filter-wrap .filter-tit .btn-toggle.on {background: url(/images/kccf/btn/btn-plus.png) no-repeat center right;}
+.filter-wrap .filter-tit .btn-toggle {float: right;background: url(/images/btn/btn-minus.jpg) no-repeat center right;text-indent: -9999px;}
+.filter-wrap .filter-tit .btn-toggle.on {background: url(/images/btn/btn-plus.png) no-repeat center right;}
 .filter-wrap .filter-tit:after {content: "";display: block;clear: both;}
 .filter-wrap .filter .depth-1 {margin-top: 11px;padding-left: 10px;}
 .filter-wrap .filter .depth-1 .check label {background:url(/images/icon/icon-data-downarr.png) no-repeat;background-position: 95% center;padding-right:20px;}
 .filter-wrap .filter .depth-1.on .check label {background:url(/images/icon/icon-data-uparr.png) no-repeat;background-position: 95% center;padding-right:20px;color:#376795;font-weight: 400;}
+
 .filter-wrap .filter.nodepth .depth-1 .check label {background: none;}
 .filter-wrap .filter.nodepth .depth-1.on .check label {background: none;}
+
 .filter-wrap .filter .depth-1:after {content: "";display: block;clear: both;}
 .filter-wrap .filter .depth-1 .check {float: left;}
-.filter-wrap .filter .depth-1 .btn-toggle {float: left;background: url(/images/kccf/btn/btn-arrow-down.png) no-repeat right center;text-indent: -9999px;}
-.filter-wrap .filter .depth-1.on .btn-toggle {background: url(/images/kccf/btn/btn-arrow-up.png) no-repeat right center;}
+.filter-wrap .filter .depth-1 .btn-toggle {float: left;background: url(/images/btn/btn-arrow-down.png) no-repeat right center;text-indent: -9999px;}
+.filter-wrap .filter .depth-1.on .btn-toggle {background: url(/images/btn/btn-arrow-up.png) no-repeat right center;}
 .filter-wrap .filter .depth-2 {padding-left: 10px;display: none;}
 .filter-wrap .filter .depth-2 li {margin-top: 6px;}
 .filter-wrap .filter .depth-2 li label {padding-left: 15px;}
@@ -799,9 +810,10 @@ transform: rotate(45deg);}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.type span.online {background:#376795;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.type span.loan {background:#b68946;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.type span.visit {background:#2b8b99;}
+.data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.type span.etc {background:#e9e6df;color:#222;}
+
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.poss {color:#3f8f4a;font-weight: 400;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.imposs {color:#c11c35;font-weight: 400;}
-.data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.type span.etc {background:#e9e6df;color:#222;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data:hover > div.img {outline:3px solid #4a7ba6;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.img .favorites {display:none;cursor:pointer;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.img:hover .favorites {display:inline-block;position: absolute;right:10px;bottom:10px;}
@@ -810,11 +822,13 @@ transform: rotate(45deg);}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-data > div.img .favorites:hover .on {display:inline-block;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn button {font-size:14px;height:30px;height:30px;border-radius:3px;margin-bottom:5px;width:100px;color:#fff;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn p {font-size:12px;color:#3f8f4a;font-weight: 400;padding:15px 0px;}
+.data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn.nomagin {padding:0;}
+.data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn.nomagin p {padding-top:0px;}
+
+
 .data .inner .tabs_item .list-cart-wrap .list-data div.list.resu {height:auto;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result {text-align: center;width:100%;padding:30px 0px;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result .icon {margin-bottom:10px;}
-.data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn.nomagin {padding:0;}
-.data .inner .tabs_item .list-cart-wrap .list-data div.list > div.t-btn.nomagin p {padding-top:0px;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result .text1 {margin-bottom:5px;font-size:18px;color:#666;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result .text2 {margin-bottom:30px;font-size:24px;color:#333;font-weight: 500;}
 .data .inner .tabs_item .list-cart-wrap .list-data div.list > .no-result .text2 span {color:#d47b1c;}
@@ -934,7 +948,7 @@ transform: rotate(45deg);}
 .data.detail .inner .row-bottom .DetailSwiper2 .items .List a.inner {display:block;}
 .data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner.light-type {color:#666;background-color:#fff;}
 .data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner div.thumbnail {overflow:hidden;position:relative;background-color:#f8f8f8;}
-.data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner div.thumbnail span.image-frame {display:block;height:100%;background:url('/images/kccf/img/img-no-image.gif') no-repeat 50% 0;background-size:contain;}
+.data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner div.thumbnail span.image-frame {display:block;height:100%;background:url('/images/img/img-no-image.gif') no-repeat 50% 0;background-size:contain;}
 .data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner div.thumbnail span.image-frame img {width:100%;height:100%;}
 .data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner div.thumbnail div.detail-cover {position:absolute;left:0;right:0;top:0;height:100%;padding:0% 15px;border:1px solid #2e2e2e;font-size:12px;text-align:left;color:#fff;background-color:rgba(0,0,0,0.8);opacity:0;border-radius:10px;transition:opacity 0.3s ease;}
 .data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner div.thumbnail div.detail-cover strong {display:block;padding:30px 0px 10px;font-size:18px;border-bottom:1px solid #555;margin-bottom:10px;}
@@ -1246,7 +1260,9 @@ transform: rotate(45deg);}
 .noti-data .list-accordion .question {background: transparent url(/images/btn/btn-arrow-open.png) no-repeat 25px center;display: table;width: 100%;font-size: 16px;color: #666;border-bottom: 1px solid #ddd;}
 .noti-data .list-accordion .question span {display: table-cell;padding-left: 25px;height: 58px;vertical-align: middle;text-align: left;}
 .noti-data .list-accordion .question span:last-child {padding-right: 50px;}
-.noti-data .list-accordion .question .type {width: 210px;box-sizing: border-box;padding-left: 65px;font-weight: 600;color: #000;}
+.noti-data .list-accordion .question .type {background:none;width: 210px;box-sizing: border-box;padding-left: 65px;font-weight: 600;color: #000;}
+.noti-data .list-accordion .question .type::before {background: none;}
+.noti-data .list-accordion .question.on .type::before {background: none;}
 .noti-data .list-accordion .question .date {position: absolute;right:0px;top:22px;font-size:12px;}
 .noti-data .list-accordion .question.on {background: url(/images/btn/btn-arrow-close.png) no-repeat 25px center #556676;}
 .noti-data .list-accordion .question.on span {font-size:16px;color:#fff;font-weight: 400;}
@@ -1321,8 +1337,8 @@ transform: rotate(45deg);}
 .view-body .attachments {width: 100%;border-top: 1px solid #ddd;padding: 0 20px;box-sizing: border-box;}
 .view-body .attachments:after {content: "";display: block;clear: both;}
 .view-body .attachments li {height: 60px;margin-right: 30px;line-height: 60px;float: left;}
-.view-body .attachments li a {display: block;padding-left: 25px;color: #666;background:url(/images/kccf/icon/icon-attach.png) no-repeat left center;}
-.view-body .attachments li a:hover {background:url(/images/kccf/icon/icon-attach-hover.png) no-repeat left center;color: #000;}
+.view-body .attachments li a {display: block;padding-left: 25px;color: #666;background:url(/images/icon/icon-attach.png) no-repeat left center;}
+.view-body .attachments li a:hover {background:url(/images/icon/icon-attach-hover.png) no-repeat left center;color: #000;}
 .view-body .attachments li a em {color: #999;}
 .view-body .answer {padding: 30px 0px;color: #666;border-bottom: 1px solid #ddd;border-top:1px solid #333;background: #f6f6f6;margin-top: 20px;}
 .view-body .answer .answer-top {font-size: 16px;color: #2781c1;padding:0px 2% 25px;border-bottom: 1px solid #ddd;display:inline-block;width:96%}
@@ -1342,7 +1358,7 @@ transform: rotate(45deg);}
 .community-write .required-text span {color:red;font-size:20px;vertical-align: middle;margin:4px 2px 0px 0px;display: inline-block;}
 .community-write input {border-radius: 3px;border: 1px solid #ddd;line-height: 36px;display: block;padding: 0 15px;height: 38px;box-sizing: border-box;width: 100%;}
 .community-write textarea {display: block;padding: 15px;height: 360px;border: 1px solid #ddd;border-radius: 3px;box-sizing: border-box;width: 100%;}
-.community-write select {box-sizing: border-box;display: block;width: 100%;height: 38px;padding: 0 15px;border: 1px solid #ddd;border-radius: 3px;line-height: 36px;background: url(/images/kccf/btn/btn-select-qna.png) no-repeat center right;}
+.community-write select {box-sizing: border-box;display: block;width: 100%;height: 38px;padding: 0 15px;border: 1px solid #ddd;border-radius: 3px;line-height: 36px;background: url(/images/btn/btn-select-qna.png) no-repeat center right;}
 
 .qna-write-table {border-top: 2px solid #000;border-bottom: 1px solid #000;}
 .qna-write-table li {display: table;border-bottom: 1px solid #ddd;width: 100%;min-height:42px;line-height: 42px;}
@@ -1488,6 +1504,60 @@ transform: rotate(45deg);}
 .qna .btn-box {float:right;}
 
 
+.privacy .top-bg {width:1200px;height:270px;margin:0 auto 50px;background: url(/images/bg/bg-privacy.jpg) no-repeat center;text-align: left;}
+.privacy .top-bg p {color:#fff;}
+.privacy .top-bg p:nth-child(1) {display: inline-block;margin:90px 0px 10px 350px;font-size:22px;font-weight: 500;}
+.privacy .top-bg p:nth-child(2) {display: inline-block;margin:0px 0px 0px 350px;font-size:16px;font-weight: 100;}
+.privacy .con {width:1200px;margin:0 auto;text-align: left;}
+.privacy .con .sec {border-bottom:1px solid #ddd;padding-bottom:40px;margin-bottom:40px;}
+.privacy .con .sec:last-child {border-bottom:0;}
+.privacy .con .sec h2 {margin-bottom:10px;font-size: 20px;color:#376795;font-weight: 500;}
+.privacy .con .sec p {font-size:14px;color:#444;letter-spacing: -0.5px;}
+.privacy .con .sec ul li {font-size:14px;line-height: 26px;color:#444;letter-spacing: -0.5px;}
+.privacy .con .sec ul.d2 {padding-left:15px;margin-bottom:15px;}
+.privacy .con .sec ul.d3 {padding-left:18px;margin-bottom:15px;}
+.privacy .con .sec ul li.color {color:#008dd9;font-weight: 500;border-bottom:1px solid #008dd9;display: inline;padding-bottom:2px;}
+
+
+.service .top-bg {width:1200px;height:270px;margin:0 auto 50px;background: url(/images/bg/bg-service.jpg) no-repeat center;text-align: left;}
+.service .top-bg p {color:#fff;}
+.service .top-bg p:nth-child(1) {display: inline-block;margin:90px 0px 10px 350px;font-size:22px;font-weight: 500;}
+.service .top-bg p:nth-child(2) {display: inline-block;margin:0px 0px 0px 350px;font-size:16px;font-weight: 100;}
+.service .con {width:1200px;margin:0 auto;text-align: left;}
+.service .con .sec {border-bottom:1px solid #ddd;padding-bottom:40px;margin-bottom:40px;}
+.service .con .sec:last-child {border-bottom:0;}
+.service .con .sec h2 {margin-bottom:10px;font-size: 20px;color:#376795;font-weight: 500;}
+.service .con .sec p {font-size:14px;color:#444;letter-spacing: -0.5px;}
+.service .con .sec ul li {font-size:14px;line-height: 26px;color:#444;letter-spacing: -0.5px;}
+.service .con .sec ul.d2 {padding-left:15px;margin-bottom:15px;}
+.service .con .sec ul.d3 {padding-left:18px;margin-bottom:15px;}
+.service .con .sec ul li.color {color:#008dd9;font-weight: 500;border-bottom:1px solid #008dd9;display: inline;padding-bottom:2px;}
+
+
+.error {text-align: center;width:100%;height: 100vh;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+.error .text h1 {font-size:18px;color:#474848;font-weight: 400;}
+.error .text h1 a span.title {margin-right:10px;margin-left:5px;padding-right:10px;border-right:1px solid #ddd;height:17px;line-height:17px;display: inline-block;}
+.error .text h1 a img {vertical-align: middle;margin:0px 0px 10px;}
+.error .text p:nth-of-type(1) {font-size:30px;font-weight: 500;margin-bottom:5px;}
+.error .text p:nth-of-type(1) span {color:#d47b1c;}
+.error .text p:nth-of-type(2) {font-size:20px;font-weight: 300;margin-bottom:30px;color:#333;}
+.error .text p:nth-of-type(3) {margin-bottom:40px;}
+.error .box {width:100%;background: #366ea3;padding:40px 0px;position: relative;}
+.error .box p:nth-of-type(1) {font-size:16px;color:#fff;font-weight: 400;margin-bottom: 40px;}
+.error .box::before {content:'';position:absolute;top:calc(0% - 5px);right:calc(50% - 8px);display:inline-block;background: #366ea3;width:14px;height:14px;border-radius:3px;z-index: 1;
+-webkit-transform: rotate(45deg);
+-moz-transform: rotate(45deg);
+-o-transform: rotate(45deg);
+transform: rotate(45deg);
+}
+.error .box .btn {margin:0px 0px;display:inline-block;padding:0;width:100%;}
+.error .box .btn a {display: inline-block;color:#fff;border-radius: 3px;padding:4px 30px;margin:0px 5px;font-size:14px;font-weight:500;}
+.error .box .btn a.btn-white {color:#366ea3;}
+.error .box .btn a.btn-white:hover {background:#fff;}
+.error .box .btn a.btn-color {background:#214567;}
+
+
+
 /* 공유하기 팝업 */
 .pop-sharing {display: none;z-index: 200;}
 .pop-sharing .pop-wrap {width: 404px;height: auto;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;} 
@@ -1782,11 +1852,11 @@ animation: animate-bg2 2.0s 1.9s ease-in infinite;
 .conditions-wrap .selected-conditions:after {content: "";display: block;clear: both;position: relative;}
 .conditions-wrap .selected-conditions .title {width: 100%;color: #333;padding-top: 6px;position: relative;}
 .conditions-wrap .selected-conditions .title p {float: left;margin-right: 10px;font-weight: 300;color:#fff;background: #b68948;padding:5px 15px;font-size:14px;border-radius:50px;}
-.conditions-wrap .selected-conditions .title button {width: 76px;height: 20px;overflow: hidden;border: 1px solid #ddd;border-radius: 2px;background:#f4f4f4 url(/images/btn/btn-refresh.png) no-repeat center right;position: absolute;right:10px;top:10px;border:0;outline:0;background-color: transparent;}
+.conditions-wrap .selected-conditions .title button {width: 76px;height: 20px;overflow: hidden;border: 1px solid #ddd;border-radius: 2px;position: absolute;right:10px;top:10px;border:0;outline:0;background-color: transparent;}
 .conditions-wrap .selected-conditions .conditions {float: left;width: calc(100% - 120px);}
 .conditions-wrap .selected-conditions .conditions li {display: inline-block;margin-right: 6px;overflow: hidden;}
 .conditions-wrap .selected-conditions .conditions li button {background: #f4f4f4;height: 30px;padding: 0 15px;font: 12px 'dotum','돋움', sans-serif;color: #666;border: 1px solid #ddd;border-radius: 16px;}
-.conditions-wrap .selected-conditions .conditions li button:after {content: "";display: inline-block;margin-left: 10px;width: 10px;height: 10px;background: url(/images/btn/btn-close-maplayer.png) no-repeat center;background-size: 7px;}
+.conditions-wrap .selected-conditions .conditions li button:after {content: "";display: inline-block;margin-left: 10px;width: 10px;height: 10px;}
 .conditions-wrap .selected-conditions .conditions li button:hover,
 .conditions-wrap .selected-conditions .conditions li button:focus {color: #000;border-color: #666;}
 .conditions-wrap .conditions-box {border: 1px solid #ccc;background: #f4f4f4;border-bottom: none;border-radius: 0 0 4px 4px;}
@@ -1918,13 +1988,37 @@ animation: animate-bg2 2.0s 1.9s ease-in infinite;
 
 }
 
-/* 789px 이하 */
-@media all and (max-width:789px) {
-
+/* 768px 이하 */
+@media all and (max-width:768px) {
+    .wrap {min-width: 100%;}
+    .wrap header .inner {width:100%;}
+    .wrap .nav-wrap .inner {width:100%;}
+    .sec1 .inner .color-box {width:100%;}
+    .sec2 .keyword-box {width:100%;}
+    .sec5 .inner {width:100%;}
+    .sec5 .inner .tab_content {width:90%;padding:30px 5%;}
+    .sec7 .inner {width:100%;}
+    .sec7 .inner .Fl {width:100%;margin:0;}
+    footer .inner {width:100%;}
+    
+    .wrap header {background:none;}
+    .wrap .nav-wrap {height:100%;background:none;top:0;}
+    .wrap .nav-wrap .BG {content: '';display: inline-block;width:100%;height:100%;background: rgba(0,0,0,0.5);position: fixed;top:0px;left:0px;z-index: -1;}
+    .wrap .Btn {position: absolute;right:5%;top:50px;z-index: 999;display: inline-block;}
+    #primary-nav .downarrow:before {content: '\25b8';}
+    .wrap .nav-wrap #primary-nav.mobile ul {text-align: left;top:auto;}
+    .wrap .nav-wrap #primary-nav.mobile li {border-bottom:1px solid #ddd;line-height: normal;text-align: left;}
+    .wrap .nav-wrap #primary-nav.mobile {background: #333;width:300px;height:100vh;top:0px;right:-1000px;left:auto;
+    -webkit-transition:all 0.5s ease;
+    -moz-transition:all 0.5s ease;
+    -o-transition:all 0.5s ease;
+    transition:all 0.5s ease;
+    }
+    .wrap .nav-wrap #primary-nav.mobile ul .sub-menu {display:none;}
 }
 
-/* 389px 이하 */
-@media all and (max-width: 369px) {
+/* 368px 이하 */
+@media all and (max-width: 368px) {
 
 }