@import url("/assets/fonts/nanum-square/nanumsquare.css");
@import url("/assets/fonts/s-core/s-core.css");
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

div,
p,
span,
a,
li {
  word-break: break-word;
}

.Zebra_DatePicker {
  z-index: 2000 !important;
}

input[readonly] {
  background: #f9f9f9 !important;
}

input:focus {
  outline: none;
}

::selection {
  background: #ee4352;
  text-shadow: none;
  color: #fff;
}

.fsz11 {
  font-size: 11px !important;
}

.fsz15 {
  font-size: 15px !important;
}

.select2-container {
  min-width: 70px;
}

.select2-container--open {
  z-index: 1503;
}

.color-gray {
  color: #999;
}

.score {
  font-family: "s-core" !important;
}

.select2-container--default .select2-selection--single {
  min-width: 70px;
}

.bold {
  font-weight: bold;
}

#loading {
  display: none;
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0) url("/assets/images/ajax_loading.gif") 50% 50% no-repeat;
  background-size: 50px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

button:focus {
  outline: none;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.8) url("http://i.stack.imgur.com/FhHRx.gif") 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading2 {
  overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading2 .modal {
  display: block;
}

.color-red {
  color: #ee4352 !important;
}

.color-blue {
  color: #2c49ee !important;
}

.label-ace {
  padding: 3px 7px;
  background: #ff8027;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  font-size: 11px;
  width: 60px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  line-height: 16px;
}

.label-sales {
  padding: 3px 7px;
  background: #ffe6d4;
  color: #ff8100;
  font-weight: bold;
  border-radius: 4px;
  font-size: 11px;
  width: 60px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  line-height: 16px;
}

.bg-white {
  background: #fff !important;
}

.font-sm {
  font-size: 12px;
}

ul li {
  font-size: 13px;
  line-height: 1.2em;
}

textarea {
  resize: none;
  text-align: left;
  padding: 10px;
  background: #fff;
  font-size: 13px;
  line-height: 20px;
  outline: none;
}

textarea:read-only {
  background: #fafafa !important;
}

.color-white {
  color: #fff !important;
}

.disable-scroll {
  /* disable scrollbar on both x and y axis */
  overflow: hidden;
  /* disable scrollbar on x-axis only */
  overflow-x: hidden;
  /* disable scrollbar on y-axis only */
  overflow-y: hidden;
  /* disable scroll */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* OPTIONAL: none of dom element will be click-able */
  pointer-events: none;
}

.span-file {
  cursor: pointer;
}

.vam {
  vertical-align: middle !important;
}

.relative {
  position: relative;
}

.grayLayer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1500;
}

[class^="modal-"] {
  display: none;
  position: absolute;
  z-index: 1501;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eee;
}

[class^="modal-"] .relative-box {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 50px;
}

[class^="modal-"] .relative-box .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  background: url("/assets/images/common/modal_close.png") center center no-repeat;
  cursor: pointer;
}

[class^="modal-"] .relative-box .close:hover {
  opacity: 0.7;
}

@media print {
  .no-print {
    display: none !important;
  }
}

.form-error.valid {
  margin: 0 !important;
}

.profile-round {
  border-radius: 50%;
}

.sub-color {
  color: #de848c !important;
}

.form-error {
  text-align: left;
  color: #ff5a5f;
  font-size: 13px;
}

.bd-red {
  border-color: #f3cbcc !important;
}

.w30 {
  width: 30% !important;
}

.w33 {
  width: 33.3% !important;
}

.w40 {
  width: 40% !important;
}

.w49 {
  width: 49% !important;
}

.w50 {
  width: 50% !important;
}

.w60 {
  width: 60% !important;
}

.w70 {
  width: 70% !important;
}

.w100 {
  width: 100% !important;
}

.fsz-12 {
  font-size: 12px !important;
}

.fsz-13 {
  font-size: 13px !important;
}

.upper-case {
  text-transform: uppercase;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  font-size: 14px;
}

.select2-results__option[aria-selected] {
  font-size: 14px;
  text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 14px;
}

.select2-results__option {
  font-size: 14px;
}

.pt-10 {
  padding-top: 10px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.pd-10 {
  padding: 10px !important;
}

.pd-20 {
  padding: 20px !important;
}

.pd-30 {
  padding: 30px !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mt-100 {
  margin-top: 100px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.ml-5 {
  margin-left: 5px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.ajax-box {
  margin-bottom: 50px;
}

.display-block {
  display: block !important;
}

button {
  border-radius: 3px;
  transition: 0.3s;
}

button:hover {
  opacity: 0.8;
  cursor: pointer;
}

.button-sm {
  padding: 3px 12px !important;
  font-size: 13px !important;
}

.button-primary {
  background: #d95f6a;
  color: #fff !important;
  text-shadow: none !important;
  text-align: center;
  border: 1px solid #d14a56;
  padding: 10px 20px;
  font-size: 14px;
}

.button-gray {
  background: #f2f2f2;
  color: #666 !important;
  text-shadow: none !important;
  text-align: center;
  border: 1px solid #d5d5d5;
  padding: 10px 20px;
  font-size: 14px;
}

.button-black {
  background: #444;
  color: #fff !important;
  text-shadow: none !important;
  text-align: center;
  border: 1px solid #2f2f2f;
  padding: 10px 20px;
  font-size: 14px;
}

.button-green {
  background: #5cb85c;
  color: #fff !important;
  text-shadow: none !important;
  text-align: center;
  border: 1px solid #47a647;
  padding: 10px 20px;
  font-size: 14px;
}

.button-white {
  background: #fff;
  color: #575757 !important;
  text-shadow: none !important;
  text-align: center;
  border: 1px solid #bdbdbd;
  padding: 10px 20px;
  font-size: 14px;
}

.dt-buttons {
  overflow: hidden;
  text-align: right;
  display: inline-block;
  float: right;
}

.buttons-excel {
  background: #fff;
  color: #575757;
  text-align: center;
  border: 1px solid #bdbdbd;
  padding: 10px 20px;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 10px;
  position: relative;
}

.label-ex {
  padding: 3px 5px 3px !important;
  border-radius: 50% !important;
  font-size: 10px !important;
}

.label {
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}

.label-default {
  background-color: #777;
}

.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #5e5e5e;
}

.label-primary {
  background-color: #337ab7;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #286090;
}

.label-success {
  background-color: #5cb85c;
}

.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}

.label-info {
  background-color: #5bc0de;
}

.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}

.label-warning {
  background-color: #f0ad4e;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}

.label-danger {
  background-color: #d9534f;
  color: #fff !important;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right !important;
}

.tal {
  text-align: left !important;
}

.fll {
  float: left;
}

.flr {
  float: right;
}

.inline-block {
  display: inline-block !important;
}

.ovh {
  overflow: hidden;
}

h1.title {
  font-size: 23px;
  margin-bottom: 35px;
  letter-spacing: 1px;
}

h2.title {
  font-size: 16px;
  margin-bottom: 15px;
}

table.normal {
  width: 100%;
  border-top: 1px solid #999;
}

table.normal th {
  color: #333;
  background: #f5f5f5;
  padding: 12px 20px;
  font-size: 12px;
  line-height: 1.3em;
  vertical-align: middle;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

table.normal th:last-child {
  border-right: 0;
}

table.normal td {
  padding: 12px 20px;
  font-size: 12px;
  line-height: 1.2em;
  vertical-align: middle;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

table.normal td:last-child {
  border-right: 0;
}

table.normal a {
  font-size: 12px;
  line-height: 1.2em;
  color: #de848c;
}

table.normal.tc th {
  text-align: center;
}

table.normal.slim {
  width: 100%;
  border-top: 1px solid #999;
}

table.normal.slim th {
  background: #f5f5f5;
  padding: 10px 5px;
  font-size: 12px;
  line-height: 1.3em;
  vertical-align: middle;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  word-break: break-all;
}

table.normal.slim th:last-child {
  border-right: 0;
}

table.normal.slim td {
  padding: 8px 5px;
  font-size: 12px;
  line-height: 1.1em;
  vertical-align: middle;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  word-break: break-all;
}

table.normal.slim td:last-child {
  border-right: 0;
}

table.normal.slim a {
  font-size: 12px;
  line-height: 1.3em;
  color: #de848c;
  text-shadow: 1px 1px 1px #eee;
}

table.normal.slim.tc th {
  text-align: center;
}

table.normal.fsz12 th {
  font-size: 12px !important;
  padding: 5px !important;
}

table.normal.fsz12 td {
  font-size: 12px !important;
  padding: 2px 5px !important;
}

table.hori {
  width: 100%;
  border-top: 1px solid #999;
}

table.hori th {
  color: #333;
  background: #f5f5f5;
  padding: 15px 20px;
  font-size: 13px;
  line-height: 1.3em;
  vertical-align: middle;
  border-bottom: 1px solid #e6e6e6;
}

table.hori th:last-child {
  border-right: 0;
}

table.hori td {
  padding: 15px 20px;
  font-size: 13px;
  line-height: 1.2em;
  vertical-align: middle;
  border-bottom: 1px solid #e6e6e6;
}

table.hori td:last-child {
  border-right: 0;
}

table.hori a {
  font-size: 14px;
  line-height: 1.2em;
  color: #333;
  text-shadow: 1px 1px 1px #eee;
}

table.hori.tc th {
  text-align: center;
}

table.hori.small th {
  font-size: 12px;
  padding: 7px 10px;
}

table.hori.small td {
  font-size: 12px;
  padding: 7px 10px;
}

table.no-border {
  border-top: 0 !important;
}

input {
  box-sizing: border-box;
}

body {
  min-width: 940px;
}

.no-result {
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}

.layout-header {
  z-index: 1500;
  width: 100%;
  min-width: 940px;
  position: fixed;
  top: 0px;
  background: #fafafa;
  border-bottom: 1px solid #e5e5e5;
}

.layout-header .title {
  padding: 20px 40px;
  color: #333;
  font-size: 22px;
  text-align: left;
  font-weight: bold;
  float: left;
  position: relative;
}

.layout-header .title a {
  position: absolute;
  left: 29px;
  top: 13px;
}

.layout-header .title a img {
  width: 220px;
}

.layout-header .navigation {
  clear: both;
  background: url("/assets/images/erp_header.jpeg") repeat;
  position: relative;
  text-align: right;
  background-size: cover;
  display: flex;
  justify-content: space-between;
}

.layout-header .navigation > ul {
  overflow: hidden;
}

.layout-header .navigation > ul.left {
  margin-left: 200px;
}

.layout-header .navigation > ul.left li {
  width: auto;
  margin-left: 50px;
}

.layout-header .navigation > ul.left li span {
  color: #fff;
  font-weight: bold;
}

.layout-header .navigation > ul.left li span::after {
  font-weight: bold;
  content: " | ";
  padding-right: 12px;
  padding-left: 12px;
}

.layout-header .navigation > ul.left li a {
  color: #fff;
  padding: 0 12px;
}

.layout-header .navigation > ul > li {
  width: 100px;
  text-align: center;
  float: left;
  padding: 15px 0;
}

.layout-header .navigation > ul > li:last-child {
  background: none;
}

.layout-header .navigation > ul > li a {
  color: #fff;
  opacity: 0.9;
  font-size: 14px;
  transition: all 0.3s;
}

.layout-header .navigation > ul > li a:hover {
  opacity: 0.7;
}

.layout-header .navigation .menu-area {
  height: 0;
  display: none;
  position: absolute;
  right: 100px;
  top: 42px;
  border: 1px solid #efefef;
  border-bottom: 2px solid #ee4352;
  background: #fff;
  box-shadow: 2px 10px 74px -12px rgba(0, 0, 0, 0.75);
  border-radius: 4px;
}

.layout-header .navigation .menu-area.hovered {
  display: block !important;
  height: inherit !important;
}

.layout-header .navigation .menu-area .menu-box > li {
  margin: 10px 0;
  width: 110px;
  float: left;
  border-right: 1px solid #efefef;
  height: 275px;
}

.layout-header .navigation .menu-area .menu-box > li .header-title {
  color: #ee4352;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 9px;
  padding-bottom: 7px;
  padding-left: 10px;
  margin-top: 5px;
  border-bottom: 1px solid #efefef;
}

.layout-header .navigation .menu-area .menu-box > li:last-child {
  border-right: none;
}

.layout-header .navigation .menu-area .menu-box > li .sub-menu-box li {
  margin-bottom: 12px;
  text-align: left;
  padding-left: 10px;
}

.layout-header .navigation .menu-area .menu-box > li .sub-menu-box li a {
  color: #666;
  font-size: 13px;
}

.layout-header .navigation .menu-area .menu-box > li .sub-menu-box li a:hover {
  color: #de848c;
}

.layout-header .profile-box {
  float: right;
  background: transparent url("/assets/images/common/header_arrow_down.png") right center no-repeat;
  padding: 13px 20px;
  margin-right: 50px;
  cursor: pointer;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.layout-header .profile-box .ip {
  font-size: 12px;
  float: left;
  margin-right: 20px;
  line-height: 30px;
}

.layout-header .profile-box .profile-round {
  float: left;
  margin-right: 7px;
  width: 30px;
  height: 30px;
  background: transparent url("/assets/images/common/no_one.png") no-repeat;
  background-size: cover;
}

.layout-header .profile-box .name {
  float: left;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  color: #575757;
  font-size: 14px;
}

.layout-header .profile-box:hover .profile-hidden {
  transition: all 0.2s;
  height: 92px;
  border: 1px solid #efefef;
  border-bottom: 2px solid #dc3544;
}

.layout-header .profile-box:hover .profile-hidden ul {
  height: 100%;
}

.layout-header .profile-box .profile-hidden {
  background: #fff;
  position: absolute;
  width: 90%;
  top: 53px;
  right: 0;
  height: 0;
  border-color: #efefef;
  z-index: 11;
}

.layout-header .profile-box .profile-hidden ul {
  overflow: hidden;
  height: 0;
}

.layout-header .profile-box .profile-hidden ul li {
  border-bottom: 1px solid #efefef;
  padding: 7px 0;
}

.layout-header .profile-box .profile-hidden ul li a {
  color: #575757;
  font-size: 13px;
  transition: 0.3s;
}

.layout-header .profile-box .profile-hidden ul li a:hover {
  opacity: 0.8;
  cursor: pointer;
}

.layout-header .profile-box .profile-hidden ul li:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.layout-left {
  left: -1px;
  top: 125px;
  overflow: auto;
  min-height: 500px;
  height: 100%;
  width: 201px;
  border-right: 1px solid #cecece;
  border-left: 1px solid #cecece;
  position: fixed;
  background: #f9f9f9;
  z-index: 1052;
  scrollbar-base-color: #e4a8ae;
  scrollbar-arrow-color: #fff;
}

.layout-left::-webkit-scrollbar {
  width: 2px;
}

.layout-left::-webkit-scrollbar-track {
  background-color: #eaeaea;
  border-left: 1px solid #ccc;
}

.layout-left::-webkit-scrollbar-thumb {
  background-color: #cecdd3;
}

.layout-left::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

.layout-left .search-area {
  position: relative;
  padding: 15px 0;
}

.layout-left .search-area .search-input {
  margin: 0 10px;
  border: 1px solid #cecece;
  color: #666;
  padding: 7px 15px;
  font-size: 13px;
}

.layout-left .search-area img {
  position: absolute;
  top: 25px;
  right: 17px;
  cursor: pointer;
  transition: all 0.3s;
}

.layout-left .search-area img:hover {
  opacity: 0.5;
}

.layout-left .menu-area .menu-box {
  height: 1000px;
}

.layout-left .menu-area .menu-box li {
  text-align: left;
}

.layout-left .menu-area .menu-box li .menu-title {
  line-height: 17px;
  color: #444444;
  font-size: 14px;
  display: block;
  padding: 17px 20px;
  background: transparent url("/assets/images/common/menu_arrow.png") 90% center no-repeat;
  background-size: 9px;
}

.layout-left .menu-area .menu-box li .menu-title img {
  width: 17px;
  margin-right: 10px;
  display: inline-block;
}

.layout-left .menu-area .menu-box li .sub-menu-box {
  padding: 10px 0;
  display: none;
  background: #f9f9f9;
}

.layout-left .menu-area .menu-box li .sub-menu-box li {
  display: block;
}

.layout-left .menu-area .menu-box li .sub-menu-box li .sub-menu-title {
  display: block;
  color: #444444;
  font-size: 13px;
  padding: 10px 33px;
}

.layout-left .menu-area .menu-box li.active .menu-title {
  color: #ee4352;
  background: transparent url("/assets/images/common/menu_arrow_active.png") 90% center no-repeat;
  background-size: 5px;
}

.layout-left .menu-area .menu-box li.active .menu-title img {
  opacity: 0.5;
}

.layout-left .menu-area .menu-box li.active .sub-menu-box li {
  list-style: disc;
}

.layout-left .menu-area .menu-box li.active .sub-menu-box li .sub-menu-title {
  background: url("/assets/images/common/dot_gray.png") 10% 46% no-repeat;
}

.layout-left .menu-area .menu-box li.active .sub-menu-box li:hover .sub-menu-title {
  background: url("/assets/images/common/dot_blue.png") 10% 46% no-repeat;
  color: #de848c;
}

.layout-left .menu-area .menu-box li.active .sub-menu-box li.active .sub-menu-title {
  background: url("/assets/images/common/dot_blue.png") 10% 46% no-repeat;
  color: #de848c;
}

.layout-container {
  max-width: 1400px;
  min-height: 600px;
  margin-left: 200px;
  margin-top: 108px;
  overflow: auto;
  padding: 50px;
  box-sizing: border-box;
  text-align: left;
}

.layout-container::-webkit-scrollbar {
  width: 2px;
}

.layout-container::-webkit-scrollbar-track {
  background-color: #eaeaea;
  border-left: 1px solid #ccc;
}

.layout-container::-webkit-scrollbar-thumb {
  background-color: #de848c;
}

.layout-container::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

.layout-footer {
  position: relative;
  padding: 30px 0;
  text-align: center;
  border-top: 1px solid #e8e8e8;
  margin-left: 248px;
}

.layout-footer ul {
  overflow: hidden;
  width: 70%;
  margin: auto;
}

.layout-footer ul li {
  padding: 0 20px;
  text-align: center;
  display: inline-block;
  background: transparent url("/assets/images/common/footer_line.png") right center no-repeat;
  font-size: 12px;
  color: #5c5c5d;
}

.layout-footer ul li a {
  color: #5c5c5d;
  font-size: 12px;
}

.layout-footer ul li span {
  color: #5c5c5d;
  font-size: 12px;
}

.layout-footer ul li:last-child {
  background: none;
}

.layout-footer img {
  position: absolute;
  right: 100px;
  top: 15px;
  margin-bottom: 15px;
}

.footer-area img {
  margin-top: -15px;
  width: 300px;
}

.login-outer-container {
  overflow: hidden;
  position: relative;
}

.login-outer-container .logo {
  text-align: center;
}

.login-outer-container .logo img {
  width: 15%;
  display: inline-block;
  min-width: 100px;
}

@media (max-width: 1050px) {
  .login-outer-container .logo img {
    width: 20%;
  }
}

@media (max-width: 750px) {
  .login-outer-container .logo img {
    width: 40%;
  }
}

.login-outer-container .login-container {
  width: calc(100% - 400px);
  padding-top: calc((100vh - 326px) / 2);
  float: left;
  overflow: hidden;
  margin: auto;
}

.login-outer-container .login-container .inner-container {
  width: 100%;
  margin: auto;
}

.login-outer-container .login-container .inner-container .title-area .title {
  font-size: 38px;
  font-weight: bold;
  color: #ee4352;
  margin: auto;
  padding: 30px 0;
  font-family: initial;
}

.login-outer-container .login-container .inner-container .content-area {
  margin: auto;
}

.login-outer-container .login-container .inner-container .content-area .content-box {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.login-outer-container .login-container .inner-container .content-area .content-box .input-box {
  width: 250px;
  margin: auto;
}

.login-outer-container .login-container .inner-container .content-area .content-box .input-box input {
  width: 100%;
  color: #2f333f;
  border: 1px solid #e6e6e6;
  padding: 15px 10px;
  margin: 5px 0;
  font-size: 13px;
  border-radius: 4px;
}

.login-outer-container .login-container .inner-container .content-area .content-box .input-box input:first-child {
  margin-top: 0;
}

.login-outer-container .login-container .inner-container .content-area .content-box .input-box input.none {
  background-color: #fff !important;
  background-position: 10px 50% !important;
}

.login-outer-container .login-container .inner-container .content-area .content-box .input-box input.none:first-child {
  margin-top: 0;
  background: url("/assets/images/id_input.png") no-repeat;
  background-size: 109px;
}

.login-outer-container .login-container .inner-container .content-area .content-box .input-box input.none:last-child {
  background-color: #fff !important;
  background-position: 10px 50% !important;
  background: url("/assets/images/pw_input.png") no-repeat;
}

.login-outer-container .login-container .inner-container .content-area .content-box .input-box div.form-error {
  margin: 5px;
}

.login-outer-container .login-container .inner-container .content-area .content-box .button-box {
  width: 250px;
  margin: auto;
  margin-top: 5px;
}

.login-outer-container .login-container .inner-container .content-area .content-box .button-box button {
  font-family: "Notosans" !important;
  font-size: 12px;
  letter-spacing: 0.3px;
  background: #bf1a3c;
  color: #fff;
  transition: 0.3s;
  width: 100%;
  padding: 15px;
  display: inline-block;
}

.login-outer-container .login-container .inner-container .content-area .content-box .button-box button:hover {
  opacity: 0.8;
  cursor: pointer;
}

.login-outer-container .login-container .inner-container .content-area .content-box .button-box button:active, .login-outer-container .login-container .inner-container .content-area .content-box .button-box button:focus {
  outline: 0;
}

.login-outer-container .login-container .inner-container .content-area .content-box .button-box button img {
  width: 107px;
  height: 107px;
}

.login-outer-container .login-container .inner-container .content-area .footer-box {
  padding-top: 30px;
  padding-bottom: 30px;
  width: 80%;
  margin: auto;
}

.login-outer-container .login-container .inner-container .content-area .footer-box ul {
  overflow: hidden;
  text-align: center;
}

.login-outer-container .login-container .inner-container .content-area .footer-box ul li {
  display: inline-block;
  margin-right: 10px;
}

.login-outer-container .login-container .inner-container .content-area .footer-box ul li a {
  transition: 0.3s;
  font-size: 14px;
  border: 1px solid #e6e6e6;
  padding: 7px 15px;
  text-align: center;
  display: inline-block;
  color: #2f333f;
}

.login-outer-container .login-container .inner-container .content-area .footer-box ul li a:hover {
  opacity: 0.8;
}

.login-outer-container .login-container .inner-container .content-area .footer-box ul li:last-child {
  margin-right: 0;
}

@media (max-width: 750px) {
  .login-outer-container .logo {
    display: none;
  }
  .login-outer-container .login-container {
    width: 100%;
  }
  .login-outer-container .footer-img {
    width: 200px !important;
  }
}

.dash-board .calendar-box {
  position: relative;
}

.dash-board .calendar-box .main-calendar-button {
  position: absolute;
  right: 0;
  top: 20px;
}

.dash-board .dash-box {
  width: 1300px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.dash-board .dash-box > div {
  width: 32.5%;
  border: 1px solid #dbdcd4;
  height: 412px;
}

.dash-board .dash-box > div .title-box {
  background: #f9f9f9;
  height: 40px;
  padding-left: 15px;
  border-bottom: 1px solid #dbdcd4;
}

.dash-board .dash-box > div .title-box .title-text {
  color: #ea4758;
  font-size: 15px;
  font-weight: bold;
  line-height: 40px;
}

.dash-board .dash-box > div .title-box .title-text .flr span {
  text-align: center;
  color: #767772;
  font-size: 13px;
  display: inline-block;
}

.dash-board .dash-box > div .title-box .title-text .flr span.count {
  width: 61px;
}

.dash-board .dash-box > div .title-box .title-text .flr span.price {
  width: 102px;
}

.dash-board .dash-box > div .title-box img {
  line-height: 40px;
  vertical-align: middle;
}

.dash-board .dash-box > div .small {
  font-size: 13px;
  color: #bababa;
}

.dash-board .dash-box > div .center-name {
  font-size: 12px;
  margin-left: 5px;
  color: #ccc !important;
  border: 1px solid #ddd;
  padding: 2px 4px;
}

.dash-board .dash-box > div.leader .inner-box {
  display: flex;
  border-bottom: 1px solid #dbdcd4;
  width: 100%;
}

.dash-board .dash-box > div.leader .inner-box:last-child {
  border-bottom: none;
}

.dash-board .dash-box > div.leader .inner-box .left {
  width: 35%;
  min-height: 185px;
  background: #f9f9f9;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  padding: 20px 15px;
  border-right: 1px solid #dbdcd4;
}

.dash-board .dash-box > div.leader .inner-box:last-child .left {
  border-bottom: 1px solid #dbdcd4;
}

.dash-board .dash-box > div.leader .inner-box .right {
  width: 100%;
}

.dash-board .dash-box > div.leader .inner-box .right ul {
  overflow: hidden;
}

.dash-board .dash-box > div.leader .inner-box .right ul li {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #dbdcd4;
}

.dash-board .dash-box > div.leader .inner-box .right ul li:last-child {
  border-bottom: none;
}

.dash-board .dash-box > div.leader .inner-box .right ul li span {
  text-align: center;
  color: #767772;
  line-height: 60px;
}

.dash-board .dash-box > div.leader .inner-box .right ul li .no-box {
  width: 15%;
}

.dash-board .dash-box > div.leader .inner-box .right ul li .no-box .no {
  color: #fff;
  background: #c0c0c0;
  padding: 5px 7px;
  border-radius: 4px;
}

.dash-board .dash-box > div.leader .inner-box .right ul li .name {
  width: 30%;
}

.dash-board .dash-box > div.leader .inner-box .right ul li:first-child .name {
  color: #ea4758;
}

.dash-board .dash-box > div.leader .inner-box .right ul li:first-child .no {
  background: #ea4758;
}

.dash-board .dash-box > div.leader .inner-box .right ul li .count {
  width: 61px;
}

.dash-board .dash-box > div.leader .inner-box .right ul li .price {
  width: 106px;
}

.dash-board .dash-box > div.sales .no-bdb {
  border-bottom: 0 !important;
}

.dash-board .dash-box > div.sales .outer-box.counsel .inner-box {
  padding: 20px 15px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #dbdcd4;
  position: relative;
}

.dash-board .dash-box > div.sales .outer-box .inner-box:first-child {
  border-right: 1px solid #dbdcd4;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .title {
  font-size: 15px;
  color: #767772;
  letter-spacing: -0.5px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .text {
  margin-top: 10px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .text span.text1 {
  font-size: 30px;
  font-weight: 400;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .text span.text2 {
  font-size: 18px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .text span.text3 {
  font-size: 25px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .label {
  background: #31302e;
  padding: 3px;
  line-height: 14px;
  width: 40px;
  display: inline-block;
  color: #fff;
  border-radius: 40px;
  position: absolute;
  right: 20px;
  top: 18px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .label.red {
  background: #f66260;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .label2 {
  margin-right: 3px;
  font-size: 11px;
  color: #999 !important;
  border: 1px solid #bbb;
  padding: 2px 4px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .label2.red {
  background: #f66260;
}

.dash-board .dash-box > div.sales .outer-box .inner-box .no-result {
  height: 83px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box ul.list {
  overflow-y: scroll;
  height: 93px;
}

.dash-board .dash-box > div.sales .outer-box .inner-box ul.list::-webkit-scrollbar {
  width: 4px;
  background: #efefef;
}

.dash-board .dash-box > div.sales .outer-box .inner-box ul.list li {
  line-height: 25px;
  font-size: 13px;
  letter-spacing: -0.5px;
}

.dash-board .dash-box > div.notice .inner-box {
  padding: 18px 20px;
  position: relative;
}

.dash-board .dash-box > div.notice .inner-box .link {
  position: absolute;
  right: 0;
  bottom: 0;
  border-left: 1px solid #dbdcd4;
  border-top: 1px solid #dbdcd4;
  width: 30px;
  height: 30px;
  padding: 7px;
}

.dash-board .dash-box > div.notice .inner-box .link img {
  width: 16px;
  height: 16px;
}

.dash-board .dash-box > div.notice .bdb {
  border-bottom: 1px solid #dbdcd4;
}

.dash-board .dash-box > div.notice .section {
  font-size: 15px;
  color: #767772;
  letter-spacing: -0.5px;
}

.dash-board .dash-box > div.notice .board-box .title {
  font-size: 15px;
  color: #333;
  margin: 10px 0 5px 0;
}

.dash-board .dash-box > div.notice .board-box .text {
  line-height: 22px;
  color: #999;
  font-size: 14px;
  height: 50px;
}

.dash-board .dash-box > div.notice .board-box .text a {
  line-height: 22px;
  color: #999;
  font-size: 14px;
  height: 50px;
}

.dash-board .dash-box > div.notice .no-result-box {
  background: #f9f9f9;
  text-align: center;
  padding: 20px;
  height: 135px;
}

.dash-board .dash-box > div.notice .no-result-box img {
  display: inline-block;
  margin-bottom: 20px;
  width: 50px;
}

.dash-board .dash-box > div.notice .no-result-box p {
  color: #999;
  font-size: 13px;
}

.dash-board .dash-box > div.notice .birthday-box {
  border-top: 1px solid #ccc;
  overflow: hidden;
}

.dash-board .dash-box > div.notice .birthday-box .no-birthday {
  height: 100px;
  text-align: center;
  padding: 40px;
  font-size: 13px;
}

.dash-board .dash-box > div.notice .birthday-box .cake,
.dash-board .dash-box > div.notice .birthday-box .item-box {
  float: left;
}

.dash-board .dash-box > div.notice .birthday-box .cake {
  width: 20%;
  padding: 18px 0;
}

.dash-board .dash-box > div.notice .birthday-box .cake img {
  float: right;
  margin-top: 4px;
}

.dash-board .dash-box > div.notice .birthday-box .item-box {
  width: 80%;
}

.dash-board .dash-box > div.notice .birthday-box .item-box .each {
  float: left;
  width: 50%;
  padding: 33px 0;
  text-align: center;
}

.dash-board .dash-box > div.notice .birthday-box .item-box .each:first-child {
  border-right: 1px solid #dbdcd4;
}

.dash-board .dash-box > div.notice .birthday-box .item-box .each .text {
  color: #999;
  font-size: 13px;
}

.dash-board .dash-box > div.notice .event-box {
  border-top: 1px solid #dbdcd4;
  padding: 5px 20px;
}

.dash-board .dash-box > div.notice .event-box .title {
  font-size: 14px;
  color: #333;
  margin: 5px 0;
}

.dash-board .dash-box > div.notice .event-box .text {
  color: #999;
  font-size: 14px;
}

.branches-make table input {
  width: 100%;
  max-width: 500px;
  color: #2f333f;
  border: 1px solid #e6e6e6;
  padding: 5px 10px;
  font-size: 13px;
}

.branches .modal-branch-edit .w33 table {
  margin-right: 5%;
}

.branches .modal-branch-edit .w33 table:last-child {
  margin-right: 0;
}

.material-make table input {
  width: 100%;
  max-width: 500px;
  color: #2f333f;
  border: 1px solid #e6e6e6;
  padding: 5px 10px;
  font-size: 13px;
}

.material-make .refresh-box {
  transition: 0.3s;
  cursor: pointer;
}

.material-make .refresh-box:hover {
  opacity: 0.7;
}

.material-make .refresh-box img {
  width: 30px;
}

.material-make .refresh-box span {
  line-height: 30px;
  font-size: 14px;
}

.dataTables_wrapper label {
  font-size: 14px;
}

.dataTables_wrapper select {
  min-width: 70px;
}

.modal-material-edit table input {
  width: 100%;
  max-width: 500px;
  color: #2f333f;
  border: 1px solid #e6e6e6;
  padding: 5px 10px;
  font-size: 13px;
}

.modal-material-edit .refresh-box {
  transition: 0.3s;
  cursor: pointer;
}

.modal-material-edit .refresh-box:hover {
  opacity: 0.7;
}

.modal-material-edit .refresh-box img {
  width: 30px;
}

.modal-material-edit .refresh-box span {
  line-height: 30px;
  font-size: 14px;
}

.reqeust-detail table th {
  width: 20%;
  min-width: 100px;
}

.reqeust-detail table td {
  width: 80%;
}

.subject-make .subject-box {
  height: 500px;
  border-top: 2px solid #333;
  text-align: center;
  overflow: auto;
}

.subject-make .subject-box.bdr {
  border-right: 1px solid #e6e6e6;
}

.subject-make .subject-box .row {
  overflow: hidden;
  padding: 10px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
}

.subject-make .subject-box .row.title {
  font-size: 14px;
  background: #f5f5f5;
  font-weight: bold;
}

.subject-make .subject-box .row.active {
  background: #999;
  color: #fff;
}

.subject-make .subject-box .row.new {
  margin-left: 2%;
}

.subject-make .subject-box .content {
  margin: 15px;
  border: 1px solid #e6e6e6;
}

.subject-make .subject-box .content .row {
  transition: all 0.3s;
}

.subject-make .subject-box .content .row:hover {
  cursor: pointer;
  opacity: 0.7;
}

.subject-make .subject-box button {
  padding: 7px 14px !important;
}

.subject-make .subject-box .input-box {
  width: 80% !important;
}

.subject-make .subject-box .button-box {
  width: 20% !important;
}

.subject-make .subject-box input[type="text"] {
  width: 100%;
  max-width: 500px;
  color: #2f333f;
  border: 1px solid #e6e6e6;
  padding: 5px 10px;
  font-size: 13px;
}

.subject-make .subject-box table {
  border-top: 0 !important;
}

.reg-box .delete-sales {
  cursor: pointer;
  background: #d95f6a;
  color: #fff !important;
  text-shadow: none !important;
  text-align: center;
  border: 1px solid #d14a56;
  padding: 3px auto;
  font-size: 11px;
  margin-top: 10px;
  border-radius: 4px;
  font-weight: bold;
}

.reg-box .delete-sales:hover {
  transition: all 0.3s;
  opacity: 0.8;
}

.reg-box .upper-right-header div {
  float: left;
}

.reg-box .upper-right-header div.separate {
  margin: 0 10px;
}

.reg-box .upper-right-header div span {
  font-size: 13px;
  color: #555;
}

.reg-box .upper-right-header div span.bold {
  color: #333;
  font-weight: bold;
}

.reg-box .upper-right-header #regDate {
  border: 0 !important;
  background: #fff !important;
  font-size: 13px;
  color: #555;
  padding: 0 !important;
  vertical-align: baseline;
  width: 100px;
}

.reg-box .upper-right-header .Zebra_DatePicker_Icon {
  top: 2px !important;
}

.reg-box .label-box {
  display: inline-block;
  margin-right: 10px;
}

.reg-box .label-box:last-child {
  margin-right: 0;
}

.reg-box label {
  font-size: 13px;
}

.reg-box table .card-history {
  text-align: left;
  line-height: 19px;
}

.reg-box table th,
.reg-box table td {
  padding: 10px 20px !important;
}

.reg-box table label {
  font-size: 13px;
}

.reg-box table .label-box {
  display: inline-block;
  margin-right: 10px;
}

.reg-box table .label-box:last-child {
  margin-right: 0;
}

.reg-box table select {
  width: 100%;
}

.reg-box table .select2-container--default .select2-selection--single {
  border: 0 !important;
}

.reg-box table input[type="text"] {
  width: 100%;
  border: 1px solid #e0e0e0 !important;
  padding: 6px;
  max-width: 500px;
}

.reg-box table .email-box input,
.reg-box table .email-box span {
  display: inline-block;
}

.reg-box table .email-box #email1 {
  width: 150px !important;
}

.reg-box table .email-box #email2,
.reg-box table .email-box select {
  width: 150px !important;
}

.reg-box table .add {
  width: 25px;
  cursor: pointer;
  transition: 0.3s all;
}

.reg-box table .add:hover {
  opacity: 0.7;
}

.reg-box table .result-price {
  background: #fafafa;
  color: #ee4352;
}

.reg-box table .result-price span {
  color: #ee4352;
}

.reg-box .table-price td {
  text-align: right;
}

.reg-box .table-price td input.number {
  font-size: 13px;
  width: 60%;
  padding: 8px;
}

.reg-box .payment-box input.number {
  font-size: 13px;
  padding: 8px;
}

.reg-box .gov-textbox {
  font-size: 14px;
  line-height: 22px;
  padding: 10px;
  border: 1px solid #ccc;
}

.reg-box .gov-textbox .red {
  color: #dc3544;
}

.reg-box .gov-textbox .title {
  background: #f2f2f2;
  color: #666 !important;
  text-shadow: none !important;
  text-align: center;
  border: 1px solid #d5d5d5;
  padding: 2px 14px;
  font-size: 13px;
  margin-bottom: 15px;
}

.reg-box .added-button {
  transition: 0.3s all;
  cursor: pointer;
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
}

.reg-box .added-button:hover {
  opacity: 0.8;
}

.reg-box .added-button .close {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 11px;
  color: #aeaeae;
}

.reg-box .deduct-button {
  transition: 0.3s all;
  cursor: pointer;
}

.reg-box .deduct-button:hover {
  opacity: 0.8;
}

.reg-box .button-custom {
  background: #fafafa;
  color: #8b8b8b;
  text-align: center;
  border: 1px solid #d1d1d1;
  padding: 4px 13px;
  font-size: 12px;
  display: inline-block;
  margin-bottom: 5px;
  cursor: pointer;
}

.reg-box .button-custom.active, .reg-box .button-custom:hover {
  background: #ee4353;
  border: 1px solid #df3e4d;
  color: #fff;
}

.reg-box .toggle-attr {
  display: none;
}

.reg-box .toggle-attr input {
  border: 0 !important;
  font-size: 13px;
}

.reg-box .toggle-attr .label-text {
  font-size: 13px;
  color: #999;
  display: inline-block;
  margin-right: 10px;
}

.reg-box .label-text {
  font-size: 13px;
  color: #999;
  display: inline-block;
  margin-right: 10px;
}

.reg-box .color-red {
  color: #ff5a5f;
  font-size: 13px;
  margin-top: 10px;
  text-align: right;
}

.reg-box .note {
  width: 100%;
  resize: none;
  font-size: 13px;
  line-height: 1.2em;
  padding: 10px;
  background: #fff;
}

.reg-box .color-gray {
  color: #999;
}

.modal-student .assign-memos,
.modal-employee-read .assign-memos {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

.modal-student .assign-memos:last-child,
.modal-employee-read .assign-memos:last-child {
  border-bottom: 0;
}

.modal-student label,
.modal-employee-read label {
  font-size: 13px;
}

.modal-student .label-box,
.modal-employee-read .label-box {
  display: inline-block;
}

.modal-student .label-box:last-child,
.modal-employee-read .label-box:last-child {
  margin-bottom: 0;
}

.modal-student .td-relative,
.modal-employee-read .td-relative {
  position: relative;
}

.modal-student .td-relative textarea,
.modal-employee-read .td-relative textarea {
  width: 100%;
  resize: none;
  text-align: left;
  padding: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 20px;
  outline: none;
}

.modal-student .td-relative button,
.modal-employee-read .td-relative button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.modal-student .report-box,
.modal-employee-read .report-box {
  height: 250px;
  overflow: auto;
}

.modal-student .report-box .info,
.modal-employee-read .report-box .info {
  text-align: left;
}

.modal-student .report-box .info span,
.modal-employee-read .report-box .info span {
  font-size: 12px;
  color: #999;
}

.modal-student .report-box .each-report,
.modal-employee-read .report-box .each-report {
  border: 1px solid #efefef;
  margin-bottom: 10px;
  padding: 10px;
}

.modal-student .report-box .each-report p,
.modal-employee-read .report-box .each-report p {
  font-size: 13px;
  text-align: left;
  line-height: 17px;
}

.reservation .inner-box {
  min-height: 500px;
}

.reservation .inner-box .regi-box {
  width: 100%;
  float: left;
  position: relative;
  min-height: 400px;
}

.rollbook-container li.rollbook-subcontainer {
  float: left;
  width: 290px;
  height: 156px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box {
  position: relative;
  width: 100%;
  height: 107px;
  border-radius: 3px;
  border-bottom-width: 2px;
  border: 1px solid #dedede;
  padding: 20px;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .fll {
  width: 30%;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .fll img {
  width: 58px;
  max-height: 60px;
  display: inline-block;
  margin: auto;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .flr {
  width: 70%;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .flr .class-name {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 3px;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .flr .teacher-name {
  text-align: right;
  font-size: 12px;
  color: #333;
  margin-bottom: 2px;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .flr .student {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .flr .time {
  font-size: 12px;
  color: #666;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .button-box {
  position: absolute;
  width: 100px;
  right: 10px;
  bottom: 10px;
  text-align: right;
}

.rollbook-container li.rollbook-subcontainer .rollbook-box .button-box button:first-child {
  margin-bottom: 3px;
}

.attend-container .td-label {
  min-width: 275px;
}

.attend-container .td-label .label-box {
  display: inline-block;
  margin-right: 10px;
}

.attend-container .td-label .label-box:last-child {
  margin-right: 0;
}

.attend-container label {
  font-size: 13px;
}

.message-box .etabs {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}

.message-box .tab {
  display: inline-block;
  zoom: 1;
  *display: inline;
  background: #eee;
  border: solid 1px #999;
  border-bottom: none;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
}

.message-box .tab a {
  font-size: 14px;
  line-height: 2em;
  display: block;
  padding: 0 10px;
  outline: none;
}

.message-box .tab.active {
  background: #fff;
  padding-top: 6px;
  position: relative;
  top: 1px;
  border-color: #ccc;
}

.message-box .tab a.active {
  font-weight: bold;
}

.message-box .tab-container .panel-container {
  background: #fff;
  border: solid #ccc 1px;
  padding: 10px;
  -moz-border-radius: 0 4px 4px 4px;
  -webkit-border-radius: 0 4px 4px 4px;
}

.message-box table th:nth-child(1) {
  width: 5% !important;
}

.message-box table th:nth-child(2) {
  width: 15% !important;
}

.message-box table th:nth-child(3) {
  width: 60% !important;
}

.message-box table th:nth-child(4) {
  width: 20% !important;
}

.editor-make input.input-title {
  width: 100%;
  color: #2f333f;
  border: 1px solid #e6e6e6;
  padding: 5px 10px;
  font-size: 13px;
}

.editor-make .board-info {
  font-size: 13px;
}

.editor-make .board-title {
  font-size: 15px;
}

.editor-make .span-file {
  display: inline-block;
  border: 1px solid #c0c0c0;
  background: #fff;
  padding: 7px 14px;
  color: #0662ba;
  font-size: 13px !important;
  border-radius: 4px;
  margin-right: 10px;
}

.editor-make .span-file a {
  color: #0662ba !important;
  font-size: 13px !important;
}

.editor-make .editor-content {
  padding: 20px 0;
  min-height: 200px;
}

.editor-make .editor-content ul {
  padding-left: 40px;
  margin: 13px 0;
}

.editor-make .reply-box {
  border: 0;
  background: #fff;
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 20px 0;
}

.editor-make .reply-box table.reply-write {
  width: 100%;
}

.editor-make .reply-box table.reply-write th,
.editor-make .reply-box table.reply-write td {
  vertical-align: middle;
  padding: 0 0 0 10px;
  text-align: center;
}

.editor-make .reply-box table.reply-write th {
  width: 80px;
}

.editor-make .reply-box table.reply-write td {
  padding-right: 20px;
}

.editor-make .reply-box table.reply-read {
  width: 100%;
}

.editor-make .reply-box table.reply-read tr {
  border-bottom: 1px solid #eee;
}

.editor-make .reply-box table.reply-read tr:last-child {
  border-bottom: 0;
}

.editor-make .reply-box table.reply-read tr th,
.editor-make .reply-box table.reply-read tr td {
  vertical-align: top;
  padding: 15px 0 10px;
}

.editor-make .reply-box table.reply-read tr th {
  text-align: center;
  width: 80px;
  line-height: 1.5em;
}

.editor-make .reply-box table.reply-read tr td {
  padding-right: 20px;
  line-height: 1.5em;
}

.editor-make .reply-box table.reply-read tr td:last-child {
  width: 80px;
  vertical-align: bottom;
}

.editor-make .reply-box table.reply-read tr td:last-child span.date {
  font-size: 12px;
  color: #666;
}

.editor-make .reply-box textarea {
  width: 100%;
  font-size: 13px;
  line-height: 1.5em;
  padding: 15px;
}

.editor-make .reply-box .user-name {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.editor-make .reply-box .user-name a {
  font-size: 14px !important;
  color: #666 !important;
  font-weight: normal;
}

.editor-make .preview-box {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  margin-bottom: 30px;
  margin: auto;
  width: 100%;
  height: 130px;
  margin-bottom: 30px;
}

.editor-make .preview-box span {
  position: absolute;
  cursor: pointer;
  transition: 0.3s;
}

.editor-make .preview-box span:hover {
  opacity: 0.5;
}

.editor-make .preview-box .prev {
  top: 45px;
  left: 0;
}

.editor-make .preview-box .next {
  top: 45px;
  right: 0;
}

.editor-make .preview-box .image-preview {
  margin: auto;
  height: 130px;
  position: relative;
  overflow: hidden;
}

.editor-make .preview-box .image-preview .img-box {
  overflow: hidden;
  height: 120px;
  position: absolute;
  left: 0;
}

.editor-make .preview-box .image-preview .img-box .each-img {
  padding: 0 1px;
  float: left;
  display: inline-block;
  width: 160px;
  height: 120px;
  border: 1px solid #dfdfdf;
  margin: 0 7.5px;
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s;
}

.editor-make .preview-box .image-preview .img-box .each-img:first-child {
  margin-left: 0;
}

.editor-make .preview-box .image-preview .img-box .each-img img {
  width: 100%;
  height: 100%;
}

.editor-make .preview-box .image-preview .img-box .each-img .remove {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  font-size: 13px;
  padding: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.editor-make .preview-box .image-preview .img-box .each-img .remove:hover {
  opacity: 0.5;
}

.editor-make .preview-box .image-preview .img-box .each-img label.label-watermark {
  position: absolute;
  right: 5px;
  font-size: 12px;
  bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.editor-make .preview-box .image-preview .img-box .each-img label.label-main {
  position: absolute;
  left: 5px;
  font-size: 12px;
  bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.editor-make .preview-box .image-preview .img-box .each-img label.label-thumb {
  position: absolute;
  left: 5px;
  font-size: 12px;
  bottom: 30px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.editor-make .preview-box .image-preview .img-box .each-img label.label-cel {
  position: absolute;
  right: 5px;
  font-size: 12px;
  bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.editor-make .preview-box .image-preview .img-box .each-img:hover {
  cursor: pointer;
  border: 1px solid #ee4352;
}

.editor-make .preview-box .image-preview .img-box .each-img:hover .remove {
  display: block;
}

.prollbook-ajax-box h3 {
  font-size: 14px;
  text-align: left;
  padding-left: 15px;
  margin-top: 15px;
  color: #666;
}

.employee_read.deleted {
  color: #999 !important;
}

.authority-box {
  overflow: hidden;
}

.authority-box label {
  font-size: 13px;
}

.authority-box .label-box {
  float: left;
  width: 25%;
  margin-bottom: 10px;
}

.authority-box .label-box:last-child {
  margin-right: 0;
}

.auth-buttons button.active {
  background: #ee4352;
  color: #fff !important;
}

.studentd-list {
  margin-left: 10px;
  width: 220px !important;
}

.message-box td {
  line-height: 1.3em !important;
}

.popbox {
  position: relative;
}

.popbox .class-open:hover {
  cursor: pointer;
}

.popbox .class-box {
  width: 150px;
  position: absolute;
  background: #f6f6f6;
  border: 1px solid #e2e2e2;
  z-index: 10;
  top: -10px;
  right: -144px;
}

.popbox .class-box li {
  padding: 10px;
  border-bottom: 1px solid #e2e2e2;
}

.popbox .class-box li:last-child {
  border-bottom: none;
}

.popbox .class-box:after,
.popbox .class-box:before {
  right: 100%;
  top: 30px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.popbox .class-box:after {
  border-color: rgba(246, 246, 246, 0);
  border-right-color: #f6f6f6;
  border-width: 10px;
  margin-top: -10px;
}

.popbox .class-box:before {
  border-color: rgba(226, 226, 226, 0);
  border-right-color: #e2e2e2;
  border-width: 11px;
  margin-top: -11px;
}

.modal-ask-edit .w50 {
  padding: 0 5px;
  box-sizing: border-box;
}

.modal-ask-edit h2 {
  text-align: left;
  padding-left: 10px;
}

.ask-page .page-buttons button.active {
  background: #db6868;
  color: #fff !important;
}

.ask-page .menthor-content .name-input::placeholder,
.ask-page .menthor-content textarea::placeholder {
  color: #ccc !important;
  font-size: 15px;
}

.ask-page .menthor-content .new-askbox {
  margin-top: 20px;
}

.ask-page .menthor-content .new-askbox .w60 {
  padding-right: 25px;
}

.ask-page .menthor-content .new-askbox tr {
  border-bottom: 1px solid #ccc;
}

.ask-page .menthor-content .new-askbox .button-area button {
  overflow: hidden;
  box-sizing: border-box;
}

.ask-page .menthor-content .new-askbox .button-area .white-button {
  width: 98% !important;
  background: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 10px;
  font-size: 15px;
  color: #333;
}

.ask-page .menthor-content .new-askbox .button-area .black-button {
  width: 98% !important;
  background: #333;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 10px;
  font-size: 15px;
  color: #fff;
}

.ask-page .menthor-content .new-askbox .phone-row {
  padding-bottom: 10px;
}

.ask-page .menthor-content .new-askbox .phone-row p.dash {
  display: inline-block;
}

.ask-page .menthor-content .new-askbox .phone-row .fll {
  overflow: hidden;
  float: none !important;
  box-sizing: border-box;
}

.ask-page .menthor-content .new-askbox .phone-row .fll .phone-box {
  background: #fff;
  padding: 0;
  width: 100%;
}

.ask-page .menthor-content .new-askbox .phone-row .fll .phone-box input {
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100% !important;
  font-size: 16px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
}

.ask-page .menthor-content .new-askbox .phone-row .flr {
  margin-top: 10px;
  float: none !important;
  box-sizing: border-box;
}

.ask-page .menthor-content .new-askbox .phone-row .flr .phone-box {
  background: #fff;
  padding: 0;
  width: 100%;
  margin: 20px 0;
}

.ask-page .menthor-content .new-askbox .phone-row .flr .phone-box input {
  border: none;
  border-bottom: 1px solid #ccc;
  width: 80px !important;
  font-size: 16px;
  padding-bottom: 5px;
  padding-top: 15px;
  padding-left: 10px;
  background: #fff;
}

.ask-page .menthor-content .new-askbox .phone-row .flr .phone-box p.dash {
  color: #333;
}

.ask-page .menthor-content .new-askbox textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #eee;
  height: 235px;
}

.ask-page .menthor-content .new-askbox .flr1 {
  padding-top: 17px;
}

.ask-page .menthor-content .new-askbox .purpose {
  box-sizing: border-box;
  padding-bottom: 5px !important;
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
}

.ask-page .menthor-content .new-askbox .purpose > div {
  font-size: 15px;
  display: inline-block;
  color: #999;
  vertical-align: top;
  line-height: 15px;
}

.ask-page .menthor-content .new-askbox .purpose > div.line {
  display: block;
}

.ask-page .menthor-content .new-askbox .purpose .custom-select {
  padding: 0 4px;
}

.ask-page .menthor-content .new-askbox .purpose .custom-select.fixed-select {
  width: 110px;
}

.ask-page .menthor-content .new-askbox .purpose .custom-select .show .select-arrow {
  right: -12px;
}

.ask-page .menthor-content .new-askbox .phone-box .custom-select {
  padding: 0 4px;
}

.ask-page .menthor-content .new-askbox .phone-box .custom-select .show .select-arrow {
  right: 0;
}

.ask-page .menthor-content .new-askbox .phone-box input {
  font-size: 15px !important;
  color: #333;
  padding-top: 0 !important;
  background: #fff;
}

.ask-page .menthor-content .new-askbox .phone-box input::placeholder {
  color: #999;
}

.ask-page .menthor-content .new-askbox .phone-box p.dash {
  line-height: initial !important;
}

.ask-page .menthor-content .new-askbox .asktime-box {
  padding-bottom: 5px !important;
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
}

.ask-page .menthor-content .new-askbox .asktime-box .show {
  padding-left: 0 !important;
}

.ask-page .menthor-content .new-askbox .custom-select {
  display: inline-block;
  position: relative;
  padding: 0 5px;
}

.ask-page .menthor-content .new-askbox .custom-select.fixed-select {
  width: 85px;
}

.ask-page .menthor-content .new-askbox .custom-select .show {
  cursor: pointer;
  position: relative;
  padding: 0 5px;
}

.ask-page .menthor-content .new-askbox .custom-select .show span {
  font-size: 15px;
  color: #333;
  line-height: 15px !important;
}

.ask-page .menthor-content .new-askbox .custom-select .show .select-arrow {
  border-color: #888 transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  right: -9px;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}

.ask-page .menthor-content .new-askbox .custom-select ul.options,
.ask-page .menthor-content .new-askbox .custom-select ul.branch-options,
.ask-page .menthor-content .new-askbox .custom-select ul.phone-options {
  display: none;
  position: absolute;
  top: 23px;
  z-index: 10;
  border: 1px solid #ccc;
}

.ask-page .menthor-content .new-askbox .custom-select ul.options li,
.ask-page .menthor-content .new-askbox .custom-select ul.branch-options li,
.ask-page .menthor-content .new-askbox .custom-select ul.phone-options li {
  cursor: pointer;
  padding: 7px 15px;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.ask-page .menthor-content .new-askbox .custom-select ul.options li:last-child,
.ask-page .menthor-content .new-askbox .custom-select ul.branch-options li:last-child,
.ask-page .menthor-content .new-askbox .custom-select ul.phone-options li:last-child {
  border-bottom: none;
}

.ask-page .menthor-content .new-askbox .custom-select ul.options li:hover,
.ask-page .menthor-content .new-askbox .custom-select ul.branch-options li:hover,
.ask-page .menthor-content .new-askbox .custom-select ul.phone-options li:hover {
  background: #eee;
}

.ask-page .menthor-content .new-askbox .custom-select ul.options li {
  width: 100px;
}

.ask-page .menthor-content .new-askbox .custom-select ul.phone-options {
  left: 0px;
}

.ask-page .menthor-content .new-askbox .custom-select ul.phone-options li {
  width: 56px;
}

.ask-page .menthor-content .new-askbox .custom-select ul.branch-options {
  left: 0px;
}

.ask-page .menthor-content .new-askbox .custom-select ul.branch-options li {
  width: 100px;
}

.ask-page .menthor-content .new-askbox .agree-box {
  height: 100px;
  overflow: auto;
  text-align: left;
}

.ask-page .menthor-content .small-label {
  width: 135px !important;
}

.ask-page .menthor-content .large-label {
  width: 66% !important;
}

.ask-page .menthor-content .large-label .normal-text {
  font-size: 14px;
  letter-spacing: 0;
}

.ask-page .menthor-content input.form-error {
  margin-top: 0 !important;
}

.ask-page .menthor-content input {
  font-size: 16px;
}

.ask-page .menthor-content input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #e76d6d;
}

.ask-page .menthor-content input::-moz-placeholder {
  /* Firefox 19+ */
  color: #e76d6d;
}

.ask-page .menthor-content input:-ms-input-placeholder {
  /* IE 10+ */
  color: #e76d6d;
}

.ask-page .menthor-content input:-moz-placeholder {
  /* Firefox 18- */
  color: #e76d6d;
}

.ask-page .menthor-content input[type="text"] {
  background: #f2f2ec;
  box-shadow: none;
  outline: none;
  border: 0;
  vertical-align: top;
  margin-left: -4px;
  padding: 0 20px;
  width: 89%;
  box-sizing: border-box;
  color: #ee4352;
  margin-top: 0 !important;
}

.ask-page .menthor-content .menthor-title {
  color: #ee4352;
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
}

.ask-page .menthor-content .table-row .fll {
  padding-right: 5px;
  box-sizing: border-box;
}

.ask-page .menthor-content table {
  margin-bottom: 2px;
  width: 100%;
}

.ask-page .menthor-content table tr:last-child td {
  border-bottom: 0;
}

.ask-page .menthor-content table td {
  border-bottom: 2px solid #fff;
}

.ask-page .menthor-content table .img-box {
  width: 52px;
  vertical-align: middle;
  display: table-cell;
}

.ask-page .menthor-content table .img-box p {
  font-size: 12px;
  letter-spacing: -0.5px;
  text-align: center;
}

.ask-page .menthor-content table .subject-name {
  padding: 7px 15px;
  color: #ee4352;
  font-size: 16px;
  width: 20%;
  box-sizing: border-box;
}

.ask-page .menthor-content table .label-box {
  box-sizing: border-box;
  margin-bottom: 3px;
  padding: 20px 0;
  width: 88%;
}

.ask-page .menthor-content table .label-box span {
  margin-left: 5px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 300;
  color: #666;
}

.ask-page .menthor-content table .label-box label {
  margin-bottom: 5px;
  display: inline-block;
  width: 30%;
}

.ask-page .menthor-content .useless-box {
  border: 6px solid #f2f2ec;
  margin: 15px 0;
}

.ask-page .menthor-content .img-area {
  box-sizing: border-box;
}

.ask-page .menthor-content .img-area a {
  width: 100%;
  display: inline-block;
}

.ask-page .menthor-content .img-area a img {
  width: 100%;
  display: inline-block;
}

.ask-page .menthor-content .button-area {
  overflow: hidden;
  margin-bottom: 10px;
}

.ask-page .menthor-content .button-area button {
  width: 100%;
}

.ask-page .menthor-content .button-area .gray-button {
  border: 2px solid #898989;
  color: #898989;
  text-align: center;
  padding: 10px 0;
  font-size: 17px;
  background: #fff;
  transition: all 0.3s;
}

.ask-page .menthor-content .button-area .gray-button:hover {
  transition: all 0.3s;
  color: #fff;
  background: #898989;
}

.ask-page .menthor-content .button-area .primary-button {
  border: 2px solid #df0440;
  color: #df0440;
  text-align: center;
  padding: 10px 0;
  font-size: 17px;
  background: #fff;
  transition: all 0.3s;
}

.ask-page .menthor-content .button-area .primary-button:hover {
  transition: all 0.3s;
  color: #fff;
  background: #df0440;
}

.ask-page .menthor-content .agree-box {
  height: 100px;
  overflow: auto;
}

.statistic-box {
  background: #fff;
  height: 400px;
}

.statistic-outer {
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
}

.pagination-box {
  margin-top: 30px;
  text-align: center;
}

ul.pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
}

ul.pagination li {
  display: inline;
}

ul.pagination li.active a {
  background: #ee4352;
  border-color: #dc3544;
  color: #fff;
}

ul.pagination li a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.list-form-box .list-search-box input[name="query"] {
  height: 28px;
  border-radius: 4px;
  font-size: 13px;
  width: 150px;
}

.list-form-box .list-search-box .button-sm {
  padding: 5px 12px !important;
}

.list-form-box .list-search-box .search-date {
  margin-left: 40px;
}

.list-form-box .list-search-box .search-date span {
  font-size: 14px;
  margin-right: 10px;
}

.list-form-box .list-search-box .search-date input {
  height: 28px;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  padding: 0 10px;
  width: 100px;
}

.resume-content {
  margin-bottom: 100px;
  border: 1px solid #ddd;
  margin: 20px 0 100px 0;
  padding: 50px;
}

.resume-content h3 {
  text-align: center;
  color: #666;
  font-size: 30px;
  letter-spacing: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-left: 30px;
}

.resume-content .step-1 .overview {
  overflow: hidden;
}

.resume-content .step-1 .overview .picture {
  border: 2px solid #e31a4c;
  float: left;
  width: 15%;
  height: 181px;
  text-align: center;
  display: table;
}

.resume-content .step-1 .overview .picture span {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  max-width: 135px;
}

.resume-content .step-1 .overview .picture span:hover {
  color: #e31a4c;
}

.resume-content .step-1 .overview table {
  float: right;
  width: 83%;
  box-sizing: border-box;
  padding-left: 20px;
  border-collapse: collapse;
}

.resume-content .step-1 .overview table th {
  background: #e31a4c;
  color: #fff;
  padding: 10px 7px;
  font-weight: normal;
  border-right: 10px solid #fff;
  border-bottom: 1px solid #fff;
  text-align: center;
  width: 10%;
  font-size: 13px;
}

.resume-content .step-1 .overview table td {
  font-size: 13px;
  font-weight: normal;
  padding: 10px 7px;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
}

.resume-content .step-1 .overview table td input {
  width: 100%;
  border: 0;
}

.resume-content .step-1 .overview table td input::placeholder {
  color: #ccc;
}

.resume-content .step-1 .overview table tr:last-child td {
  border-bottom: 1px solid #eee;
}

.resume-content .step-1 .each-box .title {
  float: left;
  width: 7%;
  background: #e31a4c;
  color: #fff;
  display: table;
}

.resume-content .step-1 .each-box .title span {
  display: table-cell;
  vertical-align: middle;
}

.resume-content .step-1 .each-box table {
  margin-top: 30px;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  border-collapse: collapse;
}

.resume-content .step-1 .each-box table th {
  width: 70px;
  color: #fff;
  padding: 12px 7px;
  font-weight: normal;
  border-right: 10px solid #fff;
  border-bottom: 1px solid #fff;
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
  background: #ccc;
}

.resume-content .step-1 .each-box table th.each-title {
  background: #e31a4c !important;
  width: 7%;
}

.resume-content .step-1 .each-box table td {
  font-weight: normal;
  padding: 12px 7px;
  vertical-align: middle;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  font-size: 13px;
  text-align: center;
}

.resume-content .step-1 .each-box table td input {
  width: 100%;
  border: 0;
}

.resume-content .step-1 .each-box table td input::placeholder {
  color: #ccc;
}

.resume-content .step-1 .each-box table td .add-button {
  border: 2px solid #e31a4c;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  color: #e31a4c;
}

.resume-content .step-1 .each-box table td .add-button:hover {
  background: #e31a4c;
  color: #fff;
}

.resume-content .step-1 .each-box table td .add-button:hover .icon {
  color: #fff;
  border-color: #fff;
}

.resume-content .step-1 .each-box table td .add-button .icon {
  border: 2px solid #e31a4c;
  color: #e31a4c;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
  width: 22px;
  height: 22px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 23px;
}

.resume-content .step-1 .each-box table tr:last-child td {
  border-bottom: 1px solid #eee;
}

.resume-content .step-2 .intro {
  border: 2px solid #e31a4c;
  max-height: 700px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 20px;
}

.resume-content .step-2 .intro::placeholder {
  color: #ccc;
}

.resume-content .step-2 .resume-agree-box {
  margin-top: 50px;
}

.resume-content .step-2 .resume-agree-box .title {
  font-size: 20px;
  font-weight: lighter;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #666;
}

.resume-content .step-2 .resume-agree-box .info-box {
  border: 1px solid #ccc;
  padding: 10px;
  letter-spacing: -0.5px;
}

.resume-content .step-2 .resume-agree-box .info-box span {
  color: #999;
}

.resume-content .button-area {
  margin-top: 100px;
  overflow: hidden;
  margin-bottom: 10px;
}

.resume-content .button-area button {
  width: 99%;
}

.resume-content .button-area .gray-button {
  border: 2px solid #898989;
  color: #898989;
  text-align: center;
  padding: 10px 0;
  font-size: 17px;
  background: #fff;
  transition: all 0.3s;
}

.resume-content .button-area .gray-button:hover {
  transition: all 0.3s;
  color: #fff;
  background: #898989;
}

.resume-content .button-area .primary-button {
  border: 2px solid #df0440;
  color: #df0440;
  text-align: center;
  padding: 10px 0;
  font-size: 17px;
  background: #fff;
  transition: all 0.3s;
}

.resume-content .button-area .primary-button:hover {
  transition: all 0.3s;
  color: #fff;
  background: #df0440;
}

.modal-banner-pc .preview-box,
.modal-banner-mobile .preview-box {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  margin-bottom: 30px;
  margin: auto;
  width: 100%;
  height: 130px;
  margin-bottom: 30px;
}

.modal-banner-pc .preview-box span,
.modal-banner-mobile .preview-box span {
  position: absolute;
  cursor: pointer;
  transition: 0.3s;
}

.modal-banner-pc .preview-box span:hover,
.modal-banner-mobile .preview-box span:hover {
  opacity: 0.5;
}

.modal-banner-pc .preview-box .prev,
.modal-banner-mobile .preview-box .prev {
  top: 45px;
  left: 0;
}

.modal-banner-pc .preview-box .next,
.modal-banner-mobile .preview-box .next {
  top: 45px;
  right: 0;
}

.modal-banner-pc .preview-box .image-preview,
.modal-banner-mobile .preview-box .image-preview {
  margin: auto;
  height: 130px;
  position: relative;
  overflow: hidden;
}

.modal-banner-pc .preview-box .image-preview .img-box,
.modal-banner-mobile .preview-box .image-preview .img-box {
  overflow: hidden;
  text-align: center;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img {
  padding: 0 1px;
  display: inline-block;
  width: 160px;
  height: 120px;
  border: 1px solid #dfdfdf;
  margin: 0 7.5px;
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img:first-child,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img:first-child {
  margin-left: 0;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img img,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img img {
  width: 100%;
  height: 100%;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img .remove,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img .remove {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  font-size: 13px;
  padding: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img .remove:hover,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img .remove:hover {
  opacity: 0.5;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img label.label-watermark,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img label.label-watermark {
  position: absolute;
  right: 5px;
  font-size: 12px;
  bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img label.label-main,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img label.label-main {
  position: absolute;
  left: 5px;
  font-size: 12px;
  bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img label.label-thumb,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img label.label-thumb {
  position: absolute;
  left: 5px;
  font-size: 12px;
  bottom: 30px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img label.label-cel,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img label.label-cel {
  position: absolute;
  right: 5px;
  font-size: 12px;
  bottom: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img:hover,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img:hover {
  cursor: pointer;
  border: 1px solid #ee4352;
}

.modal-banner-pc .preview-box .image-preview .img-box .each-img:hover .remove,
.modal-banner-mobile .preview-box .image-preview .img-box .each-img:hover .remove {
  display: block;
}

.banner-box {
  position: relative;
}

.banner-box img {
  display: inline-block;
  width: 160px;
  height: 120px;
  border: 1px solid #dfdfdf;
  margin: 0 7.5px;
  box-sizing: border-box;
}

.banner-box .arrow-up {
  position: absolute;
  top: 3px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
  color: #aaa;
}

.banner-box .arrow-up:hover {
  opacity: 0.7;
}

.banner-box .arrow-down {
  position: absolute;
  top: 30px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
}

.banner-box .arrow-down:hover {
  opacity: 0.7;
}

.promotion-page td.note {
  position: relative;
}

.promotion-page td.note button {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

@media print {
  .ask-page,
  .old-ask-page,
  .modal-ask-edit,
  .modal-oldask-edit {
    display: none;
    /* hide whole page */
  }
}

.draggable {
  -webkit-touch-callout: text !important;
  user-select: text !important;
}

.sales-table tr.sun {
  background: #ffe8e8;
}

.sales-table tr.sat {
  background: #dff4ff;
}

.event-list table th {
  text-align: center;
}

.event-list table td {
  padding: 20px !important;
}

.event-list table td p {
  margin-bottom: 7px;
}

.event-list table td p.label {
  display: inline-block;
  padding: 3px 7px;
  margin-right: 6px;
  margin-bottom: 3px;
  font-size: 11px;
  color: #fff;
}

.event-list table td p.label.SC006 {
  background: #777;
}

.event-list table td p.label.SC002 {
  background: #337ab7;
}

.event-list table td p.label.SC003 {
  background: #5cb85c;
}

.event-list table td p.label.SC004 {
  background: #5bc0de;
}

.event-list table td p.label.SC005 {
  background: #f0ad4e;
}

.event-list table td p.label.SC001 {
  background: #d9534f;
}

.event-list table td p.label.SC007 {
  background: #786fd8;
}

.event-list table td p.manager {
  vertical-align: text-top;
  font-size: 13px;
  color: #666;
  display: inline-block;
}

.event-list table td p.date {
  color: #666;
  font-size: 13px;
}

.event-list table td p.title {
  color: #333;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 12px;
}

.event-list table td p.content {
  color: #666;
  font-size: 12px;
  line-height: 19px;
}

.calendar-header {
  margin-bottom: 50px;
  text-align: center;
}

.calendar-header .calendar-title {
  font-size: 35px;
  vertical-align: middle;
  display: inline-block;
  margin: 0 50px;
}

.calendar-header .c_arrow {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  transition: all 0.3s;
  vertical-align: middle;
  cursor: pointer;
}

.calendar-header .c_arrow.left img {
  transform: rotate(180deg);
}

.calendar-header .c_arrow img {
  width: 100%;
}

.calendar-table th {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

.calendar-table td {
  border: 1px solid #ccc;
  position: relative;
  width: 200px;
  height: 100px;
}

.calendar-table td.today {
  background: #ffe4e4;
}

.calendar-table td:first-child span.day {
  color: #d6212f;
}

.calendar-table td span.day {
  position: absolute;
  left: 5px;
  top: 5px;
  font-size: 13px;
}

.calendar-table td span.day.td-holiday {
  color: #d6212f;
}

.calendar-table td .holiday {
  font-size: 12px;
  padding: 3px 7px;
  color: #d6212f;
  float: right;
  border: 1px solid #d6212f;
  margin: 1px;
}

.calendar-table td .event_box {
  cursor: pointer;
  transition: opacity 0.3s;
  position: absolute;
  left: 0;
  font-size: 12px;
  line-height: 18px;
  color: #333;
  padding: 8px 10px;
  border-left: 0;
  top: 29px;
}

.calendar-table td .event_box:hover {
  opacity: 0.8;
  transition: opacity 0.3s;
}

.calendar-table td .event_box.line {
  background: rgba(243, 243, 243, 0.4);
  padding: 5px 10px;
  position: absolute;
  left: 0;
  color: #333;
  z-index: 1;
}

.calendar-table td .event_box.line.on {
  background: #777;
  color: #fff;
  transition: all 0.3s;
}

.calendar-table td .event_box.dot {
  z-index: 2;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid #e9e9e9;
  font-weight: lighter;
  color: #333;
}

.calendar-table td .event_box .type-name {
  display: inline-block;
  padding: 1px 3px;
  margin-right: 6px;
  margin-bottom: 3px;
  font-size: 10px;
  color: #fff;
}

.calendar-table td .event_box .type-name.SC006 {
  background: #777;
}

.calendar-table td .event_box .type-name.SC002 {
  background: #337ab7;
}

.calendar-table td .event_box .type-name.SC003 {
  background: #5cb85c;
}

.calendar-table td .event_box .type-name.SC004 {
  background: #5bc0de;
}

.calendar-table td .event_box .type-name.SC005 {
  background: #f0ad4e;
}

.calendar-table td .event_box .type-name.SC001 {
  background: #d9534f;
}

.calendar-table td .event_box .type-name.SC007 {
  background: #786fd8;
}

.s_arrow {
  cursor: pointer;
  color: #999;
}

.modal-schedule-add .label-box,
.modal-schedule-read .label-box {
  display: inline-block;
  margin-right: 10px;
}

.modal-schedule-add .label-box:last-child,
.modal-schedule-read .label-box:last-child {
  margin-right: 0;
}

.asktime-box {
  background: #f2f2ec;
}

.asktime-box img {
  vertical-align: middle;
}

.asktime-box .radio-label {
  vertical-align: sub;
  font-size: 15px;
  margin-left: 15px;
}

.locker .guide-box {
  display: flex;
  justify-content: start;
}

.locker .guide-box .box {
  margin-right: 3px;
  text-align: center;
}

.locker .guide-box span {
  width: 30px;
  height: 30px;
  margin-right: 2px;
  display: inline-block;
  border: 1px solid #ccc;
  background: #fff;
}

.locker .guide-box span.occupied {
  background: #ffe4e4;
}

.locker .guide-box span.soon {
  color: #fff;
  background: #ee4352;
}

.locker .guide-box .text {
  font-size: 11px;
  letter-spacing: -1px;
}

.locker .each-locker {
  width: 48px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  border: 1px solid #d9d9d9;
  color: #666;
  text-align: center;
  float: left;
  letter-spacing: -0.5px;
  cursor: pointer;
}

.locker .each-locker.next {
  clear: left;
}

.locker .each-locker.occupied {
  background: #ffe4e4;
}

.locker .each-locker.soon {
  color: #fff;
  background: #ee4352;
}

.locker .clear {
  clear: both;
  display: block;
  padding: 50px 0 10px 0;
}

.locker .clear.blank {
  padding: 0;
}

.locker .fll-box {
  display: inline-block;
  margin-left: 40px;
}

.teacher-list h3 {
  background: #e94151;
  color: #fff;
  margin-bottom: 20px;
  padding: 10px;
}

.teacher-list .teacher-box {
  position: relative;
}

.teacher-list .teacher-box img {
  display: inline-block;
  width: 100px;
  height: 120px;
  border: 1px solid #dfdfdf;
  margin: 0 7.5px;
  box-sizing: border-box;
}

.teacher-list .teacher-box .arrow-up {
  position: absolute;
  top: 50px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
  color: #aaa;
}

.teacher-list .teacher-box .arrow-up:hover {
  opacity: 0.7;
}

.teacher-list .teacher-box .arrow-down {
  position: absolute;
  top: 80px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
}

.teacher-list .teacher-box .arrow-down:hover {
  opacity: 0.7;
}

.teacher-list .teacher-box .details p {
  font-size: 11px;
  color: #666;
  border-top: 1px solid #ccc;
  padding: 7px 0;
}

.div-input .form-error {
  display: inline-block;
  margin-left: 7px;
  margin-right: 7px;
  vertical-align: baseline;
}

.modal_body .pop_article {
  width: 300px;
  height: 650px;
  background: url("/assets/images/iphone.png") no-repeat;
  background-size: 100% 100%;
}

.modal_body .phone-frame {
  padding-top: 80px;
  width: 80%;
  margin: auto;
}

.modal_body .phone-frame .receive {
  background: #fff5f6;
  border: 1px solid #f7edee;
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
}

.modal_body .phone-frame .select-container {
  margin-top: 7px;
  background: #f5f5f5;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
}

.modal_body .phone-frame .select2-container--default .select2-selection--single {
  border: 0 !important;
}

.modal_body .phone-frame .textarea-container {
  position: relative;
}

.modal_body .phone-frame .textarea-container textarea {
  height: 200px;
  background: #f5f5f5;
  border: 1px solid #eeeeee;
  margin: 7px 0;
  width: 100%;
  padding: 10px 20px;
}

.modal_body .phone-frame .textarea-container textarea::placeholder {
  font-size: 20px;
  color: #eee;
}

.modal_body .phone-frame .textarea-container span.byte-container {
  position: absolute;
  bottom: 20px;
  right: 10px;
  font-size: 11px;
  color: #ccc;
}

.modal_body .phone-frame .sender-container {
  background: #fff5f6;
  border: 1px solid #f7edee;
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
}

.modal_body .phone-frame .send-button {
  width: 100%;
  padding: 10px !important;
  font-size: 14px !important;
  margin-top: 7px;
  height: initial !important;
  border-radius: 8px !important;
}

.modal_body .phone-frame .fll {
  text-align: left;
}

.modal-sms-write {
  min-width: 400px !important;
  max-width: 400px !important;
  z-index: 9999;
}
/*# sourceMappingURL=common.css.map */