/**
* =============================================================================
* @	file     : common.css
* -----------------------------------------------------------------------------
* 
* @ project  : 
* @ category : 
* @ author   : JANG SANG SEOK
* @ since    : 2018-06-25
* @ desc     : 공통 css
* 
* =============================================================================
*/

@charset "UTF-8";

	/**************************************************************************
	* 00. FONT FAMILY
	---------------------------------------------------------------------------
	* 00. COMMON
	---------------------------------------------------------------------------	
	* 01. FONT (폰트 사이즈, 폰트 컬러..)
	---------------------------------------------------------------------------		
	* 02. PADDING
	---------------------------------------------------------------------------	
	* 03. SIZE (width, height, min-heihgt, line-height)
	---------------------------------------------------------------------------
	* 04. A (Hyperlink)
	---------------------------------------------------------------------------
	* 05. FORMS (INPUT, SELECTBOX, CHECKBOX, RADIOBOX)
	---------------------------------------------------------------------------
	* 06. JSS LABEL 코드 / 컬러설정 (라벨)
	---------------------------------------------------------------------------
	* 07. JSS OUTLINE LABEL 컬러설정 (라벨)
	---------------------------------------------------------------------------
	* 08. 
	---------------------------------------------------------------------------
	* 09. 게시판 (데이타 리스트, 상세 관련)
	---------------------------------------------------------------------------
	* 10. POPUP (팝업)
	---------------------------------------------------------------------------
	* 11. 약관 문서
	---------------------------------------------------------------------------
	* 12. 상품
	---------------------------------------------------------------------------
	* 51. summernote (위지윅 에디터)
	---------------------------------------------------------------------------
	* 52. BootStrap (부트스트랩 관련 커스터마이징)	
	**************************************************************************/

	/**
	| -------------------------------------------------------------------------
	| @ 00. FONT FAMILY
	| -------------------------------------------------------------------------
	*/
	.font-jss			{ font-family:'돋움', dotum, AppleGothic !important; font-size:13px !important; 	}
	.font-jss-sans		{ font-family:NoirPro, sans-serif; font-weight:normal; font-size:13px; 			}

	/**
	| -------------------------------------------------------------------------
	| @ 00. COMMON
	| -------------------------------------------------------------------------
	*/
	/* 정렬 **/
	.text-align-left  	{ text-align: left;  		}
	.text-align-center	{ text-align: center; 		}
	.text-align-right 	{ text-align: right;  		}
	
	.clearBoth			{ clear:both !important; 	}
	.cursor-pointer		{ cursor:pointer; 		 	}
	.disp-none  		{ display:none; 		 	}
	.disp-block			{ display:block;		 	}

	/* 세로 중앙 위치 **/	
	.vertical-center { vertical-align: middle !important; }
	
	/* 버튼 좌측 마진값 조절 **/
	button.custom-btn { margin-left:1px !important; margin-bottom:5px;	}
	
	/* 취소선 **/
	.strike{ text-decoration:line-through }

	/* ul li 데이타 리스트 **/
	ul.dataList {
	    list-style: none;
	    margin: 0px;
	    padding: 0px;
	}
	ul.dataList li{
		padding: 17px 0px 7px 0px;
		border-bottom: 1px dashed #C6C6C6;
	}

	/* HR dot line (점선 라인) **/
	hr.style1 {
		border-top: 1px dashed #C6C6C6; /*#D9D9D9; #8c8b8b;**/
	}
	hr.style2 {
		border-top: 1px solid #8c8b8b;
		border-bottom: 1px solid #fff;
	}
	hr.style3 {
		border-top: 1px solid #8c8b8b;
		border-bottom: 1px solid #fff;
	}
	hr.style3:after {
		content: '';
		display: block;
		margin-top: 2px;
		border-top: 1px solid #8c8b8b;
		border-bottom: 1px solid #fff;
	}
	hr.style4 {
		border-top: 1px dashed #8c8b8b;
		border-bottom: 1px dashed #fff;
	}
	hr.style5 {
		border-top: 1px dotted #8c8b8b;
		border-bottom: 1px dotted #fff;
	}
	hr.style6 {
		height: 6px;
		background: url(/_common/img/hr/hr-11.png) repeat-x 0 0;
		border: 0;
	}
	hr.style7 {
		height: 6px;
		background: url(/_common/img/hr/hr-12.png) repeat-x 0 0;
		border: 0;
	}
	
	/*-----------------------------------------------**/
	/* @ auto 바둑판(그리드 셀) 리스트             				 **/
	/*-----------------------------------------------**/
	.gridCellList {
	    width: 100%;
	    display: grid;
	    /*grid-template-columns: repeat(4, 1fr);**/
	    gap: 15px; /*셀과 셀과의 간격 설정**/
	    @media screen and (max-width: 718px) {
	        gap: 3px;
		}
	}
	.gridCell {
	    border: 0px solid #E7E7E7;
	    width: 100%;
	    position: relative;
	    background-color: #fff;
	}
	.gridCell::after {
	    display: block;
	    content: "";
	}
	.gridCellCard {
	    width: 100%;    
	}

	/**
	| -------------------------------------------------------------------------
	| @ 01. FONT (폰트 사이즈, 폰트 컬러, 도형 폰트..)
	| -------------------------------------------------------------------------
	*/
	/* 폰트 사이즈 **/
	.font-size-8px  { font-size: 8px;  }
	.font-size-9px  { font-size: 9px;  }
	.font-size-10px { font-size: 10px; }
	.font-size-11px { font-size: 11px; }
	.font-size-12px { font-size: 12px; }
	.font-size-13px { font-size: 13px; }
	.font-size-14px { font-size: 14px; }
	.font-size-15px { font-size: 15px; }
	.font-size-16px { font-size: 16px; }
	.font-size-17px { font-size: 17px; }
	.font-size-18px { font-size: 18px; }
	.font-size-19px { font-size: 19px; }
	.font-size-20px { font-size: 20px; }
	.font-size-21px { font-size: 21px; }
	.font-size-22px { font-size: 22px; }
	.font-size-23px { font-size: 23px; }
	.font-size-24px { font-size: 24px; }
	.font-size-25px { font-size: 25px; }
	.font-size-26px { font-size: 26px; }
	.font-size-27px { font-size: 27px; }
	.font-size-28px { font-size: 28px; }
	.font-size-29px { font-size: 29px; }
	.font-size-30px { font-size: 30px; }
	.font-size-31px { font-size: 31px; }
	.font-size-32px { font-size: 32px; }
	.font-size-33px { font-size: 33px; }
	.font-size-34px { font-size: 34px; }
	.font-size-35px { font-size: 35px; }
	.font-size-36px { font-size: 36px; }
	.font-size-37px { font-size: 37px; }
	.font-size-38px { font-size: 38px; }
	.font-size-39px { font-size: 39px; }
	.font-size-40px { font-size: 40px; }
	
	.font-bold			{ font-weight: bold; 				}
    .font-size-1em		{ font-size: 1em	!important; 	}
	.font-size-1_1em	{ font-size: 1.1em	!important; 	}
	.font-size-1_11em	{ font-size: 1.11em !important; 	}
	.font-size-1_12em	{ font-size: 1.12em !important; 	}
	.font-size-1_13em	{ font-size: 1.13em !important; 	}
	.font-size-1_14em	{ font-size: 1.14em !important; 	}
	.font-size-1_15em	{ font-size: 1.15em !important; 	}
	.font-size-1_16em	{ font-size: 1.16em !important; 	}
	.font-size-1_17em	{ font-size: 1.17em !important; 	}
	.font-size-1_18em	{ font-size: 1.18em !important; 	}
	.font-size-1_19em	{ font-size: 1.19em	!important; 	}
    .font-size-1_2em	{ font-size: 1.2em	!important; 	}
    .font-size-1_3em	{ font-size: 1.3em	!important; 	}
    .font-size-1_4em	{ font-size: 1.4em	!important; 	}
    .font-size-1_5em	{ font-size: 1.5em	!important; 	}
    .font-size-1_6em	{ font-size: 1.6em	!important; 	}
    .font-size-1_7em	{ font-size: 1.7em	!important; 	}
    .font-size-1_8em	{ font-size: 1.8em	!important; 	}
    .font-size-1_9em	{ font-size: 1.9em	!important; 	}
    .font-size-2em		{ font-size: 2em	!important; 	}

	/* 폰트 컬러 **/
	.font-color-black	{ color:#000000; }
	.font-color-dark	{ color:#242424; }
	.font-color-gray	{ color:#828282; }
	.font-color-lightgray { color:#D3D3D3; }
	.font-color-gray50	{ color:#D3D3D3; }
	.font-color-gray60	{ color:#c7c7c7; }
	.font-color-gray70	{ color:#b5b5b5; }
	.font-color-gray80	{ color:#a8a8a8; }
	.font-color-gray90	{ color:#9C9C9C; }
	.font-color-gray99	{ color:#616161; }
	.font-color-red		{ color:red; 	 }
	.font-color-blue	{ color:#1e72ce; }
	.font-color-lightblue { color:#79afec; }
	.font-color-orange	{ color:#F76344; }
	.font-color-gold	{ color:#be9a07; }
	.font-color-yello	{ color:#f7c709; }
	.font-color-pink	{ color:#f361aa; }
	.font-color-brown	{ color:#db5b24; }
	.font-color-purple	{ color:#8431a5; }
	.font-color-purple50{ color:#c689dc; }
	.font-color-green	{ color:#32a032; }
	.font-color-wine	{ color:#b41e4f; }
	.font-color-wine20	{ color:#e35b88; }
	
	/* 백그라운드 컬러 **/
	.bg-gray { background-color:#EEEEEE; }

	/* 도형 안에 문자 (사각, 원형) **/
	span.circle_char {
		min-width: 28px;
		height: 28px;
		line-height: 28px;
		border-radius: 4px;
		text-align: center;
		background: #fff;
		border: 1px solid #BDBDBD;
		font-wegith: bold;
	}
	
	/* 도형 안에 숫자, 순번 (사각) **/
	span.square_char {
		min-width: 25px;
		text-align: center;
		padding: 3px 6px;
		background: #aaaaaa;
		border: 0px solid #aaaaaa;
		color: #fff;
		font-wegith: bold;	
		font-family: 돋움', Dotum;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 02. PADDING
	| -------------------------------------------------------------------------
	*/
	.padding-0		{ padding: 0px 0px;   }
	.padding-1		{ padding: 1px 1px;   }
	.padding-2		{ padding: 2px 2px;   }
	.padding-3		{ padding: 3px 3px;   }
	.padding-4		{ padding: 4px 4px;   }
	.padding-5		{ padding: 5px 5px;   }
	.padding-6		{ padding: 6px 6px;   }
	.padding-7		{ padding: 7px 7px;   }
	.padding-8		{ padding: 8px 8px;   }
	.padding-9		{ padding: 9px 9px;   }
	.padding-10		{ padding: 10px 10px; }
	.padding-11		{ padding: 11px 11px; }
	.padding-12		{ padding: 12px 12px; }
	.padding-13		{ padding: 13px 13px; }
	.padding-14		{ padding: 14px 14px; }
	.padding-15		{ padding: 15px 15px; }
	.padding-16		{ padding: 16px 16px; }
	.padding-17		{ padding: 17px 17px; }
	.padding-18		{ padding: 18px 18px; }
	.padding-19		{ padding: 19px 19px; }
	.padding-20		{ padding: 20px 20px; }
	
	/**
	| -------------------------------------------------------------------------
	| @ 03. SIZE (width, height, min-heihgt, line-height)
	| -------------------------------------------------------------------------
	*/
	/* 가로 사이즈 **/
	.w-size-10px { width:10px; }
	.w-size-20px { width:20px; }
	.w-size-30px { width:30px; }
	.w-size-40px { width:40px; }
	.w-size-50px { width:50px; }
	.w-size-60px { width:60px; }
	.w-size-70px { width:70px; }
	.w-size-80px { width:80px; }
	.w-size-90px { width:90px; }
	.w-size-100px{ width:100px; }
	.w-size-150px{ width:150px; }
	.w-size-200px{ width:200px; }
	.w-size-300px{ width:300px; }
	.w-size-400px{ width:400px; }
	.w-size-500px{ width:500px; }
	.w-size-600px{ width:600px; }
	.w-size-700px{ width:700px; }
	.w-size-800px{ width:800px; }
	.w-size-900px{ width:900px; }
	.w-size-1000px{ width:1000px; }
	
	/* 세로 사이즈 **/
	.h-size-0px  { height:0px;  }
	.h-size-5px  { height:5px;  }
	.h-size-10px { height:10px; }
	.h-size-20px { height:20px; }
	.h-size-30px { height:30px; }
	.h-size-40px { height:40px; }
	.h-size-50px { height:50px; }
	.h-size-60px { height:60px; }
	.h-size-70px { height:70px; }
	.h-size-80px { height:80px; }
	.h-size-90px { height:90px; }
	.h-size-100px { height:100px; }
	.h-size-200px { height:200px; }
	.h-size-300px { height:300px; }
	.h-size-500px { height:500px; }
	.h-size-700px { height:700px; }	
	
	/* min-height **/
	.min-h-size-100 { min-height:100px;  }
	.min-h-size-200 { min-height:200px;  }
	.min-h-size-300 { min-height:300px;  }
	.min-h-size-400 { min-height:400px;  }
	.min-h-size-500 { min-height:500px;  }
	.min-h-size-600 { min-height:600px;  }
	.min-h-size-700 { min-height:700px;  }
	.min-h-size-800 { min-height:800px;  }
	.min-h-size-900 { min-height:900px;  }
	.min-h-size-1000{ min-height:1000px; }
	
	/* line-height **/
	.line-h-10 { line-height:10px; }
	.line-h-11 { line-height:11px; }
	.line-h-12 { line-height:12px; }
	.line-h-13 { line-height:13px; }
	.line-h-14 { line-height:14px; }
	.line-h-15 { line-height:15px; }
	.line-h-16 { line-height:16px; }
	.line-h-17 { line-height:17px; }
	.line-h-18 { line-height:18px; }
	.line-h-19 { line-height:19px; }
	.line-h-20 { line-height:20px; }
	.line-h-21 { line-height:21px; }
	.line-h-22 { line-height:22px; }
	.line-h-23 { line-height:23px; }
	.line-h-24 { line-height:24px; }
	.line-h-25 { line-height:25px; }
	.line-h-26 { line-height:26px; }
	.line-h-27 { line-height:27px; }
	.line-h-28 { line-height:28px; }
	.line-h-29 { line-height:29px; }
	.line-h-30 { line-height:30px; }
	.line-h-35 { line-height:35px; }
	.line-h-40 { line-height:40px; }
	.line-h-45 { line-height:45px; }
	.line-h-50 { line-height:50px; }
	.line-h-55 { line-height:55px; }
	.line-h-60 { line-height:60px; }
	.line-h-70 { line-height:70px; }
	.line-h-80 { line-height:80px; }
	.line-h-90 { line-height:90px; }
	.line-h-100{ line-height:100px;}
	
	/**
	| -------------------------------------------------------------------------
	| @ 04. A (Hyperlink)
	| -------------------------------------------------------------------------
	*/
	a.normalHyper:link 		{ text-decoration: none; color: #525252;			}
	a.normalHyper:visited 	{ text-decoration: none; color: #525252;			}
	a.normalHyper:active 	{ text-decoration: none; color: #525252;			}
	a.normalHyper:hover 	{ text-decoration: underline; color: #525252;		}
	
	a.customHyper:link 		{ text-decoration: underline; color: #950b5e;		}
	a.customHyper:visited 	{ text-decoration: underline; color: #950b5e;		}
	a.customHyper:active 	{ text-decoration: underline; color: #950b5e;		}
	a.customHyper:hover 	{ text-decoration: none; 	  color: #ec1195;		}

	a.purpleHyper:link 		{ text-decoration: underline; color: #8e04ac;		}
	a.purpleHyper:visited 	{ text-decoration: underline; color: #8e04ac;		}
	a.purpleHyper:active 	{ text-decoration: underline; color: #8e04ac;		}
	a.purpleHyper:hover 	{ text-decoration: none; 	  color: #cf0afa;		}
	
	a.mainHyper:link 		{ text-decoration: none; color: #525252;			}
	a.mainHyper:visited 	{ text-decoration: none; color: #525252;			}
	a.mainHyper:active 		{ text-decoration: none; color: #525252;			}
	a.mainHyper:hover 		{ text-decoration: underline; color: #bdbdbd;		}

	a.unerLinePurple:link 	{ text-decoration: underline; color: #8e04ac;		}
	a.unerLinePurple:visited{ text-decoration: underline; color: #8e04ac;		}
	a.unerLinePurple:active { text-decoration: underline; color: #8e04ac;		}
	a.unerLinePurple:hover 	{ text-decoration: none; 	  color: #8e04ac;		}

	/**
	| -------------------------------------------------------------------------
	| @ 05. FORMS (INPUT, SELECTBOX, CHECKBOX, RADIOBOX)
	| -------------------------------------------------------------------------
	*/

	/* INPUT **/
	.input-custom {
		font-family: '돋움', Dotum; /*NanumGothicCoding;**/
		font-size: 13px;
		border: 1px solid #a1a1a1; /*#D7D7D7;**/
		background-color: #fff;
	}
	
	.input-custom-dark {
		font-family: '돋움', Dotum; /*NanumGothicCoding;**/
		font-size: 13px;
	}
	
	/* INPUT - validation check icon **/
	.input-validation-check {
		background-image: url('/_web/assets/img/icon/form/ico_chk01.png');
		background-repeat: no-repeat;
		background-position: right 2% bottom 45%;
	}

	/* INPUT SIZE  (LG, MD, SM, XSM) **/
	.input-custom-lg {
		height: 55px;
		line-height: 55px;
	}
	.input-custom-md {
		height: 48px;
		line-height: 48px;
	}
	.input-custom-sm {
		height: 40px;
		line-height: 40px;
	}
	.input-custom-xsm {
		height: 34px;
		line-height: 34px;
	}
	.input-custom-xxsm {
		height: 30px;
		line-height: 30px;
	}
	.input-custom-xxxsm {
		height: 27px;
		line-height: 27px;
	}
	
	/* INPUT CLASSIC MODE (클래식 모드) **/
	.input-custom-classic {
		font-family: '돋움', Dotum; /*NanumGothicCoding;**/
		font-size: 13px;
		border: 1px solid #bbbbbb;
		background-color: #fff;
		padding: 5px 15px;
		width: 100%;
	}
	.input-custom-classic::placeholder {
		color: #9f9f9f;
	}	
	.input-custom-classic[readonly] {
		background-color: #f3f3f3;
	}		
	.input-custom-classic:focus {
		outline: 0 none;
		border: 1px solid #585858;
		background-color: #fffdf7;
	}
		
	/* 한글, 영문 입력 제어 **/
	input.only-en { /* input 영문만 입력 	**/
		ime-mode:disabled;
		-webkit-ime-mode:disabled; 
		-moz-ime-mode:disabled; 
		-ms-ime-mode:disabled; 
		 
	}
	input.default-han { /* input 한글모드 	**/
		ime-mode:active; 	
		-webkit-ime-mode:active; 
		-moz-ime-mode:active; 
		-ms-ime-mode:active; 		
	}
	input.default-en { /* input 한/영 가능 	**/
		ime-mode:auto; 	
		-webkit-ime-mode:auto; 
		-moz-ime-mode:auto; 
		-ms-ime-mode:auto; 		
	}

	/*-----------------------------------------------**/
	/* @ 라디오박스             				 	 			 **/
	/*-----------------------------------------------**/
	input[type="radio"].jss-radio {
		width:0;
		height:0;
		position:absolute;
		margin:0;
		padding:0;
		border:0;
		z-index:-1;
		overflow:hidden;
		opacity:0;
	}
	input[type="radio"].jss-radio + label {			
		display:inline-block;
		min-height:20px;
		padding-left:25px;
		padding-top:2px;
		font-size:12px;
		line-height:18px;
		color:#474747;
		font-weight:normal;
		cursor:pointer;
		position:relative;
	}
	input[type="radio"].jss-radio + label .ico {
		top:0; left:0; display:inline-block; width:23px; height:23px; border:1px solid #afafaf; border-radius:50%; cursor:pointer; vertical-align:top; position:absolute;
	}
	input[type="radio"].jss-radio + label .ico > span {
		top:4px; left:4px; right:4px; bottom:4px; background:transparent; border-radius:50%; position:absolute;
	}	
	/* 라디오박스 색상 **/
	/* 디폴트 - BLACK **/
	input[type="radio"].jss-radio:checked + label .ico { border-color: #000; }
	input[type="radio"].jss-radio:checked + label .ico > span { background-color: #000; }
	/* DARKGRAY **/
	input[type="radio"].jss-radio.darkgray:checked + label .ico { border-color: #474747; }
	input[type="radio"].jss-radio.darkgray:checked + label .ico > span { background-color: #474747; }	
	/* RED **/
	input[type="radio"].jss-radio.red:checked + label .ico { border-color: #db0005; }
	input[type="radio"].jss-radio.red:checked + label .ico > span { background-color: #db0005; }
	/* BLUE **/
	input[type="radio"].jss-radio.blue:checked + label .ico { border-color: #4f6cf7; }
	input[type="radio"].jss-radio.blue:checked + label .ico > span { background-color: #4f6cf7; }
	/* GREEN **/
	input[type="radio"].jss-radio.green:checked + label .ico { border-color: #318c26; }
	input[type="radio"].jss-radio.green:checked + label .ico > span { background-color: #318c26; }
	/* PURPLE **/
	input[type="radio"].jss-radio.purple:checked + label .ico { border-color: #8818da; }
	input[type="radio"].jss-radio.purple:checked + label .ico > span { background-color: #8818da; }
	/* INDIGO **/
	input[type="radio"].jss-radio.indigo:checked + label .ico { border-color: #2c3c96; }
	input[type="radio"].jss-radio.indigo:checked + label .ico > span { background-color: #2c3c96; }
	
	/*-----------------------------------------------**/
	/* @ 커스텀 체크박스, 라디오박스             				 	 **/
	/*-----------------------------------------------**/
	.checkbox label:after, 
	.radio label:after {
	    content: '';
	    display: table;
	    clear: both;
	}	
	.checkbox .cr,
	.radio .cr {
	    position: relative;
	    display: inline-block;
	    border: 1px solid #a9a9a9;
	    border-radius: .25em;
	    width: 1.3em;
	    height: 1.3em;
	    float: left;
	    margin-right: .5em;
	}	
	.radio .cr {
	    border-radius: 50%;
	}	
	.checkbox .cr .cr-icon,
	.radio .cr .cr-icon {
	    position: absolute;
	    font-size: .8em;
	    line-height: 0;
	    top: 50%;
	    left: 20%;
	}	
	.radio .cr .cr-icon {
	    margin-left: 0.04em;
	}	
	.checkbox label input[type="checkbox"],
	.radio label input[type="radio"] {
	    display: none;
	}	
	.checkbox label input[type="checkbox"] + .cr > .cr-icon,
	.radio label input[type="radio"] + .cr > .cr-icon {
	    transform: scale(3) rotateZ(-20deg);
	    opacity: 0;
	    transition: all .3s ease-in;
	}	
	.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
	.radio label input[type="radio"]:checked + .cr > .cr-icon {
	    transform: scale(1) rotateZ(0deg);
	    opacity: 1;
	}	
	.checkbox label input[type="checkbox"]:disabled + .cr,
	.radio label input[type="radio"]:disabled + .cr {
	    opacity: .5;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 06. JSS LABEL 코드 / 컬러설정 (라벨)
	| -------------------------------------------------------------------------
	*/
	/*-----------------------------------------------**/
	/* @ 상품 - 라벨 (신상품, 인기상품, 베스트상품, 세일상품, 이벤트상품) **/
	/*-----------------------------------------------**/
	.jss-label.goods-new { /* 신상품 **/
		background-color: #41ba56; /*#2A96FF;**/
	}
	.jss-label.goods-pop { /* 인기상품 **/
		background-color: #ac06b0;
	}	
	.jss-label.goods-best { /* 베스트상품 **/
		background-color: #ee0bb6;
	}		
	.jss-label.goods-sale { /* 세일상품 **/
		background-color: #3FC5F0;
	}
	.jss-label.goods-event { /* 이벤트상품 **/
		background-color: #ff6226;
	}	
	
	/* 품절 (SOLD OUT) **/
	.jss-label.goods-soldout {
		background-color: #818181;
	}

	/* 결제상태 - Y:결제완료 / N:미결제 **/
	.jss-label.payment-Y { /* 결제완료 **/
		background-color: #a2d06f; /*#24b336;**/
	}
	.jss-label.payment-N { /* 미결제 **/
		background-color: #949494;
	}

	/* 결제 승인여부 (승인, 승인취소) **/
	.jss-label.isPayStatus-O { background-color: #a2d06f; color: #fff; }
	.jss-label.isPayStatus-C { background-color: #a1a1a1; color: #fff; }

	/* 결제 여부 (결제완료, 미결제) **/
	.jss-label.isPmt-Y { background-color: #a2d06f; color: #fff; }
	.jss-label.isPmt-N { background-color: #a1a1a1; color: #fff; }
	
	/*-----------------------------------------------**/
	/* @ 결제상태 코드 - 라벨 (100:미결제, 200:결제완료, 300:부분결제, 400:부분결제취소, 500:결제취소) **/
	/*-----------------------------------------------**/
	.jss-label.payment-100 { /* 100 **/
		background-color: #949494;
	}
	.jss-label.payment-200 { /* 200 **/
		background-color: #a2d06f; /*#24b336;**/
	}
	.jss-label.-payment-300 { /* 300 **/
		background-color: #a2d06f; /*#24b336;**/
	}
	.jss-label.payment-400 { /* 400 **/
		background-color: #fb4e35;
	}
	.jss-label.payment-500 { /* 500 **/
		background-color: #DC3545;
	}

	/*-----------------------------------------------**/
	/* @ 승인상태 코드 - 라벨 (O:승인, C:승인취소) 			 **/
	/*-----------------------------------------------**/
	.jss-label.paystatus-O { /* O **/
		background-color: #a2d06f;
	}
	.jss-label.paystatus-C { /* C **/
		background-color: #DC3545;
	}
	
	/*-----------------------------------------------**/
	/* @ 주문상태 코드 - 라벨 (00:주문접수, 10:주문확인(입금완료), 20:주문취소, 21:취소완료, 30:상품준비(제작)중, 31:출고중, 32:출고완료, 40:택배발송/배달출발/시공출발, 41:배송완료/배달완료/시공완료, 50:교환신청, 51:교환완료, 60:반품신청, 61:반품완료) **/
	/*-----------------------------------------------**/
	/*
		00:주문접수 -> 10:주문확인(입금완료)
		20:주문취소 -> 21:취소완료
		30:상품준비(제작)중 -> 31:출고중 -> 32:출고완료
		40:택배발송/배달출발/시공출발 -> 41:배송완료/배달완료/시공완료
		50:교환신청 -> 51:교환완료
		60:반품신청 -> 61:반품완료
	**/
	.jss-label.order-status-00 { /* 00 주문접수 **/
		background-color: #d3d3d3;
	}
	.jss-label.order-status-10 { /* 10 주문확인(입금완료) #e1dc04  **/
		background-color: #949494;
	}
		
	.jss-label.order-status-20 { /* 20 주문취소 **/
		background-color: #DC3545;
	}
	.jss-label.order-status-21 { /* 21 취소완료 **/
		background-color: #ec919a;
	}

	.jss-label.order-status-30 { /* 30 상품준비(제작)중 **/
		background-color: #5e8bf4;
	}
	.jss-label.order-status-31 { /* 31 출고중 **/
		background-color: #5e8bf4;
	}
	.jss-label.order-status-32 { /* 32 출고완료 **/
		background-color: #a6bef9;
	}
		
	.jss-label.order-status-40 { /* 40 택배발송/배달출발/시공출발 **/
		background-color: #97ca5e;
	}	
	.jss-label.order-status-41 { /* 41 배송완료/배달완료/시공완료 **/
		background-color: #bcdd97;
	}
		
	.jss-label.order-status-50 { /* 50 교환신청 **/
		background-color: #f77935; /*#fb4e35;**/
	}	
	.jss-label.order-status-51 { /* 51 교환완료 **/
		background-color: #fcc1a3; /*#fd998a;**/
	}
		
	.jss-label.order-status-60 { /* 60 반품신청 **/
		background-color: #DC3545;
	}	
	.jss-label.order-status-61 { /* 61 반품완료 **/
		background-color: #ec919a;
	}
	
	/* 노출여부 (IS VIEW) **/
	.jss-label.isView-Y { background-color: #a3c1fa; /*#609dfb;**/ color: #fff; }
	.jss-label.isView-N { background-color: #c0c0c0; /*#898989;**/ color: #fff; }
	
	/* 사용여부 (IS USE) **/
	.jss-label.isUse-Y { background-color: #a3c1fa; /*#609dfb;**/ color: #fff; }
	.jss-label.isUse-N { background-color: #c0c0c0; /*#898989;**/ color: #fff; }

	/* 공통 Y/N **/
	.jss-label.label-Y { background-color: #609dfb; color: #fff; }
	.jss-label.label-N { background-color: #898989; color: #fff; }
	
	/* Y/N 라벨 **/
	.jss-label.yn-Y { /* Y 사용       **/ background-color: #2A96FF; /*#609dfb;**/ }
	.jss-label.yn-N { /* N 사용안함 **/ background-color: #bdbdbd; }

	/* 경고 (warning) **/
	.jss-label.warning { background-color: #ff2429; color: #fff; }
	
	/**
	| -------------------------------------------------------------------------
	| @ 07. JSS OUTLINE LABEL 컬러설정 (라벨)
	| -------------------------------------------------------------------------
	*/
	/*-----------------------------------------------**/
	/* @ 상품 - 라벨 (신상품, 인기상품, 베스트상품, 세일상품, 이벤트상품) **/
	/*-----------------------------------------------**/
	span.jss-outline-label.goods-new { /* 신상품 **/
		color: #008000; border: 1px solid #008000;
	}
	span.jss-outline-label.goods-pop { /* 인기상품 **/
		color: #8C1DC9; border: 1px solid #8C1DC9;
	}	
	span.jss-outline-label.goods-best { /* 베스트상품 **/
		color: #E90CC2; border: 1px solid #E90CC2;		
	}
	span.jss-outline-label.goods-sale { /* 세일상품 **/
		color: #87CEFA; border: 1px solid #87CEFA;
	}	
	span.jss-outline-label.goods-event { /* 이벤트상품 **/
		color: #F7602D; border: 1px solid #F7602D;
	}
	
	/* 품절 (SOLD OUT) **/
	span.jss-outline-label.goods-soldout {
		background-color: #818181;
	}

	/* 결제상태 - Y:결제완료 / N:미결제 **/
	span.jss-outline-label.payment-Y { /* 결제완료 **/
		background-color: #a2d06f; /*#24b336;**/
	}
	span.jss-outline-label.payment-N { /* 미결제 **/
		background-color: #949494;
	}
		
	/**
	| -------------------------------------------------------------------------
	| @ 09. 게시판 (데이타 리스트, 상세 관련)
	| -------------------------------------------------------------------------
	*/		
	/*-----------------------------------------------**/
	/* @ 게시판 상세보기             			 				 **/
	/*-----------------------------------------------**/
	/* 게시판 글 상세보기 **/		
	.board-contents{
		min-height:	200px;
		line-height: 150%;
	}
	.board-contents p, .board-contents P, .board-contents br, .board-contents BR{
		/*line-height: 50%;**/
		padding:0;
    	margin:0;
	}
			
	/*-----------------------------------------------**/
	/* @ 댓글 관련             			 				 	 **/
	/*-----------------------------------------------**/
	/* 리스트 - 헤더 타이틀 설정 **/
	table#reply-table-grid   > thead > tr > th, 
	table#comment-table-grid > thead > tr > th {
		padding-top:7px !important; padding-bottom:7px !important; /*padding-left:10px !important;**/
	}
	
	/* 리스트 - 데이타 리스트 설정 **/
	table#reply-table-grid   > tbody > tr > td, 
	table#comment-table-grid > tbody > tr > td {
		padding-top:12px !important; padding-bottom:12px !important; /*padding-left:10px !important;**/
	}		

	/* 댓글 상세보기 **/		
	.reply-contents, .comment-contents {
		line-height: 150%;
	}	
	.reply-contents p, .reply-contents P, .reply-contents br, .reply-contents BR, 
	.comment-contents p, .comment-contents P, .comment-contents br, .comment-contents BR {
		/*line-height: 50%;**/
		padding:0;
    	margin:0;
	}

	/**
	| -------------------------------------------------------------------------
	| @ 10. POPUP (팝업)
	| -------------------------------------------------------------------------
	*/
	.pop-modal{
		min-width: 200px;
		border: 0px solid #e4e4e4;
		padding: 0px 0px;
		background-color: #fff;;
	}
	.pop-head{
		width: 100%;
		background-color: #F2F2F2;
		padding: 3px 10px;
		cursor: move;
		border-bottom: 1px solid #e4e4e4;
	}
	.pop-content{
		min-height: 50px;
		background-color: #fff;
		font-size: 13px;
		font-family: '돋움', Dotum;
	}
	.pop-footer{
		width: 100%;
		padding: 5px 5px;
		font-size: 12px;
		background-color: #F2F2F2;
	}
	.pop-footer a{
		color: #222222;
	}
	.pop-footer a:hover{
		text-decoration: underline;
		color: #d50b2e;
	}
	.btn-close {
		font-size: 16px;
		color: #000; /*#8D8D8D;**/
		border: 1px solid #e4e4e4;
		padding: 3px 5px;
	}
	.btn-close:hover {
		color: #d50b2e;
	}

	/**
	| -------------------------------------------------------------------------
	| @ 11. 약관 문서
	| -------------------------------------------------------------------------
	*/
	/*-----------------------------------------------**/
	/* @ 약관 문서    			 			 	 		 **/
	/*-----------------------------------------------**/
	.wrapper-doc{
		width: 100%;
	}
	.wrapper-doc .doc-group{
		width: 100%;
		margin: 0px 0px 20px 0px; 
		padding: 0;	
	}
	.wrapper-doc .doc-group .group-title{
		font-weight: bold;
		font-size: 15px;
		font-family: NotoSansKR-Bold;
		padding-bottom: 5px;
	}
	.wrapper-doc .doc-group .group-content{
		border:1px solid #D5D5D5;
		padding: 10px 12px 10px 12px;
		font-size: 13px;
	}
	.wrapper-doc .doc-group .group-content div{
		font-weight: normal;
		font-size: 13px;
		color: #000;
		margin: 0;
		padding-bottom: 5px;
	}
	.wrapper-doc .doc-group .group-content div.depth-1{
		padding-left: 15px;
	}	
	/*-----------------------------------------------**/
	/* @ 약관 네비게이션    			 			 	 	 **/
	/*-----------------------------------------------**/
	.doc-navi-group{
		width: 100%;
		margin: 0px 0px 40px 0px; 
		padding: 20px 20px 20px 20px;	
		border:1px solid #EEEEEE;
		background-color: #F9F9F9;
	}
	.doc-navi-group .gridCellList {
		border: 0px solid #E7E7E7;
		width: 100%;
		display: grid;
		/*grid-template-columns: repeat(4, 1fr);**/
		gap: 10px;
		@media screen and (max-width: 718px) {
			gap: 3px;
		}
	}
	.doc-navi-group .gridCell {
		border: 0px solid #E7E7E7;
		width: 100%;
		position: relative;
	}
	.doc-navi-group .gridCell::after {
		display: block;
		content: "";
	}
	.doc-navi-group .gridCellCard {
		width: 100%;
		background-color: #F9F9F9;	
	}
	.doc-navi-group .gridCellCard .doc-navi-idx {  
		font-size: 12px;
		display:inline-block; width:39px;
	}
	.doc-navi-group .gridCellCard .doc-navi-tit {
		padding-left: 10px;
		font-weight: bold;
		font-size: 12px;
	}
	.doc-navi-group .gridCellCard .doc-navi-tit a:hover{
		text-decoration: underline;
		color: #000;
	}
	/*-----------------------------------------------**/
	/* @ 약관 테이블    			 			 	 	 	 **/
	/*-----------------------------------------------**/	
	.group-content table {
		width:100%;
		padding:0;
		border: 1px solid #CFCFCF;
	    border-collapse: collapse;
	    margin-bottom: 10px;
	}
	.group-content table thead tr th {
		border: 1px solid #CFCFCF;
		background-color: #F9F9F9;
		height: 30px;
		font-weight: normal;
		text-align: center;
	}
	.group-content table tbody tr td {
		border: 1px solid #CFCFCF;
		height: 30px;
		text-align: left;
		padding-left: 10px;
	}

	/**
	| -------------------------------------------------------------------------
	| @ 12. 상품
	| -------------------------------------------------------------------------
	*/
	/*-----------------------------------------------**/
	/* @ 주문금액 상세 (사칙연산) - 상품금액 + 배송비 - 할인 - 적립금 = 주문금액 **/
	/*-----------------------------------------------**/
	.price-info-outline {
		border-top: 1px solid #E4E4E4; /*#BBBBBB;**/
		border-bottom: 1px solid #E4E4E4;
		background-color: #F7F7F7;
		min-height: 50px;
	}
	table.price-info {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	table.price-info tr {
		height: 15px;
	}
	table.price-info tr td.start, table.price-info tr td.end {
		width: 40px;
	}
	table.price-info tr td.ico {
		width: 15px;
		font-size: 22px;
		color: #C4C4C4;
	}
	table.price-info tr td.number {
		text-align: center;
		/*width: 20%;**/
	}
	table.price-info tr td .price-tit {
		color: gray;
		padding-bottom: 7px;
	}
	table.price-info tr td .price-val {
		color: #000;
		font-size: 15px;
		font-weight: bold;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 51. summernote (위지윅 에디터)
	| -------------------------------------------------------------------------
	*/
	/* textarea 개행 간격 조정  **/	
	.note-editor .note-editable {
    	font-size: 1.0em;
    	/*line-height: 0.3em;**/
    	line-height: 150%; /*50%;**/ /*20%;**/
	}
	.note-editor .note-editable p, .note-editor .note-editable P, .note-editor .note-editable br, .note-editor .note-editable BR{
    	padding:0;
    	margin:0;
	}

	/**
	| -------------------------------------------------------------------------
	| @ 52. BootStrap (부트스트랩 관련 커스터마이징)
	| -------------------------------------------------------------------------
	*/
	/* line-height 설정 (글내용 개행간격 조정 default: 0.7em) **/
	.content-07em {	line-height:0.7em;	}
	.content-08em {	line-height:0.8em;	} /* { line-height:100%;  } **/
	.content-09em {	line-height:0.9em;	}
	.content-1em  {	line-height:1em;	}
	
	/* button remove focus 버튼 클릭시 포커스 잔상 제거 **/
	.btn:focus, button:focus { 
	    outline: none !important;
	    /*border: none !important; **/
	    -webkit-box-shadow: none !important;
	    box-shadow: none !important;
	}
	
	/* 셀렉트 박스 클릭시 포커스 잔상 제거 **/
	select:focus{
		box-shadow:none !important;
	}
	
	/* 켈린더(datepicker) 폰트 사이즈 설정 **/
	.datepicker{ color:#000 !important; font-family:'돋움', dotum, AppleGothic !important; font-size:12px !important; border:1px solid #bdbdbd!important; }
	.datepicker > .datepicker-days { padding: 20px !important; }
	.datepicker > .datepicker-days > table > thead > tr > th { padding: 5px !important; }
	.datepicker > .datepicker-days > table > tbody > tr > td { padding: 5px !important; }	
	
	/* 툴팁 컬러 변경 **/
	.tooltip {
		 font-family:'돋움', dotum, AppleGothic !important; font-size:13px !important;
		 font-size: 12px;
		 font-style: normal;
		 font-weight: normal;
		 line-height: 1.42857143;
		 text-align: left;
		 text-align: start;
		 text-decoration: none;
		 text-shadow: none;
		 text-transform: none;
		 letter-spacing: normal;
		 word-break: normal;
		 word-spacing: normal;
		 word-wrap: normal;
		 white-space: normal;
	}
	.tooltip-inner {
		 font-family:'돋움', dotum, AppleGothic !important; font-size:12px !important;
		 max-width: 500px;
		 padding: 7px 10px; /*3px 8px;**/
		 color: #fff;
		 text-align: center;
		 background-color: #000;
		 border-radius: 4px;
	}
	
	/* 팝업, 켈린더 z-index 높이기 **/
	.popup { z-index : 90000; }
	.ui-datepicker-div { z-index : 99999; }
	.datepicker { z-index: 99999 !important; }

	/*-----------------------------------------------**/
	/* @ 부트스트랩4에서 xsmall 버튼이 적용 안되는 부분     	 	 **/
	/*-----------------------------------------------**/
	.btn-group-xs > .btn, .btn-xs {
		padding  		: .25rem .4rem;
		font-size  		: .800rem;
		line-height  	: .5;
		border-radius 	: .2rem; /*.1rem;**/
	}