@charset "utf-8";

#thread-lifting {
  --color-title:#3f4247;
  --color-01: #282828;
  --color-02: #f7f890;
  --color-03: #75a9e8;
  --color-04: #80aadc;
  --color-05: #faf1b5;


  font-weight: 400;

  --cont-width: 50%;
  --cont-py: 15rem;
}

#thread-lifting #sub-title strong::before { background-color: var(--color-03); } 
#thread-lifting #sub-title h1 { color: var(--color-title); text-transform: uppercase; } 
#thread-lifting #sub-title p { color: var(--color-title); } 

.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; } 
.text-img img { display: block; width: auto; height: 2em; margin: 0 auto; } 
figure { margin: 0; } 
img { width: 100%; max-width: 100%; display: block; } 


/* ============== 무작정 당기기만 했던 실리프팅 ============== */
#page-intro.sub-content { background-color: var(--color-04); } 
#page-intro .sub-item-title h2 { font-weight: 600; color: white; } 
#page-intro .sub-item-title h2 span { display: block; margin-top: 2rem; } 
#page-intro .box { width: var(--cont-width); margin: 0 auto; } 



/* ============== 에이비 커스텀 실리프팅 전후사진 ============== */
#page-unique.sub-content { background-color: white; } 

#page-thread-lifting-bna .sub-item-title h2 { color: var(--color-title); } 
#page-thread-lifting-bna .sub-item-title h2 b { color: var(--color-03); } 
#page-thread-lifting-bna .box { width: var(--cont-width); margin: 0 auto; } 

#page-thread-lifting-bna .bna-list { margin-top: 6rem; } 
#page-thread-lifting-bna .bna-list li { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 1.8rem; overflow: hidden; } 
#page-thread-lifting-bna .bna-list li:not(:first-child) { margin-top: 2rem; } 
#page-thread-lifting-bna .bna-list li figcaption { position: absolute; bottom: 1.4rem; z-index: 1; font-size: 1.4rem; text-align: center; padding: 0.8rem 1.2rem; border-radius: 0.7rem; line-height:1.2; } 
#page-thread-lifting-bna .bna-list li figure:nth-of-type(1) figcaption { left: 1.4rem; text-align: center; color: white; background-color: rgba(0, 0, 0, 0.4); } 
#page-thread-lifting-bna .bna-list li figure:nth-of-type(2) figcaption { right: 1.4rem; text-align: center; background-color: rgba(0, 0, 0, 0.6); font-weight: 600; color: #9bc8ff; } 



/* ============== 실리프팅 기술력 ============== */
#page-thread-lifting-tech.sub-content { background-color: #f2f2f2; } 
#page-thread-lifting-tech .sub-item-title h2 { color: var(--color-title); } 
#page-thread-lifting-tech .sub-item-title h2 b { color: var(--color-03); } 

#page-thread-lifting-tech .box { width: var(--cont-width); margin: 0 auto; } 
#page-thread-lifting-tech .ab-tech { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 6rem; } 
#page-thread-lifting-tech .ab-tech strong { display: block; width: 100%; padding-block: 1.2rem; font-size: 2.2rem; font-weight: 600; color: var(--color-05); text-align: center; background-color: #6ea5e9; } 
#page-thread-lifting-tech .ab-tech .tech-list { display: flex; justify-content: center; } 
#page-thread-lifting-tech .ab-tech .tech-list .tech { display: flex; flex-direction: column; } 
#page-thread-lifting-tech .ab-tech .tech-list figure { position: relative; } 
#page-thread-lifting-tech .ab-tech .tech-list figcaption { position: absolute; bottom: 1.2rem; right: 1.4rem; z-index: 1; font-size: 1.4rem; text-align: center; padding: 0.8rem 1.2rem; color: white; border-radius: 0.7rem; line-height: 1.2; text-align: center; background-color: #508ddc; font-weight: 600; } 
#page-thread-lifting-tech .ab-tech .tech-list .tech-desc { flex-grow: 1; display: flex; align-items: center; justify-content: center; border-radius: 2rem; padding: 4rem 2rem; margin-top: 2rem; font-size: 1.8rem; line-height: 1.3; text-align: center; background-color: var(--color-05); } 
#page-thread-lifting-tech .ab-tech .tech-list .tech-01 .tech-desc { margin-right: 0.5rem; } 
#page-thread-lifting-tech .ab-tech .tech-list .tech-01 .tech-desc b { color: #478bde; } 
#page-thread-lifting-tech .ab-tech .tech-list .tech-02 .tech-desc { margin-left: 0.5rem; } 
#page-thread-lifting-tech .ab-tech .tech-list .tech-02 .tech-desc b { color: #b83c3c; } 
#page-thread-lifting-tech h3 { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2rem; margin-top: 4rem; font-size: 2rem; text-align: center; line-height: 1.3; color: #5a92d6; } 
#page-thread-lifting-tech h3::before { content: ''; display: block; width: 5.5rem; height: auto; aspect-ratio: 1; pointer-events: none; background-image: url('/img/page/thread-lifting/icon-arrow.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } 
#page-thread-lifting-tech h3 span { font-weight: 400; } 






/* ============== 에이비 커스텀 실 유형 ============== */
#page-thread-type.sub-content { background-color: #e7eff8; } 
#page-thread-type .sub-item-title h2 span { color: var(--color-title); } 
#page-thread-type .sub-item-title h2 b { color: var(--color-03); } 
#page-thread-type .box { width: calc(var(--cont-width) + 5%); margin: 0 auto; } 
#page-thread-type h2 span { font-size: 2.6rem; color: rgba(255, 255, 255, 0.8); } 
#page-thread-type h3 { margin-top: 6rem; font-weight: 400; font-size: 2.2rem; text-align: center; line-height: 1.5; color: var(--color-title); } 
#page-thread-type .thread-type-list { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; margin: 5rem auto auto; gap: 2rem; } 
#page-thread-type .thread-type-list li { border-radius: 2.5rem; background-color: white; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; } 
#page-thread-type .thread-type-list li .thread-name { width: 100%; padding: 2rem 1rem; text-align: center; font-weight: 400; font-size: 2rem; color: white; background-color: var(--color-03); } 
#page-thread-type .thread-type-list li figure { padding: 2rem; } 
#page-thread-type .thread-type-list li figure picture { display: block; border-radius: 1.4rem; overflow: hidden; } 
#page-thread-type .thread-type-list li figcaption { margin-block: 2rem 1rem; gap: 1.6rem; text-align: center; color: #252525; line-height: 1.5; font-weight: 400; flex-grow: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; } 
#page-thread-type .thread-type-list li figcaption span:nth-of-type(1) { order: 1; font-size: 1.6rem; } 
#page-thread-type .thread-type-list li figcaption span:nth-of-type(2) { order: 3; font-size: 1.6rem; } 
#page-thread-type .thread-type-list li figcaption mark { display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0; font-size: 1.8rem; font-weight: 800; color: #407dc6; background: linear-gradient( transparent 50%, rgba(250, 241, 181, 1) 50% ); } 
#page-thread-type .thread-type-list li figcaption::before { content: ''; order: 2; display: block; width: 2.8rem; height: auto; aspect-ratio: 1; pointer-events: none; background-image: url('/img/page/thread-lifting/icon-arrow.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } 



/* ============== 실리프팅 시술부위 ============== */
#page-treatment.sub-content { background-color: #252525; } 
#page-treatment .sub-item-title h2 { color: white; } 
#page-treatment .sub-item-title h2 b { color: var(--color-03); } 
#page-treatment .box { width: calc(var(--cont-width) - 10%); margin: 0 auto; } 
#page-treatment .photo-wrapper { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2rem; margin-top: 4rem; } 
#page-treatment .icon-top-wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; opacity: 0.5; } 
#page-treatment .icon-top-wrap span { color: white; font-weight: 100; } 
#page-treatment .icon-top { display: flex; align-items: center; justify-content: center; gap: 6rem; } 
#page-treatment .icon-photo { font-size: 1.8rem; } 
#page-treatment img.icon-photo { width: auto; height: 1.8em; vertical-align: middle; } 
#page-treatment small { display: block; margin-left: auto; text-align: right; color: white; opacity: 0.5; font-size: 1.3rem; font-weight: 200; } 
#page-treatment figure { border-radius: 1.8rem; overflow: hidden; } 
#page-treatment .photo-visual-text { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; margin-block: 1rem; text-transform: uppercase; text-align: center; color: white; } 
#page-treatment .photo-visual-text span { opacity: 0.5; font-weight: 100; } 
#page-treatment .photo-visual-text .focusing { opacity: 1; } 
#page-treatment .icon-bottom { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 1rem; } 
#page-treatment .icon-bottom .icon-button { width: 4rem; height: auto; aspect-ratio: 1; background-color: white; padding: 8px 0; outline: 1px solid white; border-radius: 50%; outline-offset: 4px; } 
#page-treatment .icon-bottom .icon-camera { position: absolute; right: 0; max-width: 4rem; } 



/* ============== 결과의 차이를 보여주는 ============== */
#page-result-diff.sub-content { background-color: var(--color-04); } 
#page-result-diff .sub-item-title h2 { color: white; } 
#page-result-diff .sub-item-title h2 b { color: var(--color-05); } 
#page-result-diff .box { width: calc(var(--cont-width) + 5%); margin: 0 auto; } 
#page-result-diff h2 span { font-size: 2.6rem; color: rgba(255, 255, 255, 0.8); } 
#page-result-diff .result-diff-list { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; margin: 5rem auto auto; gap: 2rem; } 
#page-result-diff .result-diff-list li { border-radius: 2.5rem; background-color: white; overflow: hidden; padding: 2rem 2rem 3rem 2rem; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; } 
#page-result-diff .result-diff-list li i { display: flex; align-items: center; justify-content: center; width: 100%; padding: 3rem 0; border-radius: 1.7rem; background-color: #eff3f8; } 
#page-result-diff .result-diff-list li i img { max-height: 8.5rem; } 
#page-result-diff .result-diff-list li strong { margin-top: 2rem; text-align: center; font-size: 1.8rem; color: #292a2e; } 
#page-result-diff .result-diff-list li span { margin-top: 2rem; text-align: center; font-size: 1.6rem; color: #252525; line-height: 1.5; font-weight: 400; flex-grow: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; } 
#page-result-diff .result-diff-list li span b { color: #407dc6; } 





/* ============== 함께하면 좋은 시술 ============== */
#page-related-treatment.sub-content { background-color: #f9f3d3; } 
#page-related-treatment .sub-item-title h2 b { color: var(--color-03); } 
#page-related-treatment .box { width: calc(var(--cont-width) + 5%); margin: 0 auto; } 
#page-related-treatment .related-treatment-list { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; gap: 1rem; margin: 5rem auto auto; } 
#page-related-treatment .related-treatment-list li { border-radius: 2.5rem; background-color: white; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; } 
#page-related-treatment .related-treatment-list li .related-treatment-name { display: flex; align-items: center; width: 100%; padding: 2rem 1rem; text-align: center; font-weight: 600; font-size: 2rem; color: white; background-color: var(--color-03); } 
#page-related-treatment .related-treatment-name span { display: block; flex-grow: 1; } 
#page-related-treatment .related-treatment-name .xi-plus-circle { font-size: 1.4em; } 
#page-related-treatment .related-treatment-group { display: flex; gap: 1rem; flex-grow: 1; padding: 4rem; } 
#page-related-treatment .list-cont { display: flex; flex-direction: column; } 
#page-related-treatment .list-cont figcaption { font-weight: 800; font-size: 1.8rem; text-align: center; } 
#page-related-treatment .list-cont picture { display: block; border-radius: 1.2rem; overflow: hidden; margin-top: 1.5rem; } 
#page-related-treatment .list-cont .treatment-effect { display: flex; align-items: center; justify-content: center; flex-grow: 1; margin-top: 1.5rem; padding: 2rem 1rem; font-size: 1.6rem; font-weight: 400; text-align: center; border-radius: 1rem; line-height: 1.4; color: var(--color-05); background-color: #494949; } 


/* ============== 하단 배너 ============== */
#sub-bottom { position: relative; width: 100%; background-color: #eef6ff; } 
#sub-bottom #sub-title { position: absolute; width: 100%; height: 100%; max-width: calc(1120px + 8rem); padding: 0 4rem; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; z-index: 2; } 
#sub-bottom .sub-title-group { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4rem; width: fit-content; height: 100%; margin-right: auto; } 
#sub-bottom #sub-title h2 { display: flex; align-items: center; flex-direction: column; gap: 0.5rem; margin: 4rem 0 0; font-size: 7.8rem; text-align: center; color: #2e2e2e; position: relative; z-index: 2; } 
#sub-bottom .text-img img { width: auto; height: 2em; } 
#sub-bottom #sub-title p span { position: relative; z-index: 2; } 
#sub-bottom #sub-title p::before { content: ''; position: absolute; width: 100%; height: auto; aspect-ratio: 1; left: 50%; top: 50%; border-radius: 50%; filter: blur(4rem); transform: translate(-50%,-50%); background: radial-gradient(circle,rgb(204, 232, 255) 0%, rgba(255, 255, 255, 0) 100%); z-index: 1; pointer-events: none; } 
#sub-bottom #banner-back { max-width: 1920px; margin: 0 auto; } 
#sub-bottom #sub-title p { position: relative; font-size: 2.4rem; text-align: center; color: rgba(46, 46, 46, 0.75); } 

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


@media (max-width: 1440px){
 #thread-lifting { --cont-width: 70%; } 
 }
@media (max-width: 1024px){
 #thread-lifting { --cont-width: 80%; } 
 }
@media (max-width: 768px){
 #thread-lifting { --cont-width: 100%; --cont-py: 10rem; } 
 #thread-lifting #sub-top #sub-title p { margin-top: 2rem; } 
 

 #page-thread-lifting-tech .ab-tech .tech-list { flex-direction: column; gap: 2rem; } 
 #page-thread-lifting-tech .ab-tech .tech-list .tech { flex-direction: column; border-radius: 1.6rem; overflow: hidden; } 
 #page-thread-lifting-tech .ab-tech .tech-list .tech-desc { margin-top: 0; border-radius: 0; } 
 #page-thread-lifting-tech .ab-tech .tech-list .tech-01 .tech-desc { margin-right: 0; } 
 #page-thread-lifting-tech .ab-tech .tech-list .tech-02 .tech-desc { margin-left: 0; } 

 #page-treatment .box { width: 100%; } 
 #page-treatment small { text-align: center; margin: 0 auto; } 
 #page-treatment .photo-visual-text span:nth-of-type(even) { text-align: center !important; } 

 #page-thread-type .thread-type-list { width: 90%; grid-template-columns: 1fr; grid-template-rows: auto; } 
 #page-result-diff .result-diff-list { width: 80%; grid-template-columns: 1fr; grid-template-rows: auto; } 
 #page-result-diff .result-diff-list li i img { max-height: 12rem; }
 #page-related-treatment .related-treatment-list { grid-template-columns: 1fr; grid-template-rows: auto; } 
 
 #sub-bottom { overflow: hidden; } 
 #sub-bottom .box { height: 100%; } 
 #sub-bottom .sub-title-group { justify-content: space-between; flex-direction: column; z-index: 2; width: 100%; } 
 #thread-lifting #sub-title p { margin-top: 0; margin-right: auto; } 
 #sub-bottom #sub-title { height: 100%; padding: 5rem 5rem 2rem 5rem; } 
 #sub-bottom #sub-title::before { content: ''; width: 100%; height: 100%; position: absolute; z-index: 1; bottom: -1%; left: 50%; transform: translateX(-50%); background: linear-gradient(0deg,rgba(204, 232, 255, 1) 0%, rgba(255, 255, 255, 0) 30%); pointer-events: none; } 

 #sub-bottom #sub-title p {text-align-last: left;}
 #sub-bottom #sub-title p::before { width: 210%; aspect-ratio: 2 / 1; left: 60%; top: -50%; } 
}

@media (max-width: 400px){
 .sub-item-title h2 { font-size: 3rem; } 
 #page-thread-lifting-bna .bna-list li figcaption { padding: 0.4rem; font-size: 1.2rem; } 
 }

@media (max-width: 370px){
 #sub-bottom #sub-title p { font-size: 2rem; } 
 }