@charset "utf-8";
/* colors */
#elraviere2o { 
 --color-01: #ff847f;
 --color-02: #ffa1a1;
 --color-03: #fbefec;
 --color-04: #9dc6ff;
 --color-05: #7ba4dd;
 --color-06: #b9d6ff;
 --color-07: #877f7d;
 --color-08: #44464c;
} 


#elraviere2o .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 
#elraviere2o .text-img img { width: auto; height: 1em; } 

section:not(#sub-top) { position: relative; z-index: 1; } 
section:not(#sub-top) h2 { position: relative; z-index: 1; } 
section:not(#sub-top) :is(h2, h3, h4, h5, h6 ) { color: var(--color-08); } 
#breadcrumbs { z-index: 5 !important; }

#elraviere2o .content-img { width: 100%; height: auto; display: block; } 

#sub-title h1,
#sub-title p { color: #3f4247; } 
#sub-top #sub-title h1 { text-transform: uppercase; } 
#elraviere2o #sub-title strong::before { background-color: #f6d1cb; } 


#elraviere2o mark span { position: relative; z-index: 2; } 
#elraviere2o mark { position: relative; background: none; /* 브라우저 기본색 제거 */
 background-image: linear-gradient(#fbefec, #fbefec); background-repeat: no-repeat; /* 배경 높이 조절 */
 background-size: 100% 50%; /* ← 여기에서 세로 두께 변경 */
 background-position: 0 0.5rem; padding: 0.5rem; } 


#page-intro { padding-block: 15rem; background-color: white; } 
#page-intro .content-img { width: 50%; height: auto; display: block; margin: 5rem auto auto; border-radius: 3rem; overflow: hidden; } 
#page-intro h2 { text-align: center; } 
#page-intro h2 span { font-size: 2.6rem; } 
#page-intro h2 b { color: var(--color-02); } 
#page-intro small { display: block; margin: 4.2rem auto auto; text-align: center; } 
#page-intro small span { font-size: 2.2rem; font-weight: 400; color: var(--color-08); } 
#page-intro small b { color: var(--color-01); } 


#page-skin-core { padding-block: 15rem; background-color: var(--color-03); } 
#page-skin-core figure { position: relative; width: 50%; border-radius: 3rem; overflow: hidden; margin: 5rem auto auto; } 
#page-skin-core figure figcaption { position: absolute; bottom: 0; width: 100%; padding-block: 1.8rem; font-size: 1.8rem; text-align: center; color: white; background-color: rgba(68, 70, 76, 0.91); } 
#page-skin-core figure figcaption b { color: var(--color-04); } 
#page-skin-core h2 { text-align: center; } 
#page-skin-core h2 span { font-size: 2.6rem; color: var(--color-07); } 
#page-skin-core small { display: block; margin: 4.2rem auto auto; text-align: center; } 
#page-skin-core small span { font-size: 2rem; font-weight: 400; color: var(--color-08); line-height: 1.5; } 
#page-skin-core small b { color: var(--color-01); } 


#page-skin-restore { padding-block: 15rem; background-color: #fefafa; } 
#page-skin-restore h2 { text-align: center; } 
#page-skin-restore h2 span { font-size: 2.6rem; color: var(--color-07); } 
#page-skin-restore .skin-restore-group { position: relative; width: 20%; margin: 10rem auto auto; } 
#page-skin-restore .skin-restore-list { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); width: 100%; height: 100%; } 
#page-skin-restore .skin-restore-list li { display: flex; align-items: center; } 
#page-skin-restore .skin-restore-list li b { border-radius: 10rem; width: 100%; padding-block: 1.2rem; text-align: center; font-size: 1.6rem; color: white; font-weight: 800; background-color: var(--color-02); } 
#page-skin-restore .skin-restore-list li:nth-child(1) { grid-area: 1 / 2 / 2 / 3; transform: translateY(-6rem); } 
#page-skin-restore .skin-restore-list li:nth-child(2) { grid-area: 2 / 1 / 3 / 2; transform: translate(-10rem, -3rem); } 
#page-skin-restore .skin-restore-list li:nth-child(3) { grid-area: 2 / 3 / 3 / 4; transform: translate(10rem, -3rem); } 
#page-skin-restore .skin-restore-list li:nth-child(4) { grid-area: 4 / 1 / 5 / 2; transform: translate(-10rem, 3rem); } 
#page-skin-restore .skin-restore-list li:nth-child(5) { grid-area: 4 / 3 / 5 / 4; transform: translate(10rem, 3rem); } 
#page-skin-restore .skin-restore-list li:nth-child(6) { grid-area: 5 / 2 / 6 / 3; transform: translateY(6rem); } 
#page-skin-restore small { display: block; margin: 9.2rem auto auto; text-align: center; } 
#page-skin-restore small span { font-size: 2rem; font-weight: 400; color: var(--color-08); line-height: 1.5; } 
#page-skin-restore small b { color: var(--color-05); } 


#page-bna { padding-block: 15rem; background-color: var(--color-03); } 
#page-bna h2 { text-align: center; } 
#page-bna h2 span { font-size: 2.6rem; color: var(--color-07); } 
#page-bna h2 b { display: inline; } 
#page-bna h2 b strong { color: var(--color-01); display: inline; } 
#page-bna .bna-list { width: 40%; margin: 4rem auto auto; display: flex; justify-content: center; flex-direction: column; gap: 2rem; } 
#page-bna .bna-list .bna-title { width: 100%; margin-bottom: 0.5rem; padding: 1.8rem 1rem; text-align: center; font-size: 2rem; font-weight: 500; color: white; background-color: #292a2e; } 
#page-bna .bna-list .bna-title b { color: var(--color-04); font-weight: 800; } 
#page-bna .bna-list .bna-group { position: relative; } 
#page-bna .bna-list .bna-group .bna-images { display: flex; align-items: stretch; justify-content: center; } 
#page-bna .bna-list .bna-group .bna-images .content-img { position: relative; width: 50%; } 
#page-bna .bna-list .bna-group .bna-images .content-img:last-child::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; border: 4px solid var(--color-01); } 
#page-bna .bna-list .bna-group .date-caption { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: end; z-index: 1; color: white; font-size: 1.5rem; font-weight: 600; } 
#page-bna .bna-list .bna-group .date-caption span { padding: 1.4rem 1.8rem; } 
#page-bna .bna-list .bna-group .date-caption span:last-child { background-color: var(--color-01); padding: 1.2rem 1.6rem 1.4rem 1.8rem; } 


#page-durability { padding-block: 15rem; background-color: var(--color-08); } 
#page-durability h2 { text-align: center; color: white !important; } 
#page-durability h2 span { font-size: 2.6rem; color: rgba(255, 255, 255, 0.7); } 
#page-durability .image-tag { position: absolute; top: -2.5rem; right: -5rem; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 10.4rem; height: auto; aspect-ratio: 1; text-align: center; font-weight: 600; font-size: 1.8rem; line-height: 1.3; border-radius: 10rem; color: white; background-color: var(--color-04); box-shadow: -10px 5px 10px rgba(68, 70, 76, 0.26); } 
#page-durability .image-tag span { font-size: 2rem; } 
#page-durability .durability-list { position: relative; width: 40%; margin: 4rem auto auto; display: flex; justify-content: center; flex-direction: column; gap: 2rem; } 
#page-durability .durability-list .durability-title { width: 100%; margin-bottom: 0.5rem; padding: 1.8rem 1rem; text-align: center; font-size: 2rem; font-weight: 500; color: white; background-color: #292a2e; } 
#page-durability .durability-list .durability-title b { color: var(--color-04); font-weight: 800; } 
#page-durability .durability-list .durability-group { position: relative; } 
#page-durability .durability-list .durability-group .durability-images { position: relative; display: flex; align-items: stretch; justify-content: center; } 
#page-durability .durability-list .durability-group .durability-images::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; width: 3rem; height: auto; aspect-ratio: 1; border-radius: 50%; z-index: 2; background: url('/img/page/thermage/arrow-right-solid.svg') center center / contain no-repeat #1d1d1f; } 
#page-durability .durability-list .durability-group .durability-images .content-img { position: relative; width: 50%; } 
#page-durability .durability-list .durability-group .date-caption { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: end; z-index: 1; color: white; font-size: 1.5rem; font-weight: 600; } 
#page-durability .durability-list .durability-group .date-caption span { display: flex; align-items: center; justify-content: center; width: 100%; padding: 1.4rem; text-align: center; } 
#page-durability .durability-list .durability-group .date-caption span:nth-child(1) { color: var(--color-01); background-color: white; } 
#page-durability .durability-list .durability-group .date-caption span:nth-child(2) { color: white; background-color: var(--color-01); } 
#page-durability small:not(.image-tag) { display: block; margin: 4.2rem auto auto; text-align: center; } 
#page-durability small:not(.image-tag) span { font-size: 2rem; font-weight: 400; color: white; line-height: 1.5; } 
#page-durability small:not(.image-tag) b { color: var(--color-06); } 


#page-ab-elraviete2o { padding-block: 15rem; background-color: #ffa1a1; } 
#page-ab-elraviete2o h2 { text-align: center; color: white !important; } 
#page-ab-elraviete2o h2 span { font-size: 2.6rem; color: rgba(255, 255, 255, 0.8); } 
#page-ab-elraviete2o .ab-elraviete2o-list { width: 65%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; margin: 5rem auto auto; gap: 2rem; } 
#page-ab-elraviete2o .ab-elraviete2o-list li { border-radius: 2.5rem; background-color: white; overflow: hidden; padding: 2rem 2rem 3rem 2rem; display: flex; align-items: center; justify-content: center; flex-direction: column; } 
#page-ab-elraviete2o .ab-elraviete2o-list li i { display: flex; align-items: center; justify-content: center; width: 100%; padding: 2rem 0; border-radius: 1.7rem; background-color: #f4f9ff; } 
#page-ab-elraviete2o .ab-elraviete2o-list li i img { max-width: 7rem; } 
#page-ab-elraviete2o .ab-elraviete2o-list li strong { margin-top: 2rem; text-align: center; font-size: 2rem; color: #292a2e; } 
#page-ab-elraviete2o .ab-elraviete2o-list li span { margin-top: 1rem; text-align: center; font-size: 1.6rem; color: #666971; line-height: 1.5; font-weight: 400; } 
#page-ab-elraviete2o .ab-elraviete2o-list li span b { color: #292a2e; } 
#page-ab-elraviete2o small { display: block; margin: 4.2rem auto auto; text-align: center; } 
#page-ab-elraviete2o small span { font-size: 2rem; font-weight: 400; color: white; line-height: 1.5; } 
#page-ab-elraviete2o small b.icon-stars { position: relative; } 
#page-ab-elraviete2o small b.icon-stars::before { content: ''; position: absolute; left: -4rem; width: 3.5rem; height: 3.3rem; background-image: url('/img/page/elraviere2o/icon-star.svg'); background-repeat: no-repeat; background-size: contain; background-position: center center; } 


/* bottom-banner */

#elraviere2o #sub-bottom { background-color: #fafcfc;}
#elraviere2o #sub-bottom .sub-title-images picture.pc { max-width: 1920px; margin: 0 auto;}

#elraviere2o #sub-bottom .sub-title-group { width: 50%; } 
#elraviere2o #sub-bottom #sub-title { padding: 0; display: flex; justify-content: center; align-items: flex-start; width: 50%; text-align: center; } 
#elraviere2o #sub-bottom #sub-title p { font-size: 2.2rem; color: var(--color-07); } 
#elraviere2o #sub-bottom #sub-title p b { color: #292a2e; } 
#elraviere2o #sub-bottom #sub-title h1 { display: flex; align-items: center; flex-direction: column; gap: 0.5rem; margin: 4rem 0 0; font-size: 3.2rem; text-align: center; color: var(--color-01); } 
#elraviere2o #sub-bottom #sub-title h1 span { font-weight: 400; text-align: center; } 
#elraviere2o #sub-bottom .text-img img { width: auto; height: 2em; } 


/* FAQ */
#elraviere2o #sub-faq-latest { margin-top: 0; } 

@media (max-width: 1024px) { } 

@media (max-width: 768px){
  #page-intro ,
  #page-skin-core,
  #page-skin-restore,
  #page-bna,
  #page-durability ,
  #page-ab-elraviete2o { padding-block: 10rem; } 

  #elraviere2o #sub-title { padding: 12rem 4rem 7rem; }
  
  #page-intro .content-img,
  #page-skin-core figure,
  #page-ab-elraviete2o .ab-elraviete2o-list,
  #page-bna .bna-list,
  #page-durability .durability-list { margin: 3rem auto auto; } 

  #page-intro .content-img { width: 100%; } 
  #page-skin-core figure { width: 100%; } 
  #page-skin-restore .skin-restore-group { width: 55%; margin: 8rem auto auto; } 
  #page-skin-restore small { margin: 8.2rem auto auto; }
  #page-bna .bna-list { width: 100%; } 
  #page-durability .durability-list { width: 100%; } 
  #page-durability .image-tag { top: -3.5rem; right: -2rem; width: 8.5rem; } 
  #page-ab-elraviete2o .ab-elraviete2o-list { width: 80%; grid-template-columns: 1fr; grid-template-rows: auto; } 
  #page-ab-elraviete2o .ab-elraviete2o-list li i { padding: 4rem 0; } 


  #page-durability small:not(.image-tag),
  #page-intro small,
  #page-skin-core small,
  #page-ab-elraviete2o small { margin: 2.2rem auto auto; } 


  #elraviere2o #sub-bottom #sub-title { justify-content: flex-end; align-items: flex-end; padding: 5rem; width: 100%; text-align: right; } 
  #elraviere2o #sub-bottom #sub-title h1 { align-items: flex-end; text-align: right; } 
  #elraviere2o #sub-bottom .sub-title-group {width: 100%;}
}

@media (max-width: 370px){
 #page-intro small span { font-size: 2rem; } 
}