:root {
  --mach-sidebanner-title-size: 50px;
  --mach-sidebanner-height: 500px;
  --mach-sidebanner-title-ml: 60px;
}

.mach-sidebanner {
  height: var(--mach-sidebanner-height);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.mach-sidebanner__mask {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 50%;
}

.mach-sidebanner .path {
  position: absolute;
  width: 100%;
  height: 100%;
}

.mach-sidebanner .path,
.mach-sidebanner .container {
  height: 100%;
}

.mach-sidebanner .container {
  display: flex;
  justify-content: start;
  align-items: center;
}

.mach-sidebanner .container h1,
.mach-sidebanner .container h2 {
  color: #fff;
  font-size: var(--mach-sidebanner-title-size);
  margin-left: var(--mach-sidebanner-title-ml);
  line-height: 1.2;
  font-weight: 700;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.60);
  display: none;
}
.mach-sidebanner .title-box{
  position: absolute;
  right: 50px;
  bottom: 60px;
  padding: 25px 40px 40px 50px;
  text-align: center;
  color: #fff;
  backdrop-filter: blur(30px);
}
.mach-sidebanner .title-box .title{
  font-size:clamp(16px, 1.6vw, 30px);
  font-weight: 700;
  line-height:1;
  letter-spacing: 3px;
}
.mach-sidebanner .title-box .sub-title{
  font-size:clamp(22px, 2.5vw, 48px);
  font-weight: 700;
  line-height:1;margin-top:20px;
}
@media screen and (max-width: 1500px) {
  :root {
    --mach-sidebanner-title-size: 44px;
    --mach-sidebanner-height: 500px;
    --mach-sidebanner-title-ml: 50px;
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --mach-sidebanner-title-size: 38px;
    --mach-sidebanner-height: 500px;
    --mach-sidebanner-title-ml: 40px;
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --mach-sidebanner-title-size: 34px;
    --mach-sidebanner-height: 500px;
    --mach-sidebanner-title-ml: 30px;
  }
}

@media screen and (max-width: 992px) {
  :root {
    --mach-sidebanner-title-size: 32px;
    --mach-sidebanner-height: 500px;
    --mach-sidebanner-title-ml: 20px;
  }

.mach-sidebanner{height:auto;aspect-ratio:2 / 1;}
.mach-sidebanner .title-box{right:40px;bottom:40px;padding:25px 30px;}
  
}

@media screen and (max-width: 768px) {
  :root {
    --mach-sidebanner-title-size: 28px;
    --mach-sidebanner-height: 500px;
  }
.mach-sidebanner .title-box{right:30px;bottom:30px;padding:20px 25px;backdrop-filter:blur(20px);}

}

@media screen and (max-width: 576px) {
  :root {
    --mach-sidebanner-title-size: 24px;
    --mach-sidebanner-height: 500px;
  }
}

@media screen and (max-width:480px) {
.mach-sidebanner .title-box .sub-title{margin-top:15px;}
.mach-sidebanner .title-box{right:15px;bottom:15px;padding:15px 15px;}
}