@charset 'utf-8';
/* 흰색 */
/* 파란색 (#1A85FF) */
/* 회색 (#757575) */
:root {
  --icon-color: #000;
}
span[class^='fa-'] {
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
}
span[class^='fa-']::before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url(../images/icon_ui.svg);
  background-repeat: no-repeat;
  background-position-y: -5px;
  background-size: 300px auto;
}
/* 흰색 */
.white::before {
  filter: invert(1);
  -webkit-filter: invert(1);
}
/* 파란색 (#1A85FF) */
.blue::before {
  filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(102%) contrast(105%);
  -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(102%) contrast(105%);
}
/* 회색 (#757575) */
.gray::before {
  filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(1068%) hue-rotate(185deg) brightness(88%) contrast(84%);
  -webkit-filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(1068%) hue-rotate(185deg) brightness(88%) contrast(84%);
}
.fa-chevron {
  width: 20px;
  height: 20px;
}
.fa-chevron::before {
  background-position-x: -275px;
}
.fa-chevron.left::before {
  transform: rotate(-180deg);
}
.fa-chevron.right::before {
  transform: rotate(0deg);
}
.fa-chevron.top::before {
  transform: rotate(-90deg);
}
.fa-chevron.bottom::before {
  transform: rotate(90deg);
}
.fa-chevron-double {
  width: 20px;
  height: 20px;
}
.fa-chevron-double:before {
  background-position-x: -5px !important;
  background-position-y: -35px !important;
}
.fa-chevron-double.left::before {
  transform: rotate(-180deg);
}
.fa-chevron-double.right::before {
  transform: rotate(0deg);
}
.fa-chevron-double.top::before {
  transform: rotate(-90deg);
}
.fa-chevron-double.bottom::before {
  transform: rotate(90deg);
}
.fa-close {
  width: 20px;
  height: 20px;
}
.fa-close:before {
  background-position-x: -65px !important;
  background-position-y: -35px !important;
}
.fa-layout-list {
  width: 20px;
  height: 20px;
}
.fa-layout-list:before {
  background-position-x: -35px;
}
.fa-layout-grid {
  width: 20px;
  height: 20px;
}
.fa-layout-grid:before {
  background-position-x: -65px;
}
.fa-eye {
  width: 20px;
  height: 20px;
}
.fa-eye:before {
  background-position-x: -185px;
}
.fa-more {
  width: 20px;
  height: 20px;
}
.fa-more:before {
  background-position-x: -240px;
}
.fa-info {
  width: 20px;
  height: 20px;
}
.fa-info:before {
  background-position-x: -215px;
}
.fa-undo {
  width: 30px !important;
  height: 30px !important;
}
.fa-undo:before {
  background-position-x: -30px !important;
  background-position-y: -30px !important;
}
.fa-open {
  width: 20px;
  height: 20px;
}
.fa-open:before {
  background-position-x: -155px;
}
.fa-search {
  width: 20px;
  height: 20px;
}
.fa-search:before {
  background-position-x: -95px;
}
.fa-pen {
  width: 20px;
  height: 20px;
}
.fa-pen:before {
  background-position-x: -35px !important;
  background-position-y: -35px !important;
}
.fa-q {
  width: 20px;
  height: 20px;
}
.fa-q:before {
  background-position-x: -125px !important;
  background-position-y: -35px !important;
}
.fa-del {
  width: 20px;
  height: 20px;
}
.fa-del:before {
  background-position-x: -155px !important;
  background-position-y: -35px !important;
}
.fa-copy {
  width: 20px;
  height: 20px;
}
.fa-copy:before {
  background-position-x: -185px !important;
  background-position-y: -35px !important;
}
.fa-write {
  width: 30px !important;
  height: 30px !important;
}
.fa-write:before {
  width: 30px;
  height: 30px;
  background-position-y: 0px !important;
  background-position-x: -120px;
}
.fa-page-new {
  width: 30px !important;
  height: 30px !important;
}
.fa-page-new:before {
  width: 30px;
  height: 30px;
  background-position-x: -210px !important;
  background-position-y: -30px !important;
}
.fa-del-sm {
  width: 20px;
  height: 20px;
}
.fa-del-sm:before {
  background-position-x: -125px !important;
  background-position-y: -65px !important;
}
.fa-add {
  width: 20px;
  height: 20px;
}
.fa-add:before {
  background-position-x: -95px !important;
  background-position-y: -65px !important;
}
.fa-upload {
  width: 20px;
  height: 20px;
}
.fa-upload:before {
  background-position-x: -275px !important;
  background-position-y: -35px !important;
}
.fa-download {
  width: 20px;
  height: 20px;
}
.fa-download:before {
  background-position-x: -275px !important;
  background-position-y: -65px !important;
}
span[class^='fa-msg'] {
  display: inline-block;
  box-sizing: border-box;
  width: 74px;
  height: 74px;
}
span[class^='fa-msg']::before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-size: contain;
}
.fa-msg-save::before {
  background-image: url(../images/msg_save.svg) !important;
}
.fa-msg-warning::before {
  background-image: url(../images/msg_warning.svg) !important;
}
.fa-msg-delete::before {
  background-image: url(../images/msg_delete.svg) !important;
}
.fa-msg-info::before {
  background-image: url(../images/msg_info.svg) !important;
}
/**Editor*/
.fa-menu {
  width: 30px !important;
  height: 30px !important;
}
.fa-menu:before {
  width: 30px;
  height: 30px;
  background-position-x: -90px;
  background-position-y: -150px !important;
}
.fa-home {
  width: 30px !important;
  height: 30px !important;
}
.fa-home:before {
  width: 30px;
  height: 30px;
  background-position-x: -210px;
  background-position-y: -150px !important;
}
.fa-gear {
  width: 30px !important;
  height: 30px !important;
}
.fa-gear:before {
  width: 30px;
  height: 30px;
  background-position-x: -240px;
  background-position-y: -150px !important;
}
.fa-change-layout {
  width: 30px !important;
  height: 30px !important;
}
.fa-change-layout:before {
  width: 30px;
  height: 30px;
  background-position-x: -270px;
  background-position-y: -150px !important;
}
.fa-info-soild {
  width: 30px !important;
  height: 30px !important;
}
.fa-info-soild:before {
  width: 30px;
  height: 30px;
  background-position-x: -150px;
  background-position-y: -150px !important;
}
.fa-align-left {
  width: 30px !important;
  height: 30px !important;
}
.fa-align-left:before {
  width: 30px;
  height: 30px;
  background-position-x: 0px;
  background-position-y: -90px !important;
}
.fa-align-center {
  width: 30px !important;
  height: 30px !important;
}
.fa-align-center:before {
  width: 30px;
  height: 30px;
  background-position-x: -30px;
  background-position-y: -90px !important;
}
.fa-align-right {
  width: 30px !important;
  height: 30px !important;
}
.fa-align-right:before {
  width: 30px;
  height: 30px;
  background-position-x: -60px;
  background-position-y: -90px !important;
}
.fa-el-header {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-header:before {
  width: 30px;
  height: 30px;
  background-position-x: 0px;
  background-position-y: -90px !important;
}
.fa-el-header-title {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-header-title:before {
  width: 30px;
  height: 30px;
  background-position-x: -30px;
  background-position-y: -90px !important;
}
.fa-el-header-logo {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-header-logo:before {
  width: 30px;
  height: 30px;
  background-position-x: -60px;
  background-position-y: -90px !important;
}
.fa-el-btn {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-btn:before {
  width: 30px;
  height: 30px;
  background-position-x: -90px;
  background-position-y: -90px !important;
}
.fa-el-btn-1 {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-btn-1:before {
  width: 30px;
  height: 30px;
  background-position-x: -120px;
  background-position-y: -90px !important;
}
.fa-el-btn-2 {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-btn-2:before {
  width: 30px;
  height: 30px;
  background-position-x: -150px;
  background-position-y: -90px !important;
}
.fa-el-btn-3 {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-btn-3:before {
  width: 30px;
  height: 30px;
  background-position-x: -180px;
  background-position-y: -90px !important;
}
.fa-el-btn-m1 {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-btn-m1:before {
  width: 30px;
  height: 30px;
  background-position-x: -210px;
  background-position-y: -90px !important;
}
.fa-el-btn-m2 {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-btn-m2:before {
  width: 30px;
  height: 30px;
  background-position-x: -240px;
  background-position-y: -90px !important;
}
.fa-el-txt {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-txt:before {
  width: 30px;
  height: 30px;
  background-position-x: -270px;
  background-position-y: -90px !important;
}
.fa-el-txt-info {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-txt-info:before {
  width: 30px;
  height: 30px;
  background-position-x: 0px;
  background-position-y: -120px !important;
}
.fa-el-txt-title {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-txt-title:before {
  width: 30px;
  height: 30px;
  background-position-x: -30px;
  background-position-y: -120px !important;
}
.fa-el-txt-contents {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-txt-contents:before {
  width: 30px;
  height: 30px;
  background-position-x: -60px;
  background-position-y: -120px !important;
}
.fa-el-img {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-img:before {
  width: 30px;
  height: 30px;
  background-position-x: -90px;
  background-position-y: -120px !important;
}
.fa-el-img-banner {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-img-banner:before {
  width: 30px;
  height: 30px;
  background-position-x: -120px;
  background-position-y: -120px !important;
}
.fa-el-img-icon {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-img-icon:before {
  width: 30px;
  height: 30px;
  background-position-x: -150px;
  background-position-y: -120px !important;
}
.fa-el-footer {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-footer:before {
  width: 30px;
  height: 30px;
  background-position-x: -180px;
  background-position-y: -120px !important;
}
.fa-el-footer-btn {
  width: 30px !important;
  height: 30px !important;
}
.fa-el-footer-btn:before {
  width: 30px;
  height: 30px;
  background-position-x: -210px;
  background-position-y: -120px !important;
}