@charset "euc-kr";
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,500|Raleway:400,700,400italic,700italic);

ol.process-chart {
  color: #676767;
  counter-reset: item;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 0 1em;
  padding: 0;
}

ol.process-chart > li,
ol.process-chart > li > div {
  position: relative;
}

ol.process-chart > li {
  background: linear-gradient(      to right,      rgba(207, 207, 207, 0.14) 0%,      #ffffff00 40%    );
  background-color: #fff;
  counter-increment: item;
  flex-basis: 0;
  flex-grow: 1;
  margin: 1em 1em 1em -1em;
  min-width: 11.25em;
  padding: 1em 1em 1em 2em;
}

ol.process-chart > li:before,
ol.process-chart > li > div:before {
  color: rgba(76, 76, 76, 0.75);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}

ol.process-chart > li:before {
  content: "Step";
  display: inline-block;
  font-weight: 300;
  left: 2em;
  letter-spacing: 0.1em;
  position: absolute;
  top: 1em;
  transform: rotate(90deg);
  transform-origin: 15% 57%;
}

ol.process-chart > li:after {
  border-bottom: 3px solid transparent;
  border-left: 3px solid #afafaf;
  border-right: 0 solid transparent;
  border-top: 3px solid transparent;
  content: "";
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  z-index: 1;
}
ol.process-chart > li:hover:after {
    border-left: 3px solid #a4111f;
}
ol.process-chart > li > div {
  padding: 0 0 0 1em;
}

ol.process-chart > li > div:before {
  content: counter(item, decimal-leading-zero);
  font-size: 3em;
  font-weight: 500;
  line-height: 1;
}


/*** MEDIA QUERIES ***/
@media only screen and (max-width: 40em) {
  ol.process-chart {
    margin: 1em 0 0 0;
    padding: 1em 0 0 0;
  }

  ol.process-chart > li {
    background: linear-gradient(rgba(231, 231, 231, 0.25) 0%, transparent 25%);
    flex-basis: inherit;
    margin: -1em 0 1em 0;
    min-width: inherit;
    padding: 1em 1em 0 1em;
  }

  ol.process-chart > li:before {
    left: 1em;
    top: 2em;
  }

  ol.process-chart > li:after {
    border-bottom: 0 solid transparent;
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent;
    border-top: 3px solid #e4e4e4;
    top: 0;
    height: 0;
    left: 0;
    right: inherit;
    width: 100%;
  }
  ol.process-chart > li:hover:after {
    border-top: 3px solid #a4111f;
  }
  ol.process-chart > li > div {
    padding: 1em 1em 0 1em;
  }

}