:root{--ani:cubic-bezier(.32,.94,.6,1)}

/* sub Top */
.subTop {height:43.75rem; position:Relative; top:0; left:0; overflow: hidden; z-index: 3;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.05); transition:transform 2s var(--ani);}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}
.subTop .inner {position: relative; max-width: 1400px; width: 90%; top:17rem; margin: auto; text-align: center;}

/* sub common */
.sub .xgap2 {--x-gap:2rem;}
.sub .xgap3 {--x-gap:3rem;}
.sub .xgap4 {--x-gap:4rem;}
.sub .xgap6 {--x-gap:6rem;}

.sub .ygap3 {--y-gap:3rem;}
.sub .ygap4 {--y-gap:4rem;}

.sub .cont_box {margin-top: 3.5rem;}
.sub .pointDeco {width: 3.75rem; height: .625rem; background: linear-gradient(to right, #c30d23 50%, #122a88 50%);}
.sub .subTit {font-family: var(--pointfont); font-size: 2.625rem; font-weight: 700;}
@media(max-width:500px){.sub .subTit {font-size: 2.4rem;}}
.sub .NumBox {position: absolute; width: 4.8125rem; height: 4.8125rem; background-color: var(--pointcolor); color:#fff; font-weight: 700; font-size: 2.1875rem; top:0; left:0;}
.sub .checkImg {width: 1.0625rem;}
.sub .LogoBg {position: absolute; width: 24.3125rem; top:0; right: 0; z-index: -1;}


.sub .Num {position: relative; padding-left: 3rem;}
.sub .Num:after {content:''; position: absolute; top:0; left: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 700; color:#82b2d4;}
.sub .Num.Num1:after {content:'01';}
.sub .Num.Num2:after {content:'02';}
.sub .Num.Num3:after {content:'03';}
.sub .Num.Num4:after {content:'04';}
.sub .Num.Num5:after {content:'05';}
.sub .Num.Num6:after {content:'06';}
.sub .Num.Num7:after {content:'07';}
.sub .Num.Num8:after {content:'08';}
.sub .Num.Num9:after {content:'09';}


/* intro */
.sub .intro .Img {position: relative;}
.sub .intro .Img:after {content:''; position: absolute; width: 100%; height: 100%; background-color: var(--pointcolor2); right:-1rem; bottom:-1rem; z-index: -1;}
.sub .intro .Desc {display: flex; justify-content: flex-end; padding: 1rem;}
@media(max-width:990px) {
    .sub .intro .Desc {display: flex; justify-content: flex-start;}
}


/* kind */
.sub .kind table {width: 100%; border-spacing: 0; border-collapse:collapse;}
.sub .kind table th {font-weight: 700; border-top:1px solid #acacac; padding: 1.5rem 1rem;}
.sub .kind table td {padding: 1.5rem 1rem; border-top:1px solid #acacac; border-bottom:1px solid #acacac}
.sub .kind table .BgBox {background-color: var(--pointcolor2); border: 1px solid #acacac; font-weight: 700;}
.sub .kind table .BgBox.Beige {background-color: #f8f4ee;}
.sub .kind table .Nonborder_L {border-left: none;}
.sub .kind table .border_Y {border-left: 1px solid #acacac; border-right:1px solid #acacac;}
.sub .kind table .width33 {width: calc((100% - 15%) / 3);}
.sub .ScrollBox {overflow-x: scroll;}
.sub .ScrollBox::-webkit-scrollbar{display:none;}
.sub .ScrollBox table {min-width: 700px;}


/* check */
.sub .check {background-color: #252b40;}
.sub .check .box {background-color: #000b30; padding: 1.5rem 2rem; min-height: 7.5rem;}
@media(max-width:1240px) {
    .sub .check .Tit, .sub .check .Desc {width: 100%;}
    .sub .check .Desc {margin-top: 3rem;}
}



/* essential */
.sub .essential {background: no-repeat center url('/img/sub/Dialysis/essentialBg.jpg'); background-size: cover;}
.sub .essential .box {background-color: rgba(0,0,0,.5); padding:3rem 3rem 4rem;}
.sub .essential .fitBox {width: fit-content; margin: auto;}
.sub .essential ul li {display: flex; align-items: baseline;}
.sub .essential ul li + li {margin-top: .7rem;}
@media(max-width:1240px) {
    .sub .essential .flexList {--x-gap:2rem}
}



/* need */
.sub .need .box {background-color: #fff; padding: 1.5rem;}
.sub .need .box p {max-width: 37rem; margin-left: auto;}
.sub .need .box.fitBox p {max-width: 100%; margin: auto;}



/* case */
.sub .case {background-color: #b2ccdf;}




/* merit */
.sub .merit .box {background-color: #f0f0f0; display: flex; align-items: center;}
.sub .merit .box.white {background-color: #fff;}
.sub .merit .NumBox {position: relative;}
.sub .merit .Desc {flex-grow: 1;}




/* arrowBox */
.sub .arrowBox .box {background-color: #f0f0f0;}
.sub .arrowBox .Tit {padding:.5rem 1rem; background-color: #82b2d4; color:#fff;}
.sub .arrowBox .Desc {padding: 4rem 1rem;}
.sub .arrowBox .Desc li + li {margin-top: 1rem;}
.sub .arrowBox .arrowImg {width: 1.1875rem;}



/* subCommon */
.sub .commonSwiper .Img {position: relative; padding-left: 1rem; padding-bottom: 1rem;}
.sub .commonSwiper .Img:after {position: absolute; content:''; width: 95%; height: 95%; background-color: var(--pointcolor2); left: 0; bottom: 0; z-index: -1;}
.sub .commonSwiper .Desc {position: absolute; bottom:4rem; left: 4rem;}
.sub .subCommon .btn_wrap {max-width: 21.875rem;}
.sub .subCommon .swiper-pagination {position: relative; text-align: left; display: flex; flex-direction: column; padding: 1rem 0;}
.sub .subCommon .swiper-pagination-bullet {width: fit-content; height: auto; background-color: transparent; border-radius: 0; margin: .5rem 0; position: relative;background: linear-gradient(to right, rgba(97, 97, 97, 0) 50%, rgba(var(--markcolor), .5) 50%);background-size: 200% 0.5rem;background-repeat: no-repeat;background-position: 200% 100%;}
.sub .subCommon .swiper-pagination-bullet-active {font-weight: 700; background-position: 100% 100%;}
.sub .subCommon .swiper-button-next, .sub .subCommon .swiper-button-prev {position: relative; right:auto; left:auto; margin: auto;}
.sub .subCommon .swiper-button-next:after, .sub .subCommon .swiper-button-prev:after {content:'';}
.sub .subCommon .swiper-button-next img {transform: rotate(180deg);}
@media(max-width:990px) {
    .sub .subCommon .flex {flex-wrap: wrap;}
    .sub .subCommon .Tit, .sub .subCommon .Img {width: 100%;}
    .sub .subCommon .btn_wrap {margin: auto;}
    .sub .commonSwiper .Img:after {width: 100%;}
    .sub .commonSwiper .Desc {position: relative; bottom:0; left:0; padding: 2rem;}
    .sub .subCommon .swiper-button-next, .sub .subCommon .swiper-button-prev {display: none;}
}


/* introduce */
/* .sub .introduce .LogoBg {position: relative;} */
.sub .introduce .Desc {padding:4rem 1rem 4rem 4rem; border-bottom:4px solid #b2b2b2;}
.sub .introduce .profileWrap {display: flex; padding-top: 4rem;}
.sub .introduce .Tit {font-size: 2rem; background-color: #c3d9e9; padding: 1rem 3rem; width: fit-content; text-align: center;}
.sub .introduce .pt_20p {padding-top: 20%;}
@media(max-width:1240px) {
    .sub .introduce .Title {width: 100%;}
    .sub .introduce .profile {width: 100%; margin-top: 3rem;}
}
@media(max-width:768px) {
    .sub .introduce .Img, .sub .introduce .Desc {width: 100%;}
}


/* TimeInfo */
.sub .TimeInfo .mapBox {width: 100%; height: 33.25rem;}
.sub .TimeInfo .root_daum_roughmap, .sub .TimeInfo .wrap_map {width: 100%; height: 33.25rem;}
.sub .TimeInfo .mapBtn {max-width: 500px; position: absolute; bottom:0; left: 0; z-index: 3;}
.sub .TimeInfo table {width: 100%;}
.sub .TimeInfo table td {vertical-align: baseline !important;}
.sub .TimeInfo table tr {vertical-align: baseline !important;}
.sub .TimeInfo table img {width:1.5625rem}
.sub .TimeInfo .width23 {width: 23%;}
.sub .TimeInfo .TbTit {max-width: 6.7rem; font-weight: 700; word-break:break-all; text-align: justify; padding-right: 1.5rem; line-height: 1rem;}
.sub .TimeInfo .TbTit:after {content:''; display: inline-block; width: 100%;}
.sub .TimeInfo .infoDesc td {padding: .5rem 0;}
@media (max-width: 1580px){
    .sub .TimeInfo table {max-width: 800px;}
    .sub .TimeInfo .infoDesc .width20 {width: 25%;}
}
@media (max-width: 500px){
    .sub .TimeInfo .infoDesc td {display: block;}
}


/* preview */
#preview .previewwrap {position: relative; max-width: 1920px; margin: auto;}
#preview .previewSwiper {padding: 0 5rem}
#preview .previewSwiper .swiper-slide {opacity: 0.5; aspect-ratio: 290/190; transform: scale(0.7) !important;}
#preview .previewSwiper .swiper-slide-active {transform: scale(1.2) !important;z-index: 3 !important;opacity: 1;}
#preview .previewSwiper .swiper-slide img {object-fit: cover; width: 100%;;height: 100%;;}
#preview .previewSwiper .swiper-pagination {position: relative; max-width: 910px; margin:7rem auto 0; background-color: #efefef;}
#preview .previewSwiper .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);}