.outer-left,
.outer-right {
  height: 115px;
  --ofs: calc(-1 * var(--o));
  --sz: calc(var(--r) + var(--o));
  background-image:
    radial-gradient(circle at var(--cnr), transparent var(--r), white var(--r)),
    radial-gradient(
      circle at var(--cnr),
      transparent var(--r),
      #ffffff var(--r)
    ),
    linear-gradient(45deg, rgb(210 223 246 / 0%), rgb(76 111 157 / 0%));
  background-repeat: no-repeat;
  background-size:
    var(--sz) var(--sz),
    var(--sz) var(--sz),
    cover;
  border-radius: var(--r);
  position: absolute;
  z-index: 9;
  top: 26px;
  align-content: start;
  --h: 60px;
  --o: 25px;
}

.outer-left {
  width: 230px;
  left: 30px;
  direction: ltr;
  --w: 160px;
  --r: 20px;
  background-position:
    var(--ofs) var(--h),
    var(--w) var(--ofs),
    0,
    0;
  --cnr: right bottom;
}

.outer-right {
  right: 30px;
  width: 150px;
  --ofs: calc(-1 * var(--o));
  --sz: calc(var(--r) + var(--o));
  --w: 80px;
  --r: 20px;
  background-position:
    calc(100% - var(--ofs)) var(--h),
    calc(100% - var(--w)) calc(var(--ofs)),
    0 0;
  --cnr: left bottom;
}

.inner {
  width: var(--w);
  height: var(--h);
  border-radius: inherit;
  outline: var(--o) solid white;
  background: #fff;
}

.outer-left span,
.outer-right span {
  width: 165px;
  height: 60px;
  display: block;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

.outer-right span {
  width: 80px;
  left: auto;
  right: 0;
}

body:not([data-template="home"]) .outer-left {
  width: 370px;
  background-image:
    radial-gradient(
      circle at var(--cnr),
      transparent var(--r),
      #000000 var(--r)
    ),
    radial-gradient(
      circle at var(--cnr),
      transparent var(--r),
      #000000 var(--r)
    ),
    linear-gradient(45deg, rgb(210 223 246 / 0%), rgb(76 111 157 / 0%));
  left: 0;
  --w: 275px;
}

body:not([data-template="home"]) .outer-right {
  width: 240px;
  background-image:
    radial-gradient(
      circle at var(--cnr),
      transparent var(--r),
      #000000 var(--r)
    ),
    radial-gradient(
      circle at var(--cnr),
      transparent var(--r),
      #000000 var(--r)
    ),
    linear-gradient(45deg, rgb(210 223 246 / 0%), rgb(76 111 157 / 0%));
  right: 0;
  --w: 170px;
}

body:not([data-template="home"]) .inner {
  outline: var(--o) solid #000000;
  background: #000000;
}

body:not([data-template="home"]) .outer-left span,
body:not([data-template="home"]) .outer-right span {
  width: 280px;
  top: 0;
  left: 0;
  background: #000000;
}

body:not([data-template="home"]) .outer-right span {
  width: 180px;
}

body:not([data-template="home"]) .header-box .right-box .menu-btn {
  margin-right: 0;
}

@media (max-width: 1500px) {
  body:not([data-template="home"]) .outer-left {
    width: 260px;
    --w: 190px;
  }

  body:not([data-template="home"]) .outer-left span {
    width: 195px;
  }

  body:not([data-template="home"]) .outer-right {
    width: 180px;
    --w: 110px;
  }

  body:not([data-template="home"]) .outer-right span {
    width: 110px;
  }
}

@media (max-width: 1200px) {
  .outer-left {
    width: 180px;
    --w: 120px;
  }

  .outer-right {
    width: 120px;
    --w: 65px;
  }

  .outer-left,
  .outer-right {
    height: 105px;
    --h: 48px;
  }

  .outer-left span,
  .outer-right span {
    width: 124px;
    height: 55px;
  }

  .outer-right span {
    width: 80px;
  }

  body:not([data-template="home"]) .outer-left {
    width: 210px;
    --w: 150px;
  }

  body:not([data-template="home"]) .outer-left span {
    width: 154px;
  }

  body:not([data-template="home"]) .outer-right {
    width: 150px;
    --w: 95px;
  }

  body:not([data-template="home"]) .outer-right span {
    width: 105px;
  }
}

@media (max-width: 768px) {
  .outer-left,
  .outer-right {
    height: 95px;
    --h: 35px;
    top: 15px;
  }

  .outer-left {
    left: 20px;
    width: 160px;
    --w: 95px;
  }

  .outer-right {
    right: 20px;
    width: 105px;
    --w: 45px;
  }

  .outer-left span,
  .outer-right span {
    width: 103px;
    height: 50px;
  }

  .outer-right span {
    width: 50px;
  }

  body:not([data-template="home"]) .outer-left {
    width: 180px;
    --w: 115px;
  }

  body:not([data-template="home"]) .outer-left span {
    width: 123px;
  }

  body:not([data-template="home"]) .outer-right {
    width: 125px;
    --w: 65px;
  }

  body:not([data-template="home"]) .outer-right span {
    width: 70px;
  }
}

@media (max-width: 450px) {
  .outer-left {
    left: 16px;
  }

  .outer-right {
    right: 16px;
  }

  .outer-left span {
    width: 100px;
  }
}