@charset "UTF-8"; /* ------ 클리닉_그래프 ------ */ .clinic .graph_cont {position:relative; max-width: 100%; width: 65%; margin: 0 auto; letter-spacing: 0;padding-bottom:3rem;} .clinic .graph_cont .stit {font-size: var(--tit30);font-weight: 600;line-height: 1.5;margin-bottom: 1.5rem;} /* ------ 그래프 상단 정보 ------ */ .clinic .graph_cont .graph_status_wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rem; transition: opacity 1s ease, transform 1s ease;} .clinic .graph_cont .graph_status_wrap div{ display: flex; align-items: center; font-size:var(--txt16); color:var(--black44); } .clinic .graph_cont .graph_status div + div { margin-left: 2rem;} .clinic .graph_cont .graph_status div em { width:1em; height: 1em; border-radius:100%; margin-right:1rem;} /*.clinic .graph_cont.active .graph_status_wrap{opacity: 1; transform:translateY(0);}*/ .clinic .graph_cont .graph_wrap{position:relative; display: flex; justify-content: center; max-width: 100%; width:100%; height: 30rem; margin: 0 auto; } /* ------ Y ------ */ .clinic .graph_cont .graph_y{position:absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between} .clinic .graph_cont .graph_y .box{display: flex; align-items: center; } .clinic .graph_cont .graph_y .txt{position: absolute; left: 0; color: #444; font-size:var(--txt16); font-weight: 500; width: 3.5rem; text-align: right; } .clinic .graph_cont .graph_y .line{display: block; width: 100%; height: 1px; background: #D9D9D9; margin-left: 6rem} /* ------ 그래프 cont ------ */ .clinic .graph_cont .graph_box { position: relative; display: flex; gap:6rem;} .clinic .graph_cont .graph_box .bar_box { position: relative; display: flex; align-items: flex-end; justify-content: center} .clinic .graph_cont .graph_box .bar_box .bar { position: relative; width: 6rem; max-width: 100%; height: 0; margin-bottom: 1px; background: linear-gradient(360deg, #EFEFEF 8.24%, #FCA400 103.46%); border-radius: 1rem; transition: height 0.8s; } .clinic .graph_cont.active .graph_box .bar_box .bar {height: 100%;} .clinic .graph_cont .graph_y + .graph_box .bar_box .bar{border-radius: 1rem 1rem 0 0;} .clinic .graph_cont .graph_y + .graph_box{padding-left: 6rem; } /* y 숫자 6rem */ /* 그래프 cont_하단 label */ .clinic .graph_cont .graph_box .bar_box .btm_label{ position: absolute; font-size:var(--txt16); color: #444; line-height: 1; left: 50%; top: calc(100% + 1em); transform: translateX(-50%); white-space: nowrap; text-align: center; opacity: 0; transition: opacity 0.5s;} .clinic .graph_cont.active .graph_box .bar_box .btm_label { opacity: 1; } /* 그래프 cont_말풍선 label */ .clinic .graph_cont .graph_box .bar_box .label {position: absolute; left: 50%; padding: 0.6em 0.7em; font-weight: 600; top:-0.8em; color: #fff; background-color: #000; font-size: var(--tit25); white-space: nowrap; border-radius: 10em; line-height: 1; opacity: 0; transform: translate(-50%, -70%); transition: opacity 0.8s, transform 0.8s;} .clinic .graph_cont .graph_box .bar_box .label:before { content: ''; position: absolute; left:0; top: calc(100% - 1px); width: 100%; height: 1.1rem; background: url('data:image/svg+xml,') no-repeat center / contain;} .clinic .graph_cont .graph_box .bar_box .label.gy{font-size: var(--txt20); background-color: #eaeaea; color: #444444;} .clinic .graph_cont .graph_box .bar_box .label.gy:before{background: url('data:image/svg+xml,') no-repeat center / contain;} .clinic .graph_cont.active .graph_box .bar_box .label{ opacity: 1; transform: translate(-50%, -100%); } /* 그래프 cont_그래프내부 label */ .clinic .graph_cont .graph_label{position: absolute; top: 5%; left: 50%; transform: translateX(-50%); color: #fff; font-size:var(--txt16); font-weight: 600;} /* bar 2개씩 */ .clinic .graph_cont .graph_box .bar_box.bar_2{gap:1.6rem; } .clinic .graph_cont .graph_box .bar_box.bar_2 .bar{position: relative; background: #FCA400; z-index: 2; border-radius: 0.8rem;} .clinic .graph_cont .graph_box .bar_box.bar_2 .bar.gy{background: #D9D9D9; z-index: 1;} .clinic .graph_cont .graph_y + .graph_box .bar_box.bar_2 .bar{border-radius: 0.8rem 0.8rem 0 0;} .clinic .graph_cont .graph_box .bar_box.bar_2 .bar{width: 4.5rem;} .clinic .graph_cont .graph_box .bar_box .label.gy_txt{color: #AAA; font-size:var(--txt18); padding: 0; background: none; top: -0.6em;} .clinic .graph_cont .graph_box .bar_box .label.gy_txt:before{display: none;} /* ------ 그래프 transition ------ */ .clinic .graph_cont .graph_box .bar_box:nth-child(1) .bar { transition-delay: 0.4s } .clinic .graph_cont .graph_box .bar_box:nth-child(2) .bar { transition-delay: 0.6s } .clinic .graph_cont .graph_box .bar_box:nth-child(3) .bar { transition-delay: 0.8s } .clinic .graph_cont .graph_box .bar_box:nth-child(4) .bar { transition-delay: 1s } .clinic .graph_cont .graph_box .bar_box:nth-child(5) .bar { transition-delay: 1.2s } .clinic .graph_cont .graph_box .bar_box:nth-child(6) .bar { transition-delay: 1.4s } .clinic .graph_cont .graph_box .bar_box:nth-child(7) .bar { transition-delay: 1.6s } .clinic .graph_cont .graph_box .bar_box:nth-child(8) .bar { transition-delay: 1.8s } .clinic .graph_cont .graph_box .bar_box:nth-child(9) .bar { transition-delay: 2s } .clinic .graph_cont .graph_box .bar_box:nth-child(10) .bar { transition-delay: 2.2s } .clinic .graph_cont .graph_box .bar_box:nth-child(11) .bar { transition-delay: 2.4s } .clinic .graph_cont .graph_box .bar_box:nth-child(12) .bar { transition-delay: 2.6s } .clinic .graph_cont .graph_box .bar_box:nth-child(1) .bar .btm_label { transition-delay: 0.6s; } .clinic .graph_cont .graph_box .bar_box:nth-child(2) .bar .btm_label { transition-delay: 0.8s; } .clinic .graph_cont .graph_box .bar_box:nth-child(3) .bar .btm_label { transition-delay: 1s } .clinic .graph_cont .graph_box .bar_box:nth-child(4) .bar .btm_label { transition-delay: 1.2s } .clinic .graph_cont .graph_box .bar_box:nth-child(5) .bar .btm_label { transition-delay: 1.4s } .clinic .graph_cont .graph_box .bar_box:nth-child(6) .bar .btm_label { transition-delay: 1.6s } .clinic .graph_cont .graph_box .bar_box:nth-child(7) .bar .btm_label { transition-delay: 1.8s } .clinic .graph_cont .graph_box .bar_box:nth-child(8) .bar .btm_label { transition-delay: 2s } .clinic .graph_cont .graph_box .bar_box:nth-child(9) .bar .btm_label { transition-delay: 2.2s } .clinic .graph_cont .graph_box .bar_box:nth-child(10) .bar .btm_label { transition-delay: 2.4s } .clinic .graph_cont .graph_box .bar_box:nth-child(11) .bar .btm_label { transition-delay: 2.6s } .clinic .graph_cont .graph_box .bar_box:nth-child(12) .bar .btm_label { transition-delay: 2.8s } .clinic .graph_cont .graph_box .bar_box:nth-of-type(1) .bar .label { transition-delay: 1s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(2) .bar .label { transition-delay: 1.2s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(3) .bar .label { transition-delay: 1.4s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(4) .bar .label { transition-delay: 1.6s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(5) .bar .label { transition-delay: 1.8s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(6) .bar .label { transition-delay: 2s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(7) .bar .label { transition-delay: 2.2s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(8) .bar .label { transition-delay: 2.6s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(9) .bar .label { transition-delay: 2.8s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(10) .bar .label { transition-delay: 3s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(11) .bar .label { transition-delay: 3.2s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(12) .bar .label { transition-delay: 3.4s; } /* 전립선클리닉_전립선비대증 */ /*.sub_bph .clinic .graph_cont{width: 90rem;}*/ .sub_bph .clinic .graph_cont .graph_box .bar_box .label:not(.gy){font-size: var(--tit35);} .sub_bph .graph_cont.active .graph_box .bar_box:nth-child(1) .bar {height: 50%;} .sub_bph .graph_cont.active .graph_box .bar_box:nth-child(2) .bar {height: 60%;} .sub_bph .graph_cont.active .graph_box .bar_box:nth-child(3) .bar {height: 70%;} .sub_bph .graph_cont.active .graph_box .bar_box:nth-child(4) .bar {height: 80%;} /* 전립선클리닉_홀렙수술 */ .sub_holep .clinic .graph_cont{width:90%;} .sub_holep .clinic .graph_cont .graph_wrap{height: 40rem;} .sub_holep .graph_cont.active .graph_box .bar_box:nth-child(1) .bar:nth-child(1) {height: 31%;} .sub_holep .graph_cont.active .graph_box .bar_box:nth-child(1) .bar:nth-child(2) {height: 99%;} .sub_holep .graph_cont.active .graph_box .bar_box:nth-child(2) .bar:nth-child(1) {height: 38%;} .sub_holep .graph_cont.active .graph_box .bar_box:nth-child(2) .bar:nth-child(2) {height: 76%;} .sub_holep .graph_cont.active .graph_box .bar_box:nth-child(3) .bar:nth-child(1) {height: 43%;} .sub_holep .graph_cont.active .graph_box .bar_box:nth-child(3) .bar:nth-child(2) {height: 60%;} .sub_holep .graph_cont.active .graph_box .bar_box:nth-child(4) .bar:nth-child(1) {height: 70%;} .sub_holep .graph_cont.active .graph_box .bar_box:nth-child(4) .bar:nth-child(2) {height: 64%;} /* 전립선클리닉_전립선염 */ .sub_prostatitis .clinic .graph_cont.active .graph_box .bar_box .bar{width: 8.5rem} .sub_prostatitis .clinic .graph_cont .graph_box .bar_box .label{padding: 0.6em 0.7em;} .sub_prostatitis .graph_cont.active .graph_box .bar_box:nth-child(1) .bar {height: 75%;} .sub_prostatitis .graph_cont.active .graph_box .bar_box:nth-child(2) .bar {height: 92%;} .sub_prostatitis .graph_cont.active .graph_box .bar_box:nth-child(3) .bar {height: 35%;} /* 전립선클리닉_전립선암 */ .sub_prostate-cancer .clinic .graph_cont.active .graph_box .bar_box .bar{width: 8.5rem;} .sub_prostate-cancer .clinic .graph_cont .graph_box .bar_box .label:not(.gy){font-size: var(--tit35);} .sub_prostate-cancer .clinic .graph_cont .graph_status_wrap{margin-bottom: 14rem} .sub_prostate-cancer .graph_cont.active .graph_box .bar_box:nth-child(1) .bar {height: 99%;} .sub_prostate-cancer .graph_cont.active .graph_box .bar_box:nth-child(2) .bar {height: 85%;} .sub_prostate-cancer .graph_cont.active .graph_box .bar_box:nth-child(3) .bar {height: 77%;} .sub_prostate-cancer .graph_cont.active .graph_box .bar_box:nth-child(4) .bar {height: 65%;} .sub_prostate-cancer .graph_cont.active .graph_box .bar_box:nth-child(5) .bar {height: 54%;} /* 요로결석클리닉_요로결석 */ .sub_urinary-stone .clinic .graph_cont{width:95%;} .sub_urinary-stone .clinic .graph_cont .graph_wrap{height: 40rem;} .sub_urinary-stone .clinic .graph_cont .graph_y .line{margin-left: 7rem} .sub_urinary-stone .clinic .graph_cont .graph_box .bar_box .label.gy{font-size: var(--txt16); font-weight: 700; } .sub_urinary-stone .clinic .graph_cont1 .graph_box .bar_box .label.gy{color: #101010;} .sub_urinary-stone .clinic .graph_cont .graph_box .bar_box .label.gy_txt{font-size: var(--txt16);} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(1) .bar:nth-child(1) {height: 40%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(1) .bar:nth-child(2) {height: 10%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(2) .bar:nth-child(1) {height: 51%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(2) .bar:nth-child(2) {height: 12%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(3) .bar:nth-child(1) {height: 65%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(3) .bar:nth-child(2) {height: 15%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(4) .bar:nth-child(1) {height: 82%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(4) .bar:nth-child(2) {height: 32%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(5) .bar:nth-child(1) {height: 62%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(5) .bar:nth-child(2) {height: 30%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(6) .bar:nth-child(1) {height: 40%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(6) .bar:nth-child(2) {height: 20%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(7) .bar:nth-child(1) {height: 15%;} .sub_urinary-stone .graph_cont.active .graph_box .bar_box:nth-child(7) .bar:nth-child(2) {height: 5%;} .graph_sect .graph_cont + .step_list {margin-top: 7rem;} .sub_urinary-stone .clinic .graph_cont2 .graph_box{gap: 7.5rem} .sub_urinary-stone .clinic .graph_cont2 .graph_box .bar_box .bar{width: 1.8rem;} .sub_urinary-stone .clinic .graph_cont2 .graph_wrap{height: 20rem;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(1) .bar:nth-child(1) {height: 40%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(2) .bar:nth-child(1) {height: 36%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(3) .bar:nth-child(1) {height: 38%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(4) .bar:nth-child(1) {height: 43%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(5) .bar:nth-child(1) {height: 38%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(6) .bar:nth-child(1) {height: 45%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(7) .bar:nth-child(1) {height: 60%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(8) .bar:nth-child(1) {height: 60%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(9) .bar:nth-child(1) {height: 92%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(10) .bar:nth-child(1) {height: 60%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(11) .bar:nth-child(1) {height: 50%;} .sub_urinary-stone .graph_cont2.active .graph_box .bar_box:nth-child(12) .bar:nth-child(1) {height: 42%;} /* 요로결석클리닉_유로닷 */ /* 위 */ .sub_urodot .clinic .urodot_step1 .graph_cont{padding-bottom: 0; padding-top: 15%;} .sub_urodot .clinic .urodot_step1 .pc{display: flex; align-items: center;} .sub_urodot .clinic .urodot_step1 .pc .left {position: relative; width: 54%} .sub_urodot .clinic .urodot_step1 .pc .left .arr{position: absolute; left: calc(100% + -6%); top: 50%; transform: translateY(-50%); width: 20%;} .sub_urodot .clinic .urodot_step1 .pc .right{display: flex; justify-content: center; flex: 1;} .sub_urodot .clinic .urodot_step1 .graph_cont .graph_box .bar_box .label.gy_txt{color: #000; text-align: center;} .sub_urodot .clinic .urodot_step1 .graph_cont .graph_box .bar_box .label.gy_txt .txt{display: block; font-size: var(--txt20); margin-bottom: 0.8rem;} .sub_urodot .clinic .urodot_step1 .graph_cont .graph_box .bar_box .label.gy_txt .num{display: block; font-size: var(--tit30); font-weight: 700;} .sub_urodot .clinic .urodot_step1 .graph_cont .graph_box .bar_box .label.gy_txt .num span{font-size:1.6em;} .sub_urodot .clinic .urodot_step1 .graph_cont.active .graph_box .bar_box:nth-child(1) .bar{height: 97%;} .sub_urodot .clinic .urodot_step1 .graph_cont.active .graph_box .bar_box:nth-child(2) .bar{height: 90%;} .sub_urodot .clinic .urodot_step1 .graph_cont.active .graph_box .bar_box .bar{width: 7.2rem; background: #FCA400; border-radius: 0.8rem 0.8rem 0 0;} /* 아래 */ .sub_urodot.bg {background: #000; color:#fff;} .sub_urodot .graph_cont .graph_box .bar_box { position: relative; } .sub_urodot .clinic .graph_cont.bg .graph_wrap{height: 22rem} .sub_urodot .clinic .graph_cont.bg .graph_status_wrap{justify-content: flex-end; color: #fff} .sub_urodot .clinic .graph_cont.bg .graph_status_wrap div{color: #fff} .sub_urodot .clinic .graph_cont.bg .graph_box .bar_box.bar_2{gap: 4rem; } .sub_urodot .clinic .graph_cont.bg .graph_box .bar_box.bar_2 .bar{width: 7.5rem; border-radius: 0.8rem 0.8rem 0 0; background: linear-gradient(0deg, #272727 0%, #FCA400 103.46%); margin-bottom: 0;} .sub_urodot .clinic .graph_cont.bg .graph_box .bar_box.bar_2 .bar.gy{background: linear-gradient(0deg, #272727 0%, #72716F 103.46%);} .sub_urodot .clinic .graph_cont.bg .graph_box .bar_box .btm_label{color: #fff} .sub_urodot .clinic .graph_cont.bg .graph_wrap{border-bottom:1px solid rgba(255, 255, 255, 0.30);} .sub_urodot .clinic .graph_cont.bg .graph_box .bar_box .label.gy{background: #fff; color: #000; font-size:var(--txt16); top: -1.8em; font-weight: 700; padding: 0.6em 1em;} .sub_urodot .clinic .graph_cont.bg .graph_box .bar_box .label.gy span{font-size: 3em;} .sub_urodot .clinic .graph_cont.bg .graph_status_wrap{margin-bottom: 15rem;} .graph_cont .graph_box .bar_box{position: relative;} .graph_cont .graph_box .bar_box .dot { position: absolute; left: 50%; top: -0.5rem; transform: translateX(-50%); width: 1rem; height: 1rem; border-radius: 100%; background-color: #FCA400; border: 2px solid #fff; z-index: 10; opacity: 0; transition: opacity 0.3s ease; } .graph_cont.active .graph_box .bar_box .dot{opacity: 1} .clinic .graph_cont .graph_box .bar_box:nth-of-type(1) .bar .dot { transition-delay: 1s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(2) .bar .dot { transition-delay: 1.2s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(3) .bar .dot { transition-delay: 1.4s; } .graph_cont .graph_box .bar_box .dot_line {position: absolute;left: 0;top: 0;width: 0;height: 0;border-bottom: 1px dashed #fff;z-index: 5;opacity: 0;transition: opacity 0.5s ease;} .graph_cont.active .graph_box .bar_box .dot_line {opacity: 1;} .clinic .graph_cont .graph_box .bar_box:nth-of-type(1) .dot_line { transition-delay: 2s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(2) .dot_line { transition-delay: 2s; } .clinic .graph_cont .graph_box .bar_box:nth-of-type(3) .dot_line { transition-delay: 2s; } .sub_urodot .graph_cont.bg.active .graph_box .bar_box:nth-child(1) .bar:nth-child(1) {height: 60%;} .sub_urodot .graph_cont.bg.active .graph_box .bar_box:nth-child(1) .bar:nth-child(2) {height: 85%;} .sub_urodot .graph_cont.bg.active .graph_box .bar_box:nth-child(2) .bar:nth-child(1) {height: 62%;} .sub_urodot .graph_cont.bg.active .graph_box .bar_box:nth-child(2) .bar:nth-child(2) {height: 90%;} .sub_urodot .graph_cont.bg.active .graph_box .bar_box:nth-child(3) .bar:nth-child(1) {height: 38%;} .sub_urodot .graph_cont.bg.active .graph_box .bar_box:nth-child(3) .bar:nth-child(2) {height: 100%;} /* 성병클리닉_가다실 */ .person_bar { position: relative; display: inline-block; } .person_bar svg { display: block; height: auto; } .graph_cont .person_fill_overlay { position: absolute; inset: 0; overflow: hidden; width: 0; transition: width 0.3s linear; pointer-events: none; } .graph_cont.active .person_fill_overlay { width: 100%; } .sub_gardasil .clinic .graph_cont{width: 100%} .sub_gardasil .clinic .graph_cont .graph_box{gap: 1.6rem; justify-content: center} .sub_gardasil .clinic .graph_cont .graph_box{margin-top: 10rem;} .sub_gardasil .clinic .graph_cont .graph_box .person_bar svg{width: 12rem; height: auto} .sub_gardasil .clinic .graph_cont .graph_box .bar_box .label{font-size:var(--tit30); transition-delay: 1.8s} /* 배뇨장애클리닉_신장질환 */ .clinic .black_in .graph_cont.active .graph_box .bar_box .btm_label{color: #fff;} .clinic .black_in .graph_cont .graph_box .bar_box .label.gy_txt{color: #fff; font-size: var(--txt20);} .sub_kidney-disease .clinic .graph_cont{width: 100%; padding-bottom: 4rem;} .sub_kidney-disease .clinic .graph_cont .graph_box {gap: 3.5rem} .sub_kidney-disease .clinic .graph_cont .graph_box .bar_box .bar{width: 5.5rem;} .sub_kidney-disease .clinic .graph_cont .graph_wrap{height: 30rem;} .sub_kidney-disease .graph_cont.active .graph_box .bar_box:nth-child(1) .bar {height: 65%;} .sub_kidney-disease .graph_cont.active .graph_box .bar_box:nth-child(2) .bar {height: 60%;} .sub_kidney-disease .graph_cont.active .graph_box .bar_box:nth-child(3) .bar {height: 70%;} .sub_kidney-disease .graph_cont.active .graph_box .bar_box:nth-child(4) .bar {height: 82%;} .sub_kidney-disease .graph_cont.active .graph_box .bar_box:nth-child(5) .bar {height: 100%;} .sub_kidney-disease .graph_cont.active .graph_box .bar_box:nth-child(6) .bar {height: 68%;} .sub_kidney-disease .graph_cont.active .graph_box .bar_box:nth-child(7) .bar {height: 60%;} .sub_kidney-disease .graph_cont.active .graph_box .bar_box:nth-child(8) .bar {height: 35%;} /* 배뇨장애클리닉_방광암 */ .sub_bladder-cancer .clinic .graph_cont{width: 100%} .sub_bladder-cancer .clinic .graph_cont .graph_wrap{height: 32rem; } .sub_bladder-cancer .clinic .graph_cont .graph_box .bar_box.bar_2{gap: 2rem} .sub_bladder-cancer .clinic .graph_cont .graph_box .bar_box.bar_2 .bar{width: 6rem;} .sub_bladder-cancer .clinic .graph_cont .graph_box .bar_box.bar_2 .bar:not(.gy){background: linear-gradient(180deg, #FCA400 0%, #EFEFEF 90.68%);} .sub_bladder-cancer .clinic .graph_cont .graph_box .bar_box .label[class$="label"]{font-size: 4rem; font-weight: 700} .sub_bladder-cancer .clinic .graph_cont .graph_box .bar_box .label.gy{font-weight: 700; color: #000} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(1) .bar:nth-child(1) {height: 25%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(1) .bar:nth-child(2) {height: 12%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(2) .bar:nth-child(1) {height: 45%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(2) .bar:nth-child(2) {height: 20%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(3) .bar:nth-child(1) {height: 78%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(3) .bar:nth-child(2) {height: 25%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(4) .bar:nth-child(1) {height: 100%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(4) .bar:nth-child(2) {height: 35%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(5) .bar:nth-child(1) {height: 55%;} .sub_bladder-cancer .graph_cont.active .graph_box .bar_box:nth-child(5) .bar:nth-child(2) {height: 25%;} .graph_sect .graph_txt{margin-top: 4rem} /* 배뇨장애클리닉_혈뇨 */ .clinic .graph_cont.horiz_graph{position: relative; padding-bottom: 0; width: 100%;} .clinic .graph_cont.horiz_graph .graph_wrap{height: 100%;} .clinic .graph_cont.horiz_graph .graph_x{position: absolute; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; left: 0; top: calc(100% + 2rem); justify-content: space-between; width: 100%; font-size: var(--txt16);color: #444;line-height: 1;} .clinic .graph_cont.horiz_graph .graph_x span{white-space: nowrap} .clinic .graph_cont.horiz_graph .frame{width: 100%;} .clinic .graph_cont.horiz_graph .frame img{width: 100%; height: 100%;} .clinic .graph_cont.horiz_graph .graph_box{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; flex-direction: column; gap: 1rem; padding: 1rem 0;} .clinic .graph_cont.horiz_graph .graph_box .bar_box{justify-content: flex-end; align-items: center} .clinic .graph_cont.horiz_graph .graph_label{top: 50%; transform: translateY(-50%); left: unset; left: 1.6rem; white-space: nowrap; color: #5d5d5d;} .clinic .graph_cont.horiz_graph .graph_box .bar_box .bar{height: 5.5rem; width: 20%; background: linear-gradient(270deg, #FCA400 12.6%, #EFEFEF 95.58%); border-radius: 1rem; transition: width 0.8s; transform-origin: right} .clinic .graph_cont.horiz_graph.active .graph_box .bar_box .bar{height: 5.5rem; width: 90%} .clinic .graph_cont.horiz_graph .graph_label{font-size: var(--txt20);} .sub_hematuria .clinic .graph_cont.horiz_graph{width: 65%; margin: 0;} .sub_hematuria .clinic .graph_cont.horiz_graph.active .graph_box .bar_box:nth-child(1) .bar{width: 93%} .sub_hematuria .clinic .graph_cont.horiz_graph.active .graph_box .bar_box:nth-child(2) .bar{width: 85.8%} .sub_hematuria .clinic .graph_cont.horiz_graph.active .graph_box .bar_box:nth-child(3) .bar{width: 71.5%} .sub_hematuria .clinic .graph_cont.horiz_graph.active .graph_box .bar_box:nth-child(4) .bar{width: 43%} .sub_hematuria .clinic .graph_cont.horiz_graph.active .graph_box .bar_box:nth-child(5) .bar{width: 28.6%} /* 남성클리닉_발기부전 */ .sub_ed .clinic .graph_cont{margin-top: 10rem} .sub_ed .clinic .graph_cont .graph_box .bar_box .label{font-weight: 700} .sub_ed .clinic .graph_cont .graph_box .bar_box .label:not(.gy){font-size: 4rem; padding: 0.3em 0.4em;} .sub_ed .graph_cont.active .graph_box .bar_box:nth-child(1) .bar {height: 23%;} .sub_ed .graph_cont.active .graph_box .bar_box:nth-child(2) .bar {height: 34%;} .sub_ed .graph_cont.active .graph_box .bar_box:nth-child(3) .bar {height: 64%;} .sub_ed .graph_cont.active .graph_box .bar_box:nth-child(4) .bar {height: 86%;} /* 여성클리닉_방광염 */ .sub_cystitis .graph_sect .graph_area2{justify-content: center;} .sub_cystitis .graph_sect .graph_area2 .left{left: 0; margin-right: 16rem;} .sub_cystitis .clinic .graph_cont{width: 100%} .sub_cystitis .clinic .graph_cont .graph_box .bar_box .label:not(.gy_txt){font-size: var(--txt20)} .sub_cystitis .clinic .graph_cont .graph_box .bar_box .label.gy_txt{color: #000; font-weight: 700} .sub_cystitis .clinic .graph_cont .graph_wrap{height: 24rem} .sub_cystitis .clinic .graph_cont .graph_box .bar_box .bar{width: 5rem} .sub_cystitis .graph_cont.active .graph_box .bar_box:nth-child(1) .bar {height: 18%;} .sub_cystitis .graph_cont.active .graph_box .bar_box:nth-child(2) .bar {height: 62%;} .sub_cystitis .graph_cont.active .graph_box .bar_box:nth-child(3) .bar {height: 60%;} .sub_cystitis .graph_cont.active .graph_box .bar_box:nth-child(4) .bar {height: 72%;} .sub_cystitis .graph_cont.active .graph_box .bar_box:nth-child(5) .bar {height: 100%;} .sub_cystitis .graph_cont.active .graph_box .bar_box:nth-child(6) .bar {height: 99%;} .sub_cystitis .graph_cont.active .graph_box .bar_box:nth-child(7) .bar {height: 65%;} .sub_cystitis .graph_cont.active .graph_box .bar_box:nth-child(8) .bar {height: 50%;} /* 여성클리닉_요실금 */ .sub_incontinence .clinic .graph_cont{width: 100%; padding-bottom: 0;} .sub_incontinence .clinic .graph_cont .graph_wrap{display: flex; align-items: center; height: auto;} .sub_incontinence .clinic .graph_cont .graph_wrap .left{display: flex; flex: 1; gap: 1.6rem; padding-top: 6rem;} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap{flex: 1; display: flex; flex-direction: column; align-items: center} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .graph_box{height: 30rem;} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .graph_box .bar_box.bar_2{gap: 6rem} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .graph_box .bar_box.bar_2 .bar{width: 5.5rem} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .graph_box .bar_box.bar_2 .bar:not(.gy){background: linear-gradient(360deg, #EFEFEF 8.24%, #FCA400 103.46%);} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .txt_box{width: 100%; background: #f6f6f6; border-radius:5px; padding: 1.6rem 1rem; text-align: center; margin-top: 2rem} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .txt_box .year{font-size:var(--txt16);} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .txt_box .num{font-size:var(--txt20); font-weight: 700} .sub_incontinence .clinic .graph_cont .graph_wrap .right{position: relative; width: 25%; margin-left: 8rem} .sub_incontinence .clinic .graph_cont .graph_wrap .right svg{width: 100%;} .sub_incontinence .clinic .graph_cont .graph_wrap .right .txt_box{position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%);text-align: center;} .sub_incontinence .clinic .graph_cont .graph_wrap .right .txt_box .num{font-size: var(--txt20); font-weight:700; line-height: 1; white-space: nowrap} .sub_incontinence .clinic .graph_cont .graph_wrap .right .txt_box .num span{font-size:3em;} .sub_incontinence .clinic .graph_cont .graph_wrap .right .txt_box .txt{font-size: var(--txt18); font-weight: 700; margin-top: 0.5rem; line-height: 1.4} .sub_incontinence .graph_cont.active .graph_box_wrap:nth-child(1) .graph_box .bar_box.bar_2 .bar:nth-child(1) {height: 12%;} .sub_incontinence .graph_cont.active .graph_box_wrap:nth-child(1) .graph_box .bar_box.bar_2 .bar:nth-child(2) {height: 90%;} .sub_incontinence .graph_cont.active .graph_box_wrap:nth-child(2) .graph_box .bar_box.bar_2 .bar:nth-child(1) {height: 13%;} .sub_incontinence .graph_cont.active .graph_box_wrap:nth-child(2) .graph_box .bar_box.bar_2 .bar:nth-child(2) {height: 95%;} .sub_incontinence .graph_cont.active .graph_box_wrap:nth-child(3) .graph_box .bar_box.bar_2 .bar:nth-child(1) {height: 10%;} .sub_incontinence .graph_cont.active .graph_box_wrap:nth-child(3) .graph_box .bar_box.bar_2 .bar:nth-child(2) {height: 100%;} .sub_incontinence .clinic .graph_cont .graph_wrap .right{opacity: 0; transform: translateY(50px);transition: opacity 1s ease, transform 1s ease;} .sub_incontinence .clinic .graph_cont.active .graph_wrap .right{opacity: 1; transform: translateY(0)} /* ---------- 반응형 ---------- */ @media screen and (max-width: 1000px) { .clinic .graph_cont, .sub_holep .clinic .graph_cont{width:90%;} /* 요로결석클리닉_요로결석 */ .sub_urinary-stone .clinic .graph_cont{width:100%;} .sub_urinary-stone .clinic .graph_cont .graph_box{gap: 4.5rem;} .sub_urinary-stone .clinic .graph_cont2 .graph_box{gap: 8rem;} .sub_urinary-stone .clinic .graph_cont .graph_box .bar_box .label{font-size: 16px} .sub_urinary-stone .clinic .graph_cont .graph_box .bar_box .label.gy_txt, .sub_urinary-stone .clinic .graph_cont .graph_box .bar_box .label.gy{font-size: 11px} .graph_sect .graph_cont + .step_list {margin-top: 5rem;} /* 성병클리닉_가다실 */ .sub_gardasil .clinic .graph_cont .graph_box .bar_box .person_bar svg{width: 9rem} .sub_hematuria .clinic .graph_cont.horiz_graph{width: 100%;} /* 여성클리닉_방광염 */ .sub_cystitis .graph_sect .graph_area2 .left{margin-right: 5rem; padding-left: 0;} .sub_cystitis .clinic .graph_cont .graph_box{gap: 5rem} /* 여성클리닉_요실금 */ .sub_incontinence .clinic .graph_cont .graph_wrap .right{margin-left: 3rem} } @media screen and (max-width: 769px) { .clinic .graph_cont, .sub_holep .clinic .graph_cont, .sub_urinary-stone .clinic .graph_cont{width:100%;} /* 스크롤 */ .clinic .graph_sect .graph_scroll {overflow-x:auto; width: calc(100% + var(--inPd) * 2); margin-left: calc(var(--inPd) * -1); padding-bottom: 5rem; padding-top: 3rem;} .clinic .graph_cont .graph_scroll .graph_wrap{max-width: unset; } .clinic .graph_sect .graph_scroll .graph_y{padding: 0 var(--inPd);} .clinic .graph_sect .graph_scroll .graph_y .txt{left: var(--inPd);} .clinic .graph_sect .graph_scroll::-webkit-scrollbar{display: none} .clinic .graph_sect .graph_scroll.off:after { opacity:0; visibility: hidden; pointer-events: none;} @keyframes scrollright { 0% { transform:translateX(-1rem); } 100% { transform:translateX(1rem);} } /* 요로결석클리닉_요로결석 */ .sub_urinary-stone .clinic .graph_cont .graph_wrap{width: 800px; max-width: unset;} .sub_urinary-stone .clinic .graph_sect .graph_scroll:after { content:''; position:absolute; left:50%; top:50%; margin:-2.5em 0 0 -2.5em; width:5em; height:5em; animation: scrollright 1s alternate infinite; background: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='150' height='150' rx='75' fill='black' fill-opacity='0.5'/%3E%3Cpath d='M70.792 37.5C68.4274 37.5 66.5162 39.4226 66.5162 41.7903V77.0027C66.5162 78.5248 64.9072 79.5217 63.5471 78.8274C63.5471 78.8274 61.0047 73.7717 60.0891 72.125C58.2668 68.8494 55.8666 67.5142 53.6709 67.0425C50.2752 66.3037 43.4658 66.8645 51.5286 78.2133C51.5286 78.2133 61.947 100.217 63.1737 102.255C63.9738 103.59 67.1473 111.957 72.9254 112.5H87.9041C96.7936 112.482 100.74 103.332 100.74 92.0722V74.19C100.74 70.7097 97.9225 67.8792 94.4379 67.8792H94.349C93.14 67.8792 92.18 68.8405 92.18 70.0243V78.2133V66.9446C92.18 63.3931 89.3087 60.518 85.7618 60.518C84.5795 60.518 83.6194 61.4793 83.6194 62.6632V73.9319V59.3075C83.6194 55.756 80.7481 52.881 77.2013 52.881C76.019 52.881 75.0589 53.8423 75.0589 55.0261V69.6416V41.7903C75.0589 39.4226 73.1388 37.5 70.7831 37.5H70.792Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42.8216 45.356H58.5337' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45.9639 40.6421L41.2502 45.3557L45.9639 50.0693' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M100.956 45.356H85.2441' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M97.8135 40.6421L102.527 45.3557L97.8135 50.0693' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% 50% / contain; z-index:2; transition: all 1s ease;} .sub_urinary-stone .clinic .graph_sect .graph_cont2 .graph_scroll{padding-top: 7rem;} /*.sub_urinary-stone .clinic .graph_cont .graph_y .line{margin-left: 8rem}*/ /* 성병클리닉_가다실 */ .sub_gardasil .clinic .graph_cont .graph_box{margin-top: 12rem} .sub_gardasil .clinic .graph_cont .graph_box .bar_box .person_bar svg{width: 8rem} /* 배뇨장애클리닉_방광암 */ .sub_bladder-cancer .clinic .graph_cont{width: 100%} .sub_bladder-cancer .clinic .graph_cont .graph_wrap{height: 38rem;padding-top: 10rem;} .sub_bladder-cancer .clinic .graph_cont.active .graph_status_wrap{margin-bottom: 3rem;} /* 여성클리닉_방광염 */ .sub_cystitis .clinic .graph_sect .graph_scroll{padding-top: 8rem;} .sub_cystitis .graph_sect .graph_area2 .left{margin-right: 0; margin:0 auto 6rem;} /* 여성클리닉_요실금 */ .sub_incontinence .clinic .graph_cont .graph_wrap{flex-direction: column;} .sub_incontinence .clinic .graph_cont .graph_status_wrap{margin-bottom: 15rem;} .sub_incontinence .clinic .graph_cont .graph_wrap .left{width: 100%; margin-bottom: var(--contMt2);)} .sub_incontinence .clinic .graph_cont .graph_wrap .right{width: 80%; max-width: 260px;} /* 유로닷 */ .sub_urodot .clinic .graph_cont.bg .graph_status_wrap{margin-bottom: 5rem;} .sub_urodot .clinic .graph_sect .graph_scroll{padding-top: 13rem;} } @media screen and (max-width: 600px) { /*.clinic .sub_tit_box + .graph_cont{margin-top: calc(-1 * var(--contMt2));}*/ .clinic .graph_cont .graph_status_wrap{flex-direction: column; align-items: flex-start; margin-bottom: 8rem;} .clinic .graph_cont .graph_status_wrap .graph_status{margin-top: 4rem; } .clinic .graph_cont .graph_box .bar_box .label{font-size: 15px} .clinic .graph_cont .graph_y .txt{font-size:10px;} .clinic .graph_cont .graph_box .bar_box .label.gy, .clinic .graph_cont .graph_box .bar_box .label.gy_txt{font-size: 11px;} .clinic .graph_cont .graph_box .bar_box .bar{width: 5rem;} .clinic .graph_sect .graph_scroll:after { content:''; position:absolute; left:50%; top:50%; margin:-2.5em 0 0 -2.5em; width:5em; height:5em; animation: scrollright 1s alternate infinite; background: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='150' height='150' rx='75' fill='black' fill-opacity='0.5'/%3E%3Cpath d='M70.792 37.5C68.4274 37.5 66.5162 39.4226 66.5162 41.7903V77.0027C66.5162 78.5248 64.9072 79.5217 63.5471 78.8274C63.5471 78.8274 61.0047 73.7717 60.0891 72.125C58.2668 68.8494 55.8666 67.5142 53.6709 67.0425C50.2752 66.3037 43.4658 66.8645 51.5286 78.2133C51.5286 78.2133 61.947 100.217 63.1737 102.255C63.9738 103.59 67.1473 111.957 72.9254 112.5H87.9041C96.7936 112.482 100.74 103.332 100.74 92.0722V74.19C100.74 70.7097 97.9225 67.8792 94.4379 67.8792H94.349C93.14 67.8792 92.18 68.8405 92.18 70.0243V78.2133V66.9446C92.18 63.3931 89.3087 60.518 85.7618 60.518C84.5795 60.518 83.6194 61.4793 83.6194 62.6632V73.9319V59.3075C83.6194 55.756 80.7481 52.881 77.2013 52.881C76.019 52.881 75.0589 53.8423 75.0589 55.0261V69.6416V41.7903C75.0589 39.4226 73.1388 37.5 70.7831 37.5H70.792Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42.8216 45.356H58.5337' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45.9639 40.6421L41.2502 45.3557L45.9639 50.0693' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M100.956 45.356H85.2441' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M97.8135 40.6421L102.527 45.3557L97.8135 50.0693' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% 50% / contain; z-index:2; transition: all 1s ease;} /* 전립선클리닉_홀렙수술 */ .sub_holep .clinic .graph_cont .graph_wrap{width: 540px;} /* 전립선클리닉_전립선암 */ .sub_prostate-cancer .clinic .graph_cont .graph_box{gap: 3rem} .sub_prostate-cancer .clinic .graph_cont.active .graph_box .bar_box .bar{width: 6rem;} .sub_prostate-cancer .clinic .graph_cont .graph_box .bar_box .label:not(.gy){font-size: 16px;} /* 요로결석클리닉_요로결석 */ .sub_urinary-stone .clinic .graph_cont .graph_wrap{width: 800px;} .sub_urinary-stone .clinic .graph_cont .graph_box .bar_box .label.gy{font-size: 11px} .sub_urinary-stone .clinic .graph_cont2 .graph_box{gap: 8rem} .graph_sect .graph_cont + .step_list {margin-top: 1rem;} /* 성병클리닉_가다실 */ .sub_gardasil .clinic .graph_cont .graph_box{gap: 0.5rem; margin-top: 15rem} .sub_gardasil .clinic .graph_cont .graph_box .bar_box{width: 10%;} .sub_gardasil .clinic .graph_cont .graph_box .bar_box .person_bar svg{width: 5rem; height: auto} .sub_gardasil .clinic .graph_cont .graph_box .bar_box .label{font-size:16px;} /* 배뇨장애클리닉_신장질환 */ .sub_kidney-disease .img_box7 .img:nth-child(1){max-width: 280px; margin-left: auto; margin-right: auto} .sub_kidney-disease .clinic .graph_cont .graph_box .bar_box .bar{width: 3.5rem} .clinic .black_in .graph_cont .graph_box .bar_box .label.gy_txt{font-size:11px;} /* 배뇨장애클리닉_방광암 */ .sub_bladder-cancer .clinic .graph_cont .graph_box{gap: 4rem} .sub_bladder-cancer .clinic .graph_cont .graph_wrap{width: 450px; } .sub_bladder-cancer .clinic .graph_cont .graph_box .bar_box.bar_2 .bar{width:5rem} .sub_bladder-cancer .clinic .graph_cont .graph_box .bar_box.bar_2{gap: 1rem} /* 배뇨장애클리닉_혈뇨 */ .clinic .graph_cont.horiz_graph .graph_box{gap: 0.5rem} .clinic .graph_cont.horiz_graph.active .graph_box .bar_box .bar{height: 3rem; border-radius: 3px;} .sub_hematuria .clinic .graph_cont.horiz_graph .graph_label{font-size: 11px;} .sub_hematuria .clinic .graph_cont.horiz_graph .graph_x{font-size: 11px;} /* 남성클리닉 */ .sub_ed .clinic .sub_tit_box + .graph_cont{margin-top: 0;} /* 여성클리닉_방광염 */ .sub_cystitis .clinic .graph_cont .graph_wrap{width: 500px;} .sub_cystitis .clinic .graph_cont .graph_box{gap: 5.3rem} .sub_cystitis .graph_sect .graph_area2 .left{margin-bottom: 5rem;} /* 여성클리닉_요실금 */ .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .graph_box .bar_box.bar_2 .bar{width: 4rem} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .graph_box .bar_box.bar_2{gap: 4rem} .sub_incontinence .clinic .graph_cont .graph_box .bar_box .label {font-size: 11px;} .sub_incontinence .clinic .graph_cont .graph_status_wrap{margin-bottom: 9rem;} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .txt_box .year{font-size: 11px; line-height: 1.4} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap .txt_box .num{font-size: 12px; line-height: 1.4} .sub_incontinence .clinic .graph_cont .left .graph_box_wrap:last-child .graph_box{padding-right: 3rem} /* 유로닷 */ .sub_urodot .clinic .urodot_step1 .pc{display: none; } .sub_urodot .clinic .urodot_step1 .mobile .graph_cont{margin-top:5rem;} .sub_urodot .clinic .graph_cont.bg .graph_wrap{width: 500px;} }