회원정책관리 기능 구현

style24.admin/src/main/java/com/style24/admin/biz/dao/TsaEnvsetDao.java

@@ -1,34 +1,52 @@
-package com.style24.admin.biz.dao;
-
-import java.util.Collection;
-
-import com.style24.core.support.annotation.ShopDs;
-import com.style24.persistence.domain.Envset;
-
-/**
- * 환경설정 Dao
- * 
- * @author gagamel
- * @since 2020. 10. 21
- */
-@ShopDs
-public interface TsaEnvsetDao {
-
-	/**
-	 * 환경설정 저장
-	 * @param envset - 환경설정 정보
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	void createEnvset(Envset envset);
-
-	/**
-	 * 환경설정 목록
-	 * @param envset - 환경설정 정보
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	Collection<Envset> getEnvsetList(Envset envset);
-
-}
+package com.style24.admin.biz.dao;
+
+import java.util.Collection;
+
+import com.style24.core.support.annotation.ShopDs;
+import com.style24.persistence.domain.CustGradePolicy;
+import com.style24.persistence.domain.Envset;
+
+/**
+ * 환경설정 Dao
+ * 
+ * @author gagamel
+ * @since 2020. 10. 21
+ */
+@ShopDs
+public interface TsaEnvsetDao {
+
+	/**
+	 * 환경설정 저장
+	 * @param envset - 환경설정 정보
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	void createEnvset(Envset envset);
+
+	/**
+	 * 환경설정 목록
+	 * @param envset - 환경설정 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	Collection<Envset> getEnvsetList(Envset envset);
+
+	/**
+	 * 회원등급정책 저장
+	 * @param policy - 회원등급정책 정보
+	 * @author gagamel
+	 * @since 2021. 1. 7
+	 */
+	void createCustomerGradePolicy(CustGradePolicy policy);
+
+	/**
+	 * 회원등급정책 목록
+	 * @param policy - 회원등급정책 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 7
+	 */
+	Collection<CustGradePolicy> getCustomerGradePolicyList(CustGradePolicy policy);
+
+}

style24.admin/src/main/java/com/style24/admin/biz/service/TsaEnvsetService.java

@@ -1,74 +1,98 @@
-package com.style24.admin.biz.service;
-
-import java.util.Collection;
-
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.cache.annotation.CacheEvict;
-import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
-
-import com.style24.admin.biz.dao.TsaEnvsetDao;
-import com.style24.admin.support.security.session.TsaSession;
-import com.style24.core.biz.dao.TscEnvsetDao;
-import com.style24.persistence.domain.Envset;
-
-import lombok.extern.slf4j.Slf4j;
-
-/**
- * 환경설정 Service
- *
- * @author gagamel
- * @since 2020. 10. 21
- */
-@Service
-@Slf4j
-public class TsaEnvsetService {
-
-	@Autowired
-	private TscEnvsetDao cenvsetDao;
-
-	@Autowired
-	private TsaEnvsetDao envsetDao;
-
-	/**
-	 * 환경설정정보 저장
-	 * 		정책은 중요한 정보로서 캐싱 문제 발생 시 심각해질 수 있으므로 캐싱처리 안 함
-	 * @param envset - 환경설정 정보
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	@Transactional("shopTxnManager")
-	public void createEnvset(Envset envset) {
-		envset.setRegNo(TsaSession.getInfo().getUserNo());
-		envsetDao.createEnvset(envset);
-	}
-
-	/**
-	 * 환경설정정보 - 메타정보 저장. 수정 시 캐싱 삭제
-	 * @param envset - 환경설정 정보
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	@Transactional("shopTxnManager")
-	@CacheEvict(value = "metainfo", allEntries = true)
-	public void createEnvsetMetaInfo(Envset envset) {
-		envset.setRegNo(TsaSession.getInfo().getUserNo());
-		envsetDao.createEnvset(envset);
-	}
-
-	/**
-	 * 환경설정이력 목록
-	 * @param siteCd - 사이트코드
-	 * @param envsetType - 환경설정유형
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	public Collection<Envset> getEnvsetHistoryList(String siteCd, String envsetType) {
-		Envset envset = new Envset();
-		envset.setSiteCd(siteCd);
-		envset.setEnvsetType(envsetType);
-		return envsetDao.getEnvsetList(envset);
-	}
-
-}
+package com.style24.admin.biz.service;
+
+import java.util.Collection;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.cache.annotation.CacheEvict;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import com.style24.admin.biz.dao.TsaEnvsetDao;
+import com.style24.admin.support.security.session.TsaSession;
+import com.style24.core.biz.dao.TscEnvsetDao;
+import com.style24.persistence.domain.CustGradePolicy;
+import com.style24.persistence.domain.Envset;
+
+import lombok.extern.slf4j.Slf4j;
+
+/**
+ * 환경설정 Service
+ *
+ * @author gagamel
+ * @since 2020. 10. 21
+ */
+@Service
+@Slf4j
+public class TsaEnvsetService {
+
+	@Autowired
+	private TscEnvsetDao cenvsetDao;
+
+	@Autowired
+	private TsaEnvsetDao envsetDao;
+
+	/**
+	 * 환경설정정보 저장
+	 * 		정책은 중요한 정보로서 캐싱 문제 발생 시 심각해질 수 있으므로 캐싱처리 안 함
+	 * @param envset - 환경설정 정보
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	@Transactional("shopTxnManager")
+	public void createEnvset(Envset envset) {
+		envset.setRegNo(TsaSession.getInfo().getUserNo());
+		envsetDao.createEnvset(envset);
+	}
+
+	/**
+	 * 환경설정정보 - 메타정보 저장. 수정 시 캐싱 삭제
+	 * @param envset - 환경설정 정보
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	@Transactional("shopTxnManager")
+	@CacheEvict(value = "metainfo", allEntries = true)
+	public void createEnvsetMetaInfo(Envset envset) {
+		envset.setRegNo(TsaSession.getInfo().getUserNo());
+		envsetDao.createEnvset(envset);
+	}
+
+	/**
+	 * 환경설정이력 목록
+	 * @param siteCd - 사이트코드
+	 * @param envsetType - 환경설정유형
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	public Collection<Envset> getEnvsetHistoryList(String siteCd, String envsetType) {
+		Envset envset = new Envset();
+		envset.setSiteCd(siteCd);
+		envset.setEnvsetType(envsetType);
+		return envsetDao.getEnvsetList(envset);
+	}
+
+	/**
+	 * 회원등급정책 저장
+	 * @param policy - 회원등급정책 정보
+	 * @author gagamel
+	 * @since 2021. 1. 7
+	 */
+	public void createCustomerGradePolicy(CustGradePolicy policy) {
+		policy.setRegNo(TsaSession.getInfo().getUserNo());
+		policy.setUpdNo(TsaSession.getInfo().getUserNo());
+		envsetDao.createCustomerGradePolicy(policy);
+	}
+
+	/**
+	 * 회원등급정책 목록
+	 * @param policy - 회원등급정책 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 7
+	 */
+	public Collection<CustGradePolicy> getCustomerGradePolicyList(CustGradePolicy policy) {
+		return envsetDao.getCustomerGradePolicyList(policy);
+	}
+
+}

style24.admin/src/main/java/com/style24/admin/biz/web/TsaEnvsetController.java

@@ -1,276 +1,325 @@
-package com.style24.admin.biz.web;
-
-import java.util.Collection;
-
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.ResponseBody;
-import org.springframework.web.servlet.ModelAndView;
-
-import com.style24.admin.biz.service.TsaAnswerPhaseService;
-import com.style24.admin.biz.service.TsaClauseService;
-import com.style24.admin.biz.service.TsaEnvsetService;
-import com.style24.admin.biz.service.TsaRendererService;
-import com.style24.admin.support.controller.TsaBaseController;
-import com.style24.core.biz.service.TscEnvsetService;
-import com.style24.core.support.message.TscMessageByLocale;
-import com.style24.persistence.domain.AnswerPhase;
-import com.style24.persistence.domain.Clause;
-import com.style24.persistence.domain.Envset;
-
-import lombok.extern.slf4j.Slf4j;
-
-import com.gagaframework.web.rest.server.GagaResponse;
-
-/**
- * 환경설정 Controller
- *
- * @author gagamel
- * @since 2020. 10. 21
- */
-@Controller
-@RequestMapping("/envset")
-@Slf4j
-public class TsaEnvsetController extends TsaBaseController {
-
-	@Autowired
-	private TscMessageByLocale message;
-
-	@Autowired
-	private TscEnvsetService cenvsetService;
-
-	@Autowired
-	private TsaEnvsetService envsetService;
-
-	@Autowired
-	private TsaRendererService rendererService;
-
-	@Autowired
-	private TsaClauseService clauseService;
-
-	@Autowired
-	private TsaAnswerPhaseService ansPhaseService;
-
-	/**
-	 * 기본환경설정 화면
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	@GetMapping("/basic/form")
-	public ModelAndView basicSetForm() {
-		ModelAndView mav = new ModelAndView();
-
-		// 사이트 목록
-		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
-
-		mav.setViewName("envset/BasicEnvsetForm");
-
-		return mav;
-	}
-
-	/**
-	 * 사이트별 환경설정유형에 따른 환경설정 정보
-	 * @param siteCd - 사이트코드
-	 * @param envsetType - 환경설정유형
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	@GetMapping("/{siteCd}/{envsetType}")
-	@ResponseBody
-	public Envset getEnvset(@PathVariable String siteCd, @PathVariable String envsetType) {
-		return cenvsetService.getEnvset(siteCd, envsetType);
-	}
-
-	/**
-	 * 환경설정 정보 저장
-	 * @param envset - 환경설정 정보
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	@PostMapping("/create")
-	@ResponseBody
-	public GagaResponse createEnvset(@RequestBody Envset envset) {
-		if (envset.getEnvsetType().equals("B10")) {
-			// 메타 정보 수정 시는 캐싱 삭제되도록
-			// 중요하지 않은 정보로서 캐싱 삭제해도 됨.
-			envsetService.createEnvsetMetaInfo(envset);
-		} else {
-			// 그 외는 캐싱 삭제 안 함
-			// 정책은 중요한 정보로서 캐싱 문제 발생 시 심각해질 수 있으므로 캐싱처리 안 함(2020.05.14. gagamel)
-			envsetService.createEnvset(envset);
-		}
-
-		return super.ok(message.getMessage("SUCC_0001"));
-	}
-
-	/**
-	 * 사이트별 환경설정유형에 따른 환경설정이력 화면
-	 * @param siteCd - 사이트코드
-	 * @param envsetType - 환경설정유형
-	 * @param envsetTypeNm - 환경설정유형명
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	@GetMapping("/history/form")
-	public ModelAndView basicSetForm(@RequestParam(value = "siteCd", required = true) String siteCd, @RequestParam(value = "envsetType", required = true) String envsetType, @RequestParam(value = "envsetTypeNm", required = true) String envsetTypeNm) {
-		ModelAndView mav = new ModelAndView();
-
-		mav.addObject("siteCd", siteCd);
-		mav.addObject("envsetType", envsetType);
-		mav.addObject("envsetTypeNm", envsetTypeNm);
-
-		mav.setViewName("envset/EnvsetHistoryForm");
-
-		return mav;
-	}
-
-	/**
-	 * 사이트별 환경설정유형에 따른 환경설정이력 목록
-	 * @param siteCd - 사이트코드
-	 * @param envsetType - 환경설정유형
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 21
-	 */
-	@GetMapping("/history/{siteCd}/{envsetType}")
-	@ResponseBody
-	public Collection<Envset> getEnvsetHistoryList(@PathVariable String siteCd, @PathVariable String envsetType) {
-		return envsetService.getEnvsetHistoryList(siteCd, envsetType);
-	}
-
-	/**
-	 * 약관관리 화면
-	 * @return ModelAndView
-	 * @author gagamel
-	 * @since 2020. 10. 29
-	 */
-	@GetMapping("/clause/form")
-	public ModelAndView clauseForm() {
-		ModelAndView mav = new ModelAndView();
-
-		// 사이트 목록
-		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
-
-		// 약관유형 목록
-		mav.addObject("clauseTypeList", rendererService.getAvailCommonCodeList("G057"));
-
-		mav.setViewName("envset/ClauseForm");
-
-		return mav;
-	}
-
-	/**
-	 * 약관관리 목록
-	 * @param clause - 약관 정보
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 29
-	 */
-	@PostMapping("/clause/list")
-	@ResponseBody
-	public Collection<Clause> getClauseList(@RequestBody Clause clause) {
-		return clauseService.getClauseList(clause);
-	}
-
-	/**
-	 * 약관관리상세 화면
-	 * @param mode - 모드(N:신규, U:상세)
-	 * @param clauseSq - 약관일련번호
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 29
-	 */
-	@GetMapping("/clause/detail/form")
-	public ModelAndView clauseDetailForm(@RequestParam(value = "mode") String mode, @RequestParam(value = "clauseSq", required = false) Integer clauseSq) {
-		ModelAndView mav = new ModelAndView();
-
-		// 사이트 목록
-		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
-
-		// 약관유형 목록
-		mav.addObject("clauseTypeList", rendererService.getAvailCommonCodeList("G057"));
-
-		// 모드 값
-		mav.addObject("mode", mode);
-
-		if ("U".equals(mode)) {
-			mav.addObject("clauseInfo", clauseService.getClauseDetail(clauseSq));
-		}
-
-		mav.setViewName("envset/ClauseDetailForm");
-
-		return mav;
-	}
-
-	/**
-	 * 약관 생성/수정
-	 * @param clause - 약관 정보
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 29
-	 */
-	@PostMapping("/clause/save")
-	@ResponseBody
-	public GagaResponse saveClause(@RequestBody Clause clause) {
-		clauseService.saveClause(clause);
-		return super.ok(message.getMessage("SUCC_0001"));
-	}
-
-	/**
-	 * 답변문구관리
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 29
-	 */
-	@GetMapping("/answer/phase/form")
-	public ModelAndView answerPhaseForm() {
-		ModelAndView mav = new ModelAndView();
-
-		// 사이트콤보
-		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
-
-		// 답변종류콤보
-		mav.addObject("ansClsfList", rendererService.getAvailCommonCodeList("G061"));
-
-		mav.setViewName("envset/AnswerPhaseForm");
-
-		return mav;
-	}
-
-	/**
-	 * 답변문구 목록
-	 * @param ansPhase - 답변문구 정보
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 29
-	 */
-	@PostMapping("/answer/phase/list")
-	@ResponseBody
-	public Collection<AnswerPhase> getAnswerPhaseList(@RequestBody AnswerPhase ansPhase) {
-		return ansPhaseService.getAnswerPhaseList(ansPhase);
-	}
-
-	/**
-	 * 답변문구 저장
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 29
-	 */
-	@PostMapping("/answer/phase/save")
-	@ResponseBody
-	public GagaResponse saveAnswerPhase(@RequestBody AnswerPhase ansPhase) {
-		ansPhaseService.saveAnswerPhase(ansPhase);
-		return super.ok(message.getMessage("SUCC_0001"));
-	}
-
-}
+package com.style24.admin.biz.web;
+
+import java.util.Collection;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.servlet.ModelAndView;
+
+import com.style24.admin.biz.service.TsaAnswerPhaseService;
+import com.style24.admin.biz.service.TsaClauseService;
+import com.style24.admin.biz.service.TsaEnvsetService;
+import com.style24.admin.biz.service.TsaRendererService;
+import com.style24.admin.support.controller.TsaBaseController;
+import com.style24.core.biz.service.TscEnvsetService;
+import com.style24.core.support.message.TscMessageByLocale;
+import com.style24.persistence.domain.AnswerPhase;
+import com.style24.persistence.domain.Clause;
+import com.style24.persistence.domain.CustGradePolicy;
+import com.style24.persistence.domain.Envset;
+
+import lombok.extern.slf4j.Slf4j;
+
+import com.gagaframework.web.rest.server.GagaResponse;
+
+/**
+ * 환경설정 Controller
+ *
+ * @author gagamel
+ * @since 2020. 10. 21
+ */
+@Controller
+@RequestMapping("/envset")
+@Slf4j
+public class TsaEnvsetController extends TsaBaseController {
+
+	@Autowired
+	private TscMessageByLocale message;
+
+	@Autowired
+	private TscEnvsetService cenvsetService;
+
+	@Autowired
+	private TsaEnvsetService envsetService;
+
+	@Autowired
+	private TsaRendererService rendererService;
+
+	@Autowired
+	private TsaClauseService clauseService;
+
+	@Autowired
+	private TsaAnswerPhaseService ansPhaseService;
+
+	/**
+	 * 기본환경설정 화면
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	@GetMapping("/basic/form")
+	public ModelAndView basicSetForm() {
+		ModelAndView mav = new ModelAndView();
+
+		// 사이트 목록
+		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
+
+		mav.setViewName("envset/BasicEnvsetForm");
+
+		return mav;
+	}
+
+	/**
+	 * 사이트별 환경설정유형에 따른 환경설정 정보
+	 * @param siteCd - 사이트코드
+	 * @param envsetType - 환경설정유형
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	@GetMapping("/{siteCd}/{envsetType}")
+	@ResponseBody
+	public Envset getEnvset(@PathVariable String siteCd, @PathVariable String envsetType) {
+		return cenvsetService.getEnvset(siteCd, envsetType);
+	}
+
+	/**
+	 * 환경설정 정보 저장
+	 * @param envset - 환경설정 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	@PostMapping("/create")
+	@ResponseBody
+	public GagaResponse createEnvset(@RequestBody Envset envset) {
+		if (envset.getEnvsetType().equals("B10")) {
+			// 메타 정보 수정 시는 캐싱 삭제되도록
+			// 중요하지 않은 정보로서 캐싱 삭제해도 됨.
+			envsetService.createEnvsetMetaInfo(envset);
+		} else {
+			// 그 외는 캐싱 삭제 안 함
+			// 정책은 중요한 정보로서 캐싱 문제 발생 시 심각해질 수 있으므로 캐싱처리 안 함(2020.05.14. gagamel)
+			envsetService.createEnvset(envset);
+		}
+
+		return super.ok(message.getMessage("SUCC_0001"));
+	}
+
+	/**
+	 * 사이트별 환경설정유형에 따른 환경설정이력 화면
+	 * @param siteCd - 사이트코드
+	 * @param envsetType - 환경설정유형
+	 * @param envsetTypeNm - 환경설정유형명
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	@GetMapping("/history/form")
+	public ModelAndView basicSetForm(@RequestParam(value = "siteCd", required = true) String siteCd, @RequestParam(value = "envsetType", required = true) String envsetType, @RequestParam(value = "envsetTypeNm", required = true) String envsetTypeNm) {
+		ModelAndView mav = new ModelAndView();
+
+		mav.addObject("siteCd", siteCd);
+		mav.addObject("envsetType", envsetType);
+		mav.addObject("envsetTypeNm", envsetTypeNm);
+
+		mav.setViewName("envset/EnvsetHistoryForm");
+
+		return mav;
+	}
+
+	/**
+	 * 사이트별 환경설정유형에 따른 환경설정이력 목록
+	 * @param siteCd - 사이트코드
+	 * @param envsetType - 환경설정유형
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 21
+	 */
+	@GetMapping("/history/{siteCd}/{envsetType}")
+	@ResponseBody
+	public Collection<Envset> getEnvsetHistoryList(@PathVariable String siteCd, @PathVariable String envsetType) {
+		return envsetService.getEnvsetHistoryList(siteCd, envsetType);
+	}
+
+	/**
+	 * 회원등급정책관리 화면
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 6
+	 */
+	@GetMapping("/customer/grade/policy/form")
+	public ModelAndView customerGradePolicyForm() {
+		ModelAndView mav = new ModelAndView();
+
+		// 사이트
+		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
+
+		// 회원등급
+		mav.addObject("custGradeList", rendererService.getAvailCommonCodeList("G110"));
+
+		mav.setViewName("envset/CustomerGradePolicyForm");
+
+		return mav;
+	}
+
+	/**
+	 * 회원등급정책 목록
+	 * @param policy - 회원등급정책 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 7
+	 */
+	@PostMapping("/customer/grade/policy/list")
+	@ResponseBody
+	public Collection<CustGradePolicy> getCustomerGradePolicyList(@RequestBody CustGradePolicy policy) {
+		return envsetService.getCustomerGradePolicyList(policy);
+	}
+
+	/**
+	 * 회원등급정책 저장
+	 * @param policy - 회원등급정책 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 7
+	 */
+	@PostMapping("/customer/grade/policy/create")
+	@ResponseBody
+	public GagaResponse createCustomerGradePolicy(@RequestBody CustGradePolicy policy) {
+		envsetService.createCustomerGradePolicy(policy);
+		return super.ok(message.getMessage("SUCC_0001"));
+	}
+
+	/**
+	 * 약관관리 화면
+	 * @return ModelAndView
+	 * @author gagamel
+	 * @since 2020. 10. 29
+	 */
+	@GetMapping("/clause/form")
+	public ModelAndView clauseForm() {
+		ModelAndView mav = new ModelAndView();
+
+		// 사이트 목록
+		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
+
+		// 약관유형 목록
+		mav.addObject("clauseTypeList", rendererService.getAvailCommonCodeList("G057"));
+
+		mav.setViewName("envset/ClauseForm");
+
+		return mav;
+	}
+
+	/**
+	 * 약관관리 목록
+	 * @param clause - 약관 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 29
+	 */
+	@PostMapping("/clause/list")
+	@ResponseBody
+	public Collection<Clause> getClauseList(@RequestBody Clause clause) {
+		return clauseService.getClauseList(clause);
+	}
+
+	/**
+	 * 약관관리상세 화면
+	 * @param mode - 모드(N:신규, U:상세)
+	 * @param clauseSq - 약관일련번호
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 29
+	 */
+	@GetMapping("/clause/detail/form")
+	public ModelAndView clauseDetailForm(@RequestParam(value = "mode") String mode, @RequestParam(value = "clauseSq", required = false) Integer clauseSq) {
+		ModelAndView mav = new ModelAndView();
+
+		// 사이트 목록
+		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
+
+		// 약관유형 목록
+		mav.addObject("clauseTypeList", rendererService.getAvailCommonCodeList("G057"));
+
+		// 모드 값
+		mav.addObject("mode", mode);
+
+		if ("U".equals(mode)) {
+			mav.addObject("clauseInfo", clauseService.getClauseDetail(clauseSq));
+		}
+
+		mav.setViewName("envset/ClauseDetailForm");
+
+		return mav;
+	}
+
+	/**
+	 * 약관 생성/수정
+	 * @param clause - 약관 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 29
+	 */
+	@PostMapping("/clause/save")
+	@ResponseBody
+	public GagaResponse saveClause(@RequestBody Clause clause) {
+		clauseService.saveClause(clause);
+		return super.ok(message.getMessage("SUCC_0001"));
+	}
+
+	/**
+	 * 답변문구관리
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 29
+	 */
+	@GetMapping("/answer/phase/form")
+	public ModelAndView answerPhaseForm() {
+		ModelAndView mav = new ModelAndView();
+
+		// 사이트콤보
+		mav.addObject("siteList", rendererService.getAvailCommonCodeList("G000"));
+
+		// 답변종류콤보
+		mav.addObject("ansClsfList", rendererService.getAvailCommonCodeList("G061"));
+
+		mav.setViewName("envset/AnswerPhaseForm");
+
+		return mav;
+	}
+
+	/**
+	 * 답변문구 목록
+	 * @param ansPhase - 답변문구 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 29
+	 */
+	@PostMapping("/answer/phase/list")
+	@ResponseBody
+	public Collection<AnswerPhase> getAnswerPhaseList(@RequestBody AnswerPhase ansPhase) {
+		return ansPhaseService.getAnswerPhaseList(ansPhase);
+	}
+
+	/**
+	 * 답변문구 저장
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 29
+	 */
+	@PostMapping("/answer/phase/save")
+	@ResponseBody
+	public GagaResponse saveAnswerPhase(@RequestBody AnswerPhase ansPhase) {
+		ansPhaseService.saveAnswerPhase(ansPhase);
+		return super.ok(message.getMessage("SUCC_0001"));
+	}
+
+}

style24.admin/src/main/java/com/style24/persistence/domain/CustGradePolicy.java

@@ -0,0 +1,33 @@
+package com.style24.persistence.domain;
+
+import com.style24.persistence.TscBaseDomain;
+
+import lombok.Data;
+
+/**
+ * 회원등급정책 Domain
+ *
+ * @author
+ * @since 2021. 1. 7
+ */
+@SuppressWarnings("serial")
+@Data
+public class CustGradePolicy extends TscBaseDomain {
+
+	private String siteCd;			// 사이트코드
+	private String gradeCd;			// 등급코드
+	private String iconNm;			// 아이콘명(프론트 표기 접두사)
+	private int calMonths;			// 등급산정월수
+	private int minBuyAmt;			// 등급산정최소구매금액
+	private int minBuyCnt;			// 등급산정최소구매건수
+	private int buyExceptAmt;		// 구매제외금액(최소구매건수제외조건)
+	private String gradeCpnId1;		// 혜택쿠폰1
+	private String gradeCpnNm1;		// 혜택쿠폰명1
+	private String gradeCpnId2;		// 혜택쿠폰2
+	private String gradeCpnNm2;		// 혜택쿠폰명2
+	private String gradeCpnId3;		// 혜택쿠폰3
+	private String gradeCpnNm3;		// 혜택쿠폰명3
+	private int dispOrd;			// 표시순서
+	private String useYn;			// 사용여부
+
+}

style24.admin/src/main/java/com/style24/persistence/mybatis/shop/TsaEnvset.xml

@@ -1,64 +1,146 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
-<mapper namespace="com.style24.admin.biz.dao.TsaEnvsetDao">
-
-	<!-- 환경설정 생성 -->
-	<insert id="createEnvset" parameterType="Envset">
-		/* TsaEnvset.createEnvset */
-		INSERT INTO TB_ENVSET (
-		       ENVSET_SQ
-		     , SITE_CD
-		     , ENVSET_TYPE
-		     , ENVSET_NM
-		     , STR_SET_VAL1
-		     , STR_SET_VAL2
-		     , STR_SET_VAL3
-		     , STR_SET_VAL4
-		     , STR_SET_VAL5
-		     , STR_SET_VAL6
-		     , STR_SET_VAL7
-		     , STR_SET_VAL8
-		     , REG_NO
-		     , REG_DT
-		)
-		VALUES (
-		       NULL
-		     , #{siteCd}
-		     , #{envsetType}
-		     , #{envsetNm}
-		     , #{strSetVal1}
-		     , #{strSetVal2}
-		     , #{strSetVal3}
-		     , #{strSetVal4}
-		     , #{strSetVal5}
-		     , #{strSetVal6}
-		     , #{strSetVal7}
-		     , #{strSetVal8}
-		     , #{regNo}
-		     , NOW()
-		)
-	</insert>
-
-	<!-- 환경설정 목록 -->
-	<select id="getEnvsetList" parameterType="Envset" resultType="Envset">
-		/* TsaEnvset.getEnvsetList */
-		SELECT SITE_CD
-		     , ENVSET_TYPE
-		     , ENVSET_NM
-		     , STR_SET_VAL1
-		     , STR_SET_VAL2
-		     , STR_SET_VAL3
-		     , STR_SET_VAL4
-		     , STR_SET_VAL5
-		     , STR_SET_VAL6
-		     , STR_SET_VAL7
-		     , STR_SET_VAL8
-		     , FN_GET_USER_NM(REG_NO)             AS REG_NM
-		     , DATE_FORMAT(REG_DT,'%Y%m%d%H%i%S') AS REG_DT
-		FROM   TB_ENVSET
-		WHERE  SITE_CD = #{siteCd}
-		AND    ENVSET_TYPE = #{envsetType}
-		ORDER  BY ENVSET_SQ DESC
-	</select>
-
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.style24.admin.biz.dao.TsaEnvsetDao">
+
+	<!-- 환경설정 생성 -->
+	<insert id="createEnvset" parameterType="Envset">
+		/* TsaEnvset.createEnvset */
+		INSERT INTO TB_ENVSET (
+		       ENVSET_SQ
+		     , SITE_CD
+		     , ENVSET_TYPE
+		     , ENVSET_NM
+		     , STR_SET_VAL1
+		     , STR_SET_VAL2
+		     , STR_SET_VAL3
+		     , STR_SET_VAL4
+		     , STR_SET_VAL5
+		     , STR_SET_VAL6
+		     , STR_SET_VAL7
+		     , STR_SET_VAL8
+		     , REG_NO
+		     , REG_DT
+		)
+		VALUES (
+		       NULL
+		     , #{siteCd}
+		     , #{envsetType}
+		     , #{envsetNm}
+		     , #{strSetVal1}
+		     , #{strSetVal2}
+		     , #{strSetVal3}
+		     , #{strSetVal4}
+		     , #{strSetVal5}
+		     , #{strSetVal6}
+		     , #{strSetVal7}
+		     , #{strSetVal8}
+		     , #{regNo}
+		     , NOW()
+		)
+	</insert>
+
+	<!-- 환경설정 목록 -->
+	<select id="getEnvsetList" parameterType="Envset" resultType="Envset">
+		/* TsaEnvset.getEnvsetList */
+		SELECT SITE_CD
+		     , ENVSET_TYPE
+		     , ENVSET_NM
+		     , STR_SET_VAL1
+		     , STR_SET_VAL2
+		     , STR_SET_VAL3
+		     , STR_SET_VAL4
+		     , STR_SET_VAL5
+		     , STR_SET_VAL6
+		     , STR_SET_VAL7
+		     , STR_SET_VAL8
+		     , FN_GET_USER_NM(REG_NO)             AS REG_NM
+		     , DATE_FORMAT(REG_DT,'%Y%m%d%H%i%S') AS REG_DT
+		FROM   TB_ENVSET
+		WHERE  SITE_CD = #{siteCd}
+		AND    ENVSET_TYPE = #{envsetType}
+		ORDER  BY ENVSET_SQ DESC
+	</select>
+	
+	<!-- 회원등급정책 생성 -->
+	<insert id="createCustomerGradePolicy" parameterType="CustGradePolicy">
+		/* TsaEnvset.createCustomerGradePolicy */
+		INSERT INTO TB_CUST_GRADE_POLICY (
+		       SITE_CD
+		     , GRADE_CD
+		     , ICON_NM
+		     , CAL_MONTHS
+		     , MIN_BUY_AMT
+		     , MIN_BUY_CNT
+		     , BUY_EXCEPT_AMT
+		     , GRADE_CPN_ID1
+		     , GRADE_CPN_ID2
+		     , GRADE_CPN_ID3
+		     , DISP_ORD
+		     , USE_YN
+		     , REG_NO
+		     , REG_DT
+		     , UPD_NO
+		     , UPD_DT
+		)
+		VALUES (
+		       #{siteCd}
+		     , #{gradeCd}
+		     , #{iconNm}
+		     , #{calMonths}
+		     , #{minBuyAmt}
+		     , #{minBuyCnt}
+		     , #{buyExceptAmt}
+		     , #{gradeCpnId1}
+		     , #{gradeCpnId2}
+		     , #{gradeCpnId3}
+		     , #{dispOrd}
+		     , #{useYn}
+		     , #{regNo}
+		     , NOW()
+		     , #{updNo}
+		     , NOW()
+		)
+		ON DUPLICATE KEY UPDATE
+		       ICON_NM = #{iconNm}
+		     , CAL_MONTHS = #{calMonths}
+		     , MIN_BUY_AMT = #{minBuyAmt}
+		     , MIN_BUY_CNT = #{minBuyCnt}
+		     , BUY_EXCEPT_AMT = #{buyExceptAmt}
+		     , GRADE_CPN_ID1 = #{gradeCpnId1}
+		     , GRADE_CPN_ID2 = #{gradeCpnId2}
+		     , GRADE_CPN_ID3 = #{gradeCpnId3}
+		     , DISP_ORD = #{dispOrd}
+		     , USE_YN = #{useYn}
+		     , UPD_NO = #{updNo}
+		     , UPD_DT = NOW()
+	</insert>
+	
+	<!-- 회원등급정책 목록 -->
+	<select id="getCustomerGradePolicyList" parameterType="CustGradePolicy" resultType="CustGradePolicy">
+		/* TsaEnvset.getCustomerGradePolicyList */
+		SELECT SITE_CD
+		     , GRADE_CD
+		     , ICON_NM
+		     , CAL_MONTHS
+		     , MIN_BUY_AMT
+		     , MIN_BUY_CNT
+		     , BUY_EXCEPT_AMT
+		     , GRADE_CPN_ID1
+		     , FN_GET_COUPON_NM(GRADE_CPN_ID1)    AS GRADE_CPN_NM1
+		     , GRADE_CPN_ID2
+		     , FN_GET_COUPON_NM(GRADE_CPN_ID2)    AS GRADE_CPN_NM2
+		     , GRADE_CPN_ID3
+		     , FN_GET_COUPON_NM(GRADE_CPN_ID3)    AS GRADE_CPN_NM3
+		     , DISP_ORD
+		     , USE_YN
+		     , FN_GET_USER_NM(UPD_NO)             AS UPD_NM
+		     , DATE_FORMAT(UPD_DT,'%Y%m%d%H%i%S') AS UPD_DT
+		FROM   TB_CUST_GRADE_POLICY A
+		WHERE  SITE_CD = #{siteCd}
+		<if test="gradeCd != null and gradeCd != ''">
+		AND    GRADE_CD = #{gradeCd}
+		</if>
+		ORDER  BY SITE_CD, GRADE_CD
+	</select>
+
 </mapper>

style24.admin/src/main/webapp/WEB-INF/views/envset/AnswerPhaseForm.html

@@ -1,255 +1,253 @@
-<!DOCTYPE html>
-<html lang="ko"
-	xmlns:th="http://www.thymeleaf.org">
-	<!--
- *******************************************************************************
- * @source  : AnswerPhaseForm.html
- * @desc    : 답변문구관리 Page
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER  DATE         AUTHOR      DESCRIPTION
- * ===  ===========  ==========  =============================================
- * 1.0  2020.10.29   gagamel     최초 작성
- *******************************************************************************
- -->
-	<div id="main">
-		<!-- 메인타이틀 영역 -->
-		<div class="main-title">
-		</div>
-		<!-- //메인타이틀 영역 -->
-		
-		<!-- 메뉴 설명 -->
-		<div class="infoBox menu-desc">
-		</div>
-		<!-- //메뉴 설명 -->
-		
-		<!-- 검색조건 영역 -->
-		<div class="panelStyle">
-			<form id="searchForm" name="searchForm" action="#" th:action="@{'/envset/answer/phase/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
-				<table class="frmStyle" aria-describedby="검색조건">
-					<colgroup>
-						<col style="width:10%;"/>
-						<col style="width:20%;"/>
-						<col style="width:10%;"/>
-						<col style="width:20%;"/>
-						<col style="width:10%;"/>
-						<col style="width:20%;"/>
-						<col/>
-					</colgroup>
-					<tr>
-						<th>사이트</th>
-						<td>
-							<select name="siteCd">
-								<option value="">[전체]</option>
-								<option th:if="${siteList}" th:each="oneData, status : ${siteList}"th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
-							</select>
-						</td>
-						<th>답변종류</th>
-						<td>
-							<select name="ansClsf">
-								<option value="">[전체]</option>
-								<option th:if="${ansClsfList}" th:each="oneData, status : ${ansClsfList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
-							</select>
-						</td>
-						<th>답변제목</th>
-						<td>
-							<input type="text" name="ansTitle" class="w200"/>
-						</td>
-						<th>사용여부</th>
-						<td>
-							<select name="useYn">
-								<option value="">[전체]</option>
-								<option value="Y">[Y] Yes</option>
-								<option value="N">[N] No</option>
-							</select>
-						</td>
-					</tr>
-				</table>
-				
-				<ul class="panelBar">
-					<li class="center">
-						<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
-						<button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset();">초기화</button>
-					</li>
-				</ul>
-			</form>
-		</div>
-		<!-- 검색조건 영역 -->
-		
-		<!-- 리스트 영역 -->
-		<div class="panelStyle">
-			<!-- 버튼 배치 영역 -->
-			<ul class="panelBar">
-				<li class="right">
-					<button type="button" class="btn btn-default btn-lg" id="btnExcel">엑셀다운로드</button>
-				</li>
-			</ul>
-			<!-- //버튼 배치 영역 -->
-			
-			<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
-		</div>
-		
-		<!-- 등록/수정 -->
-		<div class="panelStyle">
-			<form id="detailForm" name="detailForm" action="#" th:action="@{'/envset/answer/phase/save'}">
-				<input type="hidden" name="ansSq" value=""/>
-				<table class="frmStyle" aria-describedby="등록폼">
-					<colgroup>
-						<col style="width:10%;"/>
-						<col style="width:20%;"/>
-						<col style="width:10%;"/>
-						<col style="width:20%;"/>
-						<col style="width:10%;"/>
-						<col style="width:20%;"/>
-						<col/>
-					</colgroup>
-					<tr>
-						<th>사이트<em class="required" title="필수"></em></th>
-						<td>
-							<select name="siteCd" required="required" data-valid-name="사이트">
-								<option>[전체]</option>
-								<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
-							</select>
-						</td>
-						<th>답변종류<em class="required" title="필수"></em></th>
-						<td>
-							<select name="ansClsf" required="required" data-valid-name="답변종류">
-								<option value="">[선택]</option>
-								<option th:if="${ansClsfList}" th:each="oneData, status : ${ansClsfList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
-							</select>
-						</td>
-						<th>사용여부</th>
-						<td>
-							<input type="hidden" name="useYn" value="Y"/>
-							<label class="chkBox"><input type="checkbox" name="chkUseYn" checked="checked"/>사용</label>
-						</td>
-					</tr>
-					<tr>
-						<th>답변제목<em class="required" title="필수"></em></th>
-						<td colspan="5">
-							<input type="text" name="ansTitle" required="required" data-valid-name="답변제목"/>
-						</td>
-						
-					</tr>
-					<tr>
-						<th>답변내용<em class="required" title="필수"></em></th>
-						<td colspan="5">
-							<textarea name="ansContent" class="textareaR3" required="required"  data-valid-name="답변내용"></textarea>
-						</td>
-					</tr>
-				</table>
-			</form>
-			
-			<!-- 버튼 배치 영역 -->
-			<ul class="panelBar">
-				<li class="right">
-					<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
-					<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
-				</li>
-			</ul>
-			<!-- //버튼 배치 영역 -->
-		</div>
-		<!-- 등록/수정 -->
-	</div>
-
-<script th:inline="javascript">
-/*<![CDATA[*/
-	var siteList = gagajf.convertToArray([[${siteList}]]);
-	var ansClsfList = gagajf.convertToArray([[${ansClsfList}]]);
-
-	var columnDefs = [
-		{headerName: "답변번호", field: "ansSq", width: 100, cellClass: 'text-center'},
-		{
-			headerName: "사이트", field: "siteCd", width: 150, cellClass: 'text-center',
-			valueGetter: function (params) { return gagaAgGrid.lookupValue(siteList, params.data.siteCd); }
-		},
-		{
-			headerName: "답변종류", field: "ansClsf", width: 150, cellClass: 'text-center',
-			valueGetter: function (params) { return gagaAgGrid.lookupValue(ansClsfList, params.data.ansClsf); }
-		},
-		{
-			headerName: "답변제목", field: "ansTitle", width: 350,
-			cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
-		},
-		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'},
-		{headerName: "등록자", field: "regNm", width: 150, cellClass: 'text-center'},
-		{
-			headerName: "등록일시", field: "regDt", width: 150, cellClass: 'text-center',
-			cellRenderer: function(params) { return gagaAgGrid.toDateTimeFormat(params.value); }
-		},
-		{headerName: "수정자", field: "updNm", width: 100, cellClass: 'text-center'},
-		{
-			headerName: "수정일시", field: "updDt", width: 150, cellClass: 'text-center',
-			cellRenderer: function(params) { return gagaAgGrid.toDateTimeFormat(params.value); }
-		}
-	];
-
-	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
-
-	// 셀 클릭 이벤트
-	gridOptions.onCellClicked = function(event) {
-		if (event.colDef.field != 'ansTitle')
-			return;
-		
-		$('#detailForm input[name=ansSq]').val(event.data.ansSq); // 답변일련번호
-		$('#detailForm select[name=siteCd]').val(event.data.siteCd); // 사이트
-		$('#detailForm select[name=ansClsf]').val(event.data.ansClsf); // 답변종류
-
-		if (event.data.useYn == 'Y') {
-			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', true);
-		} else {
-			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', false);
-		}
-		
-		$('#detailForm input[name=ansTitle]').val(event.data.ansTitle.replaceAll('&gt;','>')); // 답변제목
-		$('#detailForm textarea[name=ansContent]').val(event.data.ansContent); // 답변내용
-	}
-
-	// 검색
-	$('#btnSearch').on('click', function() {
-		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
-	});
-	
-	// 신규
-	$('#btnNew').on('click', function() {
-		$('#detailForm')[0].reset();
-		$('#detailForm input[name=ansSq]').val('');
-		$('#detailForm input[name=ansTitle]').focus();
-	});
-
-	// 저장/수정
-	$("#btnSave").on("click", function() {
-		// 필수값 체크
-		if (!gagajf.validation('#detailForm'))
-			return false;
-
-		mcxDialog.confirm('저장하시겠습니까?', {
-			cancelBtnText: "취소",
-			sureBtnText: "확인",
-			sureBtnClick: function() {
-				$('#detailForm input[name=useYn]').val($('#detailForm input:checkbox[name=chkUseYn]').is(':checked') ? 'Y' : 'N');
-				
-				gagajf.ajaxFormSubmit($('#detailForm').prop('action'), '#detailForm', function() {
-					$('btnNew').click();
-					$('#btnSearch').trigger('click');
-				});
-				
-				gagajf.ajaxJsonSubmit($(formId).prop("action"), jsonData, fnSaveCallback);
-			}
-		});
-	});
-
-	// 엑셀다운로드
-	$('#btnExcel').on('click', function() {
-		gagaAgGrid.exportToExcel('답변문구 목록', gridOptions);
-	});
-	
-	$(document).ready(function() {
-		gagaAgGrid.createGrid('gridList', gridOptions);
-	});
-/*]]>*/
-</script>
-
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+	<!--
+ *******************************************************************************
+ * @source  : AnswerPhaseForm.html
+ * @desc    : 답변문구관리 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2020.10.29   gagamel     최초 작성
+ *******************************************************************************
+ -->
+	<div id="main">
+		<!-- 메인타이틀 영역 -->
+		<div class="main-title">
+		</div>
+		<!-- //메인타이틀 영역 -->
+		
+		<!-- 메뉴 설명 -->
+		<div class="infoBox menu-desc">
+		</div>
+		<!-- //메뉴 설명 -->
+		
+		<!-- 검색조건 영역 -->
+		<div class="panelStyle">
+			<form id="searchForm" name="searchForm" action="#" th:action="@{'/envset/answer/phase/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
+				<table class="frmStyle" aria-describedby="검색조건">
+					<colgroup>
+						<col style="width:10%;"/>
+						<col style="width:20%;"/>
+						<col style="width:10%;"/>
+						<col style="width:20%;"/>
+						<col style="width:10%;"/>
+						<col style="width:20%;"/>
+						<col/>
+					</colgroup>
+					<tr>
+						<th>사이트</th>
+						<td>
+							<select name="siteCd">
+								<option value="">[전체]</option>
+								<option th:if="${siteList}" th:each="oneData, status : ${siteList}"th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+						<th>답변종류</th>
+						<td>
+							<select name="ansClsf">
+								<option value="">[전체]</option>
+								<option th:if="${ansClsfList}" th:each="oneData, status : ${ansClsfList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+						<th>답변제목</th>
+						<td>
+							<input type="text" name="ansTitle" class="w200"/>
+						</td>
+						<th>사용여부</th>
+						<td>
+							<select name="useYn">
+								<option value="">[전체]</option>
+								<option value="Y">[Y] Yes</option>
+								<option value="N">[N] No</option>
+							</select>
+						</td>
+					</tr>
+				</table>
+				
+				<ul class="panelBar">
+					<li class="center">
+						<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
+						<button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset();">초기화</button>
+					</li>
+				</ul>
+			</form>
+		</div>
+		<!-- 검색조건 영역 -->
+		
+		<!-- 리스트 영역 -->
+		<div class="panelStyle">
+			<!-- 버튼 배치 영역 -->
+			<ul class="panelBar">
+				<li class="right">
+					<button type="button" class="btn btn-default btn-lg" id="btnExcel">엑셀다운로드</button>
+				</li>
+			</ul>
+			<!-- //버튼 배치 영역 -->
+			
+			<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
+		</div>
+		
+		<!-- 등록/수정 -->
+		<div class="panelStyle">
+			<form id="detailForm" name="detailForm" action="#" th:action="@{'/envset/answer/phase/save'}">
+				<input type="hidden" name="ansSq" value=""/>
+				<table class="frmStyle" aria-describedby="등록폼">
+					<colgroup>
+						<col style="width:10%;"/>
+						<col style="width:20%;"/>
+						<col style="width:10%;"/>
+						<col style="width:20%;"/>
+						<col style="width:10%;"/>
+						<col style="width:20%;"/>
+						<col/>
+					</colgroup>
+					<tr>
+						<th>사이트<em class="required" title="필수"></em></th>
+						<td>
+							<select name="siteCd" required="required" data-valid-name="사이트">
+								<option>[선택]</option>
+								<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+						<th>답변종류<em class="required" title="필수"></em></th>
+						<td>
+							<select name="ansClsf" required="required" data-valid-name="답변종류">
+								<option value="">[선택]</option>
+								<option th:if="${ansClsfList}" th:each="oneData, status : ${ansClsfList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+						<th>사용여부</th>
+						<td>
+							<input type="hidden" name="useYn" value="Y"/>
+							<label class="chkBox"><input type="checkbox" name="chkUseYn" checked="checked"/>사용</label>
+						</td>
+					</tr>
+					<tr>
+						<th>답변제목<em class="required" title="필수"></em></th>
+						<td colspan="5">
+							<input type="text" name="ansTitle" maxlength="100" required="required" data-valid-name="답변제목"/>
+						</td>
+						
+					</tr>
+					<tr>
+						<th>답변내용<em class="required" title="필수"></em></th>
+						<td colspan="5">
+							<textarea name="ansContent" class="textareaR3" required="required"  data-valid-name="답변내용"></textarea>
+						</td>
+					</tr>
+				</table>
+			</form>
+			
+			<!-- 버튼 배치 영역 -->
+			<ul class="panelBar">
+				<li class="right">
+					<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
+					<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
+				</li>
+			</ul>
+			<!-- //버튼 배치 영역 -->
+		</div>
+		<!-- 등록/수정 -->
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	var siteList = gagajf.convertToArray([[${siteList}]]);
+	var ansClsfList = gagajf.convertToArray([[${ansClsfList}]]);
+
+	var columnDefs = [
+		{headerName: "답변번호", field: "ansSq", width: 100, cellClass: 'text-center'},
+		{
+			headerName: "사이트", field: "siteCd", width: 150, cellClass: 'text-center',
+			valueGetter: function (params) { return gagaAgGrid.lookupValue(siteList, params.data.siteCd); }
+		},
+		{
+			headerName: "답변종류", field: "ansClsf", width: 150, cellClass: 'text-center',
+			valueGetter: function (params) { return gagaAgGrid.lookupValue(ansClsfList, params.data.ansClsf); }
+		},
+		{
+			headerName: "답변제목", field: "ansTitle", width: 350,
+			cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
+		},
+		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'},
+		{headerName: "등록자", field: "regNm", width: 150, cellClass: 'text-center'},
+		{
+			headerName: "등록일시", field: "regDt", width: 150, cellClass: 'text-center',
+			cellRenderer: function(params) { return gagaAgGrid.toDateTimeFormat(params.value); }
+		},
+		{headerName: "수정자", field: "updNm", width: 100, cellClass: 'text-center'},
+		{
+			headerName: "수정일시", field: "updDt", width: 150, cellClass: 'text-center',
+			cellRenderer: function(params) { return gagaAgGrid.toDateTimeFormat(params.value); }
+		}
+	];
+
+	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
+
+	// 셀 클릭 이벤트
+	gridOptions.onCellClicked = function(event) {
+		if (event.colDef.field != 'ansTitle')
+			return;
+		
+		$('#detailForm input[name=ansSq]').val(event.data.ansSq); // 답변일련번호
+		$('#detailForm select[name=siteCd]').val(event.data.siteCd); // 사이트
+		$('#detailForm select[name=ansClsf]').val(event.data.ansClsf); // 답변종류
+
+		if (event.data.useYn == 'Y') {
+			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', true);
+		} else {
+			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', false);
+		}
+		
+		$('#detailForm input[name=ansTitle]').val(event.data.ansTitle.replaceAll('&gt;','>')); // 답변제목
+		$('#detailForm textarea[name=ansContent]').val(event.data.ansContent); // 답변내용
+	}
+
+	// 검색
+	$('#btnSearch').on('click', function() {
+		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
+	});
+	
+	// 신규
+	$('#btnNew').on('click', function() {
+		$('#detailForm')[0].reset();
+		$('#detailForm input[name=ansSq]').val('');
+		$('#detailForm input[name=ansTitle]').focus();
+	});
+
+	// 저장/수정
+	$("#btnSave").on("click", function() {
+		// 필수값 체크
+		if (!gagajf.validation('#detailForm'))
+			return false;
+
+		mcxDialog.confirm('저장하시겠습니까?', {
+			cancelBtnText: "취소",
+			sureBtnText: "확인",
+			sureBtnClick: function() {
+				$('#detailForm input[name=useYn]').val($('#detailForm input:checkbox[name=chkUseYn]').is(':checked') ? 'Y' : 'N');
+				
+				gagajf.ajaxFormSubmit($('#detailForm').prop('action'), '#detailForm', function() {
+					$('btnNew').click();
+					$('#btnSearch').trigger('click');
+				});
+			}
+		});
+	});
+
+	// 엑셀다운로드
+	$('#btnExcel').on('click', function() {
+		gagaAgGrid.exportToExcel('답변문구 목록', gridOptions);
+	});
+	
+	$(document).ready(function() {
+		gagaAgGrid.createGrid('gridList', gridOptions);
+	});
+/*]]>*/
+</script>
+
 </html>

style24.admin/src/main/webapp/WEB-INF/views/envset/BasicEnvsetForm.html

@@ -1,379 +1,379 @@
-<!DOCTYPE html>
-<html lang="ko"
-	xmlns:th="http://www.thymeleaf.org">
-<!--
- *******************************************************************************
- * @source  : BasicEnvsetForm.html
- * @desc    : 기본환경설정 Page
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER  DATE         AUTHOR      DESCRIPTION
- * ===  ===========  ==========  =============================================
- * 1.0  2020.10.21   gagamel     최초 작성
- *******************************************************************************
- -->
-	<div id="main">
-		<!-- 메인타이틀 영역 -->
-		<div class="main-title">
-		</div>
-		<!-- //메인타이틀 영역 -->
-		
-		<!-- 메뉴 설명 -->
-		<div class="infoBox menu-desc">
-		</div>
-		<!-- //메뉴 설명 -->
-		
-		<!-- 검색조건 영역 -->
-		<div class="panelStyle">
-			<table class="frmStyle" aria-describedby="검색조건">
-				<colgroup>
-					<col style="width:10%;"/>
-					<col/>
-				</colgroup>
-				<tr>
-					<th>사이트</th>
-					<td>
-						<select name="siteCd" class="w150" onchange="fnSearch();">
-							<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
-						</select>
-					</td>
-				</tr>
-			</table>
-		</div>
-		<!-- 검색조건 영역 -->
-
-		<div class="panelStyle">
-			<h4>[B10] 쇼핑몰Meta정보</h4>
-			<button type="button" class="btn btn-success btn-ssm" onclick="fnSave('B10');">저장</button>
-			<button type="button" class="btn btn-info btn-ssm" onclick="fnOpenEnvsetPopup('B10', '쇼핑몰Meta정보');">이력보기</button>
-			
-			<table class="frmStyle" aria-describedby="쇼핑몰Meta정보">
-				<colgroup>
-					<col style="width: 15%;"/>
-					<col/>
-				</colgroup>
-				<tbody>
-					<tr>
-						<th>웹브라우저Title</th>
-						<td>
-							<input name="b10StrSetVal1" type="text" class="w500" maxlength="200"/>
-							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>웹 브라우저 상단에 노출되는 사이트 소개 문구입니다.</span>
-						</td>
-					</tr>
-					<tr>
-						<th>쇼핑몰Title(og:title)</th>
-						<td>
-							<input name="b10StrSetVal2" type="text" class="w500" maxlength="200"/>
-							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>오픈그래프 Title입니다. 영문/한글/숫자만 입력하세요.</span>
-						</td>
-					</tr>
-					<tr>
-						<th>쇼핑몰설명(og:description)</th>
-						<td>
-							<input name="b10StrSetVal3" type="text" class="w500" maxlength="200"/>
-							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>오픈그래프 Description입니다. 200자 이내의 영문/한글/숫자만 입력하세요.</span>
-						</td>
-					</tr>
-					<tr>
-						<th>쇼핑몰이미지(og:image)</th>
-						<td>
-							<div class="uFile w500">
-								<input type="file" id="b10StrSetVal4" name="b10StrSetVal4" class="uFileInput"/>
-								<label for="b10StrSetVal4" class="uFileLabel">쇼핑몰이미지 선택</label>
-								<input type="hidden" name="b10StrSetVal4OrgFileNm"/>
-								<input type="hidden" name="b10StrSetVal4SysFileNm"/>
-							</div>
-							<a id="b10StrSetVal4FileDownload" href="#" style="display: none;" onclick="fnDownloadFile('b10StrSetVal4');"></a>
-							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>오픈그래프 Image입니다</span>
-						</td>
-					</tr>
-					<tr>
-						<th>키워드(Keywords)</th>
-						<td>
-							<input name="b10StrSetVal5" type="text" class="w500" maxlength="70"/>
-							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>70자 이내로 작성하시고 같은 단어는 3회 이상 반복하시면 안 됩니다.</span>
-						</td>
-					</tr>
-					<tr>
-						<th>파비콘이미지</th>
-						<td>
-							<div class="uFile w500">
-								<input type="file" id="b10StrSetVal6" name="b10StrSetVal6" class="uFileInput"/>
-								<label for="b10StrSetVal6" class="uFileLabel">파비콘이미지 선택</label>
-								<input type="hidden" name="b10StrSetVal6OrgFileNm"/>
-								<input type="hidden" name="b10StrSetVal6SysFileNm"/>
-							</div>
-							<a id="b10StrSetVal6FileDownload" href="#" style="display: none;" onclick="fnDownloadFile('b10StrSetVal6');"></a>
-							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>16x16 사이즈의 아이콘 이미지(확장자:ico)</span>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-			
-			<h4>[B11] 기본설정</h4>
-			<button type="button" class="btn btn-success btn-ssm" onclick="fnSave('B11');">저장</button>
-			<button type="button" class="btn btn-info btn-ssm" onclick="fnOpenEnvsetPopup('B11', '기본설정');">이력보기</button>
-			<table class="frmStyle" aria-describedby="기본설정">
-				<colgroup>
-					<col style="width: 15%;"/>
-					<col/>
-				</colgroup>
-				<tbody>
-					<tr>
-						<th>탈퇴후재가입불가기간(일)</th>
-						<td><input name="b11StrSetVal1" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="탈퇴후재가입불가기간"/><span class="cRed">개월</span> 동안 탈퇴 후 재가입 불가합니다.</td>
-					</tr>
-					<tr>
-						<th>휴면회원선정기간(일)</th>
-						<td><input name="b11StrSetVal2" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="휴면회원선정기간"/><span class="cRed">일</span> 동안 사이트에 로그인 하지 않은 회원을 휴면회원으로 선정합니다.</td>
-					</tr>
-					<tr>
-						<th>휴면회원전환기간(일)</th>
-						<td><input name="b11StrSetVal3" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="휴면회원전환기간"/><span class="cRed">일</span> 동안 사이트에 로그인 하지 않은 회원을 휴면회원으로 전환합니다.</td>
-					</tr>
-					<tr>
-						<th>회원등급산정기간</th>
-						<td>직전월 이전 <input name="b11StrSetVal4" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="회원등급산정기간"/><span class="cRed">개월</span> 기간동안의 매출금액을 기준으로 월초에 산정합니다. <span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>0으로 설정하면 회원별등급산정을 하지 않습니다.</span></td>
-					</tr>
-					<tr>
-						<th>무료배송비최소주문금액</th>
-						<td>최소주문금액이 <input name="b11StrSetVal5" type="text" class="w100 aR" maxlength="6" data-valid-type="integer" data-valid-name="무료배송비최소주문금액"/> 원 이상이면 배송비가 무료입니다. <span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>이 값은 기본값이며 공급업체별로 다르게 설정할 수도 있습니다.</span></td>
-					</tr>
-				</tbody>
-			</table>
-			
-			<h4>[G10] 상품노출</h4>
-			<button type="button" class="btn btn-success btn-ssm" onclick="fnSave('G10');">저장</button>
-			<button type="button" class="btn btn-info btn-ssm" onclick="fnOpenEnvsetPopup('G10', '상품노출');">이력보기</button>
-			<table class="frmStyle" aria-describedby="상품노출">
-				<colgroup>
-					<col style="width: 15%;"/>
-					<col style="width: 85%;"/>
-				</colgroup>
-				<tbody>
-					<tr>
-						<th>상품평노출여부</th>
-						<td>
-							<label class="rdoBtn"><input type="radio" name="g10StrSetVal1" value="Y" checked="checked"/>노출</label>
-							<label class="rdoBtn"><input type="radio" name="g10StrSetVal1" value="N">미노출</label>
-							<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>미노출로 설정 시 상품상세의 상품평 영역이 노출되지 않습니다.</span>
-						</td>
-					</tr>
-					<tr>
-						<th>품절상품노출여부</th>
-						<td>
-							<label class="rdoBtn"><input type="radio" name="g10StrSetVal2" value="Y"/>노출</label>
-							<label class="rdoBtn"><input type="radio" name="g10StrSetVal2" value="N" checked="checked">미노출</label>
-							<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>품절된 상품을 사이트에 노출할지 말지를 설정합니다.</span>
-						</td>
-					</tr>
-					<tr>
-						<th>특가세일노출기준</th>
-						<td>
-							상품 썸네일 리스트의 가격은 할인율이 <input name="g10StrSetVal3" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name=""/><span class="cRed">%</span> 이상일 경우 TAG가와 할인율 대신 <span class="infoTxt cBlue">'특가세일'</span>로 표기됩니다.
-						</td>
-					</tr>
-				</tbody>
-			</table>
-
-			<h4>[G11] 상품보관</h4>
-			<button type="button" class="btn btn-success btn-ssm" onclick="fnSave('G11');">저장</button>
-			<button type="button" class="btn btn-info btn-ssm" onclick="fnOpenEnvsetPopup('G11', '상품보관');">이력보기</button>
-			<table class="frmStyle" aria-describedby="상품보관">
-				<colgroup>
-					<col style="width: 15%;"/>
-					<col style="width: 85%;"/>
-				</colgroup>
-				<tbody>
-					<tr>
-						<th>장바구니보관기간(일)</th>
-						<td>
-							장바구니 보관기간은 <input name="g11StrSetVal1" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="장바구니보관기간"/><span class="cRed">일</span> 입니다. 보관기간 경과 시 자동 삭제됩니다.
-							<span class="infoTxt cBlue"><i class="fa fa-info-circle marL20" aria-hidden="true"></i>0으로 설정하면 자동으로 삭제 처리를 하지 않습니다.</span>
-						</td>
-					</tr>
-					<tr>
-						<th>장바구니담기최대상품수</th>
-						<td>
-							장바구니에 담을 수 있는 최대 상품 개수는 <input name="g11StrSetVal2" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="장바구니보관기간"/><span class="cRed">개</span> 입니다.
-						</td>
-					</tr>
-					<tr>
-						<th>위시리스트보관기간(일)</th>
-						<td>
-							위시리스트 보관기간은 <input name="g11StrSetVal3" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="위시리스트보관기간"/><span class="cRed">일</span> 입니다. 보관기간 경과 시 자동 삭제됩니다.
-							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>0으로 설정하면 자동으로 삭제 처리를 하지 않습니다.</span>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-	</div>
-
-<script th:inline="javascript">
-/*<![CDATA[*/
-	// 조회
-	var fnSearch = function() {
-		var siteCd = $('select[name=siteCd]').val();
-		var actionUrl = '/envset/' + siteCd;
-
-		// 쇼핑몰Meta정보
-		$.getJSON(actionUrl + '/B10'
-				, function(result, status) {
-					if (status === 'success') {
-						if (!gagajf.isNull(result)) {
-							$('input[name=b10StrSetVal1]').val(result.strSetVal1);
-							$('input[name=b10StrSetVal2]').val(result.strSetVal2);
-							$('input[name=b10StrSetVal3]').val(result.strSetVal3);
-							
-							if (!gagajf.isNull(result.strSetVal4)) {
-								$('input[name=b10StrSetVal4SysFileNm]').val(result.strSetVal4);
-								$('#b10StrSetVal4FileDownload').html(result.strSetVal4);
-								$('#b10StrSetVal4FileDownload').show();
-							}
-							
-							$('input[name=b10StrSetVal5]').val(result.strSetVal5);
-							
-							if (!gagajf.isNull(result.strSetVal6)) {
-								$('input[name=b10StrSetVal6SysFileNm]').val(result.strSetVal6);
-								$('#b10StrSetVal6FileDownload').html(result.strSetVal6);
-								$('#b10StrSetVal6FileDownload').show();
-							}
-						}
-					}
-				});
-
-		// 기본설정
-		$.getJSON(actionUrl + '/B11'
-				, function(result, status) {
-					if (status === 'success') {
-						if (!gagajf.isNull(result)) {
-							$('input[name=b11StrSetVal1]').val(result.strSetVal1);
-							$('input[name=b11StrSetVal2]').val(result.strSetVal2);
-							$('input[name=b11StrSetVal3]').val(result.strSetVal3);
-							$('input[name=b11StrSetVal4]').val(result.strSetVal4);
-							$('input[name=b11StrSetVal5]').val(gagajf.isNull(result.strSetVal5) ? result.strSetVal5 : result.strSetVal5.addComma());
-						}
-					}
-				});
-		
-		// 상품노출
-		$.getJSON(actionUrl + '/G10'
-				, function(result, status) {
-					if (status === 'success') {
-						if (!gagajf.isNull(result)) {
-							$("input:radio[name=g10StrSetVal1]").parents('td').find('label').removeClass('checked');
-							if (result.strSetVal1 == 'Y') {
-								$("input:radio[name=g10StrSetVal1]").eq(0).prop('checked', true);
-							} else {
-								$("input:radio[name=g10StrSetVal1]").eq(1).prop('checked', true);
-							}
-
-							$("input:radio[name=g10StrSetVal2]").parents('td').find('label').removeClass('checked');
-							if (result.strSetVal2 == 'Y') {
-								$("input:radio[name=g10StrSetVal2]").eq(0).prop('checked', true);
-							} else {
-								$("input:radio[name=g10StrSetVal2]").eq(1).prop('checked', true);
-							}
-							
-							$('input[name=g10StrSetVal3]').val(result.strSetVal3);
-						}
-					}
-				});
-
-		// 상품보관
-		$.getJSON(actionUrl + '/G11'
-				, function(result, status) {
-					if (status === 'success') {
-						if (!gagajf.isNull(result)) {
-							$('input[name=g11StrSetVal1]').val(result.strSetVal1);
-							$('input[name=g11StrSetVal2]').val(result.strSetVal2);
-							$('input[name=g11StrSetVal3]').val(result.strSetVal3);
-						}
-					}
-				});
-	}
-
-	// 파일첨부 선택 시
-	$('#b10StrSetVal4').on('change', function() { fnChooseFile(this); });
-	$('#b10StrSetVal6').on('change', function() { fnChooseFile(this); });
-
-	var fnChooseFile = function(obj) {
-		// multiple 속성이 있으면 files에는 다수의 객체가 할당됨
-		var file = obj.files[0];
-
-		// 파일 업로드
-		gagajf.ajaxFileUpload('/common/file/upload?subDir=/envset'
-				, file
-				, function(result) {
-					// 업로드한 파일명 설정
-					$('input[name=' + obj.name + 'OrgFileNm]').val(result.oldFileName);
-					$('input[name=' + obj.name + 'SysFileNm]').val(result.newFileName);
-				}
-		);
-	}
-
-	// 파일다운로드
-	var fnDownloadFile = function(id) {
-		$('#' + id + 'FileDownload').attr({
-			href : _uploadDefaultUrl + '/envset/' + $('input[name=' + id + 'SysFileNm]').val(),
-			target: '_blank'
-		}).get(0).click();
-	}
-
-	// 저장 처리
-	var fnSave = function(envsetType) {
-		var params = new Object();
-		params.siteCd = $('select[name=siteCd]').val();
-		params.envsetType = envsetType;
-
-		if (envsetType == 'B10') { // 쇼핑몰Meta정보
-			params.envsetNm = '쇼핑몰Meta정보';
-			params.strSetVal1 = $('input[name=b10StrSetVal1]').val();
-			params.strSetVal2 = $('input[name=b10StrSetVal2]').val();
-			params.strSetVal3 = $('input[name=b10StrSetVal3]').val();
-			params.strSetVal4 = $('input[name=b10StrSetVal4SysFileNm]').val();
-			params.strSetVal5 = $('input[name=b10StrSetVal5]').val();
-			params.strSetVal6 = $('input[name=b10StrSetVal6SysFileNm]').val();
-		} else if (envsetType == 'B11') { // 기본설정
-			params.envsetNm = '기본설정';
-			params.strSetVal1 = $('input[name=b11StrSetVal1]').val();
-			params.strSetVal2 = $('input[name=b11StrSetVal2]').val();
-			params.strSetVal3 = $('input[name=b11StrSetVal3]').val();
-			params.strSetVal4 = $('input[name=b11StrSetVal4]').val();
-			params.strSetVal5 = $('input[name=b11StrSetVal5]').val().removeComma();
-			params.strSetVal6 = $('input[name=b10StrSetVal6SysFileNm]').val();
-		} else if (envsetType == 'G10') { // 상품노출
-			params.envsetNm = '상품노출';
-			params.strSetVal1 = $('input:radio[name=g10StrSetVal1]:checked').val();
-			params.strSetVal2 = $('input:radio[name=g10StrSetVal2]:checked').val();
-			params.strSetVal3 = $('input[name=g10StrSetVal1]').val();
-		} else if (envsetType == 'G11') { // 상품보관
-			params.envsetNm = '상품보관';
-			params.strSetVal1 = $('input[name=g11StrSetVal1]').val();
-			params.strSetVal2 = $('input[name=g11StrSetVal2]').val();
-			params.strSetVal3 = $('input[name=g11StrSetVal3]').val();
-		}
-
-		var jsonData = JSON.stringify(params);
-		gagajf.ajaxJsonSubmit('/envset/create', jsonData);
-	}
-
-	// 환경설정 이력보기 팝업
-	var fnOpenEnvsetPopup = function(envsetType, envsetTypeNm) {
-		var actionUrl = '/envset/history/form'
-				+ '?siteCd=' + $('select[name=siteCd]').val()
-				+ '&envsetType=' + envsetType
-				+ '&envsetTypeNm=' + encodeURIComponent(envsetTypeNm);
-		cfnOpenModalPopup(actionUrl, 'popupEnvset');
-	}
-	
-	$(document).ready(function() {
-		$('select[name=siteCd]').trigger('change');
-	});
-/*]]>*/
-</script>
-
-</html>
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : BasicEnvsetForm.html
+ * @desc    : 기본환경설정 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2020.10.21   gagamel     최초 작성
+ *******************************************************************************
+ -->
+	<div id="main">
+		<!-- 메인타이틀 영역 -->
+		<div class="main-title">
+		</div>
+		<!-- //메인타이틀 영역 -->
+		
+		<!-- 메뉴 설명 -->
+		<div class="infoBox menu-desc">
+		</div>
+		<!-- //메뉴 설명 -->
+		
+		<!-- 검색조건 영역 -->
+		<div class="panelStyle">
+			<table class="frmStyle" aria-describedby="검색조건">
+				<colgroup>
+					<col style="width:10%;"/>
+					<col/>
+				</colgroup>
+				<tr>
+					<th>사이트</th>
+					<td>
+						<select name="siteCd" class="w150" onchange="fnSearch();">
+							<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+						</select>
+					</td>
+				</tr>
+			</table>
+		</div>
+		<!-- 검색조건 영역 -->
+
+		<div class="panelStyle">
+			<h4>[B10] 쇼핑몰Meta정보</h4>
+			<button type="button" class="btn btn-success btn-ssm" onclick="fnSave('B10');">저장</button>
+			<button type="button" class="btn btn-info btn-ssm" onclick="fnOpenEnvsetPopup('B10', '쇼핑몰Meta정보');">이력보기</button>
+			
+			<table class="frmStyle" aria-describedby="쇼핑몰Meta정보">
+				<colgroup>
+					<col style="width: 15%;"/>
+					<col/>
+				</colgroup>
+				<tbody>
+					<tr>
+						<th>웹브라우저Title</th>
+						<td>
+							<input name="b10StrSetVal1" type="text" class="w500" maxlength="200"/>
+							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>웹 브라우저 상단에 노출되는 사이트 소개 문구입니다.</span>
+						</td>
+					</tr>
+					<tr>
+						<th>쇼핑몰Title(og:title)</th>
+						<td>
+							<input name="b10StrSetVal2" type="text" class="w500" maxlength="200"/>
+							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>오픈그래프 Title입니다. 영문/한글/숫자만 입력하세요.</span>
+						</td>
+					</tr>
+					<tr>
+						<th>쇼핑몰설명(og:description)</th>
+						<td>
+							<input name="b10StrSetVal3" type="text" class="w500" maxlength="200"/>
+							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>오픈그래프 Description입니다. 200자 이내의 영문/한글/숫자만 입력하세요.</span>
+						</td>
+					</tr>
+					<tr>
+						<th>쇼핑몰이미지(og:image)</th>
+						<td>
+							<div class="uFile w500">
+								<input type="file" id="b10StrSetVal4" name="b10StrSetVal4" class="uFileInput"/>
+								<label for="b10StrSetVal4" class="uFileLabel">쇼핑몰이미지 선택</label>
+								<input type="hidden" name="b10StrSetVal4OrgFileNm"/>
+								<input type="hidden" name="b10StrSetVal4SysFileNm"/>
+							</div>
+							<a id="b10StrSetVal4FileDownload" href="#" style="display: none;" onclick="fnDownloadFile('b10StrSetVal4');"></a>
+							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>오픈그래프 Image입니다</span>
+						</td>
+					</tr>
+					<tr>
+						<th>키워드(Keywords)</th>
+						<td>
+							<input name="b10StrSetVal5" type="text" class="w500" maxlength="70"/>
+							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>70자 이내로 작성하시고 같은 단어는 3회 이상 반복하시면 안 됩니다.</span>
+						</td>
+					</tr>
+					<tr>
+						<th>파비콘이미지</th>
+						<td>
+							<div class="uFile w500">
+								<input type="file" id="b10StrSetVal6" name="b10StrSetVal6" class="uFileInput"/>
+								<label for="b10StrSetVal6" class="uFileLabel">파비콘이미지 선택</label>
+								<input type="hidden" name="b10StrSetVal6OrgFileNm"/>
+								<input type="hidden" name="b10StrSetVal6SysFileNm"/>
+							</div>
+							<a id="b10StrSetVal6FileDownload" href="#" style="display: none;" onclick="fnDownloadFile('b10StrSetVal6');"></a>
+							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>16x16 사이즈의 아이콘 이미지(확장자:ico)</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			
+			<h4>[B11] 기본설정</h4>
+			<button type="button" class="btn btn-success btn-ssm" onclick="fnSave('B11');">저장</button>
+			<button type="button" class="btn btn-info btn-ssm" onclick="fnOpenEnvsetPopup('B11', '기본설정');">이력보기</button>
+			<table class="frmStyle" aria-describedby="기본설정">
+				<colgroup>
+					<col style="width: 15%;"/>
+					<col/>
+				</colgroup>
+				<tbody>
+					<tr>
+						<th>탈퇴후재가입불가기간(일)</th>
+						<td><input name="b11StrSetVal1" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="탈퇴후재가입불가기간"/><span class="cRed">개월</span> 동안 탈퇴 후 재가입 불가합니다.</td>
+					</tr>
+					<tr>
+						<th>휴면회원선정기간(일)</th>
+						<td><input name="b11StrSetVal2" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="휴면회원선정기간"/><span class="cRed">일</span> 동안 사이트에 로그인 하지 않은 회원을 휴면회원으로 선정합니다.</td>
+					</tr>
+					<tr>
+						<th>휴면회원전환기간(일)</th>
+						<td><input name="b11StrSetVal3" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="휴면회원전환기간"/><span class="cRed">일</span> 동안 사이트에 로그인 하지 않은 회원을 휴면회원으로 전환합니다.</td>
+					</tr>
+					<tr>
+						<th>회원등급산정기간</th>
+						<td>직전월 이전 <input name="b11StrSetVal4" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="회원등급산정기간"/><span class="cRed">개월</span> 기간 동안의 구매금액(실결제금액)과 구매건수를 기준으로 월초에 산정합니다. <span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>자세한 사항은 "<span class="cRed">운영관리 > 환경설정 > 회원등급정책관리</span>" 화면을 참조해 주세요.</span></td>
+					</tr>
+					<tr>
+						<th>무료배송비최소주문금액</th>
+						<td>최소주문금액이 <input name="b11StrSetVal5" type="text" class="w100 aR" maxlength="6" data-valid-type="integer" data-valid-name="무료배송비최소주문금액"/> 원 이상이면 배송비가 무료입니다. <span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>이 값은 기본값이며 공급업체별로 다르게 설정할 수도 있습니다.</span></td>
+					</tr>
+				</tbody>
+			</table>
+			
+			<h4>[G10] 상품노출</h4>
+			<button type="button" class="btn btn-success btn-ssm" onclick="fnSave('G10');">저장</button>
+			<button type="button" class="btn btn-info btn-ssm" onclick="fnOpenEnvsetPopup('G10', '상품노출');">이력보기</button>
+			<table class="frmStyle" aria-describedby="상품노출">
+				<colgroup>
+					<col style="width: 15%;"/>
+					<col style="width: 85%;"/>
+				</colgroup>
+				<tbody>
+					<tr>
+						<th>상품평노출여부</th>
+						<td>
+							<label class="rdoBtn"><input type="radio" name="g10StrSetVal1" value="Y" checked="checked"/>노출</label>
+							<label class="rdoBtn"><input type="radio" name="g10StrSetVal1" value="N">미노출</label>
+							<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>미노출로 설정 시 상품상세의 상품평 영역이 노출되지 않습니다.</span>
+						</td>
+					</tr>
+					<tr>
+						<th>품절상품노출여부</th>
+						<td>
+							<label class="rdoBtn"><input type="radio" name="g10StrSetVal2" value="Y"/>노출</label>
+							<label class="rdoBtn"><input type="radio" name="g10StrSetVal2" value="N" checked="checked">미노출</label>
+							<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>품절된 상품을 사이트에 노출할지 말지를 설정합니다.</span>
+						</td>
+					</tr>
+					<tr>
+						<th>특가세일노출기준</th>
+						<td>
+							상품 썸네일 리스트의 가격은 할인율이 <input name="g10StrSetVal3" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name=""/><span class="cRed">%</span> 이상일 경우 TAG가와 할인율 대신 <span class="infoTxt cBlue">'특가세일'</span>로 표기됩니다.
+						</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<h4>[G11] 상품보관</h4>
+			<button type="button" class="btn btn-success btn-ssm" onclick="fnSave('G11');">저장</button>
+			<button type="button" class="btn btn-info btn-ssm" onclick="fnOpenEnvsetPopup('G11', '상품보관');">이력보기</button>
+			<table class="frmStyle" aria-describedby="상품보관">
+				<colgroup>
+					<col style="width: 15%;"/>
+					<col style="width: 85%;"/>
+				</colgroup>
+				<tbody>
+					<tr>
+						<th>장바구니보관기간(일)</th>
+						<td>
+							장바구니 보관기간은 <input name="g11StrSetVal1" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="장바구니보관기간"/><span class="cRed">일</span> 입니다. 보관기간 경과 시 자동 삭제됩니다.
+							<span class="infoTxt cBlue"><i class="fa fa-info-circle marL20" aria-hidden="true"></i>0으로 설정하면 자동으로 삭제 처리를 하지 않습니다.</span>
+						</td>
+					</tr>
+					<tr>
+						<th>장바구니담기최대상품수</th>
+						<td>
+							장바구니에 담을 수 있는 최대 상품 개수는 <input name="g11StrSetVal2" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="장바구니보관기간"/><span class="cRed">개</span> 입니다.
+						</td>
+					</tr>
+					<tr>
+						<th>위시리스트보관기간(일)</th>
+						<td>
+							위시리스트 보관기간은 <input name="g11StrSetVal3" type="text" class="w50 aR" maxlength="3" data-valid-type="integer" data-valid-name="위시리스트보관기간"/><span class="cRed">일</span> 입니다. 보관기간 경과 시 자동 삭제됩니다.
+							<span class="infoTxt cBlue marL20"><i class="fa fa-info-circle" aria-hidden="true"></i>0으로 설정하면 자동으로 삭제 처리를 하지 않습니다.</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	// 조회
+	var fnSearch = function() {
+		var siteCd = $('select[name=siteCd]').val();
+		var actionUrl = '/envset/' + siteCd;
+
+		// 쇼핑몰Meta정보
+		$.getJSON(actionUrl + '/B10'
+				, function(result, status) {
+					if (status === 'success') {
+						if (!gagajf.isNull(result)) {
+							$('input[name=b10StrSetVal1]').val(result.strSetVal1);
+							$('input[name=b10StrSetVal2]').val(result.strSetVal2);
+							$('input[name=b10StrSetVal3]').val(result.strSetVal3);
+							
+							if (!gagajf.isNull(result.strSetVal4)) {
+								$('input[name=b10StrSetVal4SysFileNm]').val(result.strSetVal4);
+								$('#b10StrSetVal4FileDownload').html(result.strSetVal4);
+								$('#b10StrSetVal4FileDownload').show();
+							}
+							
+							$('input[name=b10StrSetVal5]').val(result.strSetVal5);
+							
+							if (!gagajf.isNull(result.strSetVal6)) {
+								$('input[name=b10StrSetVal6SysFileNm]').val(result.strSetVal6);
+								$('#b10StrSetVal6FileDownload').html(result.strSetVal6);
+								$('#b10StrSetVal6FileDownload').show();
+							}
+						}
+					}
+				});
+
+		// 기본설정
+		$.getJSON(actionUrl + '/B11'
+				, function(result, status) {
+					if (status === 'success') {
+						if (!gagajf.isNull(result)) {
+							$('input[name=b11StrSetVal1]').val(result.strSetVal1);
+							$('input[name=b11StrSetVal2]').val(result.strSetVal2);
+							$('input[name=b11StrSetVal3]').val(result.strSetVal3);
+							$('input[name=b11StrSetVal4]').val(result.strSetVal4);
+							$('input[name=b11StrSetVal5]').val(gagajf.isNull(result.strSetVal5) ? result.strSetVal5 : result.strSetVal5.addComma());
+						}
+					}
+				});
+		
+		// 상품노출
+		$.getJSON(actionUrl + '/G10'
+				, function(result, status) {
+					if (status === 'success') {
+						if (!gagajf.isNull(result)) {
+							$("input:radio[name=g10StrSetVal1]").parents('td').find('label').removeClass('checked');
+							if (result.strSetVal1 == 'Y') {
+								$("input:radio[name=g10StrSetVal1]").eq(0).prop('checked', true);
+							} else {
+								$("input:radio[name=g10StrSetVal1]").eq(1).prop('checked', true);
+							}
+
+							$("input:radio[name=g10StrSetVal2]").parents('td').find('label').removeClass('checked');
+							if (result.strSetVal2 == 'Y') {
+								$("input:radio[name=g10StrSetVal2]").eq(0).prop('checked', true);
+							} else {
+								$("input:radio[name=g10StrSetVal2]").eq(1).prop('checked', true);
+							}
+							
+							$('input[name=g10StrSetVal3]').val(result.strSetVal3);
+						}
+					}
+				});
+
+		// 상품보관
+		$.getJSON(actionUrl + '/G11'
+				, function(result, status) {
+					if (status === 'success') {
+						if (!gagajf.isNull(result)) {
+							$('input[name=g11StrSetVal1]').val(result.strSetVal1);
+							$('input[name=g11StrSetVal2]').val(result.strSetVal2);
+							$('input[name=g11StrSetVal3]').val(result.strSetVal3);
+						}
+					}
+				});
+	}
+
+	// 파일첨부 선택 시
+	$('#b10StrSetVal4').on('change', function() { fnChooseFile(this); });
+	$('#b10StrSetVal6').on('change', function() { fnChooseFile(this); });
+
+	var fnChooseFile = function(obj) {
+		// multiple 속성이 있으면 files에는 다수의 객체가 할당됨
+		var file = obj.files[0];
+
+		// 파일 업로드
+		gagajf.ajaxFileUpload('/common/file/upload?subDir=/envset'
+				, file
+				, function(result) {
+					// 업로드한 파일명 설정
+					$('input[name=' + obj.name + 'OrgFileNm]').val(result.oldFileName);
+					$('input[name=' + obj.name + 'SysFileNm]').val(result.newFileName);
+				}
+		);
+	}
+
+	// 파일다운로드
+	var fnDownloadFile = function(id) {
+		$('#' + id + 'FileDownload').attr({
+			href : _uploadDefaultUrl + '/envset/' + $('input[name=' + id + 'SysFileNm]').val(),
+			target: '_blank'
+		}).get(0).click();
+	}
+
+	// 저장 처리
+	var fnSave = function(envsetType) {
+		var params = new Object();
+		params.siteCd = $('select[name=siteCd]').val();
+		params.envsetType = envsetType;
+
+		if (envsetType == 'B10') { // 쇼핑몰Meta정보
+			params.envsetNm = '쇼핑몰Meta정보';
+			params.strSetVal1 = $('input[name=b10StrSetVal1]').val();
+			params.strSetVal2 = $('input[name=b10StrSetVal2]').val();
+			params.strSetVal3 = $('input[name=b10StrSetVal3]').val();
+			params.strSetVal4 = $('input[name=b10StrSetVal4SysFileNm]').val();
+			params.strSetVal5 = $('input[name=b10StrSetVal5]').val();
+			params.strSetVal6 = $('input[name=b10StrSetVal6SysFileNm]').val();
+		} else if (envsetType == 'B11') { // 기본설정
+			params.envsetNm = '기본설정';
+			params.strSetVal1 = $('input[name=b11StrSetVal1]').val();
+			params.strSetVal2 = $('input[name=b11StrSetVal2]').val();
+			params.strSetVal3 = $('input[name=b11StrSetVal3]').val();
+			params.strSetVal4 = $('input[name=b11StrSetVal4]').val();
+			params.strSetVal5 = $('input[name=b11StrSetVal5]').val().removeComma();
+			params.strSetVal6 = $('input[name=b10StrSetVal6SysFileNm]').val();
+		} else if (envsetType == 'G10') { // 상품노출
+			params.envsetNm = '상품노출';
+			params.strSetVal1 = $('input:radio[name=g10StrSetVal1]:checked').val();
+			params.strSetVal2 = $('input:radio[name=g10StrSetVal2]:checked').val();
+			params.strSetVal3 = $('input[name=g10StrSetVal1]').val();
+		} else if (envsetType == 'G11') { // 상품보관
+			params.envsetNm = '상품보관';
+			params.strSetVal1 = $('input[name=g11StrSetVal1]').val();
+			params.strSetVal2 = $('input[name=g11StrSetVal2]').val();
+			params.strSetVal3 = $('input[name=g11StrSetVal3]').val();
+		}
+
+		var jsonData = JSON.stringify(params);
+		gagajf.ajaxJsonSubmit('/envset/create', jsonData);
+	}
+
+	// 환경설정 이력보기 팝업
+	var fnOpenEnvsetPopup = function(envsetType, envsetTypeNm) {
+		var actionUrl = '/envset/history/form'
+				+ '?siteCd=' + $('select[name=siteCd]').val()
+				+ '&envsetType=' + envsetType
+				+ '&envsetTypeNm=' + encodeURIComponent(envsetTypeNm);
+		cfnOpenModalPopup(actionUrl, 'popupEnvset');
+	}
+	
+	$(document).ready(function() {
+		$('select[name=siteCd]').trigger('change');
+	});
+/*]]>*/
+</script>
+
+</html>

style24.admin/src/main/webapp/WEB-INF/views/envset/CustomerGradePolicyForm.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+	<!--
+ *******************************************************************************
+ * @source  : CustomerGradePolicyForm.html
+ * @desc    : 회원등급정책관리 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.01.06   gagamel     최초 작성
+ *******************************************************************************
+ -->
+	<div id="main">
+		<!-- 메인타이틀 영역 -->
+		<div class="main-title">
+		</div>
+		<!-- //메인타이틀 영역 -->
+		
+		<!-- 메뉴 설명 -->
+		<div class="infoBox menu-desc">
+		</div>
+		<!-- //메뉴 설명 -->
+		
+		<!-- 검색조건 영역 -->
+		<div class="panelStyle">
+			<form id="searchForm" name="searchForm" action="#" th:action="@{'/envset/customer/grade/policy/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
+				<table class="frmStyle" aria-describedby="검색조건">
+					<colgroup>
+						<col style="width:10%;"/>
+						<col/>
+					</colgroup>
+					<tr>
+						<th>사이트</th>
+						<td>
+							<select name="siteCd">
+								<option th:if="${siteList}" th:each="oneData, status : ${siteList}"th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+					</tr>
+				</table>
+				
+				<ul class="panelBar">
+					<li class="center">
+						<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
+					</li>
+				</ul>
+			</form>
+		</div>
+		<!-- 검색조건 영역 -->
+		
+		<!-- 리스트 영역 -->
+		<div class="panelStyle">
+			<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham lh70"></div>
+		</div>
+		
+		<!-- 등록/수정 -->
+		<div class="panelStyle">
+			<form id="detailForm" name="detailForm" action="#" th:action="@{'/envset/customer/grade/policy/create'}">
+				<table class="frmStyle" aria-describedby="등록/상세폼">
+					<colgroup>
+						<col style="width:10%;"/>
+						<col style="width:15%;"/>
+						<col style="width:10%;"/>
+						<col style="width:15%;"/>
+						<col style="width:10%;"/>
+						<col style="width:15%;"/>
+						<col style="width:10%;"/>
+						<col/>
+					</colgroup>
+					<tr>
+						<th>사이트<em class="required" title="필수"></em></th>
+						<td>
+							<select name="siteCd" required="required" data-valid-name="사이트">
+								<option value="">[선택]</option>
+								<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+						<th>회원등급<em class="required" title="필수"></em></th>
+						<td>
+							<select name="gradeCd" required="required" data-valid-name="회원등급">
+								<option value="">[선택]</option>
+								<option th:if="${custGradeList}" th:each="oneData, status : ${custGradeList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+						<th rowspan="2">아이콘명<em class="required" title="필수"></em></th>
+						<td colspan="3" rowspan="2">
+							<span class="badgeLevel black marR10" id="iconPrefix"></span>
+							<input type="text" name="iconNm" class="w50" maxlength="20" required="required" data-valid-type="alphaNumeric" data-valid-name="아이콘명" onkeyup="$(this).val($(this).val().toUpperCase());"/>
+							<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>프론트 표기 접두사</span>
+						</td>
+					</tr>
+					<tr>
+						<th>등급산정기간<em class="required" title="필수"></em></th>
+						<td colspan="5">
+							전월 기준 최근 <input type="text" name="calMonths" class="w50 aR" maxlength="2" value="3" required="required" data-valid-type="integer" data-valid-name="등급산정기간"/> 개월
+						</td>
+					</tr>
+					<tr>
+						<th>승급조건<em class="required" title="필수"></em></th>
+						<td colspan="7">
+							구매금액(<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>쿠폰할인, 포인트할인, 배송비, 취소/반품내역을 반영한 실결제금액</span>)
+							<input type="text" name="minBuyAmt" class="w100 aR" maxlength="10" value="0" required="required" data-valid-type="integer" data-valid-name="구매금액"/>원 <span class="cRed">이상</span>
+							<span class="infoTxt cRed"><strong>또는</strong></span>
+							주문당 <input type="text" name="buyExceptAmt" class="w100 aR" maxlength="10" value="0" required="required" data-valid-type="integer" data-valid-name="구매건수제외조건"/>원 <span class="cRed">미만 구매건을 제외</span>한 구매건수(<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>취소를 반영한 주문건수</span>)
+							<input type="text" name="minBuyCnt" class="w50 aR" maxlength="2" value="0" required="required" data-valid-type="integer" data-valid-name="구매건수"/>건 <span class="cRed">이상</span>
+						</td>
+					</tr>
+					<tr>
+						<th>혜택쿠폰1</th>
+						<td colspan="3">
+							<input type="text" class="w300" name="gradeCpnNm1" onkeypress="if (window.event.keyCode == 13) { fnOpenCouponRetrievePopup('input[name=gradeCpnId1]', 'input[name=gradeCpnNm1]'); }"/>
+							<button type="button" class="btn icn" onclick="fnOpenCouponRetrievePopup('input[name=gradeCpnId1]', 'input[name=gradeCpnNm1]');"><i class="fa fa-search cpn" aria-hidden="true"></i></button>
+							<input name="gradeCpnId1" type="text" class="w100" maxlength="20" readonly="readonly"/>
+							<button type="button" class="btn icn" onclick="$('input[name=gradeCpnId1], input[name=gradeCpnNm1]').val('');"><i class="fa fa-eraser" aria-hidden="true"></i></button>
+						</td>
+						<th>혜택쿠폰2</th>
+						<td colspan="3">
+							<input type="text" class="w300" name="gradeCpnNm2" onkeypress="if (window.event.keyCode == 13) { fnOpenCouponRetrievePopup('input[name=gradeCpnId2]', 'input[name=gradeCpnNm2]'); }"/>
+							<button type="button" class="btn icn" onclick="fnOpenCouponRetrievePopup('input[name=gradeCpnId2]', 'input[name=gradeCpnNm2]');"><i class="fa fa-search cpn" aria-hidden="true"></i></button>
+							<input name="gradeCpnId2" type="text" class="w100" maxlength="20"  readonly="readonly"/>
+							<button type="button" class="btn icn" onclick="$('input[name=gradeCpnId2], input[name=gradeCpnNm2]').val('');"><i class="fa fa-eraser" aria-hidden="true"></i></button>
+						</td>
+					</tr>
+					<tr>
+						<th>혜택쿠폰3</th>
+						<td colspan="3">
+							<input type="text" class="w300" name="gradeCpnNm3" onkeypress="if (window.event.keyCode == 13) { fnOpenCouponRetrievePopup('input[name=gradeCpnId3]', 'input[name=gradeCpnNm3]'); }"/>
+							<button type="button" class="btn icn" onclick="fnOpenCouponRetrievePopup('input[name=gradeCpnId3]', 'input[name=gradeCpnNm3]');"><i class="fa fa-search cpn" aria-hidden="true"></i></button>
+							<input name="gradeCpnId3" type="text" class="w100" maxlength="20"  readonly="readonly"/>
+							<button type="button" class="btn icn" onclick="$('input[name=gradeCpnId3], input[name=gradeCpnNm3]').val('');"><i class="fa fa-eraser" aria-hidden="true"></i></button>
+						</td>
+						<th>표시순서<i class="required" title="필수" aria-hidden="true"></i></th>
+						<td>
+							<input type="text" class="w100 aR" name="dispOrd" placeholder="" maxlength="5" required="required" data-valid-type="numeric" data-valid-name="표시순서" />
+						</td>
+						<th>사용여부</th>
+						<td>
+							<input type="hidden" name="useYn" value="Y"/>
+							<label class="chkBox checked"><input type="checkbox" name="chkUseYn" checked="checked"/>사용</label>
+						</td>
+					</tr>
+				</table>
+			</form>
+			
+			<!-- 버튼 배치 영역 -->
+			<ul class="panelBar">
+				<li class="right">
+					<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
+					<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
+				</li>
+			</ul>
+			<!-- //버튼 배치 영역 -->
+		</div>
+		<!-- 등록/수정 -->
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	var siteList = gagajf.convertToArray([[${siteList}]]);
+	var custGradeList = gagajf.convertToArray([[${custGradeList}]]);
+
+	var columnDefs = [
+		{
+			headerName: "사이트", field: "siteCd", width: 150, cellClass: 'text-center',
+			cellRenderer: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
+		},
+		{
+			headerName: "회원등급", field: "gradeCd", width: 150, cellClass: 'text-center',
+			cellRenderer: function (params) { return '<a href="javascript:void(0);">' + gagaAgGrid.lookupValue(custGradeList, params.value) + '</a>'; }
+		},
+		{
+			headerName: "아이콘명", field: "iconNm", width: 100, cellClass: 'text-center',
+			cellRenderer: function (params) { return '<span class="badgeLevel black">' + params.value + '</span>' }
+		},
+		{
+			headerName: "등급산정기간", field: "calMonths", width: 180, cellClass: 'text-center',
+			cellRenderer: function(params) { return '전월 기준 최근 ' + gagaAgGrid.toAddComma(params.value) + '개월'; }
+		},
+		{
+			headerName: "승급조건", field: "upgradeCondition", width: 500, cellClass: 'text-center',
+			cellRenderer: function(params) {
+				let condition = '';
+				if (params.data.minBuyAmt > 0) condition += '구매금액 <span class="cRed">' + gagaAgGrid.toAddComma(params.data.minBuyAmt) + '</span>원 이상';
+				if (params.data.minBuyAmt > 0) condition += ' 또는 ';
+				condition += '구매건수 <span class="cRed">' + gagaAgGrid.toAddComma(params.data.minBuyCnt) + '</span>건 이상';
+				if (params.data.minBuyCnt == 0) condition += ' (즉, 미구매)';
+				if (params.data.buyExceptAmt > 0) condition += ' (<span class="cRed">' + gagaAgGrid.toAddComma(params.data.buyExceptAmt) + '</span>원 미만 구매건 제외)';
+				return condition;
+			}
+		},
+		{headerName: "구매금액", field: "minBuyAmt", width: 150, cellClass: 'text-right', hide: true},
+		{headerName: "구매건수", field: "minBuyCnt", width: 150, cellClass: 'text-right', hide: true},
+		{headerName: "구매건수제외조건", field: "buyExceptAmt", width: 150, cellClass: 'text-right', hide: true},
+		{headerName: "등급쿠폰ID1", field: "gradeCpnId1", width: 120, cellClass: 'text-center', hide: true},
+		{headerName: "등급쿠폰명1", field: "gradeCpnNm1", width: 200, hide: true},
+		{headerName: "등급쿠폰ID2", field: "gradeCpnId2", width: 120, cellClass: 'text-center', hide: true},
+		{headerName: "등급쿠폰명2", field: "gradeCpnNm2", width: 200, hide: true},
+		{headerName: "등급쿠폰ID3", field: "gradeCpnId3", width: 120, cellClass: 'text-center', hide: true},
+		{headerName: "등급쿠폰명3", field: "gradeCpnNm3", width: 200, hide: true},
+		{headerName: "표시순서", field: "dispOrd", width: 80, cellClass: 'text-center'},
+		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'},
+		{headerName: "수정자", field: "updNm", width: 80, cellClass: 'text-center'},
+		{
+			headerName: '수정일시', field: 'updDt', width: 150, cellClass: 'text-center',
+			cellRenderer: function(params) {
+				return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") : '';
+			}
+		}
+	];
+
+	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
+
+	// 이미지가 있을 경우 높이 지정
+	gridOptions.rowHeight = 70;
+	
+	// 셀 클릭 이벤트
+	gridOptions.onCellClicked = function(event) {
+		if (event.colDef.field != 'gradeCd')
+			return;
+		
+		$('#detailForm select[name=siteCd]').val(event.data.siteCd);
+		$('#detailForm select[name=gradeCd]').val(event.data.gradeCd);
+		$('#detailForm input[name=iconNm]').val(event.data.iconNm);
+		$('#iconPrefix').html(event.data.iconNm);
+		$('#detailForm input[name=calMonths]').val(event.data.calMonths);
+		$('#detailForm input[name=minBuyAmt]').val(event.data.minBuyAmt.addComma());
+		$('#detailForm input[name=minBuyCnt]').val(event.data.minBuyCnt);
+		$('#detailForm input[name=buyExceptAmt]').val(event.data.buyExceptAmt);
+		$('#detailForm input[name=gradeCpnId1]').val(event.data.gradeCpnId1);
+		$('#detailForm input[name=gradeCpnNm1]').val(event.data.gradeCpnNm1);
+		$('#detailForm input[name=gradeCpnId2]').val(event.data.gradeCpnId2);
+		$('#detailForm input[name=gradeCpnNm2]').val(event.data.gradeCpnNm2);
+		$('#detailForm input[name=gradeCpnId3]').val(event.data.gradeCpnId3);
+		$('#detailForm input[name=gradeCpnNm3]').val(event.data.gradeCpnNm3);
+		$('#detailForm input[name=dispOrd]').val(event.data.dispOrd);
+		
+		if (event.data.useYn == 'Y') {
+			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', true);
+			$("#detailForm input:checkbox[name=chkUseYn]").parent().addClass('checked');
+		} else {
+			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', false);
+			$("#detailForm input:checkbox[name=chkUseYn]").parent().removeClass('checked');
+		}
+	}
+
+	// 검색
+	$('#btnSearch').on('click', function() {
+		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
+	});
+	
+	// 쿠폰조회 팝업
+	var fnOpenCouponRetrievePopup = function(strReturnCode, strReturnName) {
+		var oParam = new Object();
+		oParam.returnCode = strReturnCode;
+		oParam.returnName = strReturnName;
+		cfnOpenCouponRetrievePopup($(strReturnName).val(), oParam);
+	}
+	
+	// 신규
+	$('#btnNew').on('click', function() {
+		$('#detailForm')[0].reset();
+		$('#iconPrefix').html('');
+		$('#detailForm select[name=siteCd]').focus();
+	});
+
+	// 저장
+	$("#btnSave").on("click", function() {
+		// 필수값 체크
+		if (!gagajf.validation('#detailForm'))
+			return false;
+
+		mcxDialog.confirm('저장하시겠습니까?', {
+			cancelBtnText: "취소",
+			sureBtnText: "확인",
+			sureBtnClick: function() {
+				$('#detailForm input[name=useYn]').val($('#detailForm input:checkbox[name=chkUseYn]').is(':checked') ? 'Y' : 'N');
+				
+				gagajf.ajaxFormSubmit($('#detailForm').prop('action'), '#detailForm', function() {
+					$('btnNew').click();
+					$('#btnSearch').trigger('click');
+				});
+			}
+		});
+	});
+
+	$(document).ready(function() {
+		gagaAgGrid.createGrid('gridList', gridOptions);
+	});
+/*]]>*/
+</script>
+
+</html>

style24.admin/src/main/webapp/ux/css/admin.ui.css

@@ -1,885 +1,923 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); @import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); html,body {position:relative; height:100%;}
-html, body, header, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, label, a, p, form, input, textarea, table, hr, span, em {margin:0; padding:0; box-sizing:border-box;}
-/* { } */
-body {overflow-x:hidden; font-family:"open sans", "Roboto", "Malgun Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; background-color:#f3f3f4;}
-h1, h2, h3, h4, h5, h6 {display:inline-block;}
-ul, ol {list-style:none;}
-ul::after, ol::after {display:block; clear:both; content:'';}
-img {vertical-align:middle; border-style:none;}
-a {text-decoration:none;}
-em, i {font-style:normal;}
-table {border-collapse:collapse;}
-th {text-align:inherit;}
-label {position:relative; margin-right:20px; display:inline-block; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
-label:last-child {margin-right:0 !important;}
-input,button,select,textarea {font-family:inherit; font-size:inherit;}
-input.btn-sm {padding:1px 6px;}
-input[type=text] {width:100%;}
-input[type=text], input[type=file], input[type=date], [type=password], textarea {padding:4px 3px 4px 5px; color:inherit; border-radius:1px; vertical-align:middle; margin:1px 3px 2px 0;}
-input[type=date],input[type=time],input[type=datetime-local],input[type=month] {-webkit-appearance:listbox;}
-input[readonly="readonly"], input[disabled="disabled"], input[readonly="readonly"]:before, input[disabled="disabled"]:before, select[readonly="readonly"], select[disabled="disabled"] {background-color:#eee !important;}
-button, select {text-transform:none;}
-button,[type=button],[type=reset],[type=submit] {margin:0; -webkit-appearance:button; border-radius:0; cursor:pointer; background-color:transparent; border-color:transparent;}
-button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {padding:0; border-style:none;}
-textarea {overflow:auto; resize:vertical; width:100%; margin:4px 0; vertical-align:middle; line-height:22px; height:32px;}
-.textareaR2 {min-height:60px; line-height:26px;}
-.textareaR3 {min-height:96px; line-height:26px;}
-.textareaR4 {min-height:134px; line-height:26px;}
-.byteChk {line-height:20px; padding-left:20px; display:inline-block; vertical-align:middle;}
-select {margin:0 3px 1px 0; padding:3px 10px 3px 3px; color:inherit; border-radius:1px; vertical-align:middle;}
-select, input[type=text], input[type=file], input[type=date], input[type=password], textarea {border:1px solid #dbdbdb;}
-select:focus, input:focus, textarea:focus, button:focus, .outline {outline:2px auto #4D90FE;}
-.formControl {background:#eee;}
-.off {display:none !important;}
-.scrollOff {overflow:hidden;}
-.f25 {font-size:25px;}
-
-html,body,#wrapper,#container {min-height:100%; height:100%;}
-#wrapper {position:relative; min-width:1240px;}
-
-/* 로그인 --------------- */
-.loginBg {background:#f3f3f4;}
-.loginWrap {width:500px; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.1);}
-.loginWrap .loginBox input[type=text],
-.loginWrap .loginBox input[type=password]{padding:10px; width:100%; border:1px solid #ced4da; border-radius:.25rem;}
-.loginWrap .loginBox li:nth-of-type(2), .loginBox li:nth-of-type(3) {padding-bottom:10px;}
-.loginWrap .loginBox li:nth-of-type(4) {padding:10px 0 50px 0; line-height:30px; text-align:left;}
-.loginWrap .loginBox li:nth-of-type(5) {margin-bottom:30px; text-align:center;}
-.loginWrap .loginBox a {display:inline-block; padding:10px;}
-.loginWrap .loginBox .dot {color:#ccc;}
-.loginWrap .btn-black {background-color:#555; color:#fff; font-weight:bold; float:right; margin:0 !important;}
-.loginWrap .btn-black:hover{background-color:#000; box-shadow:none;}
-.loginWrap .btn-purple {background-color:#667eea; color:#fff; font-weight:bold; float:right; margin:0 !important;}
-.loginWrap .btn-purple:hover{background-color:#2e38cb; box-shadow:none;}
-.loginWrap .loginInfo {color:#888; line-height:23px; text-align:left;}
-.loginWrap .loginInfo em i {margin-right:7px;}
-.loginWrap .loginInfo p:first-child{margin-bottom:15px;}
-.loginWrap .loginInfo p span {display:inline-block; margin-bottom:15px; line-height:40px; font-size:16px; font-weight:bold; border-bottom:1px solid #000;}
-
-/* 로그인 style :black */
-.login_black {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); background:#fff;}
-.login_black .logo { padding:25px 0; text-align:center; background:#000;}
-.login_black .loginInfo em {color:#555; font-weight:bold;}
-.login_black .loginCont > ul {padding:60px 60px 70px;}
-.login_black .loginBox li:nth-of-type(5) {border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
-.login_black .loginBox a {color:#555}
-
-/* 보안 인증 */
-.loginWrap .certiFrm {padding:40px 60px 70px;}
-.loginWrap .certiFrm h2{margin:10px 0 30px;}
-.loginWrap .certiFrm h2 i{margin-right:10px;}
-.loginWrap .certiFrm .alertBox{margin-bottom:15px}
-.loginWrap .certiFrm .input{height:45px; position:relative;}
-.loginWrap .certiFrm .input input[type=text]{position:relative; padding:10px; width:45px; height:45px; line-height:45px; font-size:16px; border:1px solid #ced4da; border-radius:.25rem; text-align:center;}
-.loginWrap .certiFrm .input input[type=text]:focus{color:#4D90FE;font-weight:bold;}
-.loginWrap .certiFrm .input .countdown{display:inline-block; position:relative; padding-left:20px; line-height:45px; height:45px;color:red; text-align:center;vertical-align:top; font-size:14px}
-.loginWrap .certiFrm .info{margin-top:20px; line-height:22px; color:#555;}
-.loginWrap .certiFrm .button{margin:25px 0 50px;}
-.loginWrap .certiFrm .button button{margin:0 5px !important; padding:5px 20px; height:32px; float:right}
-.loginWrap .certiFrm .button button:focus{outline:2px auto #4D90FE !important; }
-.loginWrap .certiFrm .button .btn-black{width:100px !important;}
-
-/* 로그인 :alert */
-.alertBox {position:relative; padding:10px 40px 10px 10px; margin-bottom:10px; border:1px solid; border-radius:.25rem; line-height:22px;}
-.alertBox .alertClose {position:absolute; top:0; right:5px; padding:0 10px; height:40px; text-indent:-9999px; background:url('/image/btn_sltClose.png') no-repeat 50% 50%;}
-.alertBox .alertClose:hover {background:url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
-.alert-success {color:#155724; background-color:#d4edda; border-color:#c3e6cb;}
-.alert-info {color:#0c5460; background-color:#d1ecf1; border-color:#bee5eb;}
-.alert-warning {color:#856404; background-color:#fff3cd; border-color:#ffeeba;}
-.alert-danger {color:#721c24; background-color:#f8d7da; border-color:#f5c6cb;}
-
-/* header--------------- */
-header {position:fixed; top:0; left:0; right:0; z-index:10; min-width:1240px; width:100%; height:60px; line-height:60px; color:#fff; background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
-header a, header button {color:#fff;}
-.header-logo {float:left; width:260px; line-height:60px; background:rgba(250, 251, 252, 0.1); overflow:hidden;}
-.header-logo a {display:inline-block; margin:0 10px 0 20px; width:184px; height:60px;}
-.header-logo .lnbClose {width:30px; line-height:30px; display:inline-block !important;}
-.header-logo .lnbClose:hover {color:rgba(255, 255, 255, 0.8);}
-.header-menu {position:absolute; left:260px; padding:0 0 0 30px; font-weight:bold;}
-.header-menu .menu {display:inline-block; -ms-user-select:none; -webkit-user-select:none; user-select:none;}
-.header-menu .menu a {display:inline-block; margin-right:7px; padding:0 14px; line-height:34px; border-radius:50px; background:rgba(0, 0, 0, 0.07);}
-.header-menu .menu a:hover {color:rgba(255, 255, 255, 0.8);}
-.header-menu .menu a.on {background:rgba(0, 0, 0, 0.3);}
-.header-info {display:inline-block; float:right; margin-right:20px;}
-.header-info a {color:rgba(255, 255, 255, 0.8);}
-.header-info a:hover {color:#fff;}
-.header-info i.heart {font-size:6px; color:rgba(255, 255, 255, 0.4); margin-right:3px;}
-.header-info i.dot {font-size:13px; color:rgba(255, 255, 255, 0.4); margin:0 3px;}
-.header-info-sm {display:none; float:right; margin-right:20px;}
-.header-info-sm a {display:inline-block; padding:0 7px; color:rgba(255, 255, 255, 0.8);}
-.header-info-sm a:hover {color:#fff;}
-
-/* GNB:툴팁--------------- */
-.tooltip .tooltiptext {visibility:hidden; position:absolute; top:48px; right:20px; z-index:1; padding:0 15px; line-height:30px; color:#fff; font-size:13px; text-align:center; background-color:#233646; border-radius:3px;}
-.tooltip .tooltiptext::after {content:""; position:absolute; bottom:100%; right:38px; border-width:5px; border-style:solid; border-color:transparent transparent #233646 transparent;}
-.tooltip .tooltiptext.logout::after {right:10px;}
-.tooltip:hover .tooltiptext {visibility:visible;}
-
-/* LNB--------------- */
-#lnb-wrapper {position:fixed; top:60px; left:-260px; width:260px; height:100%; vertical-align:top; overflow-y:auto; transition:left .3s; -webkit-transition:left .3s; background-color:#2f4050;}
-#lnb-wrapper:after{content:''; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%;}
-#lnb-wrapper.on {left:0;}
-#lnb {margin-bottom:100px; width:260px;}
-#lnb a {display:block; color:#a7b1c2;}
-#lnb a:hover {color:#fff;}
-#lnb a.on {color:#fff;}
-#lnb .dep2 {padding:14px 20px 14px 35px; background:url('/image/icon_dep2.png') 10px 50% no-repeat, url('/image/icon_depArr2.png') 222px 50% no-repeat; background-color:#233646; cursor:pointer;}
-#lnb .dep2.on {display:block; background:url('/image/icon_dep2On.png') 10px 50% no-repeat, url('/image/icon_depArr2On.png') 222px 50% no-repeat; background-color:#233646;}
-#lnb .dep3 {padding:5px 0 10px 10px; border-left:4px solid #8597eb; cursor:pointer;}
-#lnb .dep3 a {padding:10px; cursor:pointer;}
-#lnb .dep4 {padding:5px 0 10px 20px; cursor:pointer;}
-#lnb .dep4 a {padding:10px; cursor:pointer;}
-
-/* main--------------- */
-#main-wrapper {position:relative; left:0; top:0; margin-left:0; min-height:100%; padding-bottom:60px; vertical-align:top; color:#222; transition:margin-left .3s; -webkit-transition:margin-left .3s;}
-#main-wrapper.on {margin-left:260px;}
-#main {padding-top:60px; position:relative;}
-#main .main-title {height:60px; margin-left:20px; margin-right:20px;}
-#main .main-title h1 {padding-top:15px; font-size:20px; color:#333; font-weight:700;}
-#main .main-title ol {margin-top:25px; float:right; color:#666;}
-#main .main-title li {float:left;}
-#main .main-title li::before {padding:0 5px; content:"/"; color:#999;}
-#main .main-title li:nth-of-type(1)::before {content:none !important;}
-#main .main-title i {padding-right:3px; color:#999;}
-#main .sub-title {margin:0 20px 10px; font-size:14px; color:#6c7dda; font-weight:bold;}
-#main .sub-title i {margin-right:10px;}
-
-/* 패널영역 스타일--------------- */
-.panelStyle {position:relative; margin:0 20px 30px 20px; padding:15px 15px 0; background-color:#fff; border-top:2px solid #dfe2e3; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.04);}
-.panelStyle::after, .frmStyle::after{position:relative; bottom:-5px; content:''; display:block; border:1px solid rgba(255,255,255,0);}
-.panelStyle .panelTitle {margin:-15px -15px 0; padding:0 20px; line-height:40px; border-bottom:1px solid #e7eaec;}
-.panelStyle .panelControl {position:absolute; top:0; right:15px; color:#c4c4c4;}
-.panelStyle .panelControl i {padding:10px 10px; cursor:pointer;}
-.panelStyle .panelContent {margin-top:10px;}
-.panelStyle h2 {margin-right:10px; font-size:14px; font-weight:bold;}
-.panelStyle h3 {margin-right:10px; font-size:12px; font-weight:normal; line-height:25px;}
-.panelStyle h3 i {padding-right:5px}
-.panelStyle h4 {padding-left:23px; height:31px; line-height:31px; background:url('/image/icon_h4.png') no-repeat 3px 50%; color:#666;}
-.panelStyle .panelBar {display:table; width:100%; padding-bottom:10px;}
-.panelStyle .panelBar h4 {margin-bottom:0;}
-.panelStyle .panelBar > li {display:table-cell;}
-.panelStyle .panelBar > .center {text-align:center;}
-.panelStyle .panelBar > .right {text-align:right;}
-.panelStyle .inner-fa-chevron-up:before {content:"\f077";}
-.panelStyle .inner-fa-chevron-down:before {content:"\f078";}
-
-/* 패널 내부 테이블 여러개 배치 */
-.panelStyle .division + .panelBar {padding-bottom:15px;}
-.panelStyle .division {display:table; width:100%;}
-.panelStyle .division > li, .panelStyle .division > div {display:table-cell; padding-right:40px;}
-.panelStyle .division > li:last-child, .panelStyle .division > div:last-child {padding-right:0;}
-/* table, grid, button 상하 여백 */
-.ag-theme-balham{margin-bottom:15px !important;}
-.frmStyle + .panelBar {padding-bottom:15px;}
-.ag-theme-balham {margin:10px 0 15px;}
-.ag-theme-balham + .panelBar{padding-bottom:15px;}
-.panelBar + .ag-theme-balham {margin:0 0 15px;}
-.panelBar + .frmStyle {margin-top:0;}
-
-/* TABS 영역 --------------- */
-.tabs {position:relative; margin-bottom:30px; margin-left:20px; margin-right:20px;}
-.tabs h2 {position:absolute; top:0; z-index:2; margin-left:10px; font-size:14px; line-height:34px;}
-.tabs h2 i {margin-right:12px;}
-.tabsNav {overflow:hidden; position:relative; top:0; z-index:2; padding:0 30px 0 20px; height:35px;}
-.tabsNav ul {display:inline-block;}
-.tabsNav li {float:left; position:relative;}
-.tabsNav li a {padding:0 20px; line-height:35px; height:35px; display:block; color:#888; font-weight:bold; background-color:#f9f9f9; border:1px solid #dfe2e3; border-bottom:2px solid #dfe2e3; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
-.tabsNav li.on a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
-.tabsCont {position:relative; top:-2px; z-index:1;}
-.tabsCont::after {display:block}
-.tab {display:none;}
-.tab > .panelStyle{margin:0;}
-.tab.on {display:block;}
-.popupTabs {padding-top:10px;}
-.tabContArea {overflow-x:hidden; overflow-y:auto;}
-.tabBtnArea {padding:15px 0 20px 0;}
-.popup .tabsCont {box-shadow:none;}
-.popup .tabs {margin-bottom:0;}
-
-/* Add TABS 영역 --------------- */
-.btn-add-tab {position:absolute; top:5px; right:0; z-index:2; padding:0 10px;}
-.tabsNav .ui-tabs-active a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
-.tab-del {position:absolute; top:1px; right:1px; padding:4px 6px; color:gray; cursor:pointer; border-top-right-radius:.25rem;}
-.tab-del:hover {color:#f40552;}
-a, button, .ui-state-active, .ui-state-focus, .ui-state-hover {outline:0 !important;}
-.tabsNav .ui-corner-top a {padding:0 35px 0 20px}
-
-/* tabsJr 영역 --------------- */
-.tabsJr {position:relative;}
-.tabsJrNav {overflow:hidden; position:relative; top:0; z-index:2; height:31px; margin:0 30px 0 20px;}
-.tabsJrNav > ul {display:inline-block;}
-.tabsJrNav li {float:left;}
-.tabsJrNav li a {padding:0 20px; line-height:30px; height:30px; display:block; color:#888; /*font-weight:bold; */ background-color:#f9f9f9; border:1px solid #ccc; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
-.tabsJrNav li.on a {padding-bottom:2px; font-weight:bold; color:#555; background-color:#fff; border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #fff;}
-.tabsJrCont {position:relative; top:-2px; z-index:1;}
-.tabsJrCont::after {display:block}
-.tabJr {display:none;}
-.tabJr .panelStyle{margin:0; border-top:1px solid #ddd; min-height:20px; padding:20px 15px 0; box-shadow:0 -5px 7px -5px rgba(0, 0, 0, 0.05);}
-.tabJr.on {display:block;}
-.tabJrContArea {vertical-align:middle;}
-
-/* modal, modeless popup --------------- */
-.modalPopup{display:none; position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
-.modalPopup > .panelStyle{position:absolute; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
-.modalPopup > .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
-.modalPopup .tabs{ margin:0;}
-.modalPopup .tabs .panelStyle{box-shadow:none}
-.modalPopup .tab > .panelStyle{overflow-y:auto;}
-
-/*MODELESS POPUP --------------- */
-.modelessPopup{display:none; position:absolute; z-index:11; top:50%; left:50%;}
-.modelessPopup.draggable {cursor:move;}
-.modelessPopup .panelStyle{margin:0; border:1px solid #ccc; border-radius:3px;}
-.modelessPopup .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
-.modelessPopup .tabs{ margin:0;}
-.modelessPopup .tabs .panelStyle{box-shadow:none}
-.modelessPopup .tab > .panelStyle{overflow-y:auto;}
-
-/*VIDEO POPUP --------------- */
-.videoPopup {display:none; position:fixed; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
-.modalPopup::before{position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
-.videoPopup .close {position:absolute; top:-20px; right:-20px; z-index:1; width:40px; height:40px; line-height:20px; font-size:20px; border:1px solid #666; border-radius:50px; background-color:#fff;}
-.videoPopup iframe{width:100%; height:100%}
-
-
-#btnTop {display:none; position:fixed; right:0; bottom:50px; width:40px; line-height:10px; font-size:10px; background:#fff; border:1px solid #ddd; border-right:none; padding:3px 0 5px 0; box-shadow:5px 5px 5px -4px rgba(0, 0, 0, 0.07); color:#1c84c6;}
-#btnTop i {width:100%; font-size:12px;}
-#btnTop:hover {padding-right:30px; width:70px; font-weight:bold;}
-
-
-/* 컨텐트 스크롤--------------- */
-.xScroll {overflow-x:auto;}
-.yScroll {overflow-y:auto;}
-
-/* 폼테이블 스타일 --------------- */
-.frmStyle {width:100%; margin-bottom:15px;}
-.frmStyle th {border-top:1px solid #dae0fd;}
-.frmStyle tr:last-child th {border-bottom:1px solid #dae0fd;}
-.frmStyle tr:last-child td {border-bottom:1px solid #eee;}
-.frmStyle th {padding:0 15px; height:36px; line-height:24px; white-space:nowrap; text-align:center; background:#e9ecfb;}
-.frmStyle td {padding:0 10px 0 10px; line-height:36px; position:relative; border-top:1px solid #eee; border-right:1px solid #eee;}
-
-/* 체크박스&라디오박스 공통--------------- */
-input[type=radio] {position:absolute; top:50%; left:0; width:18px; height:18px; transform:translate(0,-50%); -ms-transform:translate(0,-50%);}
-label.chkBox, label.rdoBtn {position:relative; display:inline-block; padding-left:26px; height:22px; line-height:22px; vertical-align:middle; cursor:pointer;}
-/* 체크박스 :전체선택 버튼--------------- */
-input[type=checkbox] {position:absolute; top:0; left:0; width:0; height:0;}
-input[type=button].chkBox {margin-left:-2px; padding-left:24px; height:22px; vertical-align:middle; background:url('/image/icon_checkN.png') no-repeat 0 50%;}
-
-/* 체크박스--------------- */
-label.chkBox::before {position:absolute; top:2px; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; background:#fff;}
-label.chkBox.checked::after {position:absolute; top:6px; left:3px; content:''; width:8px; height:4px; border-bottom:3px solid #676a6c; border-left:3px solid #676a6c; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
-label.chkBox .formControl::before {background:#eee;}
-
-/* 라디오버튼--------------- */
-input[type=radio]::before {position:absolute; top:0; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; border-radius:50%; background:#fff;}
-input[type=radio]:checked::after {position:absolute; top:5px; left:5px; content:''; width:8px; height:8px; border-radius:50%; background:#676a6c;}
-input[type=radio].formControl::before {background:#eee;}
-
-/* 토글 스위치--------------- */
-.switchBox{ display:inline-block;position:relative; width:60px; height:28px; vertical-align:middle;border-radius:25px;overflow:hidden;}
-.switchBox input[type="checkbox"]{position:absolute;visibility:hidden;}
-.switchBox label{display:block;position:absolute;top:0;width:60px;height:28px;background-color:#aaa;transition-duration:0.2s;}
-.switchBox label span{position:absolute;left:0;top:50%;z-index:1;width:26px;height:23px;border-radius:25px;transform:translate(3px, -50%);transition-duration:0.2s;background-color:#fff;text-indent:-9999px;}
-.switchBox label:before,label:after{position:absolute;top:0;width:52%;font-size:11px;line-height:27px;color:#fff;text-align:center;}
-.switchBox label:before{left:0;content:'ON';}
-.switchBox label:after{right:0;content:'OFF';}
-.switchBox input:checked + label span{transform:translate(31px, -50%);}
-.switchBox input:checked::before, .switchBox input:checked::after{border:none}
-.switch-base input:checked + label{color:#fff; background-color:#8597eb;}
-.switch-primary input:checked + label{color:#fff; background-color:#1ab394;}
-.switch-success input:checked + label{color:#fff; background-color:#1c84c6;}
-.switch-info input:checked + label{color:#fff; background-color:#23c6c8; }
-.switch-warning input:checked + label{color:#fff; background-color:#f8ac59;}
-.switch-danger input:checked + label{color:#fff; background-color:#ed5565;}
-.switch-black input:checked + label{color:#fff; background-color:#222;}
-.switchBox + .switchBox {margin-left:6px;}
-
-/* 테이블 스타일--------------- */
-.tableStyle {width:100%; max-width:100%; margin-bottom:15px;}
-.tableStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
-.tableStyle th:last-child {border-right:none;}
-.tableStyle td {position:relative; padding:7px 0; border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb; text-align:center;}
-.tableStyle td:last-child {border-right:none;}
-.tableStyle tbody tr:nth-of-type(2n) {background-color:rgba(0, 0, 0, 0.02);}
-.tableStyle tbody tr:hover {background-color:rgba(224,243,255,0.6);}
-.tableStyle + .panelBar {padding-bottom:15px;}
-/* 스캔 */
-.scanTbl th {font-size:25px; line-height:80px;}
-.scanTbl td {line-height:80px;}
-.scanTbl input[type=text] {line-height:50px; font-size:32px;}
-.scanTbl .btn {overflow-y:hidden; margin-bottom:1px; padding:12px 30px; font-size:25px;}
-table.noPad tr > td, td.noPad {padding:0 !important;}
-th[rowspan] {border-bottom:1px solid #dae0fd;}
-td[rowspan] {border-bottom:1px solid #eee;}
-.nowrap {white-space:nowrap;}
-.solidR {border-right:1px solid #eee; vertical-align:middle;}
-.solidL {border-left:1px solid #eee; vertical-align:middle;}
-.solidT {border-top:1px solid #eee;}
-.solidB {border-bottom:1px solid #eee;}
-.dashR {border-right:1px solid #dae0fd;}
-.dashL {border-left:1px solid #dae0fd;}
-.noPad table.frmStyle > tr:first-child th {border-top:0 !important;}
-.noPad table.frmStyle > tr:first-child td {border-top:0 !important;}
-.noPad table.frmStyle > tr:last-child th {border-bottom:0 !important;}
-.noPad table.frmStyle > tr:last-child td {border-bottom:0 !important;}
-
-
-/* Q&A 스타일--------------- */
-.qnaStyle {width:100%; max-width:100%;}
-.qnaStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
-.qnaStyle th:last-child {border-right:none;}
-.qnaStyle td {position:relative; padding:7px 0; text-align:center;}
-.qnaStyle tr td {border-bottom:1px solid #ecf5f7;}
-.qnaStyle tbody tr:nth-of-type(3n+1) td {background-color:rgba(224,243,255,0.6);}
-.qnaStyle tbody tr:nth-of-type(3n) td {border-bottom:1px solid #ddd;}
-.qnaClaim { text-align:left !important; padding-left:10px !important;}
-.qnaClaim .goods {font-weight:bold; line-height:26px;}
-.qnaClaim .cont {line-height:22px; padding:10px 0; color:#1d3e9d;}
-.qnaClaim .email {line-height:26px;}
-.qnaClaim .email em {border-bottom:1px solid #aaa;}
-.lineRound {border:2px solid #ccc; border-radius:15px; padding:4px 14px; font-weight:bold;}
-
-/* 사은품 프로모션 등록창 style */
-.frGoodsPro .padding10 {padding:10px;}
-.frGoodsPro .wid45 {width:45%;display:inline-block;}
-.frGoodsPro .inner-tb-solid {border:solid 1px #eee;}
-
-/* 내부 테이블 디자인 */
-.subTable {display:table; width:100%;}
-.subTable dl {display:table; width:100%;}
-.subTable dt, .subTable dd {display:table-cell;}
-.subTable dt {vertical-align:middle; white-space:nowrap; width:8%; padding:0 15px; background:#e9ecfb; text-align:center; border-bottom:1px solid #dae0fd;}
-.subTable dl:last-child dt {border-bottom:none;}
-.subTable dd {border-bottom:1px solid #eee; padding:3px 20px 3px 10px;}
-.subTable dl:last-child dd {border-bottom:none;}
-
-/* button --------------- */
-.btn {border-radius:3px; vertical-align:middle; white-space:nowrap;font-size:12px;user-select:none;}
-.btn-lg {padding:4px 20px 5px; height:28px; overflow-y:hidden;}
-.btn-sm {margin-top:-2px; line-height:100%; height:28px; overflow-y:hidden;}
-.btn-ssm {margin-top:-2px; line-height:100%; height:22px; overflow-y:hidden;}
-.btn + .btn {margin-left:6px;}
-.btn:first-child {margin-left:0;}
-
-/* 버튼 색상 */
-.btn-white {color:#555 !important; background-color:#fff !important; border:1px solid #ccc !important;}
-.btn-default {color:#555; background-color:#eee; border:1px solid #dcdcdc;}
-.btn-gray {color:#fff; background-color:#aaa; border:1px solid #aaa;}
-.btn-base {color:#fff; background-color:#8597eb; border:1px solid #8597eb;}
-.btn-primary {color:#fff; background-color:#1ab394; border:1px solid #1ab394;}
-.btn-success {color:#fff; background-color:#1c84c6; border:1px solid #1c84c6;}
-.btn-info {color:#fff; background-color:#23c6c8; border:1px solid #23c6c8;}
-.btn-pink {color:#fff; background-color:#feada6; border:1px solid #feada6;}
-.btn-warning {color:#fff; background-color:#f8ac59; border:1px solid #f8ac59;}
-.btn-danger {color:#fff; background-color:#ed5565; border:1px solid #ed5565;}
-.btn-dark {color:#fff; background-color:#6c757d; border:1px solid #6c757d;}
-.btn.icn {line-height:28px; height:28px; padding:0 8px; background-color:#eee; border:1px solid #dbdbdb;}
-.btn.icn i {padding-top:6px; width:12px; vertical-align:top; font-size:14px; text-align:center;}
-
-/* 페이징 --------------- */
-.tablePaging {position:relative; 	display:inline-block; vertical-align:middle;}
-.tablePaging a {display:inline-block; float:left; margin:0 5px; width:28px; height:28px; line-height:28px; text-align:center; border:1px solid #ccc; border-radius:50px; cursor:pointer;}
-.tablePaging a.arrow {background-color:rgba(0, 0, 0, 0.03); 	border-color:#ebebeb;}
-.tablePaging .num.on {background:#8597eb; color:#fff; border-color:#8597eb;}
-
-/* 다중 Select Box */
-.mSelectWrap select {display:none;}
-.mSelectBox {display:inline-block; position:relative; top:-1px; margin:2px 0 2px 0; padding:0 7px 0 0; width:100%; height:auto !important; min-height:29px; border:1px solid #e5e6e7; vertical-align:middle;}
-.mSelected {overflow:auto;}
-.mSelected li {float:left; margin:2px 5px 3px; line-height:24px; padding:0 7px; background:#dbedf9; -ms-user-select:none; -moz-user-select:-moz-none; -webkit-user-select:none; user-select:none;}
-.mSelected li.srchFld {margin:0; padding:0; background:none;}
-.mSelected .srchFld input {width:25px; margin:0; padding:0; border:none; outline:none;}
-.mSelected a {border:none !important; float:right; margin-left:3px; padding:0 3px; width:15px; line-height:22px; text-indent:-9999px; background:url('/image/btn_sltClose.png') no-repeat 100% 50%;}
-.mSelected a:hover {background:url('/image/btn_sltCloseOn.png') no-repeat 100% 50%;}
-.mSelecting {display:none; overflow-y:auto; overflow-x:hidden; position:absolute; top:100%; left:-1px; z-index:1; width:100%; max-height:156px; line-height:30px; border:1px solid #e5e6e7; background:#fff;}
-.mSelecting li {margin:0 10px; cursor:pointer;}
-
-/* 멀티 Select Box */
-.mSelWrap {display:inline-block;}
-.mSelWrap select {height:100px; padding:7px 0;}
-.mSelWrap .mSelBtn {margin:0 0 0 5px; float:right; width:33px; vertical-align:top;}
-.mSelWrap .mSelBtn .btn {margin:0; vertical-align:top;}
-.mSelWrap option {padding:4px 100px 4px 10px;}
-
-/* 파일첨부 --------------- */
-.uFile {overflow:hidden; position:relative; display:inline-block; margin:-2px 5px 0 0; width:80%; height:28px; vertical-align:middle; border:1px solid #dbdbdb;}
-.lrStyle .uFile {margin-top:2px;}
-.uFileInput {position:absolute; top:0; width:100%; margin:0 !important; padding:0 !important; line-height:28px; border:none !important;}
-.uFileLabel {position:absolute; top:0; right:0; left:0; z-index:1; margin:0; padding:0 7px; width:cals(100% - 7px); line-height:28px; height:28px; background-color:#fff; border-radius:1px; overflow:hidden; white-space:nowrap;}
-.uFileLabel::after {position:absolute; top:0; right:0; bottom:0; width:30px; z-index:3; line-height:28px; content:" "; border-left:1px solid #dbdbdb; background:#eee url('/image/icon_upload.png') no-repeat 50% 50%;}
-
-/* badge --------------- */
-.badge {float:right; margin-top:2px; padding:0 5px; min-width:9px; line-height:18px; color:#fff; font-size:12px; font-weight:600; border-radius:3px; text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,0.4); letter-spacing:-0.5px;}
-.badge-warning {background-color:#ed7908;}
-.badge-primary {background-color:#1ab394;}
-.badge-danger {background-color:#ed5565;}
-.badge-success {background-color:#2fa4e7;}
-.badge-info {background-color:#23c6c8;}
-.badge.circle {border-radius:50px;}
-.dep3 .badge {position:relative; top:-28px; right:20px;}
-
-/* tag */
-.tagNum {display:inline-block; margin-left:5px; padding:0 3px 0 2px; min-width:13px; line-height:16px; font-weight:normal; color:#fc5555; background:#fff; border-radius:5px;}
-
-/* footer --------------- */
-footer {position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:#fff; border-top:1px solid #e7eaec; line-height:39px; font-size:13px;}
-footer .f-left {float:left; padding-left:20px; line-height:38px;}
-footer .f-right {float:right; padding-right:20px; line-height:38px;}
-
-/* 이미지 카드 */
-.dexterArea {min-width:350px; min-height:180px; padding:0 !important; vertical-align:top; background:#f1f1f1; vertical-align:top;}
-.dexterTable {display:table; width:100%; overflow-y:auto;}
-.dexterTable > li {display:table-cell; vertical-align:top; line-height:23px;}
-.dexterNo div {padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff;}
-.dexterNo div:first-child {margin-top:36px;}
-.dexterNo div:last-child {border-bottom:1px solid #ddd;}
-
-/* 수정용 이미지 카드 */
-.cardArea {width:100%; padding:0 0 20px; overflow-y:auto;}
-.imgCard {vertical-align:top; position:relative; display:inline-block; margin:20px 20px 0 0; padding:10px 10px 0 10px; border:1px solid #dbdbdb;}
-.imgCard ul {display:table;}
-.imgCard li {display:table-cell;}
-.imgCard img {margin-right:15px;}
-.imgCard li:nth-of-type(2) {padding-top:20px; max-width:150px; line-height:24px}
-.imgCard p {font-size:12px;}
-.imgCard .cardClose {position:absolute; top:0; right:0; width:24px; background:url('/image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
-.imgCard .cardClose:hover {background:#f1f1f1 url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
-.verticalTop {vertical-align:top;}
-
-/* 조회용 이미지 카드 */
-.cardArea2 {padding:10px 0;}
-.cardArea2 ul, .cardArea2 .box {vertical-align:top; position:relative; display:inline-block; margin:10px; border:1px solid #dbdbdb; max-width:300px;}
-.cardArea2 li {display:table-cell; line-height:26px; vertical-align:middle;}
-.cardArea2 li:nth-of-type(2) {padding:0 10px;}
-.cardArea2 .cardDel {position:absolute; top:0; right:0; background:url('/image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
-.cardArea2 .cardDel:hover {background:#f1f1f1 url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
-
-/* 테이블 외부 안내문구 */
-.panelStyle > .notice {margin:0 0 15px ;}
-.panelContent > .notice {margin:15px 0;}
-.notice em {color:red;}
-.notice li, p.dot {padding-left:20px; background:url('/image/dot_bk.png') no-repeat 5px 10px; line-height:24px;}
-p.dot .btn {margin-left:10px !important;}
-p.dot em {color:red;}
-
-/* 정렬 */
-.txt {line-height:36px;}
-.aC {text-align:center !important;}
-.aR {text-align:right !important;}
-.aL {text-align:left !important;}
-.vaT {vertical-align:top !important;}
-.vaM {vertical-align:middle !important;}
-.vaB {vertical-align:bottom !important;}
-
-/* 테이블 내부 안내문구 */
-.infoTxt {line-height:26px; padding:5px 0;}
-.infoTxt i {margin-right:7px;}
-.infoTxt em {color:red;}
-.infoTxtTh {display:inline-block; text-align:left; font-weight:normal; font-size:12px;}
-.infoTxtTh li {padding-top:3px;}
-.infoTxtTh i {padding-right:5px;}
-.srchOption {overflow:auto; padding:10px 0; line-height:36px;}
-
-/* 유의사항 안내 */
-.infoBox {margin:0 20px 20px; padding:7px 10px; border-top:2px solid #dfe2e3; border-bottom:2px solid #dfe2e3; background:#fff}
-.infoBox p {padding-left:25px; line-height:20px; font-size:12px; background:url('/image/dot_bk.png') no-repeat 10px 50%; background-size:3px auto;}
-
-/* 검색결과 안내문 */
-.srchNotice {padding-bottom:7px; font-weight:normal; font-size:14px;}
-.srchNotice em {color:red;}
-
-/* 필수입력항목 */
-.required {display:inline-block; position:relative; top:-3px; width:12px; height:7px; background:url('/image/icon_required.png') no-repeat 0 50%;}
-
-
-/* COLOR DESIGN -------------------------------------*/
-/*Color :Base ---*/
-.color-mPurple header,span.color-mPurple {background:linear-gradient(135deg,#667eea 0,#764ba2 100%) !important;}
-.color-purple header,span.color-purple {background:#667eea !important;}
-
-/*Color :Gray ---*/
-.color-mGray header,span.color-mGray {background:linear-gradient(to right,#6c757d 0%,#555 100%) !important;}
-.color-gray header,span.color-gray {background:#666 !important;}
-.color-mGray .frmStyle th,.color-mGray .tableStyle th,.color-gray .frmStyle th,.color-gray .tableStyle th {background:#eee !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
-.color-mGray .tablePaging .num.on,.color-gray .tablePaging .num.on {background:#888 !important; 	border-color:#888 !important;}
-.color-mGray #lnb .dep3,.color-gray #lnb .dep3 {border-color:#777 !important;}
-.color-mGray .tabsJrNav li.on a,.color-gray .tabsJrNav li.on a {color:#333;}
-
-/*Color :Blue ---*/
-.color-mBlue header,span.color-mBlue {background:linear-gradient(to right,#4481eb 0%,#04befe 100%) !important;}
-.color-blue header,span.color-blue {background:#0042a5 !important;}
-.color-mBlue .frmStyle th,.color-mBlue .tableStyle th,.color-blue .frmStyle th,.color-blue .tableStyle th {background:#d8eafc !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
-.color-mBlue .tablePaging .num.on,.color-blue .tablePaging .num.on {background:#3e91de !important; 	border-color:#3e91de !important;}
-.color-mBlue #lnb .dep3,.color-blue #lnb .dep3 {border-color:#3e91de !important;}
-.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {background:#d8eafc;}
-.color-mBlue .tabJr.on,.color-blue .tabJr.on {border-top:4px solid #d8eafc;}
-.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {color:#333;}
-
-/*Color :Green ---*/
-.color-mGreen header,span.color-mGreen {background:linear-gradient(135deg,#00b09b 0,#96c93d 100%) !important;}
-.color-green header,span.color-green {background:#00b09b !important;}
-.color-mGreen .frmStyle th,.color-mGreen .tableStyle th,.color-green .frmStyle th,.color-green .tableStyle th {background:#e5f7f5 !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
-.color-mGreen .tablePaging .num.on,.color-green .tablePaging .num.on {background:rgba(0,176,155,0.8); 	border-color:rgba(0,176,155,0.8) !important;}
-.color-mGreen #lnb .dep3,.color-green #lnb .dep3 {border-color:#00b09b !important;}
-.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {background:#e5f7f5;}
-.color-mGreen .tabJr.on,.color-green .tabJr.on {border-top:4px solid #e5f7f5;}
-.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {color:#333;}
-
-/*Color :Pink ---*/
-.color-mPink header,span.color-mPink {background:linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114)) !important;}
-.color-pink header,span.color-pink {background:#feada6 !important;}
-.color-mPink .frmStyle th,.color-mPink .tableStyle th,.color-pink .frmStyle th,.color-pink .tableStyle th {background:#fff7f6 !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
-.color-mPink .tablePaging .num.on,.color-pink .tablePaging .num.on {background:#feada6; 	border-color:#feada6 !important;}
-.color-mPink #lnb .dep3,.color-pink #lnb .dep3 {border-color:#feada6 !important;}
-.color-mPink .tabsJrNav li.on a,.color-pink .tabsJrNav li.on a {background:#fff7f6;}
-.color-mPink .tabJr.on,.color-pink .tabJr.on {border-top:4px solid #fff7f6;}
-.color-mPink .tabsJrNav li.on a,
-.color-pink .tabsJrNav li.on a {color:#333;}
-
-/*Color :black ---*/
-.color-black header, span.color-black{background:#3E3E3E !important;}
-.color-black .header-logo{background:#000 !important;}
-.color-black .header-menu .menu a{background:#000 !important;}
-.color-black .header-menu .menu a.on{background:#fff !important; color:#000 !important;}
-.color-black #lnb-wrapper{background-color:#b2b2b2 !important;}
-.color-black #lnb .dep2{background-color:#545454 !important;}
-.color-black #lnb .dep3{border-color:#000 !important;}
-.color-black #lnb .dep3{background:#fdfdfd !important;  }
-.color-black #lnb .dep3 a{color:#111111 !important;}
-.color-black #lnb a{color:#fff !important;}
-.color-black .frmStyle th, .color-black .tableStyle th, .color-black .frmStyle th, .color-black .tableStyle th{background:#eee !important; 	border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
-.color-black .tablePaging .num.on, .color-black .tablePaging .num.on{background:#888 !important; 	border-color:#888 !important;}
-.color-black .tabsJrNav li.on a, .color-black .tabsJrNav li.on a{color:#333; background:#eee !important}
-.color-black .tabJr.on, .color-black .tabJr.on { border-top:4px solid #eee;}
-
-/* 폰트 컬러, 폰트 두께 */
-.cBlue {color:#127fdc !important;}
-.cGray {color:#666 !important;}
-.cRed {color:red !important;}
-.bold {font-weight:bold !important;}
-
-/* 배경 투명도 */
-.bgOp6 {opacity:0.6; color:#000 !important;}
-
-/* 여백 지정 */
-hr {border:0; padding-bottom:10px;}/* 기본 여백 :10px */
-.pad10 {padding:10px 0 !important;}
-.pad15 {padding:15px 0 !important;}
-.pad20 {padding:20px 0 !important;}
-.padT3 {padding-top:3px !important;}
-.padT5 {padding-top:5px !important;}
-.padT10 {padding-top:10px !important;}
-.padT15 {padding-top:15px !important;}
-.padT20 {padding-top:20px !important;}
-.padT30 {padding-top:30px !important;}
-.padT40 {padding-top:40px !important;}
-.padR20 {padding-right:20px !important;}
-.padL10 {padding-left:10px !important;}
-.padB5 {padding-bottom:5px !important;}
-.padB10 {padding-bottom:10px !important;}
-.padB15 {padding-bottom:15px !important;}
-.padB20 {padding-bottom:20px !important;}
-.padB30 {padding-bottom:30px !important;}
-.padB40 {padding-bottom:40px !important;}
-.marT5 {margin-top:5px !important;}
-.marT10 {margin-top:10px !important;}
-.marT15 {margin-top:15px !important;}
-.marT20 {margin-top:20px !important;}
-.marR3 {margin-right:3px !important;}
-.marL5 {margin-left:5px !important;}
-.marL10 {margin-left:10px !important;}
-.marL20 {margin-left:20px !important;}
-.marR10 {margin-right:10px !important;}
-.marR20 {margin-right:20px !important;}
-
-/* 넓이 지정 --------------- */
-.w20 {width:20px !important;}
-.w50 {width:50px !important;}
-.w60 {width:60px !important;}
-.w70 {width:60px !important;}
-.w80 {width:80px !important;}
-.w90 {width:80px !important;}
-.w100 {width:100px !important;}
-.w130 {width:130px !important;}
-.w150 {width:150px !important;}
-.w200 {width:200px !important;}
-.w300 {width:300px !important;}
-.w400 {width:400px !important;}
-.w500 {width:500px !important;}
-.w600 {width:600px !important;}
-.w800 {width:800px !important;}
-.w100p {width:100% !important;}
-.w90p {width:90% !important;}
-.w80p {width:80% !important;}
-.w70p {width:70% !important;}
-.w60p {width:60% !important;}
-.w50p {width:50% !important;}
-.w40p {width:40% !important;}
-.w30p {width:30% !important;}
-.w20p {width:20% !important;}
-.h100 {height:100px !important;} /*alert, confirm 컨텐츠 높이에 사용*/
-
-
-/*-- 캘린더 --------------*/
-#calendar {max-width:900px; margin:20px 0 50px 20px;}
-
-/*-- error page --------------*/
-#errPage {padding-top:40px; width:650px; background:#fff; position:relative; top:48%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); border-radius:9px; vertical-align:middle; overflow:hidden; box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);}
-#errPage .errImg {padding-left:50px; display:table-cell; vertical-align:middle; padding-bottom:30px;}
-#errPage .errImg div {border-radius:50%; position:relative; display:inline-block; width:140px; height:140px; color:#fff; background:#d196e4; box-shadow:2px 2px 6px 0 rgba(0,0,0,0.2) inset;}
-#errPage .fa-television {position:absolute; top:30px; left:28px; font-weight:bold; font-size:80px;}
-#errPage .fa-info {position:absolute; top:49px; left:66px; font-size:34px;}
-#errPage .errTxt {padding:0 50px; display:table-cell; padding-bottom:40px;}
-#errPage .errTxt .ttl {font-size:16px; font-weight:bold; padding-bottom:20px;}
-#errPage .errTxt .cont { padding-bottom:20px; line-height:26px;}
-#errPage .errTxt .tel {color:#777;}
-#errPage .errBtn {width:100%; background:#f9f9fa; line-height:70px; text-align:right;}
-#errPage .errBtn .btn {margin-right:30px; border-radius:33px; background:#858b90; color:#fff; padding:5px 30px; line-height:24px; font-weight:bold; -webkit-transition:0.2s; transition:0.2s;}
-#errPage .errBtn .btn:hover {background:#555;}
-
-/*-- DEXTER --------------*/
-.dexterNo { width:43px;}
-.dexterNo div { padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff; text-align:right;}
-.dexterNo div:first-child {margin-top:28px;}
-
-/*-- 회원추가 --------------*/
-.memAddWrap {line-height:26px; padding:3px 0;}
-.memAdd {margin-right:15px; padding:2px 27px 2px 0; position:relative; line-height:24px; height:24px; white-space:nowrap;}
-.memAdd button {position:absolute; top:3px; right:0; bottom:0; width:18px; height:18px; border:1px solid #dbdbdb; border-radius:3px; text-indent:-9999px; background:#eee url('/image/btn_sltClose.png') no-repeat 50% 50%;}
-.memAdd button:hover {background:#eee url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
-
-/*-- Date Picker --------------*/ /* 20200521 수정 */
-table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
-.mtz-monthpicker-month {padding:7px; cursor:pointer;}
-.ui-datepicker-trigger {padding:0;}
-.ui-datepicker {z-index:800 !important; text-align:center; background:#fff;}
-.ui-datepicker .ui-datepicker-today,
-.ui-datepicker .ui-state-highlight {background:#fff7cf !important;}
-.ui-datepicker .ui-state-active {border:1px solid red !important;}
-.ui-datepicker .ui-datepicker-prev {position:absolute; top:3px; left:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('/image/icon_prev.png') no-repeat 50% 50%;}
-.ui-datepicker .ui-datepicker-next {position:absolute; top:3px; right:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('/image/icon_next.png') no-repeat 50% 50%;}
-.ui-datepicker .ui-datepicker-calendar {padding:5px; border:1px solid #ddd; border-top:none; text-align:center;}
-.ui-datepicker .ui-datepicker-calendar th{padding:5px 0}
-.ui-datepicker-week-end {text-align:center;}
-.ui-datepicker-calendar .ui-state-default {display:inline-block; text-align:center; width:32px; line-height:24px; border:none;}
-.ui-datepicker-header {position:relative; background:#d0e9ff; text-align:center; padding:5px; border:1px solid #ddd; border-bottom:none;}
-.ui-datepicker-buttonpane button {background-color:#eee; border:1px solid #dcdcdc; line-height:24px; border-radius:3px; margin:0 5px 5px 5px;}
-.ui-datepicker-current {float:left;}
-.ui-datepicker-close {float:right;}
-
-/* prograss bar */
-.prograssWrap {display:flex; flex-direction:row;}
-.prograssWrap > li {display:flex; align-items:center;}
-.prograssWrap > li:nth-of-type(1) {width:96%}
-.prograssWrap > li:nth-of-type(2) {margin-left:1.5rem !important}
-.prograss-lg {display:flex; width:100%; height:1rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
-.prograss-sm {display:flex; width:100%; height:.5rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
-.prograss-bar {display:flex; border-top-right-radius:.65rem; border-bottom-right-radius:.65rem; transition:width .6s ease;}
-.prograss-bar.bg-info {background-color:#11c5db;}
-.prograss-txt.bg-info {color:#11c5db; font-weight:bold;}
-.prograss-bar.bg-success {background-color:#1bc943;}
-.prograss-txt.bg-success {color:#1bc943; font-weight:bold;}
-.prograss-bar.bg-danger {background-color:#f83245;}
-.prograss-txt.bg-danger {color:#f83245; font-weight:bold;}
-.prograss-bar.bg-base {background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
-.prograss-txt.bg-base {color:#8597eb; font-weight:bold;}
-
-/* Multi CheckBox */
-.multiCheckBox {position:relative; display:inline-block; width:auto; line-height:27px; margin:3px 3px 3px 0;}
-.multiCheckBox .sltBtn {padding-left:5px; width:100%; height:27px; color:#555; text-align:left; border:1px solid #dbdbdb; box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}
-.multiCheckBox .sltBtn::after {position:absolute; top:6px; right:10px; content:''; width:7px; height:7px; border-bottom:1px solid #555; border-left:1px solid #555; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
-.multiCheckBox .sltBtn.on::after {top:10px; -webkit-transform:rotate(135deg); transform:rotate(135deg);}
-.multiCheckBox ul {display:none; position:absolute; top:26px; left:0; z-index:1; width:100%; height:auto; border:1px solid #dbdbdb; background:#fff;}
-.multiCheckBox li {padding:3px 10px;}
-.multiCheckBox li:hover {background-color:Highlight; color:HighlightText;}
-.multiCheckBox label {display:flex;}
-
-/* checkBox More */
-.checkBoxList {overflow:hidden; padding-right:36px; height:36px;}
-.checkBoxList.on {overflow:visible; height:auto;}
-.checkBoxList .more {position:absolute; top:-1px; right:0; width:36px; height:38px; border:1px solid #eee; background:#f7f7f7;}
-.checkBoxList ul {display:flex; flex-wrap:wrap;}
-.checkBoxList li {justify-content:flex-start; line-height:36px;}
-.checkBoxList[data-unit='1'] li {flex-basis:100%;}
-.checkBoxList[data-unit='2'] li {flex-basis:50%;}
-.checkBoxList[data-unit='3'] li {flex-basis:33%;}
-.checkBoxList[data-unit='4'] li {flex-basis:25%;}
-.checkBoxList[data-unit='5'] li {flex-basis:20%;}
-.checkBoxList[data-unit='6'] li {flex-basis:16.6%;}
-.checkBoxList[data-unit='7'] li {flex-basis:14.2%;}
-.checkBoxList[data-unit='8'] li {flex-basis:12.5%;}
-
-/* 아이콘 툴팁 버튼 */
-.iconTooltip {display:inline-block; position:relative; margin-right:10px;}
-.iconTooltip i {position:relative; color:#46a1ff; width:15px; height:15px; line-height:16px; border-radius:50%; border:1px solid #46a1ff; cursor:pointer; text-align:center;}
-.iconTooltip:hover i {box-shadow:0px 3px 7px 0px rgba(0,0,0,0.4);}
-.iconTooltip span {display:none; position:absolute; top:36px; z-index:5; padding:10px 15px; line-height:24px; color:#fff; background:#6d6d6d; box-shadow:0px 3px 7px 0px rgba(0,0,0,0.2); border-radius:5px;}
-.iconTooltip span:after {position:absolute; top:-4px; content:''; background:#6d6d6d; width:8px; height:8px; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
-.iconTooltip span.left {left:-10px}
-.iconTooltip span.left:after {left:15px;}
-.iconTooltip span.right {right:-10px}
-.iconTooltip span.right:after {right:15px;}
-.iconTooltip span.center {left:50%;}
-.iconTooltip span.center:after {right:5px;}
-.iconTooltip:hover span{display:block;}
-
-/* 상품이동 */
-.itemMove {display:inline-block; width:800px; border:1px solid #eee;}
-.itemMove .item {float:left; display:table; margin:0 10px 20px 0; width:220px; border:1px solid #eee;}
-.itemMove .item li {display:table-cell; vertical-align:top;}
-.itemMove .item li:nth-of-type(1) {width:80px;}
-.itemMove .item li:nth-of-type(1) img {width:80px; height:80px;}
-.itemMove .item button {width:16px; height:16px; text-indent:-9999px;}
-.itemMove .item input {width:30px; height:14px !important; line-height:14px}
-.itemMove .item li:nth-of-type(2) div {line-height:20px}
-
-/* 상품 Dragable :20200129 */
-.sortableWrap #sortable { overflow-y:auto }
-.sortableWrap {margin:20px 0; width:100%; max-height:675px;}
-.sortableWrap .itemWrap {display:inline-block;}
-.sortableWrap .item {float:left; margin-right:12px; margin-bottom:12px; padding:5px 8px; line-height:20px; border:1px solid #ddd; vertical-align:top; background:#fff;}
-.sortableWrap .item > li {float:left; vertical-align:middle;}
-.sortableWrap .item .img {margin-top:3px; margin-right:10px; width:80px;}
-.sortableWrap .item .img img {width:80px; height:80px; cursor:move;}
-.sortableWrap .btnArea {text-align:center; margin-top:15px; padding:0 10px;}
-.sortableWrap button.icnSm {overflow:hidden; position:relative; width:24px; height:20px; background-color:#fff;}
-.sortableWrap button.icnSm i {position:absolute; top:-4px; left:-3px; width:24px; line-height:24px; font-size:15px; color:#888;}
-.sortableWrap button.icnSm:hover i {color:#111;}
-.sortableWrap button.icnSm:last-child {margin-right:0;}
-.sortableWrap .item .cont {width:114px;}
-.sortableWrap .item .cont li em {margin:0 3px 0 7px;}
-.sortableWrap .item .cont .no {font-weight:bold; padding-bottom:3px;}
-.sortableWrap .item .cont .title {padding-bottom:3px; border-bottom:1px solid #eee;}
-.sortableWrap .item .cont .price {padding-top:3px; padding-bottom:3px;}
-.sortableWrap .item .cont input {margin-left:5px; width:37px;}
-
-
-.ag-theme-balham.lh60 .ag-cell {line-height:60px !important; height:60px;}
-.ag-theme-balham.lh70 .ag-cell {line-height:70px !important; height:70px;}
-.ag-theme-balham.lh80 .ag-cell {line-height:80px !important; height:80px;}
-.ag-theme-balham.lh90 .ag-cell {line-height:90px !important; height:90px;}
-.ag-theme-balham.lh100 .ag-cell {line-height:100px !important; height:100px;}
-.ag-theme-balham.lh110 .ag-cell {line-height:110px !important; height:110px;}
-.ag-theme-balham.lh120 .ag-cell {line-height:120px !important; height:120px;}
-
-
-/* 테이블 상품명 클릭시 이미지 레이어 활성화 */
-.viewImg {position:relative; color:blue; cursor:pointer}
-.thumbLayer {display:inline-block; position:absolute; top:0; right:0; z-index:5; border:1px solid #ddd}
-.thumbLayer img {width:100%; height:auto;}
-
-/* dashboard */
-.flexWrap{display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; color:#676a6c;}
-.flexWrap li{padding:0 20px 20px; width:calc(33.3%);}
-.flexWrap.unit4 li{width:calc(25%);}
-.flexWrap.unit5 li{width:calc(20%);}
-.flexWrap.unit6 li{width:calc(16.6%);}
-.flexWrap .title{padding:15px; font-weight:600; border:1px solid #e7eaec; border-top:2px solid #e7eaec;}
-.flexWrap .title h5{font-size:15px; font-weight:bold;}
-.flexWrap .title span{float:right; padding:1px 8px; font-size:10px; border-radius:0.25em;}
-.flexWrap .content{padding:15px; border:1px solid #e7eaec; border-top:none;}
-.flexWrap .content em{font-size:30px; font-weight:200;}
-.statText {margin-top:5px}
-.statText::after{display:block; clear:both; content:''}
-.statText span:nth-of-type(1){float:left; font-size:11px;}
-.statText span:nth-of-type(2){float:right; font-size:13px; font-weight:600;}
-.txt-success{color:#1c84c6;}
-.txt-info{color:#23c6c8;}
-.flexWrap .txt-danger{color:#ed5565;}
-.flexWrap .bg-success{background:#1c84c6;}
-.flexWrap .bg-info{background:#23c6c8;}
-.flexWrap .bg-danger{background:#ed5565;}
-.btn.on{-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);}
-.dbChart .btn-group{float:right; line-height:37px;}
-.dbChart .btn-group button{margin:0; height:23px;}
-.dbChart .boxleft{float:left; margin:20px 15px 20px 15px; width:calc(100% - 490px);}
-.dbChart .boxRight{float:left; margin:20px 20px 20px 40px; width:400px;}
-.dbChart .boxRight em{font-size:24px; font-weight:200;}
-.dbChart .boxRight > div{margin-bottom:25px;}
-.dbChart .boxRight .statText .c1 {color:#FF7043}
-.dbChart .boxRight .progress .c1 {background:#FF7043}
-.dbChart .boxRight .statText .c2 {color:#48C9B0}
-.dbChart .boxRight .progress .c2 {background:#48C9B0}
-.dbChart .boxRight .statText .c3 {color:#ca9900}
-.dbChart .boxRight .progress .c3 {background:#FFD54F}
-.progress{display:-ms-flexbox; display:flex; margin-top:5px; height:1rem; overflow:hidden; font-size:.75rem; background-color:#e9ecef; border-radius:.25rem;}
-.progress-mini{height:5px; margin-bottom:0;}
-.progress > div{height:5px; margin-bottom:0; transition:width 0.3s;}
-
-
-/* 카테고리 Sort */
-.categoryOrder {margin-bottom:15px; background:#fcfcfc;}
-.categoryOrder li {clear:both; padding-left:15px; line-height:40px; cursor:move; border-top:1px dashed red; }
-.categoryOrder li button.on {background-image:url(/image/icon_cate_minus.png);}
-/* .categoryOrder li:after {content:''; position:absolute; top:8px; left:-10px; width:21px; height:21px; background:url(/image/line_cate.png)} */
-.categoryOrder li:before{position:relative; content:''; width:1px; height:100%; background:#ddd;}
-.categoryOrder li ol{display:none}
-/* .categoryOrder ol:last-child li {background-image:none !important} */
-.categoryOrder button{position:relative; z-index:200; padding:0 15px 0; margin:0; line-height:40px; cursor:pointer; background-image:url(/image/icon_cate_plus.png); background-repeat:no-repeat; background-position:0 0;}
-
-
-
-/* 반응형:GNB 유저명,등급,로그아웃 --------------- */
-@media ( max-width:1370px ) {
- .header-info { display:none;}
- .header-info-sm { display:inline-block;}
-}
-
-/* 반응형 :dashboard(20200522) --------------- */
-@media ( max-width:1023px ) {
- /* 대시보드 */
- #wrapper.dashboard{width:100%; min-width:100%;}
- .dashboard .header-logo{width:100%}
- .dashboard #lnb-wrapper{display:none;}
- .dashboard .header-menu{display:none;}
- .dashboard .tabs{margin-left:0; margin-right:0;}
- .dashboard .tabs h2{position:relative; margin:10px 15px}
- .dashboard .tabsNav li:first-child{margin-left:0}
- .dashboard .tabsNav li:last-child{margin-right:0}
- .dashboard .tabsNav li a{font-size:16px}
- .dashboard .flexWrap li{width:100%}
- .dashboard .flexWrap.unit4 li{width:100%}
- .dashboard .flexWrap.unit5 li{width:100%}
- .dashboard .flexWrap.unit6 li{width:100%}
- .dashboard .boxStyle{margin-left:0; margin-right:0;}
- .dashboard .dbChart .boxleft{clear:left; margin:30px 15px 0 0; width:100%;}
- .dashboard .dbChart .boxRight{clear:right; width:100%; margin:30px 20px 20px;}
-}
-
-/* Fix Input Zoom on devices older than iPhone 5:*/
-@media screen and (device-aspect-ratio:2/3) {
-  select, textarea, input[type="text"], input[type="password"],
-  input[type="datetime"], input[type="datetime-local"],
-  input[type="date"], input[type="month"], input[type="time"],
-  input[type="week"], input[type="number"], input[type="email"],
-  input[type="url"]{ font-size:16px;}
-}
-
-/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
-@media screen and (device-aspect-ratio:40/71) {
-  select, textarea, input[type="text"], input[type="password"],
-  input[type="datetime"], input[type="datetime-local"],
-  input[type="date"], input[type="month"], input[type="time"],
-  input[type="week"], input[type="number"], input[type="email"],
-  input[type="url"]{ font-size:16px;}
-}
-
-/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */
-@media screen and (device-aspect-ratio:375/667) {
-  select, textarea, input[type="text"], input[type="password"],
-  input[type="datetime"], input[type="datetime-local"],
-  input[type="date"], input[type="month"], input[type="time"],
-  input[type="week"], input[type="number"], input[type="email"],
-  input[type="url"]{ font-size:16px;}
-}
-
-/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */
-@media screen and (device-aspect-ratio:9/16) {
-  select, textarea, input[type="text"], input[type="password"],
-  input[type="datetime"], input[type="datetime-local"],
-  input[type="date"], input[type="month"], input[type="time"],
-  input[type="week"], input[type="number"], input[type="email"],
-  input[type="url"]{ font-size:16px;}
-}
-
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); @import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); html,body {position:relative; height:100%;}
+html, body, header, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, label, a, p, form, input, textarea, table, hr, span, em {margin:0; padding:0; box-sizing:border-box;}
+body {overflow-x:hidden; font-family:"open sans", "Roboto", "Malgun Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; background-color:#f3f3f4;}
+h1, h2, h3, h4, h5, h6 {display:inline-block;}
+ul, ol {list-style:none;}
+ul::after, ol::after {display:block; clear:both; content:'';}
+img {vertical-align:middle; border-style:none;}
+a {text-decoration:none;}
+em, i {font-style:normal;}
+table {border-collapse:collapse;}
+th {text-align:inherit;}
+label {position:relative; margin-right:20px; display:inline-block; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
+label:last-child {margin-right:0 !important;}
+input,button,select,textarea {font-family:inherit; font-size:inherit;}
+input.btn-sm {padding:1px 6px;}
+input[type=text] {width:100%;}
+input[type=text], input[type=file], input[type=date], [type=password], textarea {padding:4px 3px 4px 5px; color:inherit; border-radius:1px; vertical-align:middle; margin:1px 3px 2px 0;}
+input[type=date],input[type=time],input[type=datetime-local],input[type=month] {-webkit-appearance:listbox;}
+input[readonly="readonly"], input[disabled="disabled"], input[readonly="readonly"]:before, input[disabled="disabled"]:before, select[readonly="readonly"], select[disabled="disabled"] {background-color:#eee !important;}
+button, select {text-transform:none;}
+button,[type=button],[type=reset],[type=submit] {margin:0; -webkit-appearance:button; border-radius:0; cursor:pointer; background-color:transparent; border-color:transparent;}
+button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {padding:0; border-style:none;}
+textarea {overflow:auto; resize:vertical; width:100%; margin:4px 0; vertical-align:middle; line-height:22px; height:32px;}
+.textareaR2 {min-height:60px; line-height:26px;}
+.textareaR3 {min-height:96px; line-height:26px;}
+.textareaR4 {min-height:134px; line-height:26px;}
+.byteChk {line-height:20px; padding-left:20px; display:inline-block; vertical-align:middle;}
+select {margin:0 3px 1px 0; padding:3px 10px 3px 3px; color:inherit; border-radius:1px; vertical-align:middle;}
+select, input[type=text], input[type=file], input[type=date], input[type=password], textarea {border:1px solid #dbdbdb;}
+select:focus, input:focus, textarea:focus, button:focus, .outline {outline:2px auto #4D90FE;}
+.formControl {background:#eee;}
+.off {display:none !important;}
+.scrollOff {overflow:hidden;}
+.f25 {font-size:25px;}
+
+html,body,#wrapper,#container {min-height:100%; height:100%;}
+#wrapper {position:relative; min-width:1240px;}
+
+/* 로그인 --------------- */
+.loginBg {background:#f3f3f4;}
+.loginWrap {width:500px; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.1);}
+.loginWrap .loginBox input[type=text],
+.loginWrap .loginBox input[type=password]{padding:10px; width:100%; border:1px solid #ced4da; border-radius:.25rem;}
+.loginWrap .loginBox li:nth-of-type(2), .loginBox li:nth-of-type(3) {padding-bottom:10px;}
+.loginWrap .loginBox li:nth-of-type(4) {padding:10px 0 50px 0; line-height:30px; text-align:left;}
+.loginWrap .loginBox li:nth-of-type(5) {margin-bottom:30px; text-align:center;}
+.loginWrap .loginBox a {display:inline-block; padding:10px;}
+.loginWrap .loginBox .dot {color:#ccc;}
+.loginWrap .btn-black {background-color:#555; color:#fff; font-weight:bold; float:right; margin:0 !important;}
+.loginWrap .btn-black:hover{background-color:#000; box-shadow:none;}
+.loginWrap .btn-purple {background-color:#667eea; color:#fff; font-weight:bold; float:right; margin:0 !important;}
+.loginWrap .btn-purple:hover{background-color:#2e38cb; box-shadow:none;}
+.loginWrap .loginInfo {color:#888; line-height:23px; text-align:left;}
+.loginWrap .loginInfo em i {margin-right:7px;}
+.loginWrap .loginInfo p:first-child{margin-bottom:15px;}
+.loginWrap .loginInfo p span {display:inline-block; margin-bottom:15px; line-height:40px; font-size:16px; font-weight:bold; border-bottom:1px solid #000;}
+
+/* 로그인 style :black */
+.login_black {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); background:#fff;}
+.login_black .logo { padding:25px 0; text-align:center; background:#000;}
+.login_black .loginInfo em {color:#555; font-weight:bold;}
+.login_black .loginCont > ul {padding:60px 60px 70px;}
+.login_black .loginBox li:nth-of-type(5) {border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
+.login_black .loginBox a {color:#555}
+
+/* 보안 인증 */
+.loginWrap .certiFrm {padding:40px 60px 70px;}
+.loginWrap .certiFrm h2{margin:10px 0 30px;}
+.loginWrap .certiFrm h2 i{margin-right:10px;}
+.loginWrap .certiFrm .alertBox{margin-bottom:15px}
+.loginWrap .certiFrm .input{height:45px; position:relative;}
+.loginWrap .certiFrm .input input[type=text]{position:relative; padding:10px; width:45px; height:45px; line-height:45px; font-size:16px; border:1px solid #ced4da; border-radius:.25rem; text-align:center;}
+.loginWrap .certiFrm .input input[type=text]:focus{color:#4D90FE;font-weight:bold;}
+.loginWrap .certiFrm .input .countdown{display:inline-block; position:relative; padding-left:20px; line-height:45px; height:45px;color:red; text-align:center;vertical-align:top; font-size:14px}
+.loginWrap .certiFrm .info{margin-top:20px; line-height:22px; color:#555;}
+.loginWrap .certiFrm .button{margin:25px 0 50px;}
+.loginWrap .certiFrm .button button{margin:0 5px !important; padding:5px 20px; height:32px; float:right}
+.loginWrap .certiFrm .button button:focus{outline:2px auto #4D90FE !important; }
+.loginWrap .certiFrm .button .btn-black{width:100px !important;}
+
+/* 로그인 :alert */
+.alertBox {position:relative; padding:10px 40px 10px 10px; margin-bottom:10px; border:1px solid; border-radius:.25rem; line-height:22px;}
+.alertBox .alertClose {position:absolute; top:0; right:5px; padding:0 10px; height:40px; text-indent:-9999px; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%;}
+.alertBox .alertClose:hover {background:url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
+.alert-success {color:#155724; background-color:#d4edda; border-color:#c3e6cb;}
+.alert-info {color:#0c5460; background-color:#d1ecf1; border-color:#bee5eb;}
+.alert-warning {color:#856404; background-color:#fff3cd; border-color:#ffeeba;}
+.alert-danger {color:#721c24; background-color:#f8d7da; border-color:#f5c6cb;}
+
+/* header--------------- */
+header {position:fixed; top:0; left:0; right:0; z-index:10; min-width:1240px; width:100%; height:60px; line-height:60px; color:#fff; background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
+header a, header button {color:#fff;}
+.header-logo {float:left; width:260px; line-height:60px; background:rgba(250, 251, 252, 0.1); overflow:hidden;}
+.header-logo a {display:inline-block; margin:0 10px 0 20px; width:184px; height:60px;}
+.header-logo .lnbClose {width:30px; line-height:30px; display:inline-block !important;}
+.header-logo .lnbClose:hover {color:rgba(255, 255, 255, 0.8);}
+.header-menu {position:absolute; left:260px; padding:0 0 0 30px; font-weight:bold;}
+.header-menu .menu {display:inline-block; -ms-user-select:none; -webkit-user-select:none; user-select:none;}
+.header-menu .menu a {display:inline-block; margin-right:7px; padding:0 14px; line-height:34px; border-radius:50px; background:rgba(0, 0, 0, 0.07);}
+.header-menu .menu a:hover {color:rgba(255, 255, 255, 0.8);}
+.header-menu .menu a.on {background:rgba(0, 0, 0, 0.3);}
+.header-info {display:inline-block; float:right; margin-right:20px;}
+.header-info a {color:rgba(255, 255, 255, 0.8);}
+.header-info a:hover {color:#fff;}
+.header-info i.heart {font-size:6px; color:rgba(255, 255, 255, 0.4); margin-right:3px;}
+.header-info i.dot {font-size:13px; color:rgba(255, 255, 255, 0.4); margin:0 3px;}
+.header-info-sm {display:none; float:right; margin-right:20px;}
+.header-info-sm a {display:inline-block; padding:0 7px; color:rgba(255, 255, 255, 0.8);}
+.header-info-sm a:hover {color:#fff;}
+
+/* GNB:툴팁--------------- */
+.tooltip .tooltiptext {visibility:hidden; position:absolute; top:48px; right:20px; z-index:1; padding:0 15px; line-height:30px; color:#fff; font-size:13px; text-align:center; background-color:#233646; border-radius:3px;}
+.tooltip .tooltiptext::after {content:""; position:absolute; bottom:100%; right:38px; border-width:5px; border-style:solid; border-color:transparent transparent #233646 transparent;}
+.tooltip .tooltiptext.logout::after {right:10px;}
+.tooltip:hover .tooltiptext {visibility:visible;}
+
+/* LNB--------------- */
+#lnb-wrapper {position:fixed; top:60px; left:-260px; width:260px; height:100%; vertical-align:top; overflow-y:auto; transition:left .3s; -webkit-transition:left .3s; background-color:#2f4050;}
+#lnb-wrapper:after{content:''; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%;}
+#lnb-wrapper.on {left:0;}
+#lnb {margin-bottom:100px; width:260px;}
+#lnb a {display:block; color:#a7b1c2;}
+#lnb a:hover {color:#fff;}
+#lnb a.on {color:#fff;}
+#lnb .dep2 {padding:14px 20px 14px 35px; background:url('../../image/icon_dep2.png') 10px 50% no-repeat, url('../../image/icon_depArr2.png') 222px 50% no-repeat; background-color:#233646; cursor:pointer;}
+#lnb .dep2.on {display:block; background:url('../../image/icon_dep2On.png') 10px 50% no-repeat, url('../../image/icon_depArr2On.png') 222px 50% no-repeat; background-color:#233646;}
+#lnb .dep3 {padding:5px 0 10px 10px; border-left:4px solid #8597eb; cursor:pointer;}
+#lnb .dep3 a {padding:10px; cursor:pointer;}
+#lnb .dep4 {padding:5px 0 10px 20px; cursor:pointer;}
+#lnb .dep4 a {padding:10px; cursor:pointer;}
+
+/* main--------------- */
+#main-wrapper {position:relative; left:0; top:0; margin-left:0; min-height:100%; padding-bottom:60px; vertical-align:top; color:#222; transition:margin-left .3s; -webkit-transition:margin-left .3s;}
+#main-wrapper.on {margin-left:260px;}
+#main {padding-top:60px; position:relative;}
+#main .main-title {height:60px; margin-left:20px; margin-right:20px;}
+#main .main-title h1 {padding-top:15px; font-size:20px; color:#333; font-weight:700;}
+#main .main-title ol {margin-top:25px; float:right; color:#666;}
+#main .main-title li {float:left;}
+#main .main-title li::before {padding:0 5px; content:"/"; color:#999;}
+#main .main-title li:nth-of-type(1)::before {content:none !important;}
+#main .main-title i {padding-right:3px; color:#999;}
+#main .sub-title {margin:0 20px 10px; font-size:14px; color:#6c7dda; font-weight:bold;}
+#main .sub-title i {margin-right:10px;}
+
+/* 패널영역 스타일--------------- */
+.panelStyle {position:relative; margin:0 20px 30px 20px; padding:15px 15px 0; background-color:#fff; border-top:2px solid #dfe2e3; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.04);}
+.panelStyle::after, .frmStyle::after{position:relative; bottom:-5px; content:''; display:block; border:1px solid rgba(255,255,255,0);}
+.panelStyle .panelTitle {margin:-15px -15px 0; padding:0 20px; line-height:40px; border-bottom:1px solid #e7eaec;}
+.panelStyle .panelControl {position:absolute; top:0; right:15px; color:#c4c4c4;}
+.panelStyle .panelControl i {padding:10px 10px; cursor:pointer;}
+.panelStyle .panelContent {margin-top:10px;}
+.panelStyle h2 {margin-right:10px; font-size:14px; font-weight:bold;}
+.panelStyle h3 {margin-right:10px; font-size:12px; font-weight:normal; line-height:25px;}
+.panelStyle h3 i {padding-right:5px}
+.panelStyle h4 {padding-left:23px; height:31px; line-height:31px; background:url('../../image/icon_h4.png') no-repeat 3px 50%; color:#666;}
+.panelStyle .panelBar {display:table; width:100%; padding-bottom:10px;}
+.panelStyle .panelBar h4 {margin-bottom:0;}
+.panelStyle .panelBar > li {display:table-cell;}
+.panelStyle .panelBar > .center {text-align:center;}
+.panelStyle .panelBar > .right {text-align:right;}
+
+/* 패널 내부 테이블 여러개 배치 */
+.panelStyle .division + .panelBar {padding-bottom:15px;}
+.panelStyle .division {display:table; width:100%;}
+.panelStyle .division > li, .panelStyle .division > div {display:table-cell; padding-right:40px;}
+.panelStyle .division > li:last-child, .panelStyle .division > div:last-child {padding-right:0;}
+/* table, grid, button 상하 여백 */
+.ag-theme-balham{margin-bottom:15px !important;}
+.frmStyle + .panelBar {padding-bottom:15px;}
+.ag-theme-balham {margin:10px 0 15px;}
+.ag-theme-balham + .panelBar{padding-bottom:15px;}
+.panelBar + .ag-theme-balham {margin:0 0 15px;}
+.panelBar + .frmStyle {margin-top:0;}
+
+/* TABS 영역 --------------- */
+.tabs {position:relative; margin-bottom:30px; margin-left:20px; margin-right:20px;}
+.tabs h2 {position:absolute; top:0; z-index:2; margin-left:10px; font-size:14px; line-height:34px;}
+.tabs h2 i {margin-right:12px;}
+.tabsNav {overflow:hidden; position:relative; top:0; z-index:2; padding:0 30px 0 20px; height:35px;}
+.tabsNav ul {display:inline-block;}
+.tabsNav li {float:left; position:relative;}
+.tabsNav li a {padding:0 20px; line-height:35px; height:35px; display:block; color:#888; font-weight:bold; background-color:#f9f9f9; border:1px solid #dfe2e3; border-bottom:2px solid #dfe2e3; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
+.tabsNav li.on a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
+.tabsCont {position:relative; top:-2px; z-index:1;}
+.tabsCont::after {display:block}
+.tab {display:none;}
+.tab > .panelStyle{margin:0;}
+.tab.on {display:block;}
+.popupTabs {padding-top:10px;}
+.tabContArea {overflow-x:hidden; overflow-y:auto;}
+.tabBtnArea {padding:15px 0 20px 0;}
+.popup .tabsCont {box-shadow:none;}
+.popup .tabs {margin-bottom:0;}
+
+/* Add TABS 영역 --------------- */
+.btn-add-tab {position:absolute; top:5px; right:0; z-index:2; padding:0 10px;}
+.tabsNav .ui-tabs-active a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
+.tab-del {position:absolute; top:1px; right:1px; padding:4px 6px; color:gray; cursor:pointer; border-top-right-radius:.25rem;}
+.tab-del:hover {color:#f40552;}
+a, button, .ui-state-active, .ui-state-focus, .ui-state-hover {outline:0 !important;}
+.tabsNav .ui-corner-top a {padding:0 35px 0 20px}
+
+/* tabsJr 영역 --------------- */
+.tabsJr {position:relative;}
+.tabsJrNav {overflow:hidden; position:relative; top:0; z-index:2; height:31px; margin:0 30px 0 20px;}
+.tabsJrNav > ul {display:inline-block;}
+.tabsJrNav li {float:left;}
+.tabsJrNav li a {padding:0 20px; line-height:30px; height:30px; display:block; color:#888; /*font-weight:bold; */ background-color:#f9f9f9; border:1px solid #ccc; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
+.tabsJrNav li.on a {padding-bottom:2px; font-weight:bold; color:#555; background-color:#fff; border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #fff;}
+.tabsJrCont {position:relative; top:-2px; z-index:1;}
+.tabsJrCont::after {display:block}
+.tabJr {display:none;}
+.tabJr .panelStyle{margin:0; border-top:1px solid #ddd; min-height:20px; padding:20px 15px 0; box-shadow:0 -5px 7px -5px rgba(0, 0, 0, 0.05);}
+.tabJr.on {display:block;}
+.tabJrContArea {vertical-align:middle;}
+
+/* modal, modeless popup --------------- */
+.modalPopup{display:none; position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
+.modalPopup > .panelStyle{position:absolute; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
+.modalPopup > .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
+.modalPopup .tabs{ margin:0;}
+.modalPopup .tabs .panelStyle{box-shadow:none}
+.modalPopup .tab > .panelStyle{overflow-y:auto;}
+
+/*MODELESS POPUP --------------- */
+.modelessPopup{display:none; position:absolute; z-index:11; top:50%; left:50%;}
+.modelessPopup.draggable {cursor:move;}
+.modelessPopup .panelStyle{margin:0; border:1px solid #ccc; border-radius:3px;}
+.modelessPopup .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
+.modelessPopup .tabs{ margin:0;}
+.modelessPopup .tabs .panelStyle{box-shadow:none}
+.modelessPopup .tab > .panelStyle{overflow-y:auto;}
+
+/*VIDEO POPUP --------------- */
+.videoPopup {display:none; position:fixed; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
+.modalPopup::before{position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
+.videoPopup .close {position:absolute; top:-20px; right:-20px; z-index:1; width:40px; height:40px; line-height:20px; font-size:20px; border:1px solid #666; border-radius:50px; background-color:#fff;}
+.videoPopup iframe{width:100%; height:100%}
+
+
+#btnTop {display:none; position:fixed; right:0; bottom:50px; width:40px; line-height:10px; font-size:10px; background:#fff; border:1px solid #ddd; border-right:none; padding:3px 0 5px 0; box-shadow:5px 5px 5px -4px rgba(0, 0, 0, 0.07); color:#1c84c6;}
+#btnTop i {width:100%; font-size:12px;}
+#btnTop:hover {padding-right:30px; width:70px; font-weight:bold;}
+
+
+/* 컨텐트 스크롤--------------- */
+.xScroll {overflow-x:auto;}
+.yScroll {overflow-y:auto;}
+
+/* 폼테이블 스타일 --------------- */
+.frmStyle {width:100%; margin-bottom:15px;}
+.frmStyle th {border-top:1px solid #dae0fd;}
+.frmStyle tr:last-child th {border-bottom:1px solid #dae0fd;}
+.frmStyle tr:last-child td {border-bottom:1px solid #eee;}
+.frmStyle th {padding:0 15px; height:36px; line-height:24px; white-space:nowrap; text-align:center; background:#e9ecfb;}
+.frmStyle td {padding:0 10px 0 10px; line-height:36px; position:relative; border-top:1px solid #eee; border-right:1px solid #eee;}
+
+/* 체크박스&라디오박스 공통--------------- */
+input[type=radio] {position:absolute; top:50%; left:0; width:18px; height:18px; transform:translate(0,-50%); -ms-transform:translate(0,-50%);}
+label.chkBox, label.rdoBtn {position:relative; display:inline-block; padding-left:26px; height:22px; line-height:22px; vertical-align:middle; cursor:pointer;}
+/* 체크박스 :전체선택 버튼--------------- */
+input[type=checkbox] {position:absolute; top:0; left:0; width:0; height:0;}
+input[type=button].chkBox {margin-left:-2px; padding-left:24px; height:22px; vertical-align:middle; background:url('../../image/icon_checkN.png') no-repeat 0 50%;}
+
+/* 체크박스--------------- */
+label.chkBox::before {position:absolute; top:2px; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; background:#fff;}
+label.chkBox.checked::after {position:absolute; top:6px; left:3px; content:''; width:8px; height:4px; border-bottom:3px solid #676a6c; border-left:3px solid #676a6c; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
+label.chkBox .formControl::before {background:#eee;}
+
+/* 라디오버튼--------------- */
+input[type=radio]::before {position:absolute; top:0; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; border-radius:50%; background:#fff;}
+input[type=radio]:checked::after {position:absolute; top:5px; left:5px; content:''; width:8px; height:8px; border-radius:50%; background:#676a6c;}
+input[type=radio].formControl::before {background:#eee;}
+
+/* 토글 스위치--------------- */
+.switchBox{ display:inline-block;position:relative; width:60px; height:28px; vertical-align:middle;border-radius:25px;overflow:hidden;}
+.switchBox input[type="checkbox"]{position:absolute;visibility:hidden;}
+.switchBox label{display:block;position:absolute;top:0;width:60px;height:28px;background-color:#aaa;transition-duration:0.2s;}
+.switchBox label span{position:absolute;left:0;top:50%;z-index:1;width:26px;height:23px;border-radius:25px;transform:translate(3px, -50%);transition-duration:0.2s;background-color:#fff;text-indent:-9999px;}
+.switchBox label:before,label:after{position:absolute;top:0;width:52%;font-size:11px;line-height:27px;color:#fff;text-align:center;}
+.switchBox label:before{left:0;content:'ON';}
+.switchBox label:after{right:0;content:'OFF';}
+.switchBox input:checked + label span{transform:translate(31px, -50%);}
+.switchBox input:checked::before, .switchBox input:checked::after{border:none}
+.switch-base input:checked + label{color:#fff; background-color:#8597eb;}
+.switch-primary input:checked + label{color:#fff; background-color:#1ab394;}
+.switch-success input:checked + label{color:#fff; background-color:#1c84c6;}
+.switch-info input:checked + label{color:#fff; background-color:#23c6c8; }
+.switch-warning input:checked + label{color:#fff; background-color:#f8ac59;}
+.switch-danger input:checked + label{color:#fff; background-color:#ed5565;}
+.switch-black input:checked + label{color:#fff; background-color:#222;}
+.switchBox + .switchBox {margin-left:6px;}
+
+/* 테이블 스타일--------------- */
+.tableStyle {width:100%; max-width:100%; margin-bottom:15px;}
+.tableStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
+.tableStyle th:last-child {border-right:none;}
+.tableStyle td {position:relative; padding:7px 0; border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb; text-align:center;}
+.tableStyle td:last-child {border-right:none;}
+.tableStyle tbody tr:nth-of-type(2n) {background-color:rgba(0, 0, 0, 0.02);}
+.tableStyle tbody tr:hover {background-color:rgba(224,243,255,0.6);}
+.tableStyle + .panelBar {padding-bottom:15px;}
+/* 스캔 */
+.scanTbl th {font-size:25px; line-height:80px;}
+.scanTbl td {line-height:80px;}
+.scanTbl input[type=text] {line-height:50px; font-size:32px;}
+.scanTbl .btn {overflow-y:hidden; margin-bottom:1px; padding:12px 30px; font-size:25px;}
+table.noPad tr > td, td.noPad {padding:0 !important;}
+th[rowspan] {border-bottom:1px solid #dae0fd;}
+td[rowspan] {border-bottom:1px solid #eee;}
+.nowrap {white-space:nowrap;}
+.solidR {border-right:1px solid #eee; vertical-align:middle;}
+.solidL {border-left:1px solid #eee; vertical-align:middle;}
+.solidT {border-top:1px solid #eee;}
+.solidB {border-bottom:1px solid #eee;}
+.dashR {border-right:1px solid #dae0fd;}
+.dashL {border-left:1px solid #dae0fd;}
+.noPad table.frmStyle > tr:first-child th {border-top:0 !important;}
+.noPad table.frmStyle > tr:first-child td {border-top:0 !important;}
+.noPad table.frmStyle > tr:last-child th {border-bottom:0 !important;}
+.noPad table.frmStyle > tr:last-child td {border-bottom:0 !important;}
+
+
+/* Q&A 스타일--------------- */
+.qnaStyle {width:100%; max-width:100%;}
+.qnaStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
+.qnaStyle th:last-child {border-right:none;}
+.qnaStyle td {position:relative; padding:7px 0; text-align:center;}
+.qnaStyle tr td {border-bottom:1px solid #ecf5f7;}
+.qnaStyle tbody tr:nth-of-type(3n+1) td {background-color:rgba(224,243,255,0.6);}
+.qnaStyle tbody tr:nth-of-type(3n) td {border-bottom:1px solid #ddd;}
+.qnaClaim { text-align:left !important; padding-left:10px !important;}
+.qnaClaim .goods {font-weight:bold; line-height:26px;}
+.qnaClaim .cont {line-height:22px; padding:10px 0; color:#1d3e9d;}
+.qnaClaim .email {line-height:26px;}
+.qnaClaim .email em {border-bottom:1px solid #aaa;}
+.lineRound {border:2px solid #ccc; border-radius:15px; padding:4px 14px; font-weight:bold;}
+
+/* 내부 테이블 디자인 */
+.subTable {display:table; width:100%;}
+.subTable dl {display:table; width:100%;}
+.subTable dt, .subTable dd {display:table-cell;}
+.subTable dt {vertical-align:middle; white-space:nowrap; width:8%; padding:0 15px; background:#e9ecfb; text-align:center; border-bottom:1px solid #dae0fd;}
+.subTable dl:last-child dt {border-bottom:none;}
+.subTable dd {border-bottom:1px solid #eee; padding:3px 20px 3px 10px;}
+.subTable dl:last-child dd {border-bottom:none;}
+
+/* button --------------- */
+.btn {border-radius:3px; vertical-align:middle; white-space:nowrap;font-size:12px;user-select:none;}
+.btn-lg {padding:4px 20px 5px; height:28px; overflow-y:hidden;}
+.btn-sm {margin-top:-2px; line-height:100%; height:28px; overflow-y:hidden;}
+.btn-ssm {margin-top:-2px; line-height:100%; height:22px; overflow-y:hidden;}
+.btn + .btn {margin-left:6px;}
+.btn:first-child {margin-left:0;}
+
+/* 버튼 색상 */
+.btn-white {color:#555 !important; background-color:#fff !important; border:1px solid #ccc !important;}
+.btn-default {color:#555; background-color:#eee; border:1px solid #dcdcdc;}
+.btn-gray {color:#fff; background-color:#aaa; border:1px solid #aaa;}
+.btn-base {color:#fff; background-color:#8597eb; border:1px solid #8597eb;}
+.btn-primary {color:#fff; background-color:#1ab394; border:1px solid #1ab394;}
+.btn-success {color:#fff; background-color:#1c84c6; border:1px solid #1c84c6;}
+.btn-info {color:#fff; background-color:#23c6c8; border:1px solid #23c6c8;}
+.btn-pink {color:#fff; background-color:#feada6; border:1px solid #feada6;}
+.btn-warning {color:#fff; background-color:#f8ac59; border:1px solid #f8ac59;}
+.btn-danger {color:#fff; background-color:#ed5565; border:1px solid #ed5565;}
+.btn-dark {color:#fff; background-color:#6c757d; border:1px solid #6c757d;}
+.btn.icn {line-height:28px; height:28px; padding:0 8px; background-color:#eee; border:1px solid #dbdbdb;}
+.btn.icn i {padding-top:6px; width:12px; vertical-align:top; font-size:14px; text-align:center;}
+
+/* 페이징 --------------- */
+.tablePaging {position:relative; 	display:inline-block; vertical-align:middle;}
+.tablePaging a {display:inline-block; float:left; margin:0 5px; width:28px; height:28px; line-height:28px; text-align:center; border:1px solid #ccc; border-radius:50px; cursor:pointer;}
+.tablePaging a.arrow {background-color:rgba(0, 0, 0, 0.03); 	border-color:#ebebeb;}
+.tablePaging .num.on {background:#8597eb; color:#fff; border-color:#8597eb;}
+
+/* 다중 Select Box */
+.mSelectWrap select {display:none;}
+.mSelectBox {display:inline-block; position:relative; top:-1px; margin:2px 0 2px 0; padding:0 7px 0 0; width:100%; height:auto !important; min-height:29px; border:1px solid #e5e6e7; vertical-align:middle;}
+.mSelected {overflow:auto;}
+.mSelected li {float:left; margin:2px 5px 3px; line-height:24px; padding:0 7px; background:#dbedf9; -ms-user-select:none; -moz-user-select:-moz-none; -webkit-user-select:none; user-select:none;}
+.mSelected li.srchFld {margin:0; padding:0; background:none;}
+.mSelected .srchFld input {width:25px; margin:0; padding:0; border:none; outline:none;}
+.mSelected a {border:none !important; float:right; margin-left:3px; padding:0 3px; width:15px; line-height:22px; text-indent:-9999px; background:url('../../image/btn_sltClose.png') no-repeat 100% 50%;}
+.mSelected a:hover {background:url('../../image/btn_sltCloseOn.png') no-repeat 100% 50%;}
+.mSelecting {display:none; overflow-y:auto; overflow-x:hidden; position:absolute; top:100%; left:-1px; z-index:1; width:100%; max-height:156px; line-height:30px; border:1px solid #e5e6e7; background:#fff;}
+.mSelecting li {margin:0 10px; cursor:pointer;}
+
+/* 멀티 Select Box */
+.mSelWrap {display:inline-block;}
+.mSelWrap select {height:100px; padding:7px 0;}
+.mSelWrap .mSelBtn {margin:0 0 0 5px; float:right; width:33px; vertical-align:top;}
+.mSelWrap .mSelBtn .btn {margin:0; vertical-align:top;}
+.mSelWrap option {padding:4px 100px 4px 10px;}
+
+/* 파일첨부 --------------- */
+.uFile {overflow:hidden; position:relative; display:inline-block; margin:-2px 5px 0 0; width:80%; height:28px; vertical-align:middle; border:1px solid #dbdbdb;}
+.lrStyle .uFile {margin-top:2px;}
+.uFileInput {position:absolute; top:0; width:100%; margin:0 !important; padding:0 !important; line-height:28px; border:none !important;}
+.uFileLabel {position:absolute; top:0; right:0; left:0; z-index:1; margin:0; padding:0 7px; width:cals(100% - 7px); line-height:28px; height:28px; background-color:#fff; border-radius:1px; overflow:hidden; white-space:nowrap;}
+.uFileLabel::after {position:absolute; top:0; right:0; bottom:0; width:30px; z-index:3; line-height:28px; content:" "; border-left:1px solid #dbdbdb; background:#eee url('../../image/icon_upload.png') no-repeat 50% 50%;}
+
+/* badge --------------- */
+.badge {float:right; margin-top:2px; padding:0 5px; min-width:9px; line-height:18px; color:#fff; font-size:12px; font-weight:600; border-radius:3px; text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,0.4); letter-spacing:-0.5px;}
+.badge-warning {background-color:#ed7908;}
+.badge-primary {background-color:#1ab394;}
+.badge-danger {background-color:#ed5565;}
+.badge-success {background-color:#2fa4e7;}
+.badge-info {background-color:#23c6c8;}
+.badge.circle {border-radius:50px;}
+.dep3 .badge {position:relative; top:-28px; right:20px;}
+
+/* badge-등급 ------------*/
+.badgeLevel{overflow:hidden;display:inline-block;margin:0;padding:0;width:60px;height:60px;line-height:56px;font-size:30px;font-weight:bold;border-radius:100%;text-align:center;vertical-align:middle;box-sizing:border-box;}
+.badgeLevel.white{background-color:#fff;border:1px solid #333;color:#333;}
+.badgeLevel.dark1{background-color:#ccc;border:1px solid #ccc;color:#333;}
+.badgeLevel.dark2{background-color:#aaa;border:1px solid #aaa;color:#333;}
+.badgeLevel.dark3{background-color:#777;border:1px solid #777;color:#fff;}
+.badgeLevel.black{background-color:#333;border:1px solid #333;color:#fff;}
+
+/* tag */
+.tagNum {display:inline-block; margin-left:5px; padding:0 3px 0 2px; min-width:13px; line-height:16px; font-weight:normal; color:#fc5555; background:#fff; border-radius:5px;}
+
+/* footer --------------- */
+footer {position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:#fff; border-top:1px solid #e7eaec; line-height:39px; font-size:13px;}
+footer .f-left {float:left; padding-left:20px; line-height:38px;}
+footer .f-right {float:right; padding-right:20px; line-height:38px;}
+
+/* 이미지 카드 */
+.dexterArea {min-width:350px; min-height:180px; padding:0 !important; vertical-align:top; background:#f1f1f1;vertical-align:top;}
+.dexterTable {display:table; width:100%; overflow-y:auto;}
+.dexterTable > li {display:table-cell; vertical-align:top; line-height:23px;}
+.dexterNo div {padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff;}
+.dexterNo div:first-child {margin-top:36px;}
+.dexterNo div:last-child {border-bottom:1px solid #ddd;}
+
+/* 수정용 이미지 카드 */
+.cardArea {width:100%; padding:0 0 20px; overflow-y:auto;}
+.imgCard {vertical-align:top; position:relative; display:inline-block; margin:20px 20px 0 0; padding:10px 10px 0 10px; border:1px solid #dbdbdb;}
+.imgCard ul {display:table;}
+.imgCard li {display:table-cell;}
+.imgCard img {margin-right:15px;}
+.imgCard li:nth-of-type(2) {padding-top:20px; max-width:150px; line-height:24px}
+.imgCard p {font-size:12px;}
+.imgCard .cardClose {position:absolute; top:0; right:0; width:24px; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
+.imgCard .cardClose:hover {background:#f1f1f1 url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
+.verticalTop {vertical-align:top;}
+
+/* 조회용 이미지 카드 */
+.cardArea2 {padding:10px 0;}
+.cardArea2 ul, .cardArea2 .box {vertical-align:top; position:relative; display:inline-block; margin:10px; border:1px solid #dbdbdb; max-width:300px;}
+.cardArea2 li {display:table-cell; line-height:26px; vertical-align:middle;}
+.cardArea2 li:nth-of-type(2) {padding:0 10px;}
+.cardArea2 .cardDel {position:absolute; top:0; right:0; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
+.cardArea2 .cardDel:hover {background:#f1f1f1 url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
+
+/* 테이블 외부 안내문구 */
+.panelStyle > .notice {margin:0 0 15px ;}
+.panelContent > .notice {margin:15px 0;}
+.notice em {color:red;}
+.notice li, p.dot {padding-left:20px; background:url('../../image/dot_bk.png') no-repeat 5px 10px; line-height:24px;}
+p.dot .btn {margin-left:10px !important;}
+p.dot em {color:red;}
+
+/* 정렬 */
+.txt {line-height:36px;}
+.aC {text-align:center !important;}
+.aR {text-align:right !important;}
+.aL {text-align:left !important;}
+.vaT {vertical-align:top !important;}
+.vaM {vertical-align:middle !important;}
+.vaB {vertical-align:bottom !important;}
+
+/* 테이블 내부 안내문구 */
+.infoTxt {line-height:26px; padding:5px 0;}
+.infoTxt i {margin-right:7px;}
+.infoTxt em {color:red;}
+.infoTxtTh {display:inline-block; text-align:left; font-weight:normal; font-size:12px;}
+.infoTxtTh li {padding-top:3px;}
+.infoTxtTh i {padding-right:5px;}
+.srchOption {overflow:auto; padding:10px 0; line-height:36px;}
+
+/* 유의사항 안내 */
+.infoBox {margin:0 20px 20px; padding:7px 10px; border-top:2px solid #dfe2e3; border-bottom:2px solid #dfe2e3; background:#fff}
+.infoBox p {padding-left:25px; line-height:20px; font-size:12px; background:url('../../image/dot_bk.png') no-repeat 10px 50%; background-size:3px auto;}
+
+/* 검색결과 안내문 */
+.srchNotice {padding-bottom:7px; font-weight:normal; font-size:14px;}
+.srchNotice em {color:red;}
+
+/* 필수입력항목 */
+.required {display:inline-block; position:relative; top:-3px; width:12px; height:7px; background:url('../../image/icon_required.png') no-repeat 0 50%;}
+
+
+/* COLOR DESIGN -------------------------------------*/
+/*Color :Base ---*/
+.color-mPurple header,span.color-mPurple {background:linear-gradient(135deg,#667eea 0,#764ba2 100%) !important;}
+.color-purple header,span.color-purple {background:#667eea !important;}
+
+/*Color :Gray ---*/
+.color-mGray header,span.color-mGray {background:linear-gradient(to right,#6c757d 0%,#555 100%) !important;}
+.color-gray header,span.color-gray {background:#666 !important;}
+.color-mGray .frmStyle th,.color-mGray .tableStyle th,.color-gray .frmStyle th,.color-gray .tableStyle th {background:#eee !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
+.color-mGray .tablePaging .num.on,.color-gray .tablePaging .num.on {background:#888 !important; 	border-color:#888 !important;}
+.color-mGray #lnb .dep3,.color-gray #lnb .dep3 {border-color:#777 !important;}
+.color-mGray .tabsJrNav li.on a,.color-gray .tabsJrNav li.on a {color:#333;}
+
+/*Color :Blue ---*/
+.color-mBlue header,span.color-mBlue {background:linear-gradient(to right,#4481eb 0%,#04befe 100%) !important;}
+.color-blue header,span.color-blue {background:#0042a5 !important;}
+.color-mBlue .frmStyle th,.color-mBlue .tableStyle th,.color-blue .frmStyle th,.color-blue .tableStyle th {background:#d8eafc !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
+.color-mBlue .tablePaging .num.on,.color-blue .tablePaging .num.on {background:#3e91de !important; 	border-color:#3e91de !important;}
+.color-mBlue #lnb .dep3,.color-blue #lnb .dep3 {border-color:#3e91de !important;}
+.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {background:#d8eafc;}
+.color-mBlue .tabJr.on,.color-blue .tabJr.on {border-top:4px solid #d8eafc;}
+.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {color:#333;}
+
+/*Color :Green ---*/
+.color-mGreen header,span.color-mGreen {background:linear-gradient(135deg,#00b09b 0,#96c93d 100%) !important;}
+.color-green header,span.color-green {background:#00b09b !important;}
+.color-mGreen .frmStyle th,.color-mGreen .tableStyle th,.color-green .frmStyle th,.color-green .tableStyle th {background:#e5f7f5 !important; 	border-top:1px solid #ddd; 	border-bottom:1px solid #ddd;}
+.color-mGreen .tablePaging .num.on,.color-green .tablePaging .num.on {background:rgba(0,176,155,0.8); 	border-color:rgba(0,176,155,0.8) !important;}
+.color-mGreen #lnb .dep3,.color-green #lnb .dep3 {border-color:#00b09b !important;}
+.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {background:#e5f7f5;}
+.color-mGreen .tabJr.on,.color-green .tabJr.on {border-top:4px solid #e5f7f5;}
+.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {color:#333;}
+
+/*Color :Pink ---*/
+.color-mPink header,span.color-mPink {background:linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114)) !important;}
+.color-pink header,span.color-pink {background:#feada6 !important;}
+.color-mPink .frmStyle th,.color-mPink .tableStyle th,.color-pink .frmStyle th,.color-pink .tableStyle th {background:#fff7f6 !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
+.color-mPink .tablePaging .num.on,.color-pink .tablePaging .num.on {background:#feada6; 	border-color:#feada6 !important;}
+.color-mPink #lnb .dep3,.color-pink #lnb .dep3 {border-color:#feada6 !important;}
+.color-mPink .tabsJrNav li.on a,.color-pink .tabsJrNav li.on a {background:#fff7f6;}
+.color-mPink .tabJr.on,.color-pink .tabJr.on {border-top:4px solid #fff7f6;}
+.color-mPink .tabsJrNav li.on a,
+.color-pink .tabsJrNav li.on a {color:#333;}
+
+/*Color :black ---*/
+.color-black header, span.color-black{background:#3E3E3E !important;}
+.color-black .header-logo{background:#000 !important;}
+.color-black .header-menu .menu a{background:#000 !important;}
+.color-black .header-menu .menu a.on{background:#fff !important; color:#000 !important;}
+.color-black #lnb-wrapper{background-color:#b2b2b2 !important;}
+.color-black #lnb .dep2{background-color:#545454 !important;}
+.color-black #lnb .dep3{border-color:#000 !important;}
+.color-black #lnb .dep3{background:#fdfdfd !important;  }
+.color-black #lnb .dep3 a{color:#111111 !important;}
+.color-black #lnb a{color:#fff !important;}
+.color-black .frmStyle th, .color-black .tableStyle th, .color-black .frmStyle th, .color-black .tableStyle th{background:#eee !important; 	border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
+.color-black .tablePaging .num.on, .color-black .tablePaging .num.on{background:#888 !important; 	border-color:#888 !important;}
+.color-black .tabsJrNav li.on a, .color-black .tabsJrNav li.on a{color:#333; background:#eee !important}
+.color-black .tabJr.on, .color-black .tabJr.on { border-top:4px solid #eee;}
+
+/* 폰트 컬러, 폰트 두께 */
+.cBlue {color:#127fdc !important;}
+.cGray {color:#666 !important;}
+.cRed {color:red !important;}
+.bold {font-weight:bold !important;}
+
+/* 배경 투명도 */
+.bgOp6 {opacity:0.6; color:#000 !important;}
+
+/* 여백 지정 */
+hr {border:0; padding-bottom:10px;}/* 기본 여백 :10px */
+.pad10 {padding:10px 0 !important;}
+.pad15 {padding:15px 0 !important;}
+.pad20 {padding:20px 0 !important;}
+.padT3 {padding-top:3px !important;}
+.padT5 {padding-top:5px !important;}
+.padT10 {padding-top:10px !important;}
+.padT15 {padding-top:15px !important;}
+.padT20 {padding-top:20px !important;}
+.padT30 {padding-top:30px !important;}
+.padT40 {padding-top:40px !important;}
+.padR20 {padding-right:20px !important;}
+.padL10 {padding-left:10px !important;}
+.padB5 {padding-bottom:5px !important;}
+.padB10 {padding-bottom:10px !important;}
+.padB15 {padding-bottom:15px !important;}
+.padB20 {padding-bottom:20px !important;}
+.padB30 {padding-bottom:30px !important;}
+.padB40 {padding-bottom:40px !important;}
+.marT5 {margin-top:5px !important;}
+.marT10 {margin-top:10px !important;}
+.marT15 {margin-top:15px !important;}
+.marT20 {margin-top:20px !important;}
+.marR3 {margin-right:3px !important;}
+.marL5 {margin-left:5px !important;}
+.marL10 {margin-left:10px !important;}
+.marL20 {margin-left:20px !important;}
+.marR10 {margin-right:10px !important;}
+.marR20 {margin-right:20px !important;}
+
+/* 넓이 지정 --------------- */
+.w20 {width:20px !important;}
+.w50 {width:50px !important;}
+.w60 {width:60px !important;}
+.w70 {width:60px !important;}
+.w80 {width:80px !important;}
+.w90 {width:80px !important;}
+.w100 {width:100px !important;}
+.w130 {width:130px !important;}
+.w150 {width:150px !important;}
+.w200 {width:200px !important;}
+.w300 {width:300px !important;}
+.w400 {width:400px !important;}
+.w500 {width:500px !important;}
+.w600 {width:600px !important;}
+.w800 {width:800px !important;}
+.w100p {width:100% !important;}
+.w90p {width:90% !important;}
+.w80p {width:80% !important;}
+.w70p {width:70% !important;}
+.w60p {width:60% !important;}
+.w50p {width:50% !important;}
+.w40p {width:40% !important;}
+.w30p {width:30% !important;}
+.w20p {width:20% !important;}
+.h100 {height:100px !important;} /*alert, confirm 컨텐츠 높이에 사용*/
+
+
+/*-- 캘린더 --------------*/
+#calendar {max-width:900px; margin:20px 0 50px 20px;}
+
+/*-- error page --------------*/
+#errPage {padding-top:40px; width:650px; background:#fff; position:relative; top:48%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); border-radius:9px; vertical-align:middle; overflow:hidden; box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);}
+#errPage .errImg {padding-left:50px; display:table-cell; vertical-align:middle; padding-bottom:30px;}
+#errPage .errImg div {border-radius:50%; position:relative; display:inline-block; width:140px; height:140px; color:#fff; background:#d196e4; box-shadow:2px 2px 6px 0 rgba(0,0,0,0.2) inset;}
+#errPage .fa-television {position:absolute; top:30px; left:28px; font-weight:bold; font-size:80px;}
+#errPage .fa-info {position:absolute; top:49px; left:66px; font-size:34px;}
+#errPage .errTxt {padding:0 50px; display:table-cell; padding-bottom:40px;}
+#errPage .errTxt .ttl {font-size:16px; font-weight:bold; padding-bottom:20px;}
+#errPage .errTxt .cont { padding-bottom:20px; line-height:26px;}
+#errPage .errTxt .tel {color:#777;}
+#errPage .errBtn {width:100%; background:#f9f9fa; line-height:70px; text-align:right;}
+#errPage .errBtn .btn {margin-right:30px; border-radius:33px; background:#858b90; color:#fff; padding:5px 30px; line-height:24px; font-weight:bold; -webkit-transition:0.2s; transition:0.2s;}
+#errPage .errBtn .btn:hover {background:#555;}
+
+/*-- DEXTER --------------*/
+.dexterNo { width:43px;}
+.dexterNo div { padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff; text-align:right;}
+.dexterNo div:first-child {margin-top:28px;}
+
+/*-- 회원추가 --------------*/
+.memAddWrap {line-height:26px; padding:3px 0;}
+.memAdd {margin-right:15px; padding:2px 27px 2px 0; position:relative; line-height:24px; height:24px; white-space:nowrap;}
+.memAdd button {position:absolute; top:3px; right:0; bottom:0; width:18px; height:18px; border:1px solid #dbdbdb; border-radius:3px; text-indent:-9999px; background:#eee url('../../image/btn_sltClose.png') no-repeat 50% 50%;}
+.memAdd button:hover {background:#eee url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
+
+/*-- Date Picker --------------*/ /* 20200521 수정 */
+table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
+.mtz-monthpicker-month {padding:7px; cursor:pointer;}
+.ui-datepicker-trigger {padding:0;}
+.ui-datepicker {z-index:800 !important; text-align:center; background:#fff;}
+.ui-datepicker .ui-datepicker-today,
+.ui-datepicker .ui-state-highlight {background:#fff7cf !important;}
+.ui-datepicker .ui-state-active {border:1px solid red !important;}
+.ui-datepicker .ui-datepicker-prev {position:absolute; top:3px; left:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('../../image/icon_prev.png') no-repeat 50% 50%;}
+.ui-datepicker .ui-datepicker-next {position:absolute; top:3px; right:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('../../image/icon_next.png') no-repeat 50% 50%;}
+.ui-datepicker .ui-datepicker-calendar {padding:5px; border:1px solid #ddd; border-top:none; text-align:center;}
+.ui-datepicker .ui-datepicker-calendar th{padding:5px 0}
+.ui-datepicker-week-end {text-align:center;}
+.ui-datepicker-calendar .ui-state-default {display:inline-block; text-align:center; width:32px; line-height:24px; border:none;}
+.ui-datepicker-header {position:relative; background:#d0e9ff; text-align:center; padding:5px; border:1px solid #ddd; border-bottom:none;}
+.ui-datepicker-buttonpane button {background-color:#eee; border:1px solid #dcdcdc; line-height:24px; border-radius:3px; margin:0 5px 5px 5px;}
+.ui-datepicker-current {float:left;}
+.ui-datepicker-close {float:right;}
+
+/* prograss bar */
+.prograssWrap {display:flex; flex-direction:row;}
+.prograssWrap > li {display:flex; align-items:center;}
+.prograssWrap > li:nth-of-type(1) {width:96%}
+.prograssWrap > li:nth-of-type(2) {margin-left:1.5rem !important}
+.prograss-lg {display:flex; width:100%; height:1rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
+.prograss-sm {display:flex; width:100%; height:.5rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
+.prograss-bar {display:flex; border-top-right-radius:.65rem; border-bottom-right-radius:.65rem; transition:width .6s ease;
+  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
+  background-size: 1rem 1rem;
+  -webkit-animation: progress-bar-stripes 1s linear infinite; animation: progress-bar-stripes 1s linear infinite;}
+.prograss-bar.bg-info {background-color:#1c84c6;}
+.prograss-txt.bg-info {color:#1c84c6;}
+.prograss-bar.bg-success {background-color:#1ab394;}
+.prograss-txt.bg-success {color:#1ab394;}
+.prograss-bar.bg-danger {background-color:#f83245;}
+.prograss-txt.bg-danger {color:#f83245;}
+.prograss-bar.bg-base {background-color:#f8ac59;}
+.prograss-txt.bg-base {color:#ffa749;}
+
+/* Multi CheckBox */
+.multiCheckBox {position:relative; display:inline-block; width:auto; line-height:27px; margin:3px 3px 3px 0;}
+.multiCheckBox .sltBtn {padding-left:5px; width:100%; height:27px; color:#555; text-align:left; border:1px solid #dbdbdb; box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}
+.multiCheckBox .sltBtn::after {position:absolute; top:6px; right:10px; content:''; width:7px; height:7px; border-bottom:1px solid #555; border-left:1px solid #555; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
+.multiCheckBox .sltBtn.on::after {top:10px; -webkit-transform:rotate(135deg); transform:rotate(135deg);}
+.multiCheckBox ul {display:none; position:absolute; top:26px; left:0; z-index:1; width:100%; height:auto; border:1px solid #dbdbdb; background:#fff;}
+.multiCheckBox li {padding:3px 10px;}
+.multiCheckBox li:hover {background-color:Highlight; color:HighlightText;}
+.multiCheckBox label {display:flex;}
+
+/* checkBox More */
+.checkBoxList {overflow:hidden; padding-right:36px; height:36px;}
+.checkBoxList.on {overflow:visible; height:auto;}
+.checkBoxList .more {position:absolute; top:-1px; right:0; width:36px; height:38px; border:1px solid #eee; background:#f7f7f7;}
+.checkBoxList ul {display:flex; flex-wrap:wrap;}
+.checkBoxList li {justify-content:flex-start; line-height:36px;}
+.checkBoxList[data-unit='1'] li {flex-basis:100%;}
+.checkBoxList[data-unit='2'] li {flex-basis:50%;}
+.checkBoxList[data-unit='3'] li {flex-basis:33%;}
+.checkBoxList[data-unit='4'] li {flex-basis:25%;}
+.checkBoxList[data-unit='5'] li {flex-basis:20%;}
+.checkBoxList[data-unit='6'] li {flex-basis:16.6%;}
+.checkBoxList[data-unit='7'] li {flex-basis:14.2%;}
+.checkBoxList[data-unit='8'] li {flex-basis:12.5%;}
+
+/* 아이콘 툴팁 버튼 */
+.iconTooltip {display:inline-block; position:relative; margin-right:10px;}
+.iconTooltip i {position:relative; color:#46a1ff; width:15px; height:15px; line-height:16px; border-radius:50%; border:1px solid #46a1ff; cursor:pointer; text-align:center;}
+.iconTooltip:hover i {box-shadow:0px 3px 7px 0px rgba(0,0,0,0.4);}
+.iconTooltip span {display:none; position:absolute; top:36px; z-index:5; padding:10px 15px; line-height:24px; color:#fff; background:#6d6d6d; box-shadow:0px 3px 7px 0px rgba(0,0,0,0.2); border-radius:5px;}
+.iconTooltip span:after {position:absolute; top:-4px; content:''; background:#6d6d6d; width:8px; height:8px; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
+.iconTooltip span.left {left:-10px}
+.iconTooltip span.left:after {left:15px;}
+.iconTooltip span.right {right:-10px}
+.iconTooltip span.right:after {right:15px;}
+.iconTooltip span.center {left:50%;}
+.iconTooltip span.center:after {right:5px;}
+.iconTooltip:hover span{display:block;}
+
+/* 상품이동 */
+.itemMove {display:inline-block; width:800px; border:1px solid #eee;}
+.itemMove .item {float:left; display:table; margin:0 10px 20px 0; width:220px; border:1px solid #eee;}
+.itemMove .item li {display:table-cell; vertical-align:top;}
+.itemMove .item li:nth-of-type(1) {width:80px;}
+.itemMove .item li:nth-of-type(1) img {width:80px; height:80px;}
+.itemMove .item button {width:16px; height:16px; text-indent:-9999px;}
+.itemMove .item input {width:30px; height:14px !important; line-height:14px}
+.itemMove .item li:nth-of-type(2) div {line-height:20px}
+
+/* 상품 Dragable :20200129 */
+.sortableWrap #sortable { overflow-y:auto }
+.sortableWrap {margin:20px 0; width:100%; max-height:675px;}
+.sortableWrap .itemWrap {display:inline-block;}
+.sortableWrap .item {float:left; margin-right:12px; margin-bottom:12px; padding:5px 8px; line-height:20px; border:1px solid #ddd; vertical-align:top; background:#fff;}
+.sortableWrap .item > li {float:left; vertical-align:middle;}
+.sortableWrap .item .img {margin-top:3px; margin-right:10px; width:80px;}
+.sortableWrap .item .img img {width:80px; height:80px; cursor:move;}
+.sortableWrap .btnArea {text-align:center; margin-top:15px; padding:0 10px;}
+.sortableWrap button.icnSm {overflow:hidden; position:relative; width:24px; height:20px; background-color:#fff;}
+.sortableWrap button.icnSm i {position:absolute; top:-4px; left:-3px; width:24px; line-height:24px; font-size:15px; color:#888;}
+.sortableWrap button.icnSm:hover i {color:#111;}
+.sortableWrap button.icnSm:last-child {margin-right:0;}
+.sortableWrap .item .cont {width:114px;}
+.sortableWrap .item .cont li em {margin:0 3px 0 7px;}
+.sortableWrap .item .cont .no {font-weight:bold; padding-bottom:3px;}
+.sortableWrap .item .cont .title {padding-bottom:3px; border-bottom:1px solid #eee;}
+.sortableWrap .item .cont .price {padding-top:3px; padding-bottom:3px;}
+.sortableWrap .item .cont input {margin-left:5px; width:37px;}
+
+
+.ag-theme-balham.lh60 .ag-cell {line-height:60px !important; height:60px;}
+.ag-theme-balham.lh70 .ag-cell {line-height:70px !important; height:70px;}
+.ag-theme-balham.lh80 .ag-cell {line-height:80px !important; height:80px;}
+.ag-theme-balham.lh90 .ag-cell {line-height:90px !important; height:90px;}
+.ag-theme-balham.lh100 .ag-cell {line-height:100px !important; height:100px;}
+.ag-theme-balham.lh110 .ag-cell {line-height:110px !important; height:110px;}
+.ag-theme-balham.lh120 .ag-cell {line-height:120px !important; height:120px;}
+
+
+/* 테이블 상품명 클릭시 이미지 레이어 활성화 */
+.viewImg {position:relative; color:blue; cursor:pointer}
+.thumbLayer {display:inline-block; position:absolute; top:0; right:0; z-index:5; border:1px solid #ddd}
+.thumbLayer img {width:100%; height:auto;}
+
+/* dashboard */
+.flexWrap{display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; color:#676a6c;}
+.flexWrap li{padding:0 20px 20px; width:calc(33.3%);}
+.flexWrap.unit4 li{width:calc(25%);}
+.flexWrap.unit5 li{width:calc(20%);}
+.flexWrap.unit6 li{width:calc(16.6%);}
+.flexWrap .title{padding:15px; font-weight:600; border:1px solid #e7eaec; border-top:2px solid #e7eaec;}
+.flexWrap .title h5{font-size:15px; font-weight:bold;}
+.flexWrap .title span{float:right; padding:1px 8px; font-size:10px; border-radius:0.25em;}
+.flexWrap .content{padding:15px; border:1px solid #e7eaec; border-top:none;}
+.flexWrap .content em{font-size:30px; font-weight:200;}
+.statText {margin-top:5px}
+.statText::after{display:block; clear:both; content:''}
+.statText span:nth-of-type(1){float:left; font-size:11px;}
+.statText span:nth-of-type(2){float:right; font-size:13px; font-weight:600;}
+.txt-success{color:#1c84c6;}
+.txt-info{color:#23c6c8;}
+.flexWrap .txt-danger{color:#ed5565;}
+.flexWrap .bg-success{background:#1c84c6;}
+.flexWrap .bg-info{background:#23c6c8;}
+.flexWrap .bg-danger{background:#ed5565;}
+.btn.on{-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);}
+.dbChart .btn-group{float:right; line-height:37px;}
+.dbChart .btn-group button{margin:0; height:23px;}
+.dbChart .boxleft{float:left; margin:20px 15px 20px 15px; width:calc(100% - 490px);}
+.dbChart .boxRight{float:left; margin:20px 20px 20px 40px; width:400px;}
+.dbChart .boxRight em{font-size:24px; font-weight:200;}
+.dbChart .boxRight > div{margin-bottom:25px;}
+.dbChart .boxRight .statText .c1 {color:#FF7043}
+.dbChart .boxRight .progress .c1 {background:#FF7043}
+.dbChart .boxRight .statText .c2 {color:#48C9B0}
+.dbChart .boxRight .progress .c2 {background:#48C9B0}
+.dbChart .boxRight .statText .c3 {color:#ca9900}
+.dbChart .boxRight .progress .c3 {background:#FFD54F}
+.progress{display:-ms-flexbox; display:flex; margin-top:5px; height:1rem; overflow:hidden; font-size:.75rem; background-color:#e9ecef; border-radius:.25rem;}
+.progress-mini{height:5px; margin-bottom:0;}
+.progress > div{height:5px; margin-bottom:0; transition:width 0.3s;}
+
+
+/* 카테고리 Sort */
+.categoryOrder {margin-bottom:15px; background:#fcfcfc;}
+.categoryOrder li {clear:both; padding-left:15px; line-height:40px; cursor:move; border-top:1px dashed red; }
+.categoryOrder li button.on {background-image:url(../../image/icon_cate_minus.png);}
+/* .categoryOrder li:after {content:''; position:absolute; top:8px; left:-10px; width:21px; height:21px; background:url(../../image/line_cate.png)} */
+.categoryOrder li:before{position:relative; content:''; width:1px; height:100%; background:#ddd;}
+.categoryOrder li ol{display:none}
+/* .categoryOrder ol:last-child li {background-image:none !important} */
+.categoryOrder button{position:relative; z-index:200; padding:0 15px 0; margin:0; line-height:40px; cursor:pointer; background-image:url(../../image/icon_cate_plus.png); background-repeat:no-repeat; background-position:0 0;}
+
+/* 메인 공지팝업 */
+.noticeWrap{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:800px;background-color:#fff;}
+.noticeWrap .swiper-container{overflow:hidden;position:relative;top:0;}
+.noticeWrap .swiper-wrapper{display:flex;width:100%;transition-property:transform;box-sizing:content-box;}
+.noticeWrap .swiper-slide{overflow-y:auto;max-height:500px;padding:20px 20px 40px;flex-shrink:0;position:relative;width:100%;height:100%;transition-property:transform;}
+.noticeWrap .swiper-slide img{max-width:100%;height:auto;}
+.noticeWrap .swipeControl{display:inline-block;position:absolute;top:-35px;right:0;/* transform:translate(-50%,0); */z-index:1;width:100px;}
+.noticeWrap .swipeControl button{text-indent:-9999px;}
+.noticeWrap .swipeControl button[aria-label]{position:absolute;width:30px;height:30px;}
+.noticeWrap .swipeControl button[aria-label]::after{top:6px;width:12px;height:12px;}
+.noticeWrap .swipeControl button[aria-label].arr{top:0;}
+.noticeWrap .swipeControl button[aria-label].arr.prev{left:0;}
+.noticeWrap .swipeControl button[aria-label].arr.next{right:0}
+.noticeWrap .swipeControl button[aria-label].arr::after{position:absolute;display:block;content:'';border-bottom:1px solid #fff;border-left:1px solid #fff}
+.noticeWrap .swipeControl button[aria-label].arr.prev::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
+.noticeWrap .swipeControl button[aria-label].arr.next::after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}
+.noticeWrap .swipeControl .prev:after{left:8px;}
+.noticeWrap .swipeControl .next:after{right:8px;}
+.noticeWrap .swipeControl .swiper-button-disabled:after{border-color:#ddd;}
+.noticeWrap .swipeControl .swiper-pagination{line-height:28px;width:100%;text-align:center;}
+.noticeWrap .swipeControl .swiper-pagination-bullet{display:inline-block;margin:0 5px;width:10px;height:10px;background:#ddd;border-radius:50%;cursor:pointer;}
+.noticeWrap .swipeControl .swiper-pagination-fraction span{font-size:14px;}
+.noticeWrap .swipeControl .swiper-pagination-fraction i{color:#ccc;}
+.noticeWrap .swipeControl .swiper-pagination-current{color:#fff;font-weight:bold;}
+.noticeWrap .swipeControl .swiper-pagination-total{color:#ccc}
+.noticeWrap .btnArea{display:flex;background-color:#f0f0f0;}
+.noticeWrap .btnArea > span{flex:1;position:relative;}
+.noticeWrap .btnArea > span::after{content:'';position:absolute;top:50%;right:0;transform:translate(0, -50%);width:1px;height:15px;background-color:#ccc;}
+.noticeWrap .btnArea > span:last-child::after{background-color:unset;}
+.noticeWrap .btnArea button{width:100%;height:50px;color:#000}
+.noticeWrap .title{line-height:34px;padding:0 0 10px 0;font-size:18px;font-weight:bold;border-bottom:1px solid #ececec;}
+.noticeWrap .content{padding:20px 0 20px;line-height:26px;font-size:13px;}
+.noticeWrap .download li{line-height:26px;}
+.noticeWrap .download i{margin-right:15px;}
+.noticeWrap .download a{border-bottom:1px solid #337ab7;color:#337ab7;}
+.noticeWrap .download a:visited{border-bottom:1px solid #999;color:#333;}
+
+
+/* 반응형:GNB 유저명,등급,로그아웃 --------------- */
+@media ( max-width:1370px ) {
+ .header-info { display:none;}
+ .header-info-sm { display:inline-block;}
+}
+
+/* 반응형 :dashboard(20200522) --------------- */
+@media ( max-width:1023px ) {
+ /* 대시보드 */
+ #wrapper.dashboard{width:100%; min-width:100%;}
+ .dashboard .header-logo{width:100%}
+ .dashboard #lnb-wrapper{display:none;}
+ .dashboard .header-menu{display:none;}
+ .dashboard .tabs{margin-left:0; margin-right:0;}
+ .dashboard .tabs h2{position:relative; margin:10px 15px}
+ .dashboard .tabsNav li:first-child{margin-left:0}
+ .dashboard .tabsNav li:last-child{margin-right:0}
+ .dashboard .tabsNav li a{font-size:16px}
+ .dashboard .flexWrap li{width:100%}
+ .dashboard .flexWrap.unit4 li{width:100%}
+ .dashboard .flexWrap.unit5 li{width:100%}
+ .dashboard .flexWrap.unit6 li{width:100%}
+ .dashboard .boxStyle{margin-left:0; margin-right:0;}
+ .dashboard .dbChart .boxleft{clear:left; margin:30px 15px 0 0; width:100%;}
+ .dashboard .dbChart .boxRight{clear:right; width:100%; margin:30px 20px 20px;}
+}
+
+/* Fix Input Zoom on devices older than iPhone 5:*/
+@media screen and (device-aspect-ratio:2/3) {
+  select, textarea, input[type="text"], input[type="password"],
+  input[type="datetime"], input[type="datetime-local"],
+  input[type="date"], input[type="month"], input[type="time"],
+  input[type="week"], input[type="number"], input[type="email"],
+  input[type="url"]{ font-size:16px;}
+}
+
+/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
+@media screen and (device-aspect-ratio:40/71) {
+  select, textarea, input[type="text"], input[type="password"],
+  input[type="datetime"], input[type="datetime-local"],
+  input[type="date"], input[type="month"], input[type="time"],
+  input[type="week"], input[type="number"], input[type="email"],
+  input[type="url"]{ font-size:16px;}
+}
+
+/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */
+@media screen and (device-aspect-ratio:375/667) {
+  select, textarea, input[type="text"], input[type="password"],
+  input[type="datetime"], input[type="datetime-local"],
+  input[type="date"], input[type="month"], input[type="time"],
+  input[type="week"], input[type="number"], input[type="email"],
+  input[type="url"]{ font-size:16px;}
+}
+
+/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */
+@media screen and (device-aspect-ratio:9/16) {
+  select, textarea, input[type="text"], input[type="password"],
+  input[type="datetime"], input[type="datetime-local"],
+  input[type="date"], input[type="month"], input[type="time"],
+  input[type="week"], input[type="number"], input[type="email"],
+  input[type="url"]{ font-size:16px;}
+}