@charset "UTF-8";
/* 오버레이 */
/*/////////커스텀 컬러*/
.timeLine-sec {
  overflow: hidden;
  margin-top: 100px;
}
.timeLine-sec ._wide::after {
  position: absolute;
  content: "";
  margin: 0;
  padding: 0;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background-color: #323333;
}
.timeLine-sec ._wide .timeLine {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* .texbx {
       position: absolute;
       z-index: 100;
       height: 500px;
       left: 50%;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
       margin-left: -20px;

       &--tex {
           padding: 30px 10px;
           background-color: rgb(255, 255, 255);
           p {
               margin: 0;
               @include frank(12, 200, 12);
               color: $c30;
           }
           h3 {
               margin-top: 30px;
               @include noto-kr(34, 200, 12);
               color: $c30;
               text-align: left;
           }
       }

       &:nth-of-type(1) {

           .texbx--tex {
               p.num1 {
                   text-align: left;
               }
               h3 {
                   text-align: left;
               }
           }
       }

       &:nth-of-type(2) {
           margin-top: 450px;
           height: 500px;
           right: 50%;
           left: 0;
           display: flex;
           align-items: flex-end;
           margin-right: -20px;

           .texbx--tex {
               p.num2 {
                   text-align: right !important;
               }
               h3 {
                   text-align: right;
               }
           }
       }

       &:nth-of-type(3) {
           margin-top: 950px;
           height: 500px;

           .texbx--tex {
               p.num1 {
                   text-align: left;
               }
               h3 {
                   text-align: left;
               }
           }
       }

       &:nth-of-type(4) {
           margin-top: 1450px;
           height: 500px;
           right: 50%;
           left: 0;
           display: flex;
           align-items: flex-end;
           margin-right: -20px;

           .texbx--tex {
               p.num2 {
                   text-align: right !important;
               }
               h3 {
                   text-align: right;
               }
           }
       }
   }

   &__left {
       width: 50%;
       display: flex;
       flex-direction: column;
       padding-right: 150px;

       &--imgbx {
           position: relative;
           width: 100%;
           height: 500px;
           @include bg(center center, no-repeat, cover);
           &:nth-of-type(2) {
               margin-top: 450px;
           }

           &#timeImg-1, &#timeImg-3 {
               transform: translateX(-120%);
               opacity: 0;
           }
       }

   }

   &__right {
       width: 50%;
       display: flex;
       flex-direction: column;
       padding-left: 150px;

       &--imgbx {
           position: relative;
           width: 100%;
           height: 500px;
           @include bg(center center, no-repeat, cover);
           transition: width 1s ease;

           &:nth-of-type(1) {
               margin-top: 450px;
           }
           &:nth-of-type(2) {
               margin-top: 450px;
           }

           &#timeImg-2, &#timeImg-4 {
               transform: translateX(120%);
               opacity: 0;
           }
       }
       &--texbx {

       }
   }*/
}
.timeLine-sec ._wide .timeLine .texbx {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.timeLine-sec ._wide .timeLine .texbx .center_line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 20px;
  background-color: #323333;
}
.timeLine-sec ._wide .timeLine .texbx .center_line.left_line {
  left: calc(50% - 5px);
}
.timeLine-sec ._wide .timeLine .texbx__left {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 50px;
}
.timeLine-sec ._wide .timeLine .texbx__left--imgbx {
  position: relative;
  width: 100%;
  height: 300px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: width 1s ease;
}
.timeLine-sec ._wide .timeLine .texbx__left--imgbx#timeImg-1, .timeLine-sec ._wide .timeLine .texbx__left--imgbx#timeImg-3 {
  transform: translateX(-120%);
  opacity: 0;
}
.timeLine-sec ._wide .timeLine .texbx__left--tex {
  padding: 30px 10px;
  background-color: white;
}
.timeLine-sec ._wide .timeLine .texbx__left--tex p {
  margin: 0;
  font-size: 12px;
  font-weight: 200;
  line-height: 12px;
  font-family: "Frank Ruhl Libre", serif !important;
  color: #4b4c4d;
}
.timeLine-sec ._wide .timeLine .texbx__left--tex h3 {
  margin-top: 30px;
  font-size: 34px;
  font-weight: 200;
  line-height: 12px;
  font-family: "Noto Sans KR", sans-serif;
  color: #4b4c4d;
  text-align: left;
}
.timeLine-sec ._wide .timeLine .texbx__right {
  width: 50%;
  display: flex;
  align-items: center;
  padding-left: 50px;
}
.timeLine-sec ._wide .timeLine .texbx__right--imgbx {
  position: relative;
  width: 100%;
  height: 300px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: width 1s ease;
}
.timeLine-sec ._wide .timeLine .texbx__right--imgbx#timeImg-2, .timeLine-sec ._wide .timeLine .texbx__right--imgbx#timeImg-4 {
  transform: translateX(120%);
  opacity: 0;
}
.timeLine-sec ._wide .timeLine .texbx__right--tex {
  padding: 30px 10px;
  background-color: white;
}
.timeLine-sec ._wide .timeLine .texbx__right--tex p {
  margin: 0;
  font-size: 12px;
  font-weight: 200;
  line-height: 12px;
  font-family: "Frank Ruhl Libre", serif !important;
  color: #4b4c4d;
}
.timeLine-sec ._wide .timeLine .texbx__right--tex h3 {
  margin-top: 30px;
  font-size: 34px;
  font-weight: 200;
  line-height: 12px;
  font-family: "Noto Sans KR", sans-serif;
  color: #4b4c4d;
  text-align: left;
}

@media screen and (max-width: 1500px) {
  .timeLine-sec {
    margin-top: 80px;
  }
  .timeLine-sec ._wide .timeLine .texbx .center_line.left_line {
    left: calc(50% - 5px);
  }
  .timeLine-sec ._wide .timeLine .texbx__left {
    padding-right: 50px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--imgbx {
    height: 240px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex h3 {
    margin-top: 30px;
    font-size: 34px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
  .timeLine-sec ._wide .timeLine .texbx__right {
    padding-left: 50px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--imgbx {
    width: 100%;
    height: 240px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex h3 {
    margin-top: 30px;
    font-size: 34px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
}
@media screen and (max-width: 1200px) {
  .timeLine-sec {
    margin-top: 70px;
  }
  .timeLine-sec ._wide .timeLine .texbx .center_line.left_line {
    left: calc(50% - 3px);
  }
  .timeLine-sec ._wide .timeLine .texbx__left {
    padding-right: 30px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--imgbx {
    height: 190px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex h3 {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
  .timeLine-sec ._wide .timeLine .texbx__right {
    padding-left: 30px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--imgbx {
    width: 100%;
    height: 190px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex h3 {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
}
@media screen and (max-width: 992px) {
  .timeLine-sec {
    margin-top: 50px;
  }
  .timeLine-sec ._wide .timeLine .texbx .center_line.left_line {
    left: calc(50% - 2px);
  }
  .timeLine-sec ._wide .timeLine .texbx__left {
    padding-right: 20px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--imgbx {
    height: 150px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex h3 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
  .timeLine-sec ._wide .timeLine .texbx__right {
    padding-left: 20px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--imgbx {
    width: 100%;
    height: 150px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex h3 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
}
@media screen and (max-width: 768px) {
  .timeLine-sec {
    margin-top: 50px;
  }
  .timeLine-sec ._wide .timeLine .texbx .center_line.left_line {
    left: calc(50% - 2px);
  }
  .timeLine-sec ._wide .timeLine .texbx__left {
    padding-right: 20px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--imgbx {
    height: 120px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex h3 {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
  .timeLine-sec ._wide .timeLine .texbx__right {
    padding-left: 20px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--imgbx {
    width: 100%;
    height: 120px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex h3 {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
}
@media screen and (max-width: 576px) {
  .timeLine-sec {
    margin-top: 40px;
  }
  .timeLine-sec ._wide .timeLine .texbx .center_line.left_line {
    left: calc(50% - 2px);
  }
  .timeLine-sec ._wide .timeLine .texbx__left {
    padding-right: 15px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--imgbx {
    height: 100px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__left--tex h3 {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
  .timeLine-sec ._wide .timeLine .texbx__right {
    padding-left: 15px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--imgbx {
    width: 100%;
    height: 100px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex {
    padding: 30px 10px;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex p {
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Frank Ruhl Libre", serif !important;
  }
  .timeLine-sec ._wide .timeLine .texbx__right--tex h3 {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 200;
    line-height: 12px;
    font-family: "Noto Sans KR", sans-serif;
  }
}

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