@charset "utf-8";

/* 더뷰티성형외과 C00282 - PC(1600px canvas) / 모바일(500px 이하) */

@media screen and (max-width: 500px) {
  /* ================================================================== */
  /* 공통 */
  html,
  body {
    min-width: 0;
    font-size: 16px;
  }

  #wrap,
  #wrapper,
  #container_wr,
  #container,
  #ft,
  header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #wrapper {
    padding-top: 60px !important;
  }

  #ctt,
  #sub {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 30px 16px !important;
    box-sizing: border-box;
  }

  .Inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  

  /* ================================================================== */
  /* 헤더 (500px 이하 세부 조정) */
  header .HeaderNav_GNB {
    padding: 0 16px !important;
    min-height: 60px;
  }

  header .HeaderNav_GNB .Logo {
    left: 16px;
  }

  header .HeaderNav_GNB .Logo img {
    max-width: 120px !important;
  }

  header .HeaderNav_GNBmenu .RightBox {
    right: 56px;
  }

  header .HeaderNav_GNBmenu .RightBox .Member ul li {
    padding: 0 4px;
  }

  header .HeaderNav_GNBmenu .RightBox .Member ul li a {
    font-size: 18px !important;
  }

  header .HeaderNav_GNBmenu .RightBox .Cart a i {
    font-size: 18px;
  }

  .SubNav_Small{
    display: block;
  }

  .SubNav_Small1 .InnerContainer{
    width: 100%;
  }
  .SubNav_Small1 ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 10px;
  }

  .SubNav_Small1 ul > li{
    width: calc(50% - 5px);
    border:0;
  }

  .SubNav_Small1 ul li a {
    display: inline-block;
    color: #393939;
    letter-spacing: -1px;
    font-weight: 500;
    border-radius: 3px;
    border: 1px solid #e1e1e1;
    overflow: hidden;
    line-height: 1.4em;
    text-align: center;
}


  .TopVisual .TopTitle .Title{
    font-weight: 500;
  }

  .MultiImgSliderArea .Inner {
    padding: 30px 0;
  }

  .MultiImgSlider {
    width: 100% !important;
    height: auto !important;
    margin-top: 70px !important;
  }

  .MultiImgSlider .slick-list .slick-slide {
    width: 500px !important;
  }

  /* ================================================================== */
  /* 메인 - 공통 타이틀 */
  body .mainSection {
    width: 100%;
  }
  body .mainSection .mainTitle h3 {
    font-size: 22pt !important;
    line-height: 1.3 !important;
  }

  body .mainSection01 .Banner_swiper01 {
    position: relative;
  }

  body .mainSection01 .swiper-slide a {
    display: flex;
    flex-direction: column;
  }

  body .mainSection01 .swiper-slide a > img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: left;
    flex-shrink: 0;
  }

  body .mainSection01 .ThumbBox {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    display: block;
    padding: 12px 16px 8px;
    box-sizing: border-box;
    background: #ccc;
  }

  body .mainSection01 .ThumbBox span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .mainSection01 .ThumbBox span img {
    width: 100%;
    height: auto;
    display: block;
  }

  body .mainSection01 .SliderBtn {
    position: absolute;
    top: 370px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    pointer-events: none;
  }

  body .mainSection01 .SliderBtn .num_btn {
    pointer-events: auto;
  }

  body .mainSection01 .SliderBtn .num_btn .new-scrollbar {
    width: 160px;
    margin-right: 10px;
  }

  body .mainSection01 .SliderBtn .num_btn .btnInner .pagenumber1 {
    font-size: 11pt;
    width: 30px;
  }

  /* [세션02] 이벤트 */
  body .mainSection02 {
    padding: 50px 0 !important;
  }

  body .mainSection02 .contWrap {
    flex-direction: column;
    gap: 30px;
  }

  body .mainSection02 .contWrap .mainTitle {
    width: 100% !important;
    text-align: center;
  }

  body .mainSection02 .mainTitle em {
    display: none;
  }

  body .mainSection02 .mainTitle a {
    margin: 20px auto 0;
    padding: 8px 28px;
  }

  body .mainSection02 .mainTitle a span {
    font-size: 12pt;
  }

  body .mainSection02 .contWrap .contBox {
    width: 100% !important;
  }

  body .mainSection02 .contWrap .contBox .swiper-slide {
    width: 260px !important;
  }

  /* [세션03] 쇼츠 */
  body .mainSection03 {
    padding: 50px 0 !important;
  }

  body .mainSection03 .contWrap {
    margin-top: 40px;
  }

  body .mainSection03 .contWrap .Banner_swiper03 .swiper-slide {
    width: 180px !important;
  }

  body .mainSection03 .contWrap .ThumbBox {
    height: 320px;
    border-radius: 12px;
  }

  body .mainSection03 .contWrap a.more,
  body .mainSection04 .contWrap a.more {
    font-size: 12pt;
    margin-bottom: 16px;
    margin-right: 25px;
    padding: 10px 15px;
  }

  /* [세션04] 유튜브 */
  body .mainSection04 {
    padding: 50px 0 !important;
  }

  body .mainSection04 .mainTitle {
    margin-bottom: 30px !important;
  }

  body .mainSection04 .MultiSliderWrap {
    flex-direction: column;
    gap: 20px;
  }

  body .mainSection04 .MultiSliderWrap .MultiSlider.Left {
    width: 100% !important;
    padding-right: 0 !important;
  }

  body .mainSection04 .MultiSliderWrap .MultiSlider.Left .ThumBox.Movie_Iframe {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }

  body
    .mainSection04
    .MultiSliderWrap
    .MultiSlider.Left
    .ThumBox.Movie_Iframe
    iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }

  body .mainSection04 .MultiSliderWrap .MultiSlider.Right {
    width: 100% !important;
    display: none;
  }

  body .mainSection04 .MultiSliderWrap .MultiSlider.Left .slick-dots {
    bottom: -28px;
  }

  body
    .mainSection04
    .MultiSliderWrap
    .MultiSlider.Left
    .slick-dots
    li
    button:before {
    font-size: 10px;
    color: #dccbbc;
  }

  body .mainSection04 .contWrap a.more {
    margin-top: 10px;
  }
  body .mainSection04 .youtube-slider-actions {
    gap: 12px;
    margin-top: 10px;
    margin-right: 25px;
  }
  body .mainSection04 .youtube-slider-arrows {
    gap: 6px;
  }
  body .mainSection04 .youtube-slider-arrows button {
    width: 36px;
    height: 36px;
    font-size: 30px;
  }
  body .mainSection04 .youtube-slider-actions a.more {
    margin: 0 !important;
    padding: 8px 0 !important;
  }

  /* [세션05] 스페셜리티 */
  body .mainSection05 {
    padding: 50px 0 120px !important;
  }

  body .mainSection05 .mainTitle {
    margin-bottom: 30px !important;
  }

  body .mainSection05 .contWrap {
    width: 100% !important;
  }

  body .mainSection05 .SliderBtn {
    top: auto;
    bottom: -40px;
    padding: 0 16px;
    display: none;
  }

  body .mainSection05 .SliderBtn .swiper-button-prev-5,
  body .mainSection05 .SliderBtn .swiper-button-next-5 {
    font-size: 16pt;
  }

  /* [세션06] 셀피 */
  body .mainSection06 {
    padding-top: 50px !important;
    padding-bottom: 30px !important;
  }

  body .mainSection06 .mainTitle {
    margin-bottom: 30px !important;
  }

  body .mainSection06 .mainTitle a {
    margin-top: 20px;
    padding: 8px 28px;
  }

  body .mainSection06 .mainTitle a span {
    font-size: 12pt;
  }

  body .mainSection06 .contWrap .Banner06 .Thumb {
    width: 50% !important;
  }

  /* ================================================================== */
  /* 푸터 - 상세정보 */
  .NC00282 .Company_Area {
    padding: 60px 0 !important;
    width: 500px;
  }

  .NC00282 .Company_Area .footerDeco {
    display: none;
  }

  .NC00282 .Company_Area > .Inner {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .NC00282 .Company_Area .ContLeft,
  .NC00282 .Company_Area .ContRight {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
  }
  .NC00282 .Company_Area .ContRight {
    margin: 0 15px;
  }
  .NC00282 .Company_Area .ContRight * {
    font-size: 14px !important;
    margin-top: 12px;
  }

  .NC00282 .Company_Area .CompanyTitle {
    font-size: 14pt !important;
  }

  .NC00282 .Company_Area .Tel p a {
    font-size: 24pt !important;
  }

  .NC00282 .Company_Area .Loca label .pre {
    font-size: 11pt !important;
  }

  .NC00282 .Company_Area .Time label {
    flex-direction: column;
    gap: 4px;
  }

  .NC00282 .Company_Area .Time .pre.Left,
  .NC00282 .Company_Area .Time .pre.Right {
    width: 100% !important;
    font-size: 14px !important;
    margin-top: 8px;
  }

  .NC00282 .Company_Area #aboutmap26 {
    height: 220px;
    margin-top: 16px;
    display: flex;
    justify-content: center;
  }

  .NC00282 .Company_Area .ContLeft .MapBtn {
    flex-direction: column;
    gap: 10px;
    margin: 15px;
  }

  .NC00282 .Company_Area .ContLeft .MapBtn li {
    width: 100% !important;
    padding: 12px 0;
  }

  .NC00282 .Company_Area .SubwayBox {
    flex-direction: column;
    margin-top: 40px;
    gap: 24px;
  }

  .NC00282 .Company_Area .SubwayBox .ContLeft,
  .NC00282 .Company_Area .SubwayBox .ContRight {
    width: 100% !important;
  }

  .NC00282 .Company_Area .ContRight .Subway ul li {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 12px !important;
    gap: 8px;
  }

  .NC00282 .Company_Area .ContRight .Subway ul li .Text01 {
    width: auto;
    font-size: 12px;
  }

  .NC00282 .Company_Area .ContRight .Subway ul li .Text02 {
    padding-left: 0;
    font-size: 13px;
  }

  /* 기본정보 */
  .NC00282 .Bottom_Area {
    padding: 40px 0 100px !important;
    margin-bottom: 0 !important;
  }

  .NC00282 .Bottom_Area > .Inner {
    flex-direction: column;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 16px;
    gap: 20px;
  }

  .NC00282 .Bottom_Area .ContLeft,
  .NC00282 .Bottom_Area .ContCenter {
    display: block !important;
    width: 100% !important;
  }

  .NC00282 .Bottom_Area .Box {
    flex-direction: column;
    gap: 8px;
  }

  .NC00282 .Bottom_Area .Box #SkipNavAdd {
    margin-right: 0;
  }

  .NC00282 .Bottom_Area .QuickLink {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .NC00282 .Bottom_Area ul {
    flex-wrap: wrap;
    gap: 8px;
  }

  .NC00282 .Bottom_Area ul li {
    margin-left: 0 !important;
  }

  .NC00282 .Bottom_Area .AddLogo img {
    width: 100px;
  }

  /* 빠른상담 */
  .Contact_Quick .QuickToggle {
    display: flex !important;
  }

  html body {
    padding-bottom: 52px;
  }

  .NC00282 .Contact_Quick {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 995;
    padding: 0 !important;
    margin: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    border-radius: 25px 25px 0 0;
    overflow: hidden;
    transition: box-shadow 0.35s ease;
  }

  .NC00282 .Contact_Quick.is-open {
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);
  }

  .NC00282 .Contact_Quick .QuickToggle {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding: 26px 16px;
    border: 0;
    background-color: #dccbbc;
    font-family: "NanumSquareNeoTTF-bRg", sans-serif;
    cursor: pointer;
    transition: background-color 0.25s ease;
  }

  .NC00282 .Contact_Quick .QuickToggle strong {
    font-size: 14pt;
    font-weight: 600;
    color: #000;
    letter-spacing: -0.5px;
    margin-left: 70px;
  }

  .NC00282 .Contact_Quick .QuickToggle::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 12px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .NC00282 .Contact_Quick.is-open .QuickToggle::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }

  .NC00282 .Contact_Quick > .Inner {
    display: grid;
    grid-template-rows: 0fr;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 16px;
    max-height: 75vh;
    overflow: hidden;
    box-sizing: border-box;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .NC00282 .Contact_Quick > .Inner > dl {
    overflow: hidden;
    min-height: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .NC00282 .Contact_Quick.is-open > .Inner {
    grid-template-rows: 1fr;
    padding: 0 16px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .NC00282 .Contact_Quick.is-open > .Inner > dl {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease 0.08s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
  }

  .NC00282 .Contact_Quick dl > dt:first-child {
    display: none !important;
  }

  .NC00282 .Contact_Quick .Title {
    text-align: center;
    padding-right: 0;
    margin-bottom: 16px;
  }

  .NC00282 .Contact_Quick .Title strong {
    font-size: 13pt;
  }

  .NC00282 .Contact_Quick dl {
    display: block !important;
    width: 100%;
  }

  .NC00282 .Contact_Quick dl dt,
  .NC00282 .Contact_Quick dl dd {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 10px;
  }

  .NC00282 .Contact_Quick dl dt:nth-last-child(2) {
    width: 100% !important;
  }

  .NC00282 .Contact_Quick dd label {
    display: block !important;
  }

  .NC00282 .Contact_Quick dd label .InputBox {
    display: block !important;
    padding-right: 0 !important;
  }

  .NC00282 .Contact_Quick dd label .InputBox input,
  .NC00282 .Contact_Quick dd select {
    width: 100% !important;
    height: 40px !important;
  }

  .NC00282 .Contact_Quick .AgreeBox {
    display: flex !important;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    flex-direction: row;
  }

  .NC00282 .Contact_Quick .AgreeBox label {
    display: table !important;
    width: 100%;
    margin-bottom: 8px;
    font-size: 10pt;
  }

  .NC00282 .Contact_Quick .AgreeBox a {
    display: inline-block;
    margin-top: 4px;
    padding-left: 30px;
    line-height: 1.3;
  }

  .NC00282 .Contact_Quick .Btn {
    font-size: 12pt;
    padding: 12px 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .NC00282 .Contact_Quick,
    .NC00282 .Contact_Quick > .Inner,
    .NC00282 .Contact_Quick > .Inner > dl,
    .NC00282 .Contact_Quick .QuickToggle,
    .NC00282 .Contact_Quick .QuickToggle::after {
      transition: none !important;
    }
  }

  /* 퀵메뉴 */
  .NC00282 .QuickArea section {
    bottom: auto;
    top: auto;
    right: 0;
    position: fixed;
    bottom: 16px;
    z-index: 996;
  }

  .NC00282 .QuickArea_Link {
    width: auto !important;
  }

  .NC00282 .QuickArea_Link ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 100vw;
    padding-right: 8px;
  }

  .NC00282 .QuickArea_Link li {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
    border: 1px solid #333;
  }

  .NC00282 .QuickArea_Link li a {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .NC00282 .QuickArea_Link li a span {
    display: none !important;
  }

  .NC00282 .QuickArea_Link li a > img {
    height: 18px !important;
    margin: 0 auto;
  }

  .NC00282 .QuickArea_Link li.BannerThum5 {
    display: none !important;
  }

  .NC00282 .QuickArea_Link li.Quick_GoTop {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #dccbbc;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .NC00282 .QuickArea_Link li.Quick_GoTop a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
  }

  .NC00282 .QuickArea_Btn {
    display: none !important;
  }

  /* 팝업레이어 */
  .hd_pops {
    max-width: 92vw;
  }

  .hd_pops_con img {
    width: 100%;
    height: auto;
  }

  .hd_pops_footer button {
    font-size: 10pt;
    padding: 8px;
  }

  /* ================================================================== */
  /* 병원소개 > 의료진소개 */
  .About_DoctorArea {
    padding: 50px 0 !important;
  }

  .About_DoctorArea > .Inner {
    box-sizing: border-box;
  }

  .About_DoctorArea .Inner .Title {
    margin-bottom: 40px;
  }

  .About_DoctorArea .Inner .Title .Text01 {
    font-size: 14px;
  }

  .About_DoctorArea .Inner .Title .Text02 {
    font-size: 22px;
    line-height: 1.5;
    padding: 12px 0 0;
  }

  .About_DoctorArea .Inner .Title .Text02 .dot {
    left: 22%;
    top: 6px;
    width: 28px;
    height: 28px;
  }

  .About_DoctorArea .boardThumList2 .List {
    border: none;
  }

  .About_DoctorArea .boardThumList2 li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    border: none;
  }

  .About_DoctorArea .List li {
    margin-bottom: 60px;
  }

  .About_DoctorArea .List li:last-child {
    margin-bottom: 0;
  }

  .About_DoctorArea .ViewThum {
    border: none;
  }

  .About_DoctorArea .ViewThum .Inner {
    padding: 0;
  }

  .About_DoctorArea .ViewThum dl,
  .About_DoctorArea .ViewThum dl.doctorBox01 {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    padding: 0 !important;
    background: transparent;
  }

  .About_DoctorArea .ViewThum dt,
  .About_DoctorArea .ViewThum dd {
    display: block !important;
    width: 500px !important;
  }

  .About_DoctorArea .ViewThum dt {
    padding: 0 30px;
    box-sizing: border-box;
  }

  .About_DoctorArea .ViewThum dl .Thumb {
    height: auto;
    min-height: 0;
    padding: 24px 16px 0;
    border-top-right-radius: 90px;
    box-sizing: border-box;
  }

  .About_DoctorArea .ViewThum dl .Thumb img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center top;
  }

  .About_DoctorArea .ViewThum dt p {
    left: -18px;
    bottom: 48px;
    font-size: 11px;
    letter-spacing: 0.15em;
  }

  .About_DoctorArea .ViewThum dd {
    position: static;
    padding: 20px 0 0 30px !important;
  }

  .About_DoctorArea .ViewThum dd::before {
    display: none !important;
  }

  .About_DoctorArea .ViewThum .Name {
    line-height: normal !important;
    font-size: inherit !important;
    text-align: left;
  }

  .About_DoctorArea .ViewThum dd .Name {
    padding-left: 0 !important;
  }

  .About_DoctorArea .ViewThum dd .Name h5 {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }

  .About_DoctorArea .ViewThum dd .Name h5 span {
    font-size: 12px;
    padding: 5px 8px;
  }

  .About_DoctorArea .ViewThum dd .Name p {
    font-size: 25px;
    padding: 0 0 16px;
    font-weight: 600;
  }

  .About_DoctorArea .ViewThum dd .Career,
  .About_DoctorArea .ViewThum dd .Career:nth-child(1) {
    display: block !important;
    padding-left: 0 !important;
    white-space: normal;
  }

  .About_DoctorArea .ViewThum dd .Career p {
    font-size: 16px;
    color: #1d1b1b;
    line-height: 1.8 !important;
    padding-left: 0 !important;
    font-weight: 400;
  }
}

/* 모바일: 컴팩트 헤더 + 햄버거 메뉴 */
@media screen and (max-width: 500px) {
  header .HeaderNav_Area {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  header .HeaderNav_GNB {
    padding: 12px 20px;
    box-sizing: border-box;
    position: relative;
    min-height: 60px;
  }

  header .HeaderNav_GNBmenu {
    position: relative;
  }

  header .HeaderNav_GNB .Logo {
    left: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
  }

  header .HeaderNav_GNB .Logo img {
    max-width: 150px;
    height: auto;
    filter: none;
  }

  header .HeaderNav_GNBmenu .RightBox {
    position: absolute;
    top: 50%;
    right: 56px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  header .HeaderNav_GNBmenu .RightBox .Member {
    position: static;
    right: auto;
    color: #000;
  }

  header .HeaderNav_GNBmenu .RightBox .Member ul li {
    padding: 0 6px;
  }

  header .HeaderNav_GNBmenu .RightBox .Member ul li a {
    font-size: 11pt;
    white-space: nowrap;
  }

  header .HeaderNav_GNBmenu .RightBox .Link {
    display: none;
  }

  .MobileMenuBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1003;
  }

  .MobileMenuBtn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #000;
    border-radius: 1px;
    transition:
      transform 0.3s,
      opacity 0.3s;
  }

  .MobileMenuBtn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .MobileMenuBtn.is-open span:nth-child(2) {
    opacity: 0;
  }

  .MobileMenuBtn.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

}

/* 단일 메뉴 DOM을 쓰므로 별도 MobileNav UI는 사용하지 않음 */
.MobileNavOverlay, .MobileNav { display: none !important; }

@media screen and (max-width: 500px) {
  .BtnBox {
    margin: 0;
  }
  .TopVisual {
    height: 180px;
  }
  .CenterFixed {
    width: 500px !important;
    left: auto;
    margin-left: 0;
  }
  .CenterFixed picture img,
  .commonBottom picture img {
    width: 100%;
    height: auto;
  }
  .About_GalleryArea
    .MultiImgSliderArea
    .MultiImgSlider.slider-for
    .slick-slide
    li
    .ThumBox {
    width: 100%;
    border-radius: 15px;
  }
  .MultiImgSlider.slider-for .slick-slide li .ThumBox {
    height: auto;
  }
  .MultiImgSlider.slider-for .slick-slide li .ThumBox img {
    width: 100%;
    height: 230px;
    object-fit: cover;
  }
  .About_GalleryArea .MultiImgSliderArea .slick-button {
    top: 42%;
    width: 78%;
    left: 50px;
  }
  .About_GalleryArea .MultiImgSliderArea .slick-button .slick-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 45px;
  }
  .About_GalleryArea .MultiImgSlider.slider-nav .slick-slide {
    width: calc(100% / 2) !important;
    height: 120px !important;
  }

  .petit.BotoxCon .BotoxInfo .MultiSlider{
    display: flex;
    flex-direction: column-reverse;
  }

  .petit.BotoxCon .BotoxInfo .Slide {
    display: block;
  }
  .petit.BotoxCon .BotoxInfo .Slide .ImgBox {
    width: 500px !important;
    height: auto !important;
    border-radius: 0 !important;
    padding:0 20px !important;
  }
  .petit.BotoxCon .BotoxInfo .Slide picture img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
  }
  .petit.BotoxCon .BotoxInfo .swiper-pagination {
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
  }
  .petit.BotoxCon .BotoxInfo .Slide .Info {
    margin-left: 30px;
    padding-top: 40px;
  }

  .makeup.semiCon{
    padding: 100px 0 !important;
  }
  .makeup.semiCon .SemiInfo .Slide{
    flex-direction: column;
  }
  .makeup.semiCon .SemiInfo .Slide .Info{
    margin-left: 30px;
    padding-top: 40px;
  }
  .makeup.semiCon .SemiInfo .MultiSlider{
    display: flex;
    flex-direction: column-reverse;
  }

  .makeup.semiCon .SemiInfo .Slide .ImgBox {
    width: 500px !important;
    height: auto !important;
    border-radius: 0 !important;
    padding:0 20px !important;
  }
  .makeup.semiCon .SemiInfo .Slide picture img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
  }
  .makeup.semiCon .SemiInfo .swiper-pagination{
    width: 100%;
    height: 135px;
    position: relative;
    left: auto;
    bottom: auto;
    right: auto;
    top: auto;
  }

  #bo_cate_ul{
    display: flex !important;
    flex-wrap: wrap;
  }
  #bo_cate_ul > li{
    width: 150px;
  }
}

/* 단일 GNB: 모바일에서는 동일한 메뉴 DOM을 햄버거 아코디언으로 사용 */
@media screen and (max-width: 500px) {
  header .HeaderNav_Area,
  header .HeaderNav_GNB,
  header .HeaderNav_GNBmenu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  header .HeaderNav_GNB {
    padding: 12px 20px;
    min-height: 60px;
  }
  header .HeaderNav_GNB .Logo {
    left: 20px;
  }
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu.Inner {
    display: none !important;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100% !important;
    height: calc(100vh - 60px);
    max-height: none;
    min-width: 0 !important;
    margin: 0;
    padding: 8px 0 40px;
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: none;
  }
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu.Inner.is-open {
    display: flex !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu.Inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu.Inner > .MenuBig {
    display: block !important;
    width: auto !important;
    min-width: 0;
    border-bottom: 1px solid #eee;
  }
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu .MenuBig > a {
    padding: 14px 20px;
    color: #222 !important;
    font: 500 16px/1.4 "Pretendard", sans-serif;
    text-align: left;
  }
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu .MenuSub {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
    border: 0 !important;
    background: #fafafa !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu .MenuSub.is-open {
    display: block !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu .MenuSub:before,
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu .MenuSub:after {
    display: none !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu .MenuSub dd a {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 20px 10px 36px !important;
    color: #555 !important;
    font: 400 14px/1.4 "Pretendard", sans-serif !important;
    text-align: left !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu.Inner {
    display: none !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    z-index: 1002 !important;
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 24px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu.Inner.is-open {
    display: none !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu.Inner {
    display: none !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu .MenuBig > .MenuSubInline {
    display: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
    background: #fafafa !important;
    border: 0 !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu .MenuBig.is-open > .MenuSubInline {
    display: block !important;
  }
  header .HeaderNav_GNBmenu .MenuSubInline dl,
  header .HeaderNav_GNBmenu .MenuSubInline dd {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header .HeaderNav_GNBmenu .MenuSubInline dt {
    display: none !important;
  }
  header .HeaderNav_GNBmenu .MenuSubInline dd a {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 20px 10px 36px !important;
    color: #555 !important;
    font: 400 14px/1.4 "Pretendard", sans-serif !important;
    text-align: left !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu.Inner > .Inner {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header .HeaderNav_GNBmenu .RightBox {
    right: 66px;
  }
  .MobileMenuBtn {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1001;
  }
  .MobileMenuBtn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #000;
    transition: transform .3s, opacity .3s;
  }
}

@media screen and (max-width: 500px) {
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu.Inner,
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu.Inner,
  header .HeaderNav_GNBmenu .HeaderNav_SmallMenu.Inner > .Inner {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  header .HeaderNav_GNBmenu .HeaderNav_LargeMenu.Inner {
    flex-direction: column;
    justify-content: flex-start;
  }
}

@media screen and (min-width: 501px) {
  .MobileMenuBtn { display: none !important; }
}

.MobileNavOverlay, .MobileNav { display: none !important; }