/* style-c3.css */



.c3{
  --ink:#111;
  --muted:#6b6f76;
  --pill:#e9ecef;
  --accent: #3f3f3f;
  background: #f7f7f7;
  /* padding: clamp(56px, 9vw, 100px) 0; */
  position: relative;
  min-height: 1130px;
  height: 100vh;
  /* display: flex; */
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}
body.has-qbar .c3{/* padding-bottom: max(100px, 14vh); *//* display: flex; */flex-direction: column;align-content: center;justify-content: center;align-items: center;} /* 하단 바와 겹침 방지 */

.c3__inner{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 38px;
  align-items: center;
  /* padding: 0 24px; */
  /* padding: 4rem 0 0; */
}

.c3__pill{
  height: 68px;               
  display: flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 16px;       
}

.c3__pill-shape{
  width: 170px;              
  height: 349.8px;             
  border-radius: 50%;
  border: 3px solid #9b9b9b;
  background: #ffffff;
  transform: scaleY(0.17);   
  transform-origin: center;
  display:flex;
  justify-content:center;
  align-items:center;
}

.c3__pill-shape span{
  transform: scaleY(5.8);     
  font-size: 26px;
  font-weight: 800;
  color: #a1a1a1;
  letter-spacing: -0.1;
}


.c3__title{
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing:-.02em;
  margin: 0 0 12px;
  word-spacing: -2.1px;
}

.c3__desc{
  font-size: clamp(15px, 1.6vw, 19.5px);
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: -0.1px;
}
.c3__left{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.c3__right{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}
.c3__photo{
  /* width:100%; */
  /* aspect-ratio: 16/10; */
  background:#e9edf2;
  /* border-radius: 14px; */
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.c3__photo img{
  width:100%; height:100%; object-fit: cover;
}

.c3__list{
  max-width: 1030px;
  margin: clamp(28px, 6vw, 48px) auto;
  padding: 0 24px;
  list-style: none;
  display: grid;
  gap: 26px;
}
.c3__list li{
  position: relative;
  padding-left: 58px;
  color:#2b2f34;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.9;
  --c3-icon: #3f3f3f;
  letter-spacing: -0.2px;
}

.c3__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width: 33px;
  height: 32px;
  background: url(./img/icons/check.svg) 2px 1px / 18px 18px no-repeat, linear-gradient(#3f3f3f, #3f3f3f) 2px 19px / 48px 2px no-repeat;
  filter: drop-shadow(0 0 0 var(--c3-icon));
  opacity:.95;
}

.c3__list li::after{
  content:"";
  position:absolute;
  left:2px;
  top: 0px;
  width: 35px;
  height: 25px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.9 9.9a1 1 0 0 1-1.414 0l-5.257-5.257a1 1 0 1 1 1.414-1.414l4.55 4.55 9.193-9.193a1 1 0 0 1 1.414 0z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.9 9.9a1 1 0 0 1-1.414 0l-5.257-5.257a1 1 0 1 1 1.414-1.414l4.55 4.55 9.193-9.193a1 1 0 0 1 1.414 0z'/></svg>") center/contain no-repeat;
  mask-size: 40px;
}

@media (max-width: 1024px){
  .c3__inner{ grid-template-columns: 1fr; gap: 24px; }
  .c3__right{ grid-template-rows: 220px 220px; }
}

@media(max-width:768px){
  .c3{
    min-height: 1220px;
    word-break: keep-all;
  }
  .c3__pill{
    height: 68px;               
    display: flex;
    justify-content:center;
    align-items:center;
    margin-bottom: 16px;       
  }
  
  .c3__pill-shape{
    width: 135px;
    height: 289.8px;
    border-radius: 50%;
    border: 3px solid #9b9b9b;
    background: #ffffff;
    transform: scaleY(0.17);
    transform-origin: center;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  .c3__pill-shape span{
    transform: scaleY(5.8);
    font-size: 20px;
    font-weight: 800;
    color: #a1a1a1;
    letter-spacing: -0.1;
  }
  .c3__list{
    padding: 0 30px;
  }
  .c3__list li::before{
    left: 7px;
  }
  .c3__list li::after{
    left: 9px;;
  }
}

@media (max-width: 640px){
  .c3__right{ grid-template-rows: 260px 260px; }
  .c3__list{ gap: 12px; }
}


@media(max-width:480px){
    .c3__pill-shape{
    width: 115px;
    height: 260.8px;
    border-radius: 50%;
    border: 3px solid #9b9b9b;
    background: #ffffff;
    transform: scaleY(0.17);
    transform-origin: center;
    display:flex;
    justify-content:center;
    align-items:center;
  }
    .c3__pill-shape span{
    transform: scaleY(5.8);
    font-size: 17px;
    font-weight: 800;
    color: #a1a1a1;
    letter-spacing: -0.1;
  }
  .c3__list li{
    font-size: clamp(14px, 1.5vw, 20px);
  }

  .c3__list li::before{
    content:"";
    position:absolute;
    left:12px;
    top:0.55em;
    width: 25px;
    height: 32px;
    background: url(./img/icons/check.svg) 2px 1px / 18px 18px no-repeat, linear-gradient(#3f3f3f, #3f3f3f) 2px 19px / 48px 2px no-repeat;
    filter: drop-shadow(0 0 0 var(--c3-icon));
    opacity:.95;
  }

  .c3__list li::after{
    content:"";
    position:absolute;
    left:2px;
    top: 0px;
    width: 35px;
    height: 25px;
    background-color: var(--accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.9 9.9a1 1 0 0 1-1.414 0l-5.257-5.257a1 1 0 1 1 1.414-1.414l4.55 4.55 9.193-9.193a1 1 0 0 1 1.414 0z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.9 9.9a1 1 0 0 1-1.414 0l-5.257-5.257a1 1 0 1 1 1.414-1.414l4.55 4.55 9.193-9.193a1 1 0 0 1 1.414 0z'/></svg>") center/contain no-repeat;
    mask-size: 30px;
  }

}

@media(max-width:360px){
  .c3 {
    min-height:990px !important ;
  }
  .c3__desc{
    font-size: clamp(12px, 1.6vw, 19.5px);
  }
  .c3__title{
    font-size: clamp(24px, 4.6vw, 52px);
    margin:0 0 2px;
  }
  .c3__pill-shape{
    width: 105px;
    height: 230.8px;
  }
  .c3__pill-shape span{
    font-size: 14px;
  }
  .c3__right{
    grid-template-rows:180px 180px;
  }
  .c3__list li{
    font-size:clamp(12px, 1.5vw, 20px);
  }
  .c3__list li::after{
    left: 9px;
  }
}