/* 바디 영역 */
.wrap{position: relative;}
.content{
  width: 100%;
}
main{
  width: 100%;
  height: 700px;
  position: relative;
}
main .banner-box{
  background: url(../img/photo-banner-company.jpg) no-repeat;
  filter: brightness(.8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
main .text-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
main .text-box h1{
  font-size: 80px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
main .text-box p{
  width: 1000px;
  font-size: 22px;
  font-weight: 200;
  color: #fff;
  text-align: center;
}

/* 섹션 영역 */
section{margin-top: 80px;}
section.about{}
section.about>.about-info{
  display: flex;
}
.about-info img{
  width: 200px;
  object-fit: contain;
}
.about .text-box{
  margin-left: 50px;
  max-width: 1000px;
}
.about .text-box h2{
  font-size: 36px;
  font-weight: 700;
  color: #000;
  margin-bottom: 50px;
}
.about .text-box p{
  color: #000;
  font-size: 18px;
}
.about .text-box p:last-of-type{
  font-size: 24px;
  font-weight: 600;
}
.about .text-box i{
  color: var(--color-main);
}
section.revenue{margin-top: 100px; width: 100%;}
section.revenue .chart-box{
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
section.revenue h2{
  font-size: 56px;
  font-weight: 700;
  color: #000;
}
section.revenue>span {
  font-size: 20px;
}
section.revenue img{
  display: block;
  width: 60%;
  height: auto;
}
.growth-cards>li{
  width: 280px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  background-image: linear-gradient(#D1E6E6,#8FD4D5);
  transition: all .2s ease 0s;
  cursor: pointer;
  margin: 40px;
}
.growth-cards>li p{
  font-size: 48px;
  font-weight: 700;
  color: var(--color-main);
}
.growth-cards>li span{
  font-size: 18px;
  font-weight: 500;
  color: var(--color-main);
}
section.newsroom{margin-top: 100px;}
section.newsroom h2{
  font-size: 56px;
  font-weight: 700;
  color: #000;
}
section.newsroom span{
  font-size: 20px;
}
.news-box{
  margin-top: 50px;
}
.news-ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.news-ul li{
  position: relative;
}
.news-ul li img{
  display: block;
  transition: transform .5s ease-out 0s;
}
.news-ul li p{
  color: #000;
  max-height: 3em;  
  font-weight: 500;
  margin-top: 20px;
}
.news-ul li span{
  font-size: 13px;
}
.news-ul .img-box{overflow: clip;}
.news-ul li:hover img{
  transform: scale(1.05);
  filter: brightness(.5);
}
.news-ul .abs-box{
  position: absolute;
  top: 40%;
  left: 0;
  transform: translateY(-50%);
  color: #fff;
  opacity: 0;
  width: 100%;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.news-ul .abs-box span {
  font-size: 15px;
}
.news-ul li:hover .abs-box{
  opacity: 1;
}
button.btn-more{
  display: none;
  color: var(--color-main);
  font-weight: 600;
  width: 100%;
  margin-top: 50px;
  cursor: pointer;
}
section.history{margin-top: 100px;}
section.history h2{
  font-size: 56px;
  font-weight: 700;
  color: #000;
}
section.history span{
  font-size: 20px;
}
.year-box{
  margin-top: 50px;
}
.year-box>div{
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}
.elv .year{
  font-size: 100px;
  font-weight: 800;
  color: #ececec50;
  width: 400px;
  transition: all 3s ease 0s;
}
.elv .year.on{
  color: #000;
}
.year-box ul li{
  color: #000;
  font-size: 22px;
  font-weight: 300;
  line-height: 2.5rem;
}
section.location{
  margin-top: 100px;
  margin-bottom: 50px;
}
section.location h2{
  font-size: 56px;
  font-weight: 700;
  color: #000;
}
.location .text-box{
  margin: 100px 0 20px;
  justify-content: space-between;
}
.location .address-box{
  color: #000;
  margin-top: 50px;
}
.location .address-box p{
  font-size: 34px;
  font-weight: 700;
}
.location span{
  display: flex;
  justify-content: flex-end;
}
.location span i{
  color: var(--color-main);
}
.google-map{
  width: 100%;
}
#map{height: 600px;}
.gm-style-iw-chr .gm-ui-hover-effect>span {background-color: var(--color-main);}
.gm-style-iw-chr button.gm-ui-hover-effect{width: unset !important;height: unset !important;}
.gm-style-iw-chr button.gm-ui-hover-effect span{width: 20px !important;height: 20px !important;margin: 3px !important;}

/* 탭 반응형 */
@media (max-width: 1200px) and (min-width: 769px) {
  main .text-box h1 {
    font-size: 60px;
    word-break: keep-all;
    text-wrap-mode: nowrap;
  }
  main .text-box p {
    font: 18px;
    width: auto;
  }
  .growth-cards>li {
    width: 200px;
    height: 150px;
    margin: 25px;
  }
  .growth-cards>li p {
    font-size: 28px;
  }
  .growth-cards>li span {
    font-size: 14px;
  }
  .year-box>div {
    justify-content: space-between;
  }
  .elv .year {
    font-size: 90px;
    width: 300px;
  }
  .year-box ul {
    width: 450px;
  }
  .year-box ul li {
    font-size: 17px;
    font-weight: 400;
    line-height: 2rem;
  }
}

@media screen and (hover: none) and (max-width: 768px) {
  .content {
    width: 100%;
    margin-top: 0;
  }
  .inner{width: 90%;}
  main {
    width: 100%;
    height: 70vh;
  }
  main .banner-box {
    background-position: unset;
    background-size: 300%;
  }
  main .text-box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  main .text-box h1 {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
  }
  main .text-box p {
    width: auto;
    text-align: center;
    font-size: 18px;
  }
  section.about{
    position: relative;
    margin-top: 0;
  }
  section.about>.about-info {
    display: block;
    margin-top: 30px;
    text-align: center;
  }
  .about-info img {
    width: 120px;
    object-fit: contain;
  }
  .about-info .text-box{
    margin-top: 30px;
    margin-left: 0;
  }
  .about .text-box h2 {
    font-size: 24px;
    text-align: center;
    /* margin: 30px 0; */
  }
  .about .text-box p:last-of-type {
    font-size: 18px;
    font-weight: 600;
  }
  section.revenue .chart-box{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  section.revenue h2 {
    font-size: 36px;
    text-align: center;
  }
  section.revenue span {
    width: 100%;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    margin-bottom: 30px;
  }
  section.revenue img {
    object-fit: contain;
    width: auto;
    height: auto;
    margin: 0 auto;
  }
  .growth-cards {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .growth-cards>li {
    width: auto;
    height: 100px;
    margin: unset;
    padding: 0 5px;
    box-sizing: border-box;
  }
  .growth-cards>li p {
    font-size: 24px;
  }
  section.revenue span {
    width: 100%;
    font-size: 12px;
    margin-bottom: 0;
  }
  section.newsroom {
    margin-top: 50px;
  }
  section.newsroom h2 {
    font-size: 36px;
    text-align: center;
  }
  section.newsroom span {
    width: 100%;
    font-size: 14px;
    text-align: center;
    display: inline-block;
  }
  .news-box {
    margin-top: 20px;
  }
  .news-ul {
    display: block;
  }
  .news-ul a {
    display: block;
  }
  .img-box{overflow: clip;}
  .img-box img{
    display: block;
    transition: transform .5s ease-out 0s;
    width: 100%;
  }
  .img-box:hover img{
    transform: scale(1.05);
  }
  /* 뉴스 호버 없애기 -> 내용 하단으로 배치? */
  .news-ul li:hover img{
    transform: none;
    filter: none;
  }
  .news-ul .abs-box{
    display: none;
  }
  /* ------------------------------ */
  .news-ul li p {
    font-size: 18px;
    height: auto;
    padding: 10px;
    margin-bottom: 0;
    margin-top: 0;
  }
  .news-ul li span {
    text-align: end;
    margin-bottom: 20px;
  }
  button.btn-more {
    display: block;
    color: #fff;
    background-color: #000;
    border-radius: 25px;
    font-weight: 600;
    width: 100%;
    margin-top: 0;
    padding: 10px;
  }
  section.history {
    margin-top: 50px;
  }
  section.history h2 {
    font-size: 36px;
    text-align: center;
  }
  section.history>span {
    width: 100%;
    font-size: 14px;
    text-align: center;
    display: inline-block;
  }
  .year-box>div {
    display: block;
  }
  .year-box .year {
    font-size: 40px;
    font-weight: 800;
    color: #ececec50;
  }
  .year-box ul li {
    font-size: 16px;
    line-height: 2rem;
  }
  section.location {
    margin-top: 50px;
  }
  section.location h2 {
    font-size: 36px;
    text-align: center;
  }
  .location .address-box {
    margin: 50px 0 20px;
  }
  .location .address-box p {
    font-size: 20px;
    font-weight: 700;
  }
  .location span{
    display: block;
    font-size: 14px;
    text-align: end;
  }
  #map{height: 400px;}
}