@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

#breast_fat_grafting { color: #000; letter-spacing: -0.05em; }
#breast_fat_grafting * { box-sizing: border-box; }
#breast_fat_grafting > div { position: relative; width: 100%; font-family: Pretendard; line-height: 1; }
#breast_fat_grafting .inner { position: relative; height: 100%; margin: 0 auto; }
#breast_fat_grafting img { display: block; width: 100%; height: 100%; object-fit: cover; }
#breast_fat_grafting strong { display: block; }





/* 메인 비주얼 */
#ms0503_01 { height: 1248px; background: url(/images/ms0503_01_bg.png?v=2611051445) no-repeat 50% 0; }
#ms0503_01 .inner { width: 990px; }

#ms0503_01 .cont_wrap { position: absolute; bottom: 135px; left: 0; display: flex; align-items: flex-end; width: 100%; height: 430px; }
#ms0503_01 .cont_wrap::before { content: 'SVF'; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); font-size: 316px; font-weight: 700; color: #fff; letter-spacing: 0; opacity: 0.7; }

#ms0503_01 .cont_wrap .cont_list { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: 13px; z-index: 2; }
#ms0503_01 .cont_wrap .cont_list li { display: inline-block; width: fit-content; padding: 18px 30px; font-size: 31px; font-weight: 500; color: #fff; white-space: nowrap; border-radius: 32px; background-color: #be8d66; }

#ms0503_01 .cont_wrap .txt_box { position: relative; width: 100%; color: #71411a; text-align: center; z-index: 2; }
#ms0503_01 .cont_wrap .txt_box strong { margin-bottom: 12px; font-size: 40px; font-weight: 700; }
#ms0503_01 .cont_wrap .txt_box h2 { margin-bottom: 34px; font-size: 92px; font-weight: 700; }
#ms0503_01 .cont_wrap .txt_box p { font-size: 31px; font-weight: 500; }





/* 타이틀 공통 */
.tit_wrap { display: flex; flex-direction: column; gap: 15px; }
.tit_wrap h3 { font-size: 44px; font-weight: 600; line-height: 1.15; color: #71411a; }
.tit_wrap p { font-size: 18px; line-height: 1.4; color: #737373; }





/* 한나이브 가슴지방이식 */
#ms0503_02 { height: 901px; background: url(/images/ms0503_02_bg.png?v=2611051445) no-repeat 50% 0; }
#ms0503_02 .inner { display: flex; flex-direction: column; justify-content: center; gap: 32px; width: 715px; }
#ms0503_02 .tit_wrap { justify-content: center; text-align: center; }

#ms0503_02 .cont_list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 13px; width: 100%; }
#ms0503_02 .cont_list li { position: relative; display: flex; flex-direction: column; gap: 10px; width: calc((100% - 13px) / 2); padding: 25px 30px; border-radius: 10px; background-color: #fff; }
#ms0503_02 .cont_list li:last-child { justify-content: center; gap: 25px; }
#ms0503_02 .cont_list li strong { font-size: 23px; font-weight: 600; line-height: 1.3; color: #71411a; }
#ms0503_02 .cont_list li p { font-size: 18px; line-height: 1.4; color: #737373; }

#ms0503_02 .cont_list li::after { content: ''; position: absolute; top: 50%; width: 22px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #be8d66; }
#ms0503_02 .cont_list li:nth-child(odd):after { left: 0; transform: translate(-50%, -50%); }
#ms0503_02 .cont_list li:nth-child(even):after { right: 0; transform: translate(50%, -50%); }





/* 한나이브의 지방분리 시스템 */
#ms0503_03 { display: flex; align-items: center; height: 400px; background-color: #e2cbb9; }
#ms0503_03 .tit_wrap { justify-content: center; width: 810px; height: 100%; padding-left: 110px; }
#ms0503_03 .tit_wrap p { color: inherit; }

#ms0503_03 .cont_list { flex: 1; display: flex; align-items: center; gap: 50px; height: 100%; }
#ms0503_03 .cont_list li { width: calc((100% - 50px) / 2); height: 100%; padding-top: 115px; }
#ms0503_03 .cont_list li:first-child { background: url(/images/ms0503_03_img_01.png?v=2611051445) center / cover no-repeat; }
#ms0503_03 .cont_list li:last-child { background: url(/images/ms0503_03_img_02.png?v=2611051445) center / cover no-repeat; }
#ms0503_03 .cont_list li strong { margin-bottom: 12px; font-size: 23px; font-weight: 600; color: #71411a; }
#ms0503_03 .cont_list li p { font-size: 18px; line-height: 1.4; }





/* 가슴지방이식이 필요한 경우 */
#ms0503_04 { height: 901px; background: url(/images/ms0503_04_bg.png?v=2611051445) no-repeat 50% 0; }
#ms0503_04 .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 1455px; }
#ms0503_04 .inner > strong { margin-bottom: 24px; font-size: 26px; font-weight: 600; color: #71411a; }
#ms0503_04 .inner > h2 { margin-bottom: 165px; font-size: 72px; font-weight: 300; }
#ms0503_04 .inner > h2 span { font-weight: 700; color: #71411a; }

#ms0503_04 .cont_list { display: flex; align-items: center; gap: 18px; width: 100%; }
#ms0503_04 .cont_list li { display: flex; justify-content: center; align-items: center; gap: 55px; width: calc((100% - 36px) / 3); padding: 35px 0; border-radius: 10px; background-color: #fff; box-shadow: 0 4px 21px 0 rgba(231, 204, 187, 0.81); }
#ms0503_04 .cont_list li .left { width: 180px; }
#ms0503_04 .cont_list li .left strong { margin-bottom: 11px; padding-left: 3px; font-size: 15px; font-weight: 300; color: #71411a; letter-spacing: 0.1em; }
#ms0503_04 .cont_list li .left h3 { position: relative; margin-bottom: 19px; font-size: 48px; font-weight: 600; color: #71411a; }
#ms0503_04 .cont_list li .left h3::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: calc(100% - 70px); height: 1px; background-color: #71411a; }
#ms0503_04 .cont_list li .left p { font-size: 25px; font-weight: 300; line-height: 1.3; }
#ms0503_04 .cont_list li .left p span { font-weight: 600; color: #71411a; }
#ms0503_04 .cont_list li .right .img_box { width: 170px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #ecdbcd; overflow: hidden; }





/* 가슴지방이식 시술 케이스 */
#ms0503_05 { padding: 105px 0 165px; background-color: #fff; }
#ms0503_05 .inner { display: flex; flex-direction: column; justify-content: center; gap: 50px; width: 1310px; }
#ms0503_05 .tit_wrap { justify-content: center; text-align: center; }

#ms0503_05 .cont_list { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; width: 100%; }
#ms0503_05 .cont_list li { width: calc((100% - 40px) / 3); border-radius: 25px; overflow: hidden; }
#ms0503_05 .cont_list li .top { width: 100%; padding: 22px 0; background-color: #71411a; }
#ms0503_05 .cont_list li .top strong { font-size: 30px; font-weight: 600; color: #fff; text-align: center; }
#ms0503_05 .cont_list li .bot { width: 100%; padding: 18px; background-color: #f2eadd; }
#ms0503_05 .cont_list li .bot .img_box { width: 100%; aspect-ratio: 385 / 239; border-radius: 25px; overflow: hidden; }
#ms0503_05 .cont_list li .bot p { margin-top: 20px; font-size: 30px; font-weight: 600; color: #71411a; text-align: center; }





/* 줄기세포 가슴지방이식 */
#ms0503_06 { height: 944px; background: url(/images/ms0503_06_bg.png?v=2611051445) no-repeat 50% 0; }
#ms0503_06 .inner { display: flex; flex-direction: column; justify-content: center; width: 1480px; }
#ms0503_06 .inner > strong { margin-bottom: 25px; padding-left: 15px; font-size: 26px; font-weight: 600; }
#ms0503_06 .inner > h3 { margin-bottom: 25px; padding-left: 15px; font-size: 48px; font-weight: 300; color: #71411a; }
#ms0503_06 .inner > h2 { margin-bottom: 40px; padding-left: 15px; font-size: 72px; font-weight: 700; color: #71411a; }

#ms0503_06 .cont_wrap { width: 920px; padding: 35px 0 35px 40px; border-radius: 25px; background: linear-gradient(90deg, #fff 0%, #fff 53%, rgba(255, 255, 255, 0.8) 66%, rgba(255, 255, 255, 0.4) 84%, rgba(255, 255, 255, 0) 100%); }
#ms0503_06 .cont_wrap strong { width: fit-content; margin-bottom: 27px; padding: 18px 30px; font-size: 31px; font-weight: 500; color: #fff; border-radius: 10px; background-color: #be8d66; }
#ms0503_06 .cont_wrap .cont_list { display: flex; flex-direction: column; gap: 17px; }
#ms0503_06 .cont_wrap .cont_list li { display: flex; align-items: center; gap: 14px; }
#ms0503_06 .cont_wrap .cont_list li span { display: flex; justify-content: center; align-items: center; width: 54px; aspect-ratio: 1 / 1; font-size: 22px; font-weight: 700; color: #71411a; border-radius: 50%; background-color: #e7ccbb; }
#ms0503_06 .cont_wrap .cont_list li p { font-size: 22px; letter-spacing: -0.025em; }





/* TGI 줄기세포 시스템 */
#ms0503_07 { padding: 90px 0 100px; background-color: #e2cbb9; }
#ms0503_07 .inner { display: flex; flex-direction: column; gap: 25px; width: 1750px; }

#ms0503_07 .cont_wrap { display: flex; align-items: stretch; width: 100%; border-radius: 25px; overflow: hidden; }
#ms0503_07 .cont_wrap > div { width: 50%; }
#ms0503_07 .cont_wrap .left { aspect-ratio: 876 / 505; }
#ms0503_07 .cont_wrap .right { display: flex; flex-direction: column; justify-content: center; padding-left: 65px; background-color: #fff; }
#ms0503_07 .cont_wrap .right > p { margin-bottom: 14px; font-size: 20px; color: #737373; }
#ms0503_07 .cont_wrap .right > h3 { margin-bottom: 47px; font-size: 48px; font-weight: 600; color: #71411a; }
#ms0503_07 .cont_wrap .right .cont_list { display: flex; flex-direction: column; gap: 15px; }
#ms0503_07 .cont_wrap .right .cont_list li { display: flex; align-items: center; gap: 13px; }
#ms0503_07 .cont_wrap .right .cont_list li .img_box { width: 82px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #e7ccbb; overflow: hidden; }
#ms0503_07 .cont_wrap .right .cont_list li .txt_box { display: flex; flex-direction: column; gap: 14px; }
#ms0503_07 .cont_wrap .right .cont_list li .txt_box strong { font-size: 26px; font-weight: 600; color: #71411a; }
#ms0503_07 .cont_wrap .right .cont_list li .txt_box p { font-size: 20px; color: #737373; }

#ms0503_07 .info_wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 19px; width: 100%; height: 155px; border-radius: 25px; background-color: #fff; }
#ms0503_07 .info_wrap strong { font-size: 31px; font-weight: 600; color: #71411a; }
#ms0503_07 .info_wrap p { font-size: 20px; color: #737373; }





/* 보형물 + 가슴지방이식 수술 */
#ms0503_08 { padding: 105px 0 150px; background-color: #7e5433; }
#ms0503_08 .inner { width: 1560px; }
#ms0503_08 .tit_wrap { justify-content: center; text-align: center; margin-bottom: 50px; }
#ms0503_08 .tit_wrap h3 { color: #fff; }
#ms0503_08 .tit_wrap p { color: #fff; }

#ms0503_08 .cont_list { display: flex; align-items: center; gap: 23px; }
#ms0503_08 .cont_list li { position: relative; width: calc((100% - 46px) / 3); aspect-ratio: 504 / 647; border-radius: 25px; background-color: #fff; overflow: hidden; }
#ms0503_08 .cont_list li .txt_box { position: absolute; top: 28px; left: 28px; display: flex; flex-direction: column; gap: 18px; }
#ms0503_08 .cont_list li .txt_box strong { position: relative; padding-left: 74px; font-size: 31px; font-weight: 700; color: #71411a; }
#ms0503_08 .cont_list li .txt_box strong::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 54px; aspect-ratio: 1 / 1; font-size: 22px; font-weight: 600; color: #fff; border-radius: 50%; background-color: #be8d66; }
#ms0503_08 .cont_list li:nth-child(1) .txt_box strong::before { content: '01'; }
#ms0503_08 .cont_list li:nth-child(2) .txt_box strong::before { content: '02'; }
#ms0503_08 .cont_list li:nth-child(3) .txt_box strong::before { content: '03'; }
#ms0503_08 .cont_list li .txt_box p { padding-left: 74px; font-size: 20px; line-height: 1.4; color: #737373; }

#ms0503_08 .info_wrap { display: flex; justify-content: center; align-items: center; gap: 19px; width: 100%; height: 80px; margin-top: 28px; border: 1px solid #e7ccbb; border-radius: 25px; }
#ms0503_08 .info_wrap .img_box { width: 40px; height: 18px; padding-right: 22px; border-right: 1px solid #e7ccbb; }
#ms0503_08 .info_wrap p { font-size: 20px; color: #fff; }








/* Q&A */
#ms0503_09 { padding: 125px 0; background-color: #faf7f2; }
#ms0503_09 .inner { width: 1000px; }
#ms0503_09 .inner > h2 { margin-bottom: 20px; font-size: 45px; font-weight: 700; color: #737373; }
#ms0503_09 .inner > h3 { margin-bottom: 25px; font-size: 35px; font-weight: 700; color: #71411a; }

#ms0503_09 .qna_list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
#ms0503_09 .qna_list li { display: flex; flex-direction: column; gap: 10px; width: 100%; }
#ms0503_09 .qna_list li .q_box { width: 100%; padding: 25px 35px; border-radius: 17px; background-color: #fff; cursor: pointer; }
#ms0503_09 .qna_list li .q_box p { position: relative; padding: 0 30px; font-size: 21px; font-weight: 500; }
#ms0503_09 .qna_list li .q_box p::before { content: 'Q'; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 24px; font-weight: 700; color: #be8d66; }
#ms0503_09 .qna_list li .q_box p::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(0); width: 16px; aspect-ratio: 16 / 10; background: url(/images/breast_qna_arrow.png?v=2611021215) center / cover no-repeat; transition: 0.3s; }

#ms0503_09 .qna_list li .a_box { display: none; padding: 20px 35px 20px 65px; background-color: transparent; }
#ms0503_09 .qna_list li .a_box p { font-size: 18px; font-weight: 300; line-height: 1.55; }

#ms0503_09 .qna_list li .q_box.on p::after { transform: translateY(-50%) rotate(180deg); transition: 0.3s; }