@import url("var.css"); @import url("../css/var.css"); .hero { display: -ms-flex; display: flex; align-items: center; display: flex; height: calc(var(--hero-height) * 0.8); background-color: var(--color-primary); background-size: cover; background-repeat: no-repeat; position: relative; background-position: center 20%; padding: 0; margin: 0; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .hero { height: calc(var(--hero-height) * 0.6); background-position: center; }
 }
.hero .page-title, .hero .page-subtitle { color: var(--color-white); }
.hero .page-subtitle { font-family: var(--font-secondary); text-transform: uppercase; font-size: clamp(0.875rem, 0.625vw + 0.25rem, 1.125rem); }
.hero .page-title { font-size: clamp(1.875rem, 1.5625vw + 0.5208333333rem, 2.5rem); font-weight: 700; margin: 20px 0; }
.hero .page-brc { display: -ms-flex; display: flex; list-style: none; gap: 20px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .hero .page-brc { position: absolute; bottom: 30px; }
 }
.hero .page-brc li { position: relative; }
.hero .page-brc li::after { content: "\e13a"; font-family: "Phosphor-Bold" !important; color: var(--color-light-1); position: absolute; font-size: 12px; top: 3px; right: -18px; }
.hero .page-brc li:last-child::after { display: none; }
.hero .page-brc li a { color: var(--color-white); font-weight: 700; }
.hero .page-brc .active a { color: var(--color-white); }
.bg-item1 { background-image: url(/images/main/slider_1.jpg); }
.bg-item2 { background-image: url(/images/main/slider_2.jpg); }
.bg-item3 { background-image: url(/images/main/slider_1.jpg); }
.bg-item4 { background-image: url(/images/main/slider_1.jpg); }
.hero.tos { background-image: url(/images/main/slider_3.jpg); }
.lnb { display: -ms-flex; display: flex; position: relative; padding: 0; background: var(--color-primary); margin: 0; }
.lnb-bar { display: -ms-flex; display: flex; justify-content: center; list-style: none; }
.lnb-bar li { display: -ms-flex; display: flex; justify-content: center; align-items: center; }
.lnb-bar li:last-child a::after { display: none; }
.lnb-item { padding: 30px 20px; font-weight: 700; position: relative; color: var(--color-light-2); }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .lnb-item { padding: 20px 10px; }
 }
.lnb-item::after { content: ""; height: 20%; width: 1px; border: 0; border-right: 1px solid var(--color-light-3); right: 0; position: absolute; display: block; top: 50%; transform: translateY(-50%); }
.lnb-item:hover { color: var(--color-white); }
.lnb .active { color: var(--color-white); }
.content { background: var(--color-white); margin: 0; padding-bottom: 100px; border-bottom: 1px solid var(--color-light-1); }
.content-title { text-align: center; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-light-1); color: var(--color-primary); font-weight: 800; font-size: clamp(1.375rem, 2.5vw + 0.2916666667rem, 2.375rem); }
.content-tab { margin-top: 50px; display: -ms-flex; display: flex; justify-content: center; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content-tab { flex-direction: column; }
 }
.content-tab li { list-style: none; }
.content-tab-link { display: -ms-flex; display: flex; align-items: center; padding: 20px 20px; font-size: clamp(1rem, 0.5689900427vw + 0.2954006638rem, 1.25rem); font-weight: 700; background: var(--color-background); position: relative; border: 1px solid var(--color-background); }
@media screen and (min-width: 320px) and (max-width: 1023px) {
 .content-tab-link { padding: 10px 10px; }
 }
li.active .content-tab-link { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-background); }
li.active .content-tab-link::before { content: ""; width: 5px; height: 5px; border-radius: 5px; position: absolute; left: 8%; top: 25%; background: var(--color-secondary-dark); }
@media screen and (min-width: 320px) and (max-width: 480px) {
 li.active .content-tab-link::before { left: 0; }
 }
.content .tabs { margin-top: 20px; }
/* kelakuan siapa sih? .content .tabs .content-wrap { display: grid; grid-template-columns: 8fr 3fr; justify-content: space-between; gap: 20px; }
*/
.content .tabs .content-wrap { display: flex; gap: 20px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .content-wrap { display: -ms-flex; display: flex; flex-direction: column-reverse; }
 }
.content .tabs .content-wrap > span { display: -ms-flex; display: flex; flex-direction: column; flex-grow: 1; }
.content .tabs .picture { width: 100%; }
.content .tabs .signature { margin-top: 20px; width: auto; height: 100%; }
.content .tabs .content-wrap h3 { font-size: clamp(1rem, 0.625vw + 0.2916666667rem, 1.25rem); }
.content .tabs #tab1 .content-wrap > span:last-child { display: -ms-flex; display: flex; flex-basis: 30%; }
@media screen and (min-width: 680px) and (max-width: 1024px) {
 .content .tabs #tab1 .content-wrap span:last-child { flex-basis: 80%; }
.content .tabs #tab1 .content-wrap span:last-child img { width: auto; height: auto; }
 }
.content .tabs .tab-content .content-tab { display: -ms-flex; display: flex; flex-direction: column; gap: 20px; width: 100%; }
.content .tabs .tab-content .content-tab-title { display: -ms-flex; display: flex; justify-content: space-between; align-items: center; font-size: clamp(1.125rem, 1.5625vw + 0.2708333333rem, 1.75rem); position: relative; padding-left: 30px; }
.swiper-pagination {
    z-index: 10;
    display: flex;
    justify-content: center;
    bottom: 20px;
    width: 100%;
    padding: 30px;
}
.content .tabs .tab-content .swiper-pagination-bullet { background: var(--color-white); opacity: .8;}
.content .tabs .tab-content .swiper-pagination-bullet-active { background: var(--color-primary);}
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab-title { flex-direction: column; align-items: flex-start; gap: 10px; }
 }
.content .tabs .tab-content .content-tab-title::before { content: ""; width: 20px; height: 20px; border-radius: 100%; border: 5px solid var(--color-primary); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab-title::before { top: 25%; }
 }
.content .tabs .tab-content .content-tab-title span { display: -ms-flex; display: flex; justify-content: flex-end; align-items: flex-end; margin-left: auto; font-size: clamp(0.625rem, 0.9375vw + 0.1458333333rem, 1rem); color: var(--color-accent); }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab-title span { margin-left: unset; }
 }
.content .tabs .tab-content .content-tab-frame { display: -ms-flex; display: flex; }
.content .tabs .tab-content .content-tab-frame iframe { aspect-ratio: 16/9; height: auto; }
.content .tabs .tab-content .content-tab .sliders .slider .swiper-slide { position: relative; }
.content .tabs .tab-content .content-tab .sliders .slider .swiper-slide img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; aspect-ratio: 16/9; }
.content .tabs .tab-content .content-tab .sliders .slider .swiper-slide-text { display: -ms-flex; display: flex; justify-content: center; align-items: center; position: absolute; background-color: rgba(0, 0, 0, 0.5); height: 80px; z-index: 10; width: 100%; left: 50%; transform: translateX(-50%); top: 0; color: var(--color-white); font-size: clamp(0.875rem, 1.25vw + 0.2083333333rem, 1.375rem); font-weight: 700; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab .sliders .slider .swiper-slide-text { height: 35px; }
 }
.content .tabs .tab-content .content-tab .sliders .slider .swiper-button-next, .content .tabs .tab-content .content-tab .sliders .slider .swiper-button-prev { color: var(--color-primary); background-color: var(--color-white); width: 50px; height: 50px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab .sliders .slider .swiper-button-next, .content .tabs .tab-content .content-tab .sliders .slider .swiper-button-prev { width: 30px; height: 30px; }
 }
.content .tabs .tab-content .content-tab .sliders .slider .swiper-button-next::after, .content .tabs .tab-content .content-tab .sliders .slider .swiper-button-prev::after { font-size: clamp(0.875rem, 0.625vw + 0.25rem, 1.125rem); }
.content .tabs .tab-content .content-tab .sliders .slider .swiper-button-next { right: 0; }
.content .tabs .tab-content .content-tab .sliders .slider .swiper-button-prev { left: 0; }
.content .tabs .tab-content .content-tab .org { display: -ms-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; --height: 50px; --gap: 20px; --border: 2px solid var(--color-dark); }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab .org { --height: 30px; --gap: 5px; --border: 1px solid var(--color-dark); }
 }
.content .tabs .tab-content .content-tab .org-box { display: -ms-flex; display: flex; flex-direction: column; justify-content: center; width: 100%; position: relative; }
.content .tabs .tab-content .content-tab .org-box-title { display: -ms-flex; display: flex; justify-content: center; align-items: center; width: 250px; height: 250px; font-size: clamp(1.25rem, 1.5625vw + 0.3125rem, 1.875rem); color: var(--color-white); margin: 0 auto; border-radius: 50%; background: var(--color-secondary-dark); margin-bottom: var(--height); position: relative; font-weight: 700; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab .org-box-title { width: 125px; height: 125px; }
 }
@media screen and (min-width: 480px) and (max-width: 680px) {
 .content .tabs .tab-content .content-tab .org-box-title { width: 175px; height: 175px; }
 }
@media screen and (min-width: 680px) and (max-width: 768px) {
 .content .tabs .tab-content .content-tab .org-box-title { width: 200px; height: 200px; }
 }
@media screen and (min-width: 768px) and (max-width: 960px) {
 .content .tabs .tab-content .content-tab .org-box-title { width: 200px; height: 200px; }
 }
@media screen and (min-width: 960px) and (max-width: 1023px) {
 .content .tabs .tab-content .content-tab .org-box-title { width: 200px; height: 200px; }
 }
@media screen and (min-width: 1023px) and (max-width: 1024px) {
 .content .tabs .tab-content .content-tab .org-box-title { width: 250px; height: 250px; }
 }
.content .tabs .tab-content .content-tab .org-box-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--height); position: relative; }
.content .tabs .tab-content .content-tab .org-box-boxes-title { display: -ms-flex; display: flex; justify-content: center; align-items: center; font-size: clamp(0.6875rem, 1.09375vw + 0.15625rem, 1.125rem); height: var(--height); background: var(--color-primary-dark); color: var(--color-white); font-weight: 700; text-align: center; position: relative; z-index: 2; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab .org-box-boxes-title { font-weight: 500; }
 }
.content .tabs .tab-content .content-tab .org-box .line-ver-1 { width: 0; height: var(--height); position: absolute; border-right: var(--border); top: 100%; left: 50%; }
.content .tabs .tab-content .content-tab .org-box .line-ver-2 { width: 0; height: var(--height); position: absolute; border-right: var(--border); top: -100%; left: 50%; }
.content .tabs .tab-content .content-tab .org-box .line-ver-3 { width: 0; height: calc(var(--height) * 5); position: absolute; border-right: var(--border); top: calc(var(--height) * 5 * -1); left: 50%; }
.content .tabs .tab-content .content-tab .org-box .line-ver-4 { width: 0; height: calc(var(--height) * 3); position: absolute; border-right: var(--border); top: calc(var(--height) * 3 * -1); left: 50%; }
.content .tabs .tab-content .content-tab .org-box .line-ver-5 { width: 0; height: calc(var(--height) * 1.5); position: absolute; border-right: var(--border); top: calc(var(--height) * 1.5 * -1); left: 50%; }
.content .tabs .tab-content .content-tab .org-box .line-ver-6 { width: calc(50% + var(--gap)); height: calc(var(--height) * 7.5); position: absolute; border-left: var(--border); border-bottom: var(--border); top: calc(var(--height) * 7 * -1); left: calc((50% + var(--gap)) * -1); }
.content .tabs .tab-content .content-tab .org-box .line-ver-7 { width: calc(100% + var(--gap) * 8); height: calc(var(--height) * 1.5); position: absolute; border-left: var(--border); border-bottom: var(--border); top: 100%; left: 50%; }
.content .tabs .tab-content .content-tab .org-box .line-ver-8 { width: calc(100% + var(--gap) * 7.5); height: calc(var(--height) * 1.5); position: absolute; border-left: var(--border); border-top: var(--border); top: calc(var(--height) * 1.5 * -1); left: 50%; z-index: 0; }
.content .tabs .tab-content .content-tab .org-box .line-hor-1 { width: 67.7666666667%; height: var(--height); position: absolute; border: var(--border); top: -100%; left: 7.7160493827%; border-bottom: 0; }
.content .tabs .tab-content .content-tab .org-box .line-hor-2 { width: calc(100% + var(--gap) * 2); height: 0; position: absolute; top: 50%; left: calc((100% + var(--gap) * 2) * -1); border-top: var(--border); }
.content .tabs .tab-content .content-tab .org-box .line-hor-3 { width: calc(200% + var(--gap) * 2); height: calc(var(--height) * 1.5); position: absolute; top: calc(var(--height) * 1.5 * -1); border: var(--border); border-bottom: 0; }
.content .tabs .tab-content .content-tab .org-box .line-hor-4 { width: calc(300% + var(--gap) * 4); height: 0; position: absolute; top: calc(var(--height) * 1.5 * -1); border-top: var(--border); }
.content .tabs .tab-content .content-tab .org-box .line-hor-5 { width: calc(50% + var(--gap)); height: 0; position: absolute; top: 50%; left: calc((50% + var(--gap)) * -1); border-top: var(--border); }
.content .tabs .tab-content .content-tab .org-box .c1 { background: var(--color-primary); }
.content .tabs .tab-content .content-tab .org-box .c2 { background: var(--color-light-3); }
.content .tabs .tab-content .content-tab .org-box .c3 { background: var(--color-primary-light); }
.content .tabs .tab-content .content-tab .org-box .p6 { grid-column: 6; }
.content .tabs .tab-content .content-tab .org-box .p5 { grid-column: 5; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab .org-box .p5 { width: 150%; left: -25%; z-index: 1; }
 }
.content .tabs .tab-content .content-tab .org-box .p4 { grid-column: 4; }
.content .tabs .tab-content .content-tab .org-box .p3 { grid-column: 3; }
.content .tabs .tab-content .content-tab .org-box .p2 { grid-column: 2; }
.content .tabs .tab-content .content-tab .org-box .p1 { grid-column: 1; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab .org-box .p1 { width: 130%; left: -15%; z-index: 1; }
 }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tabs .tab-content .content-tab .org-box .w150 { width: 150%; left: -25%; z-index: 0; }
 }
.content .tl { display: -ms-flex; display: flex; gap: 20px; width: 100%; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tl { display: -ms-flex; display: flex; flex-direction: column; gap: 50px; }
 }
.content .tl-box { display: -ms-flex; display: flex; flex-direction: column; flex-grow: 1; flex-basis: 25%; border: 1px solid var(--color-light-1); }
.content .tl-year { font-family: var(--font-secondary); font-weight: 900; text-align: center; color: var(--color-secondary-dark); font-size: clamp(1.625rem, 2.1875vw + 0.3958333333rem, 2.5rem); margin: 20px 0; }
.content .tl-history { border-top: 1px solid var(--color-light-1); display: -ms-flex; display: flex; flex-direction: column; gap: 10px; padding: 10px 15px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .tl-history { padding: 25px; }
 }
.content .tl-history span:first-child { font-weight: 700; }
.content .tl-text { display: -ms-flex; display: flex; flex-direction: column; gap: 5px; }
.content .staff { display: -webkit-grid; /* Cross-browser support */
  display: -ms-grid; display: grid; -webkit-grid-template-columns: repeat(2, minmax(0, 1fr)); -ms-grid-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-grid-gap: 20px; -ms-grid-gap: 20px; grid-gap: 20px; margin-top: 50px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .staff { display: -webkit-grid; /* Cross-browser support */
    display: -ms-grid; display: grid; -webkit-grid-template-columns: repeat(1, minmax(0, 1fr)); -ms-grid-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); -webkit-grid-gap: 20px; -ms-grid-gap: 20px; grid-gap: 20px; }
 }
.content .staff-box { display: -ms-flex; display: flex; gap: 20px; border-bottom: 1px solid var(--color-light-1); padding-bottom: 20px; margin-bottom: 50px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .staff-box { margin-bottom: 20px; }
 }
.content .staff-photo { display: -ms-flex; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: 40%; gap: 10px; overflow: hidden; border-radius: 5px; }
.content .staff-photo img { border-radius: 5px; transition: all 0.4s; aspect-ratio: 5/6.5; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; }
.content .staff-photo img:hover { scale: 1.05; }
.content .staff-info { display: -ms-flex; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: 60%; gap: 30px; }
.content .staff-title { font-size: clamp(1rem, 0.625vw + 0.2916666667rem, 1.25rem); color: var(--color-dark); }
.content .staff-name { font-size: clamp(1.25rem, 3.4375vw + 0.1875rem, 2.625rem); color: var(--color-primary-dark); font-weight: 700; margin: 10px 0; }
.content .staff.list .staff-name{  }
.content .staff-dept, .content .staff-edu { display: -ms-flex; display: flex; flex-direction: column; }
.content .staff-dept{ gap: 10px; }
.content .staff-dept-title, .content .staff-edu-title { font-weight: 700; }
.content .staff-edu ul { -webkit-padding-start: 20px; padding-inline-start: 20px; display: -ms-flex; display: flex; flex-direction: column; gap: 15px; margin-top: 15px; margin-bottom: 0px; } 
/* .content .staff-edu ul { -webkit-padding-start: 20px; padding-inline-start: 20px; display: -ms-flex; display: flex; flex-direction: column; gap: 5px; margin-bottom: 5px; } */
.content .staff-edu ul li { display: -ms-flex; display: flex; flex-direction: column; gap: 5px; }
.content .staff-link { display: -ms-flex; display: flex; justify-content: flex-start; align-items: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 10px 20px; margin-top: auto; color: var(--color-white); background-color: var(--color-dark-3); transition: all 0.4s; }
.content .staff-link:hover { background-color: var(--color-light-1); color: var(--color-dark-3); }
.content .detail { display: -webkit-grid; /* Cross-browser support */
  display: -ms-grid; display: grid; -webkit-grid-template-columns: repeat(1, minmax(0, 1fr)); -ms-grid-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); -webkit-grid-gap: 20px; -ms-grid-gap: 20px; grid-gap: 20px; }
.content .detail .staff-photo { display: -ms-flex; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: 10%; gap: 10px; }
.content .address-title { font-size: clamp(1.125rem, 1.5625vw + 0.2708333333rem, 1.75rem); position: relative; padding-left: 30px; }
.content .address-title::before { content: ""; width: 20px; height: 20px; border-radius: 100%; border: 5px solid var(--color-primary); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .address-title::before { top: 25%; }
 }
.content .address-map { position: relative; }
.content .address-map .root_daum_roughmap { width: 100%; height: 100%; aspect-ratio: 16/7; margin-top: 50px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .address-map .root_daum_roughmap { aspect-ratio: 16/20; }
 }
.content .address-map .root_daum_roughmap .wrap_map { height: 100%; }
.content .address-map-view { display: -ms-flex; display: flex; justify-content: center; align-items: center; background-color: var(--color-primary-dark); color: var(--color-white); padding: 20px 20px; position: absolute; font-weight: 700; right: 0; top: 0; z-index: 2; transition: all 0.4s; }
.content .address-map-view:hover { background-color: var(--color-primary); }
.content .address-box { display: -ms-flex; display: flex; gap: 50px; margin-top: 50px; }
@media screen and (min-width: 480px) and (max-width: 1023px) {
 .content .address-box { gap: 10px; }
 }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .address-box { flex-direction: column; gap: 30px; }
 }
.content .address-box-text, .content .address-box-phone { display: -ms-flex; display: flex; align-items: center; flex-grow: 1; flex-basis: 50%; gap: 10px; border-bottom: 1px solid var(--color-light-3); height: 100px; font-size: clamp(1rem, 1.875vw + 0.2083333333rem, 1.75rem); }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .address-box-text, .content .address-box-phone { padding: 20px 0; }
 }
.content .address-box-text span, .content .address-box-phone span { display: -ms-flex; display: flex; align-items: center; height: 100%; }
.content .address-box-text span i, .content .address-box-phone span i { color: var(--color-secondary-dark); }
.content .media { display: -webkit-grid; /* Cross-browser support */
  display: -ms-grid; display: grid; -webkit-grid-template-columns: repeat(2, minmax(0, 1fr)); -ms-grid-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-grid-gap: 20px; -ms-grid-gap: 20px; grid-gap: 20px; margin-top: 50px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .media { display: -webkit-grid; /* Cross-browser support */
    display: -ms-grid; display: grid; -webkit-grid-template-columns: repeat(1, minmax(0, 1fr)); -ms-grid-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); -webkit-grid-gap: 20px; -ms-grid-gap: 20px; grid-gap: 20px; }
 }
.content .media-box { display: -ms-flex; display: flex; gap: 20px; padding-bottom: 20px; margin-bottom: 50px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content .media-box { margin-bottom: 20px; }
 }
.content .media-photo { display: -ms-flex; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: 40%; gap: 10px; overflow: hidden; border-radius: 5px; }
.content .media-photo img { border-radius: 5px; transition: all 0.4s; aspect-ratio: 5/6.5; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; }
.content .media-photo img:hover { scale: 1.05; }
.content .media-info { display: -ms-flex; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: 60%; gap: 10px; }
.content .media-name { font-size: clamp(1.25rem, 1.875vw + 0.2916666667rem, 2rem); color: var(--color-primary-dark); font-weight: 700; margin: 10px 0; }
.content .media-dept, .content .media-edu { display: -ms-flex; display: flex; flex-direction: column; }
.content .media-dept-title, .content .media-edu-title { font-weight: 700; }
.content .media-link { display: -ms-flex; display: flex; justify-content: flex-start; align-items: center; gap: 20px; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 10px 20px; margin-top: auto; color: var(--color-white); background-color: var(--color-dark-3); transition: all 0.4s; }
.content .media-link:hover { background-color: var(--color-light-1); color: var(--color-dark-3); }
.content-box-title { display: -ms-flex; display: flex; justify-content: space-between; align-items: center; font-size: clamp(1.125rem, 1.5625vw + 0.2708333333rem, 1.75rem); position: relative; padding-left: 30px; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content-box-title { flex-direction: column; align-items: flex-start; gap: 10px; }
 }
.content-box-title::before { content: ""; width: 20px; height: 20px; border-radius: 100%; border: 5px solid var(--color-primary); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .content-box-title::before { top: 25%; }
 }
.content-box .tos { margin-top: 50px; list-style: none; padding: 20px; border: 1px solid var(--color-primary-dark); }
.content-box .tos-title { font-size: clamp(1.125rem, 0.625vw + 0.3333333333rem, 1.375rem); color: var(--color-primary); }
.content-box .tos ul { display: -ms-flex; display: flex; flex-direction: column; gap: 10px; margin-block: 20px; list-style: none; padding-left: 20px; }
.content-box .tos ul li { line-height: 2; }
.content-box .tos .txt-center { display: -ms-flex; display: flex; justify-content: center; color: var(--color-accent); }
.board, .address { margin-top: 50px; }
.board h1, .address h1 { font-size: clamp(1.125rem, 0.625vw + 0.3333333333rem, 1.375rem); }
.i10 { z-index: 10 !important; }
/*  */
.content .hist-box { display: -ms-flex; display: flex; align-items: stretch; gap: 50px; margin-top: 50px; }
@media screen and (min-width: 320px) and (max-width: 768px) {
 .content .hist-box { flex-direction: column; }
 }
.content .hist-l, .content .hist-r { display: -ms-flex; display: flex; align-items: stretch; flex-shrink: 0; flex-basis: 50%; }
.content .hist-l { align-items: center; justify-content: center; }
.content .hist-title { display: -ms-flex; display: flex; width: 80%; max-width: 80%; height: auto; aspect-ratio: 1/1; border-radius: 100%; overflow: hidden; position: -webkit-sticky; position: sticky; top: 50px; }
.content .hist-title img { -o-object-fit: cover; object-fit: cover; }
.content .hist-tl { display: -ms-flex; display: flex; flex-direction: column; align-items: center; list-style: none; width: 100%; }
.content .hist-tl li { display: -ms-flex; display: flex; flex-basis: 100%; width: 100%; border-left: 2px solid var(--color-light-1); }
.content .hist-detail { display: -ms-flex; display: flex; flex-direction: column; padding: 20px; padding-top: 10px; width: 100%; }
.content .hist-detail .year { font-size: clamp(1.25rem, 8.125vw + -0.125rem, 4.5rem); font-weight: 700; color: var(--color-secondary-dark); }
.content .hist-detail .info { display: -ms-flex; display: flex; gap: 10px; font-size: clamp(1rem, 0.3125vw + 0.3125rem, 1.125rem); margin: 10px 0; line-height: 1.5; }
.content .hist-detail .info i { font-style: normal; font-weight: 700; display: flex; flex-shrink: 0; }

.staff-header {display: flex; align-items: center; gap: 10px;}
.content .staff-job {font-size: clamp(1.125rem, 2.1875vw + 0.2291666667rem, 2rem); color: var(--color-dark); font-weight: 900;}