Merge branch 'develop' of http://112.172.147.34:4936/style24/STYLE24.git into develop

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

@@ -154,7 +154,7 @@
 	<!-- 임시비밀번호 조회 -->
 	<select id="getTemporaryPassword" parameterType="int" resultType="String">
 		/* TsaSystem.getTemporaryPassword */
-		SELECT CONVERT(TRUNCATE(A.VAL * CAST(CONCAT(1,LPAD(0,(#{length} - 1),'0')) AS UNSIGNED),0),CHAR) AS PASSWD FROM DUAL
+		SELECT CONVERT(TRUNCATE(RAND() * CAST(CONCAT(1,LPAD(0,(#{length} - 1),'0')) AS UNSIGNED),0),CHAR) AS PASSWD FROM DUAL
 	</select>
 
 	<!-- 사용자 비밀번호 수정 -->

style24.batch/src/main/java/com/style24/batch/biz/dao/TsbGoodsDao.java

@@ -5,6 +5,7 @@ import java.util.Collection;
 import com.style24.core.support.annotation.ShopDs;
 import com.style24.persistence.domain.Coupon;
 import com.style24.persistence.domain.Goods;
+import com.style24.persistence.domain.GoodsSafeNo;
 import com.style24.persistence.domain.GoodsSummary;
 
 /**
@@ -222,4 +223,21 @@ public interface TsbGoodsDao {
 	 */
 	void saveGoodsSummary();
 
+	/**
+	 * 안전인증대상 상품 조회
+	 *
+	 * @author eskim
+	 * @since 2020. 12. 04
+	 */
+	Collection<GoodsSafeNo> getGoodsSafeNoList();
+
+	/**
+	 * 안전인증대상 상품 저장
+	 *
+	 * @author eskim
+	 * @since 2020. 12. 04
+	 */
+	void saveGoodsSafeNo(GoodsSafeNo goodsSafeNo);
+
+
 }

style24.batch/src/main/java/com/style24/batch/biz/job/goods/TsbGoodsInfantsSafeNoJob.java

@@ -0,0 +1,52 @@
+package com.style24.batch.biz.job.goods;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Component;
+
+import com.style24.batch.biz.job.TsbAbstractJob;
+import com.style24.batch.biz.service.TsbGoodsService;
+import com.style24.persistence.domain.Goods;
+
+import lombok.extern.slf4j.Slf4j;
+
+/**
+ * 영유아상품 인증번호 수신
+ *
+ * @author eskim
+ * @since 2020. 12. 04
+ */
+@Component
+@Slf4j
+public class TsbGoodsInfantsSafeNoJob extends TsbAbstractJob<Goods, Goods, Goods> {
+
+	@Autowired
+	private TsbGoodsService goodsService;
+
+	private int succCnt = 0;
+	private int failCnt = 0;
+
+	@Override
+	public Goods read() throws Exception {
+
+		Goods goods = new Goods();
+		return goods;
+	}
+
+	@Override
+	public Goods process(Goods goods) throws Exception {
+		return goods;
+	}
+
+	@Override
+	public Goods write(Goods goods) throws Exception {
+
+		goodsService.saveGoodsSafeNo();
+		return goods;
+	}
+
+	@Override
+	public void notify(Goods goods) throws Exception {
+		super.printResult(succCnt, failCnt);
+	}
+
+}

style24.batch/src/main/java/com/style24/batch/biz/job/goods/TsbGoodsTnmJob.java

@@ -5,7 +5,6 @@ import org.springframework.stereotype.Component;
 
 import com.style24.batch.biz.job.TsbAbstractJob;
 import com.style24.batch.biz.service.TsbGoodsService;
-import com.style24.core.biz.thirdparty.SafetyKoreaApi;
 import com.style24.persistence.domain.Goods;
 
 import lombok.extern.slf4j.Slf4j;
@@ -23,10 +22,6 @@ public class TsbGoodsTnmJob extends TsbAbstractJob<Goods, Goods, Goods> {
 	@Autowired
 	private TsbGoodsService goodsService;
 
-	@Autowired
-	private SafetyKoreaApi safetyKoreaApi;
-
-
 	private int succCnt = 0;
 	private int failCnt = 0;
 

style24.batch/src/main/java/com/style24/batch/biz/service/TsbGoodsService.java

@@ -10,12 +10,18 @@ import org.springframework.transaction.annotation.Transactional;
 import com.style24.batch.biz.dao.TsbGoodsDao;
 import com.style24.batch.support.env.TsbConstants;
 import com.style24.core.biz.service.TscEnvsetService;
+import com.style24.core.biz.thirdparty.SafetyKoreaApi;
 import com.style24.persistence.domain.Coupon;
 import com.style24.persistence.domain.Goods;
+import com.style24.persistence.domain.GoodsSafeNo;
 import com.style24.persistence.domain.GoodsSummary;
 
+import io.netty.util.internal.StringUtil;
+
 import lombok.extern.slf4j.Slf4j;
 
+import com.gagaframework.web.parameter.GagaMap;
+
 /**
  * 상품 Service
  *
@@ -32,6 +38,10 @@ public class TsbGoodsService {
 	@Autowired
 	private TscEnvsetService envsetService;
 
+	@Autowired
+	private SafetyKoreaApi safetyKoreaApi;
+
+
 	/**
 	 * 상품 타이틀예약 작업
 	 *
@@ -272,4 +282,33 @@ public class TsbGoodsService {
 
 	}
 
+	/**
+	 * 영유아상품 인증번호 수신
+	 *
+	 * @return
+	 * @author eskim
+	 * @since 2020. 12. 04
+	 */
+	@Transactional("shopTxnManager")
+	public void saveGoodsSafeNo() {
+
+		// 1. 대상 상품 조회
+		Collection<GoodsSafeNo> goodsSafeNoList = goodsDao.getGoodsSafeNoList();
+		// 2. 인증테이블 적용
+		for(GoodsSafeNo goodsSafeNo: goodsSafeNoList) {
+			try {
+				GagaMap result = safetyKoreaApi.getKoreaCertifyNo(goodsSafeNo.getGoodsNum()); // 품번으로 처리
+				if (result != null || !StringUtil.isNullOrEmpty(result.get("certNum").toString())) {
+					goodsSafeNo.setCertDt(result.get("certDt").toString());
+					goodsSafeNo.setCertNum(result.get("certNum").toString());
+					goodsSafeNo.setRegNo(TsbConstants.REG_NO);
+					goodsSafeNo.setUpdNo(TsbConstants.REG_NO);
+					goodsDao.saveGoodsSafeNo(goodsSafeNo);
+				}
+			} catch (Exception e) {
+				// do nothing
+			}
+		}
+	}
+
 }

style24.batch/src/main/java/com/style24/batch/biz/task/TsbGoodsTask.java

@@ -6,6 +6,7 @@ import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Component;
 
 import com.style24.batch.biz.job.goods.TsbGoodsBenefitPriceJob;
+import com.style24.batch.biz.job.goods.TsbGoodsInfantsSafeNoJob;
 import com.style24.batch.biz.job.goods.TsbGoodsPriceJob;
 import com.style24.batch.biz.job.goods.TsbGoodsRelateScoreJob;
 import com.style24.batch.biz.job.goods.TsbGoodsSnmJob;
@@ -41,6 +42,10 @@ public class TsbGoodsTask {
 	@Autowired
 	private TsbGoodsSummaryJob goodsSummaryJob;
 
+	@Autowired
+	private TsbGoodsInfantsSafeNoJob goodsInfantsSafeNoJob;
+
+
 	/**
 	 * 초 분 시 일 월 주(년)
 	 * 0 0 12 * * ?" : 아무 요일, 매월, 매일 12:00:00
@@ -136,4 +141,18 @@ public class TsbGoodsTask {
 	public void tsbGoodsSummaryJob() throws Exception {
 		goodsSummaryJob.run("cron.goods.summary");
 	}
+
+	/**
+	 * 영유아상품 인증번호 수신 : 일배치 - 매일 3시 5분
+	 *
+	 * @throws Exception
+	 */
+	@Scheduled(cron = "${cron.goods.infants.safe}")
+	@Scheduled(fixedDelay = 3500000)
+	@Async
+	public void tsbGoodsInfantsSafeNoJob() throws Exception {
+		goodsInfantsSafeNoJob.run("cron.goods.infants.safe");
+	}
+
+
 }

style24.batch/src/main/java/com/style24/persistence/domain/GoodsSafeNo.java

@@ -0,0 +1,22 @@
+package com.style24.persistence.domain;
+
+import com.style24.persistence.TscBaseDomain;
+
+import lombok.Data;
+
+/**
+ * 상품 안전인증 Domain
+ *
+ * @author eskim
+ * @since 2020. 11. 04
+ */
+@SuppressWarnings("serial")
+@Data
+public class GoodsSafeNo extends TscBaseDomain {
+
+	private String goodsCd;
+	private String goodsNum;
+	private String certNum;
+	private String certDt;
+
+}

style24.batch/src/main/java/com/style24/persistence/mybatis/shop/TsbGoods.xml

@@ -1001,4 +1001,52 @@
 		WHERE A.GOODS_CD = GS.GOODS_CD
 	</insert>
 	
+	<!--  안전인증대상 상품 조회 -->
+	<select id="getGoodsSafeNoList"   resultType="GoodsSafeNo">
+		/* TsbGoods.getGoodsSafeNoList */
+		SELECT B.GOODS_CD
+		     , B.GOODS_NUM
+		     , A.ITEMKIND_CD 
+		     , C.CERT_NUM 
+		     , C.CERT_DT 
+		FROM TB_ITEMKIND A
+		INNER JOIN TB_GOODS B ON A.ITEMKIND_CD = B.ITEMKIND_CD AND B.SELF_GOODS_YN = 'Y'  /* 자사상품 */
+		INNER JOIN TB_BRAND D ON B.BRAND_CD = D.BRAND_CD AND D.USE_YN = 'Y'
+		LEFT OUTER JOIN TB_GOODS_SAFE_NO C ON B.GOODS_CD = C.GOODS_CD
+		                                   AND (CERT_NUM IS NULL
+		                                        <![CDATA[
+		                                        OR CERT_DT < DATE_FORMAT(DATE_ADD(NOW(), INTERVAL -5 YEAR), '%Y%m%d')  /*인증유효 5년 경과*/
+		                                        ]]>
+		                                       )
+		WHERE A.NI_CLSF_CD = 'G004_23'  /*고시 유아용품*/
+	</select>
+	
+	<!--  안전인증대상 상품 조회 -->
+	<insert id="saveGoodsSafeNo"  parameterType="GoodsSafeNo">
+		/* TsbGoods.saveGoodsSafeNo */
+		INSERT INTO TB_GOODS_SAFE_NO (
+		    GOODS_CD
+		  , CERT_NUM
+		  , CERT_DT
+		  , REG_NO
+		  , REG_DT
+		  , UPD_NO
+		  , UPD_DT
+		)
+		VALUES (
+		    #{goodsCd}
+		  , #{certNum}
+		  , #{certDt}
+		  , #{regNo}
+		  , NOW()
+		  , #{updNo}
+		  , NOW()
+		)
+		ON DUPLICATE KEY UPDATE
+		       CERT_NUM = #{certNum}
+		     , CERT_DT = #{certDt}
+		     , UPD_NO = #{updNo}
+		     , UPD_DT = NOW()
+	</insert>
+	
 </mapper>

style24.batch/src/main/resources/config/application-locd.yml

@@ -48,6 +48,7 @@ cron:
         benefit.price: 2 22 2 29 2 ?
         relate.score: 2 22 2 29 2 ?
         summary: 2 22 2 29 2 ?
+        infants.safe: 2 22 2 29 2 ?
     
     #통계
     statistics:

style24.core/src/main/java/com/style24/core/biz/thirdparty/SafetyKoreaApi.java

@@ -18,9 +18,11 @@ import com.style24.persistence.domain.KCertifyNo;
 
 import lombok.extern.slf4j.Slf4j;
 
+import com.gagaframework.web.parameter.GagaMap;
+
 /**
  * KC인증번호 조회 (www.safetykorea.kr open API)
- * 
+ *
  * @author gagamel
  * @since 2020. 12. 1
  */
@@ -53,7 +55,8 @@ public class SafetyKoreaApi {
 	 * @author gagamel
 	 * @since 2020. 12. 1
 	 */
-	public String getKoreaCertifyNo(String goodsCd) throws Exception {
+	public GagaMap getKoreaCertifyNo(String goodsCd) throws Exception {
+		GagaMap result = new GagaMap();
 		// Header
 		HttpHeaders headers = new HttpHeaders();
 		headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
@@ -107,10 +110,12 @@ public class SafetyKoreaApi {
 		KCertifyNo kcNo = gson.fromJson(responseJson, KCertifyNo.class);
 
 		if (kcNo.getResultCode() != null && kcNo.getResultCode().equals("2000")) { // 성공
-			return kcNo.getResultData().iterator().next().getCertNum();
+			result.set("certNum", kcNo.getResultData().iterator().next().getCertNum());
+			result.set("certDt", kcNo.getResultData().iterator().next().getCertDate() );
+			return result;
 		}
 
-		return "";
+		return result;
 	}
 
 }

style24.core/src/main/java/com/style24/core/biz/thirdparty/SsgKakaoSender.java

@@ -1,235 +1,252 @@
-package com.style24.core.biz.thirdparty;
-
-import java.util.ArrayList;
-import java.util.List;
-
-import javax.annotation.PostConstruct;
-
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.cache.annotation.Cacheable;
-import org.springframework.core.env.Environment;
-import org.springframework.stereotype.Component;
-import org.springframework.transaction.annotation.Transactional;
-
-import com.style24.core.biz.dao.SsgDirectMessageDao;
-import com.style24.core.biz.dao.TscAnswerPhaseDao;
-import com.style24.core.support.env.TscConstants;
-import com.style24.persistence.domain.AnswerPhase;
-import com.style24.persistence.domain.SsgDirectMessage;
-
-import lombok.extern.slf4j.Slf4j;
-
-import com.gagaframework.web.parameter.GagaMap;
-import com.gagaframework.web.util.GagaStringUtil;
-
-/**
- * 신세계아이앤씨 SSG 모듈을 이용한 카카오알림톡 Sender
- * 
- * @author gagamel
- * @since 2020. 11. 9
- */
-@Component
-@Slf4j
-public class SsgKakaoSender {
-
-	// 발신프로필키
-	private String profile = "95ed449aa61c05fb613253e740cceb7d3b5d0a64";
-
-	// 발신자전화번호
-	private String callbackTelNo;
-
-	private String domainUrl;
-
-	@Autowired
-	private Environment env;
-
-	@Autowired
-	private TscAnswerPhaseDao ansPhaseDao;
-
-	@Autowired
-	private SsgDirectMessageDao dmDao;
-
-	// 알림톡 답변일련번호
-	public enum KakaoAnswerSq {
-		JoinCongrat(1010),			// 회원가입축하 안내
-		CertNoSend(1011),			// 인증번호발송 안내
-		TempPasswd(1012),			// 임시비밀번호발급 안내
-		OtoAnswer(1013),			// 1:1문의답변등록 안내
-		DormantExpect(1014),		// 휴면계정전환예정 안내
-
-		CardOrderComplete(1020),	// 주문완료-신용카드 안내
-		BtOrderComplete(1021),		// 주문완료-계좌이체 안내
-		VaOrderComplete(1022),		// 주문완료-무통장 안내
-		VaDepositRequest(1023),		// 무통장입금요청 안내
-		VaDepositConfirm(1024),		// 무통장입금확인 안내
-		CardCancelRefund(1025),		// 주문취소 및 환불 안내-신용카드
-		AtCancelRefund(1026),		// 주문취소 및 환불 안내-계좌이체
-		VaCancelRefund(1027),		// 주문취소 및 환불 안내-무통장
-
-		SoldoutExpect(1030),		// 품절예정안내
-		CardCancelBySoldout(1031),	// 품절에 의한 주문취소 안내-신용카드
-		AtCancelBySoldout(1032),	// 품절에 의한 주문취소 안내-계좌이체
-		VaCancelBySoldout(1033),	// 품절에 의한 주문취소 안내-무통장
-
-		GoodsSend(1040),			// 상품 발송 안내
-		ExchGoodsSend(1041),		// 교환 상품 발송 안내
-
-		ExchRequestComplete(1050),	// 교환 신청 완료 안내
-		RtnRequestCompleted(1051),	// 반품 신청 완료 안내
-		WithdrawDelay(1060),		// 회수처리 지연 안내
-		ReviewWrite(1070),			// 상품평 작성 안내
-		BasicLms(1071);				// 기본안내
-
-		private Integer value;
-
-		private KakaoAnswerSq(Integer value) {
-			this.value = value;
-		}
-
-		public Integer value() {
-			return value;
-		}
-	}
-
-	@PostConstruct
-	public void init() {
-		domainUrl = env.getProperty("domain.front");
-		callbackTelNo = TscConstants.CALLCENTER_TEL_NO;
-
-		log.debug("\n\n---- SsgKakaoSender initialization started ----");
-		log.debug("profile: [{}]", profile);
-		log.debug("callbackTelNo: [{}]", callbackTelNo);
-		log.debug("domainUrl: [{}]", domainUrl);
-		log.debug("\n--- SsgKakaoSender initialization completed ----\n");
-	}
-
-	/**
-	 * 카카오알림톡 발송
-	 * @param ansSq - 답변일련번호
-	 * @param dm - 메시지 정보
-	 * @param replaceInfo - 메시지내용 중 대체할 정보
-	 * @author gagamel
-	 * @since 2020. 11. 9
-	 */
-	@Transactional("shopTxnManager")
-	public void send(Integer ansSq, SsgDirectMessage dm, GagaMap replaceInfo) {
-		// 답변문구 조회
-		AnswerPhase ansPhase = this.getAnswerPhase(ansSq, replaceInfo);
-
-		dm.setFyellowid(profile);
-		dm.setFkkosubject(ansPhase.getAnsTitle());
-		dm.setFtemplatekey(String.valueOf(ansSq));
-		dm.setFmessage(ansPhase.getAnsContent());
-
-		// kkoresendtype(재발송유형)이 "SMS"일 때만 kkoresendmsg(재발송메시지)에 값 설정
-		// "LMS"일 때는 fmessage(메시지본문) 값으로 발송되며 kkoresendmsg(재발송메시지)에는 값을 넣으면 안 된다.
-		if (dm.getFkkoresendtype().equals("SMS")) {
-			dm.setFkkoresendmsg(ansPhase.getAnsContent());
-		}
-
-		dm.setFcallback(callbackTelNo);
-
-		// 버튼생성
-//		if (StringUtils.isNotBlank(dm.getButtonNm())) {
-//			JSONObject button = new JSONObject();
-//			button.put("name", dm.getButtonNm());
-//			button.put("type", "WL");
-//			button.put("url_mobile", domainUrl + dm.getButtonUrl());
-//
-//			JSONObject jsonData = new JSONObject();
-//			jsonData.put("button", button);
-//
-//			JSONArray jsonArray = new JSONArray();
-//			jsonArray.add(button);
-//
-//			dm.setFkkobutton(jsonArray.toString());
-//		}
-
-		// 카카오 알림톡 발송
-		dmDao.createKakao(dm);
-	}
-
-	/**
-	 * LMS 발송
-	 * @param ansSq - 답변일련번호
-	 * @param dm - 메시지 정보
-	 * @param replaceInfo - 메시지내용 중 대체할 정보
-	 * @author gagamel
-	 * @since 2020. 11. 9
-	 */
-	@Transactional("shopTxnManager")
-	public void sendLms(Integer ansSq, SsgDirectMessage dm, GagaMap replaceInfo) {
-		// 답변문구 조회
-		AnswerPhase ansPhase = this.getAnswerPhase(ansSq, replaceInfo);
-		dm.setFsubject(ansPhase.getAnsTitle());
-		dm.setFmessage(ansPhase.getAnsContent());
-		dm.setFcallback(callbackTelNo);
-		dmDao.createLms(dm);
-	}
-
-	/**
-	 * 답변문구 조회
-	 * @param ansSq - 답변일련번호
-	 * @param replaceInfo - 메시지내용 중 대체할 정보
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 11. 9
-	 */
-	@Cacheable(value = "common", key = "'answerPhase-'.concat(#ansSq)")
-	public AnswerPhase getAnswerPhase(Integer ansSq, GagaMap replaceInfo) {
-		AnswerPhase ansPhase = ansPhaseDao.getAnswerPhase(ansSq);
-		ansPhase.setAnsContent(GagaStringUtil.replace(this.mergeData(ansPhase.getAnsContent(), replaceInfo), ">", ">"));
-		return ansPhase;
-	}
-
-	/**
-	 * 메시지 문자열 중에 '#{'로 시작하고 '}'로 끝나는 부분을 대체할 정보(replaceInfo)로 대체해 반환한다.
-	 * @param message - 메시지 문자열
-	 * @param replaceInfo - 알림톡 메시지 중 대체할 정보
-	 * @return
-	 * @author gagamel
-	 * @date 2018. 1. 21.
-	 */
-	private String mergeData(String message, GagaMap replaceInfo) {
-		List<String> keyList = getKeyList(message, "#{", "}");
-
-		String key = "";
-		String value = "";
-
-		if (!keyList.isEmpty()) {
-			for (int i = 0; i < keyList.size(); i++) {
-				key = keyList.get(i);
-				value = replaceInfo.getString(key);
-				message = message.replace("#{" + key + "}", value);
-			}
-		}
-
-		return message;
-	}
-
-	/**
-	 * 입력 문자열로부터 시작 태그와 종료 태그 안의 key 목록을 반환한다.
-	 * @param inputStr - 입력 문자열
-	 * @param startTag - 시작 태그
-	 * @param endTag - 종료 태그
-	 * @return
-	 * @author gagamel
-	 * @date 2018. 1. 21.
-	 */
-	private List<String> getKeyList(String inputStr, String startTag, String endTag) {
-		List<String> keyList = new ArrayList<>();
-
-		String targetStr = inputStr;
-
-		while (targetStr.indexOf(startTag) > -1) {
-			int startPos = targetStr.indexOf(startTag) + startTag.length();
-			int endPos = targetStr.indexOf(endTag, startPos);
-
-			keyList.add(targetStr.substring(startPos, endPos));
-			targetStr = targetStr.substring(endPos + endTag.length());
-		}
-
-		return keyList;
-	}
-
-}
+package com.style24.core.biz.thirdparty;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import javax.annotation.PostConstruct;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.cache.annotation.Cacheable;
+import org.springframework.core.env.Environment;
+import org.springframework.stereotype.Component;
+import org.springframework.transaction.annotation.Transactional;
+
+import com.style24.core.biz.dao.SsgDirectMessageDao;
+import com.style24.core.biz.dao.TscAnswerPhaseDao;
+import com.style24.core.support.env.TscConstants;
+import com.style24.persistence.domain.AnswerPhase;
+import com.style24.persistence.domain.SsgDirectMessage;
+
+import lombok.extern.slf4j.Slf4j;
+
+import com.gagaframework.web.parameter.GagaMap;
+import com.gagaframework.web.util.GagaStringUtil;
+
+/**
+ * 신세계아이앤씨 SSG 모듈을 이용한 카카오알림톡 Sender
+ * 
+ * @author gagamel
+ * @since 2020. 11. 9
+ */
+@Component
+@Slf4j
+public class SsgKakaoSender {
+
+	// 발신프로필키
+	private String profile = "95ed449aa61c05fb613253e740cceb7d3b5d0a64";
+
+	// 발신자전화번호
+	private String callbackTelNo;
+
+	private String domainUrl;
+
+	@Autowired
+	private Environment env;
+
+	@Autowired
+	private TscAnswerPhaseDao ansPhaseDao;
+
+	@Autowired
+	private SsgDirectMessageDao dmDao;
+
+	// 알림톡 답변일련번호
+	public enum KakaoAnswerSq {
+		JoinCongrat(1010),			// 회원가입축하 안내
+		CertNoSend(1011),			// 인증번호발송 안내
+		TempPasswd(1012),			// 임시비밀번호발급 안내
+		OtoAnswer(1013),			// 1:1문의답변등록 안내
+		DormantExpect(1014),		// 휴면계정전환예정 안내
+
+		CardOrderComplete(1020),	// 주문완료-신용카드 안내
+		BtOrderComplete(1021),		// 주문완료-계좌이체 안내
+		VaOrderComplete(1022),		// 주문완료-무통장 안내
+		VaDepositRequest(1023),		// 무통장입금요청 안내
+		VaDepositConfirm(1024),		// 무통장입금확인 안내
+		CardCancelRefund(1025),		// 주문취소 및 환불 안내-신용카드
+		AtCancelRefund(1026),		// 주문취소 및 환불 안내-계좌이체
+		VaCancelRefund(1027),		// 주문취소 및 환불 안내-무통장
+
+		SoldoutExpect(1030),		// 품절예정안내
+		CardCancelBySoldout(1031),	// 품절에 의한 주문취소 안내-신용카드
+		AtCancelBySoldout(1032),	// 품절에 의한 주문취소 안내-계좌이체
+		VaCancelBySoldout(1033),	// 품절에 의한 주문취소 안내-무통장
+
+		GoodsSend(1040),			// 상품 발송 안내
+		ExchGoodsSend(1041),		// 교환 상품 발송 안내
+
+		ExchRequestComplete(1050),	// 교환 신청 완료 안내
+		RtnRequestCompleted(1051),	// 반품 신청 완료 안내
+		WithdrawDelay(1060),		// 회수처리 지연 안내
+		ReviewWrite(1070),			// 상품평 작성 안내
+		BasicLms(1071);				// 기본안내
+
+		private Integer value;
+
+		private KakaoAnswerSq(Integer value) {
+			this.value = value;
+		}
+
+		public Integer value() {
+			return value;
+		}
+	}
+
+	@PostConstruct
+	public void init() {
+		domainUrl = env.getProperty("domain.front");
+		callbackTelNo = TscConstants.CALLCENTER_TEL_NO;
+
+		log.debug("\n\n---- SsgKakaoSender initialization started ----");
+		log.debug("profile: [{}]", profile);
+		log.debug("callbackTelNo: [{}]", callbackTelNo);
+		log.debug("domainUrl: [{}]", domainUrl);
+		log.debug("\n--- SsgKakaoSender initialization completed ----\n");
+	}
+
+	/**
+	 * 카카오알림톡 발송
+	 * @param ansSq - 답변일련번호
+	 * @param dm - 메시지 정보
+	 * @param replaceInfo - 메시지내용 중 대체할 정보
+	 * @author gagamel
+	 * @since 2020. 11. 9
+	 */
+	@Transactional("shopTxnManager")
+	public void send(Integer ansSq, SsgDirectMessage dm, GagaMap replaceInfo) {
+		// 답변문구 조회
+		AnswerPhase ansPhase = this.getAnswerPhase(ansSq, replaceInfo);
+
+		dm.setFyellowid(profile);
+		dm.setFkkosubject(ansPhase.getAnsTitle());
+		dm.setFtemplatekey(String.valueOf(ansSq));
+		dm.setFmessage(ansPhase.getAnsContent());
+
+		// kkoresendtype(재발송유형)이 "SMS"일 때만 kkoresendmsg(재발송메시지)에 값 설정
+		// "LMS"일 때는 fmessage(메시지본문) 값으로 발송되며 kkoresendmsg(재발송메시지)에는 값을 넣으면 안 된다.
+		if (dm.getFkkoresendtype().equals("SMS")) {
+			dm.setFkkoresendmsg(ansPhase.getAnsContent());
+		}
+
+		dm.setFcallback(callbackTelNo);
+
+		// 버튼생성
+//		if (StringUtils.isNotBlank(dm.getButtonNm())) {
+//			JSONObject button = new JSONObject();
+//			button.put("name", dm.getButtonNm());
+//			button.put("type", "WL");
+//			button.put("url_mobile", domainUrl + dm.getButtonUrl());
+//
+//			JSONObject jsonData = new JSONObject();
+//			jsonData.put("button", button);
+//
+//			JSONArray jsonArray = new JSONArray();
+//			jsonArray.add(button);
+//
+//			dm.setFkkobutton(jsonArray.toString());
+//		}
+
+		// 카카오 알림톡 발송
+		dmDao.createKakao(dm);
+	}
+
+	/**
+	 * SMS 발송
+	 * @param ansSq - 답변일련번호
+	 * @param dm - 메시지 정보
+	 * @param replaceInfo - 메시지내용 중 대체할 정보
+	 * @author gagamel
+	 * @since 2020. 11. 9
+	 */
+	@Transactional("shopTxnManager")
+	public void sendSms(Integer ansSq, SsgDirectMessage dm, GagaMap replaceInfo) {
+		// 답변문구 조회
+		AnswerPhase ansPhase = this.getAnswerPhase(ansSq, replaceInfo);
+		dm.setFmessage(ansPhase.getAnsContent());
+		dm.setFcallback(callbackTelNo);
+		dmDao.createSms(dm);
+	}
+
+	/**
+	 * LMS 발송
+	 * @param ansSq - 답변일련번호
+	 * @param dm - 메시지 정보
+	 * @param replaceInfo - 메시지내용 중 대체할 정보
+	 * @author gagamel
+	 * @since 2020. 11. 9
+	 */
+	@Transactional("shopTxnManager")
+	public void sendLms(Integer ansSq, SsgDirectMessage dm, GagaMap replaceInfo) {
+		// 답변문구 조회
+		AnswerPhase ansPhase = this.getAnswerPhase(ansSq, replaceInfo);
+		dm.setFsubject(ansPhase.getAnsTitle());
+		dm.setFmessage(ansPhase.getAnsContent());
+		dm.setFcallback(callbackTelNo);
+		dmDao.createLms(dm);
+	}
+
+	/**
+	 * 답변문구 조회
+	 * @param ansSq - 답변일련번호
+	 * @param replaceInfo - 메시지내용 중 대체할 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 11. 9
+	 */
+	@Cacheable(value = "common", key = "'answerPhase-'.concat(#ansSq)")
+	public AnswerPhase getAnswerPhase(Integer ansSq, GagaMap replaceInfo) {
+		AnswerPhase ansPhase = ansPhaseDao.getAnswerPhase(ansSq);
+		ansPhase.setAnsContent(GagaStringUtil.replace(this.mergeData(ansPhase.getAnsContent(), replaceInfo), "&gt;", ">"));
+		return ansPhase;
+	}
+
+	/**
+	 * 메시지 문자열 중에 '#{'로 시작하고 '}'로 끝나는 부분을 대체할 정보(replaceInfo)로 대체해 반환한다.
+	 * @param message - 메시지 문자열
+	 * @param replaceInfo - 알림톡 메시지 중 대체할 정보
+	 * @return
+	 * @author gagamel
+	 * @date 2018. 1. 21.
+	 */
+	private String mergeData(String message, GagaMap replaceInfo) {
+		List<String> keyList = getKeyList(message, "#{", "}");
+
+		String key = "";
+		String value = "";
+
+		if (!keyList.isEmpty()) {
+			for (int i = 0; i < keyList.size(); i++) {
+				key = keyList.get(i);
+				value = replaceInfo.getString(key);
+				message = message.replace("#{" + key + "}", value);
+			}
+		}
+
+		return message;
+	}
+
+	/**
+	 * 입력 문자열로부터 시작 태그와 종료 태그 안의 key 목록을 반환한다.
+	 * @param inputStr - 입력 문자열
+	 * @param startTag - 시작 태그
+	 * @param endTag - 종료 태그
+	 * @return
+	 * @author gagamel
+	 * @date 2018. 1. 21.
+	 */
+	private List<String> getKeyList(String inputStr, String startTag, String endTag) {
+		List<String> keyList = new ArrayList<>();
+
+		String targetStr = inputStr;
+
+		while (targetStr.indexOf(startTag) > -1) {
+			int startPos = targetStr.indexOf(startTag) + startTag.length();
+			int endPos = targetStr.indexOf(endTag, startPos);
+
+			keyList.add(targetStr.substring(startPos, endPos));
+			targetStr = targetStr.substring(endPos + endTag.length());
+		}
+
+		return keyList;
+	}
+
+}

style24.core/src/main/java/com/style24/persistence/mybatis/shop/SsgDirectMessage.xml

@@ -0,0 +1,100 @@
+<?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.core.biz.dao.SsgDirectMessageDao">
+
+	<!-- SMS발송 생성 -->
+	<insert id="createSms" parameterType="SsgDirectMessage">
+		/* SsgDirectMessage.createSms */
+		INSERT INTO SSG_SEND_TRAN_SMS (
+		       FSEQ
+		     , FUSERID
+		     , FSECTIONCODE
+		     , FCAMPCODE
+		     , FMSGTYPE
+		     , FMESSAGE
+		     , FSENDDATE
+		     , FDESTINE
+		     , FCALLBACK
+		)
+		VALUES (
+		       NULL
+		     , #{fuserid}
+		     , #{fsectioncode}
+		     , #{fcampcode}
+		     , '0'
+		     , #{fmessage}
+		     , NOW()
+		     , #{fdestine}
+		     , #{fcallback}
+		)
+	</insert>
+	
+	<!-- LMS발송 생성 -->
+	<insert id="createLms" parameterType="SsgDirectMessage">
+		/* SsgDirectMessage.createLms */
+		INSERT INTO SSG_SEND_TRAN_MMS (
+		       FSEQ
+		     , FUSERID
+		     , FSECTIONCODE
+		     , FCAMPCODE
+		     , FMSGTYPE
+		     , FSUBJECT
+		     , FMESSAGE
+		     , FSENDDATE
+		     , FDESTINE
+		     , FCALLBACK
+		)
+		VALUES (
+		       NULL
+		     , #{fuserid}
+		     , #{fsectioncode}
+		     , #{fcampcode}
+		     , '2'
+		     , #{fsubject}
+		     , #{fmessage}
+		     , NOW()
+		     , #{fdestine}
+		     , #{fcallback}
+		)
+	</insert>
+	
+	<!-- 카카오알림톡발송 생성 -->
+	<insert id="createKakao" parameterType="SsgDirectMessage">
+		/* SsgDirectMessage.createKakao */
+		INSERT INTO SSG_SEND_TRAN_KKO (
+		       FSEQ            --메시지SEQ
+		     , FUSERID         --사용자계정
+		     , FSECTIONCODE    --계층코드(SINC로부터 부여받은 코드값)
+		     , FCAMPCODE       --캠페인코드(CRM전송 등에 이용)
+		     , FYELLOWID       --KKO발신프로필키(카카오 전송을 위해 승인받은 프로필키)
+		     , FKKOSUBJECT     --KKO친구툭전용제목
+		     , FTEMPLATEKEY    --KKO템플릿키
+		     , FKKOBUTTON      --KKO버튼(링크기능, JSON 이용)
+		     , FMSGTYPE        --메시지타입(4:KKO)
+		     , FMESSAGE        --메시지본문
+		     , FSENDDATE       --메시지발송시간(예약메시지인경우 해당 예약일시)
+		     , FKKORESENDTYPE  --KKO/KKF재발송메시지타입(SMS/LMS)
+		     , FKKORESENDMSG   --KKO/KKF재발송메시지내용
+		     , FDESTINE        --수신자전화번호
+		     , FCALLBACK       --발신자전화번호(회신번호)
+		)
+		VALUES (
+		       NULL
+		     , #{fuserid}
+		     , #{fsectioncode}
+		     , #{fcampcode}
+		     , #{fyellowid}
+		     , #{fkkosubject}
+		     , #{ftemplatekey}
+		     , #{fkkobutton}
+		     , '4'
+		     , #{fmessage}
+		     , NOW()
+		     , #{fkkoresendtype}
+		     , #{fkkoresendmsg}
+		     , #{fdestine}
+		     , #{fcallback}
+		)
+	</insert>
+
+</mapper>

style24.scm/src/main/java/com/style24/scm/biz/service/TssLoginService.java

@@ -1,111 +1,140 @@
-package com.style24.scm.biz.service;
-
-import java.util.Collection;
-
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.core.env.Environment;
-import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
-
-import com.style24.persistence.domain.Menu;
-import com.style24.persistence.domain.User;
-import com.style24.scm.biz.dao.TssLoginDao;
-import com.style24.scm.support.security.session.TssSession;
-
-import lombok.extern.slf4j.Slf4j;
-
-/**
- * 로그인 Service
- *
- * @author gagamel
- * @since 2020. 10. 19
- */
-@Service
-@Slf4j
-public class TssLoginService {
-
-	@Autowired
-	private TssLoginDao loginDao;
-
-	@Autowired
-	private Environment env;
-
-	/**
-	 * 사용자ID로 사용자 정보 조회
-	 * @param userId - 사용자ID
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 5
-	 */
-	public User getUserById(String userId) {
-		return loginDao.getUserById(userId);
-	}
-
-	/**
-	 * 로그인실패 남기기. 로그인실패여부가 "N:성공"이면 실패건수 0으로 초기화
-	 * @param userNo - 사용자번호
-	 * @param loginFailYn - 로그인실패여부(Y:실패, N:성공)
-	 * @author gagamel
-	 * @since 2020. 10. 5
-	 */
-	@Transactional("shopTxnManager")
-	public void createLoginFail(Integer userNo, String loginFailYn) {
-		User user = new User();
-		user.setUserNo(userNo);
-		user.setIpAddr(TssSession.getIpAddress());
-		user.setLoginFailYn(loginFailYn);
-		loginDao.createLoginFail(user);
-	}
-
-	/**
-	 * 로그인 실패건수 조회
-	 * @param userNo - 사용자번호
-	 * @return 로그인 실패건수
-	 * @author gagamel
-	 * @since 2020. 10. 5
-	 */
-	public int getLoginFailCount(Integer userNo) {
-		User user = new User();
-		user.setUserNo(userNo);
-		user.setIpAddr(TssSession.getIpAddress());
-		return loginDao.getLoginFailCount(user);
-	}
-
-	/**
-	 * 최종로그인일시 Update
-	 * @param userNo - 사용자번호
-	 * @author gagamel
-	 * @since 2020. 10. 5
-	 */
-	@Transactional("shopTxnManager")
-	public void updateLastLoginDate(Integer userNo) {
-		loginDao.updateLastLoginDate(userNo);
-	}
-
-	/**
-	 * 로그인이력 남기기
-	 * @param userNo - 사용자번호
-	 * @author gagamel
-	 * @date 2020. 10. 5
-	 */
-	@Transactional("shopTxnManager")
-	public void createLoginHistory(Integer userNo) {
-		User user = new User();
-		user.setUserNo(userNo);
-		user.setIpAddr(TssSession.getIpAddress());
-
-		loginDao.createLoginHistory(user);
-	}
-
-	/**
-	 * 로그인 메뉴 목록
-	 * @param userNo - 사용자번호
-	 * @return
-	 * @author gagamel
-	 * @since 2020. 10. 5
-	 */
-	public Collection<Menu> getLoginMenuList(Integer userNo) {
-		return loginDao.getLoginMenuList(userNo);
-	}
-
-}
+package com.style24.scm.biz.service;
+
+import java.util.Collection;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.core.env.Environment;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import com.style24.core.biz.thirdparty.SsgKakaoSender;
+import com.style24.persistence.domain.Menu;
+import com.style24.persistence.domain.User;
+import com.style24.scm.biz.dao.TssLoginDao;
+import com.style24.scm.support.security.session.TssSession;
+
+import lombok.extern.slf4j.Slf4j;
+
+import com.gagaframework.web.util.GagaStringUtil;
+
+/**
+ * 로그인 Service
+ *
+ * @author gagamel
+ * @since 2020. 10. 19
+ */
+@Service
+@Slf4j
+public class TssLoginService {
+
+	@Autowired
+	private TssLoginDao loginDao;
+
+	@Autowired
+	private Environment env;
+
+	@Autowired
+	private SsgKakaoSender kakaoSender;
+
+	/**
+	 * 사용자ID로 사용자 정보 조회
+	 * @param userId - 사용자ID
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 5
+	 */
+	public User getUserById(String userId) {
+		return loginDao.getUserById(userId);
+	}
+
+	/**
+	 * 로그인실패 남기기. 로그인실패여부가 "N:성공"이면 실패건수 0으로 초기화
+	 * @param userNo - 사용자번호
+	 * @param loginFailYn - 로그인실패여부(Y:실패, N:성공)
+	 * @author gagamel
+	 * @since 2020. 10. 5
+	 */
+	@Transactional("shopTxnManager")
+	public void createLoginFail(Integer userNo, String loginFailYn) {
+		User user = new User();
+		user.setUserNo(userNo);
+		user.setIpAddr(TssSession.getIpAddress());
+		user.setLoginFailYn(loginFailYn);
+		loginDao.createLoginFail(user);
+	}
+
+	/**
+	 * 로그인 실패건수 조회
+	 * @param userNo - 사용자번호
+	 * @return 로그인 실패건수
+	 * @author gagamel
+	 * @since 2020. 10. 5
+	 */
+	public int getLoginFailCount(Integer userNo) {
+		User user = new User();
+		user.setUserNo(userNo);
+		user.setIpAddr(TssSession.getIpAddress());
+		return loginDao.getLoginFailCount(user);
+	}
+
+	/**
+	 * 최종로그인일시 Update
+	 * @param userNo - 사용자번호
+	 * @author gagamel
+	 * @since 2020. 10. 5
+	 */
+	@Transactional("shopTxnManager")
+	public void updateLastLoginDate(Integer userNo) {
+		loginDao.updateLastLoginDate(userNo);
+	}
+
+	/**
+	 * 로그인이력 남기기
+	 * @param userNo - 사용자번호
+	 * @author gagamel
+	 * @date 2020. 10. 5
+	 */
+	@Transactional("shopTxnManager")
+	public void createLoginHistory(Integer userNo) {
+		User user = new User();
+		user.setUserNo(userNo);
+		user.setIpAddr(TssSession.getIpAddress());
+
+		loginDao.createLoginHistory(user);
+	}
+
+	/**
+	 * 로그인 메뉴 목록
+	 * @param userNo - 사용자번호
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 5
+	 */
+	public Collection<Menu> getLoginMenuList(Integer userNo) {
+		return loginDao.getLoginMenuList(userNo);
+	}
+
+	/**
+	 * 2factor인증번호 발송
+	 * @author gagamel
+	 * @since 2020. 12. 4
+	 */
+	@Transactional("shopTxnManager")
+	public void sendTwoFactorCertNo() {
+		String certNo = GagaStringUtil.getRandomNumber(6);
+		log.info("certNo: {}", certNo);
+
+		// TODO: SSG모듈 설치 후 주석 해제해야 함
+//		SsgDirectMessage dm = new SsgDirectMessage();
+//		dm.setFdestine(TssSession.getInfo().getCellPhnno());
+//
+//		GagaMap replaceInfo = new GagaMap();
+//		replaceInfo.setString("certNo", certNo);
+//
+//		// 인증번호 6자리 문자메시지 발송
+//		kakaoSender.sendSms(SsgKakaoSender.KakaoAnswerSq.CertNoSend.value(), dm, replaceInfo);
+
+		TssSession.setAttribute("tfcertno", certNo);
+	}
+
+}

style24.scm/src/main/java/com/style24/scm/biz/web/TssIndexController.java

@@ -2,16 +2,24 @@ package com.style24.scm.biz.web;
 
 import javax.servlet.http.HttpSession;
 
+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.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.servlet.ModelAndView;
 
+import com.style24.core.support.message.TscMessageByLocale;
+import com.style24.scm.biz.service.TssLoginService;
 import com.style24.scm.support.controller.TssBaseController;
 import com.style24.scm.support.security.session.TssSession;
 
 import lombok.extern.slf4j.Slf4j;
 
+import com.gagaframework.web.rest.server.GagaResponse;
+
 /**
  * Index Controller
  * 
@@ -22,8 +30,18 @@ import lombok.extern.slf4j.Slf4j;
 @Slf4j
 public class TssIndexController extends TssBaseController {
 
+	@Autowired
+	private TscMessageByLocale message;
+
+	@Autowired
+	private TssLoginService loginService;
+
 	/**
-	 * 첫 페이지. 로그인 된 상태이면 대쉬보드 화면으로 아니면 로그인 페이지로
+	 * 첫 페이지
+	 * 		로그인 하고
+	 * 			2factor인증까지 되었으면 대쉬보드 화면으로 이동하고
+	 * 			아니면 2factor인증 화면으로
+	 * 		아니면 로그인 페이지로
 	 * @param error - 로그인 오류 정보
 	 * @param session - HttpSession
 	 * @return
@@ -35,7 +53,16 @@ public class TssIndexController extends TssBaseController {
 		ModelAndView mav = new ModelAndView();
 
 		if (TssSession.isLogin()) {
-			mav.setViewName("dashboard");
+			if (TssSession.isTwoFactorCertify()) { // 2factor인증이 되었으면
+				// 대쉬보드 페이지로
+				mav.setViewName("dashboard");
+			} else {
+				// 2factor인증번호 발송
+				loginService.sendTwoFactorCertNo();
+
+				// 2factor인증 페이지로
+				mav.setViewName("signin2");
+			}
 			return mav;
 		}
 
@@ -52,4 +79,36 @@ public class TssIndexController extends TssBaseController {
 		return mav;
 	}
 
+	/**
+	 * 2factor인증번호가 맞는지 확인
+	 * @param certNo - 인증번호
+	 * @return ture/false
+	 * @author gagamel
+	 * @since 2020. 10. 7
+	 */
+	@GetMapping("/tfcertify/check/{certNo}")
+	@ResponseBody
+	public boolean isTwoFactorCertify(@PathVariable("certNo") String certNo) {
+		if (certNo.equals(TssSession.getAttribute("tfcertno"))) {
+			TssSession.setAttribute("isTfcertify", "true");
+			TssSession.setAttribute("tfcertno", "");
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * 2factor인증번호 발송
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 7
+	 */
+	@PostMapping("/tfcertify/send")
+	@ResponseBody
+	public GagaResponse sendCertNo() {
+		loginService.sendTwoFactorCertNo();
+		return super.ok(message.getMessage("SUCC_0005"));
+	}
+
 }

style24.scm/src/main/java/com/style24/scm/support/security/session/TssSession.java

@@ -2,6 +2,7 @@ package com.style24.scm.support.security.session;
 
 import java.util.Collection;
 
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.context.request.RequestAttributes;
 import org.springframework.web.context.request.RequestContextHolder;
 
@@ -60,4 +61,16 @@ public class TssSession extends TscSession {
 		return loginDetails.getLoginMenuList();
 	}
 
+	/**
+	 * 2 fatcory 인증여부
+	 * @return true/false
+	 */
+	public static boolean isTwoFactorCertify() {
+		if (StringUtils.isBlank(TscSession.getAttribute("isTfcertify"))) {
+			return false;
+		}
+
+		return new Boolean(TscSession.getAttribute("isTfcertify"));
+	}
+
 }

style24.scm/src/main/webapp/WEB-INF/views/signin2.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="common/layout/login">
+<!--
+ *******************************************************************************
+ * @source  : signin2.html
+ * @desc    : 2Factor인증 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2020.12.04   gagamel     최초 작성
+ *******************************************************************************
+ -->
+<head>
+	<title>2 Factor Signin</title>
+</head>
+
+<body>
+
+<th:block layout:fragment="content">
+	<form name="certForm" id="certForm" method="post">
+		<div class="loginCont">
+			<div class="logo"><img src="/image/login_logo.png" alt="logo"/></div>
+			<div class="certiFrm">
+				<h2><i class="fa fa-envelope-o" aria-hidden="true"></i>보안인증</h2>
+				<div class="alertBox alert-danger" th:style="${error == null ? 'display: none;' : ''}" id="certFailAlert">
+					<span th:text="${error}">인증번호가 유효하지 않습니다. 다시 확인하시고 입력해 주세요.</span>
+					<button type="button" class="alertClose" onclick="uifnAlertClose('certFailAlert')">닫기</button>
+				</div>
+				<div class="input">
+					<input type="hidden" name="certNo"/>
+					<input type="text" name="certNo1" maxlength="1" numberOnly="numberOnly"/>
+					<input type="text" name="certNo2" maxlength="1" numberOnly="numberOnly"/>
+					<input type="text" name="certNo3" maxlength="1" numberOnly="numberOnly"/>
+					<input type="text" name="certNo4" maxlength="1" numberOnly="numberOnly"/>
+					<input type="text" name="certNo5" maxlength="1" numberOnly="numberOnly"/>
+					<input type="text" name="certNo6" maxlength="1" numberOnly="numberOnly"/>
+					<span class="countdown"></span>
+				</div>
+				<div class="info">
+					<p class="dot">휴대전화로 전송된 인증번호 6자리를 3분 이내로 입력해 주세요.</p>
+					<p class="dot">인증번호가 전송되지 않았거나, 입력시간 초과시 "재전송" 버튼을 눌러주세요.</p>
+				</div>
+				<div class="button">
+					<button type="button" class="btn btn-black btn-lg" id="btnConfirm">확인</button>
+					<button type="button" class="btn btn-gray btn-lg" id="btnResend">재전송</button>
+				</div>
+			</div>
+		</div>
+	</form>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	$("input[numberOnly]").keyup(function(e) {
+		$(this).val($(this).val().replace(/[^0-9]/g,"")); //숫자만
+		if (this.value.length == 1) {
+			$(this).next('input').select();
+			return false;
+		};
+	}).click(function(){
+		$(this).select();
+	});
+
+	var expireTimer = false;
+	var timeStart = "";
+	
+	var interval;
+	var fnSetTimer = function() {
+		timeStart = "3:00";
+		$('.countdown').html(timeStart);
+		
+		interval = setInterval(function() {
+			var timer = timeStart.split(':');
+			var minutes = parseInt(timer[0], 10);
+			var seconds = parseInt(timer[1], 10);
+				--seconds;
+				minutes = (seconds < 0) ? --minutes : minutes;
+				seconds = (seconds < 0) ? 59 : seconds;
+				seconds = (seconds < 10) ? '0' + seconds : seconds;
+				$('.countdown').html(minutes + ':' + seconds);
+				if (minutes == 0 && seconds == 0) { // 0:00인 경우
+					clearInterval(interval);
+					$("#certFailAlert span").html("입력시간이 초과되었습니다. [재전송] 버튼을 눌러 주세요."); //alertBox 오류메시지 전달
+					$("#certFailAlert").removeClass("alert-success off").addClass("alert-danger").css("display","block");//alertBox 활성화
+					expireTimer = true;
+				};
+				timeStart = minutes + ':' + seconds;
+		}, 1000);
+	}
+	
+	// 확인
+	$('#btnConfirm').on('click', function() {
+		if (expireTimer) {
+			mcxDialog.alert('입력시간이 초과되었습니다. [재전송] 버튼을 눌러 주세요.');
+			return;
+		}
+		
+		var certNo = $('input[name=certNo1]').val() + $('input[name=certNo2]').val() + $('input[name=certNo3]').val()
+				+ $('input[name=certNo4]').val() + $('input[name=certNo5]').val() + $('input[name=certNo6]').val();
+		
+		if (gagajf.isNull(certNo)) {
+			mcxDialog.alertC('인증번호를 입력해 주세요.', {
+				sureBtnText: "확인",
+				sureBtnClick: function() {
+					$("input[name=certNo1]").focus();
+				}
+			});
+			return;
+		}
+		
+		if (certNo.length < 6) {
+			mcxDialog.alertC('인증번호 6자리를 정확하게 입력해 주세요.', {
+				sureBtnText: "확인",
+				sureBtnClick: function() {
+					$("input[name=certNo1]").select();
+					$("input[name=certNo1]").focus();
+				}
+			});
+			return;
+		}
+		
+		$.get('/tfcertify/check/' + certNo
+			, function(result) {
+				if (!result) {
+					mcxDialog.alertC('인증번호가 맞지 않습니다. 다시 입력해 주세요.', {
+						sureBtnText: "확인",
+						sureBtnClick: function() {
+							$('#certForm')[0].reset();
+							$("input[name=certNo1]").focus();
+						}
+					});
+					return;
+				}
+				
+				document.location.href = "/";
+			});
+	});
+	
+	// 재전송
+	$('#btnResend').on('click', function() {
+		$.post('/tfcertify/send'
+			, function(result) {
+				clearInterval(interval);
+				expireTimer = false;
+				$('.countdown').html(timeStart);
+				fnSetTimer();
+				$("#certFailAlert span").html("인증번호가 재전송 되었습니다.");
+				$("#certFailAlert").removeClass("alert-danger").addClass("alert-success").css("display","block");//alertBox 활성화
+				$('#certForm')[0].reset();
+				$("input[name=certNo1]").focus();
+			});
+	})
+	
+	$(document).ready(function() {
+		$("input[name=certNo1]").focus();
+		fnSetTimer();
+	});
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

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

@@ -1,862 +1,877 @@
-@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; overflow:hidden;}
-.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}
-
-/* 로그인 : 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:0; 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;}
-#lnb-wrapper:after{content:''; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background-color:#2f4050;}
-#lnb-wrapper.on {left:0;}
-#lnb {margin-bottom:60px; 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;}
-
-/* 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:30px;}
-.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; 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 10px 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 50%; 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 : wivis ---*/
-.color-wivis header, span.color-wivis{background:#3E3E3E !important;}
-.color-wivis .header-logo{background:#000 !important;}
-.color-wivis .header-menu .menu a{background:#000 !important;}
-.color-wivis .header-menu .menu a.on{background:#fff !important; color:#000 !important;}
-.color-wivis #lnb-wrapper{background-color:#b2b2b2 !important;}
-.color-wivis #lnb .dep2{background-color:#545454 !important;}
-.color-wivis #lnb .dep3{border-color:#000 !important;}
-.color-wivis #lnb .dep3{background:#fdfdfd !important;  }
-.color-wivis #lnb .dep3 a{color:#111111 !important;}
-.color-wivis #lnb a{color:#fff !important;}
-.color-wivis .frmStyle th, .color-wivis .tableStyle th, .color-wivis .frmStyle th, .color-wivis .tableStyle th{background:#eee !important; 	border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
-.color-wivis .tablePaging .num.on, .color-wivis .tablePaging .num.on{background:#888 !important; 	border-color:#888 !important;}
-.color-wivis .tabsJrNav li.on a, .color-wivis .tabsJrNav li.on a{color:#333; background:#eee !important}
-.color-wivis .tabJr.on, .color-wivis .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; height:27px; line-height:27px; margin:3px 3px 3px 0; border:1px solid #dbdbdb}
-.multiCheckBox .sltBtn {width:99%; padding-left:5px; color:#555; text-align:left; -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:-1px; 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;}
+#lnb-wrapper:after{content:''; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background-color:#2f4050;}
+#lnb-wrapper.on {left:0;}
+#lnb {margin-bottom:60px; 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;}
+
+/* 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:30px;}
+.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; 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 10px 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;}
 }