/*
 * Korean mobile hero artwork reserves its left side for a short Korean title.
 * English strings are longer, so keep all primary copy in that same clear area.
 */
html[lang="en"] #detail > .summary h2,
html[lang="en"] #detail > .summary .desc {
  width: 54%;
  max-width: 54%;
  position: relative;
  z-index: 6;
}

html[lang="en"] #detail > .summary h2 strong {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1.08;
  letter-spacing: -0.055em;
  overflow-wrap: normal;
  word-break: normal;
}

html[lang="en"] #detail > .summary h2 span {
  font-size: .86em;
  line-height: 1.2;
  letter-spacing: .02em;
}

html[lang="en"] #detail > .summary .desc {
  max-width: 54%;
  font-size: .74em;
  line-height: 1.35;
  margin-top: 1.1em;
}

html[lang="en"] #detail > .summary .desc span {
  line-height: inherit;
}

/* Long English labels remain legible inside the Korean hexagon treatment cards. */
html[lang="en"] #detail > .summary ul .box {
  font-size: .68em;
  line-height: 1.08;
}

html[lang="en"] #detail > .summary ul span {
  line-height: 1.08;
}

html[lang="en"] #detail > .summary .ps {
  font-size: .68em;
  line-height: 1.25;
}

/* Korean-site floating Doctor's Note / SISUN TV widgets cover mobile hero art.
   They are not part of the English test-page content. */
html[lang="en"] .dr_popup_wrap,
html[lang="en"] .dr_popup_wrap02 {
  display: none !important;
}

html[lang="en"], html[lang="en"] body {
  max-width: 100%;
  overflow-x: hidden;
}

html[lang="en"] #detail [id^="main-media-"] {
  display: none !important;
}

html[lang="en"] #detail .viewBA-item-operation-name {
  overflow-wrap: anywhere;
}

/* Do not let unscaled legacy artwork escape a mobile detail container.
   Width remains fluid; aspect ratio remains the source artwork's ratio. */
html[lang="en"] :is(#detail, .detail) img {
  max-width: 100%;
  height: auto;
}

/* English copy is naturally longer than the Korean source.  Give text-only
   blocks the same comfortable side inset as the Korean mobile composition,
   instead of letting lines touch the viewport edges. */
html[lang="en"] .detail {
  overflow-x: clip;
}

html[lang="en"] .detail .sec .contents > p,
html[lang="en"] .detail .sec .contents > .txt-info {
  width: auto;
  max-width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html[lang="en"] #detail .container,
html[lang="en"] #detail .img,
html[lang="en"] #detail .img_wrap {
  max-width: 100%;
  box-sizing: border-box;
}

/* Shared English treatment for legacy floating detail submenus.
   Korean labels fit in one line; English labels do not. */
html[lang="en"] .floating.js_floating {
  padding: 20px 24px;
  box-sizing: border-box;
}

html[lang="en"] .floating.js_floating .fixed_wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}

html[lang="en"] .floating.js_floating .fixed_wrap:has(> li:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[lang="en"] .floating.js_floating .fixed_wrap li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 5px 6px;
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-right: 0;
  color: #353535;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] .floating.js_floating .fixed_wrap li:nth-child(3),
html[lang="en"] .floating.js_floating .fixed_wrap li:nth-child(5),
html[lang="en"] .floating.js_floating .fixed_wrap:has(> li:nth-child(4):last-child) li:nth-child(2n) {
  border-right: 1px solid #dedede;
}

html[lang="en"] .floating.js_floating .fixed_wrap li:nth-child(n+4) {
  border-top: 0;
}

html[lang="en"] .floating.js_floating .fixed_wrap li:nth-child(5) {
  grid-column: span 2;
}

html[lang="en"] .floating.js_floating .fixed_wrap:has(> li:nth-child(4):last-child) li:nth-child(5) {
  grid-column: auto;
}

/* The original scroll handler keeps the floating submenu 50px below the
   viewport even after the mobile header has scrolled away.  In the English
   mobile test path, pin it to the viewport edge as soon as it becomes fixed. */
html[lang="en"] .floating.js_floating .fixed_wrap.fixed {
  top: 0 !important;
}

/* 22/view_03: retain the Korean mobile's 3 + 2 submenu grid.  The generic
   English grid made the fifth item span two thirds of its row, unlike the
   equal-width pair used by the Korean reference. */
html[lang="en"] .detail.detail-22-view03 .floating.js_floating {
  height: 112px;
  padding: 20px 16px;
}

html[lang="en"] .detail.detail-22-view03 .floating.js_floating .fixed_wrap {
  display: flex;
  flex-wrap: wrap;
}

html[lang="en"] .detail.detail-22-view03 .floating.js_floating .fixed_wrap li {
  flex: 0 0 33.333%;
  min-height: 36px;
  padding: 5px 4px;
  border: 1px solid #d3d3d3;
  border-right: 0;
  line-height: 1.2;
}

html[lang="en"] .detail.detail-22-view03 .floating.js_floating .fixed_wrap li:nth-child(3) {
  border-right: 1px solid #d3d3d3;
}

html[lang="en"] .detail.detail-22-view03 .floating.js_floating .fixed_wrap li:nth-child(4),
html[lang="en"] .detail.detail-22-view03 .floating.js_floating .fixed_wrap li:nth-child(5) {
  flex-basis: 50%;
  border-top: 0;
  border-bottom: 1px solid #d3d3d3;
}

html[lang="en"] .detail.detail-22-view03 .floating.js_floating .fixed_wrap li:nth-child(5) {
  grid-column: auto;
  border-right: 1px solid #d3d3d3;
}

/* The five-eye illustration is 2 items on the first row and 3 on the
   second.  Legacy padding was added outside the flex basis in English,
   causing the fifth image to wrap alone. */
html[lang="en"] .detail.detail-22-view03 .img5_wrap ul li {
  box-sizing: border-box;
}

html[lang="en"] .detail.detail-22-view03 .img5_wrap ul li img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Keep the Korean mobile section's 417px certificate height, but never
   stretch the English trademark certificate horizontally. */
html[lang="en"] .detail.detail-22-view03 .bar2-section-003 .sec ul:last-child img {
  width: auto !important;
  height: 417px !important;
  max-width: calc(100vw - 48px);
  object-fit: contain;
}

/* The reconstruction lab uses a separate legacy #tab menu.  Its original
   36px Korean cells let the longer English labels spill into the section
   underneath when the tab becomes fixed. */
html[lang="en"] #tab.tab {
  height: auto;
  min-height: 128px;
  padding: 20px 24px;
  box-sizing: border-box;
}

html[lang="en"] #tab.tab ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}

html[lang="en"] #tab.tab li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 44px !important;
  min-height: 44px;
  padding: 5px 7px;
  box-sizing: border-box;
  color: #3d3d3d;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
}

html[lang="en"] #tab.tab.fixed ul {
  top: 0 !important;
  z-index: 1000;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .12);
}

/* The shared before/after module is authored at a desktop image width.
   Keep its case images inside the mobile card instead of clipping them at
   the viewport edge. */
html[lang="en"] .detail .viewBA-item-images,
html[lang="en"] .detail .viewBA-item-images .image,
html[lang="en"] .detail .viewBA-item-images .image img {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

html[lang="en"] .detail .viewBA-item-images .image img {
  display: block;
  height: auto !important;
}

/* Several legacy detail pages keep before/after GIFs at their 566px source
   width.  Korean mobile styles constrain these wrappers, but the isolated
   English path does not inherit that rule consistently. */
html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap .img {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Some feature lists themselves retain a wide legacy width.  Cap every
   image wrapper to the visible mobile content area before sizing its image. */
html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap,
html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap .img {
  max-width: calc(100vw - 48px) !important;
  margin-left: auto;
  margin-right: auto;
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap .img > img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}

/* Side-by-side comparison pairs intentionally contain two images.  Preserve
   that two-column treatment instead of applying the single-image width rule
   to each child. */
html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap .img.flex,
html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap .img.left {
  display: flex !important;
  align-items: stretch;
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap .img.flex > img,
html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap .img.left > img {
  width: 0 !important;
  max-width: 50% !important;
  min-width: 0;
  flex: 1 1 0;
}

/* The incisional-ptosis Q&A has a three-stage comparison strip. */
html[lang="en"] .qa_wrap .qna dl:first-child dd .img_wrap .img {
  display: flex !important;
}

html[lang="en"] .qa_wrap .qna dl:first-child dd .img_wrap .img > img {
  width: 33.333% !important;
  max-width: 33.333% !important;
  min-width: 0;
  flex: 1 1 0;
}

/* Hero images are shared with Korean pages.  Reserve the same left-side
   text area for English, whose procedure names are longer. */
html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(27, 37, 53, .84) 0%, rgba(27, 37, 53, .58) 42%, rgba(27, 37, 53, 0) 66%);
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap .container {
  position: relative;
  z-index: 2;
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap .tit,
html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap .sub_tit {
  width: 52%;
  max-width: 52%;
  position: relative;
  z-index: 3;
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap .tit h1 {
  font-size: 27px;
  line-height: 1.1;
  height: auto !important;
  min-height: 0 !important;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  word-break: normal;
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap .sub_tit,
html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap .note {
  color: #fff;
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap .sub_tit {
  font-size: 10px;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .main_ban_wrap .note {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

/* The men's eyelid image places the model closer to the center than the
   other hero artworks.  Shift it slightly right and use a narrower title
   column so translated text never crosses the face. */
html[lang="en"] :is(#detail, .detail, .new-wrap).en-mens-eyelid .main_ban_wrap::before {
  background-position: 110% center;
}

html[lang="en"] :is(#detail, .detail, .new-wrap).en-mens-eyelid .main_ban_wrap .tit,
html[lang="en"] :is(#detail, .detail, .new-wrap).en-mens-eyelid .main_ban_wrap .sub_tit {
  width: 44%;
  max-width: 44%;
}

html[lang="en"] :is(#detail, .detail, .new-wrap).en-mens-eyelid .main_ban_wrap .tit h1 {
  font-size: 24px;
  line-height: 1.12;
}

/* English footer follows the centered Korean mobile footer rhythm, while
   retaining English labels and address formatting. */
html[lang="en"] .en-footer {
  clear: both;
  margin: 0;
  padding: 18px 18px 22px;
  background: #f4f5f7;
  color: #444;
  text-align: center;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

html[lang="en"] .en-footer nav {
  display: flex;
  justify-content: center;
  gap: 19px;
  margin: 0 0 15px;
}

html[lang="en"] .en-footer nav a {
  color: #555;
  font-size: 10px;
  line-height: 1.3;
  text-decoration: none;
}

html[lang="en"] .en-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

html[lang="en"] .en-footer-brand img {
  display: block;
  width: 58px;
  height: auto;
}

html[lang="en"] .en-footer-brand strong {
  color: #444;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
}

html[lang="en"] .en-footer address {
  margin: 0;
  color: #555;
  font-size: 10px;
  font-style: normal;
  line-height: 1.65;
}

html[lang="en"] .en-footer address p { margin: 0; }
html[lang="en"] .en-footer address i { padding: 0 5px; font-style: normal; }

html[lang="en"] .en-footer small {
  display: block;
  margin-top: 9px;
  color: #666;
  font-size: 9px;
  line-height: 1.35;
}

/* Highlighted clinical points should wrap by words and keep a clean blue
   background on every line, rather than splitting English words. */
html[lang="en"] #detail .sec .title .des,
html[lang="en"] .detail .sec .des {
  word-break: normal;
  overflow-wrap: break-word;
}

html[lang="en"] #detail .sec .title .des .point,
html[lang="en"] .detail .sec .des .point {
  display: inline;
  padding: 2px 5px;
  background: #dbeaf4;
  color: #25313a;
  font-weight: 700;
  line-height: 1.55;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The Korean mobile home uses full-width artwork.  Its original files are
   often wider than the viewport, so retain the artwork's aspect ratio while
   constraining every home-content image to its actual mobile container. */
html[lang="en"] #main-wrap,
html[lang="en"] #main-wrap > .container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

html[lang="en"] #main-wrap > .container > a,
html[lang="en"] #main-wrap .img-box,
html[lang="en"] #main-wrap .img-box > a {
  display: block;
  width: 100%;
  max-width: 100%;
}

html[lang="en"] #main-wrap > .container > a > img,
html[lang="en"] #main-wrap .img-box img,
html[lang="en"] #main-wrap .special-item img,
html[lang="en"] #main-wrap .special-item-01 img,
html[lang="en"] #main-wrap .review-item img,
html[lang="en"] #main-wrap .event-item img,
html[lang="en"] #main-wrap .news-item img,
html[lang="en"] #main-wrap .video_img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Home-page procedure filter: preserve the Korean mobile's compact 4 × 2
   composition even when the English labels need a second line. */
html[lang="en"] #main-wrap .surgery-link-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 48px;
  width: 100%;
  margin: 0;
  padding: 0;
}

html[lang="en"] #main-wrap .surgery-link-item {
  display: flex;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
}

html[lang="en"] #main-wrap .surgery-link-item:not(:nth-child(4n)) {
  border-right: 1px solid rgba(255,255,255,.62);
}

html[lang="en"] #main-wrap .surgery-link-item a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5px !important;
  box-sizing: border-box;
  text-align: center;
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

html[lang="en"] #main-wrap .surgery-link-item.best a,
html[lang="en"] #main-wrap .surgery-link-item:first-child a {
  font-size: 12px !important;
  letter-spacing: 0;
}

.en-mobile-image-page { padding: 28px 20px 42px; background: #fff; }
.en-mobile-image-page h1 { margin: 0 0 22px; font-size: 28px; font-weight: 500; text-align: center; color: #333; }
.en-mobile-image-page img { display: block; width: 100%; height: auto; margin: 0 auto; }
.en-mobile-image-page .en-video { position: relative; width: 100%; padding-top: 56.25%; margin: 18px 0; }
.en-mobile-image-page .en-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Reconstruction pages: the original Korean labels assume short, single-line
   copy.  Allow their English equivalents to grow instead of clipping or
   overlapping the images below them. */
html[lang="en"] :is(#detail, .detail, .new-wrap) .sec_02 .img_wrap3_title {
  width: min(100%, 340px);
  min-height: 34px !important;
  height: auto !important;
  padding: 7px 16px;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

html[lang="en"] :is(#detail, .detail, .new-wrap) .sec_02 .img_wrap3 > p {
  min-height: 44px !important;
  height: auto !important;
  padding: 7px 10px;
  line-height: 1.35;
  text-align: center;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Axis Rotation certificate banner: remove the Korean-only one-line and
   floating text treatment so every part of the English title stays in flow. */
html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul {
  width: min(100%, 340px);
  margin: 38px auto 30px;
  align-items: stretch;
}

html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul em,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul em {
  display: block;
  width: 100%;
  max-width: 100%;
  padding-bottom: 3px;
  font-style: normal;
  line-height: 1.35;
  text-align: center;
  box-sizing: border-box;
}

html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul em .txt-top,
html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul em .point,
html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul em b,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul em .txt-top,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul em .point,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul em b {
  display: block;
  height: auto;
  padding: 0;
  float: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul em .txt-top,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul em .txt-top {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.35;
}

html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul em .point,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul em .point {
  font-size: clamp(21px, 6.7vw, 26px);
  line-height: 1.2;
  letter-spacing: -.04em;
}

html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul em b,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul em b {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -.04em;
}

html[lang="en"] :is(.bar1-section-003, .bar2-section-003) .sec ul p,
html[lang="en"] #detail.detail-21-view02 .section-003 .sec ul p {
  width: 100%;
  max-width: 311px;
  overflow-wrap: anywhere;
}

/* Before/after captions recur throughout the procedure pages.  Korean uses
   a single short label; English case names need their caption bar to expand
   rather than paint over the next image or truncate within the bar. */
html[lang="en"] :is(#detail, .detail, .new-wrap) .cocoen > p,
html[lang="en"] :is(#detail, .detail, .new-wrap) .bna > .info,
html[lang="en"] :is(#detail, .detail, .new-wrap) .img_wrap > p:not(.bna_title) {
  height: auto !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

/* Cocoen is an interactive before/after crop, not a responsive image card.
   Its two source images must keep the Korean layout's 566px canvas while the
   divider alone moves horizontally.  The global English image safeguard was
   shrinking that canvas to the viewport and changed the comparison behavior. */
html[lang="en"] :is(#detail, .detail, .new-wrap) .cocoen .after .img > img,
html[lang="en"] :is(#detail, .detail, .new-wrap) .cocoen .before .img > img {
  display: block;
  width: 566px !important;
  min-width: 566px !important;
  max-width: none !important;
  height: auto !important;
}

/* The About SISUN page is an older standalone mobile layout rather than a
   #detail page.  Its Korean global image rule was not inherited by English,
   leaving 566px source artwork to protrude from cards and feature panels. */
html[lang="en"] .about_wrap,
html[lang="en"] .about_wrap .sec_02 .contents,
html[lang="en"] .about_wrap .sec_03 .why_cont {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

html[lang="en"] .about_wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

html[lang="en"] .about_wrap .sec_02 .contents dt img,
html[lang="en"] .about_wrap .sec_03 .why_cont > img {
  width: 100%;
}

/* English prose is wider and uses different word lengths than Korean.
   Suppress the source's Korean line-break hints inside body copy while
   retaining deliberate breaks in titles, navigation and image labels. */
html[lang="en"] :is(#detail, .detail, .new-wrap) :is(p, dd, li) br {
  display: inline !important;
  content: ' ' !important;
}

html[lang="en"] :is(#detail, .detail, .new-wrap) :is(p, dd, li) br::after {
  content: ' ' !important;
  white-space: pre !important;
}

/* SISUN Philosophy is a Korean mobile flipbook reused with English copy.
   Keep its original 300px book scale, but give the longer seven tab labels
   enough height to stay legible rather than painting over the cover. */
html[lang="en"] .new-wrap.mobile .js_menu {
  align-items: stretch;
}

html[lang="en"] .new-wrap.mobile .js_menu li {
  height: auto;
  min-height: 42px;
  padding: 3px 1px;
  font-size: 9px;
  line-height: 1.16;
  overflow-wrap: anywhere;
  word-break: normal;
}

html[lang="en"] .new-wrap.mobile .flipbook-viewport .container {
  margin-top: 24px;
}

/* English mobile pages are served through the English desktop shell.  Prevent
   its desktop-width wrappers from widening the visual viewport on phones. */
@media screen and (max-width: 768px) {
  html[lang="en"],
  html[lang="en"] body,
  html[lang="en"] #wrap,
  html[lang="en"] #contents,
  html[lang="en"] #container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[lang="en"] #wrap,
  html[lang="en"] #contents,
  html[lang="en"] #container {
    overflow-x: clip;
  }
}

/* Korean mobile 12/view_02 is the reference for the SISUN Philosophy entry.
   Keep its doctor-introduction composition while allowing English copy to fit
   in the clear left-hand area of the artwork. */
html[lang="en"] .en-sisun-philosophy .meet_wrap .title_ban .container {
  min-height: 455px;
}

html[lang="en"] .en-sisun-philosophy .meet_wrap .title_ban h3 {
  max-width: 58%;
  font-size: 31px;
  line-height: 1.04;
  letter-spacing: -.045em;
}

html[lang="en"] .en-sisun-philosophy .meet_wrap .title_ban h4,
html[lang="en"] .en-sisun-philosophy .meet_wrap .title_ban .note,
html[lang="en"] .en-sisun-philosophy .meet_wrap .title_ban .link {
  max-width: 60%;
}

html[lang="en"] .en-sisun-philosophy .meet_wrap .title_ban h4 {
  font-size: 15px;
  line-height: 1.2;
}

html[lang="en"] .en-sisun-philosophy .meet_wrap .title_ban .note {
  font-size: 10px;
  line-height: 1.38;
}

html[lang="en"] .en-sisun-philosophy .meet_wrap .title_ban .link {
  height: auto;
  min-height: 38px;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.25;
}

html[lang="en"] .en-sisun-philosophy .meet_wrap .sec_01 dt {
  font-size: 19px;
  line-height: 1.25;
}

html[lang="en"] .en-sisun-philosophy .meet_wrap .sec_01 dd,
html[lang="en"] .en-sisun-philosophy .meet_wrap .sec_02 dd {
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 359px) {
  html[lang="en"] #detail > .summary h2,
  html[lang="en"] #detail > .summary .desc { width: 52%; max-width: 52%; }
  html[lang="en"] #detail > .summary h2 strong { font-size: 1.8em; }
}
/* 21/view_02: keep the taller English 3D-animation brush title clear of the heading below. */
html[lang="en"] #detail.detail-21-view02 .surgery-media h3 em {
  display: block;
  margin-bottom: 13px;
}