@charset "utf-8";#onda { --color-title: #3f4247; --color-01: #282828; --color-02: #40cebb; font-weight: 300; --cont-width: 50%; --cont-py: 15rem; } 
#onda h2 { line-height: 1.4; } 

#onda #sub-title strong::before { background-color: #bababa; } 
#onda #sub-title h1 { color: var(--color-title); text-transform: uppercase; } 
#onda #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; } 
figure { margin: 0; } 

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


#onda 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; } 
#onda small.common-small-group b { color: var(--color-02); font-weight: 600; } 

/* ============== 에이비 온다 리프팅 ============== */ 
#page-ab-onda { text-align: center; color: #525a59; } 
#page-ab-onda h2.sub-item-title { display: grid; place-content: center; font-size: 12rem; margin: 0 auto; } 
#page-ab-onda h2.sub-item-title img { vertical-align: middle; width: auto; height: 1em; } 
#page-ab-onda .sub-item h3 { margin-block: 5.3rem 4rem; font-size: 3.8rem; font-weight: 300; line-height: 1.5; color: var(--color-title); } 
#page-ab-onda .sub-item h4 { font-size: 6.2rem; color: var(--color-02); } 
#page-ab-onda .onda-equipment { max-width: 94rem; margin: 1rem auto auto; } 
#page-ab-onda .onda-equipment figcaption { margin-top: -1rem; font-size: 9rem; font-weight: 800; background-color: white; z-index: 1; position: relative; padding-top: 1rem; } 
#page-ab-onda .onda-equipment figcaption span { color: var(--color-02); } 
#page-ab-onda .onda-equipment-desc { display: block; margin-block: 5rem 4rem; font-size: 3.5rem; } 
#page-ab-onda .ab-onda-desc { font-size: 2.5rem; } 

/* ============== 에이비 온다 리프팅 효과 ============== */
#page-onda-effect { text-align: center; background-color: #e0f2f0; } 
#page-onda-effect h2.sub-item-title { font-size: 3.8rem; font-weight: 300; color: #525a59; } 
#page-onda-effect h2.sub-item-title .title-image { display: grid; place-content: center; font-size: 8rem; margin: 2rem auto; } 
#page-onda-effect h2.sub-item-title .title-image img { vertical-align: middle; width: auto; height: 1em; } 

#page-onda-effect .onda-effect-box { max-width: 110rem; margin: 5rem auto 8rem; padding: 5rem; display: grid; grid-template-columns: repeat(2,1fr); gap: 4rem; background-color: white; border-radius: 2rem; } 
#page-onda-effect .onda-effect-box figure img { border-radius: 2rem; overflow: hidden; } 

#page-onda-effect .sub-item-1 .onda-effect-box ul { display: grid; grid-template-rows: 1fr 1fr 1fr auto; gap: 1rem; } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:not(:last-child) { position: relative; padding: 2.4rem; border-radius: 2rem; font-size: 2.2rem; line-height: 1.4; border: 2px solid #b8e2dc; } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:not(:last-child) b { display: block; color: #4d5453; } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:not(:last-child) b span { color: var(--color-02); } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:not(:last-child) span { color: #8f9594; } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:nth-child(1)::before,
#page-onda-effect .sub-item-1 .onda-effect-box ul li:nth-child(2)::before { content: '+'; position: absolute; bottom: calc(0% - 2.25rem); left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; aspect-ratio: 1; border-radius: 100%; color: white; background-color: black; z-index: 2; } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:last-child::before { content: ''; display: block; width: 4.2rem; height: 4rem; aspect-ratio: 1; margin: 0 auto .5rem auto; background-image: url('/img/page/onda/arrow-double-downd.svg'); background-size: contain; background-repeat: no-repeat; background-position: center center; } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:last-child { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; font-style: italic; color: #292929; } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:last-child span { font-size: 2.4rem; } 
#page-onda-effect .sub-item-1 .onda-effect-box ul li:last-child strong { font-size: 2.5rem; } 

#page-onda-effect .sub-item-2 .sub-item-desc { margin-top: 5rem; font-size: 2.7rem; color: #525a59; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul { display: grid; grid-template-rows: repeat(3, 1fr); gap: 1rem; height: 100%; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul li { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2.4rem; border-radius: 2rem; font-size: 2.2rem; line-height: 1.4; border: 2px solid #b8e2dc; align-self: stretch; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul li b.onda-effect-title { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 2.5rem; color: #4d5453; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul li b.onda-effect-title span { display: flex; align-items: center; justify-content: center; gap: .5rem; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul li b.onda-effect-title span i { font-size: 1.2em; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul li:nth-child(1) b.onda-effect-title span { color: #ffc75b; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul li:nth-child(2) b.onda-effect-title span { color: #759b64; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul li:nth-child(3) b.onda-effect-title span { color: #ff5f5f; } 
#page-onda-effect .sub-item-2 .onda-effect-box ul li span { color: #8f9594; } 

#page-onda-effect .sub-item-3 { position: relative; max-width: 110rem; margin: 0 auto; padding: 5rem; line-height: 1.5; font-size: 3.2rem; font-style: italic; text-align: center; border-radius: 2rem; color: #3b897f; background-color: white; } 
#page-onda-effect .sub-item-3::before { content: ""; position: absolute; left: 50%; top: -4rem; transform: translateX(-50%); width: 0; height: 0; border-left: 2.5rem solid transparent; border-right: 2.5rem solid transparent; border-bottom: 4.8rem solid white; } 
#page-onda-effect .sub-item-3 mark { padding: 0 1rem; font-weight: 300; color: #3b897f; background-color: rgba(255, 244, 124, .47); } 

/* ============== 에이비 온다 리프팅 BnA ============== */
#page-bna { background-color: #f8f8f8; } 
#page-bna h2 { color: #38978b; font-size: 4.8rem; text-align: center; line-height: 1.4; } 
#page-bna h2 span { display: block; margin-top: 1rem; color: #525a59; font-size: 4rem; font-weight: 400; text-align: center; line-height: 1.4; } 

#page-bna .sub-item h3 { width: fit-content; margin: 8rem auto auto; padding: 2rem 10rem; border-radius: 100vw; text-align: center; font-size: 2.7rem; color: white; background-color: #272727; } 
#page-bna .sub-item ul { display: flex; flex-direction: column; gap: 2rem; margin: 5rem auto auto; width: 100%; max-width: 84.5rem; } 
#page-bna .sub-item ul li { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); } 
#page-bna .sub-item figure { position: relative; width: 100%; } 
#page-bna .sub-item figure:first-of-type { border-top-left-radius: 2rem; border-bottom-left-radius: 2rem; overflow: hidden; } 
#page-bna .sub-item figure:last-of-type { border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; overflow: hidden; border: 3px solid #30a091; } 
#page-bna .sub-item figure img { width: 100%; height: 100%; display: block; object-fit: cover; } 
#page-bna .sub-item ul li::after { content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 3;display: flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-size: 80%;background-position: 65% 50%;background-image: url('/img/page/onda/icon-arrow-right.svg');background-color: #30a091;border-radius: 50%;width: 3.4rem;height: 3.4rem;aspect-ratio: 1; } 
#page-bna .sub-item figure figcaption { position: absolute; bottom:3%; font-size: 1.4rem; border-radius: .7rem; padding: .8rem 1.6rem; } 
#page-bna .sub-item figure:first-of-type figcaption { left: 3%; font-weight: 300; color: white; background-color: rgba(0, 0, 0, .37); } 
#page-bna .sub-item figure:last-of-type figcaption { right: 3%; color: #98efe3; font-weight: 700; background-color: rgba(0, 0, 0, .6); } 

/* ============== 에이비 온다 리프팅 키포안트 ============== */
#page-key-point h2 { width: fit-content; margin: 0 auto; padding: 2rem 8rem; border-radius: 100vw; text-align: center; font-size: 2.7rem; color: white; background-color: #69c5b9; } 
#page-key-point.keypoint-1 h3 { margin-block: 5rem 8rem; color: #38978b; font-size: 4.8rem; text-align: center; line-height: 1.4; } 
#page-key-point.keypoint-1 h3 span { display: block; font-weight: 300; font-size: 4rem; } 
#page-key-point.keypoint-1 .keypoint-list { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 88.6rem; margin: 5rem auto auto; gap: 2rem; } 

#page-key-point.keypoint-1 .keypoint-list-col { display: flex; align-items: center; flex-direction: column; border-radius: 3.5rem; overflow: hidden; text-align: center; } 
#page-key-point.keypoint-1 .keypoint-list-col h4 { display: flex; align-items: center; justify-content: center; width: 100%; padding: 3rem 1rem; font-size: 2.8rem; font-weight: 800; color: white; } 
#page-key-point.keypoint-1 .keypoint-list-col figure { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } 
#page-key-point.keypoint-1 .keypoint-list-col figcaption { display: flex; flex-direction: column; justify-content: center; font-size: 2.4rem; line-height: 1.4; flex-grow: 1; } 
#page-key-point.keypoint-1 .keypoint-list-col ol { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; font-size: 2rem; padding-block: 4rem 6rem; } 
#page-key-point.keypoint-1 .keypoint-list-col ol li { border-radius: 100vw; border: 1px solid; padding: 1rem; } 
#page-key-point.keypoint-1 .keypoint-list-col:nth-child(1) h4 { background-color: #69c5b9; } 
#page-key-point.keypoint-1 .keypoint-list-col:nth-child(1) { border: 2px solid #a0e5dc; color: #49a196; background-color: #f6fffe; } 
#page-key-point.keypoint-1 .keypoint-list-col:nth-child(2) h4 { background-color: #4e90bf; } 
#page-key-point.keypoint-1 .keypoint-list-col:nth-child(2) { border: 2px solid #95c4e5; color: #5494a7; background-color: #f4fcff; } 
#page-key-point.keypoint-1.keypoint-list-col:nth-child(1) ol li { color: #5cb6aa; border-color: #5cb6aa; } 
#page-key-point.keypoint-1.keypoint-list-col:nth-child(2) ol li { color: #6d9ba9; border-color: #6d9ba9; } 

#page-key-point.keypoint-2 { background-color: #565b5b; } 
#page-key-point.keypoint-2 .keypoint-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; max-width: 99rem; padding: 5rem; margin: 5rem auto auto; border-radius: 3rem; background-color: white; } 
#page-key-point.keypoint-2 .keypoint-box .keypoint-desc { display: grid; align-content: center; justify-content: start; width: 100%; } 
#page-key-point.keypoint-2 .keypoint-box .keypoint-title { color: #4a5655; line-height: 1.3; font-size: 3rem; margin-bottom: 4rem; font-weight: 300; } 
#page-key-point.keypoint-2 .keypoint-box .keypoint-text { color: #4a5655; line-height: 1.4; font-size: 2.2rem; } 
#page-key-point.keypoint-2 .keypoint-box .keypoint-text .highlight { color: #5eb0a4; } 


#page-key-point.keypoint-3 { background-color: #e5f4f2; } 
#page-key-point.keypoint-3 .keypoint-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; max-width: 99rem; padding: 5rem; margin: 5rem auto auto; border-radius: 3rem; background-color: white; } 
#page-key-point.keypoint-3 .keypoint-box figure img { border-radius: 2rem; } 
#page-key-point.keypoint-3 .keypoint-box .keypoint-desc { display: grid; align-content: center; justify-content: start; width: 100%; } 
#page-key-point.keypoint-3 .keypoint-box .keypoint-title { color: #4a5655; line-height: 1.3; font-size: 3rem; margin-bottom: 4rem; font-weight: 300; } 
#page-key-point.keypoint-3 .keypoint-box .keypoint-text { color: #4a5655; line-height: 1.4; font-size: 2.2rem; } 
#page-key-point.keypoint-3 .keypoint-box .keypoint-text .highlight { color: #5eb0a4; } 

/* ============== 온다리프팅 시너지 솔루션 ============== */
#page-solutions { text-align: center; color: #4a5655; } 
#page-solutions .sub-text { display: block; text-align: center; font-size: 2.4rem; font-weight: 800; } 
#page-solutions h2 { margin-block: 5rem 8rem; font-size: 4.8rem; text-align: center; line-height: 1.4; } 
#page-solutions h2 span { display: block; font-weight: 300; font-size: 4rem; } 


#page-solutions .solution-item { display: flex; align-items: center; justify-content: center; flex-direction: column; } 
#page-solutions .number { padding: 1.4rem 4rem; border-radius: 1.8rem; font-size: 2.8rem; font-weight: 800; text-align: center; color: white; background-color: #a7dbd4; } 
#page-solutions h3 { font-size: 2.8rem; margin-block: 4rem; } 
#page-solutions .solution-item-text { font-size: 2.4rem; line-height: 1.4; } 
#page-solutions .solution-list { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); max-width: 80rem; margin: 5rem auto auto; gap: 2rem; } 
#page-solutions .solution-list li { border-radius: 2.5rem; overflow: hidden; } 
#page-solutions .solution-list li h4 { width: 100%; padding: 3rem 1rem; font-weight: 800; font-size: 2.8rem; color: white; } 
#page-solutions .solution-list li h4.onda { background-color: #9ed8d0; } 
#page-solutions .solution-list li h4.ulthera { background-color: #ffb71c; } 
#page-solutions .solution-list li h4.a-bbae { background-color: black; } 
#page-solutions .solution-list::before { content: '+'; position: absolute; bottom: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; width: 5.4rem; height: 5.4rem; aspect-ratio: 1; font-weight: 500; font-size: 5.4rem; padding-bottom: .5rem; border-radius: 100%; color: white; background-color: black; z-index: 2; } 
#page-solutions .solution-item.solution-item-2 { margin-top: 15rem; } 
#page-solutions .solution-item a { position: relative; display: inline-block; margin-top: 5rem; font-size: 2rem; color: transparent; background-image: linear-gradient(
 90deg,
 #5eb0a4 50%,
 #4a5655 50%
 ); -webkit-background-clip: text; background-clip: text; background-size: 200% 100%; background-position: 100% 0; transition: background-position .5s cubic-bezier(.25, .8, .25, 1); will-change: background-position; } 

#page-solutions .solution-item a::after { content:""; position:absolute; left:0; bottom:-.4rem; width:100%; height:1px; background-image:linear-gradient(
 90deg,
 #5eb0a4 50%,
 #a5a5a5 50%
 ); background-size:200% 100%; background-position:100% 0; transition: background-position .5s cubic-bezier(.25, .8, .25, 1); will-change: background-position; } 


#page-solutions .solution-item a:hover,
#page-solutions .solution-item a:hover::after { background-position:0 0; } 
/* ============== 하단 배너 ============== */
#sub-bottom { position: relative; width: 100%; background-color: #d6eae3; } 
#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 #title-wrap::before { content: ''; } 
#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; color: #717776; } 
#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: 1024px){
 #onda { --cont-width: 70%; } 

 #page-treatment .box { width: 60%; } 
 #page-lineup .lineup-slider .swiper-slide { flex-direction: column; } 
 #page-lineup .lineup-slider .swiper-slide .image { flex: 1 1 100%; } 
 #page-lineup .lineup-slider .swiper-slide .content { flex: 1 1 100%; padding: 5rem 3rem; } 
 #page-lineup .lineup-slider .swiper-slide .content ul { gap: 1rem; padding: 0; margin-top: 3rem; } 
 }
@media (max-width: 768px){
 #onda { --cont-width: 100%; --cont-py: 10rem; } 
 #onda .box { padding-inline: 2rem; } 

 #onda #sub-top #sub-title p { margin-top: 2rem; } 


 #page-ab-onda h2.sub-item-title { font-size: 20vw; } 

 #page-onda-effect h2.sub-item-title .title-image { font-size: 12vw; } 

 #page-ab-onda .onda-equipment figcaption { font-size: 10vw; } 

 #page-ab-onda .sub-item h4 { font-size: 8vw; } 

 
 #page-key-point.keypoint-1 h3,
 #page-solutions h2,
 #page-key-point.keypoint-1 h3 span,
 #page-solutions h2 span { font-size: 6vw; } 

 
 #page-ab-onda .sub-item h3,
 #page-ab-onda .onda-equipment-desc { font-size: 5vw; margin-block: 4vw 3vw; } 

 #page-onda-effect h2.sub-item-title,
 .sub-content h2 span { font-size: 4.8vw; } 

 #page-onda-effect .sub-item-2 .sub-item-desc,
 #page-key-point h2,
 #page-key-point.keypoint-1 .keypoint-list-col h4,
 #page-solutions .solution-list li h4,
 #page-solutions .number,
 #page-onda-effect .sub-item-3 { font-size: 4.6vw; } 
 
 
 #page-ab-onda .ab-onda-desc,
 #page-onda-effect .sub-item-2 .onda-effect-box ul li b.onda-effect-title,
 #page-key-point.keypoint-1 .keypoint-list-col figcaption,
 #page-solutions .sub-text,
 #page-solutions .solution-item-text,
 #page-onda-effect .sub-item-1 .onda-effect-box ul li:not(:last-child) { font-size: 4.4vw; } 
 


 #page-onda-effect .onda-effect-box { padding: 5vw 5vw 8vw 5vw; grid-template-columns: auto; gap: 5vw; } 

 #page-onda-effect .sub-item-2 .onda-effect-box ul li { padding: 5vw 2.5vw; font-size: 4.2vw; } 
 #page-onda-effect .sub-item-2 .onda-effect-box ul li b.onda-effect-title { margin-bottom: 1vw; } 
 #page-onda-effect .sub-item-3 { padding: 5vw; } 

 #page-key-point.keypoint-1 h3,
 #page-solutions h2 { margin-block: 5vw 8vw; } 

 #page-key-point.keypoint-2 .keypoint-box .keypoint-title,
 #page-key-point.keypoint-3 .keypoint-box .keypoint-title,
 #page-solutions h3 { margin-bottom: 4vw; font-size: 5vw; text-align: center; } 
 

 #page-key-point h2 { padding: 4vw 10vw; } 

 #page-key-point.keypoint-1 .keypoint-list-col { border-radius: 6vw; } 
 #page-key-point.keypoint-1 .keypoint-list { grid-template-columns: auto; gap: 5vw; width: 85%; } 
 #page-key-point.keypoint-1 .keypoint-list-col h4 { padding: 6vw 1rem; } 
 /* 2 */
 #page-key-point.keypoint-1 .keypoint-list-col ol { font-size: 3.8vw; } 

 #page-key-point.keypoint-2 .keypoint-box .keypoint-text,
 #page-key-point.keypoint-3 .keypoint-box .keypoint-text { font-size: 4.4vw; text-align: center; } 

 #page-key-point.keypoint-2 .keypoint-box,
 #page-key-point.keypoint-3 .keypoint-box { padding: 5vw 5vw 8vw 5vw; grid-template-columns: auto; gap: 5vw; } 

 #page-solutions .solution-list li h4 { padding: 4vw 1vw; } 
 #page-solutions .solution-list::before { width: 10vw; height: auto; font-size: 7vw; bottom: 40%; } 
 #page-solutions .solution-item.solution-item-2 { margin-top: 15vw; } 

 #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 { margin-top: 2vw; margin-bottom: 6vw; font-size: 30vw; } 
 #sub-bottom .sub-title-group p { font-size: 5vw; text-align: center; } 

 /* #page-bna .sub-item figure figcaption { font-size: 2vw; } */
 #page-bna .sub-item ul li { grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(2, 1fr); } 
#page-bna .sub-item figure:first-of-type { border-top-left-radius: 2rem; border-top-right-radius: 2rem; border-bottom-left-radius: 0; } 
#page-bna .sub-item figure:last-of-type { border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; border-top-right-radius: 0; } 
#page-bna .sub-item figure:first-of-type figcaption { left: auto; right: 3%; } 
#page-bna .sub-item ul li::after { transform: translate(-50%, -50%) rotate(90deg); } 
 }