@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Ajin Lee. (Weaverloft Corp.)
 * 2. Production Date: 2023-01-09
 * 3. Client: 서울대학교병원 융합의학기술원
 */
/*========== Educational ==========*/
.section.educational-sec { padding-bottom: 0; } 
.educational-sec .sub-title-bg { background-image: url('../images/sub/educational-bg.jpg'); } 
.educational-cont { max-width: 692px; margin: 0 auto; margin-top: 20px; } 
.mission.purposes { background-image: url('../images/sub/purposes-bg.jpg'); } 
.mission.purposes .mission-cont { margin-top: 8.75em; } 
.mission.purposes .mission-cont ul li { width: calc(100%/3 - (3.70em/2)); padding-left: 2.9em; background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); color: #fff; text-align: left; } 
.mission.purposes .mission-cont ul li dl { padding: 13em 0 0; background-position: right 0.85em top; } 
.mission.purposes .mission-cont ul li.purposes-cont01 dl { background-image: url('../images/sub/icon-mission03.svg'); } 
.mission.purposes .mission-cont ul li.purposes-cont02 dl { background-image: url('../images/sub/icon-mission04.svg'); } 
.mission.purposes .mission-cont ul li.purposes-cont03 dl { background-image: url('../images/sub/icon-mission05.svg'); } 
.mission.purposes .mission-cont ul li dl dt { opacity: 1; font-size: 1.75rem; font-weight: 600; font-variation-settings: 'wght' 600; font-family: 'Outfit Variable'; color: #58FFFF; line-height: 1; } 
.mission.purposes .mission-cont ul li dl dd { opacity: 1; margin: 0.67em 0 0; font-size: 1.88rem; font-weight: 300; font-variation-settings: 'wght' 300; line-height: 1.4; word-break: keep-all; } 
.mission.purposes .mission-cont ul li dl dd strong { display: block; font-weight: 600; font-variation-settings: 'wght' 600; } 
.mission.purposes .mission-cont ul li.purposes-cont01 dl dd strong { display: inline-block; } 
.mission.purposes .mission-cont ul li dl dd:lang(en) { font-size: 28px;}
@media screen and (max-width: 1480px){
    .mission.purposes .mission-cont ul li { padding-left: clamp(1.88em, 3.108vw, 2.9em); } 
    .mission.purposes .mission-cont ul li dl { padding: clamp(7.88em, 15.270vw, 14.13em) 0 0; } 
    .mission.purposes .mission-cont ul li dl dt { font-size: clamp(1.125rem, 1.892vw, 1.75rem); } 
    .mission.purposes .mission-cont ul li dl dd { font-size: clamp(1.25rem, 2.027vw, 1.88rem); } 
	.mission.purposes .mission-cont ul li dl dd:lang(en) { font-size: clamp(1.25rem, 1.892vw, 28px); } 
}
@media screen and (max-width: 1100px){
    .mission.purposes .mission-cont { margin-top: 3.75em; } 
    .mission.purposes .mission-cont ul li { width: 100%; } 
    .mission.purposes .mission-cont ul li dl { background-position: right top; } 
}
@media screen and (max-width: 768px){
    .educational-sec .sub-txt-wrap { display: flex; justify-content: center; align-items: center; min-height: 27.344vw; } 
    .educational-sec .sub-txt-wrap > p br { display: block; } 
    .educational-cont { max-width: 320px; } 
    .mission.purposes .mission-cont ul li dl dd { margin: 12px 0 0; } 
}
@media screen and (max-width: 480px){
    .educational-sec .sub-txt-wrap { display: block; min-height: auto; padding: 2.5em 20px; } 
    .educational-sec .sub-txt-wrap > p br { display: none; } 
}

/*========== Lecture ==========*/
.lecture-list { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; gap: clamp(30px,2.083vw, 2.50em); } 
.lecture-list > li { overflow: hidden; max-width: 433px; width: calc(100%/3 - 1.25em); aspect-ratio: 433 / 600; transition: transform 300ms; } 
.lecture-list li a { position: relative; } 
.lecture-list .list-vis-box { transition: transform 300ms linear; } 
.lecture-list > li.no-cont .list-txt-box { display: none; } 
.lecture-list .list-txt-box { display: flex; justify-content: space-between; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 3.75em 2.50em 2.50em; color: #fff; } 
.lecture-list .list-txt-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } 
.lecture-list .list-txt-top { position: relative; z-index: 1; } 
.lecture-list .list-txt-bottom { position: relative; z-index: 1; } 
.lecture-list-part { margin: 0 0 12px; } 
.lecture-list-part span { display: inline-block; font-size: 1rem; font-weight: 300; font-variation-settings: 'wght' 300; color: #ccc; word-break: keep-all; } 
.lecture-list-part span + span { position: relative; margin: 0 0 0 6px; padding: 0 0 0 6px; } 
.lecture-list-part span + span::before { content: ''; opacity: 0.5; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 1px; height: 10px; background-color: #ccc; } 
.lecture-list .list-txt-top h4 { font-size: 2rem; font-weight: 600; font-variation-settings: 'wght' 600; line-height: 1.3; word-break: keep-all; } 
.lecture-list .list-txt-top p { margin: 1.88em 0 0; font-size: 1rem; font-weight: 300; font-variation-settings: 'wght' 300; word-break: keep-all; } 
.lecture-list .list-txt-bottom { display: flex; justify-content: space-between; align-items: center; } 
.lecture-list .list-txt-bottom .pro-name { font-size: 1.5rem; font-weight: 300; font-variation-settings: 'wght' 300; } 
.lecture-list .list-txt-bottom .pro-name em { font-weight: 600; font-variation-settings: 'wght' 600; } 
.lecture-list .list-txt-bottom .list-view { font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; } 
.lecture-list .list-txt-bottom .list-view span { display: inline-block; padding: 0 0 0 2em; background-image: url("../images/common/icon-eyes-w.svg"); background-repeat: no-repeat; background-position: left center; background-size: 1.5em auto; font-size: inherit; } 
@media (hover: hover){
    .lecture-list > li:not(.no-cont):hover .list-vis-box { transform: scale(1.1); } 
}
@media screen and (max-width: 1100px){
    .lecture-list .list-txt-box { font-size: 1.455vw; } 
    .lecture-list > li { max-width: none; width: calc(100%/2 - 1.25em); } 
    .lecture-list-part span { font-size: clamp(14px,1.455vw,1rem); } 
    .lecture-list .list-txt-top h4 { font-size: clamp(20px,2.909vw,2rem); } 
    .lecture-list .list-txt-top p { font-size: clamp(14px,1.455vw,1rem); } 
    .lecture-list .list-txt-bottom .pro-name { font-size: clamp(16px,2.182vw,1.5rem); } 
    .lecture-list .list-txt-bottom .list-view { font-size: clamp(14px,1.455vw,1rem); } 
}
@media screen and (max-width: 768px){
    .lecture-list { gap: 20px; } 
    .lecture-list .list-txt-box { padding: 40px 30px; font-size: 1rem; } 
    .lecture-list > li { width: 100%; } 
    .lecture-list .list-txt-top p { margin: 20px 0 0; } 
    .lecture-list .list-txt-bottom .list-view span { padding: 0 0 0 18px; background-size: 16px auto; } 
}