@charset "utf-8";

/* ----- Greetings ----- */
#greeting {position: relative; padding-bottom: 80px; word-break: keep-all;}
#greeting .inner .top-box {position: relative; margin-bottom: 80px; overflow: visible;}
#greeting .inner .top-box .img {overflow: hidden; border-radius: 20px;}
#greeting .inner .top-box .img > img {max-width: 100%; border-radius: 20px;}
#greeting .inner .top-box .tit {position: absolute; right: 10px; bottom: -35px; width: auto; padding: 40px 30px; border-radius: 20px 20px 20px 50px; background: linear-gradient(135deg, #1e3a8a 0%, #1a2760 100%); box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.18); color: #fff;}
#greeting .inner .top-box .tit span {line-height: 1.3; font-weight: normal; color: #fff;}
#greeting .inner .top-box .tit span small {display: block; margin-bottom: 10px; color: #c8d7ff; font-size: 18px;}
#greeting .inner .top-box .tit span big {display: block; font-size: 24px; white-space: nowrap;}
#greeting .inner .top-box .tit span big strong {display: inline; font-weight: bold; font-size: 28px; margin-left: 4px;}
#greeting .inner .bottom-box .text-area .flex-wr {display: flex; margin-top: 40px; align-items: flex-start;}
#greeting .inner .bottom-box .text-area p {font-size: 20px; line-height: 1.6; color: #333; font-weight: 500;}
#greeting .inner .bottom-box .text-area p + p {margin-top: 30px;}
#greeting .ceo-name {margin-top: 40px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 15px; color: #222; font-size: 22px; font-weight: 500;}
#greeting .ceo-name span {font-size: 24px; color: #101010; text-align: right;}
#greeting .ceo-name span b {color: #224188; font-weight: 500;}
#greeting .ceo-name strong {font-size: 36px; color: #000; font-weight: normal;}

@media (max-width: 1400px) {
  #greeting .inner .top-box .tit {right: 25px;}
}
@media (max-width: 1200px) {
  #greeting {padding-bottom: 60px;}
  #greeting .inner .top-box {margin-bottom: 60px;}
  #greeting .inner .top-box .tit {padding: 35px 25px;}
  #greeting .inner .bottom-box .text-area .txt {padding-left: 0;}
  #greeting .inner .bottom-box .text-area .flex-wr {display: block;}
}
@media (max-width: 768px) {
  #greeting {padding-bottom: 40px;}
  #greeting .inner .top-box {margin-bottom: 30px; padding: 0;}
  #greeting .inner .top-box .img {margin: 0; border-radius: 0;}
  #greeting .inner .top-box .img > img {border-radius: 0;}
  #greeting .inner .top-box .tit {position: relative; bottom: auto; left: 0; right: 0; width: 100%; padding: 18px 15px; text-align: center; border-radius: 0; box-shadow: none;}
  #greeting .inner .top-box .tit span small {font-size: 14px;}
  #greeting .inner .top-box .tit span big {font-size: 18px; white-space: nowrap;}
  #greeting .inner .top-box .tit span big strong {font-size: 20px; display: inline;}
  #greeting .inner .bottom-box .text-area p {font-size: 15px; line-height: 1.5;}
  #greeting .inner .bottom-box .text-area p + p {margin-top: 20px;}
  #greeting .ceo-name {margin-top: 20px; flex-direction: column; align-items: center; text-align: center; gap: 5px;}
  #greeting .ceo-name span {font-size: 18px;}
  #greeting .ceo-name strong {font-size: 24px;}
}


/* ----- Vision ----- */
.wrap-contents .block-level02 ul.block-container {display: grid; border: 1px solid #e1e1e1; border-radius: 10px; overflow: hidden; margin-bottom: 70px;}
.wrap-contents .block-level02 ul.block-container > li {display: flex; align-items: center; padding: 45px 40px; text-align: left; border-bottom: 1px solid #e1e1e1;}
.wrap-contents .block-level02 ul.list-dot {display: flex; flex-direction: column; gap: 4px; margin-top: 10px;}
.wrap-contents .block-level02 ul.list-dot > li {position: relative; padding-left: 18px;}
.wrap-contents .block-level02 ul.list-dot > li::before {content: ''; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background-color: #aaa; border-radius: 50%;}
.wrap-contents .block-level02 ul.block-container li .text-box {flex: 1;}
.wrap-contents .block-level02 ul li .icon-box {display: flex; align-items: center; justify-content: center; margin-right: 25px; width: 90px; height: 90px; background-color: #eaf1f9; border-radius: 15px;}
.wrap-contents .block-level02 ul li .icon-box img {width: 80%; height: auto;}
.wrap-contents .block-level02 ul li .text-box span {color: #143970; font-size: 19px; text-transform: uppercase;}
.wrap-contents .block-level02 ul li .text-box p {margin-top: 8px; font-size: 19px; word-break: keep-all;}

@media (max-width: 1200px) {
  .wrap-contents .block-level02 ul.block-container {margin-bottom: 40px;}
  .wrap-contents .block-level02 ul.block-container > li {padding: 30px 25px;}
}
@media (max-width: 1024px) {
  .wrap-contents .block-level02 ul.block-container {grid-template-columns: 1fr;}
  .wrap-contents .block-level02 ul.block-container > li .icon-box {margin-right: 20px;}
}
@media (max-width: 768px) {
  .wrap-contents .block-level02 ul.block-container > li {flex-direction: column; align-items: flex-start; padding: 22px 18px;}
  .wrap-contents .block-level02 ul.block-container > li .icon-box {width: 64px; height: 64px; margin: 0 0 12px 0; border-radius: 14px;}
  .wrap-contents .block-level02 ul.block-container > li .icon-box img {width: 70%;}
  .wrap-contents .block-level02 ul.block-container > li .text-box {width: 100%;}
  .wrap-contents .block-level02 ul.block-container > li .text-box span {font-size: 17px; line-height: 1.2;}
  .wrap-contents .block-level02 ul.block-container > li .text-box p {margin-top: 6px; font-size: 16px; line-height: 1.45;}
  .wrap-contents .block-level02 ul.block-container > li .text-box .list-dot {margin-top: 10px;}
  .wrap-contents .block-level02 ul.block-container > li .text-box .list-dot > li {padding-left: 16px;}
  .wrap-contents .block-level02 ul.block-container > li .text-box .list-dot > li::before {top: 7px;}
}


/* ----- History ----- */
.history {position: relative; padding-bottom: 0;}
.history .inner {display: flex; padding-bottom: 0;}

.history .his-tab-wrap {margin-right: 150px; position: sticky; height: 100vh; top: 130px; background: #ccc;}
.history .his-tab-wrap:before {content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: url(../images/sub/history-year.jpg) center no-repeat; background-size: cover; filter: brightness(0.7);}
.history .his-tab {display: flex; flex-direction: column; position: sticky; height: 480px; top: 230px; padding-top: 80px;}
.history .his-tab:after {content: ''; position: absolute; left: 0; top: 105px; height: 100vh; border-right: 1px solid #ffffff; z-index: 0;}
.history .his-tab li {text-align: center; position: relative; margin-bottom: 20px;}
.history .his-tab li:before {content: ''; position: absolute; top: 50%; left: -3px; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50px; background: #ffffff; z-index: 1;}
.history .his-tab li a {padding: 15px 35px 15px 25px; width: 205px; font-size: 23px; font-weight: 600; line-height: 1; text-align: left; color: #fff; border-radius: 50px; border-top-left-radius: 0; border-bottom-left-radius: 0; transition: 0.3s;}
.history .his-tab li a:hover {color: var(--maincolor); transition: 0.3s;}
.history .his-tab li.on:before {background: var(--maincolor); right: 0;}
.history .his-tab li.on a {background: #fff; font-weight: 700; color: var(--maincolor);}

.history .his-cont {width: 100%;}
.history .cont {display: flex; margin-bottom: 50px; padding-top: 50px;}
.history .cont .year {position: sticky; top: 10px; height: 70px; margin-right: 150px; font-size: 65px; font-weight: 900;}
.history .cont .sec {position: relative; margin-top: 10px;}
.history .cont .sec dl {position: relative; z-index: 0; padding-left: 50px; padding-bottom: 50px; opacity: 0.2; transition: 0.5s;}
.history .cont .sec dl:after {content: ''; position: absolute; top: 20px; left: 0; height: 100%; border-left: 1px solid #ffe8da; z-index: -1;}
.history .cont .sec dl dt {position: relative; margin-bottom: 20px; font-size: 35px; font-weight: 800; line-height: 1;}
.history .cont .sec dl dt:before {content: ''; position: absolute; top: 13px; left: -55px; width: 10px; height: 10px; border-radius: 50px; background: #ff8a40;}
.history .cont .sec dl dd {margin-left: 3px; margin-bottom: 5px; font-size: 22px; word-break: keep-all; line-height: 1.45;}
.history .cont .sec dl dd img {margin-top: 10px; max-width: 100%; border-radius: 15px;}
.history .cont .sec dl dd ul.list-basic.list-dot {margin-top: 8px; margin-left: 0; padding-left: 0; list-style: none;}
.history .cont .sec dl dd ul.list-basic.list-dot > li {position: relative; margin: 0 0 6px; padding-left: 14px; font-size: 18px; color: #8b8b8b; line-height: 1.35;}
.history .cont .sec dl dd ul.list-basic.list-dot > li::before {content: ""; position: absolute; left: 0; top: 0.62em; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #8f8f8f;}
.history .cont .sec dl.on {opacity: 1; transition: 0.5s;}
.history .cont .sec dl.on:before {opacity: 0; transition: 0.3s;}

@media (max-width: 1500px) {
  .history .cont .year {margin-right: 90px; font-size: 55px; font-weight: 900;}
}
@media (max-width: 1300px) {
  .history .his-tab-wrap {display: none;}
  .history .his-cont {width: 100%;}
}
@media (max-width: 1024px) {
  .history .his-tab {margin-bottom: 50px !important;}
  .history .cont {padding-top: 0;}
  .history .cont .year {top: 0; margin-right: 50px; font-weight: 800;}
}
@media (max-width: 768px) {
  .history .cont .year {margin-right: 40px; font-size: 40px;}
  .history .cont .sec {margin-top: 15px;}
  .history .cont .sec dl {padding-left: 30px; padding-bottom: 45px;}
  .history .cont .sec dl dt {margin-bottom: 13px; font-size: 25px;}
  .history .cont .sec dl dt:before {left: -35px; top: 8px;}
  .history .cont .sec dl dd {font-size: 19px; line-height: 1.35;}
  .history .cont .sec dl dd ul.list-basic.list-dot > li {padding-left: 12px; font-size: 16px;}
  .history .cont .sec dl dd ul.list-basic.list-dot > li::before {width: 4px; height: 4px;}
}
@media (max-width: 550px) {
  .history .cont {flex-direction: column;}
  .history .cont .year {margin-right: 0;}
  .history .cont .sec {margin-left: 25px;}
}


/* ----- Network ----- */
.siteCards {margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;}
.siteCards__item {border-radius: 16px; overflow: hidden; border: 1px solid rgba(11,31,85,0.18); background: #fff;}
.siteCards__link {display: block; color: inherit; text-decoration: none;}
.siteCards__thumb {display: block; background: #f1f5ff; aspect-ratio: 16/10; overflow: hidden;}
.siteCards__thumb img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease;}
.siteCards__body {display: flex; flex-direction: column; text-align: center; padding: 14px 14px 16px; min-height: 150px;}
.siteCards__title {min-height: 38px; margin: 0 0 6px; font-size: 18px; line-height: 1.25; font-weight: 900; color: #0b1f55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.siteCards__url {margin-top: auto; margin-bottom: 10px; display: block; font-size: 16px; line-height: 1.3; color: rgba(15,23,42,0.62); word-break: break-all;}
.siteCards__btn {display: block; text-align: center;}
.siteCards__btn .b-basic {display: inline-block;}
.siteCards__item:hover .siteCards__thumb img {transform: scale(1.04);}

@media (max-width: 1200px) {
  .siteCards {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 768px) {
  .siteCards {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
  .siteCards__body {min-height: 140px;}
}
@media (max-width: 550px) {
  .siteCards {grid-template-columns: 1fr;}
  .siteCards__body {min-height: 0;}
}


/* ----- Directions ----- */
#_map {margin-top: 50px;}
.mapWrap .txts {height: auto; min-height: 120px; padding: 30px; background-color: rgba(0,0,0,0.7); box-sizing: border-box;}
.mapInfoTitle {margin: 0 0 10px; font-size: 22px; line-height: 1.3; font-weight: 800; color: #fff;}
.mapInfoDl {margin: 0;}
.mapInfoDl dt {margin-top: 12px; font-size: 15px; font-weight: 700; color: #07a5e1; letter-spacing: 0.02em;}
.mapInfoDl dd {margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.92);}
.mapInfoList {margin: 0; padding: 0; list-style: none;}
.mapInfoList li {margin: 4px 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.92);}
.mapInfoList li strong {display: inline-block; margin-right: 10px; font-weight: 700; color: #07a5e1;}

@media (max-width: 768px) {
  .mapWrap .txts {padding: 20px;}
}
@media (max-width: 500px) {
  .mapInfoList li {display: flex; flex-direction: column;}
}


/* ----- Research Projects - Reserch Themes ----- */
.plu4 {--primary: rgb(20, 57, 112); --header: #2059b0; --themeBlue: #2f6fd1; --ink:#0f172a; --line:#d7deea; --soft:#f6f8fc; --bullet:#2059b0; background:#fff; color:var(--ink);}
.plu4, .plu4 * {box-sizing:border-box;}
.plu4__inner { margin: 0 auto; display:flex; flex-direction:column; gap:14px; margin: 20px 0;}
.plu4__scroll {position: relative; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; max-width: 100%;}
.plu4__table {width: 100%; min-width: 980px; display:flex; flex-direction:column; gap:14px;}
.plu4__head, .plu4__row {display:grid; grid-template-columns: 1fr 1fr 1.2fr 1fr; gap:18px; align-items:stretch;}
.plu4__hcell {border-radius: 14px; padding: 16px 14px; text-align:center; font-weight: 900min-width:0; word-break: keep-all; display:flex; align-items:center; justify-content:center; color:#fff; border: 1px solid rgba(255,255,255,.25);}
.plu4__hcell:first-child {background: var(--primary);}
.plu4__hcell:not(:first-child) {background: var(--header);}

.plu4__cell {background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display:flex; align-items:center; justify-content:center; min-height: 86px; min-width:0;}
.plu4__cell--theme {background: var(--themeBlue); color:#fff; text-align:center; font-weight: 900;}
.plu4__cell--blank {background:#fff; border:0; box-shadow:none;}
.plu4__cell--mid {font-weight: 850; color:#1f2a44;}
.plu4__cell--list {justify-content:flex-start; text-align:left;}
.plu4__cell--stack {flex-direction: column; align-items: stretch; justify-content: flex-start; text-align:left;}
.plu4__list {margin: 0; padding: 0; list-style: none;font-weight: 650; color: var(--ink); width: 100%;}
.plu4__list li {position: relative; padding-left: 16px; margin: 4px 0;}
.plu4__list li::before {content:""; position:absolute; left: 4px; top: 0.62em; width: 6px; height: 6px; border-radius: 999px; background: var(--bullet); transform: translateY(-50%);}
.plu4__arrow {width: 100%; text-align: center; font-weight: 900; line-height: 1; margin: 2px 0 8px; color: var(--bullet);}
.plu4__hint {display:none;}

@media (max-width: 1024px) {
  .plu4__hint {display:inline-flex; align-items:center; gap:8px; position: sticky; left: 0; top: 0; z-index: 3; margin: 0 0 10px; padding: 8px 12px 6px; border-radius: 999px; border: 1px solid rgba(32, 89, 176, 0.28); background: #ffffff; color: #1f2a44; font-weight: 800; line-height: 1; white-space: nowrap;}
  .plu4__hint-ico {color: var(--bullet); font-weight: 900; padding-top: 3px;}
  .plu4__hint-txt {font-size: 13px; letter-spacing: -0.2px;}
}
@media (max-width: 640px) {
  .plu4__table {min-width: 920px; gap:14px;}
  .plu4__head, .plu4__row {gap:14px;}
}


/* ----- Research Projects - Agenda Overview ----- */
.list_navy {margin: 0; padding-left: 0; list-style: none;}
.list_navy > li {position: relative; padding-left: 16px; margin: 6px 0; line-height: 1.55; font-weight: 500; color: rgba(15, 23, 42, 0.82);}
.list_navy > li::before {content: ""; position: absolute; left: 0; top: 0.68em; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #0b1f55;}

.agenda {padding: 72px 0; text-align: center;}
.agenda__inner {max-width: 980px; margin: 0 auto; padding: 0 20px;}
.agenda__title {margin: 0; font-size: 25px; line-height: 1.25; font-weight: 900; color: #0f172a; letter-spacing: -0.02em; text-wrap: balance;}
.agenda__title_hl {background: linear-gradient(90deg, #1e3a8a, #2563eb, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.8;}
.agenda__chevrons {display: flex; flex-direction: column; align-items: center; margin: 22px auto 18px;}
.agenda__chevron + .agenda__chevron {margin-top: -36px;}
.agenda__chevron {width: 118px; height: 86px; display: block; opacity: 0; animation: agenda__chevron_pulse 1.8s ease-in-out infinite;}
.agenda__chevron polygon {fill: currentColor;}
.agenda__chevron--light {color: #a9c8ff; animation-delay: 0.00s;}
.agenda__chevron--mid {color: #3a5fb3; animation-delay: 0.60s;}
.agenda__chevron--dark {color: #0b1f55; animation-delay: 1.20s;}
.agenda .boxGray {margin-top: 20px !important;}

@keyframes agenda__chevron_pulse {
  0% {opacity: 0;}
  12% {opacity: 1;}
  35% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}

.agenda__desc {margin: 0; font-size: 22px; line-height: 1.6; font-weight: 650; color: rgba(15,23,42,0.80); letter-spacing: -0.01em;}
.agenda__desc_label {font-weight: 900; color: #0f172a;}

@media (max-width: 768px) {
  .agenda {padding: 30px 0;}
  .agenda__title {font-size: 22px;}
  .agenda__desc {font-size: 17px;}
  .agenda__chevron {width: 92px; height: 66px;}
  .agenda__chevron + .agenda__chevron {margin-top: -20px;}
}
@media (prefers-reduced-motion: reduce) {
  .agenda__chevron {animation: none; opacity: 1;}
}