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

.vision-sec { padding-bottom: 0; } 
.vision-sec .sub-title-bg { background-image: url('../images/sub/vision-bg.jpg'); } 
.vision-cont { max-width: 780px; margin: 0 auto; margin-top: 20px; } 
.mission { position: relative; margin: 7.50em 0 0; padding: 10.63em 0 10.00em; background-image: url('../images/sub/mission-bg.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover; text-align: center; } 
.mission .sub-title { padding: 0; } 
.mission-cont { position: relative; z-index: 1; margin-top: 4.38em; } 
.mission-cont ul { display: flex; justify-content: space-between; gap: 3.75em; } 
.mission-cont ul li { position: relative; width: calc(100%/3 - 1.875em); height: fit-content; padding: 3.13em; border-radius: 4px; background-color: rgba(38, 48, 87, 0.3); backdrop-filter: blur(15px); color: #fff; text-align: left; } 
.mission-cont ul li.mission-cont01 { top: -4.38em; } 
.mission-cont ul li.mission-cont03 { top: -4.38em; } 
.mission-cont ul li dl { padding: 9.38em 0 0; background-repeat: no-repeat; background-position: left top; background-size: 5.00em auto; } 
.mission-cont ul li.mission-cont01 dl { background-image: url('../images/sub/icon-mission01.svg'); } 
.mission-cont ul li.mission-cont02 dl { background-image: url('../images/sub/icon-mission02.svg'); } 
.mission-cont ul li.mission-cont03 dl { background-image: url('../images/sub/icon-mission03.svg'); } 
.mission-cont ul li dl dt { font-size: 1.88rem; font-weight: 300; font-variation-settings: 'wght' 300; line-height: 1.4; word-break: keep-all; } 
.mission-cont ul li dl dt strong { display: block; font-weight: 600; font-variation-settings: 'wght' 600; } 
.mission-cont ul li dl dd { opacity: 0.6; margin: 1.67em 0 0; font-size: 1.125rem; font-weight: 400; font-variation-settings: 'wght' 400; line-height: 1.5; word-break: keep-all; } 
@media screen and (max-width: 1480px){
    .mission { padding: 10.63em 0 10em; padding: clamp(5.31em, 10.811vw, 10.63em) 0 clamp(8.75em, 10.811vw, 10.00em); } 
    .mission-cont ul { display: flex; justify-content: space-between; gap: clamp(25px, 1.689vw, 3.75em); } 
    .mission-cont ul li { padding: clamp(1.88em, 3.378vw, 50px); } 
    .mission-cont ul li dl { padding: clamp(5em, 10.135vw, 9.38em) 0 0; background-size: clamp(3em, 5.405vw, 5em) auto; } 
    .mission-cont ul li dl dt { font-size: clamp(1.25rem, 2.027vw, 1.88rem); } 
    .mission-cont ul li dl dd { opacity: 0.6; margin: 1.67em 0 0; font-size: clamp(0.875rem, 1.216vw, 1.125rem); } 
}
@media screen and (max-width: 1100px){
    .mission { margin: 6.25em 0 0; aspect-ratio: initial; } 
    .mission-cont { margin-top: 2.5em; } 
    .mission-cont ul { max-width: 780px; margin: 0 auto; flex-direction: column; } 
    .mission-cont ul li {width: 100%;}
    .mission-cont ul li.mission-cont01, .mission-cont ul li.mission-cont03 { top: 0; } 
    .mission-cont ul li dl dd br.pc { display: none; } 
}
@media screen and (max-width: 768px){
    .vision-sec .sub-title-bg { background-image: url('../images/sub/vision-bg-mo.jpg'); background-position: top center; } 
    .vision-cont { max-width: 320px; } 
    .mission { background-image: url('../images/sub/mission-bg-mo.jpg'); } 
    .mission-cont ul { max-width: none; } 
    .mission-cont ul li dl dd { margin: 15px 0 0; } 
}