@import "reset.css";
@import "common.css";
@import "m-common.css";
@import "m-index.css";
@import "m-sub.css";

@media screen and (min-width: 280px) and (max-width: 347px) {
  .swiper.mobile-visual .swiper-slide {
    width: calc(100% - 50px);
    height: 303px;
    margin: 0 12px;
  }
  .visual-area {
    padding: 22px 19px 0 22px;
    background-size: 150px auto;
  }
  .visual-text h2 {
    font-size: 1.313rem;
    letter-spacing: 0;
  }
  .banner-box {
    width: calc(50% - 7px);
  }
  .app-download .app-link {
    flex-direction: column;
    row-gap: 8px;
  }
  address {
    letter-spacing: -0.014rem;
  }
  .sub-wrap .container h2 {
    font-size: 1.625rem;
    margin-bottom: 30px;
  }
  .check-table tbody tr th {
    width: 98px;
  }
  .pccn-banner-desc .border-gray {
    align-items: flex-start;
    background-position: left 15px center;
    background-size: auto 30px;
  }
  .pccn-banner-desc .border-gray.icon-issue {
    background-image: url("/images/ico_issue.svg");
  }
  .pccn-banner-desc .border-gray.icon-embezzlement {
    background-image: url("/images/ico_embezzlement.svg");
  }
  .pccn-banner-desc .border-gray.icon_reissue {
    background-image: url("/images/ico_reissue.svg");
  }
  .pccn-banner-desc .border-gray.icon_report {
    background-image: url("/images/ico_report.svg");
  }
  .pccn-banner-desc .border-gray.icon_report_reissuance {
    background-image: url("/images/ico_report_reissuance.svg");
  }
  .pccn-banner-desc .border-gray br {
    display: none;
  }
  .pccn-prevente .border-gray {
    padding: 15px;
  }
  .delivery-search {
    padding: 20px 16px;
  }
  .delivery-info.data-table {
    margin: 24px 0 16px;
  }
  .delivery-contact {
    flex-wrap: wrap;
    height: auto;
    padding: 15px;
  }
  .delivery-contact .ico-driver {
    width: 100%;
    border-bottom: 1px dotted #ddd;
    padding-bottom: 10px;
  }
  .delivery-contact .ico-delivery-phone {
    width: 100%;
    margin-top: 10px;
  }
  .benefit-content .border-gray {
    padding: 30px 12px;
  }
  .benefit-content .benefit-text.icon-benefit2 {
    padding-bottom: 122px;
  }
  .signup-header > h2 {
    width: 110px;
    background-size: 110px auto;
    background-position: left center;
  }
  .signup-header > .signup-label {
    padding: 7px 3px;
    border-radius: 4px;
    background: #5667ff;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.13px;
  }
  .box-white .border-gray {
    padding: 15px;
  }
  .signup-text > br {
    display: none;
  }
  .signup-list > strong {
    width: calc(100% + 10px);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.55px;
    margin-left: -5px;
  }
  .login-form-group {
    display: flex; column-gap: 8px;
  }
  .login-form-group > .login-left-group {
    flex: 1; display: flex; flex-direction: column; row-gap: 4px;
  }
  .login-from-group > .login-right-group {
    width: 100px;
    flex-shrink: 0;
  }
  .login-form-num {
    column-gap: 0;
    row-gap: 8px;
    flex-direction: column;
  }
  .login-form-num > input {
    width: 100%;
    font-size: 0.875rem;
    padding: 15px 10px;
  }
  .login-form-num > button {
    width: 100%;
    height: 42px;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .code {
    width: 100%;
  }
  .login-form-check
    > .check-list
    > li
    > .check
    > input[type="checkbox"]
    + label {
    line-height: 1.125rem;
    height: auto;
  }
  .login-form-check
    > .check-list
    > li
    > .check
    > input[type="checkbox"]
    + label::before {
    padding-left: 24px;
  }
  .btn-underline {
    padding: 0 0 0 14px;
  }
  .tabnav {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 15px;
  }
  .tabnav li a {
    width: max-content;
  }
  .code-info br {
    display: none;
  }
}