@charset "utf-8";

/* *******************************************************
 * filename : 스타일.css
 * description : 스타일 CSS
 * date : 2026-07
******************************************************** */

body.fixed {overflow: hidden;}
body {overflow: auto;}
/* #wrap {padding-top: 100px;} */
.scroll-txt {position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
display: flex; flex-direction: column-reverse; align-items: center; gap: 15px;}
.scroll-txt p {text-transform: uppercase; font-size: 12px; font-family: 'Pretendard'; color: #fff; writing-mode: vertical-rl; transform: rotate(180deg);}
.scroll-txt::before {content: ''; display: block; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #fff; background: url('../images/ico-arrow-down-white.png') no-repeat center;}
a.more-btn {color: #fff; font-size: 15px; gap: 25px; border: 1px solid #fff; display: inline-flex; align-items: center; justify-content: center; min-width: 115px; height: 36px; border-radius: 50px; transition: all 0.2s; line-height: 1; padding-top: 0.1rem;}
a.more-btn::after {content: ''; display: block; width: 22px; height: 6px; background: url('../images/ico-arrow-right-white.png') no-repeat center; margin-top: -3px;}
.split-title-wrap p {display: inline-block;}

@media (max-width: 768px) {    
    .scroll-txt p {font-size: 10px;}
    .scroll-txt::before {width: 30px; height: 30px; background-size: 10px;}
    a.more-btn {margin-top: 20px; font-size: 12px; min-width: auto; width: 100px; height: 30px; gap: 6px; padding-top: 3px;}
    a.more-btn::after {width: 15px; background-size: 100%;}
    .split-title-wrap p {display: block;}
}
/* header */
#header {position: fixed; top: 0; left: 0; right: 0; height: 130px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; z-index: 100; opacity: 0; animation: headerFadeIn 1.2s ease forwards; animation-delay: 0.3s; transition: all 0.5s;}
#header.hidden {top: -130px;}
#header h1 a {display: block; width: 151px; height: 104px; text-indent: -99999999999%; background-repeat: no-repeat; background-position: center; background-size: 100%;}
#header h1 a {background-image: url('../images/logo-gray.png');}
#header.white h1 a {background-image: url('../images/logo-white.png');}
#header.gray h1 a {background-image: url('../images/logo-gray.png');}
#header .nav {height: 100%;}
#header .nav ul {display: flex; align-items: center; height: 100%;}
#header .nav ul li {height: 100%;}
#header .nav a {font-size: 17px; font-weight: 600; height: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; text-transform: uppercase;}
#header .nav a:hover,
#header .nav .active a {color: #2256a0;}
#header .item {display: flex; align-items: center; gap: 28px;}
#header .item a {display: block; width: 30px; height: 30px; text-indent: -99999999999999%; background-repeat: no-repeat; background-position: center; transition: all 0.2s; background-size: 100%;}
#header .item .search {background-image: url('../images/search-gray.png');}
#header .item .sitemap {position: relative; background-image: none; color: #666;}
#header .item .sitemap::before {content: ''; position: absolute; top: 50%; left: 50%; width: 27px; height: 2px; background: currentColor; box-shadow: 0 -8px currentColor, 0 8px currentColor; transform: translate(-50%, -50%);}
#header.white .nav a {color: #fff;}
#header.white .nav a:hover,
#header.white .nav .active a {color: #2256a0;}
#header.white .item .search {background-image: url('../images/search-white.png');}
#header.white .item .sitemap {background-image: none; color: #fff;}
#header .item.white .search {background-image: url('../images/search-white.png');}
#header .item.white .sitemap {background-image: none; color: #fff;}
#header.main {padding: 0 120px;}
.sitemap-wrap {position: fixed; top: 0; right: -100%; bottom: 0; background: #fff; transition: all 0.3s; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; z-index: 100;}
.sitemap-wrap.active {right: 0;}
.sitemap-wrap .close {position: absolute; top: 30px; right: 30px; width: 32px; height: 32px; font-size: 0; text-indent: -9999%;}
.sitemap-wrap .close::before,
.sitemap-wrap .close::after {content: ''; display: block; width: 3px; height: 35px; background: #000; position: absolute; left: 14px;}
.sitemap-wrap .close::before {transform: rotate(45deg);}
.sitemap-wrap .close::after {transform: rotate(-45deg);}
.sitemap-wrap .depth01 > li > a {display: block; font-size: 26px; font-weight: 700; color: #333 ;text-align: center; padding: 20px 0; text-transform: uppercase;}
.sitemap-wrap .depth01 > li > a:hover,
.sitemap-wrap .depth01 > li.active > a {color: #0097db;}
.sitemap-wrap .depth02 {display: none; padding-bottom: 2rem;}
.sitemap-wrap .depth02.active {display: block;}
.sitemap-wrap .depth02 a {display: block; text-align: center; padding: 3px 0; font-size: 1.8rem;}
@media (max-width: 1440px) {
    #header .nav {display: none;}
}
@media (max-width: 768px) {
    #header {height: 70px; padding: 0 15px;}
    #header.main {padding: 0 15px;}
    #header h1 a {width: 70px;}
    #header .item {display: flex; flex: 0 0 auto; gap: 15px;}
    #header .item a {width: 30px; height: 30px;}
    #header .item .sitemap {
        display: block;
        flex: 0 0 30px;
    }
    #header.hidden {top: 0px;}
}
/* footer */
#footer {background: #161e27;padding: 30px 0px; position: relative;}
#footer .inner {width: 1200px; margin: 0 auto; max-width: 98%; display: block;}
#footer .row {display: flex; width: 100%; align-items: center; justify-content: space-between;}
#footer img {display: block; width: 150px;}
#footer .link {display: flex; margin-left: auto; margin-right: 30px;}
#footer .link a {color: #8f8f8f; font-family: 'Pretendard'; font-size: 15px; padding: 0 20px; transition: all 0.2s; display: block;}
#footer .link a:hover {color: #fff; font-weight: 600;}
#footer .info {margin-top: 30px;}
#footer .info li {color: #c5c5c5; font-family: 'Pretendard'; display: flex; font-size: 14px; font-weight: 400; margin-top: 5px;}
#footer .info li,
#footer .info p,
#footer .info a,
#footer .info a[href^="tel"],
#footer .info a[x-apple-data-detectors] {color: #c5c5c5 !important; -webkit-text-fill-color: #c5c5c5 !important; text-decoration: none !important;}
#footer .family-site {display: flex; gap: 3px;}
#footer .family-site select {font-family: 'IBMPlexSans'; font-size: 16px; color: #fff; background: #008ace; min-width: 200px; height: 50px; border: 0; padding: 10px; background: #008ace url("../images/footer-arrow.png") no-repeat right center;}
#footer .family-site select option {font-family: 'IBMPlexSans'; font-size: 16px;}
#footer .family-site a {display: flex; width: 50px; height: 50px; align-items: center; justify-content: center; font-size: 16px; color: #fff; font-family: 'IBMPlexSans'; background: #b2b2b2;}
#footer.fp-auto-height {height: auto !important;}
@media (max-width: 1200px) {
    #footer .inner {display: block;}
}
@media (max-width: 940px) {
    #footer {padding: 20px;}
    #footer img {width: 100px;}
    #footer .row {flex-direction: column; align-items: flex-start;}
    #footer .link {margin: 0; margin-top: 5px;}
    #footer .link a {padding: 0 20px 0 0; font-size: 13px;}
    #footer .info {margin-top: 10px;}
    #footer .info li {font-size: 13px;}
    #footer .family-site {margin-top: 10px;}
    #footer .family-site select {height: 30px; font-size: 13px; padding: 5px;}
    #footer .family-site a {height: 30px; width: 30px; font-size: 13px;}
}

/* main */
.main-visual {width: 100%; height: 100vh; overflow: hidden; position: relative;}
.main-visual .bg-item {position:absolute; left:10px; top:0; bottom:-26px; width:300px; z-index:1; pointer-events:none; overflow:visible;}
.main-visual .bg-item i {position:absolute; top:0; border-left:18px solid #fff; border-bottom:18px solid #fff; }
.main-visual .bg-item i:nth-child(1) {left:0; width:400px; bottom:-60px;border-bottom-left-radius:300px;}
.main-visual .bg-item i:nth-child(2) {left:32px; width:283px; bottom: -40px; border-bottom-left-radius: 318px;}
.main-visual .bg-item i:nth-child(3) {left:64px; width:267px; bottom: -19px; border-bottom-left-radius: 318px;}
.main-visual .bg-slider {width: 100%; height: 100%; position: absolute;}
.main-visual .bg-slider .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
.main-visual .bg-slider .bg-1 {background-image: url('../images/main-visual01.jpg');}
.main-visual .bg-slider .bg-2 {background-image: url('../images/main-visual01.jpg');}
.main-visual .bg-slider .bg-3 {background-image: url('../images/main-visual01.jpg');}
.main-visual .bg-slider .bg-4 {background-image: url('../images/main-visual01.jpg');}
.main-visual .bg-slider .bg-5 {background-image: url('../images/main-visual01.jpg');}
.main-visual .bg-slider .bg-6 {background-image: url('../images/main-visual01.jpg');}
.main-visual .year-swiper {width: 100%; overflow: visible; height: 100vh; position: relative; top: 0;}
.main-visual .year-swiper .swiper-slide {text-align: center; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.main-visual .year-swiper h2 {font-size: 230px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.8); transition: .8s;}
.main-visual .year-swiper .swiper-slide-active h2 {color:#fff; -webkit-text-stroke:0;}
.main-visual .year-swiper p {opacity:0; transform:translateY(30px); transition:.5s; font-size: 25px; color: #fff; margin-top: 20px;}
.main-visual .year-swiper .swiper-slide-active p{ opacity:1; transform:none;}
.main-visual .bg-slider .bg{opacity:0; transition:1.2s;}
.main-visual .bg-slider .bg.active{opacity:1;}
.main-visual .swiper-pagination {position: absolute; bottom: 90px; z-index: 10; display: flex; gap: 8px; width: auto; justify-content: center; left: 50%; transform: translateX(-50%);}
.main-visual .swiper-pagination .swiper-pagination-bullet {width: 12px; height: 12px; border-radius: 50%; opacity: 1; transition: background 0.3s, width 0.3s; border: 1px solid #fff; background: transparent;}
.main-visual .swiper-pagination .swiper-pagination-bullet-active {background: #fff;}
.main-visual .qa-section {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.main-visual .qa-section .card {position: absolute; z-index: 10; width: 345px; opacity: 0; visibility: hidden;}
.main-visual .qa-section .card .card-inner div {border-radius: 20px; padding: 25px; position: absolute; transition: all 0.2s; cursor: pointer;}
.main-visual .qa-section .card p {font-family: 'Pretendard'; font-size: 17px; padding-left: 28px; position: relative; font-weight: 400;}
.main-visual .qa-section .card p::before {font-size: 24px; font-weight: 700; position: absolute; left: 0; top: -5px;}
.main-visual .qa-section .card p span {font-family: 'Pretendard';}
.main-visual .qa-section .card .link {text-decoration: underline;}
.main-visual .qa-section .card .q {background: rgba(0, 0, 0, 0.5);}
.main-visual .qa-section .card .a {background: rgba(255, 255, 255, 0.5); opacity: 0; visibility: hidden; transform:rotateY(180deg);}
.main-visual .qa-section .card .q p {color: #fff;}
.main-visual .qa-section .card .q p::before {content: 'Q.'}
.main-visual .qa-section .card .a p::before {content: 'A.'}
.main-visual .qa-section .card .q:hover .a {opacity: 1; visibility: visible;}
.main-visual .qa-section .card .a.active {opacity: 1; visibility: visible; transform:rotateY(0deg);}
.main-visual .qa-section .card .q.close {opacity: 0; visibility: hidden; transform:rotateY(180deg);}
/* fp-nav */
#fp-nav ul li:last-child {display: none;}
#fp-nav ul li a span {display: none;}
#fp-nav ul li .fp-tooltip {color: #fff; opacity: 0; width: auto; font-size: 15px; font-weight: 600; font-family: 'Pretendard';}
#fp-nav ul li a.active + .fp-tooltip {opacity: 1;}
#fp-nav ul li a::after {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.39); position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#fp-nav ul li a.active::after {width: 7px; height: 7px; background: #fff; right: -1px;}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span {background: #000;}
body.fp-viewing-infographics #fp-nav ul li .fp-tooltip {color: #000;}
body.fp-viewing-infographics #fp-nav ul li a::after {background: rgba(0, 0, 0, 0.39);}
body.fp-viewing-infographics #fp-nav ul li a.active::after {background: #000;}
body.fp-viewing-archive #fp-nav ul li .fp-tooltip {color: #000;}
body.fp-viewing-archive #fp-nav ul li a::after {background: rgba(0, 0, 0, 0.39);}
body.fp-viewing-archive #fp-nav ul li a.active::after {background: #000;}
.main-section02 .fp-tableCell {display: flex; justify-content: flex-end; align-items: flex-start;}
.main-section02 .bg-item {position: absolute;}
.main-section02 .bg-item1 {width: 237px; height: 86px; background: url('../images/main-section2-item1.png') no-repeat center / 100%; top: 0; left: 128px;}
.main-section02 .bg-item2 {width: 661px; height: 349px; background: url('../images/main-section2-item2.png') no-repeat center / 100%; bottom: 0; right: 133px;}
.main-section02 .bg-item3 {width: 100%; height: 66px; background: #0097db; bottom: 204px;}
.main-section02 .accordion-area {display: flex; justify-content: flex-end; align-items: flex-start; position: relative; z-index: 1; height: 93vh; max-width: 99%; }
.main-section02 .box {flex: 0 0 6vw; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: hidden; transition: flex-basis 0.6s ease; position: relative; background: #000; cursor: pointer;}
.main-section02 .box::before {content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: opacity 0.2s; filter: grayscale(1); opacity: 0.7;}
.main-section02 .box-1::before {background: url('../images/main-section2-thumb01.jpg') no-repeat center / cover;}
.main-section02 .box-2::before {background: url('../images/main-section2-thumb02.jpg') no-repeat center / cover;}
.main-section02 .box-3::before {background: url('../images/main-section2-thumb03.jpg') no-repeat center / cover;}
.main-section02 .box-4::before {background: url('../images/main-section2-thumb04.jpg') no-repeat center / cover;}
.main-section02 .box-5::before {background: url('../images/main-section2-thumb05.jpg') no-repeat center / cover;}
.main-section02 .box.is-active {flex-basis: 45rem; cursor: auto;}
.main-section02 .box:hover::before {opacity: 0.6; filter: grayscale(0);}
.main-section02 .box p {position: relative;}
.main-section02 .box .year {color: #fff; text-align: center; transition: font-size 0.25s ease;}
.main-section02 .box .year {font-size: 22px; font-weight: 600;}
.main-section02 .box .year span {display: block;}
.main-section02 .box a {height: 0; margin-top: 0; opacity: 0; visibility: hidden; overflow: hidden; transform: none; transition: opacity 0.35s ease, visibility 0.35s; pointer-events: none; position: relative;}
.main-section02 .box .txt {font-size: 16px; line-height: 1.6;}
.main-section02 .box.is-active.title-show .year {font-size: 49px;}
.main-section02 .box.is-active.title-show .year span {display: inline; margin: 0 10px; font-weight: 400; font-size: 35px;}
.main-section02 .box.is-active.title-show a {height: 36px; margin-top: 1.5rem; opacity: 1; visibility: visible; overflow: visible; transition-delay: 0.35s; pointer-events: auto; color: #fff; border: 1px solid #fff; display: flex; align-items: center; padding: 8px 48px 5px 13px; border-radius: 50px; background: url('../images/ico-arrow-right-white.png') no-repeat right 10px center;;}
.main-section02 .box.is-active.title-show a:hover {background: #fff url('../images/ico-arrow-right-gray.png') no-repeat right 10px center; color: #333;}
.main-section02 .main-box {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;}
.main-section02 .main-box::before {background: url('../images/main-section2-thumb.jpg') no-repeat center / cover;  opacity: 0.7;}
.main-section02 .main-box .txt-wrap {opacity: 0; transform: none; transition: opacity 0.35s ease, visibility 0.35s; pointer-events: none;}
.main-section02 .main-box p {text-align: left; color: #fff;}
.main-section02 .main-box .title {font-size: 50px; font-weight: 600;}
.main-section02 .main-box .txt {font-size: 18px; margin-top: 10px;}
.main-section02 .main-box.is-active .txt-wrap {padding: 90px; opacity: 1; visibility: visible; overflow: visible; transition-delay: 0.35s;}
.main-section02 .main-box.is-active::before {filter: grayscale(0); opacity: 1;}

.main-section03 {background-color: #e7f5fd;}
.main-section03 .title-wrap {position: absolute; top: 83px; left: 292px;}
.main-section03 h2 {font-size: 50px; font-weight: 600; text-transform: uppercase;}
.main-section03 h3 {font-size: 18px; font-weight: 500; line-height: 1.7;}
.main-section03 .fp-tableCell {display: flex; align-items: center; justify-content: center;}
.main-section03 img {max-width: 100%;}

.main-section04 {background: #fff url('../images/main-section4-bg.png') no-repeat left bottom;}
.main-section04 .fp-tableCell {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.main-section04 .title-wrap {width: 100%; padding-left: calc(50% + 90px);}
.main-section04 h2 {font-size: 50px; font-weight: 600; text-transform: uppercase;}
.main-section04 h3 {font-size: 18px; font-weight: 500; line-height: 1.7;}
.main-section04 .thumb-wrap {display: flex; flex-direction: column-reverse; gap: 10px; max-width: 95%;}
.main-section04 .thumb-wrap .row {display: flex; gap: 10px; justify-content: center; max-width: 100%;}
.main-section04 .thumb-wrap .row-1 {padding-right: 188px;}
.main-section04 .thumb-wrap .row-2 {}
.main-section04 .thumb-wrap .box {position: relative; background: #035fa4; padding: 20px; overflow: hidden; max-width: 100%;}
.main-section04 .thumb-wrap .box::before {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all 1s;}
.main-section04 .thumb-wrap .box:hover::before {transform: scale(1.1);}
.main-section04 .thumb-wrap .box p {font-size: 17px; font-weight: 600; position: relative; z-index: 1;}
.main-section04 .thumb-wrap .box-1,
.main-section04 .thumb-wrap .box-2 {width: 287px; height: 190px; margin-top: -24px;}
.main-section04 .thumb-wrap .box-3,
.main-section04 .thumb-wrap .box-4 {width: 192px; height: 288px;}
.main-section04 .thumb-wrap .box-5 {width: 480px; height: 326px;}
.main-section04 .thumb-wrap .box-6 {width: 480px; height: 240px; margin-top: 110px;}
.main-section04 .thumb-wrap .box-1::before {background-image: url('../images/main-section4-thumb2.png');}
.main-section04 .thumb-wrap .box-2::before {background-image: url('../images/main-section4-thumb2.png');}
.main-section04 .thumb-wrap .box-3::before {background-image: url('../images/main-section4-thumb3.png');}
.main-section04 .thumb-wrap .box-4::before {background-image: url('../images/main-section4-thumb4.png');}
.main-section04 .thumb-wrap .box-5::before {background-image: url('../images/main-section4-thumb5.png');}
.main-section04 .thumb-wrap .box-6::before {background-image: url('../images/main-section4-thumb6.png');}
/* .main-visual .qa-section{
    perspective:1000px;
}

.main-visual .qa-section .card{
    transform-style:preserve-3d;
}

.main-visual .qa-section .card-inner{
    position:relative;
    transform-style:preserve-3d;
}

.main-visual .qa-section .q,
.main-visual .qa-section .a{
    width:100%;
    height:100%;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.main-visual .qa-section .a{
    position:absolute;
    inset:0;
    transform:rotateY(180deg);
} */

@media (max-width: 1400px) {
    .main-visual .year-swiper h2 {font-size: 12vw;}
    .main-visual .year-swiper p {font-size: 1.3vw;}
    .main-section02 .box.is-active {flex-basis: 32rem;}
}
@media (max-width: 1200px) {
    .main-section04 .thumb-wrap .row-1 {padding-right: 0;}
    .main-section04 .thumb-wrap .row-2 {align-items: flex-end;}
    .main-section04 .thumb-wrap .box-6 {margin-top: 0;}
    .main-section04 .thumb-wrap .box-1, 
    .main-section04 .thumb-wrap .box-2 {margin-top: 0;}
    .main-section03 .img-wrap {width: 100%; overflow-x: auto;}
    .main-section03 .img-wrap img {width: 900px; max-width: none;}
}
@media (max-width: 768px) {
    /* .main-wrap .section {height: auto !important;} */
    .main-wrap .section .fp-tableCell {height: auto !important;}
    .main-visual {height: 50vh !important;}
    .main-visual .bg-item {left: 5px; bottom: -150px;}
    .main-visual .bg-item i {border-left: 5px solid #fff; border-bottom: 5px solid #fff;}
    .main-visual .bg-item i:nth-child(1) {bottom: 0; border-bottom-left-radius: 250px;}
    .main-visual .bg-item i:nth-child(2) {left: 10px; bottom: -24px;}
    .main-visual .bg-item i:nth-child(3) {left: 20px; bottom: -6px;}
    .main-visual .year-swiper {height: 100%;}
    .main-visual .year-swiper h2 {font-size: 80px;}
    .main-visual .year-swiper p {font-size: 16px; margin-top: 10px;}
    .main-visual .year-swiper .swiper-slide {display: block;}
    .main-visual .year-swiper .swiper-slide > div {position: absolute; top: 50%; left: 50%;transform: translateX(-50%); margin-top: -80px;}
    .main-visual .swiper-pagination {bottom: 30px; gap: 2px;}
    .main-visual .swiper-pagination .swiper-pagination-bullet {width: 8px; height: 8px;}
    .main-visual .qa-section .card .card-inner div {padding: 10px; border-radius: 10px; width: 220px;}
    .main-visual .qa-section .card p {font-size: 14px;}
    .main-visual .qa-section .card .q p::before {font-size: 14px;}
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 2px;}
    .main-section02 {padding: 100px 0 20px 0; height: auto !important;}
    .main-section02 .bg-item1 {display: none;}
    .main-section02 .accordion-area {flex-direction: column; padding: 0 10%; height: auto; width: 100%;}
    .main-section02 .box {flex: auto; width: 100%; min-height: 65px;}
    .main-section02 .box:last-child {border-radius: 20px 20px 0 0;}
    .main-section02 .box:nth-child(5) {border-radius: 0 0 20px 20px;}
    .main-section02 .box .year {display: flex; align-items: center; font-size: 15px;}
    .main-section02 .box .year span {font-size: 14px; font-weight: 400; margin: 0 2px;}
    .main-section02 .box::before {background-position: top 38% center;}
    .main-section02 .box.is-active {flex-basis: 220px;}
    .main-section02 .box.is-active.title-show .year {font-size: 24px;}
    .main-section02 .box.is-active.title-show .year span {font-size: 20px;}
    .main-section02 .box.is-active.title-show a {margin-top: 15px; height: 30px; font-size: 13px; background-size: 17px;}
    .main-section02 .main-box {order: -1;}
    .main-section02 .main-box p {text-shadow:0 0 4px rgba(255,255,255), 0 0 20px rgba(255,255,255,.35);}
    .main-section02 .main-box .title {font-size: 20px;}
    .main-section02 .main-box .txt {font-size: 14px;}
    .main-section02 .main-box.is-active .txt-wrap {padding: 20px;}
    .main-section02 .bg-item2 {width: 210px; height: 137px; bottom: -15px; right: -29px;}
    .main-section02 .bg-item3 {height: 40px;}
    .main-section03 {height: auto !important;}
    .main-section03 .title-wrap {top:20px; left: 20px;}
    .main-section03 h2 {font-size: 27px; margin-bottom: 5px;}
    .main-section03 h3 {font-size: 15px; line-height: 1.3;}    
    .main-section04 {height: auto !important; padding: 80px 20px; background-size: 65%;}
    .main-section04 .title-wrap {padding-left: 0;}
    .main-section04 h2 {font-size: 27px; margin-bottom: 5px;}
    .main-section04 h3 {font-size: 15px; line-height: 1.3;}
    .main-section04 .thumb-wrap {max-width :100%; flex-direction: column; width: 100%; margin-top: 10px;}
    .main-section04 .thumb-wrap .row-1 {flex-direction: column;}
    .main-section04 .thumb-wrap .box {width: 100% !important; height: 95px !important; border-radius: 10px;}
}

/* sub common */
.sub-visual {height: 516px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: url('../images/sub-visual-bg.png') no-repeat center / cover;}
.sub-visual h2 {font-size: 80px; text-align: center;}
.sub-visual h3 {font-size: 20px; font-weight: 400; margin-top: 10px; text-align: center;}
.sub-visual h3 br {display: none;}
@media (max-width: 1200px) {
    .sub-visual {height: 350px;}
    .sub-visual h2 {font-size: 60px;}
    .sub-visual h3 {font-size: 18px;}
}
@media (max-width: 768px) {
    .sub-visual {height: 230px; padding: 0 30px;}
    .sub-visual h2 {font-size: 26px;}
    .sub-visual h3 {font-size: 15px;}
    .sub-visual h3 br {display: block;}
}

/* history */
.sub-history {min-height: 100vh; width: 100%; position: relative;}
.sub-history .year-nav {position: absolute; top: 0; left: 0; bottom: 0; width: 190px; background: #2256a0; display: flex; align-items: center; justify-content: flex-end; z-index: 10;}
.sub-history .year-nav ul li a {display: block; position: relative; text-align: right; font-size: 16px; color: #08316c; font-weight: 600; padding: 17px 18px 17px 0;}
.sub-history .year-nav ul li a span {font-size: 13px; font-weight: 400;}
.sub-history .year-nav ul li a.active {color: #fff;}
.sub-history .year-nav ul li a::after {content: ''; display: block; width: 8px; height: 8px; background: #cdcbcb; position: absolute; right: -4px; top: 44%; transform: translateY(-50%); border-radius: 50%;}
.sub-history .year-nav ul li a.active::after {background: #fff;}
.sub-history .year-nav .desc-panel {position: absolute; left: 190px; width: 324px; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; visibility: hidden; transition: all 0.2s;}
.sub-history .year-nav .desc-panel.active {opacity: 1; visibility: visible;}
.sub-history .year-nav .desc-panel p {color: #9b9b9b;}
.sub-history .year-nav .desc-panel .year {font-size: 71px; font-weight: 600;}
.sub-history .year-nav .desc-panel .year span {display: block; font-size: 40px;}
.sub-history .year-nav .desc-panel .txt {font-size: 20px; margin-top: 10px;}
.sub-history .chapter-area {width: 100%; height: 100vh; overflow: hidden; position: relative;}
.sub-history .chapter-area .chapter-track {position:relative; z-index:1; display:flex; width:100%; height:100%; will-change:transform;}
.sub-history .chapter-area .chapter {position:absolute; top:0; height:100%; display: flex; align-items: center; gap: 55px;}
.sub-history .history-bg {position: absolute; inset: 0; z-index: 0;}
.sub-history .history-bg .bg {position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0; transition: opacity .8s ease;}
.sub-history .history-bg .bg.active {opacity: 1;}
.sub-history .intro,
.sub-history .chapter {position: relative; z-index: 1;}
.sub-history .history-bg .bg.active {opacity:1;}
.sub-history .history-bg .bg-intro {background-image: url('../images/history/bg-intro.jpg');}
.sub-history .history-bg .bg-chapter1 {background-image: url('../images/history/bg-chapter1.jpg');}
.sub-history .history-bg .bg-chapter2 {background-image: url('../images/history/bg-chapter2.jpg');}
.sub-history .history-bg .bg-chapter3 {background-image: url('../images/history/bg-chapter3.jpg');}
.sub-history .history-bg .bg-chapter4 {background-image: url('../images/history/bg-chapter4.jpg');}
.sub-history .history-bg .bg-chapter5 {background-image: url('../images/history/bg-chapter5.jpg');}
.sub-history .intro {display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 190px;}
.sub-history .intro p {text-align: center; color: #fff;}
.sub-history .intro p br {display: none;}
.sub-history .intro .title {font-size: 100px; font-weight: 600;}
.sub-history .intro .txt {font-size: 23px; margin-top: 30px;}
.sub-history .intro .split-title-wrap {text-align: center;}
.sub-history .chapter .box {width: 295px; height: 395px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.7); padding: 20px; flex-shrink: 0; position: relative; transition: all 0.2s;}
.sub-history .chapter .box:hover {transform: translateY(-10px);}
.sub-history .chapter .box .year {font-size: 14px; color: #9b9b9b; margin-bottom: 25px; display: block;}
.sub-history .chapter .box .thumb {width: 100%; overflow: hidden; margin-bottom: 20px;}
.sub-history .chapter .box .thumb img {display: block; max-width: 100%;}
.sub-history .chapter .box .title {font-size: 18px; margin-bottom: 10px;}
.sub-history .chapter .box .txt {color: #787878; font-size: 17px; font-family: 'Pretendard';}
.sub-history .chapter .box .num {position: absolute; right: 15px; bottom: 15px; font-size: 16px; font-weight: 600;}
.sub-history .chapter .box:nth-child(4n+1) {margin-top: -200px;}
.sub-history .chapter .box:nth-child(4n+2) {margin-top: 100px;}
.sub-history .chapter .box:nth-child(4n+3) {margin-top: -100px;}
.sub-history .chapter .box:nth-child(4n+4) {margin-top: 180px;}
.sub-history .chapter.chapter2 .box:nth-child(4n+1) {margin-top: 100px;}
.sub-history .chapter.chapter2 .box:nth-child(4n+2) {margin-top: -100px;}
.sub-history .chapter.chapter2 .box:nth-child(4n+3) {margin-top: 180px;}
.sub-history .chapter.chapter2 .box:nth-child(4n+4) {margin-top: -200px;}
.sub-history .progress-bar {position: absolute; left: 50%; transform: translateX(-50%); bottom: 100px; display: flex; width: 980px; z-index: 1; margin-left: 112px;}
.sub-history .progress-bar::before {content: ''; display: block; height: 5px; background:#fff;border:1px solid #b8b8b8;box-shadow:inset 0 2px 2px rgba(0,0,0,.18),inset 0 -1px 1px rgba(255,255,255,.9); position: absolute; left: 80px; right: 80px; z-index: -1;}
.sub-history .progress-bar .progress-fill {position:absolute; left:0; top:0; width:0;height:5px; background:#2256a0; z-index:1;}
.sub-history .progress-bar a {flex: 1; text-align: center; font-size: 13px; color: #8e8f8f; font-weight: 600; margin-top: 20px;}
.sub-history .progress-bar .hand {position:absolute;left:60px;width:44px;height:18px;border-radius:999px;background:linear-gradient(to bottom,#ffffff 0%,#f7f7f7 45%,#e4e4e4 100%);border:1px solid #c9c9c9;box-shadow:1px 2px 2px 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(0,0,0,.08);top:-7px;cursor:pointer;transform:translateX(-50%); z-index: 2;}
.sub-history .progress-bar {width: 800px; max-width: 80%;}
.sub-history .progress-bar::before {left: 0; right: 0;}
.sub-history .popup-content {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(68, 68, 68, 0.90); z-index: 101; opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none; flex-direction: column;}
.sub-history .popup-content.active {opacity: 1; visibility: visible; pointer-events: auto;}
.sub-history .popup-content .close {width: 28px; height: 28px; background: url('../images/ico-close-white.png') no-repeat center; position: absolute; right: calc(50% - 495px); top: calc(50% - 310px);}
.sub-history .popup-content .swiper-slide {opacity: 0 !important;}
.sub-history .popup-content .swiper-slide-active {opacity: 1 !important;}
.sub-history .popup-content .slide {margin: 0 auto; background: #fff; border-radius: 30px; overflow: hidden; padding: 45px; position: relative; display: flex; height: 537px; width: 1000px; flex-direction: column; display: none;}
.sub-history .popup-content .slide.active {display: flex;}
.sub-history .popup-content .slide .bg {position: absolute; right: 20px; bottom: -50px; font-size: 160px; color: #ededed; font-weight: 700;}
.sub-history .popup-content .slide .txt-box .date {text-align: right; font-size: 14px; color: #9b9b9b;}
.sub-history .popup-content .slide .title-1 {font-size: 35px; font-weight: 700;}
.sub-history .popup-content .slide .title-2 {font-size: 19px; color: #2256a0; font-weight: 600; margin-bottom: 10px; font-family: 'Pretendard';}
.sub-history .popup-content .txt-area p {font-size: 17px; font-family: 'Pretendard'; line-height: 1.9; color: #5c5c5c;}
.sub-history .popup-content .slide .thumb-wrap {overflow: hidden; display: flex; width: 100%; gap: 35px; margin-top: 20px; flex: auto; position: relative; z-index: 1; align-items: flex-start;}
.sub-history .popup-content .slide .thumb-wrap img {display: block; max-width: 100%; width: 450px; margin-top: 10px;}
.sub-history .popup-content .slide .thumb-wrap .txt-area {flex: 1; min-width:0; height: 100%; overflow: auto; scrollbar-width:thin;scrollbar-color:#9a9a9a transparent;} 
.sub-history .popup-content .slide .thumb-wrap .txt-area::-webkit-scrollbar {width:3px;} .sub-history .popup-content .slide .thumb-wrap .txt-area::-webkit-scrollbar-track {background:transparent;} 
.sub-history .popup-content .slide .thumb-wrap .txt-area::-webkit-scrollbar-thumb {background:#9a9a9a;border-radius:999px;}
.sub-history .popup-content .slide-btn-wrap {position: absolute; top: 50%; transform: translateY(-50%); width: 100%;}
.sub-history .popup-content .slide-btn {cursor: pointer; width: 41px; height: 79px; border-radius: 50%; background: url('../images/ico-arrow-right-big.png') no-repeat center / 100%; border: 0; position: absolute;}
.sub-history .popup-content .prev {transform: rotate(180deg); left: calc(50% - 555px);}
.sub-history .popup-content .next {right: calc(50% - 555px);}
.sub-history.award .chapter .box {width: 393px; height: 294px; display: flex; gap: 20px;}
.sub-history.award .chapter .box .txt-wrap {flex: 1; flex-shrink: 0; display: flex; flex-direction: column;}
.sub-history.award .chapter .box .thumb {flex: 1; width: auto; margin-bottom: 0;}
.sub-history.award .chapter .box .year {color: #000; font-size: 18px; font-weight: 600; margin-bottom: 0;}
.sub-history.award .chapter .box .year::after {content: ''; display: block; width: 15px; height: 3px; background: #000; margin: 10px 0 15px;}
.sub-history.award .chapter .box .title {font-family: 'Pretendard'; font-size: 17px; color: #787878;}
.sub-history.award .chapter .box .date {margin-top: auto; font-size: 14px; color: #9b9b9b; font-weight: 400;}
.sub-history.award .progress-bar {width: 800px; max-width: 80%;}
.sub-history.award .progress-bar::before {left: 0; right: 0;}

/* .sub-history {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

.sub-history .chapter-area {
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
} */

@media (max-width: 1400px) {
    .sub-history .intro p br {display: block;}
}
@media (max-width: 1200px) {
    .sub-history .progress-bar {bottom: 50px;}
    .sub-history .popup-content .slide {width: 80%; height: 488px;}
    .sub-history .popup-content .close {right: calc(50% - 40vw);}
    .sub-history .popup-content .slide-btn {margin-top: -35px;}
    .sub-history .popup-content .prev {left: calc(50% - 45vw);}
    .sub-history .popup-content .next {right: calc(50% - 45vw);}
    .sub-history .popup-content .slide .thumb-wrap img {width: 380px;}
    .sub-history .intro .title {font-size: 50px;}
}
@media (max-width: 768px) {
    .sub-history .year-nav {width: auto; right: 0; height: 50px; bottom: 0; top: auto;}
    .sub-history .year-nav ul {display: flex; width: 100%;}
    .sub-history .year-nav ul li {flex: 1;}
    .sub-history .year-nav ul li a {font-size: 12px; text-align: center; padding: 0; font-weight: 500; line-height: 0.8; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 8px;}
    .sub-history .year-nav ul li a::after {top: 0; margin-top: -10px; left: 50%; right: auto; transform: translateX(-50%);}
    .sub-history .year-nav ul li a span {display: block; font-size: 0; margin-top: -3px;}    
    .sub-history .year-nav ul li a span::before {content: '-'; font-size: 12px; line-height: 1;}
    .sub-history .year-nav .desc-panel {display: none;}
    .sub-history .intro {padding-left: 0;}
    .sub-history .intro .title {font-size: 50px; line-height: 1.3;}
    .sub-history .intro .title + .title {margin-top: -25px;}
    .sub-history .intro .txt {font-size: 18px; margin-top: 5px;}
    .sub-history .progress-bar {bottom: 80px; margin-left: 0;}
    /* .sub-history .progress-bar::before {left: 25px; right: 25px;} */
    .sub-history .chapter-area .chapter {gap: 35px;}
    .sub-history .chapter .box {width: 230px; height: 330px; border-radius: 10px;}
    .sub-history .chapter .box .year {font-size: 13px; margin-bottom: 10px;}
    .sub-history .chapter .box .title {font-size: 16px; margin-bottom: 5px;}
    .sub-history .chapter .box .txt {font-size: 14px;}
    .sub-history .popup-content .slide {border-radius: 20px; padding: 20px; height: 80vh;}
    .sub-history .popup-content .slide .title-1 {font-size: 17px;}
    .sub-history .popup-content .slide .title-2 {font-size: 14px;}
    .sub-history .popup-content .slide .thumb-wrap {margin-top: 0; flex-direction: column; gap: 15px;}
    .sub-history .popup-content .slide .thumb-wrap img {margin-top: 0;}
    .sub-history .popup-content .txt-area p {font-size: 14px; text-align: left;}
    .sub-history .popup-content .slide .bg {font-size: 100px; right: 15px; bottom: -37px;}
    .sub-history .popup-content .slide-btn {width: 19px; height: 50px;}
    .sub-history .popup-content .prev {left: calc(50% - 47vw);}
    .sub-history .popup-content .next {right: calc(50% - 47vw);}
    .sub-history .popup-content .close {top: 20px;}
    .sub-history.award .chapter .box {display: block; width: 220px; height: auto;}
    .sub-history.award .chapter .box .year {font-size: 16px;}
    .sub-history.award .chapter .box .year::after {margin: 5px 0;}
    .sub-history.award .chapter .box .title {font-size: 15px;}
    .sub-history.award .chapter .box .date {font-size: 13px;}
}

/* 모바일 가로 화면의 히스토리 팝업 */
@media (orientation: landscape) and (max-height: 500px) {
    .sub-history .popup-content {padding: 15px 0;}
    .sub-history .popup-content .slide {
        width: 80%;
        height: calc(100vh - 30px);
        height: calc(100dvh - 30px);
        padding: 20px 45px;
        border-radius: 20px;
    }
    .sub-history .popup-content .close {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 2;
    }
    .sub-history .popup-content .slide .title-1 {font-size: 25px;}
    .sub-history .popup-content .slide .title-2 {font-size: 16px; margin-bottom: 5px;}
    .sub-history .popup-content .slide .thumb-wrap {min-height: 0; margin-top: 10px; gap: 25px; flex-direction: row;}
    .sub-history .popup-content .slide .thumb-wrap img {
        width: 45%;
        height: 100%;
        margin-top: 0;
        object-fit: contain;
        object-position: top;
    }
    .sub-history .popup-content .slide .thumb-wrap .txt-area {min-height: 0;}
    .sub-history .popup-content .txt-area p {font-size: 14px; line-height: 1.7;}
}


/* 아카이브 */
.sub-archive .content {padding-bottom: 130px;}
.sub-archive .content .list-area {display:grid; grid-template-columns:repeat(3, 188px); justify-content: center; gap: 70px 170px;}
.sub-archive .content .list-area .list {opacity: 0; transform: translateY(40px); animation: fadeUp 0.8s ease forwards;}
.sub-archive .content .list-area .list:nth-child(1) {animation-delay: 1s;}
.sub-archive .content .list-area .list:nth-child(2) {animation-delay: 1.25s;}
.sub-archive .content .list-area .list:nth-child(3) {animation-delay: 1.4s;}
.sub-archive .content .list-area .list:nth-child(4) {animation-delay: 1.55s;}
.sub-archive .content .list-area .list:nth-child(5) {animation-delay: 1.7s;}
.sub-archive .content .list-area .list:nth-child(6) {animation-delay: 1.85s;}
.sub-archive .content .list-area .list:nth-child(7) {animation-delay: 2s;}
.sub-archive .content .list-area .list:nth-child(8) {animation-delay: 2.25s;}
.sub-archive .list .thumb-area {width: 188px; height: 262px; padding: 40px 20px 20px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; background-repeat: no-repeat; background-position: center; background-size: cover; box-shadow: 3px 1px 8px 3px rgba(0, 0, 0, 0.18);}
.sub-archive .list-1 .thumb-area {background-image: url('../images/archive/thumb-1.png');}
.sub-archive .list-2 .thumb-area {background-image: url('../images/archive/thumb-2.png');}
.sub-archive .list-3 .thumb-area {background-image: url('../images/archive/thumb-3.png');}
.sub-archive .list-4 .thumb-area {background-image: url('../images/archive/thumb-4.png');}
.sub-archive .list-5 .thumb-area {background-image: url('../images/archive/thumb-5.png');}
.sub-archive .list-6 .thumb-area {background-image: url('../images/archive/thumb-6.png');}
.sub-archive .list .thumb-area .year {font-size: 25px; font-weight: 600;}
.sub-archive .list .thumb-area a {width: 110px; height: 29px; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.3); background-image: url('../images/ico-arrow-right-white.png'); background-repeat: no-repeat; background-position: right 10px center; background-size: 17px; padding-top: 3px; padding-right: 20px; margin: 0 auto; transition: all 0.2s;}
.sub-archive .list .thumb-area a:hover {background-color: rgba(0, 20, 107, 0.411);}
.sub-archive .list .download {display: flex; align-items: center; justify-content: center; margin-top: 15px;}
.sub-archive .list .download li {position: relative;}
.sub-archive .list .download li + li::before {content: ''; display: block; width: 1px; height: 13px; background: #969696; position: absolute; left: 0; top: 49%; transform: translateY(-50%);}
.sub-archive .list .download a {font-size: 15px; color: #838383; font-weight: 600; display: block; width: 100%; padding: 0 41px 0 20px; background: url('../images/ico-download-gray.png') no-repeat right 17px center; transition: all 0.2s;}
.sub-archive .list .download a:hover {color: #035fa4; background: url('../images/ico-download-blue.png') no-repeat right 17px center;}
@media (max-width: 1024px) {
    .sub-archive .content .list-area {grid-template-columns: repeat(2, 188px);}
}
@media (max-width: 768px) {
    .sub-archive .content .list-area {gap: 50px 0; grid-template-columns: repeat(2, 1fr);}
    .sub-archive .list .thumb-area {width: 140px; max-width: 100%; height: 199px; margin: 0 auto;}
    .sub-archive .list .thumb-area .year {font-size: 20px;}
}


/* infographics */
.sub-infographic .section {background: #dbeffb; min-height: 100vh;}
.sub-infographic .section .fp-tableCell {padding: 150px 0 50px;}
.sub-infographic .section.fp-auto-height {min-height: auto;}
.sub-infographic .section.fp-auto-height .fp-tableCell {padding: 0;}
.sub-infographic .section .inner {width: 1500px; margin: 0 auto; max-width: 100%; display: flex; gap: 50px;}
.sub-infographic .section .title {font-size: 22px; font-weight: 700; display: flex; align-items: center; color: #000; font-family: 'Pretendard'; gap: 10px; margin-bottom: 20px;}
.sub-infographic .section .title span {color: #065ea2; font-size: 15px; padding-bottom: 5px; border-bottom: 1px solid #065ea2;}
.sub-infographic .img-wrap {width: 1500px; max-width: 100%; padding: 20px; background: #fff; border: 1px solid #ddd; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden;}
.sub-infographic .img-wrap:has(.title) {flex-direction: column;}
.sub-infographic .img-wrap .title {flex-shrink: 0; margin:0 auto 20px 0;}
.sub-infographic .img-wrap img {display: block; max-width: 100%; flex: 1; min-height: 0; width: 97%; max-height: 100%; object-fit: contain;}
.sub-infographic .img-wrap video {display: block; max-width: 94%; width: 640px;outline: none; border: 0; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;}
.sub-infographic .img-wrap video:focus,
.sub-infographic .img-wrap video:active {outline: none; outline: 0; border: 0;}
.sub-infographic .m-hand {text-align: right; font-size: 12px; font-family: 'Pretendard'; display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-left: auto; display: none;}
.sub-infographic .m-hand img {width: 15px !important;}
.sub-infographic .section1 .fp-tableCell {padding: 100px 0 0;}
.sub-infographic .section1 .title {position: absolute; left: 250px; top: 150px;}
.sub-infographic .section1 .img-wrap {display: flex; align-items: center; justify-content: center; padding: 0;  background: transparent; border: 0; width: 100%;}
.sub-infographic .section1 .img-wrap img {width: 1500px; max-width: 80%; height:auto;}
.sub-infographic .section2 .img-wrap,
.sub-infographic .section6 .img-wrap,
.sub-infographic .section7 .img-wrap,
.sub-infographic .section8 .img-wrap {opacity: 0;}
.sub-infographic .section5 .img-wrap img {max-height: calc(100vh - 290px); width: auto; object-fit: contain;}
.sub-infographic .section7 .img-wrap {padding: 0;}
@media (min-width: 1441px) {
    .sub-infographic .section1 .img-wrap img {
        width: auto;
        max-height: calc(100vh - 120px);
        object-fit: contain;
    }
    .sub-infographic .section3 .img-wrap {height: calc(100vh - 200px);}
    .sub-infographic .section3 .img-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 0;
        flex: 1;
    }
    .sub-infographic .section3 .img-box img {
        width: auto;
        max-width: 97%;
        max-height: 100%;
        object-fit: contain;
    }
}
@media (max-width: 1440px) {
    .sub-infographic .section {min-height: auto; height: auto !important;}
    .sub-infographic .section .fp-tableCell {height: auto !important; padding: 20px 20px;}
    .sub-infographic .img-wrap {width: 100%; min-height: 0;}  
    .sub-infographic .section1 .title {position: static;}
    .sub-infographic .section1 .img-wrap {overflow-x: auto;}
    .sub-infographic .section1 .img-wrap img {flex: none;}
    .sub-infographic .section2 .img-wrap {aspect-ratio: 4 / 4.7;}
    .sub-infographic .section3 .img-wrap {aspect-ratio: 4 / 2.4;}    
    .sub-infographic .section4 .img-wrap {aspect-ratio: 4 / 2.4;}
    .sub-infographic .section5 .img-wrap {aspect-ratio: 4 / 2.5;}
}
@media (max-width: 1200px) {
    .sub-infographic {padding-top: 100px; background: #dbeffb;}
    .sub-infographic .section .title {font-size: 18px;}
}

@media (max-width: 768px) {
    .sub-infographic .section .title {font-size: 14px; margin-bottom: 10px;}    
    .sub-infographic .section .inner {flex-direction: column; gap: 15px;}
    .sub-infographic .section .img-box {width: 100%; overflow-x: auto; flex: 1;}
    .sub-infographic .m-hand {display: flex;}
    .sub-infographic .section1 .fp-tableCell {padding-top: 85px;}
    .sub-infographic .section1 .img-wrap {align-items: flex-start;}
    .sub-infographic .section1 .img-wrap img {max-width: none; width: 700px;}
    .sub-infographic .section3 .img-wrap {aspect-ratio: 4 / 6;}
    .sub-infographic .section3 .img-wrap img {max-width: none; width: 800px;}
    .sub-infographic .section4 .img-wrap {aspect-ratio: 4 / 6;}
    .sub-infographic .section4 .img-wrap img {max-width: none; width: 800px;}
    .sub-infographic .section5 .img-wrap {aspect-ratio: 4 / 6.6;}
    .sub-infographic .section5 .img-wrap img {max-width: none; width: 800px;}
}


/* Movies */
.sub-movies .movies-visual {position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 160px 40px 80px; background: #0a1628 url('../images/main-visual01.jpg') no-repeat center / cover;}
.sub-movies .movies-visual::before {content: ''; position: absolute; inset: 0; background: rgba(10, 22, 40, 0.55);}
.sub-movies .movies-video {position: relative; z-index: 1; width: 1100px; max-width: 100%; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); overflow: hidden;}
.sub-movies .movies-video .thumb {position: absolute; inset: 0;}
.sub-movies .movies-video .thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}
.sub-movies .movies-video .btn-play {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 90px; height: 90px; border: 0; border-radius: 50%; background: rgba(0, 138, 206, 0.9); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, background 0.25s ease;}
.sub-movies .movies-video .btn-play:hover {transform: translate(-50%, -50%) scale(1.08); background: #008ace;}
.sub-movies .movies-video .btn-play .ico {display: block; width: 28px; height: 28px; background: url('../images/ico-play-white.png') no-repeat center / contain; margin-left: 4px;}
.sub-movies .movies-video .iframe-wrap {position: absolute; inset: 0; opacity: 0; pointer-events: none;}
.sub-movies .movies-video .iframe-wrap iframe {display: block; width: 100%; height: 100%; border: 0;}
.sub-movies .movies-video.is-playing .thumb,
.sub-movies .movies-video.is-playing .btn-play {opacity: 0; pointer-events: none; visibility: hidden;}
.sub-movies .movies-video.is-playing .iframe-wrap {opacity: 1; pointer-events: auto;}
@media (max-width: 768px) {
    .sub-movies .movies-visual {padding: 100px 15px 50px;}
    .sub-movies .movies-video .btn-play {width: 64px; height: 64px;}
    .sub-movies .movies-video .btn-play .ico {width: 20px; height: 20px;}
}