/* CSS Document */
@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes floating {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes loop-text {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes loop-text {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.mainArea {
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url(../images/about/history_bg.png);
}
@media (max-width: 1180px) {
  .mainArea {
    padding-bottom: 80px;
  }
}

.anchorBox {
  padding: 50px 0;
  position: relative;
  left: 0;
  bottom: 0;
  -webkit-transform: none;
          transform: none;
}

.infoBox {
  padding-bottom: 50px;
  text-align: center;
}

.timeLineBox {
  max-width: 1200px;
  margin: auto;
  position: relative;
  padding-bottom: 100px;
}
.timeLineBox:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  content: "";
  width: 5px;
  height: 100%;
  background: #ff9275;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff9275), color-stop(95%, #dc2f34), to(rgba(0, 23, 197, 0)));
  background: linear-gradient(180deg, #ff9275 0%, #dc2f34 95%, rgba(0, 23, 197, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff9275",endColorstr="#dc2f34",GradientType=1);
  background-size: 100% 120%;
  background-position: center bottom;
}
@media (max-width: 768px) {
  .timeLineBox:before {
    left: 10px;
    right: auto;
  }
}
.timeLineBox .timeLineItem.hasImg {
  padding-bottom: 85px;
}
.timeLineBox .timeLineItem.hasImg .Txt {
  margin-top: 60px;
}
@media (max-width: 992px) {
  .timeLineBox .timeLineItem.hasImg {
    padding-bottom: 60px;
  }
  .timeLineBox .timeLineItem.hasImg .Txt {
    margin-top: 35px;
  }
}
@media (max-width: 768px) {
  .timeLineBox .timeLineItem.hasImg .Txt {
    margin-top: 20px;
  }
  .timeLineBox .timeLineItem.hasImg .Txt .dots {
    display: none;
  }
  .timeLineBox .timeLineItem.hasImg .Img .dots {
    display: block;
    left: -3px;
  }
}
.timeLineBox .timeLineItem.noImg {
  padding-bottom: 55px;
}
@media (max-width: 768px) {
  .timeLineBox .timeLineItem.noImg .Txt .dots {
    left: -52px;
  }
}
.timeLineBox .timeLineItem:first-child {
  padding-top: 60px;
}
@media (max-width: 768px) {
  .timeLineBox .timeLineItem:first-child {
    padding-top: 40px;
  }
}
@media (min-width: 769px) {
  .timeLineBox .timeLineItem:nth-child(odd) .dots {
    right: -17.5px;
  }
  .timeLineBox .timeLineItem:nth-child(odd) .Txt {
    float: left;
    text-align: right;
    padding-right: 75px;
  }
  .timeLineBox .timeLineItem:nth-child(odd) .Txt .text ul li {
    padding-right: 27px;
  }
  .timeLineBox .timeLineItem:nth-child(odd) .Txt .text ul li:before {
    right: 8px;
  }
  .timeLineBox .timeLineItem:nth-child(odd) .Img {
    float: right;
    padding-left: 75px;
  }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .timeLineBox .timeLineItem:nth-child(odd) .Txt {
    padding-right: 50px;
  }
  .timeLineBox .timeLineItem:nth-child(odd) .Img {
    padding-left: 50px;
  }
}
@media (min-width: 769px) {
  .timeLineBox .timeLineItem:nth-child(even) .dots {
    left: -17.5px;
  }
  .timeLineBox .timeLineItem:nth-child(even) .Txt {
    float: right;
    padding-left: 75px;
  }
  .timeLineBox .timeLineItem:nth-child(even) .Txt .text ul li {
    padding-left: 27px;
  }
  .timeLineBox .timeLineItem:nth-child(even) .Txt .text ul li:before {
    left: 8px;
  }
  .timeLineBox .timeLineItem:nth-child(even) .Img {
    float: left;
    padding-right: 75px;
  }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .timeLineBox .timeLineItem:nth-child(even) .Txt {
    padding-left: 50px;
  }
  .timeLineBox .timeLineItem:nth-child(even) .Img {
    padding-right: 50px;
  }
}
.timeLineBox .timeLineItem .dots {
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #dc2f34;
  background-color: #ffffff;
}
.timeLineBox .timeLineItem .dots:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 50%;
  background-color: #dc2f34;
}
@media (max-width: 768px) {
  .timeLineBox .timeLineItem .dots {
    width: 30px;
    height: 30px;
  }
  .timeLineBox .timeLineItem .dots:before {
    width: 8px;
    height: 8px;
  }
}
.timeLineBox .timeLineItem .Img,
.timeLineBox .timeLineItem .Txt {
  width: 50%;
}
.timeLineBox .timeLineItem .Img .dots {
  display: none;
}
.timeLineBox .timeLineItem .Img img {
  width: 100%;
}
.timeLineBox .timeLineItem .Txt {
  padding-top: 10px;
  position: relative;
}
.timeLineBox .timeLineItem .Txt .title {
  color: #dc2f34;
  font-size: 30px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  letter-spacing: 0.6px;
  padding-bottom: 23px;
}
.timeLineBox .timeLineItem .Txt .text ul li {
  color: #424242;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.9px;
  line-height: 1.55;
  position: relative;
}
.timeLineBox .timeLineItem .Txt .text ul li:before {
  position: absolute;
  top: 12px;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #666666;
}
@media (max-width: 992px) {
  .timeLineBox .timeLineItem .Txt .title {
    font-size: 25px;
    padding-bottom: 15px;
  }
  .timeLineBox .timeLineItem .Txt .text ul li {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .timeLineBox .timeLineItem {
    padding-left: 50px;
  }
  .timeLineBox .timeLineItem .Img,
  .timeLineBox .timeLineItem .Txt {
    width: 100%;
  }
  .timeLineBox .timeLineItem .Txt {
    margin-top: 20px;
  }
  .timeLineBox .timeLineItem .Txt .text ul li {
    padding-left: 27px;
  }
  .timeLineBox .timeLineItem .Txt .text ul li:before {
    left: 8px;
  }
}
/*# sourceMappingURL=history.css.map */