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

@font-face {
  font-family: "IvyJournal-Regular";
  src: url("../fonts/IvyJournal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IvyJournal-SemiBold";
  src: url("../fonts/IvyJournal-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* 전체 기본세팅 */
header, #suture { font-family: "pretendard", sans-serif; line-height: 1; }
header *, #suture * { box-sizing: border-box; }
header > div, #suture > div { position: relative; width: 100%; }
header img, #suture img { display: block; width: 100%; height: 100%; object-fit: cover; }
header strong, #suture strong { display: block; }

     



/* 헤더 */
header { position: fixed; top: 0; left: 0; width: 100%; height: 65px; border-bottom: 1px solid #EFE9DD; background: rgba(251, 248, 242, .86); backdrop-filter: saturate(150%) blur(16px); transition: 0.3s; z-index: 999; }
header .inner { display: flex; justify-content: space-between; align-items: center; width: 1200px; height: 100%; margin: 0 auto; }
header .inner h1 { font-size: 16px; font-weight: 700; color: #211A12; transition: 0.3s; }

header .inner .l_nav { display: flex; align-items: center; gap: 90px; } 
header .inner .l_nav li { position: relative; }
header .inner .l_nav li::after { content: ''; position: absolute; top: calc(100% + 3px); left: 0; width: 0; height: 1px; background-color: #4E473D; transition: 0.3s; }
header .inner .l_nav li:hover::after { width: 100%; transition: 0.3s; }
header .inner .l_nav li a { font-size: 15px; font-weight: 400; color: #4E473D; letter-spacing: -0.025em; transition: 0.3s; }

header .inner > a { position: relative; display: inline-block; padding: 17px 17px 17px 30px; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.025em; border-radius: 22px; background-color: rgba(0, 0, 0, 0.55); }
header .inner > a::after { content: ''; position: absolute; top: 50%; left: 17px; transform: translateY(-50%); width: 6.5px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #e4c293; }
header .inner > a.close::after { background-color: #ff0000; }

header.top { border-color: transparent; background-color: transparent; backdrop-filter: none; transition: 0.3s; }
header.top .inner h1 { color: #fff; transition: 0.3s; }
header.top .inner .l_nav li::after { background-color: #EDEBE8; transition: 0.3s; }
header.top .inner .l_nav li a { color: #EDEBE8; transition: 0.3s; }





/* 봉합센터 공통 */
#suture {
  --s_color_01: #2f261d;
  --s_color_02: #e8b138;
  --s_color_03: #e8cdaf;
  --s_color_04: #e4c293;
  --s_color_05: #ebebeb;
  --s_color_06: #f4e3b7;
  --s_color_07: #f6f2eb;
  --s_color_08: #e8b74c;
  --s_color_09: #f3e3bb;
  --s_color_10: #6e562a;
  --s_color_11: #d9a93c;
  --s_color_12: #8a8a8a;
  --s_color_13: #ebc25f;
  --s_color_14: #747474;
  --s_color_15: #a6a6a6;
  --s_color_16: #ffddb0;
  --s_color_17: #16110a;
}

#suture { background-color: #fff; }
#suture .inner { position: relative; width: 1545px; margin: 0 auto; }

#suture .tit_wrap { color: var(--s_color_01); letter-spacing: -0.025em; }
#suture .tit_wrap strong { display: flex; align-items: center; gap: 30px; margin-bottom: 45px; font-size: 16px; font-weight: 400; color: var(--s_color_02); letter-spacing: 0.1em; }
#suture .tit_wrap strong .line { display: block; width: 62px; height: 2px; background-color: var(--s_color_02); }
#suture .tit_wrap h5 { margin-bottom: 20px; font-size: 29px; font-weight: 400; }
#suture .tit_wrap h2 { font-size: 57px; font-weight: 700; }
#suture .tit_wrap p { margin-top: 42px; font-size: 19px; }





/* 메인비주얼 */
#ms0209_01 { display: flex; justify-content: center; align-items: center; height: 820px; background: url(/images/ms0209_01_bg.png?v=2607221100) center top / cover no-repeat; }
#ms0209_01 .txt_wrap { display: flex; flex-direction: column; align-items: center; color: #fff; letter-spacing: -0.025em; }
#ms0209_01 .txt_wrap figure { width: 112px; aspect-ratio: 112 / 88; margin-bottom: 40px; }
#ms0209_01 .txt_wrap > strong { margin-bottom: 28px; font-size: 33px; font-weight: 200; }
#ms0209_01 .txt_wrap > strong span { font-weight: 600; }
#ms0209_01 .txt_wrap > h2 { position: relative; margin-bottom: 57px; font-size: 92px; font-weight: 700; }
#ms0209_01 .txt_wrap > h2 span { position: absolute; top: 0; left: calc(100% + 8px); font-size: 30px; font-weight: 800; letter-spacing: normal; }
#ms0209_01 .txt_wrap > p { margin-bottom: 75px; font-size: 22px; font-weight: 600; }
#ms0209_01 .txt_wrap > p span { color: var(--s_color_03); }

#ms0209_01 .txt_wrap .time { display: flex; justify-content: center; align-items: center; gap: 11px; padding: 15px; border: 1px solid #fff; border-radius: 21px; }
#ms0209_01 .txt_wrap .time .dot { display: block; width: 8px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--s_color_04); }
#ms0209_01 .txt_wrap .time .dot.close { background-color: #ff0000; }
#ms0209_01 .txt_wrap .time p { font-size: 15px; }
#ms0209_01 .txt_wrap .time p span.b { font-weight: 700; }





/* 한나이브만의 특별함 */
#ms0209_02 { display: flex; align-items: stretch; }
#ms0209_02 > div { width: 50%; }
#ms0209_02 .img_wrap { min-width: 974px; padding: 85px 80px; }
#ms0209_02 .img_wrap figure { width: 100%; aspect-ratio: 804 / 546; }

#ms0209_02 .txt_wrap { min-width: 940px; border-left: 1px solid var(--s_color_05); }
#ms0209_02 .txt_wrap > div { width: 100%; color: #252728; letter-spacing: -0.025em; }
#ms0209_02 .txt_wrap .top { padding: 95px 80px 85px; border-bottom: 1px solid var(--s_color_05); }
#ms0209_02 .txt_wrap .top h2 { margin-bottom: 46px; font-family: "IvyJournal-Regular", sans-serif; font-size: 67px; font-weight: 400; color: var(--s_color_06); }
#ms0209_02 .txt_wrap .top strong { font-size: 24px; font-weight: 600; }

#ms0209_02 .txt_wrap .bot { padding: 90px 80px; }
#ms0209_02 .txt_wrap .bot p { margin-bottom: 45px; font-size: 19px; line-height: 1.6; }
#ms0209_02 .txt_wrap .bot strong { font-size: 19px; font-weight: 700; }





/* 다치셨다면 먼저 이렇게 해주세요 */
#ms0209_03 { background-color: var(--s_color_07); }
#ms0209_03 .inner { padding: 130px 0; }
#ms0209_03 .tit_wrap { margin-bottom: 55px; }

#ms0209_03 .cont_list { display: flex; align-items: center; gap: 20px; }
#ms0209_03 .cont_list li { display: flex; align-items: flex-end; width: calc((100% - 60px) / 4); aspect-ratio: 370 / 570; padding: 55px 30px; border-radius: 32px; background-color: gray; overflow: hidden; }
#ms0209_03 .cont_list li:nth-child(odd) { margin-top: 30px; } 
#ms0209_03 .cont_list li:nth-child(even) { margin-bottom: 30px; }

#ms0209_03 .cont_list li:nth-child(1) { background: url(/images/ms0209_03_list_01.png?v=2607221100) center / cover no-repeat; }
#ms0209_03 .cont_list li:nth-child(2) { background: url(/images/ms0209_03_list_02.png?v=2607221100) center / cover no-repeat; }
#ms0209_03 .cont_list li:nth-child(3) { background: url(/images/ms0209_03_list_03.png?v=2607221100) center / cover no-repeat; }
#ms0209_03 .cont_list li:nth-child(4) { background: url(/images/ms0209_03_list_04.png?v=2607221100) center / cover no-repeat; }

#ms0209_03 .cont_list li .txt_box { width: 100%; color: #fff; letter-spacing: -0.025em; }
#ms0209_03 .cont_list li .txt_box strong { margin-bottom: 22px; font-size: 16px; font-weight: 400; opacity: 0.7; }
#ms0209_03 .cont_list li .txt_box h3 { margin-bottom: 18px; font-size: 34px; font-weight: 700; }
#ms0209_03 .cont_list li .txt_box p { font-size: 16px; line-height: 1.5625; }





/* 한나이브는 기다림이 없습니다 */
#ms0209_04 {  }
#ms0209_04 .inner { padding: 125px 0; }
#ms0209_04 .tit_wrap { margin-bottom: 65px; }

#ms0209_04 .cont_list { position: relative; display: flex; align-items: center; gap: 60px; width: fit-content; margin: 0 auto; }
#ms0209_04 .cont_list::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: var(--s_color_08); }
#ms0209_04 .cont_list li { position: relative; display: flex; justify-content: center; align-items: center; width: 290px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--s_color_08); background-color: #fff; z-index: 2; }
#ms0209_04 .cont_list li .txt_box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 255px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px dashed rgba(232, 177, 56, 0.4); letter-spacing: -0.025em; }
#ms0209_04 .cont_list li .txt_box strong { margin-bottom: 14px; font-size: 20px; font-weight: 400; color: var(--s_color_08); letter-spacing: 0.1em; }
#ms0209_04 .cont_list li .txt_box .line { display: block; width: 30px; height: 1px; margin-bottom: 25px; background-color: var(--s_color_08); }
#ms0209_04 .cont_list li .txt_box h3 { margin-bottom: 19px; font-size: 47px; font-weight: 800; color: var(--s_color_01); }
#ms0209_04 .cont_list li:nth-child(1) .txt_box h3 span { font-size: 33px; }
#ms0209_04 .cont_list li:nth-child(2) .txt_box h3 span { font-size: 22px; }
#ms0209_04 .cont_list li:nth-child(3) .txt_box h3 span { font-size: 35px; }
#ms0209_04 .cont_list li .txt_box p { font-size: 18px; color: var(--s_color_01); }





/* 상처 봉합 종류 */
#ms0209_05 { background-color: var(--s_color_07); }
#ms0209_05 .inner { padding: 130px 0; }
#ms0209_05 .tit_wrap { margin-bottom: 75px; }

#ms0209_05 .cont_list { display: flex; align-items: center; gap: 16px; }
#ms0209_05 .cont_list li { width: calc((100% - 48px) / 4); aspect-ratio: 373 / 224; padding: 35px 28px; border-radius: 33px; background-color: #fff; overflow: hidden; }
#ms0209_05 .cont_list li .txt_box { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; letter-spacing: -0.025em; }
#ms0209_05 .cont_list li .txt_box strong { display: flex; justify-content: center; align-items: center; width: 45px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--s_color_09); }
#ms0209_05 .cont_list li .txt_box strong { font-family: "IvyJournal-SemiBold", sans-serif; font-size: 16px; font-weight: 600; color: var(--s_color_10); }
#ms0209_05 .cont_list li .txt_box h3 { font-size: 25px; font-weight: 700; color: var(--s_color_01); }
#ms0209_05 .cont_list li .txt_box p { font-size: 16px; line-height: 1.43; color: var(--s_color_01); }





/* 핵심 포인트 */
#ms0209_06 {  }
#ms0209_06 .inner { padding: 130px 0; }
#ms0209_06 .tit_wrap { margin-bottom: 75px; } 
#ms0209_06 .tit_wrap p { line-height: 1.6; }

#ms0209_06 .cont_list { display: flex; flex-wrap: wrap; align-items: center; gap: 35px; }
#ms0209_06 .cont_list li { width: calc((100% - 70px) / 3); border-radius: 22px; background-color: #fff; box-shadow: 4px 7px 9px rgba(104, 89, 64, 0.11); overflow: hidden; }
#ms0209_06 .cont_list li .img_box { width: 100%; aspect-ratio: 492 / 329; }

#ms0209_06 .cont_list li .txt_box { width: 100%; padding: 43px 35px; background-color: #fff; letter-spacing: -0.025em; }
#ms0209_06 .cont_list li .txt_box strong { margin-bottom: 25px; font-size: 16px; font-weight: 400; color: var(--s_color_11); }
#ms0209_06 .cont_list li .txt_box h3 { margin-bottom: 16px; font-size: 27px; font-weight: 700; color: var(--s_color_01); }
#ms0209_06 .cont_list li .txt_box p { font-size: 16px; color: var(--s_color_12); letter-spacing: -0.05em; }





/* 진료 프로세스 */
#ms0209_07 {  }
#ms0209_07 .inner { padding: 130px 0; }
#ms0209_07 .tit_wrap { margin-bottom: 85px; }

#ms0209_07 .cont_list { position: relative; display: flex; align-items: stretch; gap: 80px; margin-bottom: 95px; }
#ms0209_07 .cont_list::after { content: ''; position: absolute; top: 46px; left: 50%; transform: translate(-50%, -50%); width: 1290px; height: 0; border-top: 1px dashed var(--s_color_13); }
#ms0209_07 .cont_list li { position: relative; display: flex; flex-direction: column; align-items: center; width: calc((100% - 320px) / 5); letter-spacing: -0.025em; z-index: 2; }
#ms0209_07 .cont_list li strong { display: flex; justify-content: center; align-items: center; width: 92px; aspect-ratio: 1 / 1; margin-bottom: 27px; border-radius: 50%; background-color: var(--s_color_13); }
#ms0209_07 .cont_list li strong { font-size: 35px; font-weight: 700; color: #fff; }
#ms0209_07 .cont_list li h3 { margin-bottom: 36px; font-size: 26px; font-weight: 700; color: var(--s_color_01); }
#ms0209_07 .cont_list li p { font-size: 20px; color: var(--s_color_14); text-align: center; line-height: 1.55; }

#ms0209_07 .time_wrap { display: flex; align-items: stretch; width: 100%; color: var(--s_color_01); letter-spacing: -0.025em; border: 1px solid var(--s_color_08); border-radius: 16px; overflow: hidden; }
#ms0209_07 .time_wrap .left { width: 57%; padding: 20px 40px; }
#ms0209_07 .time_wrap .left li { display: flex; align-items: center; width: 100%; padding: 30px 0; border-bottom: 1px solid var(--s_color_08); }
#ms0209_07 .time_wrap .left li:last-child { border-bottom: none; }
#ms0209_07 .time_wrap .left li strong { width: 140px; font-size: 23px; font-weight: 700; }
#ms0209_07 .time_wrap .left li p { flex: 1; font-size: 23px; font-weight: 700; }
#ms0209_07 .time_wrap .left li p span { font-size: 18px; }

#ms0209_07 .time_wrap .right { display: flex; flex-direction: column; justify-content: center; width: 43%; padding-left: 40px; border-left: 1px solid var(--s_color_08); }
#ms0209_07 .time_wrap .right .img_box { width: 97px; aspect-ratio: 1 / 1; margin-bottom: 21px; border-radius: 50%; overflow: hidden; }
#ms0209_07 .time_wrap .right strong { margin-bottom: 18px; font-size: 26px; font-weight: 700; }
#ms0209_07 .time_wrap .right p { font-size: 26px; }





/* 비용ㆍ보험안내 */
#ms0209_08 { background-color: var(--s_color_07); }
#ms0209_08 .inner { padding: 130px 0; }
#ms0209_08 .tit_wrap { margin-bottom: 65px; }
#ms0209_08 .tit_wrap p { line-height: 1.6; }

#ms0209_08 .cont_list { display: flex; flex-wrap: wrap; align-items: center; gap: 35px; row-gap: 25px; }
#ms0209_08 .cont_list li { display: flex; align-items: center; gap: 40px; width: calc((100% - 35px) / 2); aspect-ratio: 755 / 240; padding: 0 50px; border-radius: 33px; background-color: #fff; overflow: hidden; }
#ms0209_08 .cont_list li .img_box { width: 114px; aspect-ratio: 1 / 1; border-radius: 26px; overflow: hidden; }

#ms0209_08 .cont_list li .txt_box { flex: 1; letter-spacing: -0.025em; }
#ms0209_08 .cont_list li .txt_box strong { margin-bottom: 12px; font-size: 14px; font-weight: 400; color: var(--s_color_02); letter-spacing: -0.05em; }
#ms0209_08 .cont_list li .txt_box h3 { margin-bottom: 32px; font-size: 28px; font-weight: 700; color: var(--s_color_01); }
#ms0209_08 .cont_list li .txt_box p { font-size: 16px; color: var(--s_color_01); line-height: 1.47; }





/* 치료 후 관리/주의사항 */
#ms0209_09 {  }
#ms0209_09 .inner { padding: 125px 0; }
#ms0209_09 .tit_wrap { margin-bottom: 45px; }
#ms0209_09 .tit_wrap p { line-height: 1.6; }
#ms0209_09 .tit_wrap p span { font-size: 14px; color: var(--s_color_15); }

#ms0209_09 .cont_list { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; row-gap: 17px; }
#ms0209_09 .cont_list li { display: flex; align-items: center; gap: 20px; width: calc((100% - 20px) / 2); aspect-ratio: 761 / 124; padding: 0 30px; letter-spacing: -0.025em; border: 1px solid var(--s_color_08); border-radius: 25px; overflow: hidden; }
#ms0209_09 .cont_list li .left { display: flex; justify-content: center; align-items: center; width: 46px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--s_color_13); overflow: hidden; }
#ms0209_09 .cont_list li .left strong { font-size: 19px; font-weight: 700; color: #fff; }

#ms0209_09 .cont_list li .right { flex: 1; }
#ms0209_09 .cont_list li .right h3 { margin-bottom: 21px; font-size: 22px; font-weight: 700; color: var(--s_color_01); }
#ms0209_09 .cont_list li .right p { font-size: 16px; color: var(--s_color_01); letter-spacing: -0.05em; }





/* 봉합이 필요하다면? */
#ms0209_10 { display: flex; justify-content: center; align-items: center; height: 755px; background: url(/images/ms0209_10_bg.png?v=2607221100) center top / cover no-repeat; }
#ms0209_10 .txt_wrap { display: flex; flex-direction: column; align-items: center; letter-spacing: -0.025em; }
#ms0209_10 .txt_wrap h2 { margin-bottom: 43px; font-size: 57px; font-weight: 700; color: #fff; text-align: center; line-height: 1.26; }
#ms0209_10 .txt_wrap strong { margin-bottom: 86px; font-size: 29px; font-weight: 400; color: var(--s_color_16); }

#ms0209_10 .txt_wrap .info_list { margin-bottom: 75px; font-size: 22px; font-weight: 600; }
#ms0209_10 .txt_wrap > p span { color: var(--s_color_03); }

#ms0209_10 .txt_wrap .info_list { display: flex; justify-content: center; align-items: center; gap: 19px; }
#ms0209_10 .txt_wrap .info_list li:not(.qr) a { display: inline-block; padding: 26px 33px; border: 1px solid #fff; border-radius: 36px; background-color: transparent; overflow: hidden; transition: 0.3s; }
#ms0209_10 .txt_wrap .info_list li:not(.qr) a p { font-size: 23px; font-weight: 600; color: #fff; transition: 0.3s; }

#ms0209_10 .txt_wrap .info_list li:not(.qr):hover a { background-color: #fff; transition: 0.3s; }
#ms0209_10 .txt_wrap .info_list li:not(.qr):hover a p { color: var(--s_color_17); transition: 0.3s; }

#ms0209_10 .txt_wrap .info_list li.qr a { display: inline-flex; align-items: center; gap: 10px; }
#ms0209_10 .txt_wrap .info_list li.qr a .img_box { width: 74px; aspect-ratio: 1 / 1; }
#ms0209_10 .txt_wrap .info_list li.qr a p { font-size: 23px; font-weight: 600; color: #fff; line-height: 1.17; }