@charset "utf-8";

/*************************************************************************************************
	[Reset]

	1. 모바일에서 하이라이트 삭제 (-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;outline:0;)
	2. IOS 기기의 폰트 속성 삭제(-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;)
	3. 요소의 뒷면을 볼 수 있어야하는지 여부를 정의 (-webkit-backface-visibility:hidden;backface-visibility:hidden;)
	4. 요소의 기본 스타일 없애기 (appearance:none;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;)
	5. 폼 및 버튼 요소의 포커스 라인 삭제 : 접근성 작업 시 해당 부분 주석 필요 (outline:0;)
*************************************************************************************************/
 /* html {overflow-y:scroll;} 크롬 브라우저에서 스크롤이 삭제되는 현상 방지 */
html,body {height:100%;}
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,hr,figure,menu,p,pre,fieldset,legend,button {margin:0;padding:0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,th,td,header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption,form,fieldset,legend,select,input,textarea,span,em,strong,a,button {-webkit-word-break:keep-all;word-break:keep-all;word-wrap:break-word;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;}
address,cite,em,dfn,i {font-style:inherit;}
h1,h2,h3,h4,h5,h6,th,strong,b {font-size:inherit;font-weight:inherit;}
select,button,input,textarea {font-family:inherit;font-size:inherit;vertical-align:middle;}
legend,fieldset {border:none;}
input,button,table,textarea,select,option {font-weight:inherit;}
textarea {resize:none;}
table {border-collapse:collapse;border-spacing:0;width:100%;table-layout:fixed;}
caption,legend {width:0;height:0;font-size:0;line-height:0;visibility:hidden;}
ul,ol,li {list-style:none;}

img {display:block;border:none;width:100%;}
a,button {color:inherit;appearance:none;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;}
button {background:transparent;border:none;cursor:pointer;outline:0;}
a,a:link,a:visited,a:active {color:inherit;text-decoration:none;}
a:hover {color:inherit;}

/*************************************************************************************************
	기본 컴포넌트 정의
*************************************************************************************************/
.clfix:after, [data-float-clear="clfix"]:after {content:"";display:block;clear:both;visibility:hidden;height:0;} /* float 해제 적용 */
.ellipsis, [data-text-style="ellipsis"] {display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* 글씨 말줄임 정의 */
.ellipsisRow, [data-text-style="ellipsisRow"] {display:block;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;overflow:hidden;height:48px;line-height:24px;} /* 2줄 말줄임 (폰트사이즈가 12로 가정할 때) */
.ellipsisRow03, [data-text-style="ellipsisRow03"] {display:block;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-wrap:break-word;overflow:hidden;} /* 3줄 말줄임 */
.essential:after, [data-text-style="essential"]:after {content:"*";margin-left:4px;color:#a50034;vertical-align:middle;} /* 필수입력 항목 (required) */
.blind {position:absolute;top:0;left:0;overflow:hidden;width:0;height:0;font-size:0;line-height:0;} /* 영역 숨김 정의 */

.inlind {display:inline;}
.inlindBlock {display:inline-block;}
.block {display:block;}
[data-font-weight="800"] {font-weight:800;}
[data-font-weight="700"] {font-weight:700;}
[data-font-weight="600"] {font-weight:600;}
[data-font-weight="500"] {font-weight:500;}
[data-font-weight="400"] {font-weight:400;}
[data-font-weight="300"] {font-weight:300;}
[data-offset="left"] {float:left;}
[data-offset="right"] {float:right;}
[data-offset="right"] + * {clear:both;}
[data-position-type="absolute"] {position:absolute;}
[data-position-offset="top"] {top:0;}
[data-position-offset="bottom"] {bottom:0;}
[data-position-offset="left"] {left:0;}
[data-position-offset="right"] {right:0;}
/*************************************************************************************************
	input 스타일 정의
*************************************************************************************************/
input:focus, textarea:focus {outline:0;}
input[disabled], .disabled, input[disabled]:focus, .disabled:focus, input[disabled]:hover, .disabled:hover {opacity:1;background-color:#e6e6e8;border:1px solid #c6c8ca;}
input[readonly], .readonly, input[readonly]:focus, .readonly:focus, input[readonly]:hover, .readonly:hover {background-color:#F9F9FA;border-color:#e0e0e0;}
input[type=text]::-ms-clear, input[type=text]::-ms-reveal, input[type=password]::-ms-clear, input[type=password]::-ms-reveal {display:none;height:0;width:0;} /* clear button 삭제 */

/* placeholder css 적용 */
::-webkit-input-placeholder {color:#b8b8b8;} /* Chrome/Opera/Safari */
::-moz-placeholder {color:#b8b8b8;opacity:1;} /* Firefox 19+ */
:-moz-placeholder {color:#b8b8b8;opacity:1;} /* Firefox 18- */
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#b8b8b8;} /* IE 10+ */
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:focus:-ms-input-placeholder {color:transparent;}
input:focus::-ms-input-placeholder {color:transparent;}
textarea:focus::-webkit-input-placeholder {color:transparent;}
textarea:focus::-moz-placeholder {color:transparent;}
textarea:focus:-ms-input-placeholder {color:transparent;}
textarea:focus::-ms-input-placeholder {color:transparent;}

/* select */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;outline:0;}/* 선택박스 기본 스타일 없애기 */
select::-ms-expand {display:none;}/* ie에서 기본 스타일 없애줌 */

/* input spin */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}
input[type="number"] {-moz-appearance:textfield;}
input[type="number"]:hover, input[type="number"]:focus {-moz-appearance:number-input;}

/* input 자동완성
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {-webkit-box-shadow:0 0 0 1000px white inset;transition:background-color 5000s ease-in-auto 0s;}
 */
/*************************************************************************************************
	[공통] 스크롤 스타일 정의
	* 스크롤바 보이지 않게 하기
	  -  특정 div안에 -ms-overflow-style: none;
	  - ::-webkit-scrollbar {display:none;}
*************************************************************************************************/
/* scroll */
::-webkit-scrollbar {height:8px;width:8px;}
::-webkit-scrollbar-track {background-color:#ebebeb;border-radius:4px;}
::-webkit-scrollbar-thumb {background-color:#6b6b6b;border-radius:4px;}
::webkit-scrollbar-track-piece {}
::webkit-scrollbar-corner {}
::webkit-scrollbar-resizer {}
::-webkit-scrollbar-button {display:none;}

/***************************************************************************
	[기기별 모바일 해상도 정의]
	- 갤럭시 S7 Edge 이하 : 360 x 640
	- 갤럭시 S8 : 360 x 740
	- 아이폰 5 : 320 x 568
	- 아이폰 6~ 8 : 375 x 667
	- 아이폰 6~ 8 plus : 414 x 736
	- 아이폰 XR, XS Max : 414 x 896
	- 아이폰 XS : 375 x 812
***************************************************************************/
@media screen and (max-width:900px) {
/* 컴포넌트 정의 */
.ellipsisRow, [data-text-style="ellipsisRow"] {height:11.11vw;line-height:5.55vw;} /* 2줄 말줄임 (폰트사이즈가 12로 가정할 때) */
.ellipsisRow03, [data-text-style="ellipsisRow03"] {height:16.66vw;line-height:5.55vw;} /* 3줄 말줄임 (폰트사이즈가 12로 가정할 때) */
.essential:after, [data-text-style="essential"]:after {margin-left:1.11vw;} /* 필수입력 항목 */
}