@charset "utf-8";
/* =====================================================================
   English responsive fixes  (ENGLISH SITE ONLY)
   2026-06-30
   Loaded last in /eng/include/headHtml.jsp so it overrides the shared
   /css/*.css. Only English pages link this file, so the Korean and
   Japanese sites are not affected.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Issue 2) Fixed "Request Consultation" bar overlaps the footer + quick menu
   .footer_con01 is position:fixed; bottom:0 and grows to ~201px tall at
   <=650px, which exceeds #footer's 155px bottom padding. The footer text
   and the floating quick menu therefore sit underneath the bar.
   Give the footer clearance and lift the quick menu above the bar.
   (At 651px+ the bar is ~153px, already within the existing padding.)
   --------------------------------------------------------------------- */
@media all and (max-width:650px){
    #footer{ padding-bottom: 220px; }
    .quick_menu{ bottom: 220px; }
}
/* The bouncing event badge (.pop_banner_main) is also pinned at
   bottom:150px and overlaps the consultation bar; lift it clear too.
   Uses the badge's own <=700px breakpoint. */
@media all and (max-width:700px){
    .pop_banner_main{ bottom: 215px; }
}

/* ---------------------------------------------------------------------
   Issue 2b) Mobile "Request Consultation" form layout
   The desktop-only inline style in footer.jsp used to force a fixed
   210px width on every field, so on phones the Contact field ran off
   the screen. English labels are long, so lay the fields out in two
   readable rows instead of cramming three across:
     row 1:  [ Name ] [ Contact ]
     row 2:  [ Select consultation (full width) ]
     row 3:  [ Privacy check ]            [ Submit ]
   --------------------------------------------------------------------- */
@media all and (max-width:650px){
    .footer_con01 .form_box .inner{ gap: 8px; padding: 0 15px; box-sizing: border-box; }
    .footer_con01 .form_box .input_box{ gap: 8px; }
    /* row 1: Name + Contact share the width */
    .footer_con01 .form_box .input_box > input#name,
    .footer_con01 .form_box .input_box .phone_box{ width: calc(50% - 4px); }
    /* row 2: consultation type spans the full width */
    .footer_con01 .form_box .input_box .select_box{ width: 100%; }
    /* inputs/select fill their containers */
    .footer_con01 .form_box .input_box input[type="text"],
    .footer_con01 .form_box .phone_box input[type="text"],
    .footer_con01 .form_box .input_box .select_box select{ width: 100%; box-sizing: border-box; }
    /* row 3: keep checkbox left, Submit a comfortable size on the right */
    .footer_con01 .form_box .click_box{ width: 100%; align-items: center; }
    .footer_con01 .form_box .inner .ad_reques{ width: 130px; height: 40px; font-size: 20px; }
}

/* ---------------------------------------------------------------------
   Issue 3) Mobile GNB (#all-menu) sub-titles run together
   Longer English titles wrap onto two lines, so consecutive sub-menu
   items look connected. Prefix every sub item with a middle dot.
   #all-menu is the mobile hamburger panel (the desktop .sub_gnb is
   hidden <=1440px), so no media query is needed.
   --------------------------------------------------------------------- */
#all-menu .gnb_ul ul li .depth02 li a{
    position: relative;
    padding-left: 15px;
}
#all-menu .gnb_ul ul li .depth02 li a::before{
    content: "\00B7";              /* middle dot · */
    position: absolute;
    left: 3px;
    top: 0;
    color: #999;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   Issue 4) Breast-lift (colossus) black circles clip the text sideways
   On mobile the circle text is set to the full diameter width at 22px,
   so the first/last lines (where the circle curves in) spill past the
   rounded edge and look cut off. Drop the hard <br> breaks, shrink the
   font and keep the text inside ~76% of the circle width so it stays
   within the curve.
   --------------------------------------------------------------------- */
@media all and (max-width:1024px){
    [data-type="colossus"] .circle_alt_list ul li .left_circle .center_circle{
        font-size: 16px;
        line-height: 1.4em;
    }
    [data-type="colossus"] .circle_alt_list ul li .left_circle .center_circle p{
        width: 76%;
        margin: 0 auto;
        word-break: keep-all;
    }
    [data-type="colossus"] .circle_alt_list ul li .left_circle .center_circle p br{
        display: none;
    }
}
@media all and (max-width:480px){
    [data-type="colossus"] .circle_alt_list ul li .left_circle .center_circle{
        font-size: 15px;
    }
}