@CHARSET "UTF-8";

/* 센터개요 */
.canter_list ul{display:flex;gap:70px;}
.canter_list ul li{position:relative;flex-grow:1; display:flex; flex-direction:column; align-items:center; padding:30px 0; text-align:center; box-sizing:border-box;}
.canter_list ul li:before{content:'';flex-shrink:0;display:block; width:100%; height:80px;background:no-repeat center / contain;}
.canter_list ul li.icon01:before{background-image:url(/nanum/site/builder/dir/main/img/menu4848/canter_icon01.png);}
.canter_list ul li.icon02:before{background-image:url(/nanum/site/builder/dir/main/img/menu4848/canter_icon02.png);}
.canter_list ul li.icon03:before{background-image:url(/nanum/site/builder/dir/main/img/menu4848/canter_icon03.png);}
.canter_list ul li:not(:first-child):after{content:'';position:absolute;top:0;left:-35px;width:1px;height:100%;background:#ddd;}
/*.canter_list ul li:nth-child(n+2){margin-left:35px; padding-left:35px; border-left:1px solid #ddd;}*/
.canter_list ul li .tit{margin-top:30px; font-size:2.5rem; font-weight:700;}
.canter_list ul li .txt{width:100%; margin-top:20px; padding:20px 10px; text-align:center; font-size:1.9rem; border:1px dashed #000; border-radius:20px; box-sizing:border-box;}

/* 조직도 */
.org_wr{position:relative;display:flex;flex-direction:column;align-items:center;line-height: 1.4;text-align:center;}
.org_wr:before,
.org_wr *:before{content: '';position: absolute;background:#ccc;z-index: -1;}
.org_wr:before{top:0;left:50%;width:1px;height:100%;}

.org_wr ol{position:relative;z-index:1;}
.org_wr ol li{display:flex;align-items:center;justify-content:center;font-weight:700;background:#fff;box-sizing:border-box;}
.org_wr ol li dl dt,
.org_wr ol li dl dd p{padding:12px 10px;background:#fff;border:2px solid #e5e5e5;border-radius:30px;box-sizing:border-box;}

.org_wr .org1{margin-bottom:70px;background:#fff;}
.org_wr .org1 li{width:175px;aspect-ratio:1;font-size:2.4rem;color:#0ea84b;border:10px solid transparent;border-radius:50%;background-origin:border-box;background-clip:content-box, border-box;background-image:linear-gradient(#fff, #fff), linear-gradient(340deg, #00bdba 30%, #baf26e 100%);}
.org_wr .org2{margin-right:auto;width:50%;}
.org_wr .org2:before{top: 50%;left: 0;width:100%;height: 1px;}
.org_wr .org2 li{padding:14px 10px;width:260px;font-size:2rem;color:#13a2d1;border:2px solid #33c3f2;border-radius:30px;}
.org_wr .org3{display:flex;align-items: baseline;gap:24px;margin-top:110px;width: 100%;background: #fff;}
.org_wr .org3:before{top:-1px;left:0;width:100%;height: 1px;}
.org_wr .org3 li{position:relative;width:0;flex-grow:1;}
.org_wr .org3 li:first-child:after,
.org_wr .org3 li:last-child:after{content:'';position:absolute;top:-1px;width:50%;height:10px;background:#fff;z-index: 1;}
.org_wr .org3 li:first-child:after{left:0;}
.org_wr .org3 li:last-child:after{right:-1px}
.org_wr .org3 li dl{position:relative;display:flex;flex-direction: column;gap:20px;padding-top:65px;width:100%;z-index:1;}
.org_wr .org3 li dl:before{top:0;left:50%;width:1px;height:100%;}
.org_wr .org3 li dl dt{font-size:1.8rem;color:#337ff2;border-color:#337ff2;}
.org_wr .org3 li dl dd{display:flex;flex-direction: column;gap:10px;z-index:0;}
.org_wr .org3 li dl dd p{font-size:1.7rem;font-weight:600;color:#333;background:#f6f6f6;}


/* 인사말 */
.greet_box{display: flex; gap:50px; align-items:flex-start;}
.greet_box .greet_tit{width:390px; border-radius:20px; overflow: hidden;}
.greet_box .greet_tit img{max-width:100%; vertical-align: top;}


.greet_box .txtw{width:calc(100% - 440px); text-align:left;}
.greet_box .txtw .tit_txt{margin-bottom:30px; padding-bottom:30px; line-height:1.4; font-size:4rem; font-weight:700; border-bottom:1px solid #d5d5d5;}
.greet_box .txtw .tit_txt .green{color:#15b7c1;}
.greet_box .txtw .tit_txt .name{display:flex; align-items:center; gap:0 20px; margin-top:30px; font-size:2.3rem; font-weight:700;}
.greet_box .txtw .tit_txt .name span{display: inline-block; width:120px;}
.greet_box .txtw .tit_txt .name span img{max-width:100%; vertical-align: top;}
.greet_box .txtw .tit{margin-bottom:60px;font-size:3.5rem;font-weight:500}
.greet_box .txtw .tit strong{color:#15b7c1;}
.greet_box .txtw .txt{margin-top:30px;font-size:2rem;line-height:1.6;}
.greet_box .txtw .name{display:flex; align-items:center; justify-content:flex-end; gap:30px; margin-top:30px; font-size:2.5rem; font-weight:700;}
.greet_box .txtw .name span{display: inline-block; width:120px;}
.greet_box .txtw .name span img{max-width: 100%;}

/* 연혁 */
.history_wrap .history_imgbox .img_w{position: relative; height: 350px; border-radius:20px; overflow: hidden;}
.history_wrap .history_imgbox .img_w img{position: absolute; left:50%; top:50%; width:100%; height: 100%; transform:translate(-50%, -50%); object-fit:cover;}

.history_wrap .history_box{display:flex; gap:100px; margin-top:80px;}
.history_wrap .history_box .history_tit{position:relative; width:50%; max-width:540px; padding-top:70px; font-size:3.8rem; font-weight:800;}
.history_wrap .history_box .history_tit::before{content:""; position: absolute; top:0; left:0; width:60px; height: 50px; background: url("/nanum/site/builder/skin/main/img/common/logo_icon.png") no-repeat center / 100% auto;}
.history_wrap .history_box .history_tit span{position:relative; padding:0 10px; font-size:6rem;}
.history_wrap .history_box .history_tit span::before{content:""; position: absolute; bottom:0; left:0; width:100%; height: 40%; border-radius:50px; background: #e7f8f9; z-index:-1;}

.history_wrap .history_box .history_list{width:calc(100% - 540px);}
.history_wrap .history_box .history_list dl:nth-child(n+2){margin-top:80px;}
.history_wrap .history_box .history_list dl dt{margin-bottom:30px; padding-bottom:30px; line-height:1; font-size:5rem; font-weight:700; border-bottom:1px solid #ddd;}
.history_wrap .history_box .history_list dl dd ul li{position:relative; display: flex; gap:15px; padding-left:15px; line-height:1.4; font-size:2rem;}
.history_wrap .history_box .history_list dl dd ul li::before{content:""; position: absolute; left:0; top:12px; width:6px; height: 6px; border-radius:50%; background: #000;}
.history_wrap .history_box .history_list dl dd ul li:nth-child(n+2){margin-top:20px;}


/* 환자의 권리와 의무 */
.ob_list{display:flex; gap:40px; margin-top:50px;}
.ob_list dl{position:relative; width:calc(50% - 20px); padding:60px 40px; border-radius:20px 20px 0 0; box-sizing:border-box; overflow:hidden;}
.ob_list dl::before{content:; position:absolute; left:50%; top:50%; width:100%; height:100%; transform:translate(-50%, -50%); background:url(/nanum/site/builder/dir/main/img/menu4848/ob_bg.jpg) no-repeat center /cover; z-index:-1;}
.ob_list dl dt{text-align:center; color:#fff; font-size:3.5rem; font-weight:800; text-shadow:0 0 10px rgba(0,0,0,.25);}
.ob_list dl dd{margin-top:50px;}
.ob_list dl dd ol li{display:flex; gap:13px; padding:20px 10px; border-radius:10px; background:#fff; box-shadow:2px 2px 10px rgba(0,0,0,.25);}
.ob_list dl dd ol li:nth-child(n+2){margin-top:20px;}
.ob_list dl dd ol li .number{flex-shrink:0;display:flex; align-items:center; justify-content:center; width:45px; height:62px; margin-top:-30px; line-height:1.4; text-align:center; font-size:1.4rem; color:#fff; border-radius:5px;}
.ob_list dl dd ol li .txt{display:flex;align-items:center;width:100%;line-height:1.5;}

.ob_list dl.ob_green{background:linear-gradient(180deg, rgba(13,178,83,0.7), #fff);}
.ob_list dl.ob_green dd ol li .number{background:#248645;}
.ob_list dl.ob_blue{background:linear-gradient(180deg, rgba(12,60,97,0.7), #fff);}
.ob_list dl.ob_blue dd ol li .number{background:#0a2d49;}


/* 협약기관 */
.trachea_wrap ul{display:flex; flex-wrap:wrap; gap:30px;}
.trachea_wrap ul li{width:calc(33.333% - 20px);}
.trachea_wrap ul li .tit{display:flex; align-items:center; justify-content:center; min-height:200px; padding:25px; border:1px solid #ddd; border-radius:20px; box-sizing:border-box; transition:.3s;}
.trachea_wrap ul li .txt{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:15px; line-height:1.2; font-size:2rem; transition:.3s;}
.trachea_wrap ul li .txt::after{content:""; display:block; width:40px; height:40px; border-radius:50%; background:#f3f3f3 url(/nanum/site/builder/skin/main/img/common/new_window.png) no-repeat center / 40% auto; transition:.3s;}
.trachea_wrap ul li .txt span{width:calc(100% - 50px);}


/********************태블릿********************/
@media all and (max-width:1024px){

/* 센터개요 */
.canter_list ul li:before{height:55px;}
.canter_list ul li .tit{margin-top:15px;font-size:2.2rem;}
.canter_list ul li .txt{margin-top:15px;padding:15px 10px;font-size:1.7rem}

/* 조직도 */
.org_wr ol li dl dt, 
.org_wr ol li dl dd p{padding: 8px 5px;}

.org_wr .org1{margin-bottom:20px;}
.org_wr .org1 li{width:135px;font-size:2.2rem;}
.org_wr .org2 li{padding:10px 5px;width:200px;max-width:90%;font-size:1.8rem;}
.org_wr .org3{gap:25px 10px; margin-top:30px;padding-top:20px;flex-wrap:wrap;}
.org_wr .org3 li{width:calc(33.333% - 7px);flex-grow:0;}
.org_wr .org3 li:first-child:after, 
.org_wr .org3 li:last-child:after{display:none;}
.org_wr .org3 li dl{padding-top:0;margin-top:0;gap: 10px;}
.org_wr .org3 li dl dt{font-size:1.7rem;}
.org_wr .org3 li dl dd{gap: 5px;}
.org_wr .org3 li dl dd p{font-size:1.6rem;}


/* 인사말 */
.greet_box .greet_tit{width:40%; max-width: 390px;}
.greet_box .txtw{width:calc(100% - 45%);}
.greet_box .txtw .tit{margin-bottom:30px;font-size:2.8rem;}
.greet_box .txtw .txt{margin-top:20px;font-size:1.7rem;}

/* 연혁 */
.history_wrap .history_box{flex-wrap:wrap; gap:50px;}
.history_wrap .history_box .history_tit{width:100%; max-width:none;}
.history_wrap .history_box .history_list{width:100%;}

/* 환자의 권리와 의무 */
.ob_list{gap:20px;margin-top:40px;}
.ob_list dl{padding:40px 20px;width:calc(50% - 10px);}
.ob_list dl dd{margin-top:30px;}

/* 협약기관 */
.trachea_wrap ul li{width:calc(50% - 15px);}
.trachea_wrap ul li .tit{min-height:150px;}


}

/********************모바일********************/
@media all and (max-width:767px){

/* 센터개요 */
.canter_list ul{gap:10px;}
.canter_list ul li{padding:15px 0 10px;border:1px dashed #aaa;border-radius:10px;}
.canter_list ul li .tit{margin-top:7px;font-size:1.8rem}
.canter_list ul li .txt{margin-top:0;padding:0 5px;font-size:1.6rem;border:none}
.canter_list ul li:before{height:30px;}
.canter_list ul li:not(:first-child):after{display:none;}


/* 인사말 */
.greet_box{flex-wrap:wrap; gap:30px;}
.greet_box .greet_tit{width:100%; max-width:500px; margin:0 auto;}

.greet_box .txtw{width:100%;}
.greet_box .txtw .tit_txt{font-size:3rem;}
.greet_box .txtw .txt{margin-top:15px;line-height:1.5;}
.greet_box .txtw .txt br{display:none;}

.greet_box .txtw .name{gap:20px;}
.greet_box .txtw .name span{width:100px;}

/* 연혁 */
.history_wrap .history_imgbox::before{background-attachment:inherit;}
.history_wrap .history_box{margin-top:3vh;}
.history_wrap .history_box .history_tit{padding-top:44px; line-height:1.4; text-align: center; font-size:3rem;}
.history_wrap .history_box .history_tit::before{left:50%; width:40px; height: 34px; transform:translateX(-50%);}
.history_wrap .history_box .history_tit span{font-size:5rem;}

.history_wrap .history_box .history_list dl:nth-child(n+2){margin-top:5vh;}
.history_wrap .history_box .history_list dl dt{margin-bottom:20px; padding-bottom:10px; font-size:4rem;}
.history_wrap .history_box .history_list dl dd ul li::before{top:10px; width:5px; height: 5px;}
.history_wrap .history_box .history_list dl dd ul li:nth-child(n+2){margin-top:1.5vh;}


/* 환자의 권리와 의무 */
.ob_list{gap:10px;flex-direction:column;margin-top:25px;}
.ob_list dl{padding:20px 10px;width:100%;}
.ob_list dl dt{font-size:2.5rem;}
.ob_list dl dd{margin-top:15px;}
.ob_list dl dd ol li{gap:10px;padding:10px}
.ob_list dl dd ol li:nth-child(n+2){margin-top:15px;}
.ob_list dl dd ol li .number{margin-top:-20px;width:30px;height:50px;}
.ob_list dl dd ol li .txt{line-height:1.4;}

/* 협약기관 */
.trachea_wrap ul{gap:20px;}
.trachea_wrap ul li{width:calc(50% - 10px);}
.trachea_wrap ul li .tit{min-height:auto;}
.trachea_wrap ul li .txt span{width:calc(100% - 45px);}
.trachea_wrap ul li .txt::after{width:35px; height:35px;}

}

/********************모바일********************/
@media all and (max-width:480px){
	
/* 협약기관 */
.trachea_wrap ul li{width:100%;}
.trachea_wrap ul li .tit{padding:10px;}
	
}

/********************웹********************/
@media all and (min-width:1025px) {
	
	.trachea_wrap ul li a:hover .tit{border:3px solid #15b7c1;}
	.trachea_wrap ul li a:hover .txt{text-decoration: underline;}
	.trachea_wrap ul li a:hover .txt::after{background:#15b7c1 url(/nanum/site/builder/skin/main/img/common/new_window_wh.png) no-repeat center / 40% auto;}


}