@charset "UTF-8";
/* html */
html { opacity: 0; }
html.start { opacity: 1; }

/* body */
body:has(.history-modal.on),
body:has(.video-modal.on),
body:has(.header-nav.on) { overflow: hidden; }

/* section */
.section { position: relative; }

/* section1 */ 
#section1 { display: flex; align-items: center; height: 100dvh; min-height: 80rem; }
#section1:before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 100%; height: 100%; background: #222; opacity: .2; }
#section1 .bg-video { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
#section1 .layout { position: relative; z-index: 3; }
#section1 .title { display: flex; flex-direction: column; align-items: center; }
#section1 .title span { display: block; margin-bottom: 1.6rem; color: #5879E5; font-size: 3.2rem; font-family: "Orbitron"; font-weight: 700; line-height: normal; text-align: center; }
#section1 .title strong { display: block; margin-bottom: 4.8rem; color: #FFF; font-size: 12.8rem; font-family: "KIMM"; font-weight: 700; font-style: normal; line-height: normal; letter-spacing: -0.256rem; text-align: center; }
#section1 .title strong br { display: none; }
#section1 .title p { color: #FFF; font-size: 2.8rem; font-weight: 600; font-style: normal; line-height: 3.92rem; text-align: center; }
@media (max-width: 1024px) {
#section1 .title span { margin-bottom: 1.4rem; font-size: 2.8rem; }
#section1 .title strong { margin-bottom: 2.8rem; font-size: 10.8rem; }
#section1 .title p { font-size: 2.4rem; line-height: 3.4rem; }
}
@media (max-width: 767px) {
#section1 .title span { margin-bottom: 1rem; font-size: 2.4rem; }
#section1 .title strong { margin-bottom: 2rem; font-size: 8.8rem; }
#section1 .title strong br { display: block; }
#section1 .title p { font-size: 2rem; line-height: 3rem; }
}
@media (max-width: 640px) {
#section1 .title span { margin-bottom: 1rem; font-size: 2rem; }
#section1 .title strong { margin-bottom: 1rem; font-size: 4.8rem; line-height: 130%; }
#section1 .title strong br { display: block; }
#section1 .title p { font-size: 1.8rem; line-height: 2.8rem; }
}

/* section2 */
#section2 { padding: 22rem 0; background: url(../images/main/section2-bg.png) no-repeat center center/cover; }
#section2 .layout { max-width:1600px; }
#section2 .layout .title { display: flex; flex-direction: column; gap: 2.4rem; }
#section2 .layout .title strong { color: #222; font-size: 6.4rem; font-family: "KIMM"; font-weight: 700; font-style: normal; line-height: 130%; }
#section2 .layout .title strong br { display: none; }
#section2 .layout .title strong img { vertical-align: -.5rem; }
#section2 .layout .title p { color: #616161; font-size: 2.8rem; font-family: "Pretendard"; font-weight: 400; font-style: normal; line-height: 140%; }
#section2 .layout .content { margin-top: 8.9rem; }
#section2 .layout .content .klnac-list ul { display: flex; gap: 4rem; width: 100%; }
#section2 .layout .content .klnac-list ul li { width: calc(33.333% - 2.666rem); aspect-ratio: 50.6 / 39.4; }
#section2 .layout .content .klnac-list ul li .klnac-list-item { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 6rem; background: #fff; border-radius: 2.4rem; box-shadow: .8rem .8rem 2.4rem 0 rgba(20, 32, 71, 0.08); cursor: pointer; transition: all .5s; overflow: hidden; }
#section2 .layout .content .klnac-list ul li .klnac-list-item.item1 { background: url(../images/main/klnac-list-item-bg1.png) no-repeat center center/cover; }
#section2 .layout .content .klnac-list ul li .klnac-list-item.item2 { background: url(../images/main/klnac-list-item-bg2.png) no-repeat center center/cover; }
#section2 .layout .content .klnac-list ul li .klnac-list-item.item3 { background: url(../images/main/klnac-list-item-bg3.png) no-repeat center center/cover; }
#section2 .layout .content .klnac-list ul li .klnac-list-item:before { content:""; display: block; position: absolute; top:0; left:0; width:100%; height: 100%;  background: linear-gradient(170deg, rgba(39, 59, 125, 0.80) 28.94%, rgba(71, 107, 227, 0.80) 121.81%); backdrop-filter: blur(10px); visibility: hidden; opacity: 0; transition: all .5s; }
#section2 .layout .content .klnac-list ul li .klnac-list-item:hover:before { opacity: 1; visibility: visible; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-value { position: relative; margin-bottom: 1.6rem; color: #B4C6FF; font-size: 2rem; font-weight: 600; line-height: 140%; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-title { position: relative; color: #fff; font-size: 4rem; font-family: "KIMM"; font-weight: 700; line-height: 140%; margin-bottom:.8rem; } 
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-desc { position: relative; color: #FFF;font-size: 1.8rem;font-weight: 400;line-height: 160%; opacity: 0; visibility: hidden;  }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more { position: relative; display: flex; align-items: center; gap: 1rem; margin-top: auto; }  
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>i { color: #fff; font-size: 2rem; visibility: hidden; opacity: 0; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>em { display: flex; justify-content: center; align-items: center; width: 4.8rem; height: 4.8rem; background: #F2F3F9; border-radius: 50%; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>em>i { font-size: 2rem; transition: all .5s; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>span { color: #FFF; font-size: 1.8rem; font-weight: 600; font-style: normal; line-height: 140%; visibility: hidden; opacity: 0; }
@media (max-width: 1024px) {
#section2 { padding: 20rem 0; }
#section2 .layout .title strong { font-size: 6rem; }
#section2 .layout .title strong img { width: 30.5rem !important; }
#section2 .layout .title p { font-size: 2.4rem; }
#section2 .layout .content { margin-top: 4.8rem; }
#section2 .layout .content .klnac-list ul { gap: 2.4rem; }
#section2 .layout .content .klnac-list ul li { width: calc(33.333% - 1.6rem); }
#section2 .layout .content .klnac-list ul li .klnac-list-item { padding: 4rem; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-value { margin-bottom: 1.2rem; font-size: 1.6rem; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-title { font-size: 3rem; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>span { font-size: 1.6rem; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>em { width: 4.2rem; height: 4.2rem; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>em>i { font-size: 1.8rem; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>i { font-size: 1.8rem; }
}
@media (min-width:767px){
#section2 .layout .content .klnac-list ul li .klnac-list-item:hover { transform: translateY(-2.4rem); }  
#section2 .layout .content .klnac-list ul li .klnac-list-item:hover .klnac-list-item-desc { opacity: .8; visibility: visible; }
#section2 .layout .content .klnac-list ul li .klnac-list-item:hover .klnac-list-item-more>span { visibility: visible; opacity: 1; }
#section2 .layout .content .klnac-list ul li .klnac-list-item:hover .klnac-list-item-more>em { background: rgba(0, 0, 0, 0.40); }
#section2 .layout .content .klnac-list ul li .klnac-list-item:hover .klnac-list-item-more>em>i { color:#fff; transform: rotate(180deg); }
#section2 .layout .content .klnac-list ul li .klnac-list-item:hover .klnac-list-item-more>i { visibility: visible; opacity: 1; }
}
@media (max-width: 767px) {
#section2 { padding: 18rem 0; }
#section2 .layout .title strong img { width: 26.5rem !important; }
#section2 .layout .title p { font-size: 2.2rem; }
#section2 .layout .content .klnac-list ul { flex-direction: column; }
#section2 .layout .content .klnac-list ul li { width: 100%; height: 28rem; }
#section2 .layout .content .klnac-list ul li:nth-child(even) { transform: none; }
#section2 .layout .content .klnac-list ul li .klnac-list-item { padding: 2.4rem; }
#section2 .layout .content .klnac-list ul li .klnac-list-item:before { display: none; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-title { font-size: 2.8rem; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-desc { opacity: 1; visibility: visible; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>span { opacity: 1; visibility: visible; }
#section2 .layout .content .klnac-list ul li .klnac-list-item .klnac-list-item-more>i { opacity: 1; visibility: visible; }
}
@media (max-width: 640px) {
#section2 { padding: 14rem 0; }
#section2 .layout .title strong { display: block; font-size: 4rem; }
#section2 .layout .title strong img { width: 20rem !important; }
#section2 .layout .title strong br { display: block; }
#section2 .layout .title p { font-size: 2rem; }
}

/* section3 */
#section3 { display: flex; justify-content: center; align-items: center; height: 100vh; }
#section3:before { content: ""; position: absolute; top: 0; left: 0; z-index: 3; display: block; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%); }
#section3 .layout { position: relative; z-index: 3; }
#section3 .bg-video { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
#section3 .klnac-history-scroll { height: 100%; }
#section3 .klnac-history-scroll .klnac-history-wrapper { position: relative; display: flex; flex-wrap: wrap; gap:10rem 0; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-logo { display: block; width:24.4rem;  position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item { width:50%; display: flex; flex-direction: column; align-items: center; gap:1.3rem; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item span { color: #FFF;text-align: center;font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: 160%; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item strong { color: #FFF;font-family: "KIMM";font-size: 10rem;font-style: normal;font-weight: 700;line-height: normal; display: flex;flex-direction: column; gap:1.3rem; text-align: center; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item strong small { color: #B4C6FF;text-align: center;font-size: 2rem;font-weight: 600;line-height: 160%; }
@media (max-width:1024px){
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-logo { width:22.4rem; } 
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item strong small { font-size:1.8rem; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item strong { font-size:8rem; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item span { font-size:1.6rem; }
}
@media (max-width:767px){
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-logo { width:18.4rem; } 
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item strong small { font-size:1.7rem; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item strong { font-size:6rem; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item span { font-size:1.5rem; }
}
@media (max-width:640px){
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-logo { width:16.4rem; } 
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item strong small { font-size:1.6rem; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item strong { font-size:4rem; }
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-item span { font-size:1.4rem; }
}
@media (max-width:640px){
#section3 .klnac-history-scroll .klnac-history-wrapper .klnac-history-logo { width:14.4rem; }  
}

/* section4 */
#section4 { padding: 8rem 0; background: #F8F9FB; }
#section4 .klnac-visual { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4rem; padding: 14.9rem 4rem 18.9rem 4rem; border-radius: 2.4rem; overflow: hidden; }
#section4 .klnac-visual .bg { position: absolute; top: 50%; left: 50%; display: block; width: 100%; height: 100%; background: url(../images/main/klnac-visual-bg.png) no-repeat center center/cover; border-radius: 2.4rem; transform: translate(-50%, -50%); overflow: hidden; }
#section4 .klnac-visual small { position: relative; color: #B4C6FF; font-size: 2rem; font-family: "Pretendard"; font-weight: 600; font-style: normal; line-height: 160%; }
#section4 .klnac-visual span { position: relative; display: block; text-align: center; }
#section4 .klnac-visual span br { display: none; }
#section4 .klnac-visual span:first-of-type { color: #FFF; font-size: 6.4rem; font-family: KIMM; font-weight: 700; font-style: normal; line-height: normal; }
#section4 .klnac-visual span:last-of-type { color: #FFF; font-size: 8rem; font-family: "KIMM"; font-weight: 700; font-style: normal; line-height: normal; }
#section4 .klnac-visual span:last-of-type em { color: #B4C6FF; }
#section4 .klnac-visual p { position: relative; color: #FFF; font-size: 2.8rem; font-weight: 600; font-style: normal; line-height: 160%; text-align: center; }
@media (max-width: 1024px) {
#section4 .klnac-visual { gap: 3rem; padding: 14rem 4rem 18rem 4rem; }
#section4 .klnac-visual small { font-size: 1.8rem; line-height: 150%; }
#section4 .klnac-visual span br { display: block; }
#section4 .klnac-visual span:first-of-type { font-size: 6rem; }
#section4 .klnac-visual span:last-of-type { font-size: 7.6rem; }
#section4 .klnac-visual p { font-size: 2.4rem; line-height: 150%; }
}
@media (max-width: 767px) {
#section4 .klnac-visual { gap: 3rem; padding: 13rem 4rem 17rem 4rem; }
#section4 .klnac-visual small { font-size: 1.7rem; line-height: 145%; }
#section4 .klnac-visual span:first-of-type { font-size: 5rem; }
#section4 .klnac-visual span:last-of-type { font-size: 6.6rem; }
#section4 .klnac-visual p { font-size: 2rem; line-height: 145%; }
}
@media (max-width: 640px) {
#section4 .klnac-visual { gap: 2rem; padding: 12rem 2.8rem 16rem 2.8rem; }
#section4 .klnac-visual small { font-size: 1.6rem; line-height: 140%; }
#section4 .klnac-visual span:first-of-type { font-size: 4rem; }
#section4 .klnac-visual span:last-of-type { font-size: 5.6rem; }
#section4 .klnac-visual p { font-size: 1.8rem; line-height: 140%; }
}
@media (max-width:480px){
#section4 .klnac-visual span:first-of-type { font-size: 3.2rem; line-height: 4rem; }
#section4 .klnac-visual span:last-of-type { font-size:4rem; line-height: 4.8rem; }
}

/* section5 */
#section5 { padding: 18rem 0 12rem 0; background: url(../images/main/section5-bg.png) no-repeat center center/cover; }
#section5 .layout { max-width:1600px; }
#section5 .klnac-greeting { display: flex; gap: 8rem; }
#section5 .klnac-greeting .img { flex-shrink: 0; width: 38.3rem; height:fit-content; border-radius: 2.4rem; overflow: hidden; }
#section5 .klnac-greeting .content { position: relative; width: 100%; padding-top: 3.4rem; padding-right: 40rem; }
#section5 .klnac-greeting .content strong { display: block; margin-bottom: 4rem; color: #222; font-size: 4rem; font-family: "KIMM"; font-weight: 700; font-style: normal; line-height: 140%; letter-spacing: -0.04rem; }
#section5 .klnac-greeting .content strong span { color: #243B7A; background: #E9EEF6; }
#section5 .klnac-greeting .content p { margin-top: 2.4rem; color: #222; font-size: 1.8rem; font-weight: 400; font-style: normal; line-height: 160%; }
#section5 .klnac-greeting .content p:first-of-type { margin-top: 0; }
#section5 .klnac-greeting .content p.name { display: flex; align-items: center; gap: 1.6rem; margin-top: 4rem; }
#section5 .klnac-greeting .content p.name img { flex-shrink: 0; }
#section5 .klnac-greeting .more { position: absolute; top: 0; right: 8rem; display: flex; width: 100%; max-width: 30rem; padding: 1.9rem 0; } 
#section5 .klnac-greeting .more .more-img { position: absolute; top: 0; left: 50%; width: calc(100% - 3.2rem); transform: translateX(-50%); }
#section5 .klnac-greeting .more-title { display: flex; justify-content: center; gap: 1rem; width: 100%; padding: 14rem 2.4rem 1.6rem 2.4rem; color: #FEFEFF; text-align: center; background: linear-gradient(90deg, #273B7D 0%, #476BE3 100%); border-radius: 1.6rem; }
#section5 .klnac-greeting .more-title span { font-size: 1.8rem; font-weight: 600; font-style: normal; line-height: 140%; }
#section5 .klnac-greeting .more-title i { color: #FEFEFF; font-size: 2rem; }
@media (max-width: 1400px) {
#section5 { padding: 16rem 0 10rem 0; }
#section5 .klnac-greeting .content { padding-right: 32rem; } 
#section5 .klnac-greeting .more { right: 0; }
}
@media (max-width: 1024px) {
#section5 { padding: 14rem 0 8rem 0; }
#section5 .klnac-greeting { gap: 6rem; }
#section5 .klnac-greeting .content { padding: 0; }
#section5 .klnac-greeting .content strong { margin-bottom: 3rem; font-size: 3.4rem; line-height: 130%; }
#section5 .klnac-greeting .content p { margin-top: 2rem; font-size: 1.7rem; line-height: 155%; }
#section5 .klnac-greeting .content p br { display: none; }
#section5 .klnac-greeting .content p.name { margin-top: 3rem; }
#section5 .klnac-greeting .more { position: relative; top: auto; right: auto; margin-top: 4rem; margin-left: auto; }
}
@media (max-width: 767px) {
#section5 { padding: 12rem 0 6rem 0; } 
#section5 .klnac-greeting { gap: 4rem; }
#section5 .klnac-greeting .content strong br { display: none; }
}
@media (max-width: 640px) {
#section5 .klnac-greeting { flex-direction: column; }
#section5 .klnac-greeting .img { width: 100%; }
#section5 .klnac-greeting .more { margin: 4rem auto 0; }
}

/* card */
#section6 { padding: 17rem 0 14.4rem 0; background: url(../images/main/section6-bg.png) no-repeat center center/cover; overflow: hidden; }
#section6 .card .card-title { display: flex; flex-direction: column; gap: 2.4rem; margin-bottom: 4.8rem; } 
#section6 .card .card-title span { color: #FFF; font-size: 2rem; font-family: "Bebas Neue"; font-weight: 400; line-height: normal; letter-spacing: 0.64rem; } 
#section6 .card .card-title strong { color: #FFF; font-size: 4rem; font-family: "KIMM"; font-weight: 700; line-height: 5.6rem; } 
#section6 .card .card-title strong em { font-weight: 700; } 
#section6 .card .card-content { position: relative; display: flex; gap: 6.4rem; } 
#section6 .card .card-content .card-main-slide { width: 100%; max-width: 946px; margin: 0; } 
#section6 .card .card-content .card-main-slide .card-list-slide a .card-list-item-img { position: relative; border-radius: 2rem; aspect-ratio: 946 / 534; overflow: hidden; }
#section6 .card .card-content .card-main-slide .card-list-slide a .card-list-item-img:before { content: ""; position: absolute; top: 50%; left: 50%; width: 4.9rem; height: 5.6rem; background: url(../images/main/polygon-img.png) no-repeat center center/cover; transform: translate(-50%, -50%); } 
#section6 .card .card-content .card-main-slide .card-list-slide a .card-list-item-img img { width: 100%; }
#section6 .card .card-content .card-content-desc { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 60rem; } 
#section6 .card .card-content .card-content-desc .card-content-desc-title { display: flex; flex-direction: column; gap: 1.6rem; padding: 4.8rem 0 2rem 0; min-height:24.4rem; } 
#section6 .card .card-content .card-content-desc .card-content-desc-title span { color: #B4C6FF; font-size: 1.8rem; font-family: "Pretendard"; font-weight: 700; line-height: 2.52rem; } 
#section6 .card .card-content .card-content-desc .card-content-desc-title strong { min-height: 8.959rem; color: #FFF; font-size: 2.8rem; font-family: "Pretendard"; font-weight: 700; line-height: 4.48rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls { display: flex; flex-shrink: 0; align-items: center; gap: 2.4rem; margin-top: auto; color: #fff; } 
#section6 .card .card-content .card-content-desc .card-list-controls button { width: 5.6rem; height: 5.6rem; border: 1px solid rgba(255, 255, 255, 0.40); border-radius: 50%; } 
#section6 .card .card-content .card-content-desc .card-list-controls button i { color: #FFF; font-size: 2rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls-pagenation { position: relative; display: flex; justify-content: space-between; align-items: center; width: 11.5rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls-pagenation:before { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 4.8rem; height: 1px; background: #FFF; opacity: .4; transform: translate(-50%, -50%); } 
#section6 .card .card-content .card-content-desc .card-list-controls-pagenation span { display: block; min-width: 1.3rem; color: #FFF; font-size: 2rem; font-family: "Bebas Neue"; font-weight: 400; } 
#section6 .card .card-content .card-content-desc .card-list-controls-pagenation span.current { text-align: right; }
#section6 .card .card-content .card-content-desc .card-list-controls-pagenation span.total { text-align: left; }
#section6 .card .card-content .card-content-desc .card-sub-slide { position: relative; width: calc(100% + (100vw - 1400px) / 2); height: 16rem; margin-top: auto; margin-right: calc(-1 * ((100vw - 1400px) / 2)); margin-left: 0; } 
#section6 .card .card-content .card-content-desc .card-sub-slide div { height: 100%; } 
#section6 .card .card-content .card-content-desc .card-sub-slide .card-list-slide-item { flex-shrink: 0; width: 28.4rem !important; } 
#section6 .card .card-content .card-content-desc .card-sub-slide .card-list-slide-item .card-list-item-img { position: relative; width: 100%; height: auto; border-radius: 2rem; aspect-ratio: 284 / 160; overflow: hidden; } 
#section6 .card .card-content .card-content-desc .card-sub-slide .card-list-slide-item .card-list-item-img:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #000; opacity: .4; } 
#section6 .card .card-content .card-content-desc .card-sub-slide .card-list-slide-item .card-list-item-img img { width: 100%; height: 100%; object-fit: cover; } 
@media (max-width: 1400px) { 
#section6 .card .card-content .card-content-desc .card-sub-slide { width: 100%; margin-right: 0; } 
} 
@media (max-width: 1024px) { 
#section6 .card .card-content { flex-direction: column; }
#section6 .card .card-content .card-main-slide { max-width: 100%; } 
#section6 .card .card-content .card-content-desc { max-width: 100%; } 
#section6 .card .card-content .card-content-desc .card-content-desc-title { align-items: center; } 
#section6 .card .card-content .card-content-desc .card-content-desc-title strong { min-height: auto; } 
#section6 .card .card-content .card-content-desc .card-list-controls { margin: 0 auto; } 
#section6 .card .card-content .card-content-desc .card-sub-slide { display: none; } 
} 
@media (max-width: 640px) { 
#section6 .card .card-title { align-items: center; gap: 2.4rem; margin-bottom: 4.79rem; } 
#section6 .card .card-title span { font-size: 1.6rem; letter-spacing: 0.512rem; } 
#section6 .card .card-title strong { font-size: 2.9rem; line-height: 4.48rem; } 
#section6 .card .card-content { gap: 2.19rem; } 
#section6 .card .card-content .card-content-desc { max-width: 100%; } 
#section6 .card .card-content .card-content-desc .card-content-desc-title { align-items: center; padding: 0; min-height: 0; } 
#section6 .card .card-content .card-content-desc .card-content-desc-title span { font-size: 1.6rem; line-height: 2.24rem; } 
#section6 .card .card-content .card-content-desc .card-content-desc-title strong { font-size: 1.6rem; line-height: 2.56rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls { justify-content: center; margin-top: 3.2rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls button { width: 4.8rem; height: 4.8rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls button i { font-size: 1.8rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls-pagenation { width: 8rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls-pagenation:before { width: 3.2rem; } 
#section6 .card .card-content .card-content-desc .card-list-controls-pagenation span { font-size: 1.6rem; } 
} 

/* section7 */
#section7 { padding: 22rem 0 0 0; background: url(../images/main/section6-bg.png) no-repeat center center/cover; }
#section7 .gallery { position: relative; display: flex; flex-direction: column; gap: 8rem; padding-bottom:10rem; }
#section7 .gallery:before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: 100vw; height: 19.6rem; background: linear-gradient(180deg, rgba(0, 18, 31, 0.00) 0%, #00121F 100%); }
#section7 .gallery .title strong { display: block; color: #FFF; font-size: 8rem; font-family: KIMM; font-weight: 700; font-style: normal; line-height: normal; text-align: center; }
#section7 .gallery .list { position: relative; height: 85rem; overflow-y: auto; overscroll-behavior: contain; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y; }
#section7 .gallery .list::-webkit-scrollbar { display: none; }
#section7 .gallery .list-wrap { width: 100%; }
#section7 .gallery .list-wrap figure { float: left; margin-bottom: 2.4rem; }
#section7 .gallery .list-wrap figure:first-of-type { padding-top: 6rem; }
#section7 .gallery .list-wrap figure:nth-of-type(4) { padding-top: 6rem; }
#section7 .gallery .list-wrap figure img { display: block; width: 100%; border-radius: 2rem; }
@media (min-width: 1024px) {
#section7 { padding: 20rem 0 0 0; }
#section7 .gallery { gap: 7rem; }
#section7 .gallery .title strong { font-size: 7rem; }
#section7 .gallery .list-wrap figure { width: calc((100% - (2.4rem * 3)) / 4 - 0.5px); }
}
@media (max-width: 1023px) {
#section7 { padding: 18rem 0 0 0; }
#section7 .gallery { gap: 6rem; }
#section7 .gallery .title strong { font-size: 6rem; }
#section7 .gallery .list-wrap figure { width: calc((100% - (2.4rem * 2)) / 3 - 0.5px); padding: 0 !important; }
}
@media (max-width: 767px) {
#section7 { padding: 16rem 0 0 0; }
#section7 .gallery { gap: 5rem; }
#section7 .gallery .title strong { font-size: 5rem; }
#section7 .gallery .list-wrap figure { width: calc((100% - 2.4rem) / 2 - 1px); }
}
@media (max-width: 640px) {
#section7 { padding: 14rem 0 0 0; }
#section7 .gallery { gap: 4rem; }
#section7 .gallery .title strong { font-size: 4rem; }
}

/* history modal */
.history-modal { position: fixed; top: 0; left: 0; z-index: 4; display: none; width: 100%; height: 100%; }
.history-modal.on { display: block; }
.history-modal .history-modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
.history-modal .history-modal-container { position: absolute; bottom: -100%; left: 50%; display: flex; width: 100%; max-width: 160rem; height: calc(100% - 14rem); border-radius: 4.8rem 4.8rem 0 0; transform: translateX(-50%); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); overflow: hidden; }
.history-modal .history-modal-container.on { bottom: 0; }
.history-modal .history-modal-container .title { min-width: 46rem; padding: 10rem; }
.history-modal .history-modal-container#klnac-modal1 .title { background: url(../images/main/klnac-modal1-bg.png) no-repeat center center/cover; }
.history-modal .history-modal-container#klnac-modal2 .title { background: url(../images/main/klnac-modal2-bg.png) no-repeat center center/cover; }
.history-modal .history-modal-container#klnac-modal3 .title { background: url(../images/main/klnac-modal3-bg.png) no-repeat center center/cover; }
.history-modal .history-modal-container#klnac-modal4 .title { background: url(../images/main/klnac-modal4-bg.png) no-repeat center center/cover; }
.history-modal .history-modal-container .title em { display: block; margin-bottom: 1.6rem; color: #FFF; font-size: 4rem; font-weight: 600; line-height: 140%; opacity: .4; }
.history-modal .history-modal-container .title strong { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.6rem; }
.history-modal .history-modal-container .title strong small { color: #D5D9E5; font-size: 1.8rem; font-weight: 600; font-style: normal; line-height: 140%; }
.history-modal .history-modal-container .title strong span { color: #FFF; font-size: 4.8rem; font-family: KIMM; font-weight: 700; font-style: normal; line-height: 140%; }
.history-modal .history-modal-container .title p { color: #FFF; font-size: 2rem; font-weight: 400; font-style: normal; line-height: 160%; }
.history-modal .history-modal-container .btn-close { position: absolute; top: 4.8rem; right: 4.8rem; }
.history-modal .history-modal-container .btn-close i { color: #000; font-size: 4rem; }
.history-modal .history-modal-container .content { width: 100%; height: 100%; padding: 10rem 15.5rem; background: #fff; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.history-modal .history-modal-container .content::-webkit-scrollbar { display: none; } 
.history-modal .history-modal-container .content .klnac-history { position: relative; }
.history-modal .history-modal-container .content .klnac-history .line { position: absolute; top: 0; left: 17.6rem; width: 2px; height: 100%; background: #E0E0E0; }
.history-modal .history-modal-container .content .klnac-history .line .line-percent { position: absolute; top: 0; left: 0; width: 100%; background: #56B9FF; transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.history-modal .history-modal-container .content .klnac-history>ul { display: flex; flex-direction: column; gap: 8.7rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li { display: flex; }
.history-modal .history-modal-container .content .klnac-history>ul>li .year { position: relative; flex-shrink: 0; width: 17.6rem; color: #222; font-size: 4rem; font-family: KIMM; font-weight: 700; line-height: 120%; letter-spacing: -0.04rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .year:before { content: ""; position: absolute; top: 1rem; left: 16.5rem; width: 2.4rem; height: 2.4rem; background: rgba(0, 0, 0, 0.05); border-radius: 50%; }
.history-modal .history-modal-container .content .klnac-history>ul>li .year:after { content: ""; position: absolute; top: 1.7rem; left: 17.2rem; width: .9rem; height: .9rem; background: #BDBDBD; border-radius: 50%; }
.history-modal .history-modal-container .content .klnac-history>ul>li.active .year:after { background: #222; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info { padding-left: 6.8rem; } 
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list { display: flex; flex-direction: column; gap: 3.2rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li { position: relative; padding-left: 2.2rem; color: #222; font-size: 1.8rem; font-weight: 400; line-height: 160%; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li:before { content: ""; position: absolute; top: 1.1rem; left: 0; width: .6rem; height: .6rem; background: #D9D9D9; border-radius: 50%; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li strong { display: block; color: #273B7D; font-size: 1.8rem; font-weight: 500; line-height: 160%; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li p { margin-top: .8rem; color: #757575; font-size: 1.6rem; font-weight: 400; font-style: normal; line-height: 150%; display: flex; gap:.8rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li .img { display: flex; gap: 1.6rem; margin-top: 1.6rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li .img div { border-radius: 1.2rem; overflow: hidden; width:100%; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li .img div img { width:100%; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li p .value { padding:0 .6rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; border-radius: .6rem; width:fit-content; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li p .value.value1 { background: #EDF1FF; color:#273B7D; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list li p .value.value2 { background: #EDF7FF; color:#154C74; }
@media (max-width: 1024px) {
.history-modal .history-modal-container .title { min-width: 40rem; padding: 6rem; }
.history-modal .history-modal-container .btn-close i { font-size: 3.2rem; }
.history-modal .history-modal-container .content { padding: 6rem 10rem 6rem 6rem; }
.history-modal .history-modal-container .content .klnac-history .line { left: 13.6rem; }
.history-modal .history-modal-container .content .klnac-history>ul { gap: 6rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .year { width: 13.6rem; font-size: 3.2rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .year:before { left: 12.6rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .year:after { left: 13.3rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info { padding-left: 3.8rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list { gap: 2.8rem; }
}
@media (max-width: 767px) {
.history-modal .history-modal-container .title { min-width: 32rem; padding: 4.8rem; } 
.history-modal .history-modal-container .title em { margin-bottom: 1.2rem; font-size: 3.6rem; }
.history-modal .history-modal-container .title strong { gap: .5rem; margin-bottom: 1.2rem; }
.history-modal .history-modal-container .title strong small { font-size: 1.6rem; }
.history-modal .history-modal-container .title strong span { font-size: 4.2rem; }
.history-modal .history-modal-container .title p { font-size: 1.8rem; }
.history-modal .history-modal-container .btn-close { top: 4rem; right: 4rem; }
.history-modal .history-modal-container .btn-close img { width: 2.8rem !important; }
.history-modal .history-modal-container .content { padding: 4.8rem 8.8rem 4.8rem 4.8rem; }
.history-modal .history-modal-container .content .klnac-history>ul { gap: 4rem; }
.history-modal .history-modal-container .content .klnac-history>ul>li .info .text-list { gap: 2rem; }
}
@media (max-width: 640px) {
.history-modal .history-modal-container { flex-direction: column; min-width: 0; height: 100%; border-radius: 0; }
.history-modal .history-modal-container .title { padding: 4rem; }
.history-modal .history-modal-container .title p br { display: none; }
.history-modal .history-modal-container .btn-close i { color: #fff; }
.history-modal .history-modal-container .content { padding: 4rem; }
}

/* video modal */
.video-modal { position: fixed; top: 0; left: 0; z-index: 5; display: none; justify-content: center; align-items: center; width: 100%; height: 100%; } 
.video-modal.on { display: flex; } 
.video-modal .modal-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .6; } 
.video-modal .modal { position: relative; width: 100%; max-width: 117rem; padding: 6.4rem; } 
.video-modal .modal:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(10px); } 
.video-modal .modal:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 4.4rem; height: 4.4rem; border-color: #fff; border-style: solid; border-width: 1px 0 0 1px; } 
.video-modal .modal .modal-content { text-align: center; } 
.video-modal .modal .modal-content iframe { width: 100%; border: none; aspect-ratio: 16 / 9; } 
.video-modal .modal .modal-close { position: absolute; top: -3.1rem; right: -3.1rem; width: 6.4rem; height: 6.4rem; background: #476BE3; border-radius: 50%; } 
.video-modal .modal .modal-close i { color: #fff; font-size: 2.4rem; } 
@media (max-width: 640px) { 
.video-modal { padding: 0 2rem; } 
.video-modal .modal { padding: 2rem; } 
.video-modal .modal:after { width: 2.4rem; height: 2.4rem; } 
.video-modal .modal .modal-close { top: auto; right: auto; bottom: -6rem; left: 50%; width: 4.8rem; height: 4.8rem; transform: translate(-50%); } 
}