@charset "utf-8";

/* FAQ 형식 */
.faq {border-top: 3px solid #353535; border-bottom: 1px solid #353535;}
.faq dl {border-bottom: 1px solid #dcdcdc;}
.faq dl dt {padding: 10px 10px; font-weight: 600; font-size: 15px; text-overflow: ellipsis; overflow: hidden; /* white-space: nowrap; */ cursor: pointer;}
.faq dl dd {display: none; padding: 20px; border-top: 1px dotted #a2a2a2; background: #f9f9f9;}

.obesity_step {display: flex; justify-content: space-between; padding: 10px 0 45px; gap:  0 !important;}
.obesity_step li {position: relative; text-align: center; width: 100%; padding: 14px 10px;}
.obesity_step li.s01 {background: #d9ebf4;}
.obesity_step li.s02 {background: #b9daeb;}
.obesity_step li.s03 {background: #90c4e0;}
.obesity_step li.s04 {background: #62acd3; color: #fff; text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);}
.obesity_step li.s05 {background: #2d90c4; color: #fff; text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);}
.obesity_step li.s06 {background: #0279b8; color: #fff; text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);}
.obesity_step li: before, .obesity_step li: after {position: absolute; content: ''; display: block;}
.obesity_step li: before {right: -12px; bottom: -45px; color: #333; font-size: 13px; text-shadow: none;}
.obesity_step li.s01: before {content: '18.5';}
.obesity_step li.s02: before {content: '22.9';}
.obesity_step li.s03: before {content: '24.9';}
.obesity_step li.s04: before {content: '29.9';}
.obesity_step li.s05: before {content: '34.9';}
.obesity_step li: after {top: 0; right: 0; width: 1px; height: 135%; background: rgba(0,0,0,.5); z-index: 1;}
.obesity_step li: last-child: before, .obesity_step li: last-child: after {display: none;}

/* business > regional > nonsmoking */
.nonsmoke ul {display:  flex; align-items:  center; justify-content:  space-between;}
.nonsmoke ul li {display:  flex; flex-direction:  column; align-items:  center; gap:  1rem;}

/* organization */
.organization {position: relative; margin-top: 3rem; --item-size: calc((100% - 2.4rem * 3)/4);}
.organization .tit {display: flex; width: 24rem; height: 5.4rem; justify-content: center; align-items: center; text-align: center; font-size: 1.9rem; font-weight: 700;}
.organization > .tit {margin: 0 auto; color: #ffffff; border-radius: 0.8rem; background: linear-gradient(90deg, #24B5A8 0%, #2495B5 100%);}
.organization .rank2 {display: flex; flex-direction: column; align-items: center; margin-top: 5rem;}
.organization .rank2 > .tit {margin-bottom: 4rem; color: #2495b5; border: 1px solid #2495b5; border-radius: 0.8rem;}
.organization .rank3 {position: relative; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: 4rem 2.4rem;}
.organization .rank3::before {content: ''; position: absolute; top: -2rem; left: 50%; width: calc(100% - var(--item-size)); height: 1px; margin: auto; background: var(--krds-light-color-border-gray); z-index: -1; transform: translateX(-50%);}
.organization .rank3 .item {position: relative; width: 100%; max-width: var(--item-size);}
.organization .rank3 .item::before {content: ''; position: absolute; top: -2rem; left: 50%; width: 1px; height: 2rem; background: var(--krds-light-color-border-gray); transform: translateX(-50%);}
.organization .rank3 .item .tit {width: 100%; height: 7.4rem; color: #fff; background: #0D3A65; border-radius: 1rem;}
.organization .rank3 .item .team ul {display: flex; flex-direction: column; gap: 0.6rem; padding: 2.2rem 2rem; border-radius: 1rem; background: #F5F5F5;}
.organization .rank3 .item .team ul li {position: relative; padding-left: 11px;}
.organization .rank3 .item .team ul li::before {content: ''; position: absolute; z-index: 1; left: 0; top: 0.9rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #a4a4a4;}
.organization .rank3 .item .other {display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem;}
.organization .rank3 .item .other li {padding: 0.8rem; text-align: center; border-radius: 0.8rem; background: #EDEFF6;}
.organization .rank3 + .rank3 {margin-top: 4rem;}
.organization .rank3 + .rank3::before {width: calc(2.4rem + var(--item-size));}

.greeting .top {padding: 5rem 0; border-radius: 2rem; text-align: center; background: linear-gradient(90deg, #F2F6F6 0%, #F6F7FF 100%);}
.greeting .top .tit {position: relative; width: 67.2rem; height: 14.2rem; margin: 0 auto; background: url(/clinic/img/sub/pic_greeting_txt.png) no-repeat center/53.3rem;}
.greeting .top .tit::before {content: ''; position: absolute; z-index: 1; top: 0; left: -10.6rem; width: 8.6rem; height: 100%; background: url(/clinic/img/sub/ico_greeting01.svg) no-repeat left top/100%;}
.greeting .top .tit::after {content: ''; position: absolute; z-index: 1; top: 0; right: -10.6rem; width: 8.6rem; height: 100%; background: url(/clinic/img/sub/ico_greeting02.svg) no-repeat right bottom/100%;}
.greeting .con {display: flex; flex-direction: column; margin-top: 4rem; gap: 3rem; padding-right: 55rem; font-family: var(--font-paper); background: url(/clinic/img/sub/bg_cn_greeting.png) no-repeat right bottom/50.9rem;}


@media all and (max-width: 1279px) {
	.greeting .top .tit {width: 60rem;}
	.greeting .top .tit::before {left: -4rem; width: 6rem;}
	.greeting .top .tit::after {right: -4rem; width: 6rem;}
	
	.greeting .con {padding-right: 0; padding-bottom: 24rem;}
}

@media all and (max-width: 768px) {
	.nonsmoke ul {flex-direction:  column;}
	.obesity_step li: after {height: 115%;}
	
	.organization .rank3 {flex-direction: column; gap: 2rem;}
	.organization .rank3 .item {max-width: 100%;}
	.organization .rank3::before {display: none;}
	.organization .rank3 .item .tit {height: auto; padding: 1rem;}
	.organization .rank2 > .tit {margin-bottom: 2rem;}
	.organization .rank3 + .rank3 {margin-top: 2rem;}
	
	.greeting .top {padding: 2rem 0;}
	.greeting .top .tit::before {left: -2rem; top: 2rem; width: 3rem;}
	.greeting .top .tit::after {right: -2rem; top: -2rem;  width: 3rem;}
	.greeting .top .tit {width: 36rem; background-size: 100%;}
	.greeting .con {background-size: 40rem;}
}