.body {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  justify-content: space-between;

  & > .start {
    padding-left: 46px;
    position: relative;

    .video {
      & video {
        position: relative;
        z-index: 1;
        height: calc(100dvh - 157px - 46px);
        width: 365px;
        object-fit: cover;
        display: block;
      }
    }
  }

  & > .end {
    padding-right: 46px;
    padding-bottom: 46px;
    width: 420px;
    display: flex;
    flex-direction: column;

    & > .top > .paragraph {
      margin-bottom: 40px;
    }

    & > .bottom {
      flex: 1;
      display: flex;
      align-items: end;
      justify-content: space-between;

      .inst {
        display: none;
      }
    }
  }
}

@media (max-width: 1300px) {
  .body {
    flex-direction: column;
    justify-content: normal;

    & > .start {
      padding-left: 32px;

      .video {
        & video {
          height: 370px;
          width: 300px;
          margin-top: 36px;
        }
      }
    }

    & > .end {
      padding-right: 32px;
      padding-bottom: 46px;
      padding-left: 32px;
      padding-top: 50px;
      width: 100%;
      display: flex;
      flex-direction: row;
      box-sizing: border-box;
      position: relative;

      & > .top {
        display: flex;
        gap: 30px;

        & > .paragraph {
          flex-grow: 0;
          width: 43%;
        }

        & > .paragraph2 {
          padding-right: 70px;
          box-sizing: border-box;
          position: relative;

          &:before {
            position: absolute;
            left: 0;
            top: -52px;
            content: " ";
            width: 1px;
            animation: lineShort 0.5s ease-in forwards;
            background-color: rgba(255, 255, 255, 0.18);
          }
        }
      }

      & > .bottom {
        position: absolute;
        text-align: right;
        bottom: 15px;
        right: 32px;

        .inst {
          display: block;
          margin-bottom: 30px;
        }

        & > .end {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .body {
    & > .start {
      padding-left: 23px;

      & .video {
        & video {
          height: 216px;
          width: 171px;
        }
      }
    }

    & > .end {
      padding-top: 43px;
      padding-left: 23px;
      padding-right: 23px;

      & > .top {
        flex-direction: column;
        gap: 0;
        position: relative;

        &:before {
          position: absolute;
          right: 0;
          top: -15px;
          content: " ";
          height: 1px;
          animation: lineRight 0.5s ease-in forwards;
          background-color: rgba(255, 255, 255, 0.18);
        }

        & > .paragraph {
          width: 100%;
          padding-right: 52px;
          box-sizing: border-box;
          margin-bottom: 27px;
        }

        & > .paragraph2 {
          box-sizing: border-box;
          padding-right: 154px;

          &:before {
            display: none;
          }
        }
      }

      & > .bottom {
        bottom: 30px;
        right: 23px;

        .inst {
          margin-bottom: 22px;

          img {
            width: 24px;
          }
        }
      }
    }
  }
}