@charset "utf-8";
.root_daum_roughmap .wrap_map, .root_daum_roughmap, .direction-map iframe {width: 100% !important; height: 100% !important;}
.chk-list li {position: relative; padding-left: calc(1.3333em + 8px); line-height: 1.3333em;}
.chk-list li:not(:last-child) {margin-bottom: 1.222em;}
.chk-list li:before {content: ''; position: absolute; top: 0; left: 0; width: 1.3333em; height: 1.3333em; background: url('/images/sub/list-chk.svg') no-repeat center center;;}
.chk-list li strong {font-weight: 600;}
section:not(:last-child) {margin-bottom: var(--space-120);}
.sec-tit {margin-bottom: var(--space-40); font-size: var(--font-size-40); font-weight: 700; color: var(--dark-color); line-height: 1.2em;}

.tech-welcome-boxes {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-40); margin-top: var(--space-80);}
.tech-welcome-box {position: relative; aspect-ratio: 680 / 498; background: #F9FAFB; border-radius: var(--radius-16); padding: var(--space-40); overflow-y: auto;}
.tech-welcome-box:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd; border-radius: var(--radius-16); pointer-events: none;}
.tech-welcome-box.only-img {padding: 0;}
.tech-welcome-box.only-img .bg img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.tech-welcome-box .desc, .tech-welcome-box .chk-list {overflow-y: auto; padding-right: var(--space-40); margin-right: calc(var(--space-40) * -1);}
.tech-welcome-box:first-child p:not(:last-child) {margin-bottom: 1.2em;}
.sec-tech-youtube .video-container {position: relative; padding-bottom: 56.25%; border-radius: var(--radius-16); overflow: hidden;}
.tech-product-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-60) var(--space-40); margin-bottom: var(--space-40);}
.tech-product-item {position: relative; display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-30);}
.tech-product-item:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd; border-radius: var(--radius-16); pointer-events: none;}
.tech-product-item .thumb {position: relative; width: 100%; padding-bottom: 55.264%; overflow: hidden; border-radius:8px;}
.tech-product-item .thumb:after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0,0,0,.08); border-radius:8px;}
.tech-product-item .thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.tech-product-item .txt {display: flex; flex-direction: column; gap: 7px; flex: 1; margin-bottom: var(--space-15);}
.tech-product-item .tit {font-size: var(--font-size-22); font-weight: 700; line-height: 1.4555em;}
.btn-download {display: flex; justify-content: center; align-items: center; gap: 8px; padding: var(--space-15); border-radius: 8px; background: #F5F5F5; color: #878787; font-size: var(--font-size-18); line-height: 1.4444em; transition: .2s;}
.btn-download:before {content: ''; display: block; width: 20px; height: 20px;  background: url('/images/sub/btn-download.svg') no-repeat center center; transition: .2s;}
.btn-download:hover, .tech-product-item:hover .btn-download {background: var(--primary-color); color: #fff;}
.btn-download:hover:before, .tech-product-item:hover .btn-download:before {filter: brightness(0) invert(1);}
.btn-list-more {display: flex; align-items: center; gap: 12px; width: fit-content; padding: var(--space-15) 25px; border: 0; border-radius: 8px; background: #505050; color: #fff; font-size: var(--font-size-18); line-height: 1.333em; font-family: inherit; cursor: pointer;}
.btn-list-more:after {content:''; display: block; width: 10px; height: 5px; background: url('/images/sub/btn-list-more.svg') no-repeat center center; transition: .2s;}
.btn-list-more[aria-expanded="true"]:after {transform: rotate(180deg);}

.about-welcome-img {border-radius: var(--radius-20); overflow: hidden; margin-bottom: calc((var(--space-80) + 4em) * -1);}
.about-welcome-txt {position: relative; max-width: 1160px; width: calc(100% - var(--container-space) * 2); margin: 0 auto; background: #fff; border-radius: var(--radius-20); padding: var(--space-80) var(--space-40) 0;}
.about-welcome-txt .desc:before {content: ''; display: block; width: 2px; height: 40px; background: var(--primary-color); margin: var(--space-40) auto;}
.affiliation-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40);}
.affiliation-card {display: flex; flex-direction:column; padding: clamp(25px, calc(60 / var(--inner) * 100vw), 60px); border-radius: var(--radius-16); box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.10);}
.affiliation-logo {margin-bottom: var(--space-30);}
.affiliation-head {padding-bottom: var(--space-30); margin-bottom: var(--space-30); border-bottom: 2px solid var(--primary-color);}
.affiliation-head small {display: block; height: 1em; color: #878787; font-size: var(--font-size-16); line-height: 1em; margin-top: 7px;}
.affiliation-body li:not(:last-child) {margin-bottom: 1.388em;}
.affiliation-body li {display: flex; line-height: 1.333em;}
.affiliation-body strong {display: flex; justify-content: space-between; align-items: center; height: fit-content; min-width:100px;font-weight: 600; color: var(--dark-color);}
.affiliation-body strong:after {content: ''; width: 1px; height: 10px; background: #ddd; margin:0 12px;}
.affiliation-body span {flex: 1; min-width: 0;}

.page-about .history-list {display: flex; flex-direction: column; gap: clamp(50px, calc(100 / var(--inner) * 100vw), 100px);}
.page-about .history-group {display: flex; align-items: flex-start; gap: var(--space-80);}
.page-about .history-group:nth-child(even) {flex-direction: row-reverse;}
.page-about .history-aside {display: flex; flex-direction: column; gap: var(--space-30); flex: 1; min-width: 0; max-width: 520px;}
.page-about .history-figure {margin: 0; border: 1px solid #ddd; border-radius: var(--radius-16); overflow: hidden; aspect-ratio: 520 / 330; max-width: 100%;}
.page-about .history-figure img {display: block; width: 100%; height: 100%; object-fit: cover;}
.page-about .history-figure--crop img {object-position: 45% 45%;}
.page-about .history-era {margin: 0; font-size: clamp(32px, calc(72 / var(--inner) * 100vw), 72px); font-weight: 700; line-height: 1em; letter-spacing: -0.05em; color: var(--primary-color);}
.page-about .history-era-desc {margin: 0; font-size: var(--font-size-22); line-height: 1.4545em; letter-spacing: -0.05em; color: #878787;}
.page-about .history-events {width: 57.15%; max-width: 800px; display: flex; flex-direction: column;}
.page-about .history-events__topbar {display: block; width: 100%; height: 2px; margin-bottom: var(--space-30); background: var(--primary-color);}
.page-about .history-event-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0;}
.page-about .history-event {display: flex; align-items: center; gap: var(--space-40); padding-left: var(--space-40); margin: 0;}
.page-about .history-event time {flex-shrink: 0; width: 70px; font-size: var(--font-size-28); font-weight: 700; line-height: 1em; letter-spacing: -0.03em; color: var(--primary-color);}
.page-about .history-event-txt {margin: 0; flex: 1; min-width: 0; font-size: var(--font-size-18); line-height: 1.5em; text-indent: -.8em; padding-left: 0.8em;}
.page-about .history-event-txt:before {content: '•'; margin-right: 6px; color: var(--primary-color); font-weight: 700;}
.page-about .history-event-list > li {margin: 0; padding: var(--space-30) 0; border-bottom: 1px solid #ddd;}
.page-about .history-event-list > li:first-child {padding-top: 0;}



.greeting-banner {background: url('/images/sub/greeting-banner.jpg') no-repeat center center; background-size: cover; padding: var(--space-150) 0;}
.greeting-banner .contain {display: flex; gap: var(--space-40); justify-content: center; align-items: center;}
.greeting-banner .contain:before, .greeting-banner .contain:after {content: ''; display: block; width: 82px; height: 62px; background: url('/images/sub/greeting-emphasize.svg') no-repeat center center; background-size: contain;}
.greeting-banner .contain:after {transform: rotate(180deg);}
.greeting-banner h4 {flex: 1; max-width: max-content; font-size: var(--font-size-26); line-height: 1.3846em; font-weight: 700; color: #fff;}
.greeting-txt {padding: var(--space-60) 0; background: #FAFAFA;}

.direction-map {height: clamp(270px, calc(500 / var(--inner) * 100vw), 500px); margin: var(--space-30) 0;}
.direction-addr {display: flex; align-items:center; gap: var(--space-20); font-size: var(--font-size-24); line-height: 1.25em; font-weight: 600; color: #484848;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:20px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:180px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:600;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:var(--primary-color);}
.directions .contact-info dd {display: flex; flex-wrap: wrap; flex:1 1 auto; min-width:0; width:1%; color:#454545;}
.directions .contact-info dd span:not(:last-child):after {content: '｜'; display: inline-block; margin: 0 5px;}

@media (max-width: 1024px) {
	.directions .contact-info dl {padding:20px 0;}
	.directions .contact-info dt {padding-left:20px; width:140px;}
}

@media (max-width: 640px) {
	.directions .address-info {margin-bottom:20px;}
	.directions .contact-info dl {padding:16px 0;}
	.directions .contact-info dt {padding-left:5px; width:110px;}
	.directions .contact-info dt svg {margin-right:10px;}
}

.download-welcome {border-radius: var(--radius-16); background: #F8F8F8; padding: var(--space-80) var(--space-30); margin-bottom: var(--space-80);}
.page-download .search-form {position: relative; margin-bottom: var(--space-60);}
.page-download .search-form .input {width: 100%; height: clamp(40px, calc(60 / var(--inner) * 100vw), 60px); padding: 5px var(--space-25); border-radius: 8px;}
.page-download .search-form button {position: absolute; top: 0; bottom: 0; right: 0; width: calc(20px + var(--space-25) * 2); background: url('/images/common/icon-search.svg') no-repeat center center; overflow: hidden; text-indent: -999em; border: 0;}

.category-menu {border-bottom: 1px solid #ddd; margin-bottom: var(--space-60);}
.category-menu .swiper {margin: 0 -6px;}
.category-menu ul {display: flex; width: max-content;}
.category-menu li {flex: 1 1 auto; width: auto; padding: 0 6px;}
.category-menu a {position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-20) var(--space-30); font-size: var(--font-size-18); line-height: 1.5em; color: #878787;}
.category-menu .active a {font-weight: 600; color: var(--primary-color);}
.category-menu .active a:after {content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--primary-color);}

.download-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40); margin-bottom: var(--space-40);}
.download-list-item {display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-50); border: 1px solid #ddd; border-radius: var(--radius-16); transition: .2s;}
.download-list-item:hover {border-color: var(--primary-color); box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.10);}
.download-list-item .txt .icon {width: fit-content; padding: var(--space-15); margin-bottom: var(--space-15); border-radius: 8px; background: #f5f5f5; transition: .2s;}
.download-list-item .txt .icon:before {content: ''; display: block; width: 26px; height: 26px; background: url('/images/sub/icon-document.svg') no-repeat center center; background-size: contain; transition: .2s;}
.download-list-item:hover .txt .icon {background: var(--primary-color);}
.download-list-item:hover .txt .icon:before {filter: brightness(0) invert(1);}
.download-list-item .tit {font-size: var(--font-size-22); font-weight: 700; line-height: 1.2em;}
.download-list-item .func {display: flex; align-items: center; justify-content: space-between; gap: 5px 20px; padding-top: var(--space-20); margin-top: var(--space-30); border-top: 1px solid #ddd; color: #878787;}
.download-list-item .func .icon {display: block; width: 20px; height: 20px; background: url('/images/sub/icon-download.svg') no-repeat center center; background-size: contain; transition: .2s;}