/* 
[중요!] CSS 주석 사용시 "//" 는 절대불가! 
*/

@font-face { font-family: BigBold; src: url("../FONT/NanumSquareOTF_acEB.otf"), url("../FONT/NanumSquareOTF_acEB.ttf"); }
@font-face { font-family: KoPubWorld; src: url("../FONT/KoPubWorld Dotum Light.ttf"); }


*:focus {outline:none}
a {color:#222222;text-decoration:none;}
a:hover {color:#222222;text-decoration:underline;}
a:visited {color:#99209B;text-decoration:none;}
p {border:0px;margin:0px;padding:0px;}

body,select,div,span,table{
	color:#000000;
	font-size:12pt;
	font-family: sans-serif;
	padding:0px;
	box-sizing:border-box;	/* [중요!] padding 영역을 지정된 크기에 포함시킴 (안으로 padding이 들어옴, div만 하려다 모두 적용시킴) => 반대로 content-box(기본값)은 padding은 지정된 크기 밖으로 너비가 늘어남 <div style="width:100px;height:100px;padding:20px;">ABC</div> 실제140px/140px임 */
	
	/* 아래 1,2번을 body에서만 설정했더니 => 동적으로 생성한 HTML에선 적용이 되지 않아 => 여기로 이사왔더니 잘 된다!  */
	/* 1) 모바일 가로모드 일때 폰트크기 자동조정 중지 => 세로모드로 돌아갔을때 => 다른 레이어에서 가로모드 때문에 커진 폰트를 원래대로 할 수 있음 */
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	
	/* 2) 웹킷 브라우저에서 터치시 발생하는 하이라이트 효과 (보통 흰색 Border형태로 잠깐 나타남)의 색상을 투명으로 설정하여 클릭 효과를 제거하기 */
	-webkit-tap-highlight-color:transparent;
}

select {border:1px #D9D7D7 solid;color:#000000;background-color:#FFFFFF;font-size:12pt;height:48px;border-radius:0;text-align-last:center;vertical-align:middle;}	/* text-align-last => center 하면 일부 브라우저는 중앙으로 감, vertical-align:middle 안하면 input등과 비교해서 높낮이가 안맞을 수 있음 */
select option {color:#000000;background-color:#FFFFFF;font-size:11pt;}	/* select 보다는 1폰트 작게 설정함 */

input[type=text], input[type=tel], input[type=password], input[type=search] {border:1px #D9D7D7 solid;color:#000000;font-size:12pt;height:48px;background-position:center left;background-repeat:no-repeat;background-repeat:no-repeat;border-radius:3px;padding-left:5px;box-sizing:border-box;vertical-align:middle;}	/* box-sizing:border-box => padding 영향없이 width 고정, vertical-align:middle 안하면 input등과 비교해서 높낮이가 안맞을 수 있음 */

input[type=checkbox]{appearance:none;vertical-align:middle;width:22px;height:22px;background: url("../images/imgCheckBox.png") no-repeat;background-size: 22px 22px;}
input[type=checkbox]:checked{background: url("../images/imgCheckBox_On.png") no-repeat;background-size: 22px 22px;}

input[type=radio] {vertical-align:middle;}
textarea {border:1px #D9D7D7 solid;color:#000000;border-radius:3px;box-sizing:border-box;font-size:12pt;line-height:22px;padding:15px 5px 15px 5px;}

input[type=text]::placeholder, input[type=tel]::placeholder, input[type=password]::placeholder, input[type=search]::placeholder, textarea::placeholder {	/* :: 는 가상 요소라 다이브 안에 내부 스타일로 못씀 */
  color:#CFD4D9;
}

img{
	border:0px;
	vertical-align:top;			/* 이미지 옆 글자와 높이를 맞추기 위함 (absmiddle비표준) => middle를 넣으면 옆 글자와 나란하겠지만 => top으로 해야 이미지가 td 상단으로 딱 올라감 => 그래서 옆에 글자와 나란하게 맞출 필요가 있을시 아래 cyImgMid 클래스로 설정해라 => 하지만 옆에 글자가 커져도 이미지와 딱 중간을 유지하는건 td를 따로 쓰는 것이 최선임 */
}
table{
	word-wrap:break-word;		/* 긴 텍스트를 강제로 자를 것인지에 대한 옵션 => 줄바꿈(break-word), 삐져나감(normal:기본값) */
	word-break:break-all;		/* 줄바꿈을 어떻게 할 것인지에 대한 옵션 => 한글, 영문 모두 글자단위로 줄바꿈 (break-all) => 한글은 글자, 영문은 단어단위로 줄바꿈 (normal:기본값) => 한글, 영문 모두 단어 단위로 줄바꿈 (keep-all) */
								/* [참고] white-space:nowrap => nowrap는 normal과 같이 공백을 채우지만 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시*/
	border-collapse:separate;	/* Table border와 Td border를 동시에 설정하였을때 => separate(기본값) : 각각의 border가 존재 => collapse : Table와 Td border를 합쳐짐 => 참고로 border자체에 border-radius를 주려면 separate로 해야함 (나는 collspase로 설정없음) */
	border-spacing:0px;			/* td와 td 사이 간격 (border-collapse가 separate여야 적용) 10px(수평) 20px(수직) 두개 적용가능 => 과거에는 cellspacing */
	table-layout:auto;			/* auto:셀 안의 내용에 따라 크기가 변함(기본 값), fixed:셀 안의 내용과 관계없이 크기가 고정됨 */
	text-align:left;
}
table td, table tr {padding:0px;box-sizing:border-box;} /*td도 box-sizing:border-box; 설정해 줘야함 => 그래서 상단 body,select,div,span,table 올릴려고 했더니 td 폰트가 12pt라서 table의 영향을 안받아 불편하기에 여기서 따로 설정함*/

form{margin:0px;height:100%;}

button {vertical-align:middle;}	/* vertical-align:middle 안하면 input등과 비교해서 높낮이가 안맞을 수 있음 */
.cyBtn1 {background-color:#FFFFFF;border:1px #B8B8B8 solid;border-radius:3px;color:#000000;font-size:12pt;padding:0px 0px 0px 0px;cursor:pointer;}	/* PC에서 버튼 글짜가 2px 내려와서 => padding:0px 0px 2px 0px; 올리면 => 모바일에선 2px 올라가기에 그냥둠 */
.cyBtn2 {background-color:#FFFFFF;border:1px #DCDDE2 solid;border-radius:3px;color:#4F5356;font-size:11pt;font-weight:900;padding:0px 0px 0px 0px;cursor:pointer;}
	.cyBtn1:active, .cyBtn2:active {border: 1px #000000 solid;}	/* active => 활성화 될 때 발생 (보통 버튼을 누르는 순간부터 떼는 시점까지) */

.cyBtnRed {background-color:#FE0000;border:0px #B8B8B8 solid;border-radius:3px;color:#FFFFFF;font-size:12pt;padding:0px 0px 0px 0px;cursor:pointer;} 
.cyBtnBlue {background-color:#007AFE;border:0px #B8B8B8 solid;border-radius:3px;color:#FFFFFF;font-size:12pt;padding:0px 0px 0px 0px;cursor:pointer;}
.cyBtnYellow {background-color:#FFEB00;border:0px #B8B8B8 solid;border-radius:3px;color:#FFFFFF;font-size:12pt;padding:0px 0px 0px 0px;cursor:pointer;}
.cyBtnGray {background-color:#F2F3F6;border:0px #B8B8B8 solid;border-radius:3px;color:#FFFFFF;font-size:12pt;padding:0px 0px 0px 0px;cursor:pointer;color:#212123;} 
.cyBtnBlack {background-color:#000000;border:0px #B8B8B8 solid;border-radius:3px;color:#FFFFFF;font-size:12pt;padding:0px 0px 0px 0px;cursor:pointer;} 
.cyBtnBlackLight {background-color:#4A5056;border:0px #B8B8B8 solid;border-radius:3px;color:#FFFFFF;font-size:12pt;padding:0px 0px 0px 0px;cursor:pointer;} 
	.cyBtnRed:active, .cyBtnBlue:active, .cyBtnBlackLight:active {background-color:#000000;}

.cyBtnDisabled {background-color:#DDE1E5;border:0px #B8B8B8 solid;border-radius:3px;color:#FFFFFF;font-size:12pt;padding:0px 0px 0px 0px;pointer-events:none;}	/* disabed 지정 속성 없음, 하지만 pointer-events: none; 사용해서 이벤트 속성을 지정하지 않은것 처럼 행동하게 설정함 */


/* 북등록, 게시판등록 처럼 입력폼에 사용 */
.cyEntry input[type=text] {border:1px #FFFFFF solid;height:60px;}
.cyEntry textarea {border:0px;}


/* 일반적인 엑셀표 느낌 테이블 */
.cyPyo {background-color:#B2B2B2;border-spacing:1px;text-align:center;}
.cyPyo tr:nth-child(1) {background-color:#E7E3E7;}			/* 첫행은 제목 */
.cyPyo tr:not(:nth-child(1)) {background-color:#FFFFFF;}	/* 첫행 제외는 흰색 */


/*.cyImgMid { line-height:0px; }*/
.cyImgMid img {vertical-align:middle;margin-top:-3px;}	/* [이미지, 텍스트 가운데 정렬] TD 등에 클래스 설정 => margin으로 이미지를 텍스트에 맞게 한번 더 조정해야함 (margin-top:-3px)을 주니 조금 적당하긴함 => 윗줄 line-height:0px은 없앰 => 없애지않으면 글자가 이미지때문에 살짝 위로 올라감 그래서 없앰 */
.cyImgMidOnly {vertical-align:middle;display:block;}	/* [이미지 가운데 정렬] 이미지에 바로 클래스 설정 => 여백이 인라인 속성일때 베이스라인때문에 생기는 부분이라서 => 아에 block으로 설정하면 여백이 없어짐 */

.cyImg100 img {max-width:100%; height:auto;}

.cyScrollNo {	/* cyScrollNo 설정한 영약 부모에 table-layout:fixed이 설정되어 있어야 함 */
	-ms-overflow-style: none;			/* IE and Edge */
	scrollbar-width: none;				/* Firefox */
}
.cyScrollNo::-webkit-scrollbar {	/* Chrome, Safari, Opera 에서 csScrollbar 입력시 해당 컨테이너의 scrollbar를 제어함 (:: 는 가상 요소라 다이브 안에 내부 스타일로 못씀) */
	display: none;
}
.cyHoldEffectNo {	/* 홀드 드래드 시 글자나 이미지들이 선택되어지거나 고스트되는 현상 막기 */
	-webkit-touch-callout:none;	/* iOS에서 이미지 롱클릭시 팝업차단 => 안드로이드에서는 style로 못하고 다이브안에 => oncontextmenu="return false" */
	  -webkit-user-select:none;	/* 텍스트 선택불가 */
	   -khtml-user-select:none;
		 -moz-user-select:none;
		  -ms-user-select:none;
		   -o-user-select:none;
		      user-select:none;
	    -webkit-user-drag:none;	/* 이미지 고스트 현상 차단 => 또는 다이브안에 ondragstart="return false" */
}

/* 특정 영역에서는 다시 허용 */
.cyHoldEffectYes {
	-webkit-touch-callout:default;	/* iOS에서 이미지 롱클릭시 팝업차단 => 안드로이드에서는 style로 못하고 다이브안에 => oncontextmenu="return false" */
		 -webkit-user-select:text;	/* 텍스트 선택불가 */
		  -khtml-user-select:text;
		    -moz-user-select:text;
		     -ms-user-select:text;
		      -o-user-select:text;
		         user-select:text;
	       -webkit-user-drag:auto;	/* 이미지 고스트 현상 차단 => 또는 다이브안에 ondragstart="return false" */
}

.cyDivMid {text-align:center;display:table-cell;vertical-align:middle;}
.cySelectLayer {height:48px;border:1px #D9D7D7 solid;border-radius:3px;text-align:center;padding:0px 5px 0px 10px;}

.cyWordFence {padding:15px 0px 18px 0px;border-top:8px #F8F9F9 solid;border-bottom:1px #EFEFEF solid;background-color:#FFFFFF;text-align:center;}
.cyElp {white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;}	/* div 없이 table에서 사용시 table-layout:fixed; 필수임 => 또한, table fixed가 되려면 => table에 width가 (100%든 뭐든) 설정되어 있어야함 (table에 미설정하고 td 설정하면 안됨!) */

.cyEditor, .cyEditor div {line-height:26px}
.cyEditor table {width:100%;border-collapse:collapse;border:1px #000000 solid;}
.cyEditor td {border:1px #000000 solid;padding:10px 5px 10px 5px;}	/*테이블 생성시 공간확보를 위해서 td안에 &nbsp;를 넣기 싫으면 => padding값을 줘야함 상하높이는 좀더 높이기 위해서 10px로 한것임*/
.cyEditor td:empty::before {content:"#";color:#FFFFFF;}					/* content속성은 html 은 적용이 안되기에 content="&nbsp;"를 입력하면 &nbsp;값이 그대로 나온다. => 그래서 "#"만 입력하고 폰트컬러를 흰색(#FFFFFF)으로 한것임 */
.cyEditorFirstBackgroundColor tr:nth-child(1) {background-color:#E7E3E7;}	/* cyEditorFirstBackgroundColor 는 첫행, 첫열 동시에 하기 위함 */
.cyEditorFirstBackgroundColor td:nth-child(1) {background-color:#E7E3E7;}
.cyEditorRowFirstBackgroundColor tr:nth-child(1) {background-color:#E7E3E7;}	/* cyEditorFirstBackgroundColor 첫행만 */
.cyEditorColFirstBackgroundColor td:nth-child(1) {background-color:#E7E3E7;}	/* cyEditorFirstBackgroundColor 첫열만 */
[contenteditable="true"]:empty::before {content:attr(placeholder);color:#CFD4D9;}	/*div는 placeholder가 적용되지 않아 다른방법을 사용함 => :empty (내용이 없을때), ::before (해당 요소의 앞에) => cotent를 입력하는데 => 내용은 placeholder에서 설정한 내용임*/


.cyBtnWeek {background-color:#D7DEE0;}
.cyBtnWeekY {background-color:#007AFE; background-image:url(/images/imgCheck_22.png);background-size:8px 8px;background-repeat: no-repeat;background-position: 5px 3px;}

/* 숫자가 높아질 수록 진해짐 (1:보통, 2:진함, 3:강함) */
.cyBlack {color:#000000;}	/* 에디터의 색깔 변경하는 것 때문에 있어야함 */
.cyRed {color:#FF0000;}
.cyYellow {color:#FFEB00;}
.cyOrange {color:#FF6300;}
.cyPurple {color:#D600D9;}
.cyBlue {color:#295DCC;}
.cyBlueGray {color:#7B929C;}
.cyGreen {color:#008000;}
.cyGray1 {color:#888D93;}		
.cyGray2 {color:#5E5E5E;}
.cyBorder1 {border:0px #EFEFEF solid;}
.cyBorder2 {border:0px #EBE9E9 solid;}
.cyBorder3 {border:0px #E5E5E5 solid;}
.cyBorder4 {border:0px #DCDEE2 solid;}
.cyFence1 {border:0px #F9F9F9 solid;}
.cyFence2 {border:0px #F1F2F3 solid;}