/* 서브 */
#sub {width:100%; min-width: 70rem; overflow: hidden; }
#sub .subtop {width:100%; height: 22.5rem; text-align: center; display: flex; flex-direction: column; justify-content: center; text-align: center; background-position: center; background-size: cover; position: relative;}
#sub .subtop#sub1_1 {background-image: url(images/subtop1_1.jpg);}
#sub .subtop#sub1_2 {background-image: url(images/subtop1_2.jpg);}
#sub .subtop#sub1_4 {background-image: url(images/subtop1_4.jpg);}
#sub .subtop#sub1_5 {background-image: url(images/subtop1_5.jpg);}
#sub .subtop#sub1_7 {background-image: url(images/subtop1_7.jpg);}
#sub .subtop#sub2_1 {background-image: url(images/subtop2_1.jpg);}
#sub .subtop#sub2_2 {background-image: url(images/subtop2_2.jpg);}
#sub .subtop#sub2_3 {background-image: url(images/subtop2_3.jpg);}
#sub .subtop#sub3 {background-image: url(images/subtop3.jpg);}
#sub .subtop#sub4 {background-image: url(images/subtop4.jpg);}
#sub .subtop#sub5 {background-image: url(images/subtop5.jpg);}
#sub .subtop#sub6 {background-image: url(images/subtop6.jpg);}
#sub .subtop#sub7 {background-image: url(images/subtop7.jpg);}
#sub .subtop#sub8 {background-image: url(images/subtop8.jpg);}
#sub .subtop#sub9 {background-image: url(images/subtop9.jpg);}
#sub .subtop#sub10 {background-image: url(images/subtop10.jpg);}


#sub .snb {width:60rem; height: 5rem; background-color: #fff; position: absolute; bottom: 0; left: 50%; margin-left: -30rem; display: flex;}
#sub .snb .oneDepth {flex:1; height: inherit; background-color: #15686d; color: #fff; text-align: center;}
#sub .snb .twoDepth {flex:1; height: inherit; background-color: #119c9e; color: #fff; text-align: center; position: relative;}
#sub .snb .lastDepth {flex:2; text-align: left; position: relative;}
#sub .snb h4 {line-height: 5rem; font-weight: 700; padding: 0 1.5rem; cursor: pointer; text-align: center;}
#sub .snb h4.here {text-align: left;}
#sub .snb h4.here::after {content: "\e941"; font-family: xeicon; float: right; }
#sub .snb .oneDepth h4::after {content: "";}
#sub .snb .lastDepth h4::after {color: #119c9e;}
#sub .snb ul.list {display: none; width: 100%; position: absolute; z-index: 1000; background-color: #fff; top: 5rem; color: #999; border-top: 0 !important; border: 1px #f0f0f0 solid; text-align: left; padding-bottom: 1rem;}
#sub .snb ul li {width: 100%; padding: 0 1.5rem;}
#sub .snb ul li a {display: block; font-size: 1.1rem; line-height: 3rem; border-bottom: 1px #f0f0f0 solid; cursor: pointer;}
#sub .snb ul li a:hover,#sub .snb ul li a.on {color: #15686d; font-weight: 700;}



#sub #content {width:100%; }

#sub .paragraph {width: 100%; }
#sub .bg1 {background-color: #119c9e; padding: 5rem 0;}
#sub .bg2 {background-color: #f2fbfb; padding: 5rem 0;}
#sub .bg2_in {background-color: #e4f5f5; padding: 3rem 0;}
#sub .bg3 {background: url(images/sub1_3_visual_bg.png) center no-repeat #f2fbfb; padding: 3rem 0;}
#sub .paragraph .justify {height: 0.8rem !important;}


/** SUB1 병원소개 **/
#sub .paragraph.sub1_3_visual {height: 100vh; background: url(images/sub1_3_visual_bg.png) center no-repeat #15686d; color: #fff; display: flex; align-items: center;}
#sub .paragraph.sub1_3_visual .typing-box > span {
    display: block;
    color: #9ed9fb;
    text-align: center;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.3;
}
#sub .paragraph.sub1_3_visual .typing-box > span::after {
  content: "|";
  right: 0;
  font-weight: 100;
  color:#fff;
  animation: caret .8s infinite;
}
#sub .paragraph.sub1_3_visual #text-bg {color: #fff;}
@keyframes caret {
  50% {
    opacity:0;
  }
}
#sub .paragraph.sub1_3_1 .bg_type {z-index: -1;}
#sub .paragraph.sub1_3_1 .bg_type h1 {writing-mode: horizontal-tb !important; opacity:0.05; font-size: 12.5rem; color: #119c9e; }


#sub .paragraph .profileBox {}
#sub .paragraph .profileBox .inner {display: flex;}
#sub .paragraph .profileBox .inner > div {flex: 1;}
#sub .paragraph .profileBox .picture {background: url(images/gra_circle.png) left top no-repeat; text-align: center;}
#sub .paragraph .profileBox .profile {display: flex; flex-direction: column; justify-content: center; padding: 1rem 2rem 0;}
#sub .paragraph .profileBox .profile .subject {font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 3rem; color: #fff;}
#sub .paragraph .profileBox .profile .subject.subject1 {background-color: #4dc5c7;}
#sub .paragraph .profileBox .profile .subject.subject2 {background-color: #119c9e;}
#sub .paragraph .profileBox .profile .subject.subject3 {background-color: #15686d;}

#sub .paragraph .profileBox:nth-child(even) {background-color: #f2fbfb;}
#sub .paragraph .profileBox:nth-child(even) .picture {background: url(images/gra_circle_rvs.png) right top no-repeat;}


#sub .paragraph.sub1_5_1 {border-bottom: 1px #e0e0e0 solid;}
#sub .paragraph.sub1_5_1 .inner .inner {background: url(images/gra_circle.png) left top no-repeat; padding: 6rem 0; display: flex;}
#sub .paragraph.sub1_5_1 .inner .inlineblock .justify {width: 20%;}
#sub .paragraph.sub1_5_1 .inner .talking .inlineblock .justify {width: 13%;}
#sub .paragraph.sub1_5_1 .inner p.reference {text-indent: -0.75rem; margin-left: 0.75rem;}


#sub .view-swiper-pagination { display: flex; justify-content: center;}
#sub .view-swiper-pagination .swiper-pagination-bullet {height:auto; line-height:3.5rem; display:block; background-color: #fff; color: inherit; font-size: 1.2rem; width: 16rem; border-radius: 5rem; border:2px #bed9d7 solid; margin: 0 0.5rem; opacity: 1; text-align: center;}
#sub .view-swiper-pagination .swiper-pagination-bullet-active {background-color: #17303e; border-color: #17303e; color: #fff; font-weight: 700; }
#sub .view {padding: 0 5rem;}
#sub .view .swiper {height: 27.25rem; background-color: #fff;}
#sub .view .swiper .swiper-slide {text-align: center; }
#sub .view .swiper .swiper-slide img {height: 100%;}
#sub .view .color_m1 {color: #119c9e;}
#sub .view .swiper-button-prev {left: -2rem;}
#sub .view .swiper-button-next {right: -2rem;}


#sub .paragraph.sub1_7_1 {}
#sub .paragraph.sub1_7_1 .root_daum_roughmap {margin: 6rem 0;}
#sub .paragraph.sub1_7_1 .width700 {background: url(images/gra_circle.png) left top no-repeat; display: flex;}

#sub .paragraph a.mapbtn {padding:0 1.5rem; display: inline-block; border-radius: 2rem;text-align: center; line-height: 2.5rem; color: #fff; font-weight: 700;}
#sub .paragraph a.mapbtn.naver {background-color: #08a800;}
#sub .paragraph a.mapbtn.kakao {background-color: #fec044; margin-left: 0.25rem;}
#sub .paragraph a.mapbtn:hover {letter-spacing: 0.1rem;}

#sub .paragraph .root_daum_roughmap {}
#sub .paragraph .root_daum_roughmap .wrap_controllers,
#sub .paragraph .root_daum_roughmap .cont,
#sub .paragraph .root_daum_roughmap .map_border {display: none;}






/** SUB 질환/클리닉 **/
#sub .paragraph .imgbgBox {overflow: hidden; position: relative; z-index: 1; display: flex; align-items: end; color: #fff; padding: 0.75rem 1.25rem;}
#sub .paragraph .imgbgBox * {position: relative; z-index: 1;}
#sub .paragraph .imgbgBox .gra {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; background: linear-gradient( rgba(0,0,0,0.0) 60%, rgba(0,0,0,0.75) 100%); }
#sub .paragraph .imgbgBox .imgbg {position: absolute; top: 0; left: 0; z-index: -1; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#sub .paragraph .imgbgBox:hover .imgbg {transform: scale(1.1);}

#sub .paragraph .bulletTxt {position: relative;}
#sub .paragraph .bulletTxt::before {content: ""; width: 0.6rem; height: 0.6rem; border-radius: 0.6rem; background-color: #4dc5c7; position: absolute; top: -0.4rem; left: -0.8rem;}

#sub .paragraph .imgbgBox .caption { font-weight: 700;}

#sub .paragraph.sub1_3_1 .inner2 {padding: 6rem 0; display: grid; gap: 3rem; grid-template-columns: 1fr 1fr;}
#sub .paragraph.sub1_3_1 .inner2 .imgbgBox {height: 20rem; align-items: start; padding: 1.75rem 2rem;}
#sub .paragraph.sub1_3_1 .inner2 .imgbgBox .gra {background: linear-gradient( rgba(0,0,0,0.75) 10%, rgba(0,0,0,0) 60%); }

#sub .paragraph.sub8_2_3 .col2 {display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;}
#sub .paragraph.sub8_2_3 .col2 .imgbgBox {height: 15rem; }




#sub .paragraph .title {position: relative; width: fit-content;}
#sub .paragraph .title::before {content: ""; width: 0.6rem; height: 0.6rem; border-radius: 0.6rem; background-color: #4dc5c7; position: absolute; top: -0.4rem; left: -0.8rem;} 
#sub .paragraph .title span {color: #119c9e;}




#sub .paragraph .bullet::before {content: "\00B7"; margin-right: 0.25rem; margin-left: -0.5rem;}
#sub .paragraph .bullet {margin: 0.1rem 0; padding-left: 0.5rem; position: relative;}

#sub .paragraph .bullet.check::before {content: url(images/bullet_check.png); margin-right: 0.5rem; margin-left: -1.5rem; position: absolute; top: 0.1rem;}
#sub .paragraph .bullet.check {padding-left: 1.5rem; margin-top: 0.5rem;}

#sub .paragraph .bullet.warning::before {content: url(images/bullet_warning.png); margin-right: 0.5rem; margin-left: -1.5rem; position: absolute; top: 0.9rem;}
#sub .paragraph .bullet.warning {padding-left: 2rem; margin-top: 0;}



#sub .paragraph .caseNumlist {}
#sub .paragraph .caseNumlist * {padding-left: 2.25rem; margin-top: 0.75rem;}
#sub .paragraph .caseNumlist *::before {width: 1.75rem; height: 1.75rem; line-height: 1.75rem; border-radius: 100%; font-weight: 700; text-align: center; font-size: inherit; background-color: #119c9e; color: #fff; content: counter(number); counter-increment: number 1; display: inline-block; margin-right: 0.5rem; margin-left: -2.25rem;}



.num_reset {counter-reset: number 0;}

#sub .paragraph .kindBox {display: flex; gap: 2rem;}
#sub .paragraph .kindBox .box {flex: 1; display: flex; flex-direction: column;}
#sub .paragraph .kindBox .box .head {padding: 1.25rem 2rem; color: #fff;}
#sub .paragraph .kindBox .box:first-child .head {background-color: #119c9e;}
#sub .paragraph .kindBox .box:nth-child(2) .head {background-color: #116594;}
#sub .paragraph .kindBox .box:nth-child(3) .head {background-color: #15686d;}
#sub .paragraph .kindBox .box .head * {line-height: 2.5rem;}
#sub .paragraph .kindBox .box .head *::before {width: 2.5rem; height: 2.5rem; line-height: 2.5rem; border-radius: 2.5rem; margin-right: 0.75rem; text-align: center; font-weight: 700; background-color: #fff; display: block; float: left; counter-increment: number 1; content: counter(number);}
#sub .paragraph .kindBox .box:first-child .head *::before {color: #119c9e;}
#sub .paragraph .kindBox .box:nth-child(2) .head *::before {color: #116594;}
#sub .paragraph .kindBox .box:nth-child(3) .head *::before {color: #15686d;}
#sub .paragraph .kindBox .box .cont {background-color: #fff; height: 100%; padding: 1.5rem 2rem;}
#sub .paragraph .kindBox .box .cont.border {border:1px #bed9d7 solid; border-top: 0;}
#sub .paragraph .kindBox .box .cont .thing {margin: 0.5rem 0; padding-left: 1rem; position: relative;}
#sub .paragraph .kindBox .box .cont .thing::before {content: ""; width: 0.4rem; height: 0.4rem; border-radius: 0.4rem; margin-right: 1rem; margin-left: -1rem; position: absolute; top: 0.5rem;}
#sub .paragraph .kindBox .box .cont .thing:first-child {margin-top: 0;}
#sub .paragraph .kindBox .box:first-child .cont .thing::before {background-color: #4dc5c7;}
#sub .paragraph .kindBox .box:nth-child(2) .cont .thing::before {background-color: #9ed9fb;}
#sub .paragraph .kindBox .box:nth-child(3) .cont .thing::before {background-color: #4dc5c7;}

#sub .paragraph .kindBox.noNum .box .head {text-align: center;}
#sub .paragraph .kindBox.noNum .box .head *::before {display: none !important;}
#sub .paragraph .kindBox.noNum .cont {padding: 1.25rem 1.5rem;}



#sub .paragraph .goodBox {display: flex;}
#sub .paragraph .goodBox .box {flex:1; text-align: center; border-radius: 1rem; padding: 2rem 1.5rem 1.5rem;}
#sub .paragraph .goodBox .box:nth-child(odd) {background-color: #e4f5f5;}
#sub .paragraph .goodBox .box .bigCircle {width: 10rem; height: 10rem; border-radius: 10rem; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; margin: auto;}
#sub .paragraph .goodBox .box.box1 .bigCircle {background-color: #119c9e;}
#sub .paragraph .goodBox .box.box2 .bigCircle {background-color: #116594;}
#sub .paragraph .goodBox .box.box3 .bigCircle {background-color: #15686d;}



#sub .paragraph .warningBox {border-top: 2px #119c9e solid;}
#sub .paragraph .warningBox > * {border-bottom: 1px #dfe8e7 solid; padding: 0.8rem 0;}



#sub .paragraph .circleList {display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr 1fr; justify-items: center;}
#sub .paragraph .circleList.p4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
#sub .paragraph .circleList.p5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
#sub .paragraph .circleList .circle {width: 15rem; height: 15rem; border-radius: 100%; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff;}
#sub .paragraph .circleList .circle:nth-child(odd),#sub .paragraph .circleList > div:nth-child(odd) .circle {background-color: #119c9e;} 
#sub .paragraph .circleList .circle:nth-child(even),#sub .paragraph .circleList > div:nth-child(even) .circle {background-color: #116594;} 
#sub .paragraph .circleList.p5 .circle {width: 11rem; height: 11rem;}



#sub .paragraph .circleStepbox { text-align: center;}
#sub .paragraph .circleStepbox .step {margin-bottom: 1.5rem;}
#sub .paragraph .circleStepbox .step > * {flex: 1;}
#sub .paragraph .circleStepbox .step .circle {width: 8.5rem; height: 8.5rem; border-radius: 100%; color: #fff; padding: 1rem 0.5rem; margin:auto;}
#sub .paragraph .circleStepbox .step .circle::before {content: counter(number, decimal-leading-zero); counter-increment: number 1; text-align: center; font-weight: 700; background: url(images/circleStepbox_bullet.png) center 2rem no-repeat; display: block; width: 100%; padding-bottom: 1.5rem;}
#sub .paragraph .circleStepbox .step1 .circle {background-color: #4dc5c7;}
#sub .paragraph .circleStepbox .step2 .circle {background-color: #119c9e;}
#sub .paragraph .circleStepbox .step3 .circle {background-color: #15686d;}
#sub .paragraph .circleStepbox .step4 .circle {background-color: #116594;}
#sub .paragraph .circleStepbox .step5 .circle {background-color: #17303e;}
#sub .paragraph .circleStepbox .cont > div {flex: 1; border-right: 1px #bed9d7 solid;}
#sub .paragraph .circleStepbox .cont .step1,
#sub .paragraph .circleStepbox .cont .bottom {border-left: 1px #bed9d7 solid;}
#sub .paragraph .circleStepbox .cont p {margin: 0.4rem 0; line-height: 1.4;}




#sub .paragraph .accordion {}
#sub .paragraph .accordion span.ui-icon {font-family: xeicon; float: right; margin-right: 1rem; color: #119c9e;}
#sub .paragraph .accordion > h3 {border-top: 2px #119c9e solid; padding: 1.2rem 0; font-weight: 700; font-size: 1.3rem; line-height:1.6rem; }
#sub .paragraph .accordion > h3 > span.abb {width: 4rem; font-size: 2rem; line-height:1.6rem; color: #119c9e; display: block; float: left; text-align: center;}
#sub .paragraph .accordion > div {border-top: 1px #119c9e solid; display: flex; padding: 1.2rem 1.2rem 1.2rem 0; font-weight: 700;}
#sub .paragraph .accordion > div > span.abb {width: 4rem; font-size: 2rem; line-height:1.6rem; color: #4dc5c7; display: block; text-align: center;}
#sub .paragraph .accordion > div > * {width: calc(100% - 4rem); color: #606060;}



#sub .paragraph .roundingTitleBox {display: grid; gap: 2.2rem; grid-template-columns: 1fr 1fr 1fr;}
#sub .paragraph .roundingTitleBox .box {}
#sub .paragraph .roundingTitleBox .roundingTitle {width: 100%; height: 8rem; border-radius: 4rem; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; margin: 0 auto 1rem; padding-top: 1.75rem; position: relative; }
#sub .paragraph .roundingTitleBox .roundingTitle::before {counter-increment: number 1; content: counter(number, decimal-leading-zero); position: absolute; top: 0.75rem; font-weight: 700; font-size: 1.5rem; opacity: 0.3;}
#sub .paragraph .roundingTitleBox .roundingTitle > * {font-weight: 700; text-shadow: 0 0 0.15rem rgba(0,0,0,0.5); line-height: 1.3;}
#sub .paragraph .roundingTitleBox .box:nth-child(odd) .roundingTitle {background-color: #119c9e;}
#sub .paragraph .roundingTitleBox .box:nth-child(even) .roundingTitle {background-color: #116594;}



#sub .paragraph.sub4_1_tab2_1 .inner2 > div {width: 13.5rem;}




#sub .paragraph .map_btn {}
#sub .paragraph .map_btn a {border: 1px #c8bcae solid; width: auto; height: 2.5rem; line-height: 2.5rem; border-radius: 2.5rem; font-size: 0.9rem; padding: 0 1.5rem 0 3rem; display: inline-block; background-position: 15% center; background-repeat: no-repeat; margin-right: 0.5rem;}
#sub .paragraph .map_btn a.n_map {background-image: url(images/sub6_nmap.png);}
#sub .paragraph .map_btn a.k_map {background-image: url(images/sub6_kmap.png);}
#sub .paragraph .map_btn a:hover {background-color: #895c24; color: #fff;}

#sub .paragraph span.subject.map_bus1 {background-color: #386de8;}
#sub .paragraph span.subject.map_bus2 {background-color: #3bc344;}
#sub .paragraph span.subject.map_bus3 {background-color: #ffb202;}




#sub .paragraph #basic {border-collapse:collapse;border-top: 2px #119c9e solid;}
#sub .paragraph #basic th {background-color: #4dc5c7; color: #fff; padding:1rem 0.5rem; border-bottom: 0;}
#sub .paragraph #basic th * {font-weight: 700;}
#sub .paragraph #basic td {padding:1rem 0.5rem; border-bottom: 1px #dfe8e7 solid;}

#sub .paragraph #basic .head {background:#f2fbfb; font-weight: 700;}

#sub .paragraph #basic h3 {padding-left: 2.25rem; }
#sub .paragraph #basic h3::before {width: 1.75rem; height: 1.75rem; line-height: 1.75rem; border-radius: 100%; font-weight: 700; text-align: center; font-size: inherit; background-color: #119c9e; color: #fff; content: counter(number); counter-increment: number 1; display: inline-block; margin-right: 0.5rem; margin-left: -2.25rem;}

#sub .paragraph #basic.pricetable td {padding:0.5rem 1rem; border-left: 1px #dfe8e7 solid; text-align: center;}
#sub .paragraph #basic.pricetable td.head {border-left: 0; text-align: center;}
#sub .paragraph #basic.pricetable td.price {text-align: center;}
#sub .paragraph #basic.pricetable td.note {text-align: center; color: #8a9498;}


/* 서브페이지 탭 */
#sub ul.tabs {line-height:3.5rem; display: flex; justify-content: center;}
#sub ul.tabs li { text-align:center; }
#sub ul.tabs li a {display:block; background-color: #fff; font-size: 1.2rem; width: 16rem; border-radius: 5rem; border:2px #bed9d7 solid; margin: 0 0.5rem;}
#sub ul.tabs li.active a {background-color: #17303e; border-color: #17303e; color: #fff; font-weight: 700; }
#sub .tab_content {padding: 0; width:100%; min-height:15rem;}



#sub .paragraph .board_box {font-size:1rem !important;}
#sub .paragraph .board_box .board_bgcolor > span,#sub .paragraph .board_box .board_bgcolor > font,#sub .paragraph .board_box .att_title > font,#sub .paragraph .board_box .bbsnewf5 span {font-size:1rem !important;}
#sub .paragraph .board_box .ext_search {text-align: justify !important;}

#sub .paragraph .board_box #post_area img {max-width: 100%;}

#sub .paragraph .board_box .imgList .bbsnewf5 a {width: 17.5rem; height: 17.5rem; display: block; overflow: hidden;}
#sub .paragraph .board_box .imgList .bbsnewf5 a img {width: 100% !important; height: 100% !important; object-fit: cover;}
#sub .paragraph .board_box .imgList .bbsnewf5 .gallery_subject a {width: auto  !important; height: auto  !important;}