@charset "utf-8";
/* itenjoy 220629 */
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,900&display=swap');

/*reset*/
a,
button {
  -webkit-tap-highlight-color: rgba(35, 116, 236, 0.5);
} /* 부트스트랩 터치 이벤트 활성화 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;}
html {height:100vh; }
body {
	/* height:100%; */
	background-color: #eaedef;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color: #2d88c1; text-decoration:none; }
a:active {text-decoration:none;}
img{border:0px;}
/* img, a, label, span{vertical-align:middle; margin-bottom: 0;} */
li {list-style: none;}
table{ /* border-collapse:collapse; */ border-collapse: separate; width:100%; /* table-layout: fixed; */ }
address,caption,cite,code,dfn,em,var,h1,h2,h3,h4,h5,h6 {font-style:normal;font-weight:normal;}
caption,legend,caption *,legend *{position:absolute; left:-10000px; line-height:0; font-size:0;}
fieldset{border:solid 0px black;padding:0;}

body,a,[type=text], [type=password], [type=file], [type=email], [type=number], [type=tel],select,h1, h2, h3, h4, h5, h6, pre,textarea{
font-family:"Roboto"/* ,"Noto Sans KR","nanumGothic","돋움","tahoma" */, sans-serif; font-size:14px; line-height:1.2; color:#666; letter-spacing:-0.05em}

h1,h2,h3,h4,h5,h6 {font-family: 'Noto Sans KR', sans-serif;}

[type=text], [type=password], [type=file], [type=email], [type=number], [type=tel]{padding-left:10px; box-sizing:border-box; vertical-align:middle; border:solid 1px #acacac; background-color:#fff; height:25px; line-height:25px;}
[type=checkbox], [type=radio]{vertical-align:middle;margin:6px 4px 4px 4px;}

textarea {
    resize:none;
    line-height: 1.3;
    padding: 10px !important;
    font-size: 16px;
    border-top: 1px solid #acacac !important;
    box-sizing: border-box;
}

textarea::placeholder {
    font-size: 12px;
    color: #b0b0b0;
}
input::placeholder {
    font-size: 12px;
    color: #b0b0b0;
}

input,
textarea {
	outline:none !important;
	background-color: #fff;
}

input:focus,
select:focus,
option:focus,
textarea:focus,
button:focus {
	outline:none !important;	
}

input:focus,
textarea:focus {
	border: 1px solid #00baeb;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
}
input:read-only {
	color: #9d9d9d;
	border: 1px solid #acacac;
	background-color: #f9f9f9;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
}

label {
	font-weight: normal;
}

button {
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

button:focus {
	outline: 0;
}
button:disabled {
    color: #9d9d9d;
    background-color: #f9f9f9;
    border: 1px solid #dedede;
    cursor: default;
}

/* scrollbar custom */
/*스크롤바 넓이*/
html::-webkit-scrollbar  {width:15px; height: 15px;} 

/*스크롤바 막대 설정*/
html::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.5); /*스크롤바 막대 색상*/
  border-radius:10px;  /*스크롤바 막대 모서리 둥글리기*/
  background-clip: padding-box;
  border: 3px solid transparent;
  opacity : 0.7;
}

html::-webkit-scrollbar-track {
    background-color: transparent; /*스크롤바 트랙 색상*/
}

input[type="file"] {
	height: 41px;
    padding: 4px;
    border-radius: 3px;
    box-sizing: border-box;	
}

/* 라디오버튼 버튼 교체 */
.checks input[type="radio"] { 
	position: absolute; 
	width: 1px; 
	height: 1px; 
	padding: 0; 
	margin: -1px; 
	overflow: hidden; 
	clip:rect(0,0,0,0); 
	border: 0; 
} 
.checks input[type="radio"] + label { 
	display: inline-block; 
	position: relative;
	margin-right: 5px;
	padding-left: 30px; 
	cursor: pointer; 
	-webkit-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
} 
.checks input[type="radio"] + label:before { 
	content: ''; 
	position: absolute; 
	left: 0px;
    top: -2px;
	width: 21px; 
	height: 21px; 
	text-align: center; 
	background: #fafafa; 
	border: 1px solid #cacece; 
	border-radius: 100%; 
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-appearance: radio; /* 아이폰 iOS/사파리 배경 문제 해결 */
} 
.checks input[type="radio"] + label:active:before,
.checks input[type="radio"]:checked + label:active:before { 
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); 
} 
.checks input[type="radio"]:checked + label:before { 
	background: #E9ECEE; 
	border-color: #adb8c0; 
} 
.checks input[type="radio"]:checked + label:after { 
	content: ''; 
	position: absolute; 
	top: 3px; 
	left: 5px; 
	width: 13px; 
	height: 13px; 
	background: #99a1a7; 
	border-radius: 100%; 
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); 
}

/* radio size */
.checks.small input[type="radio"] + label {
  font-size: 12px;
  padding-left: 25px;
}
.checks.small input[type="radio"] + label:before {
    top: -2px;
  width: 17px;
  height: 17px;
}
.checks.small input[type="radio"]:checked + label:after {
    top: 3px;
  width: 9px;
  height: 9px;
}

/* 라디오버튼 버튼 교체 2 */
ul.checkList input[type="radio"] { 
	position: absolute; 
	width: 1px; 
	height: 1px; 
	padding: 0; 
	margin: -1px; 
	overflow: hidden; 
	clip:rect(0,0,0,0); 
	border: 0; 
} 
ul.checkList input[type="radio"] + label {
	position: relative;
	z-index: 20;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 45px; 
	height: 32px;
	margin-right: -1px;
	padding: 0 10px; 
	text-align: center;
	font-size: 12px;
	color: #2d2d2d;
	background: #fafafa; 
	border: 1px solid #929292;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-appearance: radio; /* 아이폰 iOS/사파리 배경 문제 해결 */ 
	-webkit-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
}
ul.checkList input[type="radio"] + label:first-child {
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}
ul.checkList input[type="radio"]:checked + label {
	color: #fff;
	background-color: #5f6270;
    border: 1px solid #5f6271;
}
ul.checkList input[type="radio"]:checked + label .Lblue {
	color: #79e1ff !important;
}
ul.checkList input[type="radio"]:checked + label .red {
	color: #ffa8a8 !important;
}
ul.checkList input[type="radio"] + label.checksWide {
	width: 183px;
}
ul.checkList input[type="radio"] + label span {
	display: flex;
	flex-shrink: 0;
}

/* 체크박스 버튼 교체 */
.checks input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip:rect(0,0,0,0);
   border: 0;
}
.checks input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  /* padding-left: 30px; /* 글자와 체크박스 사이의 간격을 변경 */
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
    content: ' '; 
	display: inline-block; 
	width: 21px; /* 체크박스의 너비를 지정 */ 
	height: 21px; /* 체크박스의 높이를 지정 */ 
	line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */ 
	margin: -2px 5px 0 0; 
	text-align: center; 
	vertical-align: middle; 
	background: #fafafa; 
	border: 1px solid #cacece; 
	border-radius : 3px; 
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-appearance: checkbox; /* 아이폰 iOS/사파리 배경 문제 해결 */
}
.checks input[type="checkbox"] + label:active:before,
.checks input[type="checkbox"]:checked + label:active:before {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 
  inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checks input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */ 
  /* content: '\2714';*/  /* 체크표시 유니코드 사용 */
  content: '\ea28'; /* 체크표시 icomoon 사용 */
  color: #1d82d0;
  /* text-shadow: 1px 1px #fff; */
  background: #fff;
  border-color: #1d82d0;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 
  inset 0px -15px 10px -12px rgba(0,0,0,0.05), 
  inset 15px 10px -12px rgba(255,255,255,0.1);
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}

/* checkbox size */
.checks.small input[type="checkbox"] + label:before {
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 14px;
}

/* checkbox different */
.checks.etrans input[type="checkbox"] + label {
  padding-left: 30px;
}
.checks.etrans input[type="checkbox"] + label:before {
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 0;
  opacity: .6;
  box-shadow: none;
  border-color: #6cc0e5;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.checks.etrans input[type="checkbox"]:checked + label:before {
  position: absolute;
  content: "";
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity:1; 
  background: transparent;
  border-color:transparent #6cc0e5 #6cc0e5 transparent;
  border-top-color:transparent;
  border-left-color:transparent;
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.no-csstransforms .checks.etrans input[type="checkbox"]:checked + label:before {
  /*content:"\2713";*/
  content: "\2714";
  top: 0;
  left: 0;
  width: 21px;
  line-height: 21px;
  color: #6cc0e5;
  text-align: center;
  border: 1px solid #6cc0e5;
}

/* checkbox 버튼 교체 2 */
ul.checkboxList {
    display: flex;
}
ul.checkboxList li {
    display: flex;
    align-items: center;
    margin-right: 5px;
}
ul.checkboxList input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip:rect(0,0,0,0);
   border: 0;
}
ul.checkboxList input[type="checkbox"] + label {
    position: relative;
    display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	min-width: 45px; 
	height: 32px;
	/* margin: 0 3px; */
	padding: 0 15px 0 37px; 
	text-align: center;
	font-size: 12px;
	color: #5d5d5d;
	background: #fafafa; 
	border: 1px solid #aaa;
	border-radius: 5px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
ul.checkboxList input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
	position: absolute;
	top: 0;
	left: 0;
    content: ' ';
	display: inline-flex;
	justify-content: center;
	width: 30px; /* 체크박스의 너비를 지정 */
	height:30px; /* 체크박스의 높이를 지정 */
	line-height: 30px; /* 세로정렬을 위해 높이값과 일치 */
	/* margin: -2px 5px 0 0; */
	text-align: center;
	/* vertical-align: middle; */
	background: #fafafa;
	/* border: 1px solid #cacece; */
	border-right: 1px solid #aaa;
	border-radius : 5px 0 0 5px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05),
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-appearance: checkbox; /* 아이폰 iOS/사파리 배경 문제 해결 */
}
ul.checkboxList input[type="checkbox"] + label:active:before,
ul.checkboxList input[type="checkbox"]:checked + label:active:before {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05),
  inset 0px 1px 3px rgba(0,0,0,0.1);
}

ul.checkboxList input[type="checkbox"]:checked + label {
    color: #1d82d0;
    background-color: #f3faff;
	border-color: #1d82d0;	
}
ul.checkboxList input[type="checkbox"]:checked + label span {
	color: #1273d7; 	
}

ul.checkboxList input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */
  /* content: '\2714';*/  /* 체크표시 유니코드 사용 */
  content: '\ea28'; /* 체크표시 icomoon 사용 */
  font-size: 18px;
  color: #1d82d0;
  /* text-shadow: 1px 1px #fff; */
  background: #fff;
  border-color: #1d82d0;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05),
  inset 0px -15px 10px -12px rgba(0,0,0,0.05),
  inset 15px 10px -12px rgba(255,255,255,0.1);
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}
ul.checkboxList input[type="checkbox"] + label span {
	display: flex;
	flex-shrink: 0;
}

/* checkbox click */
.checks.clicks input[type="checkbox"] + label {
    position: relative;
    z-index: 20;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin: 0 3px;
    padding: 3px 2px 0 0;
    text-align: center;
    background: #fafafa;
    border: 1px solid #d3d3d3;
	border-radius: 50%;
    box-shadow: 0px 1px 2px rgb(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgb(0, 0, 0, 0.05);
    -webkit-appearance: checkbox;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    box-sizing: border-box;
	cursor: pointer;
}

.checks.clicks input[type="checkbox"]:checked + label {
    color: #fff;
    background: #00baeb;
    border: none;
    box-sizing: border-box;
}
.checks.clicks input[type="checkbox"] + label:before, 
.checks.clicks input[type="checkbox"]:checked + label:before {
	width: 0;
	height: 0;
	margin: 0;
	background-color: transparent;
	border: none;
	content: "";
}

ul.checkList {
	display: inline-flex;
	margin: 0 5px;
}
ul.checkList li {
	position: relative;
	display: inline-flex;
	align-items: center;
}

ul.checkList li:first-child input[type="radio"] + label {
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}

ul.checkList li:last-child input[type="radio"] + label {
	border-top-right-radius: 32px;
	border-bottom-right-radius: 32px;
}

ul.columnList {
    flex-direction: column;
}
ul.columnList li {
    margin: 3px 0;
}
ul.columnList li input[type="radio"] + label {
    padding: 0 20px;
    border-radius: 42px !important;
}

/*토글 스위치 적용 */
.switcher {
	position:relative;
	width:42px;
	height:18;
	margin-left: 5px;
	border-radius:32px;
}
.switcher input {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 42px;
	height: 18px;
	margin: 0;
	border-radius: 32px;
	background-color: #3e82e1;
	border:1px solid #fff;
}
.switcher input:before, .switcher input:after {
	z-index: 2;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
/*토클 바 (head)*/
.switcher label {
	z-index:1;
	position:absolute;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius:24px;
	background-color: #fff;
}
/*토글 선택 활성화시*/
.switcher input:checked:before {
	position: absolute;
	z-index: 0;
	top: 8px;
	left: 0;
	width: 42px;
	height: 18px;
	border-radius: 32px;
	background-color: #00c0ff;
	content: "";
}
/*토글바가 좌측으로 이동시*/
.switcher input:checked + label {
	left: 2px;
	right: 0;
	-webkit-transition: left 0.5s, right 0.4s 0.2s;
	-moz-transition: left 0.5s, right 0.4s 0.2s;
	-ms-transition: left 0.5s, right 0.4s 0.2s;
	-o-transition: left 0.5s, right 0.4s 0.2s;
	transition: left 0.5s, right 0.4s 0.2s;
}
/*토글 선택 활성화시*/
.switcher input:not(:checked):after {
	position: absolute;
	z-index: 0;
	top: 8px;
	left: 0;
	width: 42px;
	height: 18px;
	border-radius: 32px;
	background-color: #acacac;
	content: "";
}
.customerMypage .switcher input:not(:checked):after {
	background-color: #34c9e9;
}
/*토글바가 우측 이동시*/
.switcher input:not(:checked) + label {
	left: 26px;
	right: 0;
	-webkit-transition: left 0.4s 0.2s, right 0.5s;
	-moz-transition:left 0.4s 0.2s, right 0.5s;
	-ms-transition:left 0.4s 0.2s, right 0.5s;
	-o-transition:left 0.4s 0.2s, right 0.5s;
	transition:left 0.4s 0.2s, right 0.5s;
}

/* selectBox */
.selectBox {
  position: relative;
  display: inline-flex;
  min-width: 40px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #aaa;
}
.selectBox .select {
  	position: relative;
  	z-index: 3; /* select가 위로 올라와야 함 */
  	width: inherit;
  	height: inherit;
  	padding: 0 30px 0 5px;
	font-size: 13px;
  	background: transparent;
  	box-shadow: 0px 1px 2px rgb(0,0,0,0.15), 
                inset 0px -15px 10px -12px rgb(0,0,0,0.15);
  	border: 0 none;
  	outline: 0 none;
  	-webkit-appearance: none;  /* 네이티브 외형 감추기 */
  	-moz-appearance: none;
  	appearance: none;
}
.selectBox .select option {
  	color: #2d2d2d;
  	padding: 3px 0;
  	font-size: 13px;
}
.selectBox .icoArrow {
  	position: absolute; 
	z-index: 1;
  	top: 8px; 
  	right: 0; 
	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 25px; 
  	height: 15px;
  	font-size: 10px;
  	border-left: 1px solid #aaa;
}
.selectBox .icoArrow span {
	display: block;
	text-indent: -9999px;
}
.selectBox .icoArrow:before {
    position: absolute;
    z-index: 1;
    top: -1px;
    left: 0;
    display: flex;
	justify-content: center;
	align-items: center;
    width: 23px;
    height: 19px;
    font-size: 10px;
    color: #2d2d2d;
    content: "\e90c";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    transition: .3s; /* 부드럽게 회전 */
}

/*
.selectBox .select:focus + .icoArrow:before {
    top: -2px;
  	transform: rotate(180deg);
}
*/

.selectBox .icoArrow.on:before {
	top: -2px;
	transform: rotate(180deg);	
}

/* 레이어 표시 */
.hideLayer {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    min-height: 32px;
    line-height: 1.5;
    padding: 5px 10px;
    font-size: 15px;
    color: #5d5d5d;
    font-weight: normal !important;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 0 0 7px 7px rgba(0,0,0,0.05);
    box-sizing: border-box;
    transform: translate(0, 32px);
    font-family: 'Roboto', sans-serif;
    display: none;
}
.layerCheckIcon {
    position: relative;
    display: flex;
    width: 24px;
    height: 24px;
    margin: 0 5px;
    cursor: pointer;
}
.layerCheckIcon:before {
    position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 28px;
	font-size: 24px;
	color: #000;
	content:"\e93c";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* animation: linear 1.2s infinite 0s hideLayerBox; */ 
}
@keyframes hideLayerBox {
    0%   {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 1;}
}
.layerCheckIcon span {
    display: block;
    text-indent: -99999px;
}
.layerCheck {
    cursor: pointer;
}
.layerCheck:hover .hideLayer {
    display: block;
} 

/* 버튼 */
.btnBox {
	position: relative;
    font-size: 12px;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 32px;
    padding: 0 10px;
    color: #666;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 32px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.btnDark {
    color: #fff;
    background-color: #353946;
    border: none;
}
.btnBlue {
    color: #fff;
    background-color: #27b1f1;
    border: none;   
}

.btnRound {
    padding: 0 20px;
    border-radius: 72px;
}
.btnSquare {
    padding: 0 15px;
    border-radius: 5px;
}

a.btnMore {
	position:relative;
	padding:2px 5px;
	font-size:12px;
	color:#fff;
	background-color:#e36204;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}

/* 텍스트 색상 */
.blue { color:#004c99 !important;}
.Lblue { color:#639bd5 !important; }
.red { color:#ff3000 !important;}
.Lyellow { color:#ffeb00 !important; }
.yellow { color:#fed030 !important; }
.Dyellow { color:#997300 !important; }
.green { color:#14972d !important; }
.Lgreen { color:#f2fff4 !important; }
.black { color:#000 !important; }
.perple { color: #b10be1 !important; }
.Lpink { color:#ffd0dc !important; }
.orange { color:#ff7614 !important; }
.Lorange { color: #d28500 !important; }
.white { color:#fff !important; }
.Lgrey { color:#9d9d9d !important; }
.grey { color:#7a7a7a !important; }
.Dgrey { color:#575757 !important; }

/* 링크 색상 */
a.blue { color:#004c99 !important;}
a.Lblue { color:#007eff !important; }
a.red { color:#ff3000 !important;}
a.yellow { color:#fed030 !important; }
a.Dyellow { color:#997300 !important;; }
a.green { color:#14972d !important; }
a.black { color:#000 !important; }
a.white { color:#fff !important; }

/* 백그라운드 색상 */
.BLred { background-color:#ffebeb !important; }
.Bblue { background-color:#007eff !important; }
.BLblue { background-color:#eaf4ff !important; }
.BLgrey { background-color:#f9f9f9 !important; }
.Byellow { background-color:#ffe935 !important; }
.BLyellow { background-color:#fff6aa !important; }
.BLyellow2 { background-color:#fffde8 !important; }
.BLgreen { background-color:#fafff3 !important; }
.Bwhite { background-color:#fff !important; }

/* 텍스트 */
.FS11 { font-size:11px !important; }
.FS12 { font-size:12px !important; }
.FS14 { font-size:14px !important; }
.FS16 { font-size:16px !important; }
.FS18 { font-size:18px !important; }
.FS20 { font-size:20px !important; }
.FS24 { font-size:24px !important; }
.FS28 { font-size:28px !important; }
.FS32 { font-size:32px !important; }
.FS42 { font-size:42px !important; }
.FS52 { font-size:52px !important; }
.B { font-weight:bold; }
.FWN { font-weight:normal; }
.TDUL { text-decoration:underline; text-underline-position: under; }
.FFNS { font-family: 'Noto Sans KR'; }

/* 레이아웃 */
.TAL { text-align:left !important; }
.TAC { text-align:center !important; }
.TAR { text-align:right !important; }
.VAT { vertical-align:top !important; }
.VAM { vertical-align:middle !important; }
.DF { display:flex !important; }
.DIF { display:inline-flex !important; }
.JCFS {justify-content: flex-start !important; }
.JCFC {justify-content: center !important; }
.JCFE {justify-content: flex-end !important; }
.AIFS {align-items: flex-start !important; }
.AIC {align-items: center !important; }
.AIB {align-items: baseline !important; }
.AIFE {align-items: flex-end !important; }
.FDC {flex-direction: column !important; }
.FDR {flex-direction: row !important; }
.FWW {flex-wrap: wrap !important; }
.FG1 {flex-grow: 1 !important; }
.FG0 {flex-grow: 0 !important; }
.FS1 {flex-shrink: 1 !important; }
.FS0 {flex-shrink: 0 !important; }
.MLA {margin-left: auto !important; }
.MTA {margin-top: auto !important; }
.DB { display:block !important; }
.DIB { display:inline-block !important; }
.FL { float:left !important; }
.FR { float:right !important; }
.PR {position: relative; }

/* 크기 */
.W10 { width:10% !important; }
.W15 { width:15% !important; }
.W20 { width:20% !important; }
.W25 { width:25% !important; }
.W30 { width:30% !important; }
.W35 { width:35% !important; }
.W40 { width:40% !important; }
.W45 { width:45% !important; }
.W50 { width:50% !important; }
.W60 { width:60% !important; }
.W70 { width:70% !important; }
.W80 { width:80% !important; }
.W90 { width:90% !important; }
.W100 { width:100% !important; }
.W40P { width:  40px !important; }
.W50P { width:  50px !important; }
.W60P { width:  60px !important; }
.W80P { width:  80px !important; }
.W100P { width:  100px !important; }
.W110P { width:  110px !important; }
.W120P { width:  120px !important; }
.W130P { width:  130px !important; }
.W140P { width:  140px !important; }
.W150P { width:  150px !important; }
.W200P { width:  200px !important; }
.W250P { width:  250px !important; }
.W300P { width:  300px !important; }
.W400P { width:  400px !important; }
.W500P { width:  500px !important; }
.W680P { width:  680px !important; }

/* 마진 */
.MT0 { margin-top:0 !important; }
.MT2 { margin-top:2px !important; }
.MT5 { margin-top:5px !important; }
.MT8 { margin-top:8px !important; }
.MT10 { margin-top:10px !important; }
.MT20 { margin-top:20px !important; }
.MT30  { margin-top:30px !important; }
.MT40  { margin-top:40px !important; }
.MT50 { margin-top:50px !important; }
.MTB5 { margin-top:5px !important; margin-bottom: 5px !important; }
.MTB10 { margin-top:10px !important; margin-bottom: 10px !important; }
.MR5 { margin-right:5px !important; }
.MR8 { margin-right:8px !important; }
.MR10 { margin-right:10px !important; }
.MR15 { margin-right:15px !important; }
.MR20 { margin-right:20px !important; }
.MR30  { margin-right:30px !important; }
.MB-5 { margin-bottom:-5px !important; }
.MB2 { margin-bottom:2px !important; }
.MB5 { margin-bottom:5px !important; }
.MB10 { margin-bottom: 10px !important; }
.MB20 { margin-bottom: 20px !important; }
.MB30 { margin-bottom: 30px !important; }
.MB40 { margin-bottom: 40px !important; }
.MB50 { margin-bottom: 50px !important; }
.MB70 { margin-bottom: 70px !important; }
.MB80 { margin-bottom: 80px !important; }
.MB100 { margin-bottom: 100px !important; }
.ML5 { margin-left:5px !important; }
.ML10 { margin-left:10px !important; }
.ML15 { margin-left:15px !important; }
.ML20 { margin-left:20px !important; }
.ML30  { margin-left:30px !important; }
.MRL5 { margin-right:5px !important; margin-left:5px !important; }
.MRL10 { margin-right:10px !important; margin-left:10px !important; }
.MRL20 { margin-right:20px !important; margin-left:20px !important; }
.MRL30 { margin-right:30px !important; margin-left:30px !important; }
.MRL40 { margin-right:40px !important; margin-left:40px !important; }
.M5 { margin:5px !important; }
.M10 { margin:10px !important; }
.M20 { margin:20px !important; }
.M30 { margin:30px !important; }
.M40 { margin:40px !important; }
.M50 { margin:50px !important; }

/* 패딩 */
.PT5 { padding-top:5px !important; }
.PT10 { padding-top:10px !important; }
.PT20 { padding-top:20px !important; }
.PT30  { padding-top:30px !important; }
.PT40  { padding-top:40px !important; }
.PT50 { padding-top:50px !important; }
.PR5 { padding-right:5px !important; }
.PR10 { padding-right:10px !important; }
.PR20 { padding-right:20px !important; }
.PR30  { padding-right:30px !important; }
.PB5 { padding-bottom:5px !important; }
.PB10 { padding-bottom: 10px !important; }
.PB20 { padding-bottom: 20px !important; }
.PB30 { padding-bottom: 30px !important; }
.PB40 { padding-bottom: 40px !important; }
.PB50 { padding-bottom: 50px !important; }
.PL5 { padding-left:5px !important; }
.PL10 { padding-left:10px !important; }
.PL20 { padding-left:20px !important; }
.PL30  { padding-left:30px !important; }
.PRL5 { padding-right:5px !important; padding-left:5px !important; }
.PRL10 { padding-right:10px !important; padding-left:10px !important; }
.PRL20 { padding-right:20px !important; padding-left:20px !important; }
.PRL30 { padding-right:30px !important; padding-left:30px !important; }
.P5 { padding:5px !important; }
.P10 { padding:10px !important; }
.P20 { padding:20px !important; }
.P30 { padding:30px !important; }
.P40 { padding:40px !important; }
.P50 { padding:50px !important; }

.DPN {display:none;}

.textInput {
    position: relative;
    padding: 0 7px;
    height: 32px;
    border-radius: 3px;
}
.textAreaInput {
    position: relative;
    padding: 7px;
    border-radius: 3px;    
}