/* 후불결제 안내 -- service/payment/postpaid_payment.asp
   CSS ONLY ON THE LEGACY MARKUP: both lanes serve the same <article class="sub_my">
   and this sheet, linked for this page alone, is the whole difference between them. */

/* The page's own <style> reaches this lane too and loads AFTER this sheet: a rule
   that has to beat one of its selectors doubles a class instead of !important. */

@media (max-width: 1023px) {
.sub_wrap { padding: 0; }

.sub_wrap article.sub_my {
  --c-primary: #159fda;
  --c-primary-dark: #0f86ba;
  max-width: 1260px;
  margin: 0 auto;
  padding: 30px 30px 90px;
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: #3a3d44;
}

.sub_wrap article.sub_my,
.sub_wrap article.sub_my *,
.sub_wrap article.sub_my *::before,
.sub_wrap article.sub_my *::after { box-sizing: border-box; }

.sub_wrap .sub_my h1.sub_h1 {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.5;
  color: #222;
  letter-spacing: -.02em;
  text-align: start;
  margin: 0 0 44px;
  padding: 0 0 20px;
  border-bottom: 3px solid #222;
}

.sub_wrap .info_section { margin-bottom: 50px; }

.sub_wrap .section_title {
  font-size: 17px;
  font-weight: 800;
  color: var(--c-primary);
  margin: 0 0 16px;
}

.sub_wrap .section_title .note {
  font-size: 13px;
  font-weight: 600;
  color: #999;
  margin-left: 8px;
}

.sub_wrap .postpaid_wrap .sub_p {
  font-size: 15px;
  line-height: 1.5;
  color: #444;
  text-align: start;
  margin: 0 0 14px;
}

.sub_wrap .target_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub_wrap .target_list li {
  font-size: 14px;
  color: #666;
  line-height: 2;
  padding-left: 14px;
  position: relative;
}

.sub_wrap .target_list li::before {
  content: "-";
  position: absolute;
  left: 0;
}

/* The mockup table has no colgroup and sizes its columns from the content; the legacy
   one fixes 40/40/20 with <col width>. A presentational attribute loses to any author
   rule, so `width:auto` is enough to hand the sizing back to the table algorithm. */

.sub_wrap .tb_default col { width: auto; }

.sub_wrap .tb_default {
  width: 100%;
  border-top: 0;
  border-bottom: 0;
}

.sub_wrap .tb_default th {
  background: #f4f5f7;
  border-top: 1px solid #d5d9df;
  border-bottom: 1px solid #d5d9df;
  padding: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.sub_wrap .tb_default td {
  border-bottom: 1px solid #eef0f3;
  padding: 18px 16px;
  font-size: 14px;
  color: #555;
  text-align: center;
}

/* sub.css drops the rule under the last row (.tb_default tr:last-child td, 0-2-2);
   the mockup keeps every row's line, so the same weight has to say so again. */

.sub_wrap .tb_default tr:last-child td { border-bottom: 1px solid #eef0f3; }

.sub_wrap .tb_default tr:nth-child(even) td { background: #f0f6fc; }

.sub_wrap .tb_default td:first-child {
  font-weight: 600;
  color: #333;
}

.sub_wrap .process_wrap {
  background: #f6f8fb;
  border-radius: 6px;
  padding: 28px 30px;
}

.sub_wrap .process_row { margin-bottom: 18px; }

.sub_wrap .process_row:last-child { margin-bottom: 0; }

/* <strong> where the mockup had a <div>: base.css already resets it to weight normal,
   but it is still inline, so the label needs a box of its own to carry margin-bottom. */

.sub_wrap .process_actor {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #333;
  margin-bottom: 8px;
}

.sub_wrap .process_flow {
  font-size: 13.5px;
  color: #666;
  line-height: 1.9;
  padding-left: 12px;
  margin: 0;
}

.sub_wrap .caution {
  font-size: 13.5px;
  color: #e0483d;
  line-height: 1.7;
  margin: 18px 0 0;
}

/* 발주서 list: sub.css paints bullet.png behind every item and forces a 30px top
   margin. The image has to go for the mockup's middle dot, and the margin is the one
   declaration on this page that has to carry !important to be heard at all. */

.sub_wrap .ul_default {
  margin-top: 0 !important;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.sub_wrap .ul_default li {
  background: none;
  margin-bottom: 0;
  text-align: start;
  font-size: 14px;
  color: #666;
  line-height: 2;
  padding-left: 14px;
  position: relative;
}

.sub_wrap .ul_default li::before {
  content: "\B7";
  position: absolute;
  left: 0;
}

/* Background is NOT restated: sub.css already paints .key_box #159fda !important and
   that is the mockup's own primary. Only :hover differs (#0080b3 vs #0f86ba), and an
   !important rule can only be answered by another one. */

.sub_wrap .key_box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  border-radius: 6px;
  padding: 14px 30px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.sub_wrap .key_box:hover { background: var(--c-primary-dark) !important; }
}

@media (max-width: 1023px) {

  .sub_wrap article.sub_my { padding: 16px 16px 40px; }

  .sub_wrap .sub_my h1.sub_h1 { font-size: 22px; margin-bottom: 28px; }

  .sub_wrap .postpaid_wrap { padding: 0; }

  .sub_wrap .info_section.info_section { margin-bottom: 36px; }

  .sub_wrap .info_section.info_section:last-child { margin-bottom: 0; }

  .sub_wrap .tb_default { font-size: 13px; }

  .sub_wrap .tb_default th,
  .sub_wrap .tb_default td { padding: 12px 8px; font-size: 12.5px; }

  .sub_wrap .process_wrap { padding: 20px 18px; }

  .sub_wrap .process_flow { font-size: 12.5px; }

  .sub_wrap .ul_default.ul_default { margin-bottom: 0; }

  .sub_wrap .key_box { width: 100%; justify-content: center; }
}