@charset "UTF-8";

:root{
  --transition-custom02: all 0.2s ease-in-out; 
	--transition-custom03: all 0.3s ease-in-out;
	--transition-custom08: all 0.8s ease-in-out;	
  --transition-custom10: all 1.0s ease-in-out;	
  --font-family-noto: 'Noto Sans Korean', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
  --font-family-suit: 'SUIT', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
  --font-family-Myeongjo: 'NanumMyeongjo', '나눔명조', '명조', 'Noto Sans Korean', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
  --font-family-IvyMode: 'IvyMode', '나눔명조', '명조', 'Noto Sans Korean', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
}

.main #header,
.main .hd_box {height: 108px;}
.main .hd_box > .in_w {height: 100px;}
.main .hd_box { box-sizing: border-box;}
.main #header nav:before {top:100px;}
.main nav .gnb_dep2_w { top:108px; } 
@media (min-width:1161px) {
  .main .hd_box {padding-top:8px; }
}

.main .gnb_open .hd_box {height: 550px;}

@media (min-width:1161px) {
  .main .wrapper { overflow-x: clip; }

  .main .sec_doc.in_cover > .in_w,
  .main .sec_mainBann.in_cover > .in_w,
  .main .sec_press.in_cover > .in_w {top:3rem; opacity: 0; filter: blur(3px); transition: 0.8s;}

  .main.on .sec_doc.in_cover > .in_w,
  .main.on .sec_mainBann.in_cover > .in_w,
  .main.on .sec_press.in_cover > .in_w {opacity: 0.8; }

  .main .sec_doc.in_cover.wp > .in_w,
  .main .sec_mainBann.in_cover.wp > .in_w,
  .main .sec_press.in_cover.wp > .in_w {top:0; opacity:1; filter: blur(0); }
}

/* common */
.tx_ellip1 {word-break: break-all; display: -webkit-box;	overflow: hidden;	text-overflow: ellipsis;	-webkit-line-clamp: 1;	-webkit-box-orient: vertical;}
.tx_ellip2 {word-break: break-all; display: -webkit-box;	overflow: hidden;	text-overflow: ellipsis;	-webkit-line-clamp: 2;	-webkit-box-orient: vertical;}


.main .in_cover > .in_w { max-width:1400px;}
.main:not(.body_scroll) .wrapper:not(.gnb_open, .hdSch_open) #header:not(:hover) .gnb > li:first-child > a {color:initial;}

.main nav {padding-left:1rem;}
.main nav .gnb { width:auto; }
.main nav .gnb > li > a {padding:0 30px;}
@media (max-width:1320px) {
  .main nav .gnb > li > a {padding:0 20px;}
}


.main .contents {}
.main article {overflow: hidden;}

.main .h3_main { margin-bottom:1.5rem; font-size:2.375rem; font-weight: 600; letter-spacing: -1px; line-height: 1.2;}
@media (max-width:1160px) {
  .main .h3_main,
  .main .h3_w {margin-bottom:1.25rem; font-size:2rem;}
}
@media (max-width:768px) {
  .main .h3_main { font-size:1.875rem;}
}
@media (max-width:460px) {
  .main .h3_main {  font-size:1.75rem;}
}


/* ===== 의료원 메인 ===== */
@font-face {
  font-family: 'NanumMyeongjo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/NanumMyeongjo.woff2) format('woff2'),
       url(../fonts/NanumMyeongjo.woff) format('woff');
}
@font-face {
  font-family: 'NanumMyeongjo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/NanumMyeongjoBold.woff2) format('woff2'),
       url(../fonts/NanumMyeongjoBold.woff) format('woff');
}
@font-face {
  font-family: 'NanumMyeongjo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/NanumMyeongjoExtraBold.woff2) format('woff2'),
       url(../fonts/NanumMyeongjoExtraBold.woff) format('woff');
}

/* 맨 위에서는 헤더를 투명하게 두고 본문 배경을 헤더 뒤까지 끌어올린다 */
.main:not(.body_scroll) .wrapper:not(.gnb_open):not(.hdSch_open) #header:not(:hover),
.main:not(.body_scroll) .wrapper:not(.gnb_open):not(.hdSch_open) #header:not(:hover) .hd_box {background:transparent;}

.mc_main {--mc-c:#af6b32; --mv:min(calc(100vw / 640), 0.75px);
  margin-top:-108px; padding-top:108px;
  background:url(../images/main/main_vis_bg.jpg) center top no-repeat, url(../images/main/main_bg.jpg) center 1100px no-repeat, #f9f9f9;}
.mc_main .mo {display:none;}
.mc_main img {max-width:100%;}

/* 메인 비주얼 */
.mc_vis {padding-top:115px; text-align:center;}
.mc_vis_tit {line-height:0;}
.mc_vis_tit img {width:944px; animation:mcBrush 1.1s cubic-bezier(0.3, 0.6, 0.25, 1) 0.05s both;}
@keyframes mcBrush {
  from {clip-path:inset(0 100% 0 0); opacity:0.3;}
  to {clip-path:inset(0 0 0 0); opacity:1;}
}
@keyframes mcUp {
  from {opacity:0; transform:translateY(24px);}
  to {opacity:1; transform:none;}
}
@keyframes mcHistIn {
  from {opacity:0; transform:translateX(70px);}
  to {opacity:1; transform:none;}
}
.mc_vis_x {animation:mcUp 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; margin-top:34px; font-family:var(--font-family-Myeongjo); font-size:18px; font-weight:800; line-height:32px; color:#2c2b30; letter-spacing:-0.025em;}

/* 연혁 타임라인 */
.mc_hist {margin-top:84px;}
.mc_hist_list {overflow:hidden; touch-action:pan-y; -webkit-user-select:none; user-select:none;}
.mc_hist_track {display:flex; will-change:transform;}
.mc_hist_list:not(.ready) {visibility:hidden;}
/* 첫 화면 : 스크립트가 보이는 카드에 --i 를 매겨 0.07초씩 늦게 들어온다 (스크립트의 HIST_INTRO_* 와 맞출 것) */
.mc_hist_list.intro .mc_hist_item {animation:mcHistIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay:calc(0.45s + var(--i, 0) * 70ms);}
.mc_hist_item {flex:none; width:343px; margin-right:27px; padding-top:40px; box-sizing:border-box; cursor:pointer;}
.mc_hist_item img {-webkit-user-drag:none;}
.mc_hist .box {display:block; transition:transform 0.5s;}
.mc_hist .box .img {display:block; position:relative; height:233px; overflow:hidden; background:#ddd;}
.mc_hist .box .img img {width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter 0.5s;}
.mc_hist .box .txt {display:flex; gap:21px; margin-top:19px; color:var(--mc-c);}
.mc_hist .box .y {flex:none; font-family:var(--font-family-Myeongjo); font-size:38px; font-weight:800; line-height:1; letter-spacing:-0.02em;}
.mc_hist .box .x {flex:1; min-width:0; padding-top:1px; font-size:14px; font-weight:300; line-height:18px; letter-spacing:-0.025em;
  display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mc_hist .box .img {transition:box-shadow 0.5s;}
.mc_hist_item.on .box {transform:translateY(-40px);}
.mc_hist_item.on .box .img {box-shadow:0 10px 20px rgba(0,0,0,0.15);}
.mc_hist_item.on .box .img img {filter:none;}
.mc_hist_item.no_tr .box,
.mc_hist_item.no_tr .box .img,
.mc_hist_item.no_tr .box .img img {transition:none;}

/* 눈금자 */
.mc_ruler_w {margin-top:45px; animation:mcUp 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both;}
.mc_ruler {position:relative; height:72px;}
.mc_ruler .ticks {position:absolute; left:0; right:0; top:0; height:20px;}
.mc_ruler .ticks i {position:absolute; top:0; width:1px; height:7px; background:var(--mc-c);}
.mc_ruler .ticks i.m {width:3px; height:10px; margin-left:-1px;}
.mc_ruler .ticks i.b {width:3px; height:20px; margin-left:-1px;}
.mc_ruler .lbl li {position:absolute; top:0; transform:translateX(-50%);}
.mc_ruler .lbl button {padding:28px 8px 0; border:0; background:none; transition:color 0.3s; font-family:var(--font-family-Myeongjo); font-size:16px; line-height:1; color:var(--mc-c); cursor:pointer;}
.mc_ruler .lbl button:hover,
.mc_ruler .lbl button:focus {color:#7d553e;}
@media (prefers-reduced-motion: reduce) {
  .mc_vis_tit img,
  .mc_vis_x,
  .mc_ruler_w,
  .mc_hist_list.intro .mc_hist_item {animation:none;}
}
.mc_ruler .point {position:absolute; top:50px; left:50%; width:16px; height:22px; margin-left:-8px; filter:drop-shadow(0 3px 3px rgba(0,0,0,0.2)); transition:left 0.5s;}
.mc_ruler .point:before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--mc-c); clip-path:polygon(50% 0, 100% 32%, 100% 100%, 0 100%, 0 32%);}
.mc_ruler .point em {position:absolute; left:50%; top:9px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#fff;}

/* 병원 · 대학 바로가기 */
.mc_family {padding-top:128px;}
.mc_family_list {display:grid; grid-template-columns:repeat(4, 1fr); gap:27px 31px;}
.mc_family_list a {display:block; position:relative; aspect-ratio:327 / 253; overflow:hidden;}
.mc_family_list a:after {content:''; position:absolute; left:0; top:0; right:0; bottom:0; box-shadow:inset 0 0 0 4px var(--mc-c); opacity:0; transition:opacity 0.3s;}
.mc_family_list .img img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:opacity 0.4s;}
.mc_family_list .img .on {opacity:0;}
.mc_family_list .t {position:absolute; left:12.5%; bottom:20%; font-size:clamp(20px, 1.56vw, 30px); font-weight:600; line-height:1.23; color:#fff; letter-spacing:-0.025em;}
.mc_family_list .btn {position:absolute; right:9.2%; bottom:17.8%; width:48px; height:49px; background:#fff url(../images/main/ico_card_arw_off.png) center no-repeat; transition:background-color 0.3s;}
.mc_family_list a:hover .img .on,
.mc_family_list a:focus .img .on,
.mc_family_list a:hover:after,
.mc_family_list a:focus:after {opacity:1;}
.mc_family_list a:hover .btn,
.mc_family_list a:focus .btn {background-color:var(--mc-c); background-image:url(../images/main/ico_card_arw_on.png);}

/* 의료원보 */
.mc_gil {padding-top:148px;}
.mc_gil > .in_w {display:flex; justify-content:space-between;}
.mc_gil_left {flex:none; width:35%;}
.mc_gil_tit {line-height:0;}
.mc_gil_tit img {width:332px;}
.mc_gil_x {margin-top:41px; font-family:var(--font-family-Myeongjo); font-size:19px; line-height:30px; color:#000;}
.mc_gil_year {margin-top:78px;}
.mc_gil_year li + li {margin-top:7px;}
.mc_gil_year button {display:flex; align-items:center; position:relative; width:203px; height:48px; padding:0 0 0 35px; border:1px solid transparent; border-radius:24px; background:none; box-sizing:border-box;
  font-family:var(--font-family-Myeongjo); font-size:20px; color:#000; letter-spacing:-0.025em; cursor:pointer; transition:all 0.3s;}
.mc_gil_year li.on button {border-color:var(--mc-c); color:var(--mc-c);}
.mc_gil_year li.on button:after {content:''; position:absolute; right:21px; top:50%; width:11px; height:11px; margin-top:-5px; border-radius:50%; background:var(--mc-c);}
.mc_gil_right {position:relative; flex:1; min-width:0;}
.mc_gil_scroll {height:960px; overflow-y:auto;}
@-moz-document url-prefix() {
  .mc_gil_scroll {scrollbar-width:thin; scrollbar-color:#7d553e #d2cecc;}
}
.mc_gil_scroll::-webkit-scrollbar {width:5px;}
.mc_gil_scroll::-webkit-scrollbar-track {background:#d2cecc;}
.mc_gil_scroll::-webkit-scrollbar-thumb {background:#7d553e;}
.mc_gil_list {position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 380px)); gap:60px 78px; padding-bottom:200px;}
.mc_gil_list a {display:flex; flex-direction:column;}
.mc_gil_list .img {display:block; aspect-ratio:380 / 490; overflow:hidden; background:#e5e2df;}
.mc_gil_list .img img {width:100%; height:100%; object-fit:cover; transition:transform 0.4s;}
.mc_gil_list a:hover .img img,
.mc_gil_list a:focus .img img {transform:scale(1.04);}
.mc_gil_list .t {margin-top:25px; padding-left:21px; border-left:3px solid var(--mc-c); font-family:var(--font-family-Myeongjo); font-size:23px; line-height:28px; color:#28282c; letter-spacing:-0.025em;}
.mc_gil_list li:nth-child(even) {padding-top:36px;}
.mc_gil_list li:nth-child(even) .t {order:-1; margin:0 0 26px;}
.mc_gil_fade {position:absolute; left:0; right:10px; bottom:0; height:340px; background:linear-gradient(to bottom, rgba(250,250,250,0), #fafafa 90%); pointer-events:none;}

/* 의료원장 인사말 */
.mc_greet {background:#5b5047 url(../images/main/greet_bg.jpg) center / cover no-repeat;}
.mc_greet > .in_w {display:flex; align-items:center; justify-content:space-between; gap:40px; height:203px;}
.mc_greet .t {font-family:var(--font-family-Myeongjo); font-size:30px; font-weight:400; line-height:1.3; color:#fff; letter-spacing:-0.025em;}
.mc_greet .x {margin-top:22px; font-size:15px; font-weight:300; color:#fff; letter-spacing:-0.025em;}
.mc_greet .btn {flex:none; display:flex; align-items:center; width:200px; height:53px; padding:0 24px; border:1px solid #fff; box-sizing:border-box; font-size:15px; font-weight:300; color:#fff;
  background:url(../images/main/ico_arw_long.png) right 21px center no-repeat; transition:background-color 0.3s;}
.mc_greet .btn:hover,
.mc_greet .btn:focus {background-color:rgba(255,255,255,0.15);}

@media (max-width:1160px) {
  .mc_main {margin-top:-100px; padding-top:100px;}
  .mc_vis {padding-top:80px;}
  .mc_vis_tit img {width:80%;}
  .mc_family {padding-top:100px;}
  .mc_family_list {gap:20px;}
  .mc_family_list .t {left:8%; bottom:18%; font-size:22px; line-height:28px;}
  .mc_family_list .btn {right:7%; bottom:16%; width:40px; height:40px;}
  .mc_gil {padding-top:110px;}
  .mc_gil_left {width:30%;}
  .mc_gil_tit img {width:240px;}
  .mc_gil_left {padding-right:30px; box-sizing:border-box;}
  .mc_gil_x {margin-top:30px; font-size:16px; line-height:26px;}
  .mc_gil_year {margin-top:50px;}
  .mc_gil_year button {width:170px; padding-left:28px; font-size:18px;}
  .mc_gil_scroll {height:820px;}
  .mc_gil_list {gap:50px 6%;}
  .mc_gil_list .t {font-size:19px; line-height:25px;}
  .mc_greet .t {font-size:26px;}
}
@media (max-width:960px) {
  .mc_family_list {grid-template-columns:repeat(2, 1fr);}
}

/* 모바일 : 640 시안 기준 수치에 --mv 를 곱한다 (480px 넘으면 0.75 배로 고정) */
@media (max-width:768px) {
  .mc_main {margin-top:-4.5rem; padding-top:4.5rem;
    background:url(../images/main/m_vis_bg.jpg) center top / 100% auto no-repeat, url(../images/main/main_bg.jpg) center calc(var(--mv) * 1100) / auto calc(var(--mv) * 2300) no-repeat, #f9f9f9;}
  .mc_main .pc {display:none;}
  .mc_main .mo {display:inline-block;}
  .mc_main br.mo {display:inline;}

  .mc_vis {padding-top:calc(var(--mv) * 104);}
  .mc_vis_tit img {width:calc(var(--mv) * 483);}
  .mc_vis_x {margin-top:calc(var(--mv) * 34); font-size:calc(var(--mv) * 23); line-height:1.4;}

  .mc_hist {margin-top:calc(var(--mv) * 72);}
  .mc_hist_item {width:calc(var(--mv) * 343); margin-right:calc(var(--mv) * 27); padding-top:calc(var(--mv) * 40);}
  .mc_hist .box .img {height:calc(var(--mv) * 233);}
  .mc_hist .box .txt {gap:calc(var(--mv) * 22); margin-top:calc(var(--mv) * 18);}
  .mc_hist .box .y {font-size:calc(var(--mv) * 38);}
  .mc_hist .box .x {font-size:calc(var(--mv) * 19); line-height:1.25;}
  .mc_hist_item.on .box {transform:translateY(calc(var(--mv) * -40));}

  .mc_ruler_w {margin-top:calc(var(--mv) * 60);}
  .mc_ruler {height:calc(var(--mv) * 110); margin:0 calc(var(--mv) * 20);}
  .mc_ruler .ticks {height:calc(var(--mv) * 20);}
  .mc_ruler .ticks i {height:calc(var(--mv) * 7);}
  .mc_ruler .ticks i.m {width:2px; height:calc(var(--mv) * 10);}
  .mc_ruler .ticks i.b {width:2px; height:calc(var(--mv) * 20);}
  .mc_ruler .lbl button {padding:calc(var(--mv) * 28) 4px 0;}
  .mc_ruler .lbl button {font-size:calc(var(--mv) * 23);}
  .mc_ruler .point {top:calc(var(--mv) * 55); width:calc(var(--mv) * 35); height:calc(var(--mv) * 55); margin-left:calc(var(--mv) * -17.5);}
  .mc_ruler .point em {top:calc(var(--mv) * 20); width:calc(var(--mv) * 14); height:calc(var(--mv) * 14); margin-left:calc(var(--mv) * -7);}

  .mc_family {padding-top:calc(var(--mv) * 139);}
  .mc_family_list {gap:calc(var(--mv) * 22) calc(var(--mv) * 24);}
  .mc_family_list a:after {box-shadow:inset 0 0 0 3px var(--mc-c);}
  .mc_family_list .t {left:13%; bottom:20%; font-size:calc(var(--mv) * 26); line-height:1.45;}
  .mc_family_list .btn {right:9.5%; bottom:18.5%; width:calc(var(--mv) * 51); height:calc(var(--mv) * 51); background-size:calc(var(--mv) * 15) auto;}

  .mc_gil {padding-top:calc(var(--mv) * 140);}
  .mc_gil > .in_w {display:block;}
  .mc_gil_left {width:auto; padding-right:0;}
  .mc_gil_tit {padding-left:calc(var(--mv) * 11);}
  .mc_gil_tit img {width:calc(var(--mv) * 332);}
  .mc_gil_x {margin-top:calc(var(--mv) * 40); padding-left:calc(var(--mv) * 11); font-size:calc(var(--mv) * 27); line-height:1.3;}
  .mc_gil_year {position:absolute; left:0; width:41%; margin-top:calc(var(--mv) * 72);}
  .mc_gil_year li + li {margin-top:calc(var(--mv) * 8);}
  .mc_gil_year button {width:100%; height:calc(var(--mv) * 60); padding-left:calc(var(--mv) * 43); border-radius:calc(var(--mv) * 30); font-size:calc(var(--mv) * 25);}
  .mc_gil_year li.on button:after {right:calc(var(--mv) * 25); width:calc(var(--mv) * 13); height:calc(var(--mv) * 13); margin-top:calc(var(--mv) * -6.5);}
  .mc_gil > .in_w {position:relative;}
  .mc_gil_right {margin-top:calc(var(--mv) * 72); margin-left:48%;}
  .mc_gil_scroll {height:calc(var(--mv) * 732);}
  .mc_gil_list {grid-template-columns:minmax(0, 1fr); gap:calc(var(--mv) * 43); padding-right:calc(var(--mv) * 10); padding-bottom:calc(var(--mv) * 200);}
  .mc_gil_list li:nth-child(even) {padding-top:0;}
  .mc_gil_list li:nth-child(even) .t {order:0; margin:calc(var(--mv) * 17) 0 0;}
  .mc_gil_list .t {margin-top:calc(var(--mv) * 17); padding-left:calc(var(--mv) * 14); border-left-width:calc(var(--mv) * 7); font-size:calc(var(--mv) * 23); line-height:1.5;}
  .mc_gil_fade {left:0; height:calc(var(--mv) * 343);}

  .mc_greet {background-image:url(../images/main/m_greet_bg.jpg);}
  .mc_greet > .in_w {display:block; height:auto; padding:calc(var(--mv) * 72) 0 calc(var(--mv) * 70); text-align:center;}
  .mc_greet .t {font-size:calc(var(--mv) * 36);}
  .mc_greet .x {margin-top:calc(var(--mv) * 32); font-size:calc(var(--mv) * 23); line-height:1.45;}
  .mc_greet .btn {width:calc(var(--mv) * 308); height:calc(var(--mv) * 79); margin:calc(var(--mv) * 56) auto 0; padding:0 calc(var(--mv) * 37); font-size:calc(var(--mv) * 23);
    background-position:right calc(var(--mv) * 33) center; background-size:calc(var(--mv) * 30) auto;}
}