#logo, .logo {
  mask: url("../image/icon/logo.svg") no-repeat center;
  -webkit-mask: url("../image/icon/logo.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: currentColor;
}

[class*=icon_] {
  padding-left: 1.5em;
  position: relative;
  margin-right: 3px;
  height: 1.2em;
}
[class*=icon_]:not([class*=fs]) {
  font-size: 1em;
}
[class*=icon_]:before {
  content: "";
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.icon_arrow_left:before {
  -webkit-mask-image: url("../image/icon_font/arrow_left.svg");
  mask-image: url("../image/icon_font/arrow_left.svg");
}

.icon_arrow_right:before {
  -webkit-mask-image: url("../image/icon_font/arrow_right.svg");
  mask-image: url("../image/icon_font/arrow_right.svg");
}

.icon_arrow_circle_left:before {
  -webkit-mask-image: url("../image/icon_font/arrow_circle_left.svg");
  mask-image: url("../image/icon_font/arrow_circle_left.svg");
}

.icon_arrow_circle_right:before {
  -webkit-mask-image: url("../image/icon_font/arrow_circle_right.svg");
  mask-image: url("../image/icon_font/arrow_circle_right.svg");
  width: 1.2em;
  height: 1.2em;
  top: 46%;
}

.icon_arrow_bold_down:before {
  -webkit-mask-image: url("../image/icon_font/arrow_bold_down.svg");
  mask-image: url("../image/icon_font/arrow_bold_down.svg");
  width: 1.2em;
  height: 1.2em;
}

.icon_arrow_bold_left:before {
  -webkit-mask-image: url("../image/icon_font/arrow_bold_left.svg");
  mask-image: url("../image/icon_font/arrow_bold_left.svg");
  width: 1.2em;
  height: 1.2em;
}

.icon_arrow_bold_right:before {
  -webkit-mask-image: url("../image/icon_font/arrow_bold_right.svg");
  mask-image: url("../image/icon_font/arrow_bold_right.svg");
  width: 1.2em;
  height: 1.2em;
}

.icon_bag:before {
  -webkit-mask-image: url("../image/icon_font/bag.svg");
  mask-image: url("../image/icon_font/bag.svg");
  top: 39%;
}

.icon_clock:before {
  -webkit-mask-image: url("../image/icon_font/clock.svg");
  mask-image: url("../image/icon_font/clock.svg");
}

.icon_comments:before {
  -webkit-mask-image: url("../image/icon_font/comments.svg");
  mask-image: url("../image/icon_font/comments.svg");
}

.icon_company:before {
  -webkit-mask-image: url("../image/icon_font/company.svg");
  mask-image: url("../image/icon_font/company.svg");
  top: 40%;
}

.icon_dashboard:before {
  -webkit-mask-image: url("../image/icon_font/dashboard.svg");
  mask-image: url("../image/icon_font/dashboard.svg");
  top: 41%;
}

.icon_documents:before {
  -webkit-mask-image: url("../image/icon_font/documents.svg");
  mask-image: url("../image/icon_font/documents.svg");
  top: 40%;
}

.icon_edit:before {
  -webkit-mask-image: url("../image/icon_font/edit.svg");
  mask-image: url("../image/icon_font/edit.svg");
  top: 40%;
}

.icon_excl_circle:before {
  -webkit-mask-image: url("../image/icon_font/excl_circle.svg");
  mask-image: url("../image/icon_font/excl_circle.svg");
  top: 41%;
  width: 1.25em;
  height: 1.2em;
}

.icon_excl_triangle:before {
  -webkit-mask-image: url("../image/icon_font/excl_triangle.svg");
  mask-image: url("../image/icon_font/excl_triangle.svg");
  width: 1.8em;
  height: 1.8em;
  top: 44%;
}

.icon_external_link:before {
  -webkit-mask-image: url("../image/icon_font/external_link.svg");
  mask-image: url("../image/icon_font/external_link.svg");
}

.icon_error:before {
  -webkit-mask-image: url("../image/icon_font/error.svg");
  mask-image: url("../image/icon_font/error.svg");
}

.icon_folder:before {
  -webkit-mask-image: url("../image/icon_font/folder.svg");
  mask-image: url("../image/icon_font/folder.svg");
  top: 45%;
}

.icon_image_plus:before {
  -webkit-mask-image: url("../image/icon_font/image_plus.svg");
  mask-image: url("../image/icon_font/image_plus.svg");
  top: 42%;
}

.icon_location:before {
  -webkit-mask-image: url("../image/icon_font/location.svg");
  mask-image: url("../image/icon_font/location.svg");
  top: 43%;
}

.icon_lock_open:before {
  -webkit-mask-image: url("../image/icon_font/lock_open.svg");
  mask-image: url("../image/icon_font/lock_open.svg");
  width: 1.2em;
  height: 1.2em;
  top: 47%;
}

.icon_logout:before {
  -webkit-mask-image: url("../image/icon_font/logout.svg");
  mask-image: url("../image/icon_font/logout.svg");
  width: 1.35em;
  height: 1.35em;
}

.icon_search:before {
  -webkit-mask-image: url("../image/icon_font/search.svg");
  mask-image: url("../image/icon_font/search.svg");
  width: 1.35em;
  height: 1.35em;
}

.icon_sort:before {
  -webkit-mask-image: url("../image/icon_font/sort.svg");
  mask-image: url("../image/icon_font/sort.svg");
  width: 1.1em;
  height: 1.1em;
  top: 46%;
}

.icon_sort_asc:before {
  -webkit-mask-image: url("../image/icon_font/sort_asc.svg");
  mask-image: url("../image/icon_font/sort_asc.svg");
  width: 1.1em;
  height: 1.1em;
  top: 46%;
  background: linear-gradient(0, currentColor 50%, rgb(220, 225, 225) 50%);
}

.icon_sort_desc:before {
  -webkit-mask-image: url("../image/icon_font/sort_desc.svg");
  mask-image: url("../image/icon_font/sort_desc.svg");
  width: 1.1em;
  height: 1.1em;
  top: 46%;
  background: linear-gradient(180deg, currentColor 50%, rgb(220, 225, 225) 50%);
}

.icon_star:before {
  -webkit-mask-image: url("../image/icon_font/star.svg");
  mask-image: url("../image/icon_font/star.svg");
  width: 1.35em;
  height: 1.35em;
  top: 40%;
}

.icon_star_fill:before {
  -webkit-mask-image: url("../image/icon_font/star_fill.svg");
  mask-image: url("../image/icon_font/star_fill.svg");
  width: 1.3em;
  height: 1.3em;
  top: 40%;
}

.icon_success:before {
  -webkit-mask-image: url("../image/icon_font/success.svg");
  mask-image: url("../image/icon_font/success.svg");
}

.icon_tools:before {
  -webkit-mask-image: url("../image/icon_font/tools.svg");
  mask-image: url("../image/icon_font/tools.svg");
  width: 1.26em;
  height: 1.26em;
  top: 45%;
}

.icon_train:before {
  -webkit-mask-image: url("../image/icon_font/train.svg");
  mask-image: url("../image/icon_font/train.svg");
}

.icon_trash:before {
  -webkit-mask-image: url("../image/icon_font/trash.svg");
  mask-image: url("../image/icon_font/trash.svg");
  width: 1.26em;
  height: 1.26em;
  top: 42%;
}

.icon_user:before {
  -webkit-mask-image: url("../image/icon_font/user.svg");
  mask-image: url("../image/icon_font/user.svg");
  width: 1.15em;
  height: 1.15em;
  top: 45%;
}

.icon_user_info:before {
  -webkit-mask-image: url("../image/icon_font/user_info.svg");
  mask-image: url("../image/icon_font/user_info.svg");
  width: 1.35em;
  height: 1.35em;
}

.icon_user_settings:before {
  -webkit-mask-image: url("../image/icon_font/user_settings.svg");
  mask-image: url("../image/icon_font/user_settings.svg");
}

.icon_yen:before {
  -webkit-mask-image: url("../image/icon_font/yen.svg");
  mask-image: url("../image/icon_font/yen.svg");
  top: 45%;
}

.ic_bg {
  width: 1.9em;
  height: 1.9em;
  background: rgba(1, 103, 187, 0.2);
  border-radius: 50%;
  position: relative;
  margin-right: 5px;
}
.ic_bg [class*=icon_] {
  color: #0167bb;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-right: 0;
  font-size: 0.9em;
}
.ic_bg [class*=icon_]:before {
  top: 50%;
}