@charset "utf-8";
/*
 * File       : medical.css
 * Author     : SMART GEO
 * Guideline  : -
 * Update : 2024-04-30
 *
 * Dependency : 진료분야 스타일
 *
 * SUMMARY:
 * 01) asset import
 * 02) reset / 기존 CSS의 결합도가 높아 진료분야에서도 reset이 필요함.
 * 03) global style / 진료분야 공통 style
 * 04) 진료분야-하지정맥류-하지정맥류란?
 * 05) 진료분야-하지정맥류-하지정맥류의 원인
 * 06) 진료분야-하지정맥류-하지정맥류 진단
 * 07) 진료분야-하지정맥류-하지정맥류 치료법
 * 08) 진료분야-하지정맥류-수술적 방법 비교
 * 09) 진료분야-하지정맥류-병원슬로건
 * 10) 진료분야-하지정맥류-청맥병원의 차별화된 치료법
 * 11) 진료분야-하지정맥류-청맥병원의 다른 점
 * 12) 진료분야-하지정맥류-하지정맥류 자가 진단
 * 13) 진료분야-하지정맥류-자주하는 질문
 * 14) 진료분야-혈관질환-공통
 * 15) 진료분야-혈관질환-청맥의 원탑 검사
 * 16) 진료분야-혈관질환-정밀질환장비
 * 17) 진료분야-혈관질환-외과 전문의 치료 경험
 * 18) 진료분야-혈관질환-청맥의 원데이 치료
 * 19) 진료분야-혈관질환-검진 프로세스
 * 20) 진료분야-골반정맥류-01
 * 21) 진료분야-골반정맥류-02
 * 22) 진료분야-골반정맥류-04
 * 23) 진료분야-골반정맥류-05
 * 24) 진료분야-대사질환-대사질환이란?
 * 25) 진료분야-대사질환-대사질환 원인
 * 26) 진료분야-대사질환-대사질환 진단
 * 27) 진료분야-대사질환-원장님 소개
 * 28) 진료분야-대사질환-청맥병원의 검사법
 * 29) 진료분야-대사질환-청맥병원의 치료법
 * 30) 진료분야-대사질환-유튜브
 * 31) 진료분야-동맥혈관-공통
 * 32) 진료분야-동맥혈관-동맥혈관질환
 * 33) 진료분야-동맥혈관-동맥혈관질환의 원인
 * 34) 진료분야-동맥혈관-말초동맥폐쇄질환이란?
 * 35) 진료분야-동맥혈관-말초동맥폐쇄증 증상
 * 36) 진료분야-동맥혈관-말초동맥폐쇄증 진단
 * 37) 진료분야-동맥혈관-말초동맥폐쇄증 치료
 * 38) 진료분야-동맥혈관-청맥의 원스톱 치료
 * 39) 진료분야-동맥혈관-복부대동맥류란?
 * 40) 진료분야-동맥혈관-복부대동맥류 진단
 * 41) 진료분야-동맥혈관-복부대동맥류 치료
 * 42) 진료분야-동맥혈관-자주하는 질문 TOP5
 * 43) 진료분야-투석혈관-공통
 * 44) 진료분야-투석혈관-청맥의 투석혈관
 * 45) 진료분야-투석혈관-투석혈관의 조성
 * 46) 진료분야-투석혈관-투석혈관의 교정술
 * 47) 진료분야-투석혈관-투석혈관의 개통술
 * 48) 진료분야-투석혈관-청맥만의 차별점
 * 49) 진료분야-투석혈관-펌카테터 삽입 & 제거술
 * 50) 진료분야-투석혈관-투석혈관 관리
 * 51) 진료분야-투석혈관-자주하는 질문 TOP4
 */


/* **************************************** *
 * 01) asset import
 * **************************************** */
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');


/* **************************************** *
 * 02) reset
 * **************************************** */
.medicalField * { font-family: "Noto Sans KR", Sans-serif, serif !important; }
.medicalField h1, .medicalField h2, .medicalField h3, .medicalField h4, .medicalField p, .medicalField b { line-height: 1; }
.medicalField h1, .medicalField h2, .medicalField h3 { font-weight: 500; }
.medicalField h1 { font-size: 24px; }
.medicalField p { font-size: 24px; font-weight: 400; line-height: 130%; white-space: pre-line; }
.medicalField b { font-weight: 700; }
.medicalField a { text-decoration: none; color: inherit; }
.medicalField img, .medicalField video { width: 100%; object-fit: cover; -webkit-user-drag: none; outline: none; }
.medicalField button { background: unset; outline: unset; color: inherit; }
.medicalField button:focus, .medicalField button:active { outline: none; -webkit-tap-highlight-color : transparent !important; }


/* **************************************** *
 * 03) global style
 * **************************************** */
.medicalField { width: 100%; display: flex; flex-direction: column; align-items: center; color: #333333; }
.medicalField .m_layout { display: none !important; width: 100%; }
.medicalField section { padding: 100px 0; position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.medicalField section:first-child { margin-top: -80px; }
.medicalField section:nth-child(odd) { background-color: #F1F2F6; }
.medicalField section:nth-child(even) { background-color: #FFFFFF; }
.medicalField .content { max-width: 1550px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.medicalField .mainTitle { margin-bottom: 72px; width: 100%; display: flex; flex-direction: column; text-align: left; }
.medicalField .mainTitle .title { display: flex; align-items: flex-end; gap: 12px; }
.medicalField .mainTitle h2 { font-size: 16px; order: 2; }
.medicalField .mainTitle h1 { font-size: 40px; font-weight: 600; order: 1; }
.medicalField .mainTitle p { margin-top: 24px; word-break: keep-all; font-size: 24px; }
.medicalField .mainTitle .alignCenter h1 { margin-top: 8px; }
.medicalField .description { width: 100%; }
.medicalField .description .inner { padding: 0 80px; width: 100%; }
.medicalField .subTitle { margin: 120px 0; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.medicalField .subTitle h1 { font-size: 32px; }
.medicalField .subTitle.alignCenter { margin: 100px 0 60px; flex-direction: column; text-align: center; gap: 12px; }
.medicalField .subTitle.alignCenter h1 { width: 100%; }
.medicalField .detail { display: flex; width: 100%; }
.medicalField .detail .item { flex: 1; }
.medicalField .detail h1 { margin-top: 16px; font-size: 20px; }
.medicalField .detail p { margin-top: 24px; font-size: 20px; }
.medicalField .swiper { width: 100%; }
.medicalField .desktopWidth80 { padding: 0 10%; }


/* **************************************** *
 * 04) 진료분야-하지정맥류-하지정맥류란?
 * **************************************** */
@keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); animation-timing-function: ease-in; opacity: 0 } 20% { transform: perspective(400px) rotateX(-20deg); animation-timing-function: ease-in } 40% { transform: perspective(400px) rotateX(10deg); opacity: 1 } 60% { transform: perspective(400px) rotateX(-5deg); opacity: 1 } 80% { transform: perspective(400px); opacity: 1 } 100% { transform: perspective(400px); opacity: 1; } }
.varicoseVein { overflow: visible; }
.varicoseVein .inner { display: flex; justify-content: space-between; }
.varicoseVein .inner .bloodVesselWrapper { width: 100%; }
.varicoseVein .inner .bloodVesselWrapper .motion { display: flex; gap: 6%; }
.varicoseVein .inner .bloodVesselWrapper .motion .bloodVessel { width: 14%; display: flex; align-items: center; }
.varicoseVein .inner .bloodVesselWrapper .motion .legImage { flex: 1; display: flex; justify-content: center; align-items: center; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep { margin-top: 60px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: opacity .3s; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep h1 { padding-left: 14px; font-size: 24px; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step { margin-top: 24px; display: flex; gap: 24px; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item { flex: 1; padding: 16px; display: flex; justify-content: center; align-items: center; gap: 16px; border-radius: 16px; background-color: #FFFFFF; box-shadow: 5px 5px 10px rgba(11, 6, 74, .1); opacity: 0; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item span { display: flex; justify-content: center; align-items: center; width: 46px; aspect-ratio: 1 / 1; font-size: 18px; color: #FFFFFF; border-radius: 5px; box-shadow: 4px 4px 10px rgba(239, 122, 80, .5); }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item:nth-child(1) span { background-color: #FF9F7D; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item:nth-child(2) span { background-color: #FF8153; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item:nth-child(3) span { background-color: #F76A37; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item .introduce { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item .introduce h2 { font-size: 18px; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item .introduce p { font-size: 16px; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep.active { opacity: 1; transition-delay: .5s; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep.active .step .item { animation: flipInX 2s forwards; animation-delay: .5s; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep.active .step .item:nth-child(2) { animation-delay: 1.5s; }
.varicoseVein .inner .bloodVesselWrapper .damagedStep.active .step .item:nth-child(3) { animation-delay: 2.5s; }


/* **************************************** *
 * 05) 진료분야-하지정맥류-하지정맥류의 원인
 * **************************************** */
section.mainCause { padding: 150px 0; }
.mainCause .description { margin-top: 24px; display: flex; }
.mainCause .description .inner { display: grid; grid-template-columns: repeat(5, 1fr); }
.mainCause .description .inner .item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mainCause .description .inner .item:last-child::after { content: unset; }
.mainCause .description .inner .item img { max-width: 160px; width: 100%; aspect-ratio: 1 / 1; border-radius: 160px; box-shadow: 2px 2px 8px rgba(0, 0, 0, .3); }
.mainCause .description .inner .item h1 { margin-top: 28px; }
.mainCause .description .inner .item p { margin-top: 12px; font-size: 16px; }


/* **************************************** *
 * 06) 진료분야-하지정맥류-하지정맥류 진단
 * **************************************** */
@keyframes zoomInUp { 0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } 100% { opacity: 1 } }
@keyframes backInUp { 0% { transform: translateY(1200px) scale(.7); opacity: .7 } 80% { transform: translateY(0) scale(.7); opacity: .7 } to { transform: scale(1); opacity: 1 } }
.diagnosis .description .inner { display: flex; flex-direction: column; align-items: center; }
.diagnosis .description .inner h1 { font-size: 24px; color: #EF6134; }
.diagnosis .description .inner p { font-size: 18px; }
.diagnosis .description .inner .detail { display: flex; }
.diagnosis .description .inner .detail .item { flex: 1; }
.diagnosis .description .inner .addition { margin-top: 80px; padding: 24px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 80%; border-radius: 20px; text-align: center; background-color: #F9FAFD; box-shadow: 5px 5px 10px rgba(11, 6, 74, .1); opacity: 0; }
.diagnosis .description .inner .addition img { width: 60px; aspect-ratio: 1 / 1; }
.diagnosis .description .inner .addition.active { animation: backInUp 1.2s forwards; }


/* **************************************** *
 * 07) 진료분야-하지정맥류-하지정맥류 치료법
 * **************************************** */
.medicalTreatment .description { position: relative; display: flex; flex-direction: column; align-items: center; gap: 160px; }
.medicalTreatment .description .slideTab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.medicalTreatment .description .slideTab button { padding: 16px 0; display: flex; justify-content: center; align-items: center; background-color: #F4F6FB; font-size: 24px; color: #595959; font-weight: 500; }
.medicalTreatment .description .slideTab button.active { background-color: #EF6134; color: #FFFFFF; }
.medicalTreatment .description .medicalTreatmentSlide { margin-top: 60px; }
.medicalTreatment .description .item { cursor: pointer; }
.medicalTreatment .description .item h1, .medicalTreatment .description .item p { padding: 0 10px; text-align: left; }
.medicalTreatment .description .item h1 { margin-top: 16px; font-size: 20px; }
.medicalTreatment .description .item p { margin-top: 8px; font-size: 18px; }


/* **************************************** *
 * 08) 진료분야-하지정맥류-수술적 방법 비교
 * **************************************** */
.surgeryComparison .description .inner { display: flex; }
.surgeryComparison .description .inner .group { flex: 1; display: flex; }
.surgeryComparison .description .inner .group .item { display: flex; justify-content: space-between; }


/* **************************************** *
 * 09) 진료분야-하지정맥류-병원슬로건
 * **************************************** */
section.slogan { padding: 200px 0; }
.slogan { width: 100%; overflow: hidden; }
.slogan .messageBox { position: relative; padding: 60px 0; color: #FFFFFF; text-align: center; z-index: 2; }
.slogan .messageBox h1 { font-size: 48px; white-space: pre-line; line-height: 130%; }
.slogan .messageBox p { margin-top: 48px; font-size: 24px; line-height: 160%; }
.slogan .blend { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 1; }
.slogan .bg { background: url("https://cheongmac.blob.core.windows.net/medical/02_sloganBg.png") no-repeat 83% 100%/cover fixed; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }


/* **************************************** *
 * 10) 진료분야-하지정맥류-청맥병원의 차별화된 치료법
 * **************************************** */
.differentiatedTreatment { margin-bottom: -50px; }
.differentiatedTreatment .description { display: flex; flex-direction: column; align-items: center; }
.differentiatedTreatment .description .inner { display: flex; flex-direction: column; }
.differentiatedTreatment .description .article { margin-top: 120px; text-align: center; }
.differentiatedTreatment .description .article h1 { font-size: 32px; }
.differentiatedTreatment .description .article p { margin-top: 12px; font-size: 24px; }
.differentiatedTreatment .description .imageBox { flex: 1; display: flex; justify-content: space-between; gap: 14%; }
.differentiatedTreatment .description .imageBox .column:first-child { order: 2; }
.differentiatedTreatment .description .imageBox .column:last-child { display: flex; order: 1; }


/* **************************************** *
 * 11) 진료분야-하지정맥류-청맥병원의 다른 점
 * **************************************** */
.differenceOfCheongmac { padding-bottom: 80px; background-color: #F5F5F5; }
.differenceOfCheongmac .detail { width: 100%; display: flex; gap: 5%; }
.differenceOfCheongmac .detail .column { flex: 1; display: flex; flex-direction: column; gap: 80px; }
.differenceOfCheongmac .detail .column:nth-child(2) { margin-top: 172px; }
.differenceOfCheongmac .detail .column:nth-child(3) { margin-top: 52px; }
.differenceOfCheongmac .detail .item { flex: unset; }
.differenceOfCheongmac .detail .item h1 { margin-top: 16px; font-size: 20px; }
.differenceOfCheongmac .detail .item p { margin-top: 8px; font-size: 18px; }


/* **************************************** *
 * 12) 진료분야-하지정맥류-하지정맥류 자가 진단
 * **************************************** */
@keyframes rainDrop { 0% { transform: translate(-50%, -81%); } 80% { transform: translate(-50%, 60%); } 100% { transform: translate(-50%, 60%); } }
@keyframes thunderDrop { 0% { transform: translate(-50%, -74.8%); } 80% { transform: translate(-50%, 60%); } 100% { transform: translate(-50%, 60%); } }
.selfDiagnosis .mainTitle { text-align: center; }
.selfDiagnosis .detail { margin-top: 32px; justify-content: space-evenly; }
.selfDiagnosis .detail .column { position: relative; }
.selfDiagnosis .detail .column:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 28px;  }
.selfDiagnosis .detail .column:first-child button { padding-left: 32px; position: relative; text-align: left; font-size: 20px; }
.selfDiagnosis .detail .column:first-child button::before { content: ''; position: absolute; left: 0; top: 54%; transform: translateY(-50%); width: 28px; aspect-ratio: 1 / 1; background: url("https://cheongmac.blob.core.windows.net/medical/icon_checkOff.svg") no-repeat center center/cover; }
.selfDiagnosis .detail .column:first-child button.selfCheck { color: #FF7549; }
.selfDiagnosis .detail .column:first-child button.selfCheck::before { background: url("https://cheongmac.blob.core.windows.net/medical/icon_checkOn.svg") no-repeat center center/cover; }
.selfDiagnosis .detail .column:last-child { max-width: 46%; width: 100%; }
.selfDiagnosis .detail img { position: absolute; max-width: 66%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .6s; }
.selfDiagnosis .detail img:nth-child(1), .selfDiagnosis .detail img:nth-child(3), .selfDiagnosis .detail img:nth-child(4) { z-index: 1; }
.selfDiagnosis .detail img:nth-child(2), .selfDiagnosis .detail img:nth-child(3), .selfDiagnosis .detail img:nth-child(4) { opacity: 0; }
.selfDiagnosis .detail img:nth-child(2) { z-index: 2; }
.selfDiagnosis .detail .weatherRain.active { animation: rainDrop ease 1.6s infinite; }
.selfDiagnosis .detail .weatherThunder.active { animation: thunderDrop ease 1.6s infinite; }
.selfDiagnosis .addition { margin: -12px 0 28px; padding: 24px; width: 55%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; border-radius: 20px; text-align: center; background-color: #F9FAFD; box-shadow: 5px 5px 10px rgba(11, 6, 74, .1); }
.selfDiagnosis .addition img { width: 28px; aspect-ratio: 1 / 1; }
.selfDiagnosis .addition h1 { font-size: 22px; color: #EF6134; }



/* **************************************** *
 * 13) 진료분야-하지정맥류-자주하는 질문
 * **************************************** */
@keyframes flash { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
.qNa { position: relative; }
.qNa::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("https://cheongmac.blob.core.windows.net/medical/02_qNaBgCircle.png") no-repeat center center/cover; mix-blend-mode: multiply; }
.qNa .detail { z-index: 1 !important; }
.qNa .mainTitle { text-align: center; }
.qNa .description { position: relative; display: flex; justify-content: center; }
.qNa .description .content { flex-direction: row; gap: 4%; z-index: 1; }
.qNa .description .column { flex: 1; display: flex; justify-content: center; align-items: center; }
.qNa .description .column:first-child { position: relative; justify-content: center; }
.qNa .description .column:last-child { justify-content: flex-start; }
.qNa .description .mobileDevice { /* padding: 26px 20px; */ position: relative; max-width: 375px; width: 100%; aspect-ratio: 1 / 2.1; display: flex; flex-direction: column; border: 15px solid #FFFFFF; background-color: #AFC0CF; filter: drop-shadow( 10px 10px 40px rgba(0, 0, 0, 0.15) ); border-radius: 20px; }
.qNa .description .mobileDevice::before { content: ''; position: absolute ; bottom: 68px; left: -84px; width: 92px; aspect-ratio: 1 / 2.2076923077; background: url("https://cheongmac.blob.core.windows.net/medical/02_qNaDoctor.png") no-repeat center center/cover;  }
.qNa .description .mobileDevice::-webkit-scrollbar { display: none; }
.qNa .description .mobileDevice svg { cursor: not-allowed; }
.qNa .description .mobileDevice rect { fill: #333333; }
.qNa .description .statusBar { padding: 26px 20px 0; display: flex; justify-content: space-between; }
.qNa .description .statusBar .time { font-size: 15px; font-weight: 500; }
.qNa .description .statusBar .icons { display: flex; align-items: center; gap: 8px; }
.qNa .description .menuBar { margin: 8px 0; padding: 0 20px; display: flex; align-items: center; }
.qNa .description .menuBar .chevronLeft { flex: 1; }
.qNa .description .menuBar .interlocutor { flex: 2; text-align: center; }
.qNa .description .menuBar .interlocutor a { display: flex; flex-direction: column; gap: 4px; }
.qNa .description .menuBar .interlocutor a h1, .qNa .description .menuBar .interlocutor a p { margin-top: 0; text-align: inherit; }
.qNa .description .menuBar .interlocutor a h1 { font-size: 16px; }
.qNa .description .menuBar .interlocutor a p { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 12px; color: #555B62; }
.qNa .description .menuBar .menus { flex: 1; display: flex; justify-content: flex-end; gap: 20px; }
.qNa .description .messageArea { padding: 24px 20px 0; flex: 1; overflow-y: scroll; }
.qNa .description .messageArea::-webkit-scrollbar { display: none; }
.qNa .description .messageArea .date { margin-bottom: 20px; padding-top: 8px; display: flex; justify-content: center; }
.qNa .description .messageArea .date .info { padding: 5px 16px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: 100px; background-color: rgba(0, 0, 0, .15); font-size: 13px; color: #FFFFFF; cursor: not-allowed; }
.qNa .description .messageArea .message { margin-bottom: 20px; display: flex; gap: 6px; white-space: pre-line; }
.qNa .description .messageArea .message .thumbnail { flex-shrink: 0; width: 34px; height: 34px; aspect-ratio: 1 / 1; background: url("https://cheongmac.blob.core.windows.net/medical/02_qNaMessageThumbnail.png") no-repeat center center/cover; }
.qNa .description .messageArea .message .spinner { display: flex; gap: 5px; }
.qNa .description .messageArea .message .spinner span { width: 5px; height: 5px; border-radius: 5px; background-color: #555B62; animation: flash ease-in-out 1s infinite; }
.qNa .description .messageArea .message .spinner span:nth-child(2) { animation-delay: .2s; }
.qNa .description .messageArea .message .spinner span:nth-child(3) { animation-delay: .4s; }
.qNa .description .messageArea .message .item { flex: unset; padding: 0 10% 0 0; display: flex; flex-direction: column; gap: 6px; }
.qNa .description .messageArea .message .item .name { font-size: 11px; color: #555B62; }
.qNa .description .messageArea .message .item .txt { position: relative; padding: 16px; display: flex; flex-direction: column; background-color: #FFFFFF; border-radius: 10px; }
.qNa .description .messageArea .message .item .txt::before { content: ''; position: absolute; top: 4px; width: 16px; height: 13px; }
.qNa .description .messageArea .message .item .txt img { margin-bottom: 8px; }
.qNa .description .messageArea .message .item .txt p { margin: 0; font-size: 14px; }
.qNa .description .messageArea .message .item .txt .answer { display: flex; }
.qNa .description .messageArea .message .item .txt .answer a { color: #0000FF; }
.qNa .description .messageArea .message.q { flex-direction: row-reverse; }
.qNa .description .messageArea .message.q .item { padding: 0 4px 0 23%; align-items: flex-end; gap: 6px; }
.qNa .description .messageArea .message.q .thumbnail, .qNa .description .messageArea .message.q .item .name { display: none; }
.qNa .description .messageArea .message.q .item .txt { padding: 7px 16px; background-color: #FFE942; }
.qNa .description .messageArea .message.q .item .txt::before { right: -4px; background: url("https://cheongmac.blob.core.windows.net/medical/icon_messageLabelRight.svg") no-repeat center center/cover; }
.qNa .description .messageArea .message.q .item .txt p { text-align: right; }
.qNa .description .messageArea .message.a .item .txt::before { left: -4px; background: url("https://cheongmac.blob.core.windows.net/medical/icon_messageLabelLeft.svg") no-repeat center center/cover; }
.qNa .description .messageArea .initAnswer { display: none; }
.qNa .description .messageArea .initAnswer.view { display: flex; flex-direction: column; }
.qNa .description .qNaList.pc { display: flex; flex-direction: column; gap: 16px; }
.qNa .description .qNaList.pc li { position: relative; padding: 16px 60px 16px 40px; display: flex; align-items: center; gap: 12px; font-size: 20px; background-color: #FFFFFF; border-radius: 100px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); cursor: pointer; }
.qNa .description .qNaList.pc li:first-child::before { content: ''; position: absolute; bottom: 100%; right: 22%; width: 108px; aspect-ratio: 1 / 1.6315789474; background: url("https://cheongmac.blob.core.windows.net/medical/02_qNaSearchingWoman.png") no-repeat center center/cover; }
.qNa .description .qNaList.pc li:not([disabled]):hover { background-color: #FF7549; color: #FFFFFF; }
.qNa .description .qNaList.pc li:not([disabled])::after { position: absolute; top: -8px; right: 8px; width: 34px; height: 30px; background: url("https://cheongmac.blob.core.windows.net/medical/icon_tailCheckOff.svg") no-repeat center center/cover; }
.qNa .description .qNaList.pc li:not([disabled]):hover::after { content: ''; }
.qNa .description .qNaList.pc li[disabled] { background-color: #CDCED4; color: #818181; }
.qNa .description .qNaList.pc li p { margin: 0; }
.qNa .description .qNaList.m { display: none; }


/* **************************************** *
 * 14) 진료분야-혈관질환-공통
 * **************************************** */
.collapsedContentContainer { margin: 32px 0 0 0; position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; }
.collapsedContentContainer img { position: relative; width: 55%; }
.collapsedContentContainer img:first-child { z-index: 1; }
.collapsedContentContainer img:last-child { margin-top: 10%; position: relative; right: 10%; }


/* **************************************** *
 * 15) 진료분야-혈관질환-청맥의 원탑 검사
 * **************************************** */
.vascularOneTopExamination .description .vascularOneTopExaminationSlide { margin-top: 60px; }


/* **************************************** *
 * 16) 진료분야-혈관질환-정밀질환장비
 * **************************************** */
.vascularDisease .tab { margin-top: 60px; display: flex; justify-content: space-between; gap: 20px; }
.vascularDisease .tab button { flex: 1; padding: 16px 0; background-color: #E5E8F1; color: #595959; font-size: 24px; }
.vascularDisease .tab button.active { background-color: #EF6134; color: #FFFFFF; }
.vascularDisease .vascularDiseaseTitle { margin-top: 42px; display: flex; flex-direction: column; align-items: center; }
.vascularDisease .vascularDiseaseTitle h1 { font-size: 30px; }
.vascularDisease .vascularDiseaseTitle p { margin-top: 24px; font-size: 24px; }
.vascularDisease .blend { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); }
.vascularDisease .vascularDiseaseDetail { margin-top: 42px; flex: 1; }
.vascularDisease .vascularDiseaseDetail button { padding: 10px 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; align-items: center; border: 1px solid #FFFFFF; color: #FFFFFF; font-size: 24px; }
.vascularDisease .vascularDiseaseDetail .item { position: relative; display: none; cursor: pointer; }
.vascularDisease .vascularDiseaseDetail .item.active { display: block; }
.vascularDisease .vascularDiseaseDetailMobile { margin-top: 32px; }
.vascularDisease .vascularDiseaseDetailMobile button { padding: 10px 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; align-items: center; border: 1px solid #FFFFFF; color: #FFFFFF; font-size: 14px; }


/* **************************************** *
 * 17) 진료분야-혈관질환-외과 전문의 치료 경험
 * **************************************** */
.surgicalClinicalExperience .imgContents { display: flex; flex-direction: column; gap: 52px; }
.surgicalClinicalExperience .imgContents img { cursor: pointer; }


/* **************************************** *
 * 18) 진료분야-혈관질환-청맥의 원데이 치료
 * **************************************** */
.vascularOneDayTreatment .description .inner .vascularOneDayTreatmentSlide .item { filter: brightness(0.4); cursor: pointer; }
.vascularOneDayTreatment .description .inner .vascularOneDayTreatmentSlide .item.active { filter: unset; }
.vascularOneDayTreatment .description .inner .method { margin-top: 24px; }
.vascularOneDayTreatment .description .inner .method .item { position: relative; padding: 28px 52px; width: 100%; font-size: 22px; background-color: #EAEBF1; border-radius: 10px; display: none; }
.vascularOneDayTreatment .description .inner .method .item::before { content: ''; position: absolute; top: -20px; width: 40px; height: 40px; background: url("https://cheongmac.blob.core.windows.net/medical/03_vascularOneDayTreatmentTriangle.svg") no-repeat center center/cover; transform: rotate(180deg); }
.vascularOneDayTreatment .description .inner .method .item._1::before { left: 10%; }
.vascularOneDayTreatment .description .inner .method .item._2::before { left: 35.5%; }
.vascularOneDayTreatment .description .inner .method .item._3::before { right: 35.5%; }
.vascularOneDayTreatment .description .inner .method .item._4::before { right: 10%; }
.vascularOneDayTreatment .description .inner .method .item .title { font-weight: 600; }
.vascularOneDayTreatment .description .inner .method .item .line { position: relative; }
.vascularOneDayTreatment .description .inner .method .item .line::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #555B62; }
.vascularOneDayTreatment .description .inner .method .item.active { display: flex; gap: 24px; }
.vascularOneDayTreatment .description .inner .innerContents { margin-top: 72px; padding: 0 30px 12px; }
.vascularOneDayTreatment .description .inner .innerContents .steps { margin: 54px 0; position: relative; display: flex; justify-content: space-between; }
.vascularOneDayTreatment .description .inner .innerContents .steps::before, .vascularOneDayTreatment .description .inner .steps::after { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 2px;  }
.vascularOneDayTreatment .description .inner .innerContents .steps::before { background-color: #FF8153; z-index: 0; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 220px; width: 100%; aspect-ratio: 1 / 1; border-radius: 180px; border: 2px solid rgba(0, 0, 0, .025); background-color: #FFFFFF; box-shadow: 5px 5px 10px rgba(11, 6, 74, 0.1); z-index: 2; filter: grayscale(100%); cursor: pointer; transition: all .3s; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item .icon { margin-top: -5px; width: 42%; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item h2 { margin-top: 8px; font-size: 20px; color: #9D9D9D; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item span { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); max-width: 100px; width: 24%; aspect-ratio: 1 / 1; background: url("https://cheongmac.blob.core.windows.net/medical/03_vascularOneDayTreatmentStepCheck.svg") no-repeat center center/cover; opacity: 0; transition: all .3s; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item.active { border-color: #FF8153; filter: unset; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item.active h2 { color: #333333; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item.active span { opacity: 1; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item::after { content: ''; position: absolute; left: 50%; bottom: -80px; transform: translateX(-50%); width: 100%; height: 52px; text-align: center; font-size: 18px; color: #9D9D9D; transition: all .3s; line-height: 1.1; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item.active::after { color: #333333; }
.vascularOneDayTreatment .description .inner .innerContents .steps .item._1::after { content: '전문의 1:1 상담' }
.vascularOneDayTreatment .description .inner .innerContents .steps .item._2::after { content: '기초검사 및 혈액검사' }
.vascularOneDayTreatment .description .inner .innerContents .steps .item._3::after { content: '검사와 동시에 진단과 시술' }
.vascularOneDayTreatment .description .inner .innerContents .steps .item._4::after { content: '지속적인 추적 관리 시스템' }


/* **************************************** *
 * 19) 진료분야-혈관질환-검진 프로세스
 * **************************************** */
.atherosclerosis { margin-top: -100px; }


/* **************************************** *
 * 20) 진료분야-골반정맥류-01
 * **************************************** */
.pelvic { margin-top: -80px; position: relative; overflow: visible !important; }
.pelvic::before { content: ''; position: absolute; top: -400px; left: 0; width: 100%; height: 400px; background: #FFFFFF;  }
.pelvic .inner { display: flex; flex-direction: column; gap: 28px; }
.pelvic .twoChild { display: flex; gap: 80px; }
.pelvic .twoChild > div { flex: 1; }
.pelvic .twoChild .mainP { margin-top: 28px; font-weight: bold; font-size: 32px; }
.pelvic .twoChild .subP { margin-top: 20px; padding-top: 20px; border-top: 1px solid #AAAAAA; font-size: 24px; line-height: 160%; }
.pelvic .imageBox .mobileImage { display: none; }
.pelvic .notice { padding: 32px 24px; display: flex; justify-content: center; }
.pelvic .notice span { position: relative; font-family: "SUITE" !important; font-size: 25px; font-weight: 600; z-index: 1; }
.pelvic .notice span b { font-family: "SUITE" !important; color: #FF8153; }
.pelvic .notice span .firstLetter::before { content: ''; position: absolute; top: -18px; left: -22px; width: 34px; aspect-ratio: 1 / 0.8235294118; background:url("https://cheongmac.blob.core.windows.net/medical/04_01_quotes.svg") no-repeat center center/cover; z-index: -1; }
.pelvic .notice span .lastLetter::before { content: ''; position: absolute; bottom: -18px; right: -22px; transform: rotate(180deg); width: 34px; aspect-ratio: 1 / 0.8235294118; background:url("https://cheongmac.blob.core.windows.net/medical/04_01_quotes.svg") no-repeat center center/cover; z-index: -1; }


/* **************************************** *
 * 21) 진료분야-골반정맥류-02
 * **************************************** */
.symptom .description .inner { display: flex; flex-direction: column; align-items: center; }
.symptom .description .inner h1 { font-size: 24px; color: #EF6134; }
.symptom .description .inner p { font-size: 18px; }
.symptom .description .inner .items { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 60px; row-gap: 80px; }
.symptom .description .inner .items .item { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.symptom .description .inner .items .item .image { width: 100%; aspect-ratio: 1 / 1; }
.symptom .description .inner .items .item .itemTitle { margin-top: 20px; font-weight: bold; font-size: 26px; }
.symptom .description .inner .items .item .itemDesc { margin-top: 10px; font-size: 22px; line-height: 140%; text-align: center; }


/* **************************************** *
 * 22) 진료분야-골반정맥류-04
 * **************************************** */
.treatment .infoBox { position: relative; width: 100%; border-radius: 20px; line-height: 1; overflow: hidden; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10); }
.treatment .infoBox .titleBox { padding: 20px 0; display: flex; justify-content: center; align-items: center; background: #FF8153; color: #FFFFFF; }
.treatment .infoBox .titleBox .symbolBox { margin-right: 8px; position: relative; top: 3px; width: 40px; aspect-ratio: 1 / 0.85; }
.treatment .infoBox .titleBox .symbolBox img { background: url("https://cheongmac.blob.core.windows.net/medical/04_04_symbol.svg") no-repeat center center/cover; }
.treatment .infoBox .titleBox .main { font-weight: bold; font-size: 36px; }
.treatment .infoBox .titleBox .sub { position: relative; top: 2px; left: -5px; font-size: 24px; }
.treatment .infoBox .imageBox { padding: 40px 40px 60px; background: #FFFFFF; }
.treatment .infoBox .imageBox .imageBoxLayout { display: flex; background: #F1F2F6; border: 1px solid #D9D9D9; border-radius: 20px; overflow: hidden; }
.treatment .infoBox .imageBox .imageBoxLayout > div, .treatment .infoBox .imageBox .imageBoxLayout > ul { flex: 1; }
.treatment .infoBox .imageBox .imageBoxLayout > div { text-align: center; }
.treatment .infoBox .imageBox .imageBoxLayout > div img { width: 88%; height: 100%; }
.treatment .infoBox .imageBox .imageBoxLayout > ul { padding: 0 40px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.treatment .infoBox .imageBox .imageBoxLayout > ul li { padding: 20px; display: flex; align-items: center; gap: 12px; font-size: 20px; background: #FFFFFF; }
.treatment .infoBox .imageBox .imageBoxLayout > ul li span:first-child { width: 32px; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; border-radius: 32px; background: #FF8153; color: #FFFFFF; }
.treatment .infoBox .descBox { padding-top: 40px; white-space: pre-line; line-height: 150%; text-align: center; font-size: 28px; background: #FFFFFF; }
.treatment .mobileImageBox { display: none; }


/* **************************************** *
 * 23) 진료분야-골반정맥류-05
 * **************************************** */
.pelvicSlogan .messageBox { padding: 0 !important; }
.pelvicSlogan .bg { background: url("https://cheongmac.blob.core.windows.net/medical/04_05_01.png") no-repeat 83% 100%/cover fixed; }
.pelvicSlogan .items { margin-top: 80px; position: relative; max-width: 1550px; width: 100%; padding: 0 80px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 100px; z-index: 2; }
.pelvicSlogan .items .item { width: 100%; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.22); }
.pelvicSlogan .items .item > div { margin-top: -14px; }
.pelvicSlogan .items .item .icon { max-width: 120px; width: 100%; aspect-ratio: 1 / 1;  }
.pelvicSlogan .items .item .desc { margin-top: 4px; display: flex; flex-direction: column; align-items: center; font-size: 22px; color: #FFFFFF; line-height: 160%; }
.pelvicSlogan .items .item .desc span:last-child { font-weight: bold; font-size: 24px; }


/* **************************************** *
 * 24) 진료분야-대사질환-대사질환이란?
 * **************************************** */
.metabolicAbout { margin-top: -80px; position: relative; overflow: visible !important; line-height: 1; }
.metabolicAbout::before { content: ''; position: absolute; top: -400px; left: 0; width: 100vw; height: 400px; background: #FFFFFF;  }
.metabolicAbout .twoChild { display: flex; align-items: center; gap: 80px; }
.metabolicAbout .twoChild > div { flex: 1; }
.metabolicAbout .twoChild .mainP { margin-top: 28px; font-weight: bold; font-size: 32px; }
.metabolicAbout .twoChild .subP { margin-top: 20px; padding-top: 20px; border-top: 1px solid #AAAAAA; font-size: 24px; line-height: 160%; }


/* **************************************** *
 * 25) 진료분야-대사질환-대사질환 원인
 * **************************************** */
section.metabolicCause { padding: 150px 0; }
.metabolicCause .description { margin-top: 24px; display: flex; }
.metabolicCause .description .inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 120px; }
.metabolicCause .description .inner .item .titleBox { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.metabolicCause .description .inner .item .titleBox h1 { font-weight: bold; font-size: 24px; }
.metabolicCause .description .inner .item .titleBox p { text-align: center; font-size: 16px; }


/* **************************************** *
 * 26) 진료분야-대사질환-대사질환 진단
 * **************************************** */
.metabolicDiagnosis .contentBox { display: flex; align-items: center; gap: 100px; }
.metabolicDiagnosis .contentBox > div { flex: 1; }
.metabolicDiagnosis .contentBox .items { display: flex; flex-direction: column; gap: 28px; }
.metabolicDiagnosis .contentBox .items .item { width: 100%; display: flex; align-items: center; border-radius: 20px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); overflow: hidden; }
.metabolicDiagnosis .contentBox .items .item .itemHeader { padding: 26px 0 26px 30px; display: flex; align-items: center; gap: 6px; background: #FF8153; color: #FFFFFF; }
.metabolicDiagnosis .contentBox .items .item .itemHeader .icon { width: 60px; aspect-ratio: 1 / 1; }
.metabolicDiagnosis .contentBox .items .item .itemHeader .title { display: flex; flex-direction: column; line-height: 160%; font-size: 20px; }
.metabolicDiagnosis .contentBox .items .item .itemHeader .title span:first-of-type { font-size: 26px; }
.metabolicDiagnosis .contentBox .items .item .itemHeader .title.twoLetters { letter-spacing: 50px; }
.metabolicDiagnosis .contentBox .items .item .itemHeader .title.fourLetters { letter-spacing: 1px; }
.metabolicDiagnosis .contentBox .items .item .itemBody { flex: 1; padding: 0 30px; display: flex; flex-direction: column; justify-content: center; gap: 14px; font-size: 22px; }


/* **************************************** *
 * 27) 진료분야-대사질환-원장님 소개
 * **************************************** */
@font-face {
    font-family: 'Cafe24Shiningstar';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.metabolicDoctor { padding: 0 !important; position: relative; line-height: 1; }
.metabolicDoctor .innerBox { position: absolute; max-width: 1550px; padding: 0 80px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; z-index: 1; }
.metabolicDoctor .innerBox .messageBox { width: 76%; color: #FFFFFF; }
.metabolicDoctor .innerBox .messageBox .title { display: flex; flex-direction: column; gap: 16px; }
.metabolicDoctor .innerBox .messageBox .title .sub { position: relative; padding-left: 44px; font-family: "Cafe24Shiningstar" !important; font-size: 32px; }
.metabolicDoctor .innerBox .messageBox .title .sub::before { content: ''; position: absolute; top: 52%; left: 0; transform: translateY(-50%); width: 32px; aspect-ratio: 1 / 1; background: url("https://cheongmac.blob.core.windows.net/medical/page_metabolic_doctor_symbol.svg") no-repeat center center/cover; }
.metabolicDoctor .innerBox .messageBox .title .main { margin-top: 8px; font-size: 32px; }
.metabolicDoctor .innerBox .messageBox .title .main b { font-weight: bold; font-size: 64px; }
.metabolicDoctor .innerBox .messageBox .desc { margin-top: 40px; white-space: pre-line; line-height: 160%; font-size: 32px; }
.metabolicDoctor .innerBox .messageBox .keywords { margin-top: 80px; display: flex; gap: 20px; }
.metabolicDoctor .innerBox .messageBox .keywords li { padding: 12px 32px; border-radius: 100px; background: rgba(255, 129, 83, 0.5); font-family: "Cafe24Shiningstar" !important; font-size: 48px; }
.metabolicDoctor .innerBox .doctorImage { position: absolute; right: 40px; bottom: 0; width: auto; height: 80%; }
.metabolicDoctor .bgImageBox { position: relative; max-height: 800px; }
.metabolicDoctor .bgImageBox .desktopImage { display: block; }
.metabolicDoctor .bgImageBox .mobileImage { display: none; }


/* **************************************** *
 * 28) 진료분야-대사질환-청맥병원의 검사법
 * **************************************** */
.metabolicExamination .contentBox { line-height: 1; }
.metabolicExamination .contentBox .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.metabolicExamination .contentBox .items .item { width: 100%; display: flex; flex-direction: column; }
.metabolicExamination .contentBox .items .item .imageBox { width: 100%; aspect-ratio: 4 / 3; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); }
.metabolicExamination .contentBox .items .item .imageBox img { width: 100%; height: 100%; object-fit: cover; }
.metabolicExamination .contentBox .items .item .titleBox { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.metabolicExamination .contentBox .items .item .titleBox .main { line-height: 140%; font-weight: bold; font-size: 23px;}
.metabolicExamination .contentBox .items .item .titleBox .desc { line-height: 160%; font-size: 19px; }


/* **************************************** *
 * 29) 진료분야-대사질환-청맥병원의 치료법
 * **************************************** */
.metabolicManagement { line-height: 1.1; }
.metabolicManagement .contentBox .desktopContent { display: block; }
.metabolicManagement .contentBox .desktopContent .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px; }
.metabolicManagement .contentBox .desktopContent .items .item { position: relative; padding-bottom: 40px; width: 100%; display: flex; flex-direction: column; opacity: 0.4; transition: opacity 0.15s ease; }
.metabolicManagement .contentBox .desktopContent .items .item.active { opacity: 1; }
.metabolicManagement .contentBox .desktopContent .items .item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 24px solid #EDEDED;}
.metabolicManagement .contentBox .desktopContent .items .item .imageBox { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer }
.metabolicManagement .contentBox .desktopContent .items .item .imageBox img { width: 100%; height: 100%; object-fit: cover; }
.metabolicManagement .contentBox .desktopContent .items .item .titleBox { margin-top: 32px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.metabolicManagement .contentBox .desktopContent .items .item .titleBox .main { font-weight: bold; font-size: 22px;}
.metabolicManagement .contentBox .desktopContent .items .item .titleBox .desc { display: none; }
.metabolicManagement .contentBox .desktopDesc li { padding: 28px 40px; border-radius: 20px; font-size: 20px; background: #EDEDED; display: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.metabolicManagement .contentBox .desktopDesc li.active { display: block; }
.metabolicManagement .contentBox .desktopDesc li span { position: relative; display: inline-block; padding-left: 20px; line-height: 150%; }
.metabolicManagement .contentBox .desktopDesc li span::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: calc(100% + 2px); background: #EF6134; }
.metabolicManagement .contentBox .mobileContent { display: none; }


/* **************************************** *
 * 30) 진료분야-대사질환-유튜브
 * **************************************** */
@keyframes metabolicYoutubeQRCodeBounce { 0%, 3.33%, 8.88%, 16.66% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateX(-50%) translate3d(0, 0, 0); } 6.66%, 7.16% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translateX(-50%) translate3d(0, -30px, 0) scaleY(1.1); } 11.66% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translateX(-50%) translate3d(0, -15px, 0) scaleY(1.05); } 13.33% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateX(-50%) translate3d(0, 0, 0) scaleY(0.95); } 15% { transform: translateX(-50%) translate3d(0, -4px, 0) scaleY(1.02); } 16.66%, to, 100% { transform: translateX(-50%) translate3d(0, 0, 0); } }
.metabolicYoutube { line-height: 1; }
.metabolicYoutube .logo { text-align: center; }
.metabolicYoutube .logo img { width: 200px; }
.metabolicYoutube .message { text-align: center; }
.metabolicYoutube .contentBox .youtubeHeader { padding: 0 52px 0 26px; display: flex; justify-content: space-between; align-items: center; }
.metabolicYoutube .contentBox .youtubeHeader .profile { display: inline-flex; align-items: center; }
.metabolicYoutube .contentBox .youtubeHeader .profile .imageBox { margin-right: 24px; width: 160px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.metabolicYoutube .contentBox .youtubeHeader .profile .imageBox img { width: 100%; height: 100%; object-fit: cover; }
.metabolicYoutube .contentBox .youtubeHeader .profile .infoBox { display: flex; flex-direction: column; }
.metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .main { font-weight: bold; font-size: 36px; }
.metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .name { margin-top: 12px; font-weight: 400; font-size: 16px; color: #AAAAAA; }
.metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .summary { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 16px; color: #AAAAAA; }
.metabolicYoutube .contentBox .youtubeHeader .qrCode { position: relative; width: 120px; aspect-ratio: 1 / 1; }
.metabolicYoutube .contentBox .youtubeHeader .qrCode img { width: 100%; height: 100%; object-fit: cover; }
.metabolicYoutube .contentBox .youtubeHeader .qrCode span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 20px; padding: 10px 16px; white-space: nowrap; font-size: 19px; color: #FFFFFF; background: #FF8153; border-radius: 100px; animation: metabolicYoutubeQRCodeBounce 7s ease infinite; animation-delay: 3s; transform-origin: center bottom; }
.metabolicYoutube .contentBox .youtubeHeader .qrCode span::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotate(180deg); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #FF8153;}
.metabolicYoutube .contentBox .heroVideo { margin: 32px 0; padding: 52px 52px; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; border-color: #D1D1D1; }
.metabolicYoutube .contentBox .heroVideo .innerLayout { display: flex; align-items: center; gap: 56px; }
.metabolicYoutube .contentBox .heroVideo .innerLayout > div { flex: 1; }
.metabolicYoutube .contentBox .heroVideo .innerLayout .desc { display: flex; flex-direction: column; gap: 32px; }
.metabolicYoutube .contentBox .heroVideo .innerLayout .desc span, .metabolicYoutube .contentBox .heroVideo .innerLayout .desc span b { line-height: 150%; white-space: pre-line; font-size: 22px; }
.metabolicYoutube .contentBox .heroVideo .video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.metabolicYoutube .contentBox .heroVideo .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.metabolicYoutube .contentBox .items { padding: 0 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.metabolicYoutube .contentBox .items .item .imageBox { border-radius: 16px; overflow: hidden; transition: all 0.15s ease; }
.metabolicYoutube .contentBox .items .item .imageBox:hover { opacity: 0.75; transform: scale(0.987); }
.metabolicYoutube .contentBox .items .item .imageBox img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }


/* **************************************** *
 * 31) 진료분야-동맥혈관-공통
 * **************************************** */
.arteriopathy .desktopObject { display: block; }
.arteriopathy .mobileObject { display: none; }
.arteriopathy .notice { margin: 52px auto 0; padding: 24px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; width: 80%; border-radius: 20px; background-color: #F9FAFD; box-shadow: 5px 5px 10px rgba(11, 6, 74, .1); opacity: 0; }
.arteriopathy .notice.active { animation: backInUp 1s forwards; }
.arteriopathy .notice img { width: 60px; aspect-ratio: 1 / 1; }
.arteriopathy .notice p { padding: 0 28px; text-align: center; line-height: 160%; font-size: 24px; }


/* **************************************** *
 * 32) 진료분야-동맥혈관-동맥혈관질환
 * **************************************** */
.arteriopathyOverview { margin-top: -80px; position: relative; overflow: visible !important; }
.arteriopathyOverview::before { content: ''; position: absolute; top: -400px; left: 0; width: 100vw; height: 400px; background: #FFFFFF;  }
.arteriopathyOverview .images, .arteriopathyOverview .symptoms { display: flex; gap: 80px; }
.arteriopathyOverview .images > div, .arteriopathyOverview .symptoms > div { flex: 1; }
.arteriopathyOverview .symptoms { margin-top: 52px; }
.arteriopathyOverview .symptoms > div { border-radius: 16px; border: 2px solid #FF8153; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); overflow: hidden; transition: all 0.15s ease; }
.arteriopathyOverview .symptoms > div:hover { transform: scale(0.98); opacity: 0.75; }
.arteriopathyOverview .symptoms .title, .arteriopathyOverview .symptoms .desc { display: flex; justify-content: center; align-items: center; }
.arteriopathyOverview .symptoms .title { padding: 0 20px; background: #FF8153; }
.arteriopathyOverview .symptoms .title span { display: inline-block; padding: 20px 0; line-height: 150%; text-align: center; font-weight: bold; font-size: 26px; color: #FFFFFF; }
.arteriopathyOverview .symptoms .title span br { display: none; }
.arteriopathyOverview .symptoms .desc { padding: 0 20px; background: #FFFFFF; }
.arteriopathyOverview .symptoms .desc span { padding: 24px 0; line-height: 140%; text-align: center; font-size: 24px; }
.arteriopathyOverview .notice { background: #F6F7FD; }


/* **************************************** *
 * 33) 진료분야-동맥혈관-동맥혈관질환의 원인
 * **************************************** */
.arteriopathyCause .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 52px; }
.arteriopathyCause .items .item { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.arteriopathyCause .items .item img { max-width: 216px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); }
.arteriopathyCause .items .item span { font-weight: bold; font-size: 24px; }


/* **************************************** *
 * 34) 진료분야-동맥혈관-말초동맥폐쇄질환이란?
 * **************************************** */
.arteriopathyPAOD .images, .arteriopathyPAOD .symptoms { display: flex; gap: 80px; }
.arteriopathyPAOD .images > div, .arteriopathyPAOD .symptoms > div { flex: 1; }
.arteriopathyPAOD .message { margin-top: 72px; padding: 32px 24px; display: flex; justify-content: center; }
.arteriopathyPAOD .message span { position: relative; font-family: "SUITE" !important; font-size: 25px; font-weight: 600; z-index: 1; }
.arteriopathyPAOD .message span b { font-family: "SUITE" !important; color: #FF8153; }
.arteriopathyPAOD .message span .firstLetter::before { content: ''; position: absolute; top: -18px; left: -22px; width: 34px; aspect-ratio: 1 / 0.8235294118; background:url("https://cheongmac.blob.core.windows.net/medical/04_01_quotes.svg") no-repeat center center/cover; z-index: -1; }
.arteriopathyPAOD .message span .lastLetter::before { content: ''; position: absolute; bottom: -18px; right: -22px; transform: rotate(180deg); width: 34px; aspect-ratio: 1 / 0.8235294118; background:url("https://cheongmac.blob.core.windows.net/medical/04_01_quotes.svg") no-repeat center center/cover; z-index: -1; }
.arteriopathyPAOD .items { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.arteriopathyPAOD .items .item { padding: 16px; border: 2px solid #DEDEDE; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); transition: opacity 0.15s ease; }
.arteriopathyPAOD .items .item.active { border-color: #EF6134; }
.arteriopathyPAOD .items .item .thumbnail { position: relative; }
.arteriopathyPAOD .items .item span { display: inline-block; margin: 26px 0 15px; font-weight: bold; font-size: 26px; }


/* **************************************** *
 * 35) 진료분야-동맥혈관-말초동맥폐쇄증 증상
 * **************************************** */
.arteriopathySymptom { line-height: 1; }
.arteriopathySymptom .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.arteriopathySymptom .item { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.arteriopathySymptom .item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); }
.arteriopathySymptom .item span { display: inline-block; font-weight: bold; font-size: 24px; }
.arteriopathySymptom .addition { background: #FFFFFF; }
.arteriopathySymptom .selfDiagnosis { margin-top: 56px; }
.arteriopathySymptom .selfDiagnosis .mainTitle { margin-bottom: 0; }
.arteriopathySymptom .selfDiagnosis p { margin-top: 60px; font-weight: bold; font-size: 30px; }
.arteriopathySymptom .selfDiagnosis p b { position: relative; color: #EF6134; }
.arteriopathySymptom .selfDiagnosis p b::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 6px; aspect-ratio: 1 / 1; border-radius: 50%; background: #EF6134; }
.arteriopathySymptom .selfDiagnosis p br { display: none; }
.arteriopathySymptom .selfDiagnosis .addition { margin: 32px auto 0; }


/* **************************************** *
 * 36) 진료분야-동맥혈관-말초동맥폐쇄증 진단
 * **************************************** */
.arteriopathyDiagnosis { line-height: 1; }
.arteriopathyDiagnosis .items { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 42px; }
.arteriopathyDiagnosis .item h1 { margin-top: 16px; padding-left: 2px; font-weight: bold; font-size: 28px; }
.arteriopathyDiagnosis .item p { margin-top: 12px; padding-left: 2px; font-size: 24px; }
.arteriopathyDiagnosis .notice { background: #F6F7FD; }

/* **************************************** *
* 37) 진료분야-동맥혈관-말초동맥폐쇄증 치료
* **************************************** */
.arteriopathyTherapy { line-height: 1; }
.arteriopathyTherapy .navs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.arteriopathyTherapy .navs button { padding: 16px; font-size: 24px; border-radius: 12px; background: #FFFFFF; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); }
.arteriopathyTherapy .navs button.active { background: #EF6134; color: #FFFFFF; }
.arteriopathyTherapy .arteriopathyTherapySwiper { margin-top: 40px; }
.arteriopathyTherapy .arteriopathyTherapySwiper .swiper-slide { opacity: 0.7; height: auto; }
.arteriopathyTherapy .arteriopathyTherapySwiper .swiper-slide-active { opacity: 1; }
.arteriopathyTherapy .item { cursor: pointer; }
.arteriopathyTherapy .item .thumbnail { position: relative; }
.arteriopathyTherapy .item h1 { margin-top: 20px; padding: 0 12px; font-weight: bold; font-size: 26px; }
.arteriopathyTherapy .item p { margin-top: 8px; padding: 0 12px; line-height: 150%; font-size: 24px; }


/* **************************************** *
* 38) 진료분야-동맥혈관-청맥의 원스톱 치료
* **************************************** */
.arteriopathyTreatment { line-height: 1; }
.arteriopathyTreatment .steps { display: none; }
.arteriopathyTreatment .items { display: flex; gap: 8px; }
.arteriopathyTreatment .item { flex: 1; padding: 24px; height: auto; border-radius: 16px; border: 2px solid #DEDEDE; background: #FFFFFF; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); }
.arteriopathyTreatment .item img { filter: grayscale(1); opacity: 0.6; }
.arteriopathyTreatment .item h1 { margin-top: 16px; padding: 16px 12px; background: #DEDEDE; border-radius: 12px; font-weight: bold; text-align: center; font-size: 24px; color: rgba(51, 51, 51, 0.33); }
.arteriopathyTreatment .item p { margin-top: 16px; line-height: 150%; font-size: 22px; }
.arteriopathyTreatment .item.active { border-color: #EF6134; }
.arteriopathyTreatment .item.active img { filter: unset; opacity: 1; }
.arteriopathyTreatment .item.active h1 { background: #FF8153; color: #FFFFFF; }
.arteriopathyTreatment .arrow { align-self: center; width: 86px; aspect-ratio: 1 / 1; filter: grayscale(1); opacity: 0.5; }
.arteriopathyTreatment .arrow.active { filter: unset; opacity: 1; }
.arteriopathyTreatment .arteriopathyTreatmentSwiper { width: 100%; }


/* **************************************** *
* 39) 진료분야-동맥혈관-복부대동맥류란?
* **************************************** */
.arteriopathyAortic { line-height: 1; }
.arteriopathyAortic .images { display: flex; gap: 80px; }
.arteriopathyAortic .images > div { flex: 1; }
.arteriopathyAortic .steps { margin-top: 32px; display: flex; gap: 20px; }
.arteriopathyAortic .step { flex: 1; padding: 16px 10px; display: flex; justify-content: center; align-items: center; gap: 10px; border-radius: 10px; background: #FFFFFF; }
.arteriopathyAortic .step:nth-of-type(1) { opacity: 0; }
.arteriopathyAortic .step:nth-of-type(2) { opacity: 0; }
.arteriopathyAortic .step:nth-of-type(3) { opacity: 0; }
.arteriopathyAortic .step:nth-of-type(4) { opacity: 0; }
.arteriopathyAortic .steps.active .step { animation: flipInX 0.75s forwards; }
.arteriopathyAortic .steps.active .step:nth-of-type(1) { animation-delay: .3s; }
.arteriopathyAortic .steps.active .step:nth-of-type(2) { animation-delay: .6s; }
.arteriopathyAortic .steps.active .step:nth-of-type(3) { animation-delay: .9s; }
.arteriopathyAortic .steps.active .step:nth-of-type(4) { animation-delay: 1.2s; }
.arteriopathyAortic .step span { display: inline-block; width: 36px; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; background: #EF6134; border-radius: 5px; color: #ffffff; }
.arteriopathyAortic .notice { background: #FFFFFF; }


/* **************************************** *
* 40) 진료분야-동맥혈관-복부대동맥류 진단
* **************************************** */
.arteriopathyDiagnosis2 { line-height: 1; }
.arteriopathyDiagnosis2 .items { display: flex; gap: 40px; }
.arteriopathyDiagnosis2 .items h1 { margin-top: 16px; font-weight: bold; font-size: 28px; }
.arteriopathyDiagnosis2 .items p { margin-top: 12px; font-size: 24px; }


/* **************************************** *
* 41) 진료분야-동맥혈관-복부대동맥류 치료
* **************************************** */
.arteriopathyTherapy2 { line-height: 1; }
.arteriopathyTherapy2 .navs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.arteriopathyTherapy2 .navs button { padding: 16px; font-size: 24px; border-radius: 12px; background: #FFFFFF; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); }
.arteriopathyTherapy2 .navs button.active { background: #EF6134; color: #FFFFFF; }
.arteriopathyTherapy2 .arteriopathyTherapy2Swiper { margin-top: 40px; overflow: visible; }
.arteriopathyTherapy2 .arteriopathyTherapy2Swiper .swiper-slide { opacity: 0.65; height: auto; }
.arteriopathyTherapy2 .arteriopathyTherapy2Swiper .active { opacity: 1; border-color: #EF6134; }
.arteriopathyTherapy2 .item { padding: 24px 24px 46px; border-radius: 16px; border: 2px solid #FFFFFF; background: #FFFFFF; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); cursor: pointer; }
.arteriopathyTherapy2 .item .thumbnail { position: relative; }
.arteriopathyTherapy2 .item h1 { margin-top: 24px; font-weight: bold; font-size: 26px; }
.arteriopathyTherapy2 .item p { margin-top: 12px; line-height: 150%; font-size: 24px; }


/* **************************************** *
* 42) 진료분야-동맥혈관-자주하는 질문 TOP5
* **************************************** */
#arteriopathyQNA .description .qNaList.pc li { background: #f1f2f6; }
#arteriopathyQNA .description .qNaList.pc li:not([disabled]):hover { background-color: #FF7549; color: #FFFFFF;}
#arteriopathyQNA .description .qNaList.pc li[disabled] { background-color: #CDCED4; color: #818181; }
#arteriopathyQNA.qNa .description .qNaList.pc li:not([disabled])::after { background: url("https://cheongmac.blob.core.windows.net/medical/icon_tailCheckOff_gray.svg") no-repeat center center/cover; }


/* **************************************** *
* 43) 진료분야-투석혈관-공통
* **************************************** */
.avf .desktopObject { display: block; }
.avf .mobileObject { display: none; }


/* **************************************** *
* 44) 진료분야-투석혈관-청맥의 투석혈관
* **************************************** */
.avfAbout { margin-top: -80px; position: relative; overflow: visible !important; }
.avfAbout::before { content: ''; position: absolute; top: -400px; left: 0; width: 100vw; height: 400px; background: #FFFFFF;  }
.avfAbout .images { display: flex; gap: 80px; }
.avfAbout .images > div { flex: 1; }


/* **************************************** *
* 45) 진료분야-투석혈관-투석혈관의 조성
* **************************************** */
.avfCompare { padding: 100px 0 0 !important; }
.avfCompare .complications { margin-top: 100px; padding: 100px 20px; width: 100%; display: flex; justify-content: center; background: url("https://cheongmac.blob.core.windows.net/medical/avf_compare_complications_bg.png") no-repeat center center/cover; }


/* **************************************** *
* 46) 진료분야-투석혈관-투석혈관의 교정술
* **************************************** */
.avfRevision .beforeAfter { display: flex; align-items: stretch; gap: 40px; }
.avfRevision .beforeAfter .item { flex: 1; padding: 16px; height: auto; flex-direction: column; border-radius: 16px; overflow: hidden; display: none; }
.avfRevision .beforeAfter .item .images { position: relative; border-radius: 12px; overflow: hidden; }
.avfRevision .beforeAfter .item .beforeImage, .avfRevision .beforeAfter .item .afterImage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease-in-out; opacity: 0; }
.avfRevision .beforeAfter .item .beforeImage.active, .avfRevision .beforeAfter .item .afterImage.active { position: relative; opacity: 1; }
.avfRevision .beforeAfter .item .buttons { margin-top: 12px; display: flex; gap: 12px; align-items: center; }
.avfRevision .beforeAfter .item .buttons .compareIcon { display: inline-block; width: 44px; aspect-ratio: 1 / 1; background: url("https://cheongmac.blob.core.windows.net/medical/avf_revision_icon_arrow.svg") no-repeat center center/cover; }
.avfRevision .beforeAfter .item .buttons button { flex: 1; padding: 10px 16px; border-radius: 8px; font-size: 24px; background: #FFFFFF; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); }
.avfRevision .beforeAfter .item .buttons button.active { background: #FF8153; font-weight: bold; color: #FFFFFF; }
.avfRevision .beforeAfter .item .info { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; padding: 0 4px; }
.avfRevision .beforeAfter .item .info h1 { font-weight: bold; font-size: 26px; }
.avfRevision .beforeAfter .item .info span { line-height: 150%; font-size: 24px; }
.avfRevision .notice { margin: 52px auto 0; padding: 24px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; width: 80%; border-radius: 20px; background-color: #F6F7FD; box-shadow: 5px 5px 10px rgba(11, 6, 74, .1); opacity: 0; }
.avfRevision .notice.active { animation: backInUp 1s forwards; }
.avfRevision .notice img { width: 60px; aspect-ratio: 1 / 1; }
.avfRevision .notice p { padding: 0 28px; text-align: center; line-height: 160%; font-size: 20px; }
.avfRevision .notice p br.desktopObject { display: block; }
.avfRevision .notice p br.mobileObject { display: none; }


/* **************************************** *
* 47) 진료분야-투석혈관-투석혈관의 개통술
* **************************************** */
.avfAccess .items { display: flex; flex-direction: column; gap: 72px; }
.avfAccess .items .item { position: relative; padding: 20px; display: flex; flex-direction: column; gap: 36px; border-radius: 16px; background: #FFFFFF; box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15); overflow: hidden;}
.avfAccess .items .item::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background: #707070; z-index: 0; }
.avfAccess .items .item:nth-of-type(even) .info { flex-direction: row-reverse; }
.avfAccess .items .item .info { position: relative; display: flex; align-items: center; gap: 20px; z-index: 1; }
.avfAccess .items .item .info > div { flex: 1; }
.avfAccess .items .item .info .thumbnail { border-radius: 12px; overflow: hidden; }
.avfAccess .items .item .info .thumbnail img { width: 100%; aspect-ratio: 16 / 9; }
.avfAccess .items .item .info .detail { margin-top: 8px; display: flex; flex-direction: column; gap: 20px; }
.avfAccess .items .item .info .detail h1 { padding: 0 20px; font-weight: bold; font-size: 26px; }
.avfAccess .items .item .info .detail span { padding: 0 20px; display: inline-block; line-height: 150%; font-size: 24px; }
.avfAccess .items .item .beforeAfter { position: relative; z-index: 1; }
.avfAccess .items .item .beforeAfter .images { display: flex; gap: 18px; }
.avfAccess .items .item .beforeAfter .images > div { flex: 1; border-radius: 16px; overflow: hidden; }
.avfAccess .items .item .beforeAfter .images > div img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.avfAccess .items .item .beforeAfter .images > div span { padding: 20px; display: inline-block; width: 100%; text-align: center; background: #FFFFFF; line-height: 120%; font-weight: bold; font-size: 26px; }
.avfAccess .items .item .beforeAfter .images div:last-child span { background: #FF8153; color: #FFFFFF; }
.avfAccess .items .item .buttons { display: none; }


/* **************************************** *
* 48) 진료분야-투석혈관-청맥만의 차별점
* **************************************** */
.avfDifference .message { display: none; }
.avfDifference .notice { margin: 52px auto 0; padding: 24px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; width: 80%; border-radius: 20px; background-color: #F6F7FD; box-shadow: 5px 5px 10px rgba(11, 6, 74, .1); opacity: 0; }
.avfDifference .notice.active { animation: backInUp 1s forwards; }
.avfDifference .notice img { width: 60px; aspect-ratio: 1 / 1; }
.avfDifference .notice p { padding: 0 28px; text-align: center; line-height: 160%; font-size: 20px; }


/* **************************************** *
* 49) 진료분야-투석혈관-펌카테터 삽입 & 제거술
* **************************************** */
.avfInsertion .images { display: flex; gap: 80px; }
.avfInsertion .images > div { flex: 1; }


/* **************************************** *
* 50) 진료분야-투석혈관-투석혈관 관리
* **************************************** */
.avfManagement .images { display: flex; gap: 80px; }
.avfManagement .images > div { flex: 1; }
.avfManagement .accordion { margin-top: 80px; }
.avfManagement .accordion .title { display: flex; text-align: center; }
.avfManagement .accordion .title span { line-height: 1; width: 100%; font-weight: bold; font-size: 30px; }
.avfManagement .accordion .title span b { position: relative; color: #EF6134; }
.avfManagement .accordion .title span b::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 6px; aspect-ratio: 1 / 1; border-radius: 50%; background: #EF6134; }
.avfManagement .accordion .title br { display: none; }

.avfManagement .accordion .items { margin-top: 60px; display: flex; gap: 20px; }
.avfManagement .accordion .items details { flex: 1; }
.avfManagement .accordion .items details summary { position: relative; padding: 8px 16px; display: flex; align-items: center; gap: 4px; border-radius: 12px; background: #F1F2F6; overflow: hidden; pointer-events: none; }
.avfManagement .accordion .items details summary img { width: 44px; aspect-ratio: 1 / 1; }
.avfManagement .accordion .items details summary span { font-weight: bold; font-size: 26px; }
.avfManagement .accordion .items details ul { margin-top: 6px; }
.avfManagement .accordion .items details ul li { position: relative; padding: 12px 16px 12px 44px; line-height: 1.3; font-size: 24px; }
.avfManagement .accordion .items details ul li::before { content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 12px; aspect-ratio: 1 / 1; border-radius: 2px; background: #333333; }


/* **************************************** *
* 51) 진료분야-투석혈관-자주하는 질문 TOP4
* **************************************** */
#avfQNA {}


@media screen and (max-width: 1920px) {
    /* **************************************** *
     * 03) global style *1920
     * **************************************** */
    .medicalField .subTitle { margin: 100px 0 80px; }


    /* **************************************** *
     * 09) 진료분야-하지정맥류-병원슬로건 *1920
     * **************************************** */
    .slogan .messageBox { padding: 40px 0; }


    /* **************************************** *
     * 10) 진료분야-하지정맥류-청맥병원의 차별화된 치료법 *1920
     * **************************************** */
    .differentiatedTreatment .description .article h1 { font-size: 28px; }
    .differentiatedTreatment .description .article p { font-size: 22px; }


    /* **************************************** *
     * 14) 진료분야-혈관질환-공통 *1920
     * **************************************** */
    .collapsedContentContainer { margin: 28px 0 0 0; }
}

@media screen and (max-width: 1600px) {
    /* **************************************** *
     * 02) reset *1600
     * **************************************** */
    .medicalField h1 { font-size: 21px; }
    .medicalField p { font-size: 20px; }


    /* **************************************** *
     * 03) global style *1600
     * **************************************** */
    .medicalField .content { max-width: 1200px; }
    .medicalField .subTitle h1 { font-size: 27px; }
    .medicalField .subTitle.alignCenter { margin: 80px 0 52px; }
    .medicalField .subTitle.alignCenter p { max-width: unset; }


    /* **************************************** *
     * 05) 진료분야-하지정맥류-하지정맥류의 원인 *1600
     * **************************************** */
    .mainCause .description .inner .item img { max-width: 120px; }
    .mainCause .description .inner .item h1 { margin-top: 16px; }
    .mainCause .description .inner .item p { margin-top: 12px; font-size: 16px; }


    /* **************************************** *
     * 06) 진료분야-하지정맥류-하지정맥류 진단 *1600
     * **************************************** */
    .diagnosis .description .inner h1 { font-size: 18px; line-height: 140%; }
    .diagnosis .description .inner p { font-size: 16px; }
    .diagnosis .description .inner .detail .item h2 { font-size: 18px; }
    .diagnosis .description .inner .detail .item p { font-size: 16px; }
    .diagnosis .description .inner .addition img { width: 40px; }


    /* **************************************** *
     * 07) 진료분야-하지정맥류-하지정맥류 치료법 *1600
     * **************************************** */
    .medicalTreatment .description .slideTab button { padding: 8px 0; font-size: 20px; }
    .medicalTreatment .description .medicalTreatmentSlide { margin-top: 40px; }
    .medicalTreatment .description .item h1 { font-size: 18px; }
    .medicalTreatment .description .item p { font-size: 16px; }


    /* **************************************** *
     * 09) 진료분야-하지정맥류-병원슬로건 *1600
     * **************************************** */
    .slogan .messageBox h1 { font-size: 40px; }
    .slogan .messageBox p { font-size: 22px; }


    /* **************************************** *
     * 10) 진료분야-하지정맥류-청맥병원의 차별화된 치료법 *1600
     * **************************************** */
    .differentiatedTreatment .description .article { margin-top: 80px; }
    .differentiatedTreatment .description .article h1 { font-size: 25px; }
    .differentiatedTreatment .description .article p { font-size: 20px; }


    /* **************************************** *
    * 11) 진료분야-하지정맥류-청맥병원의 다른 점 *1600
    * **************************************** */
    .differenceOfCheongmac .detail .item h1 { margin-top: 16px; font-size: 18px; }
    .differenceOfCheongmac .detail .item p { margin-top: 8px; font-size: 16px; }


    /* **************************************** *
     * 12) 진료분야-하지정맥류-하지정맥류 자가 진단 *1600
     * **************************************** */
    .selfDiagnosis .detail .column:first-child button { font-size: 19px; }


    /* **************************************** *
     * 13) 진료분야-하지정맥류-자주하는 질문 *1600
     * **************************************** */
    .qNa .description .qNaList.pc li:first-child::before { width: 92px; }


    /* **************************************** *
     * 15) 진료분야-혈관질환-청맥의 원탑 검사 *1600
     * **************************************** */
    .vascularOneTopExamination .description .vascularOneTopExaminationSlide { margin-top: 40px; }


    /* **************************************** *
     * 18) 진료분야-혈관질환-청맥의 원데이 치료 *1600
     * **************************************** */
    .vascularOneDayTreatment .description .inner .method .item { padding: 16px 28px; font-size: 18px; }
    .vascularOneDayTreatment .description .inner .method .item::before { width: 24px; height: 24px; }
    .vascularOneDayTreatment .description .inner .innerContents .steps { margin: 40px 0 48px; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item { max-width: 140px; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item .icon { width: 36%; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item h2 { font-size: 18px; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item::after { font-size: 16px; }


    /* **************************************** *
     * 19) 진료분야-혈관질환-검진 프로세스 *1600
     * **************************************** */
    .atherosclerosis { margin-top: -140px; }


    /* **************************************** *
     * 20) 진료분야-골반정맥류-01 *1600
     * **************************************** */
    .pelvic .notice span { font-size: 20px; line-height: 160%; }
    .pelvic .notice span .firstLetter::before { top: -12px; left: -18px; width: 26px; }
    .pelvic .notice span .lastLetter::before { bottom: -12px; right: -18px; width: 26px; }


    /* **************************************** *
     * 21) 진료분야-골반정맥류-02 *1600
     * **************************************** */
    .symptom .description .inner h1 { font-size: 20px; }
    .symptom .description .inner p { font-size: 16px; }
    .symptom .description .inner .items .item h2 { font-size: 18px; }
    .symptom .description .inner .items .item p { font-size: 16px; }


    /* **************************************** *
     * 22) 진료분야-골반정맥류-04 *1600
     * **************************************** */
    .treatment .infoBox .descBox { font-size: 22px; }
    .treatment .infoBox .imageBox .imageBoxLayout > ul li { font-size: 16px; }
    .treatment .infoBox .imageBox .imageBoxLayout > ul li span:first-child { width: 28px; }


    /* **************************************** *
     * 26) 진료분야-대사질환-대사질환 진단 *1600
     * **************************************** */
    .metabolicDiagnosis .contentBox { gap: 60px; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader .icon { width: 40px; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader .title { font-size: 16px; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader .title span:first-of-type { font-size: 20px; }
    .metabolicDiagnosis .contentBox .items .item .itemBody { font-size: 18px; }

    /* **************************************** *
     * 27) 진료분야-대사질환-원장님 소개 *1600
     * **************************************** */
    .metabolicDoctor .innerBox { max-width: 1280px; }
    .metabolicDoctor .innerBox .messageBox .title .main { font-size: 28px; }
    .metabolicDoctor .innerBox .messageBox .title .sub { font-size: 24px; }
    .metabolicDoctor .innerBox .messageBox .desc { font-size: 22px; }
    .metabolicDoctor .innerBox .messageBox .keywords li { font-size: 32px; }


    /* **************************************** *
     * 28) 진료분야-대사질환-청맥병원의 검사법 *1600
     * **************************************** */
    .metabolicExamination .contentBox .items .item .titleBox .main { font-size: 20px; }
    .metabolicExamination .contentBox .items .item .titleBox .desc { font-size: 18px; }


    /* **************************************** *
     * 30) 진료분야-대사질환-유튜브 *1600
     * **************************************** */
    .metabolicYoutube .logo img { width: 160px; }
    .metabolicYoutube .contentBox .youtubeHeader .profile .imageBox { width: 140px; }
    .metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .main { font-size: 28px; }
    .metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .name { font-size: 14px; }
    .metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .summary { font-size: 14px; }
    .metabolicYoutube .contentBox .heroVideo .innerLayout .desc { }
    .metabolicYoutube .contentBox .heroVideo .innerLayout .desc span, .metabolicYoutube .contentBox .heroVideo .innerLayout .desc span b { font-size: 16px;}


    /* **************************************** *
     * 31) 진료분야-동맥혈관-공통 *1600
     * **************************************** */
    .arteriopathy .notice img { width: 40px; }
    .arteriopathy .notice p { font-size: 22px; }


    /* **************************************** *
     * 32) 진료분야-동맥혈관-동맥혈관질환 *1600
     * **************************************** */
    .arteriopathyOverview .symptoms .title span { padding: 18px 0; font-size: 22px; }
    .arteriopathyOverview .symptoms .desc span { padding: 18px 0; font-size: 20px; }


    /* **************************************** *
     * 33) 진료분야-동맥혈관-동맥혈관질환의 원인 *1600
     * **************************************** */
    .arteriopathyCause .items .item img { max-width: 160px; }
    .arteriopathyCause .items .item span { font-size: 22px; }


    /* **************************************** *
     * 34) 진료분야-동맥혈관-말초동맥폐쇄질환이란? *1600
     * **************************************** */
    .arteriopathyPAOD .items .item span { margin: 20px 0 10px; font-size: 22px; }


    /* **************************************** *
     * 35) 진료분야-동맥혈관-말초동맥폐쇄증 증상  *1600
     * **************************************** */
    .arteriopathySymptom .selfDiagnosis p { margin-top: 52px; font-size: 26px; }


    /* **************************************** *
     * 36) 진료분야-동맥혈관-말초동맥폐쇄증 진단 *1600
     * **************************************** */
    .arteriopathyDiagnosis .item h1 { font-size: 24px; }
    .arteriopathyDiagnosis .item p { font-size: 20px; }


    /* **************************************** *
    * 37) 진료분야-동맥혈관-말초동맥폐쇄증 치료 *1600
    * **************************************** */
    .arteriopathyTherapy .item h1 { font-size: 24px; }
    .arteriopathyTherapy .item p { font-size: 20px; }


    /* **************************************** *
    * 40) 진료분야-동맥혈관-복부대동맥류 진단 *1600
    * **************************************** */
    .arteriopathyDiagnosis2 .items h1 { font-size: 24px; }
    .arteriopathyDiagnosis2 .items p { font-size: 20px; }


    /* **************************************** *
    * 46) 진료분야-투석혈관-투석혈관의 교정술 *1600
    * **************************************** */
    .avfRevision .beforeAfter .item .buttons button { padding: 8px 14px; font-size: 20px; }
    .avfRevision .beforeAfter .item .info h1 { font-size: 22px; }
    .avfRevision .beforeAfter .item .info span { font-size: 20px; }
    .avfRevision .notice img { width: 40px; }


    /* **************************************** *
    * 47) 진료분야-투석혈관-투석혈관의 개통술 *1140
    * **************************************** */
    .avfAccess .items .item .info .detail h1 { font-size: 22px; }
    .avfAccess .items .item .info .detail span { font-size: 20px; }
    .avfAccess .items .item .beforeAfter .images > div span { padding: 14px; font-size: 22px; }


    /* **************************************** *
    * 48) 진료분야-투석혈관-청맥만의 차별점
    * **************************************** */
    .avfDifference .notice img { width: 40px; }


    /* **************************************** *
    * 50) 진료분야-투석혈관-투석혈관 관리 * 1600
    * **************************************** */
    .avfManagement .accordion .title span { font-size: 20px; }
    .avfManagement .accordion .items details summary img { width: 36px; }
    .avfManagement .accordion .items details summary span { font-size: 16px; }
    .avfManagement .accordion .items details ul li { font-size: 16px; }
}

@media screen and (max-width: 1440px) {
    /* **************************************** *
     * 03) global style *1440
     * **************************************** */
    .medicalField .content { max-width: 1080px; }
    .medicalField .mainTitle h2 { font-size: 14px; }
    .medicalField .mainTitle h1 { font-size: 36px; }
    .medicalField .mainTitle p { font-size: 20px; }


    /* **************************************** *
     * 04) 진료분야-하지정맥류-하지정맥류란? *1440
     * **************************************** */
    .varicoseVein .inner .bloodVesselWrapper .damagedStep h1 { padding-left: 0; text-align: center; font-size: 20px; }
    .varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item span { width: 40px; font-size: 16px; }
    .varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item .introduce h2 { font-size: 16px; }
    .varicoseVein .inner .bloodVesselWrapper .damagedStep .step .item .introduce p { font-size: 14px; }
    .varicoseVein .inner .bloodVesselWrapper .damagedStep .step { flex-direction: column; }


    /* **************************************** *
     * 12) 진료분야-하지정맥류-하지정맥류 자가 진단 *1440
     * **************************************** */
    .selfDiagnosis .addition img { width: 24px; }
    .selfDiagnosis .addition h1 { font-size: 18px; }


    /* **************************************** *
     * 21) 진료분야-골반정맥류-02 *1440
     * **************************************** */
    .symptom .description .inner .items .item .itemTitle { font-size: 18px; }
    .symptom .description .inner .items .item .itemDesc { font-size: 16px; }


    /* **************************************** *
     * 22) 진료분야-골반정맥류-04 *1440
     * **************************************** */
    .treatment .infoBox .titleBox { padding: 16px 0; }
    .treatment .infoBox .titleBox .symbolBox { top: 2px; width: 28px; }
    .treatment .infoBox .titleBox .main { font-size: 22px; }
    .treatment .infoBox .titleBox .sub { font-size: 18px; }
    .treatment .infoBox .imageBox { padding: 0 20px 20px; }
    .treatment .infoBox .imageBox .imageBoxLayout > ul { padding: 0 32px; gap: 12px; }
    .treatment .infoBox .imageBox .imageBoxLayout > ul li { padding: 8px; font-size: 13px; }
    .treatment .infoBox .descBox { padding: 24px 0; font-size: 17px; }

    /* **************************************** *
     * 23) 진료분야-골반정맥류-05 *1440
     * **************************************** */
    .pelvicSlogan .items .item .icon { max-width: 88px; }
    .pelvicSlogan .items .item .desc { margin-top: 2px; font-size: 16px; }
    .pelvicSlogan .items .item .desc span:last-child { font-size: 18px; }


    /* **************************************** *
     * 31) 진료분야-동맥혈관-공통 *1440
     * **************************************** */
    .arteriopathy .notice p { font-size: 20px; }


    /* **************************************** *
     * 32) 진료분야-동맥혈관-동맥혈관질환 *1440
     * **************************************** */
    .arteriopathyOverview .symptoms .title span { padding: 16px 0; font-size: 20px; }
    .arteriopathyOverview .symptoms .desc span { padding: 16px 0; font-size: 18px; }


    /* **************************************** *
     * 33) 진료분야-동맥혈관-동맥혈관질환의 원인 *1440
     * **************************************** */
    .arteriopathyCause .items .item img { max-width: 140px; }
    .arteriopathyCause .items .item span { font-size: 20px; }


    /* **************************************** *
     * 35) 진료분야-동맥혈관-말초동맥폐쇄증 증상 *1440
     * **************************************** */
    .arteriopathySymptom .item span { font-size: 20px; }


    /* **************************************** *
    * 37) 진료분야-동맥혈관-말초동맥폐쇄증 치료 *1440
    * **************************************** */
    .arteriopathyTherapy .navs button { font-size: 22px; }
    .arteriopathyTherapy .item h1 { margin-top: 20px; font-size: 22px; }
    .arteriopathyTherapy .item p { margin-top: 10px; font-size: 18px; }


    /* **************************************** *
    * 38) 진료분야-동맥혈관-청맥의 원스톱 치료 *1440
    * **************************************** */
    .arteriopathyTreatment .item h1 { margin-top: 20px; font-size: 22px; }
    .arteriopathyTreatment .item p { margin-top: 10px; font-size: 18px; }
}

@media screen and (max-width: 1280px) {
    /* **************************************** *
     * 03) global style *1280
     * **************************************** */
    .medicalField .content { max-width: 920px; }
}

@media screen and (max-width: 1140px) {
    /* **************************************** *
     * 02) reset *1140
     * **************************************** */
    .medicalField h1 { font-size: 18px; }
    .medicalField p { white-space: unset; font-size: 14px; }


    /* **************************************** *
     * 03) global style *1140
     * **************************************** */
    .medicalField .pc_layout { display: none !important; }
    .medicalField .m_layout { display: block !important; }
    .medicalField section { padding: 50px 20px; }
    .medicalField section:first-child { margin-top: -50px; }
    .medicalField .content { max-width: 768px; }
    .medicalField .mainTitle { margin-bottom: 24px; flex-direction: column; text-align: center; }
    .medicalField .mainTitle .title { flex-direction: column; align-items: center; gap: 8px; }
    .medicalField .mainTitle h2 { line-height: 140%; font-size: 14px; }
    .medicalField .mainTitle h1 { font-size: 28px; }
    .medicalField .mainTitle p { margin-top: 18px; font-size: 16px; }
    .medicalField .mainTitle .alignCenter h1 { margin-top: 6px; }
    .medicalField .description .inner { padding: 0; }
    .medicalField .subTitle { margin: 0 0 28px 0; flex-direction: column; align-items: flex-start; }
    .medicalField .subTitle h1 { font-size: 18px; }
    .medicalField .subTitle p { margin-top: 16px; }
    .medicalField .detail h1 { font-size: 18px; }
    .medicalField .detail p { font-size: 16px; }
    .medicalField .desktopWidth80 { padding: 0; }


    /* **************************************** *
     * 04) 진료분야-하지정맥류-하지정맥류란? *1140
     * **************************************** */
    .varicoseVein .inner .bloodVesselWrapper .motion { padding: 0 12px; flex-wrap: wrap; gap: 6%; }
    .varicoseVein .inner .bloodVesselWrapper .motion .bloodVessel { width: 32%; }
    .varicoseVein .inner .bloodVesselWrapper .motion .m_layout { display: flex !important; justify-content: center; align-items: center; width: 62%; }
    /*.varicoseVein .inner .bloodVesselWrapper .motion div:nth-child(4), .varicoseVein .inner .bloodVesselWrapper .motion div:nth-child(5) { margin-top: 48px; }*/
    .varicoseVein .inner .bloodVesselWrapper .motion .divisionLine { margin: 22px 0; width: 100%; height: 1.5px; border-radius: 2px; background-color: rgba(11, 6, 74, .15); }
    .varicoseVein .inner .bloodVesselWrapper .damagedStep { margin-top: 50px; }
    .varicoseVein .inner .bloodVesselWrapper .damagedStep .step { margin-top: 16px; gap: 16px; }


    /* **************************************** *
     * 05) 진료분야-하지정맥류-하지정맥류의 원인 *1140
     * **************************************** */
    .mainCause .description { flex-wrap: wrap; justify-content: space-between; }
    .mainCause .description .inner { grid-template-columns: repeat(2, 1fr); gap: 52px 16px; }
    .mainCause .description .inner ._0 { margin-bottom: 8px; padding: 0 24px; grid-row: 1; grid-column: 1 / 3; flex-direction: row; gap: 28px; text-align: left; }
    .mainCause .description .inner ._0 h1 { margin-top: 0; }
    .mainCause .description .inner ._1, .mainCause .description .inner ._2 { grid-row: 2; }
    .mainCause .description .inner ._3, .mainCause .description .inner ._4 { grid-row: 3; }


    /* **************************************** *
     * 06) 진료분야-하지정맥류-하지정맥류 진단 *1140
     * **************************************** */
    .diagnosis .description .inner h1 { text-align: center; font-size: 16px; }
    .diagnosis .description .inner .addition { margin-top: 52px; padding: 24px; width: 100%; }
    .diagnosis .description .inner .addition h1 { font-size: 18px; line-height: 140%; }
    .diagnosis .description .inner .addition p { line-height: 140%; }
    .diagnosis .description .inner .addition img { width: 36px; }


    /* **************************************** *
     * 07) 진료분야-하지정맥류-하지정맥류 치료법 *1140
     * **************************************** */
    .medicalTreatment .description .slideTab { margin-top: 32px; grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .medicalTreatment .description .slideTab button { padding: 8px 0; font-size: 15px; }
    .medicalTreatment .description .medicalTreatmentSlide { margin-top: 28px; }
    .medicalTreatment .description .item h1 { font-size: 16px; }
    .medicalTreatment .description .item p { font-size: 14px; }


    /* **************************************** *
     * 08) 진료분야-하지정맥류-수술적 방법 비교 *1140
     * **************************************** */
    .surgeryComparison .description .inner { flex-wrap: wrap; }
    .surgeryComparison .description .inner .group { flex: unset; width: 100%; }


    /* **************************************** *
     * 09) 진료분야-하지정맥류-병원슬로건 *1140
     * **************************************** */
    section.slogan { padding: 120px 0; }
    .slogan { background-position: 84% 100%; }
    .slogan .messageBox { padding: 0; }
    .slogan .messageBox h1 { text-align: center; font-size: 20px; }
    .slogan .messageBox p { margin-top: 28px; font-size: 16px; }


    /* **************************************** *
     * 10) 진료분야-하지정맥류-청맥병원의 차별화된 치료법 *1140
     * **************************************** */
    .differentiatedTreatment { margin-bottom: -50px; }
    .differentiatedTreatment .description .article { margin-top: 0; padding-bottom: 24px; background-color: #FFFFFF; }
    .differentiatedTreatment .description .article h1 { font-size: 20px; }
    .differentiatedTreatment .description .article p { font-size: 15px; }
    .differentiatedTreatment .description .imageBox { flex-direction: column; }
    .differentiatedTreatment .description .imageBox .column:first-child { padding: 0 12px; }
    .differentiatedTreatment .description .imageBox .column:last-child { justify-content: center; }


    /* **************************************** *
     * 11) 진료분야-하지정맥류-청맥병원의 다른 점 *1140
     * **************************************** */
    .differenceOfCheongmac { padding-bottom: 0; background-color: unset; }
    .differenceOfCheongmac .equipment { width: 100%; }
    .differenceOfCheongmac .equipment img { aspect-ratio: 1 / 1; box-shadow: 5px 5px 5px rgba(11, 6, 74, .1); }


    /* **************************************** *
     * 12) 진료분야-하지정맥류-하지정맥류 자가 진단 *1140
     * **************************************** */
    .selfDiagnosis .detail { margin-top: 0; flex-direction: column-reverse; align-items: center; }
    .selfDiagnosis .detail .column:first-child { margin-top: 32px; padding: 0 12px; width: 100%; gap: 16px; }
    .selfDiagnosis .detail .column:first-child button { padding-left: 30px; font-size: 16px; text-align: left; }
    .selfDiagnosis .detail .column:first-child button::before { top: 56%; width: 20px; }
    .selfDiagnosis .detail .column:last-child { margin-top: 8px; max-width: unset; aspect-ratio: 1 / 0.76; overflow: hidden; }
    .selfDiagnosis .addition { margin: 4px 0 16px 0; padding: 16px; width: 100%; }
    .selfDiagnosis .addition img { width: 24px; }
    .selfDiagnosis .addition h1 { line-height: 150%; font-size: 18px; }


    /* **************************************** *
     * 13) 진료분야-하지정맥류-자주하는 질문 *1140
     * **************************************** */
    .qNa::after { content: unset; }
    .qNa .description .content { padding: 0 8px; flex-direction: column; }
    .qNa .description .column:first-child { flex-direction: column; width: 100%; }
    .qNa .description .column:last-child { display: none; }
    .qNa .description .mobileDevice { aspect-ratio: 1 / 2; overflow-y: scroll; }
    .qNa .description .mobileDevice::before { content: unset; }
    .qNa .description .statusBar { padding: 16px 20px 0; }
    .qNa .description .qNaList.pc li:first-child::before { content: unset; }
    .qNa .description .qNaList.m { position: relative; padding: 34px 14px 22px; display: flex; flex-direction: column; gap: 18px; border-radius: 4px; background-color: #F5F5F5; }
    .qNa .description .qNaList.m::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; border-radius: 5px; background-color: #C5C5C5; }
    .qNa .description .qNaList.m li p { margin: 0; }
    .qNa .description .qNaList.m li:active p { font-weight: 600; }
    .qNa .description .qNaList.m li[disabled] { display: none; }


    /* **************************************** *
     * 14) 진료분야-혈관질환-공통 *1140
     * **************************************** */
    .collapsedContentContainer { margin: 0; }


    /* **************************************** *
     * 15) 진료분야-혈관질환-청맥의 원탑 검사 *1140
     * **************************************** */
    .vascularOneTopExamination .description .vascularOneTopExaminationSlide { margin-top: 28px; }


    /* **************************************** *
     * 16) 진료분야-혈관질환-정밀질환장비 *1140
     * **************************************** */
    .vascularDisease .tab { margin-top: 20px; gap: 2.5px; }
    .vascularDisease .tab button { padding: 8px 0; font-size: 14px; }
    .vascularDisease .vascularDiseaseTitle { margin-top: 24px; text-align: center; }
    .vascularDisease .vascularDiseaseTitle h1 { font-size: 16px; }
    .vascularDisease .vascularDiseaseTitle p { margin-top: 10px; font-size: 14px; }


    /* **************************************** *
     * 18) 진료분야-혈관질환-청맥의 원데이 치료 *1140
     * **************************************** */
    .vascularOneDayTreatment .description .inner .method .item { flex-direction: column; }
    .vascularOneDayTreatment .description .inner .method .item .line { display: none; }
    .vascularOneDayTreatment .description .inner .method .item._1::before, .vascularOneDayTreatment .description .inner .method .item._2::before, .vascularOneDayTreatment .description .inner .method .item._3::before { right: unset; left:  31%; }
    .vascularOneDayTreatment .description .inner .method .item._4::before{ left: unset; right:  31%; }
    .vascularOneDayTreatment .description .inner .method .item.active { gap: 8px; }
    .vascularOneDayTreatment .description .inner .innerContents { margin-top: 52px; padding: 0; }
    .vascularOneDayTreatment .description .inner .innerContents .steps::before, .vascularOneDayTreatment .description .inner .steps::after { height: 1px; }
    .vascularOneDayTreatment .description .inner .innerContents .steps { margin: 24px 0 80px; gap: 20px; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item { border-width: 1px; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item::after { bottom: -64px; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item .icon { margin-top: 0; width: 44%; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item h2 { display: none; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item._1::after { content: '상담'; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item._2::after { content: '검사'; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item._3::after { content: '시술'; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item._4::after { content: '관리'; }
    .vascularOneDayTreatment .description .inner .innerContents .steps .item span { width: 20px; }


    /* **************************************** *
     * 19) 진료분야-혈관질환-검진 프로세스 *1140
     * **************************************** */
    .atherosclerosis { margin-top: 0; }


    /* **************************************** *
     * 20) 진료분야-골반정맥류-01 *1140
     * **************************************** */
    .pelvic { margin-top: -50px; }
    .pelvic .inner { gap: 20px; }
    .pelvic .twoChild { flex-direction: column; gap: 36px; overflow: hidden; }
    .pelvic .twoChild .mainP { margin-top: 0; font-size: 20px; }
    .pelvic .twoChild .subP { margin-top: 12px; padding-top: 12px; font-size: 16px; }
    .pelvic .imageBox .desktopImage { display: none; }
    .pelvic .imageBox .mobileImage { display: block; }
    .pelvic .notice { padding: 24px; text-align: center; }
    .pelvic .notice div { font-size: 18px; line-height: 140%; }
    .pelvic .notice span { font-size: 18px; }
    .pelvic .notice span .firstLetter::before { top: -12px; left: -13px; width: 22px; }
    .pelvic .notice span .lastLetter::before { bottom: -8px; right: -13px; width: 22px; }


    /* **************************************** *
     * 21) 진료분야-골반정맥류-02 *1140
     * **************************************** */
    .symptom .description .inner .items { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 40px; }
    .symptom .description .inner .items .item .itemTitle { margin-top: 12px; padding: 0 2px; font-size: 16px; }
    .symptom .description .inner .items .item .itemDesc { margin-top: 4px; font-size: 13px; }


    /* **************************************** *
     * 22) 진료분야-골반정맥류-04 *1140
     * **************************************** */
    .treatment .infoBox { border-radius: 16px; }
    .treatment .infoBox .titleBox { padding: 16px 0; }
    .treatment .infoBox .titleBox .symbolBox { margin-right: 4px; width: 18px; }
    .treatment .infoBox .titleBox .main { font-size: 20px; }
    .treatment .infoBox .titleBox .sub { top: 1px; font-size: 14px; }
    .treatment .infoBox .imageBox { display: none; }
    .treatment .infoBox .descBox { padding: 8px 20px; white-space: normal; font-size: 16px; }
    .treatment .mobileImageBox { margin-top: 20px; display: block; }
    .treatment .mobileImageBox .mobileImageBoxLayout { display: flex; flex-direction: column; gap: 20px; }
    .treatment .mobileImageBox .mobileImageBoxLayout > div { border-radius: 8px; overflow: hidden; border: 0.5px solid #D9D9D9; background: #FFFFFF; text-align: center; }
    .treatment .mobileImageBox .mobileImageBoxLayout > div img { width: 80%; }
    .treatment .mobileImageBox .mobileImageBoxLayout > ul { display: flex; flex-direction: column; gap: 12px; }
    .treatment .mobileImageBox .mobileImageBoxLayout > ul li { padding: 16px 14px; display: flex; align-items: flex-start; gap: 12px; border-radius: 4px; overflow: hidden; background: #FFFFFF; font-size: 16px; box-shadow: 0 2px 2px rgba(11, 6, 74, 0.1); }
    .treatment .mobileImageBox .mobileImageBoxLayout > ul li span:first-child { position: relative; top: 3px; min-width: 24px; max-width: 24px; aspect-ratio: 1 / 1; border-radius: 24px; display: flex; justify-content: center; align-items: center; background: #FF8153; color: #FFFFFF; }


    /* **************************************** *
     * 23) 진료분야-골반정맥류-05 *1140
     * **************************************** */
    .pelvicSlogan { padding: 80px 0 !important; }
    .pelvicSlogan .items { margin-top: 40px; padding: 0 20px !important; grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .pelvicSlogan .items .item > div { margin-top: -8px; }
    .pelvicSlogan .items .item .icon { max-width: 72px; }
    .pelvicSlogan .items .item .desc { margin-top: 0; font-size: 16px; }
    .pelvicSlogan .items .item .desc span:last-child { font-size: 18px; }


    /* **************************************** *
     * 24) 진료분야-대사질환-대사질환이란? *1140
     * **************************************** */
    .metabolicAbout { margin-top: -50px; }
    .metabolicAbout .twoChild { flex-direction: column; gap: 36px; overflow: hidden; }
    .metabolicAbout .twoChild .mainP { margin-top: 0; font-size: 20px; }
    .metabolicAbout .twoChild .subP { margin-top: 12px; padding-top: 12px; font-size: 16px; }

    /* **************************************** *
     * 25) 진료분야-대사질환-대사질환 원인 *1140
     * **************************************** */
    .metabolicCause .description .inner { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 52px; }
    .metabolicCause .description .inner .item .titleBox { margin-top: 12px; gap: 10px; }
    .metabolicCause .description .inner .item .titleBox h1 { font-size: 18px; }
    .metabolicCause .description .inner .item .titleBox p { font-size: 16px; }


    /* **************************************** *
     * 26) 진료분야-대사질환-대사질환 진단 *1140
     * **************************************** */
    .metabolicDiagnosis .contentBox .image { display: none; }
    .metabolicDiagnosis .contentBox .items { gap: 12px; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader { padding: 16px 28px; flex-direction: column; justify-content: center; gap: 2px; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader .icon { width: 40px; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader .title { align-items: center; font-size: 12px; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader .title span:first-of-type { font-size: 16px; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader .title.twoLetters { letter-spacing: unset; }
    .metabolicDiagnosis .contentBox .items .item .itemHeader .title.fourLetters { letter-spacing: unset; }
    .metabolicDiagnosis .contentBox .items .item .itemBody { padding: 0 24px; gap: 8px; font-size: 16px; }


    /* **************************************** *
     * 27) 진료분야-대사질환-원장님 소개 *1140
     * **************************************** */
    .metabolicDoctor .innerBox { padding: 50px 20px; justify-content: flex-start; }
    .metabolicDoctor .innerBox .messageBox { width: 100%; }
    .metabolicDoctor .innerBox .messageBox .title { align-items: center; gap: 0; }
    .metabolicDoctor .innerBox .messageBox .title .sub { padding-left: 24px; font-size: 16px; }
    .metabolicDoctor .innerBox .messageBox .title .sub::before { width: 18px; }
    .metabolicDoctor .innerBox .messageBox .title .main { font-size: 18px; }
    .metabolicDoctor .innerBox .messageBox .title .main b { font-size: 28px; }
    .metabolicDoctor .innerBox .messageBox .desc { margin-top: 20px; white-space: normal; text-align: center; font-size: 16px; }
    .metabolicDoctor .innerBox .messageBox .keywords { margin-top: 72px; width: 45%; flex-direction: column; align-items: flex-start; }
    .metabolicDoctor .innerBox .messageBox .keywords li { padding: 8px 24px; font-size: 22px; }
    .metabolicDoctor .innerBox .doctorImage { right: 0; height: unset; width: 45%; }
    .metabolicDoctor .bgImageBox { max-height: unset; }
    .metabolicDoctor .bgImageBox .desktopImage { display: none; }
    .metabolicDoctor .bgImageBox .mobileImage { display: block; height: 520px; }


    /* **************************************** *
     * 28) 진료분야-대사질환-청맥병원의 검사법 *1140
     * **************************************** */
    .metabolicExamination .contentBox .items { grid-template-columns: repeat(1, 1fr); gap: 12px; }
    .metabolicExamination .contentBox .items .item { flex-direction: row; background: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); overflow: hidden; }
    .metabolicExamination .contentBox .items .item .imageBox { width: 40%; box-shadow: unset; }
    .metabolicExamination .contentBox .items .item .titleBox { flex: 1; margin-top: 0; padding: 0 12px; justify-content: center; gap: 6px; }
    .metabolicExamination .contentBox .items .item .titleBox .main { font-size: 16px; }
    .metabolicExamination .contentBox .items .item .titleBox .desc { line-height: 140%; font-size: 14px; }


    /* **************************************** *
     * 29) 진료분야-대사질환-청맥병원의 치료법 *1140
     * **************************************** */
    .metabolicManagement .contentBox .desktopContent { display: none; }
    .metabolicManagement .contentBox .mobileContent { display: block; margin-top: 12px; }
    .metabolicManagement .contentBox .mobileContent .items .swiper { overflow: visible; }
    .metabolicManagement .contentBox .mobileContent .items .item { display: flex; flex-direction: column; }
    .metabolicManagement .contentBox .mobileContent .items .item .titleBox { margin-top: 12px; display: flex; flex-direction: column; align-items: center; }
    .metabolicManagement .contentBox .mobileContent .items .item .titleBox .main { font-weight: bold; font-size: 18px;}
    .metabolicManagement .contentBox .mobileContent .items .item .titleBox .desc { position: relative; margin-top: 32px; padding: 20px; text-align: center; line-height: 150%; font-size: 16px; background: #F1F2F6; border-radius: 12px; }
    .metabolicManagement .contentBox .mobileContent .items .item .titleBox .desc::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 20px solid #F1F2F6; }



    /* **************************************** *
     * 30) 진료분야-대사질환-유튜브 *1140
     * **************************************** */
    .metabolicYoutube .logo img { width: 120px; }
    .metabolicYoutube .contentBox { margin-top: 12px; }
    .metabolicYoutube .contentBox .youtubeHeader { padding: 0; }
    .metabolicYoutube .contentBox .youtubeHeader .profile .imageBox { width: 100px; }
    .metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .main { font-size: 22px; }
    .metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .name { font-size: 14px; }
    .metabolicYoutube .contentBox .youtubeHeader .profile .infoBox .summary { font-size: 12px; }
    .metabolicYoutube .contentBox .youtubeHeader .qrCode { display: none; }
    .metabolicYoutube .contentBox .heroVideo { margin: 24px 0; padding: 24px 0; }
    .metabolicYoutube .contentBox .heroVideo .innerLayout { flex-direction: column; gap: 12px; }
    .metabolicYoutube .contentBox .heroVideo .innerLayout .desc { width: 100%; }
    .metabolicYoutube .contentBox .heroVideo .innerLayout .desc span:not(:first-child) { display: none; }
    .metabolicYoutube .contentBox .items { padding: 0; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .metabolicYoutube .contentBox .items .item .imageBox { border-radius: 6px; }


    /* **************************************** *
     * 31) 진료분야-동맥혈관-공통 *1140
     * **************************************** */
    .arteriopathy .desktopObject { display: none; }
    .arteriopathy .mobileObject { display: block; }
    .arteriopathy .notice { margin-top: 52px; padding: 20px; width: 100%; gap: 16px; }
    .arteriopathy .notice img { width: 36px; }
    .arteriopathy .notice p { padding: 0; white-space: pre-line; font-size: 16px; }


    /* **************************************** *
     * 32) 진료분야-동맥혈관-동맥혈관질환 *1140
     * **************************************** */
    .arteriopathyOverview { margin-top: -50px; }
    .arteriopathyOverview .images { flex-direction: column; gap: 36px; }
    .arteriopathyOverview .symptoms { margin-top: 20px; gap: 12px; }
    .arteriopathyOverview .symptoms > div { border: unset; border-radius: 6px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }
    .arteriopathyOverview .symptoms .title { height: 100%; padding: 0 8px; }
    .arteriopathyOverview .symptoms .title span { padding: 10px 0; font-size: 16px; }
    .arteriopathyOverview .symptoms .title span br { display: block; }
    .arteriopathyOverview .symptoms .desc { display: none; }


    /* **************************************** *
     * 33) 진료분야-동맥혈관-동맥혈관질환의 원인 *1140
     * **************************************** */
    .arteriopathyCause .items { padding: 0 12px; grid-template-columns: repeat(2, 1fr); column-gap: 0; row-gap: 36px; }
    .arteriopathyCause .items .item { gap: 12px; width: 90%; }
    .arteriopathyCause .items .item:nth-of-type(even) { justify-self: flex-end; }
    .arteriopathyCause .items .item img { max-width: unset; width: 88%; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }
    .arteriopathyCause .items .item span { font-size: 18px; }


    /* **************************************** *
     * 34) 진료분야-동맥혈관-말초동맥폐쇄질환이란? *1140
     * **************************************** */
    .arteriopathyPAOD .images { flex-direction: column; gap: 36px; }
    .arteriopathyPAOD .message { margin-top: 36px;  padding: 24px; text-align: center; }
    .arteriopathyPAOD .message div { font-size: 18px; line-height: 140%; }
    .arteriopathyPAOD .message span { display: inline-block; font-size: 18px; }
    .arteriopathyPAOD .message span .firstLetter::before { top: -12px; left: -13px; width: 22px; }
    .arteriopathyPAOD .message span .lastLetter::before { bottom: -8px; right: -13px; width: 22px; }
    .arteriopathyPAOD .items { margin-top: 36px; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .arteriopathyPAOD .items .item { padding: 10px; border-width: 1px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }
    .arteriopathyPAOD .items .item span { margin: 12px 0 6px; font-size: 16px; }


    /* **************************************** *
     * 35) 진료분야-동맥혈관-말초동맥폐쇄증 증상 *1140
     * **************************************** */
    .arteriopathySymptom .items { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .arteriopathySymptom .item { gap: 16px; }
    .arteriopathySymptom .item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }
    .arteriopathySymptom .item span { font-size: 16px; }
    .arteriopathySymptom .selfDiagnosis p { line-height: 190%; font-size: 21px; }
    .arteriopathySymptom .selfDiagnosis p br { display: block; }
    .arteriopathySymptom .selfDiagnosis p b::before { top: -3.5px; width: 5px; }
    .arteriopathySymptom .selfDiagnosis .detail .column:last-child { margin-top: 16px; }
    .arteriopathySymptom .selfDiagnosis .detail .column:first-child { margin-top: 20px; }


    /* **************************************** *
     * 36) 진료분야-동맥혈관-말초동맥폐쇄증 진단 *1140
     * **************************************** */
    .arteriopathyDiagnosis .item h1 { margin-top: 10px; font-size: 16px; }
    .arteriopathyDiagnosis .item p { margin-top: 8px; font-size: 14px; }


    /* **************************************** *
    * 37) 진료분야-동맥혈관-말초동맥폐쇄증 치료 *1140
    * **************************************** */
    .arteriopathyTherapy .navs { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .arteriopathyTherapy .navs button { padding: 12px 8px; width: 100%; font-size: 16px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); overflow: auto; }
    .arteriopathyTherapy .arteriopathyTherapySwiper { margin-top: 20px; }
    .arteriopathyTherapy .item h1 { margin-top: 12px; font-size: 16px; }
    .arteriopathyTherapy .item p { margin-top: 8px; font-size: 14px; }


    /* **************************************** *
    * 38) 진료분야-동맥혈관-청맥의 원스톱 치료 *1140
    * **************************************** */
    .arteriopathyTreatment .steps { margin-bottom: 32px; position: relative; display: flex; justify-content: space-between; align-items: center; gap: 14%; }
    .arteriopathyTreatment .steps::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 1px; background: #FF8153; }
    .arteriopathyTreatment .step { position: relative; flex: 1; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; background: #F4F4F4; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); z-index: 1; }
    .arteriopathyTreatment .step svg { width: 40%; aspect-ratio: 1 / 1; fill: none; }
    .arteriopathyTreatment .step path { stroke: #9D9D9D; }
    .arteriopathyTreatment .step path.customFill { fill: #9D9D9D; }
    .arteriopathyTreatment .step circle { stroke: #9D9D9D; }
    .arteriopathyTreatment .step span { color: #9D9D9D; }
    .arteriopathyTreatment .step.active { background: #FF8153; }
    .arteriopathyTreatment .step.active path { stroke: #FFFFFF; }
    .arteriopathyTreatment .step.active path.customFill { fill: #FFFFFF; }
    .arteriopathyTreatment .step.active circle { stroke: #FFFFFF; }
    .arteriopathyTreatment .step.active span { font-weight: bold; color: #FFFFFF; }
    .arteriopathyTreatment .items { margin: 0 auto; width: 80%; }
    .arteriopathyTreatment .item { flex: none; padding: 16px 16px 26px; border-width: 1px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }
    .arteriopathyTreatment .item h1 { margin-top: 12px; padding: 12px; font-size: 16px; }
    .arteriopathyTreatment .item p { margin-top: 10px; font-size: 16px; }


    /* **************************************** *
    * 39) 진료분야-동맥혈관-복부대동맥류란? *1140
    * **************************************** */
    .arteriopathyAortic .images { flex-direction: column; gap: 36px; }
    .arteriopathyAortic .steps { flex-direction: column; gap: 12px; }
    .arteriopathyAortic .step { padding: 10px 16px; justify-content: flex-start; width: 100%; }
    .arteriopathyAortic .step span { width: 28px; font-size: 16px; }
    .arteriopathyAortic .step p { font-size: 16px; }


    /* **************************************** *
     * 40) 진료분야-동맥혈관-복부대동맥류 진단 *1140
     * **************************************** */
    .arteriopathyDiagnosis2 .item h1 { margin-top: 10px; font-size: 16px; }
    .arteriopathyDiagnosis2 .item p { margin-top: 8px; font-size: 14px; }


    /* **************************************** *
     * 41) 진료분야-동맥혈관-복부대동맥류 치료 *1140
     * **************************************** */
    .arteriopathyTherapy2 .navs { gap: 16px; }
    .arteriopathyTherapy2 .navs button { padding: 12px 8px; width: 100%; font-size: 16px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); overflow: auto; }
    .arteriopathyTherapy2 .item { padding: 0; border-radius: unset; border: unset; box-shadow: unset; background: unset; }
    .arteriopathyTherapy2 .item h1 { margin-top: 12px; font-size: 16px; }
    .arteriopathyTherapy2 .item p { margin-top: 6px; font-size: 14px; }


    /* **************************************** *
     * 43) 진료분야-투석혈관-공통 *1140
     * **************************************** */
    .avf .desktopObject { display: none; }
    .avf .mobileObject { display: block; }


    /* **************************************** *
     * 44) 진료분야-투석혈관-청맥의 투석혈관 *1140
     * **************************************** */
    .avfAbout { margin-top: -50px; }
    .avfAbout .images { flex-direction: column; gap: 36px; }


    /* **************************************** *
    * 45) 진료분야-투석혈관-투석혈관의 조성 *1140
    * **************************************** */
    .avfCompare { padding: 50px 20px 0 !important; }
    .avfCompare .complications { margin-top: 60px; padding: 60px 40px; width: calc(100vw + 20px + 20px); }


    /* **************************************** *
    * 46) 진료분야-투석혈관-투석혈관의 교정술 *1140
    * **************************************** */
    .avfRevision .beforeAfter { flex-direction: column; gap: 20px; }
    .avfRevision .beforeAfter .item { padding: 12px; display: flex; }
    .avfRevision .beforeAfter .item .buttons { margin-top: 8px; gap: 8px; }
    .avfRevision .beforeAfter .item .buttons .compareIcon { width: 26px; }
    .avfRevision .beforeAfter .item .buttons button { padding: 8px; border-radius: 4px; font-size: 14px; background: #F1F2F6; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }
    .avfRevision .beforeAfter .item .info { margin-top: 20px; gap: 8px; }
    .avfRevision .beforeAfter .item .info h1 { font-size: 16px; }
    .avfRevision .beforeAfter .item .info span { font-size: 14px; }
    .avfRevision .notice { margin-top: 36px; padding: 20px; width: 100%; gap: 16px; }
    .avfRevision .notice img { width: 36px; }
    .avfRevision .notice p { padding: 0; white-space: pre-line; font-size: 16px; }
    .avfRevision .notice p br.desktopObject { display: none; }
    .avfRevision .notice p br.mobileObject { display: block; }


    /* **************************************** *
    * 47) 진료분야-투석혈관-투석혈관의 개통술 *1140
    * **************************************** */
    .avfAccess .items { gap: 32px; }
    .avfAccess .items .item { padding: 8px; border-radius: 4px; gap: 0; }
    .avfAccess .items .item::before { height: 33.3%; }
    .avfAccess .items .item:nth-of-type(even) .info { flex-direction: column; }
    .avfAccess .items .item .info { flex-direction: column; gap: 0; }
    .avfAccess .items .item .info .thumbnail { border-radius: 4px; }
    .avfAccess .items .item .info .detail { gap: 0; }
    .avfAccess .items .item .info .detail h1 { margin-top: 8px; padding: 0 4px; font-size: 16px; }
    .avfAccess .items .item .info .detail span { margin-top: 8px; padding: 0 4px; font-size: 14px; }
    .avfAccess .items .item .beforeAfter { margin-top: 20px; }
    .avfAccess .items .item .beforeAfter .images { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; }
    .avfAccess .items .item .beforeAfter .images > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; }
    .avfAccess .items .item .beforeAfter .images .beforeImage, .avfAccess .items .item .beforeAfter .images .afterImage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease-in-out; opacity: 0; }
    .avfAccess .items .item .beforeAfter .images .beforeImage.active, .avfAccess .items .item .beforeAfter .images .afterImage.active { position: relative; opacity: 1; }
    .avfAccess .items .item .buttons { position: relative; margin-top: 8px; display: flex; align-items: center; gap: 8px; z-index: 1 }
    .avfAccess .items .item .buttons .compareIcon { display: inline-block; width: 26px; height: 26px; background: url("https://cheongmac.blob.core.windows.net/medical/avf_access_icon_arrow.svg") no-repeat center center/cover; }
    .avfAccess .items .item .buttons button { flex: 1; padding: 8px; border-radius: 4px; background: #FFFFFF; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); font-size: 14px; }
    .avfAccess .items .item .buttons button.active { background: #FF8153; font-weight: bold; color: #FFFFFF; }


    /* **************************************** *
    * 48) 진료분야-투석혈관-청맥만의 차별점 *1140
    * **************************************** */
    .avfDifference .message { margin-top: 20px; display: flex; justify-content: center; text-align: center; font-size: 14px; }
    .avfDifference .notice { margin-top: 36px; padding: 20px; width: 100%; gap: 16px; }
    .avfDifference .notice img { width: 36px; }
    .avfDifference .notice p { padding: 0; white-space: pre-line; font-size: 16px; }


    /* **************************************** *
    * 49) 진료분야-투석혈관-펌카테터 삽입 & 제거술 *1140
    * **************************************** */
    .avfInsertion .images { flex-direction: column; gap: 20px; }


    /* **************************************** *
    * 50) 진료분야-투석혈관-투석혈관 관리  *1140
    * **************************************** */
    .avfManagement .images { flex-direction: column; gap: 36px; }
    .avfManagement .accordion { margin-top: 52px; }
    .avfManagement .accordion .title span { line-height: 190%; font-size: 21px; }
    .avfManagement .accordion .title span b::before { top: -3.5px; width: 5px; }
    .avfManagement .accordion .title br { display: block; }
    .avfManagement .accordion .items { margin-top: 40px; flex-direction: column; gap: 8px; }
    .avfManagement .accordion .items details summary { padding: 8px; pointer-events: unset; }
    .avfManagement .accordion .items details summary::before { content: ''; position: absolute; top: 50%; right: 12px; transform: translateY(-50%) scaleY(-1); width: 20px; aspect-ratio: 1 / 1; background: url("https://cheongmac.blob.core.windows.net/medical/avf_management_icon_arrow.svg") no-repeat center center/cover; transition: transform 0.15s ease; }
    .avfManagement .accordion .items details[open] summary::before { transform: translateY(-50%); }
    .avfManagement .accordion .items details summary img { width: 30px; }
    .avfManagement .accordion .items details summary span { font-size: 16px; }
    .avfManagement .accordion .items details ul li { padding: 8px 12px 8px 32px; font-size: 14px; }
    .avfManagement .accordion .items details ul li::before { width: 8px; }
}

@media screen and (max-width: 768px) {
    /* **************************************** *
     * 03) global style *768
     * **************************************** */
    .medicalField .content { max-width: unset; }
}