@charset "utf-8";


#hair-loss-injection { 
  --color-title: #3f4247;
  --color-01: #507dd8;
  --color-02: #40cebb;
  font-weight: 300; 
  --cont-width: 50%; 
  --cont-py: 15rem;
  line-height: 1.4;

  --title-size: 4.8rem;
  --sub-title-size: 3.8rem;
  --page-desc: 2.5rem;
} .color-point { color: var(--color-01); } 

#hair-loss-injection #sub-title strong::before { background-color: #80b6ff; } 
#hair-loss-injection #sub-title h1 { margin-top: 0; color: var(--color-title); text-transform: uppercase; font-size: 3.8rem; } 
#hair-loss-injection #sub-title p { margin-top: auto; color: var(--color-title); font-size: 3rem; font-weight: 200; } 

.visual-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 

section:not(#sub-top):not(#breadcrumbs) { position: relative; z-index: 1; } 
.sub-content { padding-block: var(--cont-py); background-color: white; } 

.sub-content h2 span { font-size: 2.6rem; } 
figure { margin: 0; } 

img { width: 100%; max-width: 100%; display: block; } 


#hair-loss-injection small.common-small-group { display: block; width: 80%; margin: 4rem auto auto; padding: 4rem 1rem; text-align: center; border-radius: 2.5rem; overflow: hidden; font-size: 2rem; font-weight: 300; line-height: 1.5; color: white; background-color: #53555b; } 
#hair-loss-injection small.common-small-group b { color: var(--color-02); font-weight: 600; } 

/* ============== 에이비 탈모주사 ============== */ 
#page-hair-loss-injection { text-align: center; color: var(--color-title); background-color: #f8fbff; } 
#page-hair-loss-injection h2.sub-item-title { display: grid; place-content: center; font-size: var(--title-size); margin: 0 auto; color: var(--color-01); } 
#page-hair-loss-injection h2.sub-item-title span { font-size: var(--sub-title-size); color: var(--color-title); font-weight: 300; } 
#page-hair-loss-injection .hair-loss-injection-desc { font-size: var(--page-desc); } 
#page-hair-loss-injection .graph { border-radius: 2rem; max-width: 100rem; margin: 4rem auto 6rem; border: 1px solid #c1d2ea; overflow: hidden; background-color: white; } 


/* ============== 에이비 시술원리 ============== */ 
#page-performed { text-align: center; color: var(--color-title); background-color: #3e4f73; } 
#page-performed h2.sub-item-title { display: grid; place-content: center; font-size: var(--title-size); margin: 0 auto; color: #aaceff; } 
#page-performed h2.sub-item-title span { font-size: var(--sub-title-size); color: white; font-weight: 300; } 
#page-performed .performed-desc { font-size: var(--page-desc); } 

#page-performed ul { width: 70%; padding: 5rem; margin: 4rem auto auto; background-color: #f8fbff; border-radius: 2rem; display: grid; place-content: center; gap: 4rem; } 
#page-performed ul li { position: relative; display: grid; place-content: center; gap: 4rem; } 
#page-performed ul li p { display: inline-block; justify-self: center; padding: 1rem 5rem; font-size: var(--page-desc); font-weight: 800; border-radius: 100vw; color: white; background-color: #363636; } 
#page-performed ul li figure { display: grid; place-content: center; gap: 4rem } 
#page-performed ul li figure img { max-width: 59.5rem; border-radius: 2rem; } 
#page-performed ul li:not(:last-child)::after { content: ''; display: block; width: 5.4rem; height: 6rem; margin: 0 auto; background-image: url('/img/page/hair-loss-injection/performed-arrow.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } 


/* ============== 에이비 BnA ============== */ 
#page-bna { text-align: center; color: var(--color-title); background-color: #e3efff; } 
#page-bna h2.sub-item-title { display: grid; place-content: center; font-size: var(--title-size); margin: 0 auto; color: var(--color-01); } 
#page-bna h2.sub-item-title span { font-size: var(--sub-title-size); color: var(--color-title); font-weight: 300; } 

#page-bna ul { width: 65%; padding: 5rem; margin: 4rem auto auto; display: grid; place-content: center; gap: 4rem; } 
#page-bna ul li { position: relative; display: flex; align-items: center; width: 100%; border-radius: 2rem; overflow: hidden; } 
#page-bna ul li p { display: inline-block; justify-self: center; padding: 1rem 5rem; font-size: var(--page-desc); font-weight: 800; border-radius: 100vw; color: white; background-color: #363636; } 
#page-bna ul li figure { position: relative; display: grid; place-content: center; gap: 4rem; width: 100%; height: 100%; } 
#page-bna ul li figure figcaption { position: absolute; bottom: 1rem; padding: .6rem 1.4rem; border-radius: 0.8rem; font-size: 1.4rem; color: white; } 
#page-bna ul li figure.bna-before figcaption { left: 1rem; font-weight: 300; background-color: rgba(0, 0, 0, 0.37); } 
#page-bna ul li figure.bna-after figcaption { right: 1rem; font-size: 600; background-color: rgba(0, 0, 0, 0.6); } 
#page-bna ul li::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 3.4rem; height: auto; aspect-ratio: 1; border-radius: 50%; background: url('/img/page/thermage/arrow-right-solid.svg') center center / contain no-repeat #1d1d1f; } 
/* 오픈시 삭제해야함 */
#page-bna ul li figure.bna-before::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #d9dddf; } 
#page-bna ul li figure.bna-after::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #5b5b5b; } 





/* ============== 에이비 BnA ============== */ 
#page-treatment-effect { padding-bottom: 0; text-align: center; color: var(--color-title); background-color: #fbfdff; } 
#page-treatment-effect h2.sub-item-title { display: grid; place-content: center; font-size: var(--title-size); margin: 0 auto; color: #171718; } 
#page-treatment-effect .content-column { display: grid; grid-template-columns: 60% 40%; width: 90%; margin: 4rem 4rem 0 0; } 

#page-treatment-effect ul { display: flex; flex-direction: column; justify-content: space-evenly; } 
#page-treatment-effect ul li h3 { font-size: var(--sub-title-size); color: var(--color-01); text-align: right; } 
#page-treatment-effect ul li p { font-size: var(--page-desc); text-align: right; } 
#page-treatment-effect ul li .content-contour { position: relative; width: 100%; } 
#page-treatment-effect ul li .content-contour::before { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 100%; height: 1px; background: repeating-linear-gradient(to right, #5397f6 0 .8rem, transparent .8rem 1.4rem ); } 
#page-treatment-effect ul li .content-contour .point { position: relative; width: 2.8rem; height: 2.8rem; display: block; border-radius: 50%; background: #5397f6; border: .2rem solid #d7e7ff; box-shadow: 0 0 0 .6rem #ddebfd, 0 0 1rem #ddebfd; } 
#page-treatment-effect ul li .content-contour .point::before { content: ""; position: absolute; inset: -0.6rem; border-radius: 50%; border: .1rem solid rgba(83, 151, 246, 0.2); } 



/* ============== 탈모도 에이비 ============== */ 
#page-ab-hair-Loss { text-align: center; color: var(--color-title); background-color: var(--color-01); } 
#page-ab-hair-Loss h2.sub-item-title { display: grid; place-content: center; font-size: calc(var(--title-size) + .7rem); margin: 0 auto; color: #fff79e; } 
#page-ab-hair-Loss h2.sub-item-title span { font-size: calc(var(--sub-title-size) + .4rem ); color: white; font-weight: 200; display: block; margin-bottom: 4rem; } 

/* ============== 키포인트 ============== */ 
#page-keypoint { text-align: center; color: var(--color-title); background-color: #f8f8f8; } 
#page-keypoint h2.sub-item-title { display: grid; place-content: center; font-size: calc(var(--title-size) + 2rem); margin: 0 auto; } 
#page-keypoint h2.sub-item-title span { font-size: calc(var(--sub-title-size) + 2.2rem ); font-weight: 200; display: block; } 

#page-keypoint article { margin-top: 6rem; } 
#page-keypoint article:not(:first-of-type) { padding-top: 10rem; margin-top: 10rem; border-top: 1px solid #d5d5d5; } 
#page-keypoint h3 { display: inline-block; font-size: var(--sub-title-size); padding: 1.4rem 4rem; border-radius: 1.8rem; color: white; background-color: var(--color-01); } 
#page-keypoint h4 { display: grid; place-content: center; margin: 6rem auto auto; font-size: calc(var(--title-size) - 0.3rem ); color: var(--color-01); } 
#page-keypoint h4 span { font-size: calc(var(--sub-title-size) - 0.2rem); font-weight: 200; display: block; color: var(--color-title); } 
#page-keypoint figure img { max-width: 73.5rem; margin: 4rem auto; border-radius: 2rem; } 
#page-keypoint .keypoint-desc { font-size: var(--page-desc); } 
#page-keypoint .keypoint-desc b { display: inline; background: linear-gradient( to top, #fcf1bf 0 45%, transparent 45%); } 


#page-keypoint .content-youtube { width: calc(100% / 3.5); height: 100%; margin: 4rem auto 6rem auto; border-radius: 2rem; } 
#page-keypoint .content-youtube iframe { border-radius: 1.4rem; } 

#page-keypoint .case-list { display: grid; grid-template-columns: repeat(3, 1fr); width: 70%; margin-block: 4rem 6rem; margin-inline: auto; gap: 2.4rem; } 
#page-keypoint .case-list li { height: 100%; } 
#page-keypoint .case-list figure { display: flex; align-items: center; justify-content: center; flex-direction: column; } 
#page-keypoint .case-list img { border-bottom-right-radius: 0; border-bottom-left-radius: 0; margin-block: 2rem 0; } 
#page-keypoint .case-number { display: inline-block; justify-self: center; padding: .8rem 2rem; font-size: var(--page-desc); font-weight: 800; border-radius: 100vw; color: white; background-color: #363636; } 
#page-keypoint .keypoint-caption { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; width: 100%; padding: 2.5rem 2rem; font-size: calc(var(--page-desc) - .5rem); border-bottom-right-radius: 2rem; border-bottom-left-radius: 2rem; color: #252525; background-color: #e5e5e5; } 




/* ============== 하단 배너 ============== */
#sub-bottom { position: relative; width: 100%; background-color: #eef6ff; } 
#sub-bottom .box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) } 
#sub-bottom #title-wrap { display: grid; grid-template-columns: repeat(2,1fr); } 
#sub-bottom .sub-title-group { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; } 

#sub-bottom .sub-title-group p { font-size: 3rem; text-align: center; color: var(--color-title); } 
#sub-bottom .sub-title-group h2 { margin-top: 5rem; font-size: 20rem; } 
#sub-bottom .sub-title-group h2 img { vertical-align: middle; width: auto; height: 1em; } 
#sub-bottom #banner-back { max-width: 1920px; margin: 0 auto; } 

#sub-faq-latest { margin-top: 0; } 



@media (max-width: 768px){
  #hair-loss-injection { --cont-width: 100%; --cont-py: 10rem; --title-size: 7vw; --sub-title-size: 6vw; --page-desc: 4.4vw; } 

  #hair-loss-injection .box { padding-inline: 2rem; } 
  #hair-loss-injection #sub-title { padding: 12rem 4rem 6rem; overflow: hidden; } 


  #hair-loss-injection #sub-title p,
  #hair-loss-injection #sub-title h1 {position: relative;z-index: 2; } 

  #page-performed ul,
  #page-bna ul { width: 100%; } 

  #page-ab-hair-Loss h2.sub-item-title { font-size: calc(var(--title-size) + 1vw); } 

  #page-hair-loss-injection .graph { margin: 4vw auto 6vw; }

  #page-bna ul { padding: 0; margin: 4vw auto auto; } 
  #page-bna ul li { flex-direction: column; } 
  #page-bna ul li::after { transform: rotate(90deg); transform-origin: center top; } 

  #page-performed ul li p { padding: 1rem 5vw }
  #page-performed ul { padding: 4rem 2rem;  margin: 4vw auto auto; } 
  #page-performed ul li { gap: 4vw; }
  #page-performed ul li figure  { gap: 4vw; }

  #page-treatment-effect .content-column { width: 100%; margin: 8vw 0 18vw 0; } 
  #page-treatment-effect .content-column figure { transform: scale(1.3); transform-origin: right top; } 
  #page-treatment-effect ul { position: absolute; right: 2rem; width: 44%; gap: 5vw; } 
  #page-treatment-effect ul li .content-contour { justify-content: center; margin-block: 1vw; } 
  #page-treatment-effect ul li .content-contour .point { width: 4vw; height: 4vw; } 
  #page-treatment-effect ul li h3 { font-size: 4.8vw; } 
  #page-treatment-effect ul li p { font-size: 3.8vw; } 
  #page-treatment-effect ul li .content-contour .point { width:3vw; height:3vw; box-shadow: 0 0 0 .7vw #ddebfd, 0 0 2vw #ddebfd } 
  #page-treatment-effect ul li .content-contour .point::before { inset: -1vw; } 

  #page-keypoint .content-youtube { width: 70%; } 
  #page-keypoint .case-list { width: 90%; grid-template-columns: auto; } 

  #page-keypoint h3 { padding: 1.4vw 6vw;}
  #page-keypoint h2.sub-item-title { font-size: calc(var(--title-size) + 2vw); } 
  #page-keypoint h2.sub-item-title span { font-size: calc(var(--sub-title-size) + 2vw); } 
  #page-keypoint .keypoint-caption { font-size: var(--page-desc) } 
  #page-keypoint article:not(:first-of-type) { padding-top: 8rem; margin-top: 8rem; } 
  #page-keypoint article { margin-top: 6vw; } 
  #page-keypoint h4 { margin: 6vw auto auto;}
  #page-keypoint .case-list { margin-block: 4vw 6vw; }
  #page-keypoint .content-youtube {margin: 4vw auto 6vw auto;}
  #page-keypoint figure img { margin: 4vw auto;}

  #sub-bottom #title-wrap::before { display: none; } 
  #sub-bottom #title-wrap { display: flex; height: 100%; align-items: flex-end; } 
  #sub-bottom .box { height: 100%; } 
  #sub-bottom .sub-title-group { position: relative; display: flex; justify-content: flex-end; align-items: flex-end; flex-direction: column; height: 100%; width: 70%; margin-left: auto; } 

  #sub-bottom .sub-title-group h2 { position: relative; z-index: 2; margin-top: 5vw; margin-bottom: 6vw; font-size: 30vw; } 
  #sub-bottom .sub-title-group p { position: relative; z-index: 2; font-size: 5vw; text-align: center; } 

  #sub-bottom .sub-title-group::before { content: ''; pointer-events: none; position: absolute; left: 87%; top: 87%; transform: translate(-50%, -50%); width: 160%; height: 70%; background-color: #eef6ff; filter: blur(8rem); border-radius: 20%; z-index: 1; } 
}