@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Sunhyeong Kim. (Weaverloft Corp.)
 * 2. Production Date: 2023-01-10
 * 3. Client: 서울대학교병원 융합의학기술원
 */

/* clinic overview
 ========================================================================== */
.sub-top.clinic { background-image: url('../images/common/sub-bg-clinic.jpg');}
.clinic-overview-sec .txt-wrap {margin-bottom: 80px; } 
.clinic-overview-sec .txt-wrap h4 {margin-bottom: 1em;padding-bottom: 0.75em;font-size: 40px;font-weight: 700;font-variation-settings: 'wght' 700;color: #111;line-height: 1.5;border-bottom: 1px solid #CCCCCC;word-break:keep-all;text-wrap: pretty; } 
.clinic-overview-sec .txt-wrap h4 em {color: #326AFF; } 
.clinic-overview-sec .txt-wrap h4:lang(en) { font-size: 38px;}
.clinic-overview-sec .txt-wrap p {font-size: 26px;line-height: 1.6153;color: #333;font-weight: 400;font-variation-settings: 'wght' 400;word-break:keep-all;text-wrap: pretty; } 
.clinic-overview-sec .txt-wrap p em {font-weight: 600;font-variation-settings: 'wght' 600; } 
.clinic-overview-sec .txt-wrap p:lang(en) { font-size: 22px;}
.clinic-overview-sec .img-box {width: 100%;max-width: 1380px;margin: 0 auto;padding: 60px;background-color: #F8F8F8; } 
.clinic-overview-sec .img-box picture {width: 80%; margin: 0 auto;}  

/* chart-part */
.clinic-overview-sec .chart-part { margin-top: 80px;}
.clinic-overview-sec .tab-tit-wrap { display: flex; gap: 20px; justify-content: flex-start; align-items: center;}
.clinic-overview-sec .tab-tit-wrap p { font-size: 20px;line-height: 1.4285;color: #333;font-weight: 400;font-variation-settings: 'wght' 400;word-break:keep-all;text-wrap: pretty; }
.clinic-overview-sec .chart-box { margin-top: 40px;}

@media screen and (max-width: 1100px) {
	.clinic-overview-sec .txt-wrap h4 {font-size: clamp(24px,3.636vw,40px); } 
	.clinic-overview-sec .txt-wrap h4:lang(en) { font-size: clamp(24px,3.455vw,38px);}
	.clinic-overview-sec .txt-wrap p {font-size: clamp(18px,2.364vw,26px); } 
	.clinic-overview-sec .txt-wrap p:lang(en) { font-size: clamp(18px,2.000vw,22px);}
	.clinic-overview-sec .img-box picture {width: 100%;}
	.clinic-overview-sec .tab-tit-wrap p { font-size: clamp(14px,1.818vw,20px);}
	.clinic-overview-sec .touch-mark { display: none;}
}
@media screen and (max-width: 768px) {
	.sub-top.clinic { background-image: url('../images/common/sub-bg-clinic-mo.jpg');}
	.clinic-overview-sec .txt-wrap h4 {margin-bottom: 20px;padding-bottom: 20px;font-size: 24px; } 
	.clinic-overview-sec .txt-wrap p {font-size: 18px; } 
	/* .clinic-overview-sec .txt-wrap h4 br, */
	.clinic-overview-sec .txt-wrap p br {display: none; } 
	.clinic-overview-sec .img-box {padding: 40px 20px; } 
	.clinic-overview-sec .img-box picture {max-width: 320px;margin: 0 auto; } 
	.clinic-overview-sec .chart-part { margin-top: 100px;}
	.clinic-overview-sec .tab-tit-wrap { flex-flow: column; gap: 8px; align-items: flex-start;}
	.clinic-overview-sec .touch-mark { display: flex;}
	.clinic-overview-sec .chart-box {width: auto !important; min-width: 590px;}
}

/* clinic apply
 ========================================================================== */
.clinic-apply-sec .txt-wrap {margin-bottom: 100px; } 
.clinic-apply-sec .txt-wrap .tit-top { display: flex; align-items: center; gap: 20px; margin-bottom: 1em; padding-bottom: 0.75em; font-size: 40px; border-bottom: 1px solid #CCCCCC;}
.clinic-apply-sec .txt-wrap h3 {font-size: 40px;font-weight: 700;font-variation-settings: 'wght' 700;color: #111;line-height: 1.5;word-break:keep-all;text-wrap: pretty; } 
.clinic-apply-sec .txt-wrap .tit-top p { font-size: 20px; line-height: 1.3; color: #333;font-weight: 400;font-variation-settings: 'wght' 400; word-break:keep-all; text-wrap: pretty; }
.clinic-apply-sec .txt-wrap .desc > p { position: relative; padding-left: 1em; font-size: 26px;line-height: 1.3846;color: #333;font-weight: 400;font-variation-settings: 'wght' 400;word-break:keep-all;text-wrap: pretty; } 
.clinic-apply-sec .txt-wrap .desc > p::before { content:''; position: absolute; top:0.4em; left: 0; width: 14px; height: 14px; box-sizing: border-box; border: 3px solid var(--main-color); border-radius: 50%;}
.clinic-apply-sec .txt-wrap .desc > p + p { margin-top: 0.7692em;}
.clinic-apply-sec .cont .clinic-list { display: flex; gap: 60px; flex-flow: row wrap;}
.clinic-apply-sec .clinic-list > li { position: relative; width: calc((100% - 120px) / 3); border: 2px solid #EEEEEE; box-sizing: border-box;}
.clinic-apply-sec .clinic-box { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; background-color: #fff; border-radius: 4px; transition: border 300ms;}
.clinic-apply-sec .clinic-box .top-area { position: relative; width: 100%; aspect-ratio: 420/220; background-color: #F1F4F9; overflow: hidden; flex-shrink: 0;}
.clinic-apply-sec .clinic-box .top-area img { position: absolute; right: -15%; top: 0; height:120%; width: auto;}
.clinic-apply-sec .clinic-box .top-area::before { content:''; position: absolute; left: 20%; top: 0; display: block; width: 35%; height: 100%; background: linear-gradient(to right, #F1F4F9 55%, rgba(241,244,249,0.5) 85%, rgba(241,244,249,0)); z-index: 1;}
.clinic-apply-sec .clinic-box .top-area .name { position: absolute; top: 1.714em; left: 1.0714em; max-width: 60%; font-size: 28px; z-index: 1;}
.clinic-apply-sec .clinic-box .top-area .name p { line-height: 1.2142;color: #111;font-weight: 700;font-variation-settings: 'wght' 700;}
.clinic-apply-sec .clinic-box .top-area .name p em { margin-left: 0.4em; font-size: 0.714em; color: #666;font-weight: 600;font-variation-settings: 'wght' 600;}
.clinic-apply-sec .clinic-box .top-area .name:lang(en) { font-size: 24px;}
.clinic-apply-sec .clinic-box .top-area .name p:lang(en) { display: flex; flex-flow: column-reverse;}
.clinic-apply-sec .clinic-box .top-area .name p em:lang(en) { margin-left: 0;}
.clinic-apply-sec .clinic-box .txt-area { position: relative; padding: 40px 30px; flex-grow: 1;}
.clinic-apply-sec .clinic-box .txt-area .clinic-info { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; font-size: 18px; }
.clinic-apply-sec .clinic-box .txt-area .clinic-info .info-tit { min-width: 135px; padding-left: 2em; font-size: 16px; font-weight: 400; font-variation-settings: 'wght' 400; color: #666; background-repeat: no-repeat; background-position: left center; background-size: contain; flex-shrink: 0; line-height: 1.75;}
.clinic-apply-sec .clinic-box .txt-area .clinic-info:last-of-type { margin-bottom: 5.5555em;}
.clinic-apply-sec .clinic-box .txt-area .clinic-info ul { display: flex; justify-content: flex-end; align-items: center; flex-flow: row wrap;}
.clinic-apply-sec .clinic-box .txt-area .clinic-info .info-cont { text-align: right; word-break: break-word;}
.clinic-apply-sec .clinic-box .txt-area .clinic-info p { word-break: break-word; text-align:right;}
.clinic-apply-sec .clinic-box .txt-area .clinic-time .info-tit { background-image: url('../images/sub/icon-time.svg');}
.clinic-apply-sec .clinic-box .txt-area .clinic-time li { position: relative;  color: #333; line-height: 1.4; font-weight: 500;font-variation-settings: 'wght' 500;}
.clinic-apply-sec .clinic-box .txt-area .clinic-time li + li { margin-left: 0.5em; padding-left: 0.5em;}
.clinic-apply-sec .clinic-box .txt-area .clinic-time li + li::before { content:''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 60%; background-color: #CCC;}
.clinic-apply-sec .clinic-box .txt-area .clinic-way .info-tit { background-image: url('../images/sub/icon-apply.svg'); }
.clinic-apply-sec .clinic-box .txt-area .clinic-way a { transition: opacity 300ms;}
.clinic-apply-sec .clinic-box .txt-area .clinic-way .btn-apply-link { color: var(--main-color); text-decoration: underline;}
.clinic-apply-sec .clinic-box .txt-area .clinic-down .info-tit { background-image: url('../images/sub/icon-down.svg'); }
.clinic-apply-sec .clinic-box .txt-area .clinic-info .btn-apply-down {min-width: 124px; padding: 0.25em 1.25em; background-color: #EEEEEE; border-radius: 0.875em; font-size: 16px; color: #666;font-weight: 600;font-variation-settings: 'wght' 600; text-align: center;}
.clinic-apply-sec .clinic-box .txt-area .clinic-info .btn-apply-down:lang(en) {min-width: 130px;}
.clinic-apply-sec .clinic-box .txt-area .btn-view-detail { position: absolute; left: 30px; bottom: 40px; display: flex; justify-content: center; align-items: center; width: calc(100% - 60px); height: 3.3333em; border-radius: 3.3333em; border: 1px solid #326AFF; background-color: #fff; font-size: 18px;font-weight: 600;font-variation-settings: 'wght' 600;color: #326AFF;line-height: 1.1667; transition: background-color 300ms, color 300ms; cursor: pointer;}
@media screen and (max-width: 1280px) {
	.clinic-apply-sec .cont .clinic-list { gap: 40px;}
	.clinic-apply-sec .clinic-box .top-area .name { font-size: clamp(24px,2.188vw,28px);}
	.clinic-apply-sec .clinic-box .top-area .name:lang(en) { font-size: clamp(20px,1.875vw,24px);}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info { font-size: clamp(16px,1.406vw,18px);}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info .btn-apply-down { font-size: clamp(14px,1.25vw,16px);}
	.clinic-apply-sec .clinic-box .txt-area .btn-view-detail { font-size: clamp(16px,1.406vw,18px);}
	.clinic-apply-sec .clinic-list > li { width: calc((100% - 40px) / 2);}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info .info-tit { min-width: clamp(120px,10.547vw,135px); font-size: clamp(14px,1.25vw,16px);}
}
@media screen and (max-width: 1100px) {
	.clinic-apply-sec .txt-wrap .desc > p { font-size: clamp(18px,2.364vw,26px);}
	.clinic-apply-sec .txt-wrap { margin-bottom: clamp(60px,9.091vw,100px);}
	.clinic-apply-sec .txt-wrap .tit-top {font-size: clamp(24px,3.636vw,40px); }
	.clinic-apply-sec .txt-wrap h3 {font-size: clamp(24px,3.636vw,40px); } 
	.clinic-apply-sec .txt-wrap .tit-top p { font-size: clamp(14px,1.818vw,20px);}
	.clinic-apply-sec .txt-wrap .desc > p br {display: none; } 
	.clinic-apply-sec .cont .clinic-list { gap: 20px;}
	.clinic-apply-sec .clinic-list > li { width: calc((100% - 20px) / 2);}
}
@media screen and (max-width: 768px) {
	.clinic-apply-sec .txt-wrap { margin-bottom: 60px;}
	.clinic-apply-sec .txt-wrap .tit-top { flex-flow: column; gap: 8px; align-items: flex-start; margin-bottom: 20px; padding-bottom: 20px; font-size: 24px;}
	.clinic-apply-sec .txt-wrap h3 {font-size: 24px; } 
	.clinic-apply-sec .txt-wrap .desc > p { padding-left: 0.8333em;}
	.clinic-apply-sec .txt-wrap .desc > p::before { top:0.4em; width: 8px; height: 8px; border: 2px solid var(--main-color);}
	.clinic-apply-sec .clinic-box .txt-area .btn-view-detail { height: 48px;}
	.clinic-apply-sec .clinic-box .top-area .name { left: 20px; top: 30px;}
	.clinic-apply-sec .clinic-box .txt-area { padding: 30px 20px;}
	.clinic-apply-sec .clinic-box .top-area { aspect-ratio: 320 / 168;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info { flex-flow: column; margin-bottom: 16px;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info .info-cont { margin-top: 4px; width: 100%;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info p { margin-top: 4px; width: 100%;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info:last-of-type { margin-bottom: calc(2.2222em + 48px);}
	.clinic-apply-sec .clinic-box .txt-area .btn-view-detail { left: 20px; bottom: 30px; width: calc(100% - 40px);}
}
@media screen and (max-width: 630px) {
	.clinic-apply-sec .cont .clinic-list { gap: 30px;}
	.clinic-apply-sec .clinic-list > li { width: 100%;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info { flex-flow: row;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info .info-cont { margin-top: 0px; width: auto;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info p { margin-top: 0px; width: auto;}
	.clinic-apply-sec .clinic-box .top-area .name { top: 50%; transform: translateY(-50%);}
}
@media screen and (max-width: 480px) {
	.clinic-apply-sec .clinic-box .top-area .name { top: min(30px,12%); transform: translateY(0);}
}
@media screen and (max-width: 360px) {
	.clinic-apply-sec .clinic-box .top-area .name { font-size: 20px;}
	.clinic-apply-sec .clinic-box .top-area .name:lang(en) { font-size: 17px;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info { flex-flow: column;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info .info-cont { margin-top: 2px; width: 100%;}
	.clinic-apply-sec .clinic-box .txt-area .clinic-info p { margin-top: 2px; width: 100%;}
}
.clinic-apply-sec .clinic-list > li::before, .clinic-apply-sec .clinic-list > li::after {content: "";position: absolute;width: 0;height: 2px;z-index: 5;transition: all 300ms linear;transition-delay: 300ms;background-color: var(--main-color);}
.clinic-apply-sec .clinic-list > li::before {right: 0;top: -1px;}
.clinic-apply-sec .clinic-list > li::after {left: 0;bottom: -1px;}
.clinic-apply-sec .clinic-box::before, .clinic-apply-sec .clinic-box::after {content: "";position: absolute;width: 2px;height: 0;z-index: 5;transition: all 300ms linear;transition-delay: 0s;background-color: var(--main-color);}
.clinic-apply-sec .clinic-box::before {left: -2px;top: -1px;}
.clinic-apply-sec .clinic-box::after {right: -2px;bottom: -1px;}
@media screen and (min-width: 769px){
	@media (hover:hover) {
		.clinic-apply-sec .clinic-list > li:hover {border-color: transparent;transition: border 1.2s;}
		.clinic-apply-sec .clinic-list > li:hover::before, .clinic-apply-sec .clinic-list > li:hover::after {width: calc(100% + 2px);transition-delay: 0s;}
		.clinic-apply-sec .clinic-box:hover::before, .clinic-apply-sec .clinic-box:hover::after {height: calc(100% + 2px);transition-delay: 300ms;}
		.clinic-apply-sec .clinic-box .txt-area .clinic-way a:hover,
		.clinic-apply-sec .clinic-box .txt-area .clinic-down a:hover { opacity: 0.8;}
		.clinic-apply-sec .clinic-box .txt-area .btn-view-detail:hover { background-color: #326AFF; color: #fff;}
	}
}