.advantage {
  .cont {
    padding: 0;

    .box {
      max-width: 100%;

      .item-cont {
        padding: 0px 0 80px;

        @media screen and (max-width: 991px) {
          padding: 0px 0 40px;
        }

        .item {
          position: relative;
          &::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background: linear-gradient(to left, #ff6600, transparent);
            pointer-events: none;

            @media screen and (max-width: 991px) {
              width: 100%;
              background: linear-gradient(to bottom, #ff6600, transparent);
            }
          }

          &.ad-01,
          &.ad-02,
          &.ad-03,
          &.ad-04 {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
          }

          &.ad-01 {
            background-image: url("../../assets/img/image/advantage/ad-bg-01.jpg");
          }

          &.ad-02 {
            background-image: url("../../assets/img/image/advantage/ad-bg-02.jpg");
          }
          &.ad-03 {
            background-image: url("../../assets/img/image/advantage/ad-bg-03.jpg");
          }
          &.ad-04 {
            background-image: url("../../assets/img/image/advantage/ad-bg-04.jpg");
          }

          .txt-cont {
            position: relative;
            max-width: 1280px;
            margin: 0 auto;
            padding: 24px 0;

            @media screen and (max-width: 1279px) {
              padding: 24px;
            }

            @media screen and (max-width: 991px) {
              padding: 16px;
              display: flex;
              flex-direction: column-reverse;
              gap: 16px;
            }

            .txt-box {
              position: relative;
              width: 100%;
              max-width: 50%;
              background: #00000063;
              padding: 40px;
              color: #fff;
              display: flex;
              flex-direction: column;
              gap: 16px;
              border-left: 5px solid #fff;

              @media screen and (max-width: 991px) {
                max-width: 100%;
                gap: 8px;
                padding: 16px;
              }

              &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: -24px;
                transform: translateY(-50%);
                width: 8px;
                height: 100%;
                background: #ff9100;

                @media screen and (max-width: 991px) {
                  left: -12px;
                }
              }

              .ttl {
                font-size: clamp(1.25rem, 0.75rem + 1.0417vw, 2rem);
                font-weight: 600;
                line-height: 1.2;
              }
            }
            .side-ttl {
              position: absolute;
              bottom: 16%;
              right: 0%;
              font-size: clamp(2rem, 0.4167rem + 3.2986vw, 4.375rem);
              font-weight: 900;
              font-family: Arial, Helvetica, sans-serif;
              text-align: right;
              line-height: 1.1;
              color: #fff;

              @media screen and (max-width: 1279px) {
                right: 3%;
              }

              @media screen and (max-width: 991px) {
                position: unset;
              }
            }
          }

          &.reverse {
            &::before {
              right: unset;
              left: 0;
              background: linear-gradient(to right, #ff6600, transparent);

              @media screen and (max-width: 991px) {
                width: 100%;
                background: linear-gradient(to bottom, #ff6600, transparent);
              }
            }

            .txt-cont {
              display: flex;
              justify-content: flex-end;

              @media screen and (max-width: 991px) {
                display: flex;
                flex-direction: column-reverse;
                gap: 16px;
              }

              .txt-box {
                border-left: unset;
                border-right: 5px solid #fff;

                @media screen and (max-width: 991px) {
                  width: 100%;
                }

                &::before {
                  left: unset;
                  right: -24px;
                  background: #ff9100;

                  @media screen and (max-width: 991px) {
                    right: -12px;
                  }
                }
              }
              .side-ttl {
                right: unset;
                left: 0%;
                text-align: left;

                @media screen and (max-width: 1279px) {
                  left: 3%;
                }
              }
            }
          }
        }
      }
    }
  }
}