@charset "UTF-8";
/* 의료원 인트로 화면 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Montserrat-Bold.woff2) format('woff2');
}

html, body {margin:0; padding:0;}
body {font-family:'Noto Sans Korean', 'Malgun Gothic', '맑은 고딕', sans-serif; color:#fff; background:#1b2029; -webkit-text-size-adjust: none;}
h1, h2, h3, p, ul, li {margin:0; padding:0;}
ul {list-style: none;}
a {color:inherit; text-decoration: none;}
img {border:0; vertical-align: top;}
.skip {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);}

.intro_wrap {position:relative; display: flex; flex-direction: column; min-height:100vh; overflow: hidden; isolation: isolate;}
.intro_wrap:after {content:''; display: block; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-2; background:url(../images/intro_bg.jpg) no-repeat 50% 50%; background-size:cover;}
.intro_wrap:before {content:''; display: block; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; background:rgba(22,28,40,0.55);}
.intro_in {position:relative; width:100%; max-width:1400px; margin:0 auto; padding:0 20px; box-sizing: border-box;}

/* header */
.intro_hd {position:relative; z-index:1; padding-top:2.4375rem;}
.intro_hd .logo {display: inline-block;}
.intro_hd .logo img {display: block; height:2.6875rem;}

/* contents */
.intro_cnt {position:relative; z-index:1; flex:1; padding:4.375rem 0 3rem;}
.intro_tit {text-align: center;}
.intro_tit .tx {font-size:1.5rem; font-weight: 300; letter-spacing: -0.025em;}
.intro_tit .t {margin-top:0.5rem; font-family:'Montserrat', sans-serif; font-size:3.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;}

.intro_list {display: grid; grid-template-columns: repeat(5, 16.4375rem); justify-content: center; gap:1.0625rem 0.75rem; margin-top:3.3125rem;}
.intro_list > li {--c:#e37312;}
.intro_list > li.li01 {grid-column: 1 / -1; justify-self: center; width:35.125rem;}
.intro_list > li.li07 {grid-column: 2;}
.intro_list > li.li01 {--c:#e37312;}
.intro_list > li.li02 {--c:#f8af0a;}
.intro_list > li.li03 {--c:#8b8d09;}
.intro_list > li.li04 {--c:#5191cc;}
.intro_list > li.li05 {--c:#7581bf;}
.intro_list > li.li06 {--c:#4fb3cf;}
.intro_list > li.li07 {--c:#a569c4;}
.intro_list > li.li08 {--c:#a9b0b2;}
.intro_list > li.li09 {--c:#b66b92;}
.intro_list a {position:relative; display: block; height:11.4375rem; padding:3.125rem 1.9375rem 0; border:1px solid rgba(255,255,255,0.75); box-sizing: border-box; overflow: hidden; transition: background-color 0.3s ease, border-color 0.3s ease;}
.intro_list .li01 a {height:8.5625rem; padding-top:2.25rem; text-align: center;}
.intro_list .def {transition: opacity 0.3s ease;}
.intro_list .t {display: block; font-size:1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em;}
.intro_list .x {display: block; margin-top:1.5rem; font-size:0.8125rem; font-weight: 300; line-height: 1.55; color:rgba(255,255,255,0.8); letter-spacing: -0.025em; word-break: keep-all;}
.intro_list .li01 .t {font-size:1.4375rem;}
.intro_list .li01 .x {margin-top:1.25rem; font-size:1rem;}
.intro_list .en {position:absolute; right:1.9375rem; top:1.6875rem; width:2rem; height:2rem; font-family:'Montserrat', sans-serif; font-size:1.25rem; font-weight: 700; font-style: normal; line-height: 1; color:var(--c);}
.intro_list .en span {position:absolute;}
.intro_list .en span:first-child {left:0; top:0;}
.intro_list .en span:last-child {right:0; bottom:0;}
.intro_list .li01 .en {right:1.9375rem; top:1.625rem;}
.intro_list .go {position:absolute; left:0; top:0; width:100%; height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;}
.intro_list .go .home {display: block; width:1.5rem; height:1.5rem; background:url(../images/intro_icon_home.png) no-repeat 50% 50%; background-size:contain;}
.intro_list .go .b_t {margin-top:0.625rem; font-size:0.9375rem; font-weight: 500;}
.intro_list .go .arw {display: block; margin-top:1.1875rem; width:1.4375rem; height:1.4375rem; background:url(../images/intro_icon_arw.png) no-repeat 50% 50%; background-size:contain;}
.intro_list a:hover,
.intro_list a:focus {background-color:var(--c); border-color:var(--c);}
.intro_list a:hover .def,
.intro_list a:focus .def {opacity: 0.15;}
.intro_list a:hover .go,
.intro_list a:focus .go {opacity: 1;}

/* footer */
.intro_ft {position:relative; z-index:1; background:rgba(33,38,48,0.92);}
.intro_ft .intro_in {display: flex; align-items: center; justify-content: space-between; gap:1.25rem; min-height:5rem; padding-top:0.75rem; padding-bottom:0.75rem;}
.intro_ft .copy {font-size:0.9375rem; color:rgba(255,255,255,0.6); text-transform: uppercase;}
.intro_ft .info {display: flex; flex-wrap: wrap; align-items: center; gap:0.5rem 2.1875rem;}
.intro_ft .info > li {font-size:0.9375rem; color:rgba(255,255,255,0.7);}
.intro_ft .info strong {margin-right:0.375rem; font-weight: 700; color:#fff;}
.intro_ft .info .tel a {font-size:1.25rem; font-weight: 700; color:#fff;}

@media (max-width:1439px) {
  .intro_in {padding:0 2.5rem;}
  .intro_list {grid-template-columns: repeat(5, minmax(0, 1fr)); max-width:84rem; margin-left:auto; margin-right:auto;}
  .intro_list > li.li01 {max-width:100%;}
  .intro_list .x br {display: none;}
}
@media (max-width:1160px) {
  .intro_tit .t {font-size:2.75rem;}
  .intro_list {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .intro_list > li.li01 {grid-column: 1 / -1;}
  .intro_list > li.li07 {grid-column: auto;}
  .intro_list a {height:10rem; padding:2.25rem 1.5rem 0;}
  .intro_list .en {right:1.5rem; top:1.25rem;}
  .intro_ft .intro_in {flex-direction: column-reverse; align-items: flex-start; padding-top:1.25rem; padding-bottom:1.25rem;}
}
@media (max-width:768px) {
  html {font-size:15px;}
  .intro_in {padding:0 5vw;}
  .intro_hd {padding-top:1.5rem;}
  .intro_hd .logo img {height:2.25rem;}
  .intro_cnt {padding-top:3rem;}
  .intro_tit .tx {font-size:1.125rem;}
  .intro_tit .t {font-size:2rem;}
  .intro_list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap:0.625rem; margin-top:2.25rem;}
  .intro_list a,
  .intro_list .li01 a {height:auto; min-height:9rem; padding:1.75rem 1.25rem 1.5rem;}
  .intro_list .li01 a {min-height:0;}
  .intro_list > li {display: flex;}
  .intro_list > li > a {flex:1 1 auto;}
  .intro_list .t {font-size:1.125rem;}
  .intro_list .li01 .t {font-size:1.25rem;}
  .intro_list .x {margin-top:0.875rem;}
  .intro_list .li01 .x {font-size:0.875rem;}
  .intro_list .en {right:1rem; top:1rem; width:1.625rem; height:1.625rem; font-size:1rem;}
  .intro_ft .info {flex-direction: column; align-items: flex-start;}
  .intro_ft .copy {font-size:0.8125rem;}
}
@media (max-width:460px) {
  .intro_tit .t {font-size:1.625rem;}
  .intro_tit .t br {display: none;}
}


/* 등장 효과 : 배경이 천천히 당겨지고, 로고·제목·칸·푸터가 차례로 올라온다 */
@keyframes introBgZoom {
  0% {transform: scale(1.12);}
  100% {transform: scale(1);}
}
@keyframes introDim {
  0% {opacity: 1; background:rgba(10,14,22,0.95);}
  100% {opacity: 1;}
}
@keyframes introFadeDown {
  0% {opacity: 0; transform: translateY(-1.25rem);}
  100% {opacity: 1; transform: none;}
}
@keyframes introFadeUp {
  0% {opacity: 0; transform: translateY(2.5rem);}
  100% {opacity: 1; transform: none;}
}
@keyframes introLetter {
  0% {opacity: 0; transform: translate(-0.5rem, 0.5rem);}
  100% {opacity: 1; transform: none;}
}

.intro_wrap:after {animation: introBgZoom 6s cubic-bezier(0.22, 0.61, 0.36, 1) both;}
.intro_wrap:before {animation: introDim 1.6s ease-out both;}
.intro_hd .logo {animation: introFadeDown 0.8s ease-out 0.3s both;}
.intro_tit .tx {animation: introFadeUp 0.9s ease-out 0.5s both;}
.intro_tit .t {animation: introFadeUp 0.9s ease-out 0.7s both;}
.intro_list > li {animation: introFadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;}
.intro_list > li.li01 {animation-delay: 1.0s;}
.intro_list > li.li02 {animation-delay: 1.15s;}
.intro_list > li.li03 {animation-delay: 1.25s;}
.intro_list > li.li04 {animation-delay: 1.35s;}
.intro_list > li.li05 {animation-delay: 1.45s;}
.intro_list > li.li06 {animation-delay: 1.55s;}
.intro_list > li.li07 {animation-delay: 1.7s;}
.intro_list > li.li08 {animation-delay: 1.8s;}
.intro_list > li.li09 {animation-delay: 1.9s;}
.intro_list .en span {animation: introLetter 0.6s ease-out both;}
.intro_list .en span:first-child {animation-delay: 2.1s;}
.intro_list .en span:last-child {animation-delay: 2.25s;}
.intro_ft {animation: introFadeUp 0.8s ease-out 2.1s both;}

/* 칸에 올렸을 때 살짝 떠오른다 */
.intro_list a {transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
.intro_list a:hover,
.intro_list a:focus {transform: translateY(-0.375rem); box-shadow: 0 1rem 2rem rgba(0,0,0,0.35);}
.intro_list .go .home,
.intro_list .go .b_t,
.intro_list .go .arw {transform: translateY(0.75rem); transition: transform 0.35s ease;}
.intro_list .go .b_t {transition-delay: 0.05s;}
.intro_list .go .arw {transition-delay: 0.1s;}
.intro_list a:hover .go .home,
.intro_list a:hover .go .b_t,
.intro_list a:hover .go .arw,
.intro_list a:focus .go .home,
.intro_list a:focus .go .b_t,
.intro_list a:focus .go .arw {transform: none;}

/* 모바일·터치 화면은 누르면 바로 이동하므로 올렸을 때 효과를 쓰지 않는다 */
@media (max-width:768px), (hover: none) {
  .intro_list a:hover,
  .intro_list a:focus {background-color:transparent; border-color:rgba(255,255,255,0.75); transform: none; box-shadow: none;}
  .intro_list a:hover .def,
  .intro_list a:focus .def {opacity: 1;}
  .intro_list .go {display: none;}
}

/* 움직임 줄이기를 켠 사용자는 효과 없이 바로 보인다 */
@media (prefers-reduced-motion: reduce) {
  .intro_wrap:after,
  .intro_wrap:before,
  .intro_hd .logo,
  .intro_tit .tx,
  .intro_tit .t,
  .intro_list > li,
  .intro_list .en span,
  .intro_ft {animation: none;}
  .intro_list a,
  .intro_list .go .home,
  .intro_list .go .b_t,
  .intro_list .go .arw {transition: none; transform: none;}
}