* {
  box-sizing: border-box; }

.wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  max-width: 80%;
  margin: 0 auto; }

.box-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%; }

.box-date {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  background: linear-gradient(to right, transparent calc(50% - 4px), #fff 50%, #fff 50%, transparent calc(50% - 4px));
  order: 2;
  text-align: center;
  font-size: 28px;
  flex-basis: 100px;
  color: #fff; }
  .box-date > div {
    position: relative;
    width: 14px;
    height: 14px;
    background: white;
    margin: auto;
    padding: 10px;
    border-radius: 50%;
    border: #28c0c6 solid;
    margin-top: 50px; }
    .box-date > div div {
      background: #28C0C6;
      height: 4px;
      width: 4px;
      border-radius: 4px;
      position: absolute;
      left: 8px;
      top: 8px; }

.box-text {
  position: relative;
  padding: 20px;
  border-radius: 5px;
  color: #fff;
  order: 3;
  width: 80%;
  background: #28c0c6;
  margin-bottom: 10px;
  margin-top: 10px; }
  .box-text span {
    color: #dddddd; }
  .box-text .span_time {
    font-family: time; }
  .box-text img {
    width: 100%;
    border-radius: 5px; }
  .box-text > div {
    margin: 10px 5px 10px 5px; }

.text-left::after {
  content: "";
  display: block;
  border: 15px solid transparent;
  border-right-color: #28C0C6;
  position: absolute;
  left: -29px;
  top: 40px;
  box-sizing: border-box; }

.text-right::after {
  content: "";
  display: block;
  border: 15px solid transparent;
  border-left-color: #28C0C6;
  position: absolute;
  right: -29px;
  top: 40px;
  box-sizing: border-box; }

@media (min-width: 1500px) {
  .box-text,
  .custom {
    width: 40%; }

  .box-right .box-text {
    order: 1;
    border-radius: 5px; }

  .box-right .custom {
    order: 3; } }
@media (max-width: 1499px) {
  .text-right::after {
    content: "";
    display: block;
    border: 15px solid transparent;
    border-right-color: #28C0C6;
    position: absolute;
    right: calc(100% - 1px);
    top: 40px;
    box-sizing: border-box; } }
@media (max-width: 850px) {
  #app .header_class .two {
    color: white; }
  #app .wrapper {
    max-width: 96%; } }

/*# sourceMappingURL=archivers.css.map */