@import url('../../common/css/app.css');
.btnText,
.downloadBtn,
.downBtnMobile {
  background: #ce5152;
  width: 27rem;
}
.webToAppStroies .title {
  color: #ce5152;
}
.webToAppMonthly .joinInToday {
  background: #ce5152;
  width: 30rem;
}
.webToAppArea {
  position: relative;
  display: flex;
}
.webToAppArea .webToBox {
  position: absolute;
  font-size: 20px;
  line-height: 23px;
  width: 210px;
  bottom: 44px;
  color: #fff;
  text-align: center;
}
.webToAppArea .webToBox p {
  font-family: OpenSans-Bold,Arial,Helvetica,sans-serif;
  font-weight: 600;
  margin: 0;
}
.webToAppArea .webToBox p:last-child {
  margin-top: 4px;
}
@media screen and (min-width: 768px){
  .webToAppStroiesItem p,
  .webToAppStroies .webToAppStoriesItem2 p {
    margin-top: 0;
  }
  .webToAppStroies .story1 {
    background-image: url(../img/app_story1.webp);
  }
  .webToAppStroies .story2 {
    background-image: url(../img/app_story2.webp);
  }
}
@media screen and (max-width: 768px) {
  .webToAppHeader {
    margin: 2.4rem 1.6rem 1.5rem;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 12;
  }

  .webToAppHeader .logo-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
  }

  .webToAppHeader .logo {
    width: 22rem;
    height: auto;
    margin: 0;
    pointer-events: auto;
  }

  .webToAppHeader .listBtn {
    position: relative;
    z-index: 15;
  }

  .listBtn {
    margin-top: 0.2rem;
  }
  .webToAppStroies .title {
    font-size: 1.8rem;
    text-align: center;
  }
  .webToAppArea .webToBox {
    font-size: 2.7vw;
    line-height: 3.3vw;
    width: 31vw;
    bottom: 3.1rem;
  }
  .webToAppArea .webToBox p:last-child {
    margin-top: 0.2rem;
  }
  .webToAppStroies .story1 {
    background-image: url(../img/app_mobile_story1.webp);
  }
  .webToAppStroies .story2 {
    background-image: url(../img/app_mobile_story2.webp);
  }
}
/* ========== PC Font Styles (min-width: 768px) ========== */
@media screen and (min-width: 768px) {
    .webToAppArea .webToBox p {
        font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    }
}

/* ========== Mobile Font Styles (max-width: 768px) ========== */
@media screen and (max-width: 768px) {
    .webToAppArea .webToBox p {
        font-family: STIXTwoText-Bold, Arial, Helvetica, sans-serif;
    }
}