.wrap {
  background-color: transparent;
}

/* about */
section.about .text-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 100px;
  margin-left: 0;
}
section.about .text-ani h2,
section.about .ani-title li
{
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 0;
}
/* 애니메이션 */
section.about .ani-title{
  position: relative;
  overflow: hidden;
  height: 70px; /* 잘림 방지 */
}
section.about .ani-title li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(50px);
  transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 통통튀는 */
}
section.about .ani-title li.on {
  opacity: 1;
  transform: translateY(0);
}
section.about .text-ani span{
  width: 100%;
  height: 60px;
  display: block;
}
section.about .text-box p{
  font-size: 22px !important;
  font-weight: 300 !important;
  color: #666;
}
section.about ul {
  display: flex;
  justify-content: space-evenly;
}
section.about ul>li{position: relative;}
section.about ul>li .img-wrap{
  position: relative;
  display: block;
}
section.about ul>li .img-grad{
  position: relative;
}
/* 이미지 그라디언트 filter 추가 */
section.about ul>li .img-grad::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  border-radius: 15px;
  pointer-events: none;
  transition: all .2s ease 0s;
}
section.about ul>li img{
  max-height: 450px;
  display: block;
  border-radius: 15px;
  filter: grayscale(.4);
}
section.about ul>li .text-abs{
  position: absolute;
  left: 10%;
  bottom: 6%;
  color: #fff;
}
section.about ul>li .text-abs span{
  font-size: 22px;
  font-weight: 600;
  opacity: 1;
  transition: all .2s ease 0s;
}
section.about ul>li .p-abs {
  position: absolute;
  left: 10%;
  bottom: 16%;
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  opacity: 0;
  transition: all .2s ease 0s;
}
section.about ul>li:hover .p-abs{
  opacity: .8;
}
section.about ul>li:hover .text-abs span{
  opacity: 0;
}
section.about ul>li:hover .img-grad::after{
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%);
}
/* 히스토리 */
section.history {
  margin-top: 200px;
}
section.history h2 {
  font-size: 45px;
  font-weight: 400;
  text-align: center;
}
.year-box>div {
  flex-direction: column;
  margin-bottom: 0;
}
.elv .year {
  font-family: "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-main) !important;
  width: auto;
  transition: unset;
  padding: 6px 24px;
  background-color: #ececec;
  border-radius: 5px;
}
.elv .al-right {text-align: right;}
.elv ul>li .box p{
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffcc;
  width: 220px;
  background: var(--color-main);
  padding: 13px 30px;
  border-radius: 8px;
}
.elv ul>li .box p strong{
  color: #fff;
  font-weight: 500;
}
/* 가운데 선 */
.year-box.elv ul li {
  position: relative;
  width: 2px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #ececec;
} 
/* 선 기준 왼쪽으로 보내기*/
.year-box.elv ul>li.al-right .box p{
  transform: translateX(-100%);
}
/* dots */
.year-box.elv .dots{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--color-main);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
/* arrow */
.year-box.elv li .box {margin-left: 30px;}
.year-box.elv li.al-right .box {margin-left: -30px;}
.year-box.elv .box:before {
  content: "";
  position: absolute;
  top: 5px;
  width: 0;
  right: 0;
  border-style: solid;
}
.year-box.elv ul li .box:before {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 13px 6px 0;
  border-color: transparent var(--color-main);
}
.year-box.elv ul li.al-right .box:before {
  left: -31px;
  border-width: 6px 0px 6px 13px;
}
/* Founded */
.year-box.elv .Founded ul li {
  width: 0;
}
.year-box.elv .Founded li .box {
  margin-left: 0;
}
.year-box.elv .Founded ul>li .box p{
  transform: translateX(-50%);
  width: 180px;
  text-align: center;
  font-weight: 500;
}
.year-box.elv .Founded ul li .box:before {
  left: 0;
  top: 19px;
  transform: rotate(90deg) translateY(50%);
}
/* 오류? */
.yr21 span {letter-spacing: 0 !important;}

/* 매출 */
section.revenue {
  background-color: var(--color-main);
  padding: 100px 0;
  margin-top: 200px;
}
section.revenue h2{
  color: #fff;
  font-size: 45px;
  font-weight: 400;
  text-align: center;
}
section.revenue span{
  color: #fff;
  text-align: center;
  width: 100%;
  display: inline-block;
  margin-top: 20px;
  font-size: 20px;
  font-weight: 300;
}
section.revenue img {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto;
  margin-top: 80px;
}

/* 뉴스 */
section.newsroom{margin-top: 200px;}
section.newsroom h2{
  font-size: 45px;
  font-weight: 400;
  text-align: center;
}
section.newsroom span{
  font-weight: 300;
  color: #3d3d3d;
  text-align: center;
  width: 100%;
  display: inline-block;
  margin-top: 20px;
}
/* section.newsroom button.btn-more{display: none;} */
/* company.js css */
section.newsroom .news-ul {margin-top: 100px;}
section.newsroom .news-ul p {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 15px;
  min-height: 48px;
}
section.newsroom .news-ul span {
  text-align: start;
  color: var(--color-text-01);
}
section.newsroom .news-ul .img-box{
  border-radius: 5px;
  border: 1px solid #eee;
}
section.newsroom .news-ul li:hover img{
  filter: brightness(1);
}

/* 지도 */
section.location {
  margin-top: 200px;
  margin-bottom: 100px;
}
section.location h2{
  font-size: 45px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 50px;
}
section.location address{
  color: #3d3d3d;
  text-align: center;
  width: 100%;
  display: inline-block;
  margin-top: 30px;
}

/* 탭 반응형 */
@media (max-width: 1200px) and (min-width: 769px) {
  section.about ul {
    gap: 20px;
  }
}

/* 모바일 반응형 */
/* smartphones, touchscreens */
@media (max-width: 768px) and (hover: none) and (pointer: coarse){
  section.about.inner{width: 100%;}
  section.about .text-ani{
    margin-bottom: 10px;
  }
  section.about .text-ani h2{
    font-size: 50px;
    text-align: left;
  }
  section.about .text-ani .ani-title li{
    font-size: 50px;
  }
  section.about .text-box {
    max-width: unset;
    width: 90%;
    margin: 0 auto;
    display: block;
  }
  section.about .text-box p{
    width: 93%;
    line-height: 1.4;
    font-size: 18px !important;
    margin-bottom: 50px;
  }
  section.about>ul {
    overflow-x: auto;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 5%;
    margin-right: 5%;
  }
  section.about>ul::-webkit-scrollbar {
    display: none;
  }
  section.about>ul>li{
    flex: 0 0 auto;
    width: 70%;
  }
  section.about>ul>li img {
    max-height: unset;
    filter: grayscale(.5);
  }
  section.about ul>li .img-grad::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  }
  section.about>ul>li .text-abs {
    top: 50%;
  }
  section.about ul>li .text-abs span {
    font-size: 22px;
    font-weight: 700;
  }
  section.about ul>li .p-abs {
    bottom: 7%;
    font-weight: 400;
    opacity: 1;
  }
  section.history {
    margin-top: 150px;
  }
  section.history h2 {
    font-size: 40px;
  }
  section.history .year-box>div {
    display: flex;
    align-items: flex-start;
  }
  /* Founded */
  .year-box.elv .Founded ul li {
    width: 2px;
  }
  .year-box.elv .Founded li .box {
    margin-left: 30px;
  }
  .year-box.elv .Founded ul li .box:before {
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
  }
  .year-box.elv .Founded ul>li .box p {
    transform: unset;
    width: 220px;
    text-align: unset;
    font-weight: 600;
  }
  /* 배경 svg */
  .scale-wrap {top: 53%; opacity: .6;}
  section.revenue h2 {
    font-size: 40px;
  }
  section.revenue {
    padding: 50px 0;
    margin-top: 150px;
  }
  section.revenue span {
    font-size: 18px;
  }
  section.newsroom {
    margin-top: 100px;
  }
  section.newsroom h2{
    font-size: 40px;
  }
  section.newsroom span {
    font-size: 18px;
  }
  section.newsroom .news-box {
    margin-top: 0;
  }
  section.newsroom .news-ul {
    margin-top: 50px;
  }
  section.newsroom .news-ul li p {
    font-size: 17px;
    margin-top: 15px;
    padding: 0;
    padding-left: 5px;
    min-height: 60px;
  }
  section.newsroom .news-ul li span {
    font-size: 15px;
    margin: 5px 0 30px;
    padding-left: 5px;
  }
  section.location {
    margin-top: 100px;
  }
}