@charset "UTF-8";
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans"), local("NotoSans"), url(/static/font/NotoSans.woff2) format("woff2"); }

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Noto Sans Bold"), local("NotoSans-Bold"), url(/static/font/NotoSans-Bold.woff2) format("woff2"); }

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 200;
  src: url(/static/font/NotoSansKR-Light.woff2) format("woff2"); }

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  src: url(/static/font/notokr-demilight.woff2) format("woff2"); }

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url(/static/font/NotoSansKR-Regular.woff2) format("woff2"); }

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url(/static/font/NotoSansKR-Medium.woff2) format("woff2"); }

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url(/static/font/NotoSansKR-Bold.woff2) format("woff2"); }

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  src: url(/static/font/NotoSansSC-Regular.woff2) format("woff2"); }

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  src: url(/static/font/NotoSansSC-Bold.woff2) format("woff2"); }

.mdc-card {
  background-color: #fff;
  /* @alternate */
  background-color: var(--mdc-theme-surface, #fff);
  border-radius: 4px;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  box-sizing: border-box; }

.mdc-card--outlined {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  border: 1px solid #e0e0e0; }

.mdc-card__media {
  position: relative;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }
  .mdc-card__media::before {
    display: block;
    content: ""; }

.mdc-card__media:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit; }

.mdc-card__media:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit; }

.mdc-card__media--square::before {
  margin-top: 100%; }

.mdc-card__media--16-9::before {
  margin-top: 56.25%; }

.mdc-card__media-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box; }

.mdc-card__primary-action {
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  outline: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden; }
  .mdc-card__primary-action::before, .mdc-card__primary-action::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: ""; }
  .mdc-card__primary-action::before {
    transition: opacity 15ms linear, background-color 15ms linear;
    z-index: 1; }
  .mdc-card__primary-action.mdc-ripple-upgraded::before {
    transform: scale(var(--mdc-ripple-fg-scale, 1)); }
  .mdc-card__primary-action.mdc-ripple-upgraded::after {
    top: 0;
    /* @noflip */
    left: 0;
    transform: scale(0);
    transform-origin: center center; }
  .mdc-card__primary-action.mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);
    /* @noflip */
    left: var(--mdc-ripple-left, 0); }
  .mdc-card__primary-action.mdc-ripple-upgraded--foreground-activation::after {
    animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; }
  .mdc-card__primary-action.mdc-ripple-upgraded--foreground-deactivation::after {
    animation: 150ms mdc-ripple-fg-opacity-out;
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); }
  .mdc-card__primary-action::before, .mdc-card__primary-action::after {
    top: calc(50% - 100%);
    /* @noflip */
    left: calc(50% - 100%);
    width: 200%;
    height: 200%; }
  .mdc-card__primary-action.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%); }
  .mdc-card__primary-action::before, .mdc-card__primary-action::after {
    background-color: #000; }
  .mdc-card__primary-action:hover::before {
    opacity: 0.04; }
  .mdc-card__primary-action:not(.mdc-ripple-upgraded):focus::before, .mdc-card__primary-action.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.12; }
  .mdc-card__primary-action:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear; }
  .mdc-card__primary-action:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.16; }
  .mdc-card__primary-action.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: 0.16; }

.mdc-card__primary-action:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit; }

.mdc-card__primary-action:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit; }

.mdc-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: 8px; }

.mdc-card__actions--full-bleed {
  padding: 0; }

.mdc-card__action-buttons,
.mdc-card__action-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box; }

.mdc-card__action-icons {
  color: rgba(0, 0, 0, 0.38);
  /* @alternate */
  color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
  flex-grow: 1;
  justify-content: flex-end; }

.mdc-card__action-buttons + .mdc-card__action-icons {
  /* @noflip */
  margin-left: 16px;
  /* @noflip */
  margin-right: 0; }
  [dir="rtl"] .mdc-card__action-buttons + .mdc-card__action-icons, .mdc-card__action-buttons + .mdc-card__action-icons[dir="rtl"] {
    /* @noflip */
    margin-left: 0;
    /* @noflip */
    margin-right: 16px; }

.mdc-card__action {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  cursor: pointer;
  user-select: none; }
  .mdc-card__action:focus {
    outline: none; }

.mdc-card__action--button {
  /* @noflip */
  margin-left: 0;
  /* @noflip */
  margin-right: 8px;
  padding: 0 8px; }
  [dir="rtl"] .mdc-card__action--button, .mdc-card__action--button[dir="rtl"] {
    /* @noflip */
    margin-left: 8px;
    /* @noflip */
    margin-right: 0; }
  .mdc-card__action--button:last-child {
    /* @noflip */
    margin-left: 0;
    /* @noflip */
    margin-right: 0; }
    [dir="rtl"] .mdc-card__action--button:last-child, .mdc-card__action--button:last-child[dir="rtl"] {
      /* @noflip */
      margin-left: 0;
      /* @noflip */
      margin-right: 0; }

.mdc-card__actions--full-bleed .mdc-card__action--button {
  justify-content: space-between;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 8px 16px;
  text-align: left; }
  [dir="rtl"] .mdc-card__actions--full-bleed .mdc-card__action--button, .mdc-card__actions--full-bleed .mdc-card__action--button[dir="rtl"] {
    text-align: right; }

.mdc-card__action--icon {
  margin: -6px 0;
  padding: 12px; }

.mdc-card__action--icon:not(:disabled) {
  color: rgba(0, 0, 0, 0.38);
  /* @alternate */
  color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38)); }

@keyframes mdc-ripple-fg-radius-in {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); }
  to {
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } }

@keyframes mdc-ripple-fg-opacity-in {
  from {
    animation-timing-function: linear;
    opacity: 0; }
  to {
    opacity: var(--mdc-ripple-fg-opacity, 0); } }

@keyframes mdc-ripple-fg-opacity-out {
  from {
    animation-timing-function: linear;
    opacity: var(--mdc-ripple-fg-opacity, 0); }
  to {
    opacity: 0; } }

.mdc-ripple-surface--test-edge-var-bug {
  --mdc-ripple-surface-test-edge-var: 1px solid #000;
  visibility: hidden; }
  .mdc-ripple-surface--test-edge-var-bug::before {
    border: var(--mdc-ripple-surface-test-edge-var); }

.mdc-button {
  font-family: Roboto, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 0.875rem;
  line-height: 2.25rem;
  font-weight: 500;
  letter-spacing: 0.08929em;
  text-decoration: none;
  text-transform: uppercase;
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: transform, opacity;
  padding: 0 8px 0 8px;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 64px;
  height: 36px;
  border: none;
  outline: none;
  /* @alternate */
  line-height: inherit;
  user-select: none;
  -webkit-appearance: none;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 4px; }
  .mdc-button::before, .mdc-button::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: ""; }
  .mdc-button::before {
    transition: opacity 15ms linear, background-color 15ms linear;
    z-index: 1; }
  .mdc-button.mdc-ripple-upgraded::before {
    transform: scale(var(--mdc-ripple-fg-scale, 1)); }
  .mdc-button.mdc-ripple-upgraded::after {
    top: 0;
    /* @noflip */
    left: 0;
    transform: scale(0);
    transform-origin: center center; }
  .mdc-button.mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);
    /* @noflip */
    left: var(--mdc-ripple-left, 0); }
  .mdc-button.mdc-ripple-upgraded--foreground-activation::after {
    animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; }
  .mdc-button.mdc-ripple-upgraded--foreground-deactivation::after {
    animation: 150ms mdc-ripple-fg-opacity-out;
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); }
  .mdc-button::before, .mdc-button::after {
    top: calc(50% - 100%);
    /* @noflip */
    left: calc(50% - 100%);
    width: 200%;
    height: 200%; }
  .mdc-button.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%); }
  .mdc-button::-moz-focus-inner {
    padding: 0;
    border: 0; }
  .mdc-button:active {
    outline: none; }
  .mdc-button:hover {
    cursor: pointer; }
  .mdc-button:disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.37);
    cursor: default;
    pointer-events: none; }
  .mdc-button.mdc-button--dense {
    border-radius: 4px; }
  .mdc-button:not(:disabled) {
    background-color: transparent; }
  .mdc-button:not(:disabled) {
    color: #6200ee;
    /* @alternate */
    color: var(--mdc-theme-primary, #6200ee); }
  .mdc-button::before, .mdc-button::after {
    background-color: #6200ee; }
    @supports not (-ms-ime-align: auto) {
      .mdc-button::before, .mdc-button::after {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee); } }
  .mdc-button:hover::before {
    opacity: 0.04; }
  .mdc-button:not(.mdc-ripple-upgraded):focus::before, .mdc-button.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.12; }
  .mdc-button:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear; }
  .mdc-button:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.16; }
  .mdc-button.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: 0.16; }
  .mdc-button .mdc-button__icon {
    /* @noflip */
    margin-left: 0;
    /* @noflip */
    margin-right: 8px;
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    vertical-align: top; }
    [dir="rtl"] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir="rtl"] {
      /* @noflip */
      margin-left: 8px;
      /* @noflip */
      margin-right: 0; }
  .mdc-button svg.mdc-button__icon {
    fill: currentColor; }

.mdc-button--raised .mdc-button__icon,
.mdc-button--unelevated .mdc-button__icon,
.mdc-button--outlined .mdc-button__icon {
  /* @noflip */
  margin-left: -4px;
  /* @noflip */
  margin-right: 8px; }
  [dir="rtl"] .mdc-button--raised .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir="rtl"], [dir="rtl"]
  .mdc-button--unelevated .mdc-button__icon,
  .mdc-button--unelevated .mdc-button__icon[dir="rtl"], [dir="rtl"]
  .mdc-button--outlined .mdc-button__icon,
  .mdc-button--outlined .mdc-button__icon[dir="rtl"] {
    /* @noflip */
    margin-left: 8px;
    /* @noflip */
    margin-right: -4px; }

.mdc-button--raised,
.mdc-button--unelevated {
  padding: 0 16px 0 16px; }
  .mdc-button--raised:disabled,
  .mdc-button--unelevated:disabled {
    background-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.37); }
  .mdc-button--raised:not(:disabled),
  .mdc-button--unelevated:not(:disabled) {
    background-color: #6200ee; }
    @supports not (-ms-ime-align: auto) {
      .mdc-button--raised:not(:disabled),
      .mdc-button--unelevated:not(:disabled) {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee); } }
  .mdc-button--raised:not(:disabled),
  .mdc-button--unelevated:not(:disabled) {
    color: #fff;
    /* @alternate */
    color: var(--mdc-theme-on-primary, #fff); }
  .mdc-button--raised::before, .mdc-button--raised::after,
  .mdc-button--unelevated::before,
  .mdc-button--unelevated::after {
    background-color: #fff; }
    @supports not (-ms-ime-align: auto) {
      .mdc-button--raised::before, .mdc-button--raised::after,
      .mdc-button--unelevated::before,
      .mdc-button--unelevated::after {
        /* @alternate */
        background-color: var(--mdc-theme-on-primary, #fff); } }
  .mdc-button--raised:hover::before,
  .mdc-button--unelevated:hover::before {
    opacity: 0.08; }
  .mdc-button--raised:not(.mdc-ripple-upgraded):focus::before, .mdc-button--raised.mdc-ripple-upgraded--background-focused::before,
  .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus::before,
  .mdc-button--unelevated.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.24; }
  .mdc-button--raised:not(.mdc-ripple-upgraded)::after,
  .mdc-button--unelevated:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear; }
  .mdc-button--raised:not(.mdc-ripple-upgraded):active::after,
  .mdc-button--unelevated:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.32; }
  .mdc-button--raised.mdc-ripple-upgraded,
  .mdc-button--unelevated.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: 0.32; }

.mdc-button--raised {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); }
  .mdc-button--raised:hover, .mdc-button--raised:focus {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
  .mdc-button--raised:active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
  .mdc-button--raised:disabled {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); }

.mdc-button--outlined {
  border-style: solid;
  padding: 0 14px 0 14px;
  border-width: 2px; }
  .mdc-button--outlined:disabled {
    border-color: rgba(0, 0, 0, 0.37); }
  .mdc-button--outlined:not(:disabled) {
    border-color: #6200ee;
    /* @alternate */
    border-color: var(--mdc-theme-primary, #6200ee); }

.mdc-button--dense {
  height: 32px;
  font-size: .8125rem; }

h1 img {
  height: 30px; }

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #CCC;
  background-color: #FFF;
  z-index: 1001; }
  #site-header h1 {
    display: inline-block;
    width: 162px; }
  #site-header-toggle-gnb {
    display: inline-block;
    width: 50px;
    border: 0;
    background-color: transparent; }
  #site-header-menu {
    display: inline-block;
    margin-left: 2rem; }
    #site-header-menu li {
      display: inline-block; }
      #site-header-menu li a {
        display: block;
        padding: 2rem;
        border-bottom: 3px solid transparent;
        color: #737373;
        font-weight: 700;
        text-transform: uppercase;
        box-sizing: border-box; }
        #site-header-menu li a:hover {
          color: #333; }
        #site-header-menu li a.active {
          border-bottom-color: #7ed321;
          color: #7ed321; }
  #site-header-setting {
    position: absolute;
    right: 2rem;
    bottom: calc((100% - 3.5rem) / 2); }
    #site-header-setting .dropdown {
      display: inline-block; }

#gnb-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  z-index: 1002;
  transition: background-color .15s linear; }
  #gnb-container.active {
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    transition-duration: 235ms; }
    #gnb-container.active #gnb-content {
      transform: translateX(0);
      transition-duration: 235ms; }
    #gnb-container.active::after {
      display: block;
      width: 100%;
      left: 100%;
      background-color: #000; }

#gnb-content {
  padding-bottom: 3rem;
  width: 240px;
  height: 100%;
  background: #8bde2f;
  overflow-y: scroll;
  transform: translateX(-100%);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
  #gnb-content h1 {
    padding: 2rem;
    text-align: center;
    box-sizing: border-box; }
    #gnb-content h1 img {
      filter: grayscale(100%); }
  #gnb-content h3 {
    padding: .9rem 1.2rem;
    font-size: 1.1em;
    letter-spacing: 1px; }
  #gnb-content ul {
    margin: 0;
    padding: 0; }
    #gnb-content ul a {
      display: block;
      margin-bottom: .3em;
      padding: .9rem 1.2em;
      font-size: .9em;
      color: #333;
      box-sizing: border-box; }
      #gnb-content ul a:hover {
        background-color: #7ed321;
        text-decoration: none; }
  #gnb-content hr {
    margin: 3rem 0;
    border-top-color: #333; }
  #gnb-content h2 + hr {
    margin-top: -6px; }

#snb {
  position: fixed;
  top: 64px;
  width: 50px;
  height: 100%;
  border-right: 1px solid #CCC;
  background-color: #f7f7f7;
  z-index: 1000; }
  #snb i {
    display: inline-block;
    width: 40px;
    font-size: 1.3em;
    text-align: center; }
  #snb span {
    display: none; }
  #snb a {
    display: block;
    padding: 1rem .5rem;
    font-size: .9em; }
    #snb a:hover {
      background-color: #ebebeb;
      color: #333; }
    #snb a.active {
      background-color: #7ed321;
      color: #FFF; }
  #snb ul {
    margin: 0 !important;
    padding: 0 !important; }
    #snb ul ul {
      border-top: 1px solid #CCC; }
  #snb > ul > li > span {
    display: block !important;
    margin-top: 1.5px;
    padding: 2rem .5rem;
    font-size: 2rem;
    font-weight: 500;
    white-space: nowrap;
    visibility: hidden; }
  #snb.active:hover {
    width: 240px; }
    #snb.active:hover span {
      display: inline; }
    #snb.active:hover > ul > li > span {
      padding: 2rem 1.5rem;
      visibility: visible; }
  #snb .snb-menu {
    display: none; }
  #snb.book-active .book-sub {
    display: block; }
  #snb.collection-active .collection-sub {
    display: block; }
  #snb.code-active .code-sub {
    display: block; }
  #snb.extra-active .extra-sub {
    display: block; }

.roadmap-add-row {
  margin-top: 1em;
  text-align: center; }

.roadmap-rows {
  margin: 1em 0 2em 0;
  max-height: 480px;
  overflow: auto; }
  .roadmap-rows .roadmap-row {
    position: relative;
    margin-bottom: 1em;
    background: #FFF; }
    .roadmap-rows .roadmap-row.chosen {
      opacity: .4; }
    .roadmap-rows .roadmap-row.drag {
      opacity: .8; }
  .roadmap-rows .handler-wrapper {
    padding: 4px 12px;
    border: 1px solid #CCC;
    background-color: #e6e6e6;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
    .roadmap-rows .handler-wrapper a {
      display: inline-block;
      padding: 4px 10px;
      color: #999999; }

.roadmap-context-menu {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #CCC;
  background: #fafafa;
  transform: translateY(-50%); }
  .roadmap-context-menu a {
    padding: 6px 12px;
    border-bottom: 1px solid #e6e6e6; }
    .roadmap-context-menu a:hover {
      background: #f2f2f2;
      color: #333; }
  .roadmap-context-menu li:last-child a {
    border-bottom: 0; }
  .roadmap-context-menu.active {
    display: block; }

.roadmap-not-managed {
  margin: 1em 0 2em 0;
  border: 1px dashed #CCC !important;
  flex-wrap: wrap; }
  .roadmap-not-managed li {
    margin-bottom: 1em; }
    .roadmap-not-managed li.empty {
      width: 100%; }
  .roadmap-not-managed-wrapper {
    position: relative; }

.roadmap-output h1 {
  text-align: center; }

.roadmap-output ul.books {
  position: relative;
  margin-bottom: 3em;
  border: 0;
  justify-content: center; }
  .roadmap-output ul.books:after {
    position: absolute;
    bottom: -2em;
    font-family: FontAwesome;
    content: '\f063'; }

.roadmap-output .roadmap-row:last-child ul.books:after {
  display: none; }

.roadmap-output .handler-wrapper {
  display: none; }

.roadmap-preview-form button[type=submit] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

.roadmap-preview-form [class^=col-] {
  margin: 0;
  padding: 0; }

.roadmap-preview-form .roadmap-collection-dropdown {
  display: inline-block;
  width: 100%; }
  .roadmap-preview-form .roadmap-collection-dropdown button.btn {
    display: block;
    position: relative;
    width: 100%;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    text-align: left; }
    .roadmap-preview-form .roadmap-collection-dropdown button.btn:after {
      display: block;
      position: absolute;
      top: 6px;
      right: 12px;
      font-family: FontAwesome;
      content: '\f0d7'; }

.roadmap-preview-form .dropdown-menu {
  max-height: 400px;
  overflow-y: auto; }

.roadmap-wrapper a {
  display: block; }

.roadmap-wrapper ul.books {
  display: flex;
  padding: 1em;
  border: 1px solid #CCC;
  border-top: 0; }
  .roadmap-wrapper ul.books li {
    background-color: transparent; }
    .roadmap-wrapper ul.books li img {
      max-width: 100%;
      height: auto; }
    .roadmap-wrapper ul.books li span.title {
      display: block;
      height: 47px;
      font-size: 11px;
      line-height: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all; }
      .roadmap-wrapper ul.books li span.title small {
        display: block;
        margin-bottom: 5px;
        font-size: 9px;
        color: #b3b3b3;
        letter-spacing: 1px; }
    .roadmap-wrapper ul.books li.selected {
      color: #7ed321; }
    .roadmap-wrapper ul.books li.empty {
      text-align: center;
      color: #b3b3b3; }

.roadmap-wrapper span.bid {
  display: block;
  font-size: .8em;
  color: #b3b3b3; }

#series-guide {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 940px;
  min-width: 290px; }
  #series-guide .legend-container {
    margin-bottom: 1em; }
    #series-guide .legend-container a {
      display: inline-block;
      margin-right: 1em;
      border: 0;
      color: gray; }
      #series-guide .legend-container a:hover {
        color: #7ed321; }
        #series-guide .legend-container a:hover:before {
          content: '\f058'; }
      #series-guide .legend-container a:before {
        display: inline-block;
        margin-right: .5em;
        font-family: FontAwesome;
        content: '\f111'; }
  #series-guide-wrapper {
    margin-bottom: 2em;
    width: 100%;
    overflow: hidden;
    overflow-x: auto; }
  #series-guide-list {
    margin-top: .5em; }
    #series-guide-list li.active {
      border: 1px solid #7ed321;
      background: #FFF;
      color: #7ed321; }
  #series-guide-ages {
    display: flex;
    position: absolute;
    list-style: none;
    width: 100%;
    height: 100%;
    background-color: #f3f4f5;
    z-index: 1; }
    #series-guide-ages li {
      width: 10%;
      border-right: 1px dashed #CCC;
      text-align: center; }
      #series-guide-ages li:last-child {
        border-right: 0; }
    #series-guide-ages span {
      display: block;
      padding: 13px 0;
      background: #314780;
      text-align: center;
      font-size: 12px;
      color: #FFF; }
      @media screen and (min-width: 700px) {
        #series-guide-ages span {
          font-size: 16px; } }
  #series-guide-items {
    position: relative;
    padding-top: 47px;
    padding-bottom: 30px;
    z-index: 2; }
    #series-guide-items .series-guide-item {
      margin-top: 10px; }
      @media screen and (min-width: 700px) {
        #series-guide-items .series-guide-item:first-child {
          margin-top: 30px; } }
      @media screen and (min-width: 700px) {
        #series-guide-items .series-guide-item {
          margin-top: 20px; } }

#series-guide.edit {
  width: 100%; }

#series-guide.view .series-guide-item .item-title {
  display: none;
  background-color: #ffdf4a; }
  #series-guide.view .series-guide-item .item-title span {
    display: block;
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

#series-guide.view .series-guide-item .item-details {
  display: none;
  font-weight: 200; }

#series-guide.view .series-guide-item.active .item-title {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #f1a43c;
  color: #FFF; }
  #series-guide.view .series-guide-item.active .item-title:after {
    content: '\f139'; }

#series-guide.view .series-guide-item.active .item-details {
  display: block; }

#series-guide.view .series-guide-item:hover .item-title {
  background-color: #f1a43c;
  color: #FFF; }

.series-guide-item a.item-title {
  padding: 6px 8px 7px 6px;
  border: 0;
  border-radius: 4px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  box-sizing: border-box;
  display: block;
  position: relative;
  padding-left: 8px;
  text-decoration: none; }
  .series-guide-item a.item-title:after {
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: FontAwesome;
    font-size: 16px;
    content: '\f13a'; }
  @media screen and (min-width: 700px) {
    .series-guide-item a.item-title {
      padding: 15px 0 12px 0; }
      .series-guide-item a.item-title:after {
        top: 16px;
        right: 14px;
        font-size: 18px; } }
  .series-guide-item a.item-title.active {
    background-color: #f1a43c; }
  @media screen and (min-width: 700px) {
    .series-guide-item a.item-title {
      padding-left: 20px; } }

.series-guide-item .item-details {
  padding: 15px;
  border: 2px solid #f1a43c;
  background: #FFF;
  font-size: 14px; }
  .series-guide-item .item-details h4 {
    margin: 0;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    font-size: 18px;
    color: #333;
    text-align: left; }
  .series-guide-item .item-details img {
    width: 79px;
    height: auto;
    border: 1px solid #CCC; }
    @media screen and (min-width: 700px) {
      .series-guide-item .item-details img {
        width: auto;
        max-width: 100%; } }
  .series-guide-item .item-details table {
    margin-bottom: 0;
    width: 100%; }
  .series-guide-item .item-details td {
    padding: 0;
    border: 0;
    text-align: left; }
  .series-guide-item .item-details .img-container {
    margin-bottom: 20px; }
    @media screen and (min-width: 700px) {
      .series-guide-item .item-details .img-container {
        float: left;
        margin-bottom: 0;
        margin-right: 30px;
        width: 25%;
        text-align: center; } }
  .series-guide-item .item-details .details-container {
    width: 100%; }
    @media screen and (min-width: 700px) {
      .series-guide-item .item-details .details-container {
        float: right;
        width: calc(75% - 30px); } }
  .series-guide-item .item-details .btn-group {
    position: absolute;
    right: 30px; }
  .series-guide-item .item-details .btn-container a {
    display: inline-block;
    margin-top: 2em;
    padding: 12px 30px;
    background: #7ed321;
    color: #FFF;
    font-weight: 500;
    text-decoration: none; }
    @media screen and (min-width: 700px) {
      .series-guide-item .item-details .btn-container a {
        padding: 23px 78px; } }
  @media screen and (min-width: 700px) {
    .series-guide-item .item-details {
      padding: 30px; } }

.series-guide-item .guide-item-tmp-title {
  display: inline-block;
  margin-left: 20px; }

.ui-widget .ui-slider-range {
  padding: 6px 8px 7px 6px;
  border: 0;
  border-radius: 4px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  box-sizing: border-box;
  height: 14px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #f1a43c;
  color: #FFF;
  box-sizing: content-box; }
  .ui-widget .ui-slider-range:after {
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: FontAwesome;
    font-size: 16px;
    content: '\f13a'; }
  @media screen and (min-width: 700px) {
    .ui-widget .ui-slider-range {
      padding: 15px 0 12px 0; }
      .ui-widget .ui-slider-range:after {
        top: 16px;
        right: 14px;
        font-size: 18px; } }
  .ui-widget .ui-slider-range:after {
    display: inline-block;
    position: absolute;
    top: 13px;
    right: 14px;
    font-family: FontAwesome;
    font-size: 18px;
    content: '\f139'; }

.ui-widget .ui-slider-handle {
  top: -.1em;
  margin-left: -.3em;
  height: 103%;
  width: 10px;
  border: 0;
  background-color: transparent; }
  .ui-widget .ui-slider-handle:hover, .ui-widget .ui-slider-handle:active {
    background-color: #CCC; }

.ui-widget.ui-slider {
  height: 41px;
  background-color: transparent; }

.ui-widget.ui-widget-content {
  border: 0; }

#deeplink {
  padding: 3rem; }
  #deeplink .btn {
    padding: 24px 0;
    font-size: 1.4rem; }
    #deeplink .btn-primary {
      border: 0; }
      #deeplink .btn-primary:hover, #deeplink .btn-primary:active {
        background-color: #7ed321;
        color: #FFF; }
  #deeplink-container {
    margin: 0 auto;
    padding: 0 15px;
    width: 320px;
    box-sizing: border-box; }
    #deeplink-container h1 {
      margin: 0;
      margin-bottom: 1rem;
      padding: 0; }
      #deeplink-container h1 img {
        width: auto;
        height: 30px; }
    @media screen and (min-width: 768px) {
      #deeplink-container {
        width: 700px; } }

#deeplink-container .book-item h2 {
  margin: 0;
  padding: 0;
  line-height: 1.5em; }
  #deeplink-container .book-item h2 small {
    display: block; }

#deeplink-container .book-item img {
  max-width: 100%;
  height: auto;
  border: 1px solid #CCC; }

#deeplink-container .book-item .book-item-thumbnail {
  margin-bottom: 1em;
  text-align: center; }
  @media screen and (min-width: 768px) {
    #deeplink-container .book-item .book-item-thumbnail {
      float: left;
      width: 25%; } }

#deeplink-container .book-item .book-item-details {
  margin-bottom: 1em; }
  @media screen and (min-width: 768px) {
    #deeplink-container .book-item .book-item-details {
      float: right;
      padding-left: 15px;
      width: 75%;
      box-sizing: border-box; } }

#deeplink-container .book-item .description {
  margin-top: .75em;
  font-size: 1.4rem; }

.sentence-list {
  list-style: none; }
  .sentence-list li {
    position: relative;
    padding: 1em 0 1.5em;
    border-bottom: solid 1px #eeeeee; }
    .sentence-list li:hover .btn-container {
      display: inline-block; }
    .sentence-list li .additional-wrap {
      margin-top: 15px;
      padding-left: 15px; }
  .sentence-list .btn-container {
    display: inline-block;
    position: absolute;
    padding: 0;
    padding-left: .5em; }

#book-details h3 {
  font-size: 1.6rem;
  font-weight: 700; }

#book-details h4 {
  margin: 4rem 0 1.6rem;
  color: #7ed321;
  font-weight: 700; }

#book-details .word-item {
  position: relative;
  padding: 1.6rem;
  border: 1px solid #eee;
  border-radius: 2px; }
  #book-details .word-item .add-sentence {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem; }
  #book-details .word-item ul li .btn-container {
    display: none; }
  #book-details .word-item ul li:hover .btn-container {
    display: inline-block;
    vertical-align: middle; }
  #book-details .word-item ul li:last-child {
    border-bottom: 0; }

html {
  position: relative;
  min-height: 100%; }

body {
  margin: 0;
  padding: 0;
  padding-top: 65px;
  font-family: 'Noto Sans', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  line-height: 1.5em; }
  body.login {
    margin: 0 auto;
    width: 400px;
    height: 200px; }
    body.login .notification {
      margin-top: 1em; }
  body > .navbar {
    border-bottom: 1px solid #CCC;
    background-color: #FFF; }
    body > .navbar h1 {
      margin-bottom: 0; }
    body > .navbar .dropdown {
      display: inline-block; }
  body .container-fluid .navbar-right {
    margin: 1em 1em 0 0; }
  body.lock {
    overflow: hidden; }
  @media screen and (max-width: 767px) {
    body {
      padding-top: 105px; }
      body .container-fluid .navbar {
        margin: 0; } }

body.editor-widget {
  padding-top: 0; }
  body.editor-widget .navbar,
  body.editor-widget .gnb,
  body.editor-widget footer {
    display: none; }

h1, h2, h3, h4, h5, h6,
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0; }

ul ul {
  padding-left: 1em !important; }

h1 {
  font-size: 1px; }

h2 {
  display: inline-block;
  font-size: 2rem; }

h3,
h4,
h5,
h6 {
  font-size: 1em; }

/*/
h4 {
    margin-top: 2em;
    margin-bottom: .5em;
    padding: .3em 0;
    border-top: 1px solid #CCC;
    color: #000;
}
/**/
table {
  width: 100%;
  border-collapse: collapse; }

th, td {
  padding: .5em 0;
  border-bottom: 1px solid #CCC; }
  th input[type=text], td input[type=text] {
    width: 100%; }
  th.title, td.title {
    text-align: left; }
    th.title small, td.title small {
      display: block;
      color: #b3b3b3; }

th {
  border-bottom: 2px solid #333; }

dt, dd {
  margin: 0;
  margin-top: .5em;
  padding: 0; }

dt {
  font-weight: 400;
  clear: both; }

a {
  color: #333;
  text-decoration: none !important; }
  a:hover {
    color: #7ed321; }

fieldset {
  margin-bottom: 3em;
  border: 0; }

legend {
  font-size: 1em; }

input {
  padding: 6px;
  border: 1px solid #CCC;
  border-radius: 6px;
  font-size: 1em; }

textarea {
  display: block;
  width: 100%;
  border: 1px solid #CCC; }

label {
  display: block;
  margin-bottom: .5em; }
  label.inline {
    display: inline-block; }

.small {
  font-size: .9em; }

.notice {
  color: #F00; }

.panel {
  padding: 1em 1.5em;
  border-radius: .5em;
  background-color: #f2f2f2; }

.status-cancel {
  color: #F00; }

.status-waiting {
  color: #2e9ad0; }

.status-ing {
  color: #7ed321; }

.status-complete {
  color: #CCC; }

.change-order {
  position: relative; }

.change-target {
  display: table;
  position: absolute;
  left: 1em;
  width: 100%;
  background-color: #FFF;
  opacity: .5; }

.footer {
  padding: 2rem 0;
  width: 100%;
  font-size: .8em;
  text-align: center; }

#login_form {
  margin: 0 auto;
  margin-top: 100px;
  width: 400px;
  height: 200px; }
  #login_form h1 {
    margin-bottom: .5em; }
    #login_form h1 img {
      display: inline-block;
      padding-bottom: 8px;
      border-bottom: 2px solid #0a286c; }

span.required {
  color: #7ed321;
  vertical-align: super; }

.content {
  margin-left: 50px; }
  .content h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    font-size: 2rem;
    border-bottom: 1px solid #CCC; }
  .content-wrapper {
    position: relative;
    padding: 2rem; }
  .content-header-menu {
    position: absolute; }

table[id$="-list"],
table[id$="_list"] {
  table-layout: fixed; }

.dashboard-container {
  margin-bottom: 3em; }
  .dashboard-container h2 {
    display: block; }
  .dashboard-container big {
    font-size: 3em;
    color: #7ed321; }
  .dashboard-container table {
    table-layout: fixed; }
  .dashboard-container > div {
    margin-bottom: 3em; }

.btn-container {
  padding: 1em 0; }

.btn {
  border-radius: 2px;
  color: #333; }
  .btn:hover {
    background-color: white; }
  .btn-primary {
    background-color: #7ed321;
    color: #FFF; }
    .btn-primary:hover {
      background-color: #b0e971;
      color: #333; }
  .btn-danger {
    background-color: transparent;
    border: 1px solid #d43f3a;
    color: #d43f3a; }
    .btn-danger:hover {
      color: #ac2925; }

.word-item {
  margin-bottom: 1.5em; }
  .word-item strong {
    margin-right: 20px; }
  .word-item:hover .word-delete {
    display: inline-block; }

.word-delete {
  display: none; }

.label {
  padding: .5em;
  border-radius: 2px;
  background: #7ed321;
  font-size: .75em;
  color: #FFF;
  font-weight: 600; }

.level_container {
  width: 50%;
  text-align: left; }
  .level_container .btn-container {
    display: none;
    margin: 0;
    padding: 0; }
  .level_container .level_item {
    list-style: decimal;
    height: 2em;
    margin-bottom: .5em; }
    .level_container .level_item:hover .btn-container {
      display: inline-block; }

#pagination {
  margin-top: 2em;
  text-align: center; }
  #pagination a {
    display: inline-block;
    padding: .2em .5em;
    border: 1px solid #EEE; }
    #pagination a.active {
      background-color: #7ed321;
      color: #FFF;
      font-weight: 600; }

.book_item td:first-child {
  position: relative; }

.add_content {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 2em;
  color: #7ed321;
  z-index: 101; }

li.collection_item,
li.content_item {
  margin-bottom: .5em; }

.collection-description,
iframe#preview {
  width: 100%;
  height: 1em;
  min-width: 768px;
  max-width: 1200px;
  border: 0; }

.modal-content {
  box-shadow-color: rgba(0, 0, 0, 0.2); }

.modal-title {
  display: inline-block;
  padding-bottom: .4em;
  border-bottom: 3px solid #7ed321;
  color: #7ed321; }

.modal-header {
  padding-bottom: 0;
  border-bottom: 0; }

.modal-backdrop {
  background-color: #FFF; }

.confirm .btn-default {
  background-color: transparent;
  color: #CCC; }

.confirm .btn-primary {
  background-color: transparent;
  border: 1px solid #d43f3a;
  color: #d43f3a; }
  .confirm .btn-primary:hover {
    color: #ac2925; }

.notification {
  margin-bottom: 2em;
  padding: 1em;
  background: #ffb62c;
  border-radius: 6px;
  z-index: 101; }

.word_form li {
  list-style: decimal; }

#sentence-form td {
  text-align: left;
  vertical-align: top; }

.book_cover {
  display: inline-block;
  margin-right: .5em;
  width: 75px;
  height: auto;
  border: 1px solid #CCC;
  vertical-align: middle; }

ul.book_list {
  display: flex;
  margin-top: .5em;
  flex-wrap: wrap; }
  ul.book_list li {
    display: inline-block;
    width: 10%;
    margin: 0 .5em .75em 0;
    border: 1px solid #CCC;
    border-bottom: 2px solid #CCC;
    vertical-align: top; }
  ul.book_list img.book_cover {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto; }
  ul.book_list span {
    display: block;
    padding: .5em;
    font-size: .8em;
    line-height: 1.3em; }
    ul.book_list span strong {
      display: block;
      margin-bottom: .5em;
      font-size: .6em;
      color: #b3b3b3;
      letter-spacing: 1px; }

.img-container {
  margin-bottom: 20px; }
  .img-container img {
    width: auto;
    height: 240px; }

.info-container {
  margin-bottom: 20px;
  padding-bottom: 20px; }
  .info-container h4 {
    margin-bottom: 15px; }

.dadu-form {
  display: inline-block;
  padding: 1em .5em;
  border: 2px dashed transparent;
  background-color: #FFF;
  text-align: center;
  outline-offset: -10px; }
  .dadu-form label span {
    visibility: hidden; }
    .dadu-form label span::before {
      display: block;
      content: ''; }
  .dadu-form input,
  .dadu-form button {
    display: none; }
  .dadu-form.no-files, .dadu-form:hover {
    border-color: #7ed321; }
    .dadu-form.no-files label span, .dadu-form:hover label span {
      visibility: visible; }
  .dadu-form.multiple-images .dadu-img-container {
    margin-right: .75em;
    max-width: 240px; }

.dadu-uploading, .dadu-error {
  display: none; }

.dadu-img-container {
  display: inline-block;
  position: relative;
  max-width: 320px; }
  .dadu-img-container img {
    width: auto/9;
    max-width: 100%;
    height: auto; }
  .dadu-img-container button.dadu-img-del-btn {
    position: absolute;
    top: .5em;
    left: .5em;
    display: block;
    padding: .2em .5em;
    border: 0;
    border-radius: 1em;
    background-color: #F00;
    color: #FFF;
    font-size: 1.5em;
    visibility: hidden; }
    .dadu-img-container button.dadu-img-del-btn:active {
      background-color: #cc0000; }
  .dadu-img-container:hover button.dadu-img-del-btn {
    visibility: visible; }

.dadu-form.is-dragover {
  border-color: #7ed321;
  background-color: #b0e971;
  outline-offset: -10px; }
  .dadu-form.is-dragover label span {
    visibility: visible; }

.dadu-form.is-uploading .dadu-input {
  visibility: hidden; }

.dadu-form.is-uploading .dadu-uploading {
  display: block; }

.code-status {
  margin-bottom: 1em; }

#code-validation {
  color: #F00; }

#code-list ul {
  list-style: inside disc;
  margin-left: 1.5em; }

#code-list tbody > tr {
  cursor: pointer; }

#code-list .code.active {
  color: #7ed321;
  font-weight: 500; }

#code-list .code-customer-name {
  display: block;
  color: #b3b3b3; }

#code-list .code-detail {
  display: none;
  background-color: #f2f2f2; }
  #code-list .code-detail .btn-container {
    margin-right: 1.5em; }
  #code-list .code-detail.active {
    display: table-cell;
    position: relative; }
    #code-list .code-detail.active:before {
      display: block;
      position: absolute;
      top: -.5em;
      left: 2em;
      font-size: 2em;
      color: #f2f2f2;
      content: '▲'; }

#code-list .enabled {
  color: #7ed321; }

#code-list .disabled {
  color: #f2f2f2; }

#code-history ul {
  margin-right: 1em; }

#code-history select {
  width: 100%; }

#code-history a {
  display: block;
  padding: .5em .75em;
  border-bottom: 1px solid #CCC; }

#code-history .active a {
  color: #7ed321; }

.report-header, .report-item {
  margin-bottom: 3em; }

.report-item h3 strong {
  font-size: 1.2em;
  color: #7ed321; }

.report-item h4 {
  border: 0; }

.report-item table {
  margin-bottom: 2em; }
  .report-item table tbody td {
    position: relative;
    border-bottom: 1px dotted #CCC; }
  .report-item table tbody tr:last-child td {
    border-bottom: 0; }
  .report-item table tfoot td {
    border: 0;
    border-top: 1px solid #999999; }
  .report-item table .code-history-memo {
    position: absolute;
    display: none;
    right: 0;
    width: 270px;
    height: 180px;
    padding: 1em;
    background-color: #FFC;
    text-align: left;
    overflow: auto;
    z-index: 1; }

table table thead {
  display: none; }

table table td {
  border-bottom: 1px dotted #CCC; }

table table tr:last-child td {
  border: 0; }

.sales-order-idx {
  padding-top: 1em;
  font-weight: bold;
  vertical-align: top; }

.sales-order-meta {
  background-color: whitesmoke; }

#invoice h1 {
  margin: 0;
  padding: 0;
  margin-bottom: 16pt;
  text-align: center; }

#invoice #receiver-and-sender .receiver,
#invoice #receiver-and-sender .sender {
  width: 48%; }

#invoice #receiver-and-sender .receiver {
  float: left; }

#invoice #receiver-and-sender .sender {
  float: right; }

#invoice .receiver ul {
  margin-bottom: 16pt; }
  #invoice .receiver ul li {
    border-bottom: 1px solid #CCC; }

#invoice #ebs-media-info td {
  font-size: 9pt;
  border: 1px solid #999999; }

#invoice #total_price {
  margin: 16pt 0;
  padding: 8pt 16pt;
  background-color: #EEE;
  font-weight: bold;
  text-align: center; }

#invoice #order {
  font-size: 9pt; }
  #invoice #order td {
    padding-right: 4pt;
    border: 1px solid #CCC;
    text-align: right; }
    #invoice #order td:first-child {
      border-left: 0; }
    #invoice #order td:last-child {
      border-right: 0; }
  #invoice #order tbody tr:last-child td {
    border-bottom: 0; }
  #invoice #order tfoot td {
    border-top: 1px solid #000; }

#sales-print-iframe {
  display: none; }

#event-collection-list, #event-customer-list {
  margin: 0;
  padding: 0; }
  #event-collection-list a, #event-customer-list a {
    display: block;
    padding: .5em 1em;
    border-bottom: 1px solid #CCC; }
    #event-collection-list a small, #event-customer-list a small {
      display: block;
      color: #b3b3b3; }
      #event-collection-list a small span:after, #event-customer-list a small span:after {
        display: inline-block;
        margin: 0 .5em;
        content: '|'; }
    #event-collection-list a:hover, #event-customer-list a:hover {
      background-color: #fafafa; }

#event-filter-by-status input {
  visibility: hidden;
  margin-left: -1em; }

#event-list input {
  width: 100%;
  text-align: center; }
  #event-list input[readonly] {
    border: 0; }

#event-forced-expire-detail {
  display: none; }

#event-list a {
  display: block; }

#event-list tr {
  cursor: pointer; }

#event-list .event-title {
  text-align: left; }
  #event-list .event-title span {
    display: block;
    font-size: .8em;
    color: #b3b3b3; }

#series_list {
  position: relative; }

#collection-version-list .memo {
  font-size: .9em;
  color: #b3b3b3;
  font-style: italic; }

#importer-error-summary {
  background-color: #FFF; }
  #importer-error-summary li {
    line-height: 1.6em; }
    #importer-error-summary li:before {
      display: inline-block;
      margin-right: .5em;
      font-family: FontAwesome;
      content: '\f00d'; }

#importer-wrapper h3 {
  display: block;
  margin-bottom: 1.5em;
  font-size: 1.2em;
  color: #7ed321;
  font-weight: bold; }
  #importer-wrapper h3:before {
    display: block;
    font-family: FontAwesome;
    font-size: 5em;
    font-weight: normal;
    content: '\f25b'; }

#importer-wrapper div[id^=step] {
  display: none;
  margin-bottom: 2em; }
  #importer-wrapper div[id^=step].active {
    display: block; }

#importer-wrapper #step-5 {
  text-align: center; }

#importer-wrapper #goto-next {
  margin-left: .5em; }

#crumbs {
  display: table;
  margin: 0 auto;
  margin-bottom: 2em; }
  #crumbs li {
    display: inline; }
    #crumbs li:first-child a {
      padding-left: 23px;
      border-top-left-radius: 7px;
      border-bottom-left-radius: 7px; }
      #crumbs li:first-child a:before {
        display: none; }
    #crumbs li:last-child a {
      padding-right: 23px;
      border-top-right-radius: 7px;
      border-bottom-left-radius: 7px; }
      #crumbs li:last-child a:after {
        display: none; }
  #crumbs a {
    display: block;
    position: relative;
    float: left;
    margin-right: 10px;
    padding: 14px 8px 14px 36px;
    background-color: #f9f9f9;
    font-size: 12px; }
    #crumbs a:before {
      position: absolute;
      top: 0;
      left: 0;
      border-top: 24px solid transparent;
      border-bottom: 24px solid transparent;
      border-left: 24px solid #FFF;
      content: ""; }
    #crumbs a:after {
      position: absolute;
      top: 0;
      right: -24px;
      border-top: 24px solid transparent;
      border-bottom: 24px solid transparent;
      border-left: 24px solid #f9f9f9;
      content: "";
      z-index: 1; }
    #crumbs a:hover {
      color: #333; }
    #crumbs a.disabled {
      cursor: no-drop; }
    #crumbs a.current {
      color: #7ed321; }

#data-wrapper {
  margin-bottom: 2em;
  max-height: 480px;
  overflow: auto; }
  #data-wrapper th,
  #data-wrapper td {
    font-size: 12px; }
  #data-wrapper td.status {
    color: #999;
    letter-spacing: 2px; }
    #data-wrapper td.status .fa-check-circle {
      color: #0F0; }
    #data-wrapper td.status .fa-question-circle {
      color: #999; }
    #data-wrapper td.status .fa-times-circle {
      color: #F00; }

#file-uploader .file-drop-zone,
form[id^="import-uploading"] .file-drop-zone {
  padding: 2em 0;
  border: 2px dashed #e6e6e6;
  text-align: center;
  outline-offset: -10px; }

#file-uploader .msg-uploading,
#file-uploader .msg-error,
form[id^="import-uploading"] .msg-uploading,
form[id^="import-uploading"] .msg-error {
  display: none; }

#file-uploader.is-dragover .file-drop-zone,
form[id^="import-uploading"].is-dragover .file-drop-zone {
  border-color: #7ed321; }

#file-uploader.is-uploading .dadu-input,
form[id^="import-uploading"].is-uploading .dadu-input {
  visibility: hidden; }

#file-uploader.is-uploading .dadu-uploading,
form[id^="import-uploading"].is-uploading .dadu-uploading {
  display: block; }

#file-uploader .target_files,
form[id^="import-uploading"] .target_files {
  max-height: 320px;
  overflow: auto; }
  #file-uploader .target_files li,
  form[id^="import-uploading"] .target_files li {
    position: relative;
    padding: 6px 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 11px; }
    #file-uploader .target_files li:hover,
    form[id^="import-uploading"] .target_files li:hover {
      background-color: #fafafa; }
  #file-uploader .target_files span,
  form[id^="import-uploading"] .target_files span {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    color: #666666; }
  #file-uploader .target_files .file-upload-cancel,
  form[id^="import-uploading"] .target_files .file-upload-cancel {
    display: inline-block;
    position: absolute;
    right: 12px;
    padding: 3px 5px;
    border: 1px solid #F00;
    background-color: #FFF;
    color: #F00;
    line-height: 11px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; }
    #file-uploader .target_files .file-upload-cancel:active,
    form[id^="import-uploading"] .target_files .file-upload-cancel:active {
      background-color: #F00;
      color: #FFF; }

.dropdown img {
  display: inline-block;
  margin: 0;
  margin-right: 3px;
  padding: 0;
  width: auto;
  height: 20px;
  border: 0; }

#uploaded-files {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  overflow-y: hidden; }
  #uploaded-files li {
    margin-top: 1em; }
    #uploaded-files li.empty {
      max-width: 100%;
      text-align: center; }
  #uploaded-files a {
    display: block;
    border: 1px solid #CCC; }
  #uploaded-files img {
    max-width: 100%;
    height: auto; }

#google-signin {
  display: inline-block; }

@media print {
  #invoice {
    margin: 0;
    padding: 30mm 15mm 15mm 20mm;
    width: 175mm;
    height: 252mm; }
  #receiver-and-sender {
    position: relative;
    min-height: 50mm; }
    #receiver-and-sender .receiver,
    #receiver-and-sender .sender {
      float: none;
      position: absolute; }
    #receiver-and-sender .receiver {
      left: 0;
      bottom: 0; }
    #receiver-and-sender .sender {
      right: 0;
      bottom: 0; } }

.autocomplete-list {
  margin: 0;
  padding: 0; }
  .autocomplete-list a {
    display: block;
    padding: .5em 1em;
    border-bottom: 1px solid #CCC; }
    .autocomplete-list a small {
      display: block;
      color: #b3b3b3; }
      .autocomplete-list a small span:after {
        display: inline-block;
        margin: 0 .5em;
        content: '|'; }
    .autocomplete-list a:hover {
      background-color: #fafafa; }

.mce-i-colldescgrid:before {
  font-family: FontAwesome;
  content: '\f0db'; }

.mce-i-colldesccontainer:before {
  font-family: FontAwesome;
  content: '\f247'; }

.mce-i-colldescpreview-desktop:before {
  font-family: FontAwesome;
  content: '\f108'; }

.mce-i-colldescpreview-tablet:before {
  font-family: FontAwesome;
  content: '\f10a'; }

.mce-i-colldescpreview-phone:before {
  font-family: FontAwesome;
  content: '\f10b'; }

body[data-module="home"] h3 {
  margin-bottom: 1rem;
  font-size: 1.2em;
  font-weight: 700; }

body[data-module="home"] h4 {
  margin-bottom: 1rem;
  font-size: 1em; }
  body[data-module="home"] h4 a {
    color: #7ed321; }
  body[data-module="home"] h4 i {
    display: inline-block;
    margin-right: 1rem; }

.collection-card-container {
  display: flex;
  flex-wrap: 3;
  position: relative;
  margin-bottom: 2rem;
  width: 100%; }

.collection-card-item {
  flex: 1 1 auto;
  width: 0;
  margin-right: 2rem; }
  .collection-card-item:last-child {
    margin-right: 0; }

.collection-card-item-title {
  padding: 2rem 1rem; }
  .collection-card-item-title small {
    display: block;
    margin-bottom: .5rem; }

.book-card-container {
  display: flex;
  flex-wrap: 3;
  position: relative;
  margin-bottom: 2rem;
  width: 100%; }

.book-card-item {
  flex: 1 1 auto;
  width: 0;
  margin-right: 2rem; }
  .book-card-item:last-child {
    margin-right: 0; }

.book-card-item-title {
  padding: 2rem 1rem; }
  .book-card-item-title small {
    display: block;
    margin-bottom: .5rem; }

.status-card-container {
  display: flex;
  flex-wrap: 3;
  position: relative;
  margin-bottom: 2rem;
  width: 100%; }

.status-card-item {
  flex: 1 1 auto;
  width: 0;
  margin-right: 2rem; }
  .status-card-item:last-child {
    margin-right: 0; }

.status-card-item-title {
  padding: 2rem 1rem; }
  .status-card-item-title small {
    display: block;
    margin-bottom: .5rem; }

.status-card-container {
  margin-bottom: 5rem; }

.status-card-item {
  flex: 1;
  background-color: #fafafa; }
  .status-card-item a:hover {
    color: #333; }

.status-card-item-title {
  padding: 1em;
  text-align: center; }
  .status-card-item-title i {
    display: block !important;
    margin-bottom: 1rem; }
  .status-card-item-title h4 {
    font-size: 1em;
    color: #7ed321;
    font-weight: 700; }
  .status-card-item-title ul {
    margin: 0 !important;
    padding: 0 !important; }