/* common */
#idx-con .con-wid{width: 100%; max-width: 1330px;}

/* key-value */
.key-value{display: block; position: relative;}
.key-sub{width: 100%;}
.key-sub.icons{position: absolute; height: 100%;}
.key-sub.icons .key-sub-list{background-position: bottom right; height: 100%; background: none;}
.key-sub.icons .key-sub-list .bg{width: 100%; height: 100%; position: relative; z-index: 0; background-position: bottom right; background-size: cover; background-repeat: no-repeat;}
.key-sub.icons .open .bg{background-image: url('../images/layout/key-open_bg-2.png');}
.key-sub.icons .inno .bg{background-image: url('../images/layout/key-inno_bg-2.png');}
.key-sub.icons .collab .bg{background-image: url('../images/layout/key-collab_bg-2.png');}
.key-sub.icons .key-area{width: 100%; height: 100%; overflow: visible; position: absolute; z-index: 1;}
.key-sub.icons .key-area .top-part{width: 23.5%; height: 32%; background: url('../images/layout/key-obj.png') no-repeat center center / contain; position: absolute; left: 60%; bottom: 42.75%;}
.key-sub.icons .key-area .bot-part{width: 16%; height: 31%; background: url('../images/layout/key-box-2.png') no-repeat center center / contain; position: absolute; left: 63.7%; bottom: 14.75%;}
.key-sub.icons .key-area .key-obj{left: 71.75%; top: 50%; width: 9%; aspect-ratio: 1 / 1; background-size: contain !important;}
.key-sub.contents{position: relative; margin: 0; display: flex; justify-content: center; align-items: center; aspect-ratio: 2 / 1; pointer-events: none;}
.key-sub.contents .wrapper{max-width: none; margin: 0; width: 100%;}
.key-sub.contents .con-wid{box-sizing: border-box;}
.key-sub.contents .content-bot, .key-indicator{pointer-events: auto;}
.key-sub.contents p span{display: block;}
.key-indicator{display: inline-block;}

/* innovation */
.innovation{padding: 8em 0 10em;}
.inno-list{padding: 0;}
.inno-list li{background: #fff; border: 1px solid #000; border-radius: 1.25em; box-sizing: border-box; flex: 1; flex-shrink: 0; text-align: left; padding: 0;}
.inno-list li i{background-position: left center; width: 7.5em; height: 7.5em; margin-bottom: 1.5em;}
.inno-content{padding: 2em 2.5em 3.125em;}
.inno-content p {line-height: 1.35;}

/* more-contents */
.more-contents{display: block;}
.more-sub{width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.more-sub.conference{background-image:url('../images/layout/t_b-bg-2.png');}
.more-sub.center{background-image:url('../images/layout/r_c-bg-2.png');}
.more-sub .con-wid{display: flex; justify-content: space-between; align-items: center; padding-top: 1.75em; padding-bottom: 1.75em;}
.more-sub .contents{display: flex; flex-direction: column; justify-content: center;}
.more-sub h3.sub-tit{letter-spacing: 0px;}
.more-sub.conference .more-btn, .more-sub.center .search-area{margin: 2em 0 0;}
.more-sub.conference .contents > a{align-self: flex-start;}
.more-sub.center .search-area{max-width: none; width: 100%; display: flex;}
.more-sub.center .search-input{width: 20em;}
.search-area .search-btn{padding: 1.75em; margin-left: 1.5em;}
.more-sub i{background-position: center right; margin-bottom: 0;}

/* leaders */
.leaders-progress-bar{text-align: center; margin-top: 3.5em;}
.progress-track{height: 10px; background-color: #fff; border-radius: 5px; margin: 0 auto; position: relative;}
.progress-fill{position: absolute; top: 0; left: 0; height: 100%; background-color: #aaa; border-radius: 5px; transition: left 0.8s ease;}
.leaders-progress-bar .progress-track{width: 600px;}
.leaders-progress-bar .progress-fill{width: calc(100% / 14);}

/* project-info */
.project-info{padding: 7em 0;}
.project-info .con-wid{gap: 0; justify-content: space-between; align-items: flex-start; position: relative;}
.project-info .content-left{flex: initial; flex-shrink: 0; width: 580px; margin-right: 2em;}
.project-info .content-left .more-btn{margin-top: 2em;}
.project-info .project-list{flex: 0; min-width: 0;}
.project-info .project-item{background-color: #fff; box-sizing: border-box; padding: 25%; border-radius: 1.2em; min-width: 0; width: 100%; aspect-ratio: 1 / 1; position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.project-info .project-item img{max-height: 100%;}
.project-info .project-list.grid-mode{flex: 1; flex-grow: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em;}
.project-info .project-list.slide-mode{display: none;}
.project-progress-bar{display: none;}



/* mediaquery */
@media screen and (max-width:1575px){
    /* key-value */
    .key-sub.contents .con-wid{padding-left: 1.85em;}
}
@media screen and (max-width:1360px){
    /* key-value */
    .key-sub.contents .content-bot{margin-top: 3em;}
    .key-indicator{margin-top: 3em;}

    /* project-info */
    .project-info{padding-bottom: calc(7em + 6vw);}
    .project-info .project-list.grid-mode{grid-template-columns: repeat(4, 1fr);}
}
@media screen and (max-width:1280px) {
    /* key-value */
    .key-sub.icons .key-sub-list .bg{transform: scale(1.1) translate3d(4%, 0, 0);}
    .key-sub.icons .key-area .top-part{width: 33%; height: 32%; left: 52.7%; bottom: 30%;}
    .key-sub.icons .key-area .bot-part{width: 19%; height: 31%; left: 58.9%; bottom: 8%;}
    .key-sub.icons .key-area .key-obj{left: 68.2%; top: 59.75%; width: 11%;}
    .key-sub.contents{aspect-ratio: 1.35 / 1;}
}
@media screen and (max-width:1200px) {
    /* innovation */
	.inno-list{gap: 1.6em;}
    .inno-list li h3.sub-tit{font-size: 1.9em;}
    .inno-content{padding: 1.5em 2em 2.625em;}

    /* project-info */
    .project-info .content-left{width: 470px;}
}
@media screen and (max-width:1024px) {
    /* innovation */
	.inno-list li i{width: 5.5em; height: 5.5em;}
    .inno-list li h3.sub-tit{font-size: 1.7em;}

    /* leaders */
    .leaders-progress-bar .progress-track{width: 400px;}

    /* project-info */
    .project-info .con-wid{display: block;}
    .project-info .content-left{width: auto;}
    .project-info .project-list.grid-mode{display: none;}
    .project-info .project-list.slide-mode{display: block; margin-top: 5em;}
    .project-info .project-list.slide-mode .project-slide{display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em;}
    .project-progress-bar{display: block; margin-top: 3em;}
    .project-progress-bar .progress-track{width: 7em;}
    .project-progress-bar .progress-fill{width: 50%;}
}
@media screen and (max-width:860px) {
    /* innovation */
	.inno-list{gap: 1.3em;}
    .inno-content{padding: 1.25em 1.5em 2em 1.75em;}
}
@media screen and (max-width:768px) {
    /* key-value */
    .key-sub.icons .key-sub-list{padding: 0;}
    .key-sub.icons .key-sub-list .bg{transform: none;}
    .key-sub.icons .open .bg{background-image: url('../images/layout/key-open_bg-2_m.png');}
    .key-sub.icons .inno .bg{background-image: url('../images/layout/key-inno_bg-2_m.png');}
    .key-sub.icons .collab .bg{background-image: url('../images/layout/key-collab_bg-2_m.png');}
    .key-sub.icons .key-area .top-part{width: 33.5%; height: 20%; left: 65.25%; bottom: 31.5%;}
    .key-sub.icons .key-area .bot-part{width: 19%; height: 16%; left: 72.8%; bottom: 18.25%; background-image: url('../images/layout/key-box-2_m.png');}
    .key-sub.icons .key-area .key-obj{left: 82.5%; top: 63.75%; width: 11%;}
    .key-sub.contents{aspect-ratio: 1 / 1.17;}
    .key-sub.contents .con-wid{padding-left: 0; width: 83.33333% !important; margin: 0 auto;}
    .key-sub.contents .content-bot{margin-top: 2em;}
    .key-indicator{margin-top: 2em;}
    .key-indicator .prev-btn{margin-right: 1.5em;}

    /* innovation */
    .innovation{padding: 6em 0 8em;}
    .inno-list{margin-top: 3.5em;}
	.inno-list li{border-radius: 0.625em; max-width: none; width: 83.33333%; margin: 0 auto;}
    .inno-list li:not(:last-child){margin-bottom: 1.5em;}
    .inno-list li i{width: 4em; height: 4em; position: absolute; left: 1.5em; top: 1.25em;}
    .inno-list li h3.sub-tit{font-size: 1.8em; letter-spacing: 0px;}
    .inno-content{padding: 2.25em 1.5em 2.25em 7em;}
    .inno-content h3.sub-tit ~ p{margin-top: 0.5em;}

    /* more-contents */
    .more-sub{position: relative;}
    .more-sub .con-wid{display: block; padding: 3.5em 8.333335%;}
    .more-sub h3.sub-tit{font-size: 2.125em;}
    .more-sub .contents{position: relative; z-index: 1;}
    .more-sub .contents p span{display: block;}
    .more-sub.center .search-area{margin-bottom: 1.5em;}
    .more-sub.center .search-input{width: 14em;}
    .search-area .search-btn{padding: 1.5em; margin-left: 1em;}
    .more-sub i{position: absolute; right: 3.8%; bottom: 1.5em; z-index: 0; background-position: bottom right; width: 11em; height: 9em;}

    /* leaders */
    .progress-track{height: 6px;}
    .leaders-progress-bar{margin-top: 1.5em;}
    .leaders-progress-bar .progress-track{width: 300px;}

    /* projects */
    .project-info .project-list.slide-mode{margin-top: 1em;}
    .project-info .project-list.slide-mode .project-slide{gap: 1.5em;}
}
@media screen and (max-width:480px) {
    /* key-value */
    .key-sub.icons .key-area .top-part{left: 62.25%; bottom: 29.85%;}
    .key-sub.icons .key-area .bot-part{left: 69.8%; bottom: 17.85%;}
    .key-sub.icons .key-area .key-obj{left: 79.5%; top: 64.15%;}
    .key-sub.contents{aspect-ratio: 1 / 1.375;}
    .key-sub.contents p{max-width: 290px;}
    .key-sub.contents p span{display: inline;}
    .key-sub.contents .content-top p, .key-sub.contents .content-bot p{margin-top: 0.5em;}
    .key-sub.contents .content-top h2{font-size: 2.3em !important;}
    .key-sub.contents .content-bot h3{font-size: 1.85em !important;}

    /* innovation */
    .inno-list li i{width: 3.5em; height: 3.5em;}
    .inno-list li h3.sub-tit{font-size: 1.6em;}
    .inno-content{padding-left: 6em;}

    /* more-contents */
    .more-sub h3.sub-tit{font-size: 1.85em;}
    .more-sub .contents{margin-bottom: 3em;}
    .more-sub .contents p{font-size: 1em;}
    .more-sub.center .search-input{width: 11em;}
    .search-area .search-btn{padding: 1.25em;}
    .more-sub i{width: 9.5em; height: 7.5em;}

    /* leaders */
    .leaders-progress-bar .progress-track{width: 72%;}

    /* projects */
    .project-info .project-list.slide-mode .project-slide{gap: 1em;}
    .project-progress-bar{margin-top: 2em;}
    .project-progress-bar .progress-track{width: 6em;}
}
@media screen and (max-width:360px) {
    /* key-value */
    .key-sub.icons .key-sub-list .bg{transform: scale(1.2) translate3d(-4%, 0, 0);}
    .key-sub.icons .key-area .top-part{width: 42%; height: 17%; left: 51.25%; bottom: 23.55%;}
    .key-sub.icons .key-area .bot-part{width: 24%; height: 14%; left: 59.8%; bottom: 13.55%;}
    .key-sub.icons .key-area .key-obj{left: 72%; top: 71%; width: 13%;}
    .key-sub.contents{aspect-ratio: 1 / 1.85;}
    .key-sub.contents .content-top h2{font-size: 2em !important;}
    .key-sub.contents .content-bot h3{font-size: 1.625em !important;}

    /* innovation */
    .inno-list li i{width: 3em; height: 3em; left: 1em;}
    .inno-list li h3.sub-tit{word-break: break-all;}
    .inno-content{padding: 1.85em 1em 1.85em 4.5em;}

    /* more-contents */
    .more-sub.center .search-input{max-width: 11em; width: calc(100% - 2.25em);}

    /* projects */
    .project-info .project-list.slide-mode .project-slide{gap: 0.5em;}
}