.introduce__container {
  position: relative;
  align-items: end;
  padding-bottom: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../../images/main/main_intro_dark.webp");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
}
@media screen and (max-width: 560px){
    .introduce__container{
        background-position: center center;
    }
}
.introduce__container.light{
  background-image: url("../../images/main/main_intro_white.webp"); 
}
.introduce__container.mobile{
  background-image: url("../../images/main/banner_mobile_dark.webp"); 
}
.introduce__container.mobile.light{
  background-image: url("../../images/main/banner_mobile_white.webp");
}
.introduce {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 53px;
}
@media screen and (max-width: 1360px) {
  .introduce {
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 1045px) {
  .introduce {
    padding: 30px;
  }
}
@media screen and (max-width: 890px) {
  .introduce {
    padding: 20px;
  }
}
@media screen and (max-width: 570px) {
  .introduce {
    padding: 15px;
    gap: 12vh;
  }
}


.introduce__title {
  bottom: 45%;
  position: absolute;
  font-size: 48px;
  font-weight: 400;
  text-transform: uppercase;
  width: fit-content;
  background-repeat: no-repeat;
  background-size: 110%;
  background-position: center center;
}
.introduce__title span {
  font-size: 80px;
  font-weight: 700;
  position: relative;

}
.introduce__title span img{
    position: absolute; 
    z-index: -1;
    right: 0;
    bottom: -10%;
    width: 40%;
}
.introduce__title .biodesign {
  text-transform: uppercase;
  font-weight: 400;
    z-index: 7;
    position: relative;
}

@media screen and (max-width: 1700px) {
  .introduce__title {
    font-size: 36px;
  }
  .introduce__title span {
    font-size: 56px;
  }
}
@media screen and (max-width: 1045px) {
  .introduce__container{
    background-position: bottom center;
  }
  .introduce__title {
    font-size: 32px;
  }
  .introduce__title span {
    font-size: 44px;
  }
}
@media screen and (max-width: 640px) {
  .introduce__title {
    font-size: 30px;
  }
  .introduce__title span {
    font-size: 24px;
  }
}

.introduce__subtitle {
  bottom: 8%;
  position: absolute;
  padding: 85px 0 70px 0;
  margin: 0;
  font-size: 48px;
  font-weight: 500;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
}
.introduce__container button{
    position: absolute; 
    bottom: 5%;
}
.introduce__subtitle span {
  color: #f2cf30;
  text-transform: uppercase;
}
@media screen and (max-width: 1700px) {
.introduce__subtitle {
    font-size: 34px;
  }
}

@media screen and (max-width: 1045px) {
.introduce__subtitle {
    font-size: 32px;
   
  }
}
@media screen and (max-width: 780px) {
  .introduce__subtitle {
    font-size: 22px;
  }
}
@media screen and (max-width: 530px){
    .introduce__subtitle{
      font-size: 20px;
  }
  .introduce__bottom{
      gap: 9vh;
  }
}

@media screen and (max-height: 530px) {
  .introduce {
    padding-bottom: 0px;
    gap: 40px;
  }
  
  .introduce__bottom{
      gap: 4vh;
  }
}

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