@charset "utf-8";

.green-bg{
  background: #E5E5E5;
}

.top-about > p{
  background:#E5E5E5;
}

.company-title {
  font-size:clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
  margin-bottom:5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.company-title::before{
  content:"";
  display:block;
  width:1rem;
  height:1rem;
  background:#A5C05C;
  border-radius:999vh;
}

.company-title h2{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
}

.top-about{
  background:#BABABA;
}

.top-about-txt h3{
  color:#A5C05C;
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin-top:0.5rem;
}

.top-about-txt{
  gap:1.5rem;
  width: 60%;
}

.top-about-wrap > img {
  width: 40%;
}

.history{
  margin:120px auto 140px;
  max-width:1345px;
}

.history-wrap-bg{
  overflow: scroll;
  padding: 2rem 1rem 2rem;
}

.history-wrap{
  display: flex;
  align-items: flex-start;
  position:relative;
  width: max-content;
}

.history-wrap::before{
  content:"";
  position:absolute;
  width:100%;
  height:1rem;
  background:#BABABA;
  border-radius:20px;
  top:0;
  left:0;
}

.history-item{
  width:400px;
  font-size: 14px;
  position: relative;
  margin-top: 3.5rem;
  padding: 2rem;
  background: #FFFFFF;
  margin-right: 2.5rem;
  border-radius:20px;
  z-index: 1;
}

.history-item::before{
  content:"";
  position:absolute;
  width: 2rem;
  height: 2rem;
  background:#E5E5E5;
  border-radius:999vh;
  border:9px solid #BABABA;
  top: -4rem;
  left: 0rem;
}

.history-item::after{
  content:"";
  position:absolute;
  width: 1px;
  height: 2rem;
  background:#7E7E7E;
  top: -2rem;
  left: 1rem;
  z-index: -1;
}

.history-item > p:first-child{
  position:absolute;
  left:0;
  top:-5.5rem;
  width:max-content;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

.history-item h3{
  font-size:1.5rem;
  color:#A5C05C;
  margin-bottom:1.5rem;
}

.history-item h4{
  font-size:1.25rem;
  display:flex;
  align-items:center;
  gap:8px;
  margin:1.5rem 0 0.5rem;
}

.history-item h4::before{
  content:"";
  display:block;
  width:4px;
  height:4px;
  background:#BABABA;
  border-radius:999vh;
}

.outline{
  max-width:1345px;
}

.outline-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
}

.outline-txt{
  width:37%;
}

.outline-wrap .map{
  width:57%;
}

.outline-wrap .map iframe{
  width:100%;
  border:none;
  height:400px;
}

.outline-list{
  display: flex;
  align-items: flex-start;
  font-size:14px;
  margin-top:2rem;
  justify-content: space-between;
}

.outline-list:first-child{
  margin:0;
}

.outline-list p:first-child{
  width:5rem;
  font-weight:bold;
  font-size:clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
}

.outline-list p:last-child{
  width:calc(100% - 7.5rem);
}


@media (max-width: 1279px) {
  .top-about-wrap > img,
  .top-about-txt{
    width:100%;
  }
  .outline-txt,
  .outline-wrap .map{
    width:100%;
  }
  .outline-wrap{
    width: 100%;
    flex-direction: column;
    gap: 2.5rem;
    align-items: flex-start;
  }
  .history-wrap-bg{
    overflow:scroll;
    overflow-y:hidden;
    padding-bottom:1rem;
    padding-left:1rem;
  }
  .history-wrap{
    min-width:1100px;
  }
  /* .history-wrap{
  flex-direction: column;
}
  .history-item{
  width:100%;
  min-height: 200px;
  border:none;
  border-top: 1px solid #212121;
  padding: 2rem 5% 8% 2rem;
}
  .history-wrap::before{
  width:1rem;
  height:100%;
  bottom:auto;
  top:0;
  left: -0.5rem;
  z-index: 10;
}
  .history-item::before{
  z-index: 15;
  bottom: auto;
  top: -1rem;
}
  */
}

@media (max-width: 1024px) {
  .history-wrap{
    margin-top: 0rem;
  }
}

@media (max-width: 767px) {
  .top-about-txt{
    gap: 1rem;
  }
  .top-about-txt h3{
    margin:0;
  }
  .history-wrap{
    margin: 0 auto;
  }
  .history-item{
    padding: 1rem;
    width: 260px;
    font-size: 12px;
    margin-right: 1.5rem;
  }
  /*.history-wrap::before{
  width: 10px;
  left: -7px;
}
  .history-item::before{
  top: -0.8rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 5px solid #BABABA;
  left: -0.9rem;
}*/
  .company-title{
    margin-bottom: 2.5rem;
  }
  .outline-list p:last-child {
    width: calc(100% - 6rem);
  }
  .history {
    margin: 60px auto 70px;
  }
  .outline{
    width:100%;
  }
  .outline .company-title{
    width:90%;
    margin:0 auto 2.5rem;
  }
  .outline-txt{
    width:90%;
    margin: 0 auto;
  }
  .outline-wrap .map iframe{
    height: 200px;
  }
}