
/* ============================================================
   ADD-ON 21   (sub46 : 얼굴소멸V술 / Face Line)
   ------------------------------------------------------------
   · HEAD/비주얼/제목/BEFORE·AFTER/체크원 등은 기존 컴포넌트 재사용
       (.sub_head .sub_box / .visual_box .visual_txt_btm /
        .label_en .sec_tit .sec_sub .sec_mark / .ba_bar .sec_cap /
        .circle_step)
   · 신규 : .fin(블루 곡선 섹션) / STEP 검정원 / .fat(지방 다이어그램)
   ============================================================ */

/* ---------- HEAD : 이미지 우측 블리드 ---------- */
@media (min-width:769px){
.sub46 .sub_head_img{right:calc(50% - 50vw);z-index:3;}
.sub46 .sub_copy:before{content:"";position:absolute;top:50%;right:calc(50% - 50vw);width:100vw;height:1px;background:rgba(255,255,255,.0);}
}

.sub46 .sec_visual{padding-top:calc(120 * var(--u));}

/* ---------- RESULT : 단일 BEFORE/AFTER ---------- */
.sec_result{padding:calc(120 * var(--u)) 0 calc(120 * var(--u));}
.ba_one{width:calc(700 * var(--u));max-width:100%;margin:max(40px, calc(90 * var(--u))) auto 0;}
.ba_one .ba_img img{width:100%;display:block;}

/* ============================================================
   .fin : 블루 곡선 섹션 (#얼굴소멸끝판왕)
   ============================================================ */
.fin{position:relative;margin-top:calc(120 * var(--u));padding:calc(140 * var(--u)) 0 calc(70 * var(--u));background:var(--blue);overflow:hidden;}
.fin:before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:150%;height:calc(360 * var(--u));bottom:22%;background:#fff;}
.fin .inner{position:relative;z-index:1;}
.fin_tit{text-align:center;font-size:max(30px, calc(60 * var(--u)));font-weight:800;letter-spacing:-0.03em;}
.fin_sub{margin-top:max(14px, calc(26 * var(--u)));text-align:center;font-size:max(14px, calc(22 * var(--u)));font-weight:600;letter-spacing:-0.03em;color:#3d3535;}

.fin_round{display:flex;justify-content:center;gap:calc(16 * var(--u));margin-top:max(30px, calc(50 * var(--u)));}
.fin_round>li{flex:0 0 calc(198 * var(--u));}
.fin_round img{width:100%;border-radius:calc(34 * var(--u));display:block;}

.fin_step{display:flex;justify-content:center;gap:calc(16 * var(--u));margin-top:max(24px, calc(40 * var(--u)));position:relative;}
.fin_step>li{flex:0 0 calc(322 * var(--u));}
.fin_step_c{display:flex;flex-direction:column;align-items:center;justify-content:center;width:calc(322 * var(--u));height:calc(322 * var(--u));padding:0 calc(30 * var(--u));border-radius:50%;background:#111;text-align:center;}
.fin_step_no{margin-bottom:max(12px, calc(24 * var(--u)));font-family:'Montserrat',sans-serif;font-size:max(15px, calc(24 * var(--u)));font-weight:600;letter-spacing:0.06em;color:#fff;}
.fin_step_c p{font-size:max(12px, calc(17 * var(--u)));line-height:1.7;letter-spacing:-0.03em;color:#e7e7e7;}

.fin_shot{display:flex;justify-content:center;gap:calc(16 * var(--u));margin-top:max(-24px, calc(-38 * var(--u)));}
.fin_shot>li{flex:0 0 calc(322 * var(--u));}
.fin_shot img{width:100%;border-radius:calc(20 * var(--u));display:block;}

/* ---------- .fin_point : POINT + 3D-CT ---------- */
.fin_point{position:relative;/*padding:calc(90 * var(--u)) 0 0;*/background:var(--blue);text-align:center;overflow:hidden;}
.fin_point:before{content:"";position:absolute;top:calc(-330 * var(--u));left:50%;transform:translateX(-50%);width:150%;height:calc(360 * var(--u));background:#fff;border-radius:0 0 50% 50%;display:none;}
.fin_point .inner{position:absolute;z-index:1;width:100%;padding-top:2%;}
.fin_point_tit{font-size:max(19px, calc(32 * var(--u)));font-weight:700;letter-spacing:-0.03em;color:#1f2a44;}
.fin_point_tx{margin-top:max(16px, calc(28 * var(--u)));font-size:max(13px, calc(20 * var(--u)));line-height:1.6;letter-spacing:-0.03em;color:#3a4a6a;}
.fin_ct{width:100vw;margin-left:calc(50% - 50vw);margin-top:calc(-160 * var(--u));}
.fin_ct img{width:100%;display:block;}

/* ============================================================
   .fat : 얼굴 지방 다이어그램
   ============================================================ */
.fat{padding:calc(120 * var(--u)) 0 calc(0 * var(--u));background:#EFEFF1;text-align:center;}
.fat .sec_txt{margin-top:max(20px, calc(44 * var(--u)));}
.fat_img{width:calc(1199 * var(--u));max-width:100%;margin:max(30px, calc(60 * var(--u))) auto 0;}
.fat_img img{width:100%;display:block;}

/* ============================================================
   SPECIAL : circle_step 재사용 (원 크게, 4단)
   ============================================================ */
.sec_special{padding:calc(120 * var(--u)) 0 calc(140 * var(--u));}
.sec_special .circle_step{gap:calc(40 * var(--u));}
.sec_special .circle_step>li{flex:0 0 calc(320 * var(--u));}
.sec_special .circle_step_ic{width:calc(275 * var(--u));height:calc(275 * var(--u));}
.sec_special .circle_step_ic b{font-size:max(16px, calc(23 * var(--u)));font-weight:500;line-height:1.35;}
.sec_special .circle_step_ic i{margin-bottom:max(12px, calc(24 * var(--u)));}
.sec_special .circle_step p{margin-top:max(16px, calc(34 * var(--u)));}

/* ============================================================
   ADD-ON 21 : responsive
   ============================================================ */
@media (max-width:1280px){
.sec_result{padding:100px 0;}
.fin{margin-top:0;padding:120px 0 100px;}
.fin:before{top:-160px;height:220px;}
.fin_tit{font-size:40px;}
.fin_step>li{flex:0 0 calc(25% - 15px);}
.fin_step_c{width:100%;aspect-ratio:1/1;height:auto;padding:0 14px;}
.fin_point{padding:100px 0 0;}
.fin_point:before{top:-160px;height:220px;}
.fat{padding:100px 0;}
.sec_special{padding:100px 0;}
}
@media (max-width:1024px){
.fin_round{flex-wrap:wrap;gap:16px;}
.fin_round>li{flex:0 0 calc(33.333% - 12px);}
.fin_step{flex-wrap:wrap;gap:20px 2%;}
.fin_step>li{flex:0 0 49%;}
.fin_shot{flex-wrap:wrap;gap:14px;}
.fin_shot>li{flex:0 0 calc(50% - 7px);}
.sec_special .circle_step>li{flex:0 0 calc(50% - 20px);}
.sec_special .circle_step_ic{width:220px;height:220px;}
}
@media (max-width:768px){
.sec_result{padding:70px 0;}
.sec_sub{font-size:14px;}
.sec_mark span{font-size:14px;margin-top:0;}
.ba_one{width:100%;}
.fin:before{display:none;}
.fin{padding:70px 0 60px;}
.fin_tit{font-size:30px;}
.fin_step{justify-content: space-between;gap:20px 1%;}
.fin_step>li{flex:0 0 49.5%;}
.fin_step_no{font-size:16px;}
.fin_step_c{padding:0 7px;}
.fin_step_c p{font-size:10px;}
.fin_point{padding:70px 0 0;}
.fin_point .inner{width:100%;padding-top:0;margin-top:-10%;}
.fin_ct img{width:170%;position:relative;left:50%;margin-left:-85%;max-width:none;}
.fat{padding:70px 0 0;}
.fat_img{width:100%;}
.sec_special{padding:70px 0;}
.sec_special .circle_step{gap:30px 6%;}
.sec_special .circle_step>li{flex:0 0 47%;}
.sec_special .circle_step_ic{width:160px;height:160px;}
}
