@media (max-width: 1023px) {
.detail_v2.over_none .prod_header {
  padding-bottom: 20px;
  margin-bottom: 0;
}

.detail_v2.over_none .prod_header .header_actions .free_ban .pane { display: none; }

.detail_v2.over_none .prod_header .header_actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }

.detail_v2.over_none .prod_header .header_actions .free_ban {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  height: 42px; padding: 0 13px;
  text-align: center; white-space: nowrap;
}

.detail_v2.over_none .prod_header .header_actions .free_ban .sub { margin-top: 0; }

.detail_v2.over_none .prod_header .header_actions .btn {
  padding: 0 14px; height: 42px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

.detail_v2.over_none .layout .left { margin-top: 0; }

.detail_v2.over_none .form_container .form_row { margin-bottom: 0; }

.detail_v2.over_none .form_container .form_row { align-items: center; gap: 10px; }

.detail_v2.over_none .form_container .form_buttons { gap: 10px; }

.detail_v2.over_none .form_container .custom_btn { --gap: 10px; }

.detail_v2.over_none .form_container .form_label {
  margin-top: 0;
  min-width: 0;
}

.detail_v2.over_none .form_container .form_buttons input[type="text"],
.detail_v2.over_none .form_container .size_input_group input[type="text"] {
  height: 42px;
  padding: 0 10px;
}

.detail_v2.over_none .form_container .size_input_group input[type="text"] { text-align: center; }

.detail_v2.over_none .form_container .size_input_group > span {
  padding: 0 4px;
}

.detail_v2.over_none .form_container .form_buttons select {
  width: 100%; height: 42px;
  padding: 0 34px 0 14px;
  appearance: none; -webkit-appearance: none;
  background-repeat: no-repeat; background-position: right 14px center;
}

.detail_v2.over_none .form_container .custom_btn:has(> .unit) {
  position: relative; display: flex; align-items: center; overflow: hidden;
  height: 42px;
}

/* The unit label is pinned over the select's right edge, which is where the
   select's own arrow is drawn, so that arrow has to go: .unit carries the one
   the reader sees. Leaving both is two arrows, one on top of the label. */
.detail_v2.over_none .form_container .custom_btn:has(> .unit) > select {
  width: 100%; height: 100%;
  padding: 0 10px;
  background-image: none;
}

.detail_v2.over_none .form_container .custom_btn:has(> .unit) > .unit {
  position: absolute; right: 0; top: 0; bottom: 0; left: auto;
  transform: none;
  display: flex; align-items: center; padding: 0 10px;
  white-space: nowrap;
}

.detail_v2.over_none .form_container .custom_btn:has(> .unit) > .unit::after {
  content: "\00a0\25BC";
}

.detail_v2.over_none .form_container .custom_btn:not(.btn_w_corner) > .option_btn {
  padding: 0 6px;
}

.detail_v2, .detail_v2 * { box-sizing: border-box; }
}

@media (max-width: 1023px) {
  .detail_v2 .option_wrap { width: auto; max-width: 100%; padding: 0 16px; }
  .detail_v2 nav.breadcrumb { width: auto; max-width: 100%; }
  .detail_v2 .option_wrap .layout { display: block; width: auto; }

  .detail_v2 .left, .detail_v2 .layout .right, .detail_v2 .option_area { width: 100%; }

  .detail_v2.over_none .left .fixed_area,
  .detail_v2 .fixed_area { position: static !important; top: auto !important; width: 100%; height: auto; }

  .detail_v2 .side.fixed_price .price_box { display: none; }

  .detail_v2.over_none .preview_wrap { width: 90%; margin: 0 auto; height: auto; }
  .detail_v2 .preview_wrap img { max-width: 100%; height: auto; }
  .detail_v2 .tab_btn_wrap { width: 90%; margin: 8px auto 0; }

  /* L_PRODxxxx.asp emits 1..8 thumbs and a fixed 20% fitted exactly five, so
     every 6+ product wrapped. Basis, not width, so the extras shrink instead;
     the 28px floor scrolls rather than grind a thumb to mush at 320. */
  .detail_v2.over_none .preview_wrap ul.tab_btn_wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .detail_v2.over_none .preview_wrap ul.tab_btn_wrap::-webkit-scrollbar { display: none; }
  .detail_v2.over_none .preview_wrap .tab_btn_wrap li {
    flex: 0 1 calc(20% - 5px);
    min-width: 28px;
  }
  .detail_v2 .tab_cont_wrap { width: 100%; }
  .detail_v2 .tab_cont_wrap img { max-width: 100%; height: auto; }

  .detail_v2.over_none .prod_header { width: 100%; flex-wrap: wrap; gap: 10px; }

  .detail_v2.over_none .prod_header .header_actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px; width: 100%; margin-left: 0;
  }
  .detail_v2.over_none .prod_header .header_actions .free_ban,
  .detail_v2.over_none .prod_header .header_actions .btn {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    text-align: center; padding: 10px 6px;
    height: 56px; gap: 6px; white-space: normal;
    width: 100%; min-width: 0;
  }
  .detail_v2.over_none .prod_header .header_actions .free_ban .sub { display: none; }

  .detail_v2 .form_container, .detail_v2 .basic_option { width: 100%; }
  .detail_v2 .form_row {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
    padding: 14px 0; width: 100%;
  }

  .detail_v2 .form_label { flex: 0 0 110px; min-width: 0; }
  .detail_v2 .form_buttons { width: auto; flex: 1 1 0; min-width: 0; }
  .detail_v2 .custom_select, .detail_v2 .custom_btn { width: 100%; max-width: 100%; }
  .detail_v2 .custom_select > select, .detail_v2 .custom_select .sel01 {
    width: 100%; height: 42px;

    padding: 0 34px 0 14px;
    appearance: none; -webkit-appearance: none;
    background-repeat: no-repeat; background-position: right 14px center;
  }

  .detail_v2 .form_buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  .detail_v2 .custom_select.btn_w_half, .detail_v2 .custom_btn.btn_w_half { flex: 0 1 230px; width: auto; }
  .detail_v2 .custom_select.btn_w_third, .detail_v2 .custom_btn.btn_w_third { flex: 0 1 150px; width: auto; }

  .detail_v2.over_none .form_container .custom_btn:has(> .unit) { flex: 1 1 0; min-width: 0; }

  .detail_v2.over_none .form_container .form_buttons:not(:has(.unit)) .custom_btn:has(select):not(:has(.custom_btn)):not(:has(.size_input_group select ~ select)) {
    flex-grow: 1;
  }

  .detail_v2.over_none .form_container .form_buttons > .price_total { margin-right: 10px; }

  .detail_v2.over_none .form_row:has(.form_buttons.multi_sel) { flex-wrap: wrap; }
  .detail_v2.over_none .form_buttons.multi_sel { flex: 0 0 100%; width: 100%; }

  .detail_v2.over_none .form_row:has(.txt_guide) { flex-wrap: wrap; }
  .detail_v2.over_none .form_row:has(.txt_guide) .form_label { display: none; }
  .detail_v2.over_none .form_row .txt_guide { flex: 0 0 100%; width: 100%; }

  .detail_v2 .size_input_group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

  .detail_v2.over_none .form_container .size_input_group input[type="text"] {
    width: 64px; min-width: 0; padding: 0 8px;
  }

  .detail_v2.over_none .form_row:has(.form_buttons select[name="size"]) .custom_btn:has(> .text_label),
  .detail_v2.over_none .form_row:has(.size_input_group) .custom_btn:has(> .text_label) { display: none; }

  .detail_v2.over_none .form_row:has(.size_input_group) {
    flex-wrap: nowrap; align-items: center; gap: 10px;
  }
  .detail_v2.over_none .form_row:has(.size_input_group) .form_label {
    flex: 0 0 110px; width: auto; min-width: 0;
  }
  .detail_v2.over_none .form_row:has(.size_input_group) .form_buttons { flex: 1 1 0; min-width: 0; }

  .detail_v2.over_none .size_input_group:has(> input[type="text"])::after {
    content: "mm"; flex: 0 0 auto; white-space: nowrap;
    font-size: 13px; font-weight: 700; color: #6b7079;
  }

  .detail_v2 .option_btn, .detail_v2 .form_buttons .option_btn { width: 100%; }

  .detail_v2.over_none .form_buttons.multi_sel {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  }
  .detail_v2.over_none .form_buttons.multi_sel .custom_btn { width: auto; flex: none; }

  .detail_v2 .option_btn {
    min-height: 56px;
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
  }

  .detail_v2 .addedworkOpt, .detail_v2 .acc_section, .detail_v2 .acc_content { width: 100%; }
  .detail_v2 .add_option_left, .detail_v2 .add_option_right { width: 100%; float: none; }

  .detail_v2 .fileuploadWrap, .detail_v2 .drag_box { width: 100%; }

  .detail_v2.over_none .left .fixed_area { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  .detail_v2.over_none .fixed_area > div:not([class]) { display: contents; }
  .detail_v2.over_none .fixed_area .preview_wrap,
  .detail_v2.over_none .fixed_area .tab_btn_wrap { grid-column: 1 / -1; min-width: 0; }
  /* Both guide boxes stay open at every width; here they take the whole row
     instead of sharing it. The rest of the narrow shape is at the file's end,
     after the ungated rules it has to override. */
  .detail_v2.over_none .fixed_area .period_box { grid-column: 1 / -1; min-width: 0; }

  .detail_v2 .option_area .price_section { width: 100%; }
  .detail_v2 .option_area .action_buttons { width: 100%; }

  .detail_v2 .cont_box, .detail_v2 .tab_cont_wrap > * { max-width: 100%; }
  .detail_v2 table { max-width: 100%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .detail_v2 .option_wrap { padding: 0 24px; }
  .detail_v2.over_none .option_wrap .layout { display: flex; flex-direction: row; flex-wrap: wrap; gap: 28px; }

  .detail_v2.over_none .layout .left { flex: 0 0 42%; width: 42%; max-width: 42%; }
  .detail_v2.over_none .layout .right { flex: 1 1 0; width: auto; min-width: 0; }

  .detail_v2.over_none .layout .side.fixed_price { flex: 0 0 100%; width: 100%; max-width: 100%; }
  .detail_v2.over_none .preview_wrap { width: 100%; }
  .detail_v2.over_none .tab_btn_wrap { width: 100%; }

  .detail_v2.over_none .prod_header .header_actions .free_ban,
  .detail_v2.over_none .prod_header .header_actions .btn {
    height: 46px; flex-direction: row; padding: 4px 8px;
  }
  .detail_v2.over_none .prod_header .header_actions .free_ban { flex-direction: column; gap: 0; }
  .detail_v2.over_none .prod_header .header_actions .free_ban .sub {
    display: block; margin-top: 0;
  }
}

@media (max-width: 767px) {
  .detail_v2.over_none .option_wrap .layout { display: flex; flex-direction: column; gap: 30px; }
  .detail_v2.over_none .option_area { padding-bottom: 0; }

  /* Natural width + grow instead of equal columns: the banner is intrinsically
     wider than the two guide chips, and equal thirds left it 0.2px short at 320.
     .free_ban .body spent 30 of its 141px on side padding a phone cannot pay. */
  .detail_v2.over_none .prod_header .header_actions { display: flex; flex-wrap: nowrap; }
  .detail_v2.over_none .prod_header .header_actions .free_ban,
  .detail_v2.over_none .prod_header .header_actions .btn {
    flex: 1 1 auto;
    width: auto;
    white-space: nowrap;
  }
  .detail_v2.over_none .prod_header .header_actions .free_ban .body { padding: 0; }
}

@media (max-width: 480px) {
  /* At 13px the three chips still wanted 322px of the 288 a 320 screen leaves.
     11px brings them to 267 and grow spends the 21px that are left. */
  .detail_v2.over_none .prod_header .header_actions { gap: 6px; }
  .detail_v2.over_none .prod_header .header_actions .free_ban,
  .detail_v2.over_none .prod_header .header_actions .btn {
    padding: 10px 4px;
    gap: 5px;
  }
  .detail_v2.over_none .prod_header .header_actions .free_ban .head,
  .detail_v2.over_none .prod_header .header_actions .btn { font-size: 11px; }
  .detail_v2.over_none .prod_header .header_actions .btn .icon { width: 16px; height: 16px; }
}

@media (max-width: 1023px) {
  .detail_v2 nav.breadcrumb { display: none !important; }
}

/* Below 1024 only: at desktop this page is the legacy one, so the
   sheet must not reach it. Wrapped in place, so the narrow cascade
   keeps the order it had. */
@media (max-width: 1023px) {
/* tokens do not depend on width; only the layout half stays gated */

/* tokens do not depend on width; only the layout half stays gated */

.detail_v2.over_none .custom_select > select, .detail_v2.over_none .custom_select .sel01 {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 14px center;
}

}

@media (max-width: 1023px) {
.detail_v2.over_none .floating_evtban {
  text-align: center;
  padding: 18px 16px; margin-top: 14px;
}

.detail_v2.over_none .fixed_area .floating_evtban h3 {
  display: block; width: fit-content; margin: 0 auto 12px;
  padding: 5px 16px;
}

.detail_v2.over_none { --c-mute: #9aa0a8; }

.detail_v2.over_none .option_area .price_section {
  padding: 20px 28px;
  margin: 24px 0 0;
}

.detail_v2.over_none .option_area .price_section .price_row:nth-child(1) {
  display: block; text-align: right;
  margin: 0;
}

.detail_v2.over_none .option_area .price_section .price_row:nth-child(2) {
  display: block; text-align: right;
  margin: 4px 0 0;
}

.detail_v2.over_none .option_area .price_section .price_row.final {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
}

.detail_v2.over_none .option_area .price_section .price_row.final { justify-content: flex-start; margin-bottom: 0; }

.detail_v2.over_none .option_area .price_section .price_row.final > span[style] { margin-left: 4px; }

.detail_v2.over_none .option_area .price_section .price_row.final .price03 {
  margin-right: 4px; margin-left: auto;
}

/* The buttons sit INSIDE .price_section here, not beside it as in the mockup,
   so the sheet's own 28px/20px re-applied the card inset and its margin:0 ate
   the 20px above. detail_v2.css already lays them out; let it. */

.detail_v2.over_none .option_area .action_buttons .action_button {
  flex: 1 1 0; height: 54px; min-height: 54px; padding: 0 12px;
  cursor: pointer;
}

.detail_v2.over_none .acc_section { padding: 0; }

.detail_v2.over_none .acc_header {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 14px 0;
}

.detail_v2.over_none .acc_tit_wrap { display: flex; align-items: center; gap: 10px; flex: 1; }

.detail_v2.over_none .acc_tit {
  flex: 0 0 110px; min-width: 110px;
}

.detail_v2.over_none .acc_content { padding: 18px 0; }

.detail_v2.over_none .form_row:has(.txt_guide) {
  flex-wrap: wrap; margin-top: 0; padding: 10px 0 0;
}

.detail_v2.over_none .acc_content .form_row:has(.txt_guide) { padding-top: 28px; }

.detail_v2.over_none .acc_content:has(.txt_guide) { padding-bottom: 0; }

.detail_v2.over_none .form_row:has(.txt_guide) .form_label { display: none; }

.detail_v2.over_none .form_row .txt_guide {
  flex: 0 0 100%; width: 100%; text-align: left;
}

.detail_v2.over_none .acc_content_list .form_row:has(.form_buttons.multi_sel) {
  padding: 0;
}

.detail_v2.over_none .acc_content_list .form_row:has(.form_buttons.multi_sel) .form_label { display: none; }

.detail_v2.over_none .form_buttons.multi_sel:has(> .btn_w_corner) {
  grid-template-columns: repeat(4, 1fr);
}
}

/* Below 1024 only: at desktop this page is the legacy one, so the
   sheet must not reach it. Wrapped in place, so the narrow cascade
   keeps the order it had. */
@media (max-width: 1023px) {
/* tokens do not depend on width; only the layout half stays gated */

/* The box reads the same at every width, so its shape is not gated either;
   the narrow band only overrides the two things that must differ. */
.detail_v2.over_none .period_box {
  width: 100%; box-sizing: border-box;
  padding: 18px; margin: 18px 0 0 !important;
}

.detail_v2.over_none .period_box .period_tit {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-start; margin-bottom: 0;
}

.detail_v2.over_none .period_box .period_tit .sub_tit {
  margin-left: 0;
}

.detail_v2.over_none .period_box .period_list { margin-top: 12px; }

.detail_v2.over_none .period_box .period_list li {
  padding-left: 11px; margin-bottom: 0;
}

}

@media (max-width: 1023px) {
.style_puble .content_wrap_new .tab_new ul.tab_btn_wrap,
.style_puble .content_wrap_new .tab_new div.tab_cont_wrap {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.style_puble .w1200 { width: auto; max-width: 1200px; }

.style_puble .content_wrap_new .tab_new .tab_btn_box {
  position: sticky;
  top: 0;
  z-index: 40;
}

.style_puble .content_wrap_new .tab_new ul.tab_btn_wrap {
  display: flex;
  align-items: stretch;
}

.style_puble .content_wrap_new .tab_new ul.tab_btn_wrap > li,
.style_puble .content_wrap_new .tab_new .tab4 ul.tab_btn_wrap > li,
.style_puble .content_wrap_new .tab_new .tab5 ul.tab_btn_wrap > li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: auto;
  height: 60px;
  white-space: nowrap;
  transition: background-color .15s;
}

.style_puble .content_wrap_new .tab_new ul.tab_btn_wrap > li span {
  display: block;
  width: auto;
  height: auto;
  padding: 0 8px;
  transition: color .15s;
}
}

/* Load-bearing above 1023: the 1202 floor keeps html/body wide in 1024-1200,
   and this is what holds the content inside it. Narrowing it to 1023 opened a
   29px gutter again, measured. */
@media (max-width: 1224px) {
  .style_puble * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .style_puble .swiper-wrapper,
  .style_puble .swiper-slide { max-width: none; }

  .style_puble img { max-width: 100%; height: auto; }

  .style_puble table { width: 100%; max-width: 100%; }
}

@media (max-width: 1023px) {
.style_puble .content_wrap_new .content_img { overflow: hidden; }

.style_puble .content_wrap_new .content_img img { max-width: none; }
}

@media (max-width: 1023px) {
  .style_puble .content_wrap_new .tab_new ul.tab_btn_wrap {
    max-width: none;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .style_puble .content_wrap_new .tab_new ul.tab_btn_wrap::-webkit-scrollbar {
    display: none;
  }
  .style_puble .content_wrap_new .tab_new ul.tab_btn_wrap > li span { padding: 0 14px; }

  .style_puble .content_wrap_new .tab_new div.tab_cont_wrap { max-width: none; padding: 0; }
  .style_puble .content_wrap_new .tab_new div.tab_cont_wrap article.cont_box {
    padding: 50px 16px;
  }

  .style_puble .content_wrap_new .tab_new div.tab_cont_wrap article h3 br { display: none; }
  .style_puble .content_wrap_new .tab_new div.tab_cont_wrap article h3.work_tit {
    padding: 50px 0 25px;
  }
  .style_puble .content_wrap_new h4.tit_h4 { margin-top: 50px; }

  .style_puble .content_wrap_new .mainex_swiper { height: auto; }
  .style_puble .content_wrap_new .swiper-slide { height: auto; }
  .style_puble .content_wrap_new .mainex_box {
    display: flex; flex-direction: column; width: 100%; height: auto;
  }
  .style_puble .content_wrap_new .mainex_img {
    order: -1; width: 100%; height: auto; margin-bottom: 24px;
  }
  .style_puble .content_wrap_new .mainex_tit { width: 100%; height: auto; }
  .style_puble .content_wrap_new .mainex_tit h5 {
  margin-top: 20px;
  }
  .style_puble .content_wrap_new .mainex_tit p { margin-top: 20px; }

  .style_puble .content_wrap_new .mainex_img h2 {
    top: 0; right: 0; left: auto;
    width: auto; height: auto; padding: 12px 18px;
  }

  .style_puble .content_wrap_new .tab_new .list_default { flex-wrap: wrap; margin-top: 50px; }
  .style_puble .content_wrap_new .tab_new .list_default > li {
    width: 100%; margin-right: 0; margin-bottom: 35px;
  }
  .style_puble .content_wrap_new .tab_new .list_default li h5 { margin-top: 20px; }
  .style_puble .content_wrap_new .tab_new .list_default li img { margin-top: 20px; }
  .style_puble .content_wrap_new .tab_new .list_default li button { position: static; margin-top: 12px; }

  .style_puble .content_wrap_new .img_box { flex-wrap: wrap; margin-top: 30px; }
  .style_puble .content_wrap_new .img_box li { width: 100%; margin: 30px auto 0; }
  .style_puble .content_wrap_new .img_box li h5 { margin-top: 15px; }

  .style_puble .content_wrap_new .ul_default3 li.img { flex-wrap: wrap; }
  .style_puble .content_wrap_new .ul_default3 li.img div {
    width: 100%; margin-right: 0; margin-bottom: 20px;
  }
  .style_puble .content_wrap_new .notice_h5 { margin: 20px 0 15px; }

  .style_puble .content_wrap_new .certi_box { flex-wrap: wrap; padding: 40px 0; }
  .style_puble .content_wrap_new .certi_box li { width: 100%; margin: 0 0 20px; }

  .style_puble .content_wrap_new .faq_list { margin-top: 30px; }
  .style_puble .content_wrap_new .faq_list li.question {
    padding: 20px 40px 20px 5px;
  }
  .style_puble .content_wrap_new .faq_list li.question button {
    top: 18px; right: 5px; width: 22px; height: 22px; background-size: 60%;
  }
  .style_puble .content_wrap_new .faq_list .answer { padding: 20px 5px; }
  .style_puble .content_wrap_new .faq_list .answer div.content .btn {
    width: 100%; max-width: 400px; height: auto; padding: 15px 10px;
  }
  .style_puble .content_wrap_new .faq_box .ul_default { margin-top: 50px; padding-left: 0; }
  .style_puble .content_wrap_new .faq_box .ul_qna li.img { flex-wrap: wrap; margin: 30px 0; }
  .style_puble .content_wrap_new .faq_box .ul_qna li.img div {
    width: 100%; margin-right: 0; margin-bottom: 20px;
  }

  .style_puble .content_wrap_new .option_default { margin-top: 50px; }
  .style_puble .content_wrap_new .option_default article { width: 100%; height: auto; }
  .style_puble .content_wrap_new .option_default article h4 { margin-top: 50px; }
  .style_puble .content_wrap_new .option_default .swiper-wrapper {
    display: block; height: auto; transform: none; max-width: 100%;
  }
  .style_puble .content_wrap_new .option_default .swiper-slide {
    width: 100%; max-width: 100%; height: auto;
  }
  .style_puble .content_wrap_new .option_default .list_default > li {
    width: 100%; margin-right: 0;
  }
  .style_puble .content_wrap_new .option_default .option_prev,
  .style_puble .content_wrap_new .option_default .option_next { display: none; }

  .style_puble .content_wrap_new .easy_order_box {
    flex-wrap: wrap; justify-content: space-between; margin-top: 30px;
  }
  .style_puble .content_wrap_new .easy_order_box li {
    width: 49%; height: 80px; margin: 0 0 8px; padding: 10px;
    justify-content: center; text-align: center;
  }

  .style_puble .content_wrap_new .work_list > li { margin-bottom: 25px; }
  .style_puble .content_wrap_new .work_list .work_ex table.tb1 { width: 100%; }
  .style_puble .content_wrap_new .work_list .work_ex table.tb1 td { padding: 16px 0; }
  .style_puble .content_wrap_new article ol { margin: 0 0 25px 16px; }

  .style_puble .content_wrap_new .tab_new .ul_cut { flex-wrap: wrap; }
  .style_puble .content_wrap_new .tab_new .ul_cut > li { width: 100%; margin: 0 0 24px; }

  .style_puble .content_wrap_new .content_img img {
    margin-left: -20%; width: 140%;
  }

  .style_puble .table-responsive {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .style_puble .table-responsive table { width: 100%; min-width: 600px; }

  .style_puble .ban_template_2,
  .style_puble .ban_wallcal_template {
    height: 0; padding-bottom: 19.67%;
    background-size: 100% 100%; background-repeat: no-repeat;
    position: relative;
  }
  .style_puble .ban_template_btn { top: 0; right: 0; width: 100%; height: 100%; }

  .style_puble .content_wrap_new div.a_explain { padding: 20px; }
  .style_puble .content_wrap_new .btn_box { width: 100%; }
  .style_puble .popup_box { width: 92%; max-width: 430px; height: auto; padding-bottom: 20px; }
}

@media (max-width: 480px) {
  .style_puble .content_wrap_new .easy_order_box li { width: 100%; }
}

@media (max-width: 1023px) {
.style_puble .content_wrap_new p.con_tip,
.style_puble .content_wrap_new .mainex_tit p.con_tip {
  display: inline-flex;
  align-items: center;
  bottom: -5px;
  padding: 11px 20px;
}

.style_puble .content_wrap_new .paging_box {
  left: 0;
  right: 0;
  width: 100%;
  padding: 0;
}

.style_puble .content_wrap_new .paging_box ul {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.style_puble .content_wrap_new .paging_box ul li {
  display: block;
  position: relative;
  width: 9px;
  height: 9px;
  margin-right: 0;
  border-radius: 50%;
  background: #d3d8df;

  overflow: visible;
  box-sizing: border-box;
  transition: width .2s, background-color .2s;
}

.style_puble .content_wrap_new .paging_box ul li.current {
  width: 26px;
  border-radius: 5px;
  background: #159fda;
}

.style_puble .content_wrap_new .paging_box ul li:before { content: none; }

.style_puble .content_wrap_new .paging_box ul li:after,
.style_puble .content_wrap_new .paging_box ul li.current:after {
  content: "";
  position: absolute;
  inset: -8px -7px;
  top: -8px; right: -7px; bottom: -8px; left: -7px;
  width: auto;
  height: auto;
  background: none;
  animation: none;
  border-radius: 0;
}

.style_puble .content_wrap_new .top_play {
  left: 0;
  right: auto;
  width: 116px;
  height: 36px;
  box-sizing: border-box;
}

.style_puble .content_wrap_new .top_play:before { content: none; }

.style_puble .content_wrap_new .top_play > div {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid #e6e8ec;
  border-radius: 4px;
  background-color: #fff;
  background-image: none;
  color: #6b7079;
  text-align: center;

  cursor: pointer;

  opacity: 1;
  transition: border-color .15s, color .15s;
}

.style_puble .content_wrap_new .top_play > div:hover {
  border-color: #159fda;
  color: #159fda;
}

.style_puble .content_wrap_new .top_play > div.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
}

.style_puble .content_wrap_new .top_play > div:before {
  display: block;
  font-size: 18px;
  line-height: 34px;
  font-weight: 400;
  text-indent: 0;
}

.style_puble .content_wrap_new .top_play .swiper-button-prev { left: 0;  top: 10px; }

.style_puble .content_wrap_new .top_play .swiper-button-next { left: 40px; top: 10px; }

.style_puble .content_wrap_new .top_play .swiper-button-prev:before { content: "\2039" / ""; }

.style_puble .content_wrap_new .top_play .swiper-button-next:before { content: "\203A" / ""; }

.style_puble .content_wrap_new .top_play .swiper-pause,
.style_puble .content_wrap_new .top_play .swiper-play { left: 80px; top: 0; }

.style_puble .content_wrap_new .top_play .swiper-pause:before { content: "\275A\275A" / ""; font-size: 11px; }

.style_puble .content_wrap_new .top_play .swiper-play:before  { content: "\25B6" / "";      font-size: 11px; }

.style_puble .content_wrap_new .mainex_swiper,
.style_puble .content_wrap_new.papercup .mainex_swiper { height: auto; }

.style_puble .content_wrap_new .mainex_swiper:has(.paging_box) { padding-bottom: 125px; }

.style_puble .content_wrap_new .mainex_swiper > .swiper-wrapper { transform: none; }

.style_puble .content_wrap_new .mainex_swiper .paging_box { bottom: 70px; }

.style_puble .content_wrap_new .mainex_swiper .top_play   { bottom: 10px; }
}

@media (max-width: 1023px) {
  .style_puble .content_wrap_new .mainex_swiper:has(.paging_box) { padding-bottom: 115px; }
  .style_puble .content_wrap_new .mainex_swiper .paging_box { bottom: 60px; }
}

@media (max-width: 1023px) {
  section.style_puble.mt100 { margin-top: 0 !important; }
  section.style_puble.mt100 > section.content_wrap_new { margin-top: 0; }

  section.style_puble.mt100 > article.option_detail_wrap { margin-top: 0; }
}

@media (max-width: 1023px) {
  section.style_puble:not(:has(section.content_wrap_new)) .tit_h2 { padding-top: 40px; margin-bottom: 50px; }
  section.style_puble:not(:has(section.content_wrap_new)) p.sub_p,
  section.style_puble:not(:has(section.content_wrap_new)) p.sub_p2 { margin-top: 50px; padding: 0 16px; }
  section.style_puble:not(:has(section.content_wrap_new)) .ul_cut { display: block; padding: 0 16px; }
  section.style_puble:not(:has(section.content_wrap_new)) .ul_cut li { width: 100%; max-width: 595px; margin: 30px auto 0; }
  section.style_puble:not(:has(section.content_wrap_new)) .sub_p_box { margin: 50px 0 0; }
  section.style_puble:not(:has(section.content_wrap_new)) .sub_p_box.pt100 { padding-top: 50px; }
  section.style_puble:not(:has(section.content_wrap_new)) .workguide { width: auto; margin-top: 0; }
  section.style_puble:not(:has(section.content_wrap_new)) .popup_print_box2 .popup_tt { padding-left: 80px; }
  section.style_puble:not(:has(section.content_wrap_new)) .popup_print_box2 .content .pop_info h2,
  section.style_puble:not(:has(section.content_wrap_new)) .popup_print_box2 .content .pop_info h3 { margin-top: 30px; }
  section.style_puble:not(:has(section.content_wrap_new)) .info_sec h2 { margin-top: 50px; }
  section.style_puble:not(:has(section.content_wrap_new)) .print_box ul.print_ul { flex-wrap: wrap; padding: 30px 0; }
  section.style_puble:not(:has(section.content_wrap_new)) .print_box ul.print_ul li { width: 50%; margin-top: 20px; }
  section.style_puble:not(:has(section.content_wrap_new)) .print_box ul.print_ul li img { margin: 0 auto; }
  section.style_puble:not(:has(section.content_wrap_new)) .print_box ul.print_ul li p { margin-top: 15px; }
  section.style_puble:not(:has(section.content_wrap_new)) .size_sec table.tb_default { display: block; overflow-x: auto; }
  section.style_puble:not(:has(section.content_wrap_new)) .size_sec table.tb_default th,
  section.style_puble:not(:has(section.content_wrap_new)) .size_sec table.tb_default td { white-space: nowrap; }

  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .detail_tab { height: auto; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .detail_tab ul { width: 100%; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .detail_tab ul li { height: 48px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .detail_tab ul li a { height: 48px; padding-top: 14px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .detail_tab.fixed { position: static; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap section article h3 { padding: 0 16px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.category ul,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.point ul,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.option ul,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.edit ul { width: 100%; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.category ul li,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.point ul li,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.option ul li,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.edit > ul li { width: 100%; float: none; margin-top: 30px; padding: 0 16px; box-sizing: border-box; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.category ul li h4 { margin-top: 15px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.point ul.point li span,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.option ul.option li span { left: 16px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.category,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.point,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.option,
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .shoulder article.guide { padding-bottom: 50px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.info .shoulder_bg { height: 200px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap .guide_size .size_img p { width: auto; max-width: 600px; margin: 20px auto 0; padding: 0 16px; box-sizing: border-box; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.notice { width: 100%; padding: 40px 16px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.notice p.line span { display: block; margin: 4px 0; padding-right: 0; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.more { height: auto; padding: 40px 16px 50px; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.more ul { position: static; width: 100%; margin: 30px 0 0; left: auto; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.more ul li { float: none; width: 100%; max-width: 340px; height: auto; margin: 20px auto 0; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.more ul li a { display: block; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.more ul li a img { width: 100%; }
  section.style_puble:not(:has(section.content_wrap_new)) .option_detail_wrap article.more ul li p { position: static; width: 100%; padding: 15px; }
}

@media (max-width: 480px) {
  section.style_puble:not(:has(section.content_wrap_new)) .size_img ul.photocard_pusize { display: block; }
  section.style_puble:not(:has(section.content_wrap_new)) .size_img ul.photocard_pusize li { width: 100%; padding: 0; }
  section.style_puble:not(:has(section.content_wrap_new)) .size_img ul.photocard_pusize li img { width: 75%; margin: 0 auto; }
  section.style_puble:not(:has(section.content_wrap_new)) .popup_print_box2 .content .pop_info ul { display: block; }
  section.style_puble:not(:has(section.content_wrap_new)) .popup_print_box2 .content .pop_info ul li { margin-top: 15px; }
  section.style_puble:not(:has(section.content_wrap_new)) .popup_print_box2 .content .pop_info ul li img { width: 100%; }
  section.style_puble:not(:has(section.content_wrap_new)) .print_box ul.print_ul li { width: 100%; }
}

/* 1024-1200: the floor under html/body cannot reach this one. .paging_box is
   absolutely positioned at left:80px and its ul is a rigid 1200px, so it alone
   pushes the document 79px past the floor and the white gutter opens again. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .style_puble .content_wrap_new .paging_box ul { width: auto; }

  /* Same job, same band: legacy hangs this badge 30px outside the grid, which
     is 29px past the floor. Pulling it in below 1201 only -- above that the
     viewport is wide enough and the badge must sit where legacy puts it. */
  .style_puble .content_wrap_new .mainex_img h2 { right: 0; }
}

/* rwd-shell swaps the typeface site-wide below 1024; this page takes its own
   back. Same specificity as rwd-shell's rule, later sheet, so it wins. */
@media (max-width: 1023px) {
  html body { font-family: 'Montserrat', 'YoonGothicPro740', sans-serif; }
}

/* main_renewal_260107.css is inlined into <body>, so it outranks this sheet at
   equal specificity; one extra class wins back the three sizes it shrinks. */
@media (max-width: 1023px) {
  .faq-list-wrap .faq-list .faq-question-text { font-size: 15px; }
  .faq-list-wrap .faq-list .faq-answer-content { font-size: 14px; }
  .info_sec .geo_guide .points { font-size: 13px; }
}

/* The guide boxes stack instead of sitting in the grid's own margin, and their
   title wraps because the sub-title is a full sentence. */
@media (max-width: 1023px) {
  .detail_v2.over_none .period_box { margin: 0 !important; align-self: start; }
  .detail_v2.over_none .period_box .period_tit { flex-wrap: wrap; align-items: baseline; }
}