a{text-decoration: none;color: #000;}
*{box-sizing: border-box;margin: 0;padding: 0;font-family: 'pretendard';color: #222;line-height: 1.4;}
ul,ol,li{margin: 0;padding: 0;}
li{list-style: none;}
button{background-color: transparent;border: 0;display: flex;color: #000;font-family: 'pretendard';outline: none;cursor: pointer;;}

input,textarea,select{font-family: 'pretendard'}
input:focus,
select:focus,
textarea:focus{outline: none;}
select{appearance: none;width: 100%;background-image: url('../img/chevron-down.png');background-repeat: no-repeat;background-size: 14px;background-position: calc(100% - 10px) center;cursor: pointer;color: #666;background-color: #fff;}
select,input{border: 1px solid #d9d9d9;border-radius: 12px;width: 100%;height: 42px;background-color: #fff;padding: 0 10px;font-size: 16px;color: #343434;transition: 0.3s;box-shadow: inset 0 0 16px rgba(43, 144, 83, 0.0);}
select::placeholder,
input::placeholder{color: #666;}
textarea{border: 1px solid #d9d9d9;border-radius: 12px;width: 100%;min-height: 150px;padding: 10px;}
input:focus,
select:focus,
textarea:focus{
    outline: none;
    border: 1px solid #095b98;
    box-shadow: inset 0 0 16px rgba(9, 90, 152, 0.15);
}

body{font-family: 'pretendard';position: relative;}

header{position: sticky;top: 0;left: 0;width: 100%;z-index: 2;}
.sub-menu{position: fixed;top: 70px;padding-left: 32px;padding-right: 32px;top: 70px;left: 0;width: 100%;background-color: rgba(255, 255, 255, 1);backdrop-filter: blur(5px);box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.15);overflow: hidden;display: none;}
.sub-menu-inner{width: 100%;max-width: 1400px;margin: 0 auto;padding: 32px 0;display: flex;flex-direction: column;align-items: flex-end;gap: 16px;}
.sub-menu-wrap{display: flex;gap: 32px;}
.sub-menu-wrap>a{display: flex;gap: 2.5px;transition: 0.3s;align-items: center;border-bottom: 1px solid transparent;}
.sub-menu-wrap>a:hover{color: #095b98;border-color: #095b98;}
.sub-menu-wrap>a>svg{width: 18px;height: 18px;fill: #095b98;transition: 0.3s;}
.sub-menu-wrap>a:hover>svg{transform: translateX(2.5px);}
.sub-menu p{text-align: right;}
@font-face {
    font-family: 'pretendard';
    font-weight: 300;
    src: url('../assets/font/Pretendard-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'pretendard';
    font-weight: 400;
    src: url('../assets/font/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'pretendard';
    font-weight: 500;
    src: url('../assets/font/Pretendard-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'pretendard';
    font-weight: 600;
    src: url('../assets/font/Pretendard-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'monserrat';
    font-weight: 300;
    src: url('../assets/font/Montserrat-Light.woff') format('woff2');
}
@font-face {
    font-family: 'monserrat';
    font-weight: 400;
        src: url('../assets/font/Montserrat-Regular.woff') format('woff2');
}
@font-face {
    font-family: 'monserrat';
    font-weight: 500;
        src: url('../assets/font/Montserrat-Medium.woff') format('woff2');
}
@font-face {
    font-family: 'monserrat';
    font-weight: 600;
        src: url('../assets/font/Montserrat-SemiBold.woff') format('woff2');
}

.toggle-button {
    display: none;
    margin-left: 10px;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 8px; /* 라인 사이의 간격을 8px로 조정 */
    position: relative;
}

.line {
    width: 24px;
    height: 2px;
    border-radius: 100px;
    background-color: #121212;
    transition: all 0.3s ease;
}




header.dark .line{background-color: #fff;}
header.dark:hover .line{background-color: #121212;}
/* 'X' 모양으로 변환 */
.toggle-button.active .line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.toggle-button.active .line:nth-child(2) {
    opacity: 0;
}

.toggle-button.active .line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
@media (max-width: 993px){
    .toggle-button{display: flex;}
}

header{padding: 0px 32px;width: 100%;background-color: rgba(255, 255, 255, 0.8);backdrop-filter: blur(5px);display: flex;align-items: center;}
nav{max-width: 1400px;width: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
.logo{height: 32px;cursor: pointer;}
.logo>img{display: block;height: 100%;}

section{padding: 96px 32px;}
.section-title{padding: 96px 32px;}
.section-5{padding: 64px;}
.section-5-last{padding-bottom: 128px;}
.section-4{margin-top: -230px;}
.lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
.section-3-2{padding-bottom: 0;}

.section-1{padding: 0px 0 0px 0;}


.section-inner{max-width: 1400px;margin: 0 auto;width: 100%;}

.mo-nav{position: fixed;right: 0;top: 70px;background-color: #fff;width: 100%;max-width: 480px;height: 100%;z-index: 2;box-shadow: -16px 16px 32px rgba(0, 0, 0, 0.15);display: none;}
.mo-menu{border-bottom: 1px solid #f1f1f1;transition: 0.3s;cursor: pointer;padding: 10px 16px;transition: 0.3s;}
.mo-menu:focus{background-color: #f9f9f9;}
.mo-menu>a{display: flex;align-items: center;justify-content: space-between;font-size: 18px;font-weight: 400;transition: 0.3s;}
.mo-menu>a>svg{width: 16px;height: 16px;fill: #343434;transition: 0.3s;}
.mo-menu.on>a>svg{transform: rotate(180deg);}
.mo-menu:focus>a{color: #095b98;}
.mo-menu-sub.on{background-color: #f9f9f9;}
.mo-menu-sub.on>a{color: #095b98;}
.mo-sub-menu{display: flex;flex-direction: column;gap: 16px;font-size: 16px;font-weight: 300;display: none;}
.mo-sub-menu>a:focus{color: #095b98;}
.mo-sub-menu>a{display: block;margin-bottom: 16px;transition: 0.3s;}
.mo-sub-menu>a:last-of-type{margin-bottom: 0;}
.mo-sub-menu>a:first-of-type{margin-top: 16px;}

.menu{gap: 32px;display: flex;}
.menu-item{padding: 0px 0;position: relative;height: 70px;display: flex;align-items: center;}
.menu-item>a{color: #000;position: relative;transition: 0.3s;}
.menu-item>a::after{display: block;content: '';position: absolute;bottom: -5px;left: 0;z-index: -1;width: 0%;transition: 0.3s;height: 2px;background-color: #095b98;}
.menu-item>a:hover::after{width: 100%;}
.menu-item>a:hover{color: #095b98;}
.menu-item:nth-of-type(3)>a{color: #4538af;}
.menu-item:nth-of-type(3)>a::after{height: calc(100% + 5px);background-color: #4538af !important;left: -5px;bottom: auto;top: 50%;transform: translateY(-50%);width: 0;}
.menu-item:nth-of-type(3)>a:hover::after{width: calc(100% + 10px);}
.menu-item:nth-of-type(3)>a:hover{color: #fff;}

.main-title{font-size: 64px;color: #fff;font-weight: 300;}
.mt-1{display: flex;gap: 16px;align-items: stretch;}
.mt-2{padding-left: calc(76px + 16px);}


.section-1{}


.title-km{font-size: 96px;}
.title-64{font-size: 64px;}
.title-46{font-size: 46px;}
.title-32{font-size: 32px;}
.title-24{font-size: 24px;}
.txt-20{font-size: 20px;}
.weight-300{font-weight: 300;}
.weight-500{font-weight: 500;}
.weight-600{font-weight: 600;}
.txt-color{color: #095b98;}
.txt-white{color: #fff;}
.en{font-family: 'monserrat' !important;}

.main-banner{width: 100%;aspect-ratio: 16/6;display: flex;align-items: center;justify-content: left;background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../img/main_banner.jpg');background-size: 100%;;background-repeat: no-repeat;}
.section-1{text-align: center;}


.section-1 .section-inner{display: flex;flex-direction: column;gap: 10px;}


.section-2{display: flex;flex-direction: column;gap: 16px;}
.section-2 .section-inner{display: flex;gap: 16px;}
.about-txt{flex-shrink: 0;width: calc(50% - 8px);display: flex;flex-direction: column;gap: 32px;}

.km-img-wrap{display: flex;gap: 16px;width: 100%;}
.km-img{width: calc(50% - 8px);}
.kmi{overflow: hidden;position: relative;cursor: pointer;border-radius: 0px;box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.1);border-radius: 10px;}
.km-img:first-of-type{min-height: 0;flex-shrink: 0;}
.km-img:first-of-type .kmi{aspect-ratio: 4/4;}
.km-img img{display: block;width: 100%;height: 100%;object-fit: cover;transition: 0.3s;filter: brightness(0.8);}
.km-img:first-of-type>img{}
.km-img:last-of-type{display: flex;flex-direction: column;gap: 16px;height: 100%;}
.km-img:last-of-type .kmi{height: calc(50% - 16px);aspect-ratio: 4/2;object-fit: cover;}
.km-img-first .kmi{aspect-ratio: 4/4;;}

.km-img-keve{height: auto !important;flex: 1;}
.km-img-keve .kmi{height: 100% !important;aspect-ratio: inherit !important;}
.km-img-keve .kmi>img{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

.km-img-txt{position: absolute;left: 0;bottom: 0;width: 100%;padding: 64px 16px 16px 16px;background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));transition: 0.3s;display: flex;flex-direction: column;}
.km-img-txt>span{color: #fff;font-weight: 300;font-size: 16px;}
.km-img-txt>p{color: #fff;font-weight: 400;position: relative;}
.km-img-txt>p>svg{position: absolute;right: 10px;bottom: 0;width: 52px;height: 52px;fill: #fff;transition: 0.3s;opacity: 0;}
/*
.kmi:hover .km-img-txt>p>svg{opacity: 1;right: 0;}
.kmi:hover>img{filter: brightness(0.6);transform: scale(1.05);}
*/

.section-3{}
.vision-wrap{display: flex;gap: 128px;}
.vision-item{width: 100%;display: flex;flex-direction: column;gap: 16px;}
.vision-item>p{gap: 5px;display: flex;}
.vision-item>p>span{padding-bottom: 5px;position: relative;}
.vision-item>p>span::after{content: '';display: block;width: 100%;height: 5px;background-color: #095b98;position: absolute;left: 0;bottom: 0;}
.vision-item>span{color: #343434;}
.vision-img{width: 100%;overflow: hidden;aspect-ratio: 320/87;}
.vision-img>img{display: block;width: 100%;height: 100%;object-fit: cover;}

.section-title{text-align: center;overflow: hidden;position: relative;}
.section-title .section-inner{position: relative;z-index: 1;}
.section-title>img{position: absolute;left: 0;top: 0;width: 100%;opacity: 0.1;height: 100%;object-fit: cover;}
.section-title span{font-weight: 300;}

.section-3-1{position: relative;}
.section-3-1>img{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: block;width: 100%;height: 100%;object-fit: cover;opacity: 0.5;}
.section-3-1::after{position: absolute;display: block;content: '';height: 100%;width: 100%;left: 0;top: 0;background: linear-gradient(to right, rgba(255, 255, 255, 1), transparent);}
.section-3-1 .section-inner{display: flex;justify-content: space-between;align-items: stretch;position: relative;z-index: 1;gap: 64px;}
.section-3-1 p{margin-bottom: 32px;}
.section-3-1 .about-txt{width: 100%;}
.about-img{width: calc(50% - 8px);overflow: hidden;position: relative;border-radius: 0px;box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.1);flex: 1;}
.about-img>img{display: block;width: 100%;height: 100%;object-fit: cover;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

.history-num{width: 100%;position: relative;}
.history-num>p{line-height: 65%;opacity: 0.1;transition: 1s 0.3s;}
section.on .history-num>p{opacity: 1;}
.history-num>span{position: absolute;right: 100%;bottom: 0;line-height: 70%;transform: translateX(100%);transition: 1.5s;white-space: nowrap;}
section.on .history-num>span{right: 0;transform: translateX(0);}
.btn-wrap{display: flex;flex-shrink: 0;}
.btn-wrap>button{display: flex;align-items: center;justify-content: center;height: 52px;border: 1px solid #095b98;border-radius: 100px;padding: 0 32px;font-size: 18px;font-weight: 500;color: #095b98;transition: 0.3s;gap: 10px;}
.btn-wrap>button svg{width: 24px;height: 24px;fill: #095b98;transition: 0.3s;}
.btn-wrap>button:hover svg{fill: #fff;}
.btn-wrap>button:hover{background-color: #095b98;color: #fff;}


.product-item{display: flex;gap: 32px;align-items: flex-end;width: 100%;justify-content: right;}
.swiper-slide-active .product-item{}
.product-img{width: 100%;max-width: 640px;flex-shrink: 0;aspect-ratio: 4/4;border-radius: 10px;overflow: hidden;box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.1);opacity: 0;filter: blur(5px);transition: 0.5s;}
.product-img>img{display: block;width: 100%;height: 100%;object-fit: cover;}
.swiper-slide-active .product-img{opacity: 1;filter: blur(0);}
.product-txt .btn-wrap{margin-top: 64px;}
.product-txt{position: relative}

.product-txt>p,
.product-txt>span,
.product-txt .btn-wrap{opacity: 0;transition: 0.5s;filter: blur(2.5px);}

.swiper-slide-active .product-txt>p,
.swiper-slide-active .product-txt>span,
.swiper-slide-active .product-txt .btn-wrap{opacity: 1;filter: blur(0px);}

.swiper-button-prev,
.swiper-button-next{position: static !important;left: auto !important;top: auto !important;bottom: auto !important;right: auto !important;padding: 0 !important;margin: 0 !important;}
.swiper-button-prev::after,
.swiper-button-next::after{display: none;}
.swiper-button-prev,
.swiper-button-next{display: flex;align-items: center;justify-content: center;border-radius: 100%;border: 1px solid #d9d9d9;width: 52px !important;height: 52px !important;flex-shrink: 0;transition: 0.3s;}
.swiper-button-prev:hover,
.swiper-button-next:hover{border-color: #095b98;background-color: rgba(111, 48, 160, 0.1);}
.swiper-btn{display: flex;position: absolute;right: 0;bottom: 0;gap: 16px;}
.swiper-btn svg{width: 36px !important;height: 36px !important;fill: #343434;transition: 0.3s;}
.swiper-button-prev:hover>svg{fill: #095b98;}
.swiper-button-next:hover>svg{fill: #095b98;}

.section-5{position: relative;}
.history-item{display: flex;gap: 32px;}
.history-item>p{line-height: 0.9;position: sticky;top: 50%;left: 0;transform: translateY(16px);opacity: 0;filter: blur(5px);transition: 0.3s;}
section.on .history-item>p{transform: translateY(0);filter: blur(0);opacity: 1;}

.history-sub-wrap{display: flex;flex-direction: column;gap: 16px;}
.history-sub{display: flex;align-items: flex-start;transform: translateY(10px);filter: blur(2.5px);opacity: 0;}
.history-sub>span{display: block;width: 40px;}
.history-sub>span>strong{font-weight: 500;}
.history-sub>p{color: #343434;}

.history-sub:nth-of-type(1){transition: 0.3s 0.0s;}
.history-sub:nth-of-type(2){transition: 0.3s 0.2s;}
.history-sub:nth-of-type(3){transition: 0.3s 0.4s;}
.history-sub:nth-of-type(4){transition: 0.3s 0.6s;}
.history-sub:nth-of-type(5){transition: 0.3s 0.8s;}
.history-sub:nth-of-type(6){transition: 0.3s 1s;}

section.on .history-sub{transform: translateY(0);filter: blur(0);opacity: 1;}

.lm-category-wrap{width: 100%;display: flex;justify-content: center;}
.lm-category{display: flex;width: 100%;max-width: 993px;position: relative;padding: 10px;border-radius: 100px;background-color: #f1f1f1;}

.km-main{position: relative;}
.gold-line{position: absolute;right: 33px;top: 0;height: 100%;width: 100px;display: flex;justify-content: space-between;pointer-events: none;}
.gold-line div{display: block;width: 2px;height: 100%;background-color: #C8A96A;}

.lm-category>button{width: 100%;display: flex;align-items: center;justify-content: center;padding: 10px;font-size: 18px;border-bottom: 1px solid transparent;color: #666;background: linear-gradient(to top, rgba(255, 214, 132, 0.0), transparent 70%);transition: 0.3s;border-radius: 100px;}
.lm-category>button.on{color: #095b98;background-color: #fff;}

.kml-title{text-align: center;max-width: 640px;width: 100%;margin: 0 auto;gap: 16px;display: flex;flex-direction: column;}
.kml-title>p br{display: none;}

.section-6{padding-top: 0;}

.kml-title{margin-bottom: 64px;}
.kml-img-wrap{width: 100%;display: flex;gap: 64px;justify-content: center;}
.kml-img-item{width: 100%;display: flex;flex-direction: column;max-width: 424px;transform: translateY(16px);filter: blur(5px);opacity: 0;}
.kml-img-item:nth-of-type(1){transition: 0.3s 0.0s;}
.kml-img-item:nth-of-type(2){transition: 0.3s 0.2s;}
.kml-img-item:nth-of-type(3){transition: 0.3s 0.4s;}
section.on .kml-img-item{transform: translateY(0px);filter: blur(0px);opacity: 1;}
.kml-img-item>p{margin-bottom: 5px;}
.kml-img-item>span{font-size: 18px;font-weight: 300;}
.kml-img{width: 100%;aspect-ratio: 4/3;overflow: hidden;border-radius: 10px;margin-bottom: 32px;}
.kml-img>img{width: 100%;height: 100%;display: block;object-fit: cover;}

.kml-tag{width: 100%;display: flex;gap: 16px;justify-content: center;flex-wrap: wrap;}
.kml-tag>span{font-size: 16px;background-color: #f1f1f1;border-radius: 100px;padding: 5px 16px;color: #095b98 !important;font-weight: 500;}

.section-7{border-radius: 256px 0 0 0;border-top: 2px solid #C8A96A;box-shadow: 0 -128px 128px rgba(255, 214, 132, 0.1);}
.section-7 .section-inner{display: flex;align-items: flex-end;justify-content: space-between;}



.b-a-guide{margin-bottom: 5px;display: flex;width: 100%;align-items: center;justify-content: space-between;}
.b-a-guide>span{font-size: 14px;display: flex;align-items: center;gap: 5px;color: #666 !important;font-weight: 300;line-height: 1;}
.b-a-guide>span>svg{width: 20px;height: 20px;fill: #666;}


.b-a-wrap{width: 100%;max-width: 640px;}


.comparison-container {
    aspect-ratio: 4/3;border-radius: 10px;overflow: hidden;
    width: 100%;height: 100%;
    position: relative;
    overflow: hidden;
    user-select: none; /* 드래그 시 텍스트 선택 방지 */
    
  }
  
  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  
  .after-img {
    background-image: url('../img/after.png'); /* 에프터 이미지 경로 */
    z-index: 1;
  }
  /* 기본 상태: 비포가 전체를 덮음 */
.before-img {
    background-image: url('../img/before.png');
    z-index: 2;
    clip-path: inset(0 0% 0 0); /* 0%를 잘라내므로 전체 다 보임 */
    transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 가속도 */
  }
  
  .handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%; /* 맨 우측 대기 */
    width: 2px;
    background: white;
    z-index: 3;
    cursor: ew-resize;
    transform: translateX(-50%);
    transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* 이미지와 속도 맞춤 */
    box-shadow: 8px 32px 16px rgba(0, 0, 0, 0.5);
  }
  .handle::after{display: block;content: '';width: 4px;border: 1px solid #ccc;background-color: #fff;border-radius: 100px;height: 64px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
  
  /* 드래그 시작 시 transition을 꺼주기 위한 클래스 */
  .handle.is-dragging,
  .handle.is-dragging ~ .before-img {
    transition: none !important;
  }
  
  /* 감지용 클래스 .on 이 붙었을 때 50%로 이동 */
  .section-7.on .before-img {
    clip-path: inset(0 50% 0 0);
  }
  
  .section-7.on .handle {
    left: 50%;
  }


  .protocol-wrap{margin-bottom: 128px;display: flex;flex-direction: column;width: 100%;gap: 32px;}
  .protocol-wrap:last-of-type{margin-bottom: 0;}
  .protocol-wrap>p{text-align: center;}
  .protocol-item-wrap{display: flex;gap: 32px;}
  .protocol-item{background-color: #fff;border: 1px solid #f1f1f1;padding: 16px;border-radius: 16px;display: flex;flex-direction: column;gap: 10px;transition: 0.3s;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.05);backdrop-filter: blur(5px);}
  .protocol-item span{color: #343434 !important;font-weight: 300;font-size: 16px;transition: 0.3s;list-style: circle;}
  .protocol-item ul{padding-left: 16px;display: flex;flex-direction: column;gap: 5px;}
  .protocol-item ul li{list-style: disc;color: #f9f9f9;font-size: 14px;font-weight: 300;word-break: keep-all;}
  .protocol-item:hover span{color: #121212 !important;}
  .protocol-item:hover{background-color: rgba(255, 255, 255, 0.2);}
  .protocol-item p{transition: 0.3s;font-size: 18px;}
  .protocol-item:hover>p{color: #095b98;}

  .news-wrap{width: 100%;display: flex;gap: 32px;flex-wrap: wrap;align-content: flex-start;min-height: 0;height: auto;}
  .news-item{transition: 0.3s;border-radius: 16px;max-width: 480px;width: calc(33.333% - 21.333px);min-height: 0;height: auto;border: 1px solid #d9d9d9;overflow: hidden;cursor: pointer;box-shadow: 0 32px 64px rgba(0, 0, 0, 0.0);display: flex;flex-direction: column;backdrop-filter: blur(5px);}
  .news-item:hover{transform: translateY(-10px);box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);}
  .news-img{width: 100%;aspect-ratio: 4/3;background-color: rgba(255, 255, 255, 1);display: flex;align-items: center;justify-content: center;min-height: 0;}
  .news-img>img{display: block;width: 100%;height: 100%;object-fit: cover;}
  .news-txt{padding: 16px;transition: 0.3s;display: flex;flex-direction: column;width: 100%;gap: 0px;justify-content: space-between;flex: 1;}
  .news-title p{margin-bottom: 0px;transition: 0.3s;}
  .news-title span{font-size: 16px;font-weight: 300;color: #343434;}
  .news-title span>svg{transition: 0.3s;width: 20px;height: 20px;fill: #343434;}

  .section-9{border-bottom: 2px solid #C8A96A;}

  .obs-chart{width: 100%;max-width: 993px;margin: 0 auto;}
  .obs-chart>img{display: block;width: 100%;}
.pc-non{display: none;}

.map-area{width: 100%;overflow: hidden;border-radius: 16px;margin-bottom: 32px;box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.1);border: 1px solid #f1f1f1;}
.map-area>img{display: block;width: 100%;}
.view-more{display: flex;justify-content: space-between;padding-top: 10px;margin-top: 10px;border-top: 1px solid #d9d9d9;font-size: 16px;color: #666;align-items: center;line-height: 1;}
.view-more>span{display: flex;align-items: center;gap: 5px;line-height: 1;color: #666;transition: 0.3s;}
.view-more svg{width: 20px;height: 20px;fill: #666;transition: 0.3s;}
.view-more p{color: #666;line-height: 1;font-weight: 300;}
.news-item:hover .view-more>span{color: #095b98;}
.news-item:hover .view-more svg{fill: #095b98;}

.chart-wrap{width: 100%;margin: 0 auto;display: flex;gap: 128px;}
.chart-item{width: 100%;display: flex;flex-direction: column;gap: 32px;}
.chart-item p{text-align: center;}
.chart-area{padding: 16px;border-radius: 16px;background-color: #fff;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.1);border: 1px solid #f1f1f1;width: 100%;}
.chart-item:last-of-type .chart-area{box-shadow: 0px 16px 32px rgba(111, 48, 160, 0.25);}
.chart-area canvas{width: 100% !important;aspect-ratio: 4/2 !important;height: auto !important;}

.inner-title{margin-bottom: 64px;}
.score-wrap{gap: 0px;display: flex;gap: 0px;flex-wrap: wrap;position: relative;border-radius: 16px;background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/score.jpg');background-size: 100%;;background-repeat: no-repeat;}


.score-item{width: 50%;text-align: center;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 64px 0;border-right: 1px solid rgba(255, 255, 255, 0.4);border-bottom: 1px solid rgba(255, 255, 255, 0.4);transition: 0.3s;}
.score-item:nth-of-type(1){}
.score-item:nth-of-type(2){border-right: 0;}
.score-item:nth-of-type(3){border-bottom: 0;}
.score-item:nth-of-type(4){border-bottom: 0;border-right: 0;}
.score-item>p{color: #f1f1f1 !important;transition: 0.3s;}
.score-item>span{transition: 0.3s;}
.score-item>span strong{color: #fff;transition: 0.3s;}
.score-item:hover{background-color: rgba(255, 255, 255, 0.8);}
.score-item:hover>p{color: #3f4756 !important;}
.score-item:hover>span{color: #3f4756 !important;}
.score-item:hover>span>strong{color: #095b98 !important;}

/*
.score-item:nth-of-type(2)>span strong{color: #7466b2;}
.score-item:nth-of-type(3)>span strong{color: #c26bb7;}
.score-item:nth-of-type(4)>span strong{color: #e36fb1;}
*/
.score-item>p{color: #3f4756;}
.score-line{position: absolute;width: 100%;height: 100%;display: flex;flex-wrap: wrap;pointer-events: none;}
/*
.score-line::after{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;border-radius: 100%;display: block;content: '';background-color: rgba(255, 255, 255, 0.4)}
.score-line::before{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 24px;height: 24px;border-radius: 100%;background-color: transparent;display: block;content: '';}
*/


.solution-wrap{display: flex;flex-wrap: wrap;gap: 32px;margin: 0 auto;max-width: 993px;}
.solution-item{width: calc(50% - 16px);padding: 16px;border-radius: 16px;background-color: #fff;border: 1px solid #ccc;display: flex;flex-direction: column;gap: 10px;transform: translateY(16px);filter: blur(5px);opacity: 0;}
.solution-item span{color: #3f4756;}
section.on .solution-item{transform: translateY(0px);filter: blur(0px);opacity: 1;}
.solution-item:nth-of-type(1){transition: 0.3s 0.0s;}
.solution-item:nth-of-type(2){transition: 0.3s 0.2s;}
.solution-item:nth-of-type(3){transition: 0.3s 0.4s;}
.solution-item:nth-of-type(4){transition: 0.3s 0.6s;}

.si-title{display: flex;gap: 16px;align-items: center;}
.si-title>svg{background-color: rgba(9, 90, 152, 0.1);border-radius: 10px;padding: 16px;width: 64px;height: 64px;fill: #095b98;}

.si-sub{display: flex;gap: 10px;flex-wrap: wrap;width: 100%;}
.si-sub>span{padding: 5px 10px;border-radius: 100px;background-color: #f1f1f1;color: #095b98;}

.roadmap-wrap{display: flex;gap: 0px;justify-content: center;position: relative;}
.roadmap-wrap>img{position: absolute;left: 0;bottom: 0;display: block;width: 100%;opacity: 0.2;pointer-events: none;}
.roadmap-item{display: flex;flex-direction: column;justify-content: flex-end;padding: 0 16px;border-right: 1px dashed rgba(255, 255, 255, 0.2);}
.roadmap-item:last-of-type{border-right: 0;}
.roadmap-item>p{text-align: center;padding-top: 16px;border-top: 1px solid rgba(255, 255, 255, 0.4);position: relative;}
.roadmap-item>p>svg{position: absolute;right: 0px;top: 50%;transform: translateY(-50%);display: none;width: 20px;height: 20px;transition: 0.3s;fill: #fff;}
.roadmap-item.active>p>svg{transform: translateY(-50%) rotate(180deg);}
.roadmap-item.active{background-color: rgba(255, 255, 255, 0.075);}
.roadmap-sub{display: flex;flex-direction: column;gap: 16px;justify-content: flex-end;padding-bottom: 16px;max-width: 320px;width: 100%;}
.roadmap-sub-wrap{display: flex;gap: 16px;}
.roadmap-item .protocol-item{transform: translateY(10px);filter: blur(5px);opacity: 0;}
section.on .roadmap-item .protocol-item{transform: translateY(0px);filter: blur(0px);opacity: 1;}
.roadmap-item .protocol-item:nth-of-type(1){transition: 0.3s 0.2s;}
.roadmap-item .protocol-item:nth-of-type(2){transition: 0.3s 0.4s;}
.roadmap-item .protocol-item:nth-of-type(3){transition: 0.3s 0.6s;}
.roadmap-item .protocol-item:nth-of-type(4){transition: 0.3s 0.8s;}
.roadmap-item .protocol-item:nth-of-type(5){transition: 0.3s 1s;}
.roadmap-item .protocol-item:nth-of-type(6){transition: 0.3s 1.2s;}
/* 주요 컬러 */
.common{background-color: #095b98;}
.dark{background-color: #3f4756;}
.silver{background-color: #a3acbd;}

.contact-form{max-width: 480px;padding: 32px 16px 16px 16px;background-color: #fff;border-radius: 16px;width: 100%;display: flex;flex-direction: column;gap: 16px;}
.contact-item{display: flex;flex-direction: column;gap: 5px;}
.contact-item>p{font-size: 16px;font-weight: 400;color: #343434;}
.contact-input{display: flex;gap: 10px;}

footer{background-color: #3f4756;border-top: 1px solid rgba(255, 255, 255, 0.4);padding: 64px 32px 32px 32px;}
.footer-inner{width: 100%;max-width: 1400px;margin: 0 auto;display: flex;flex-direction: column;gap: 32px;}
.footer-inner .logo>img{filter: invert(100%) brightness(2);}
.footer-inner>p{color: #d9d9d9;font-weight: 300;}

.footer-item-wrap{display: flex;gap: 64px;}
.footer-item{display: flex;flex-direction: column;gap: 5px;}
.footer-item>p{margin-bottom: 11px;}
.footer-item span{color: #d9d9d9;font-weight: 300;}
.footer-item strong{font-weight: 300;color: #f1f1f1;}


@media (max-width: 1400px) {
    .main-banner{padding: 0 32px;}
    section{padding: 128px 32px;}
    .section-title{padding: 96px 32px;}
    .section-5{padding: 64px 32px;}
    .section-5-last{padding-bottom: 128px;}
    .section-4{margin-top: -210px;}
    .lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
    .title-km{font-size: 86px;}
    .title-64{font-size: 56px;}
    .title-46{font-size: 42px;}
    .title-32{font-size: 28px;}
    .title-24{font-size: 22px;}
    .txt-20{font-size: 18px;}
    .gold-line div{opacity: 0.5;}
    .kml-img-wrap{gap: 32px;}
    .b-a-wrap{max-width: 560px;}
    .history-sub>span{width: 35px;}
}

@media (max-width: 1200px) {
    .inner-title{margin-bottom: 32px;}
    .chart-wrap{gap: 32px;}
    .view-more{font-size: 14px;}
    .view-more svg{width: 16px;height: 16px;}
    .main-banner{padding: 0 32px;}
    section{padding: 64px 32px;}
    .section-title{padding: 64px 32px;}
    .section-5{padding-top: 64px;padding-bottom: 0;}
    .section-5-last{padding-bottom: 96px;}
    .section-4{margin-top: -230px;}
    .lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
    .title-km{font-size: 82px;}
    .title-64{font-size: 56px;}
    .title-46{font-size: 42px;}
    .title-32{font-size: 28px;}
    .title-24{font-size: 22px;}
    .txt-20{font-size: 16px;}
    .product-img{max-width: 540px;}
    .product-txt .btn-wrap{margin-top: 32px;}
    .btn-wrap>button{height: 46px;padding: 0 24px;font-size: 16px;padding-top: 2.5px;}
    .swiper-button-prev, .swiper-button-next{width: 46px !important;height: 46px !important;}
    .swiper-btn svg{width: 28px !important;height: 28px !important;}
    .vision-wrap{gap: 96px;}
    .km-img-txt>span{font-size: 14px;}
    .km-img-txt>p>svg{width: 42px;height: 42px;}
    .section-4{margin-top: -170px;}
    .lm-category>button{font-size: 16px;}
    .kml-title{margin-bottom: 32px;}
    .kml-img{margin-bottom: 16px;}
    .kml-tag{gap: 10px;}
    .kml-tag>span{font-size: 14px;}
    .kml-img-item>span{font-size: 15px;}
    .kml-img-item>p{margin-bottom: 2.5px;}
    .protocol-item-wrap{gap: 16px}

    .protocol-item-wrap{flex-wrap: wrap;justify-content: center;}
    .protocol-wrap{margin-bottom: 96px;}
    .protocol-item span{font-size: 15px;}
    .protocol-item ul li{font-size: 14px;}
    .protocol-item p{font-size: 16px;}
    .protocol-item{width: calc(50% - 8px);}
    .b-a-wrap{max-width: 540px;}
    .news-title span{font-size: 14px;}
    .lm-category-wrap{padding-left: 16px;padding-right: 16px;}
    .history-sub>span{width: 30px;}
    .roadmap-item .protocol-item{width: 100%;}
    .footer-item>p{margin-bottom: 5px;}
    footer{padding-top: 32px;}
    .si-title>svg{width: 56px;height: 56px;padding: 12px;}
    .si-sub>span{font-size: 14px;}
}

@media (max-width: 993px) {
    .about-txt{gap: 10px;}
    .contact{text-align: center;margin-bottom: 22px;}
    .contact-form{margin: 0 auto;}
    .menu{display: none;}
    .mo-nav{display: block;top: 60px;border-top: 1px solid #f1f1f1;right: -100%;transition: 0.5s;}
    .mo-nav.on{right: 0;}
    .roadmap-item>p>svg{display: block;}
    .roadmap-item.active .protocol-item{background-color: #3f4756;transition: 0.3s !important;}
    .roadmap-section{padding-left: 0;padding-right: 0;}
    .roadmap-wrap{flex-wrap: wrap;gap: 0px;}
    .roadmap-wrap img{display: none;}
    .roadmap-sub{display: none;width: 100%;max-width: 100%;gap: 0px;justify-content: flex-start;overflow: hidden;}
    .roadmap-sub .protocol-item{margin-bottom: 10px;border-radius: 12px;transition: 0;transform: translateY(0) !important;filter: blur(0) !important;opacity: 1 !important;}
    .roadmap-sub .protocol-item:last-of-type{margin-bottom: 0;}
    .roadmap-sub-wrap{display: none;gap: 10px;overflow: hidden;}
    .roadmap-sub-wrap .roadmap-sub{display: block !important;}
    .roadmap-item{width: 100%;border: 0;padding: 0;transition: 0.3s;border-radius: 0px;border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;flex-direction: column-reverse;padding: 0 16px;}
    .roadmap-item:first-of-type{border-top: 1px solid rgba(255, 255, 255, 0.4);}
    .roadmap-item>p{border: 0;padding: 10px 0;transition: 0.3s;}
    .score-wrap{width: 100%;}
    .score-item{padding: 32px 0;}
    .solution-wrap{gap: 16px;}
    .solution-item{width: calc(50% - 8px);}
    .menu-item{padding: 16px 0}
    header{padding: 0 16px;height: 60px;background-color: #fff;z-index: 3;}
    .logo{height: 30px;}
    footer{padding: 32px 16px 16px 16px}
    .section-5{padding-left: 16px;padding-right: 16px;}
    .chart-wrap{gap: 16px;}
    .chart-item{gap: 16px;}
    .protocol-wrap{margin-bottom: 64px;}
    section{padding: 64px 16px;}
    .section-title{padding: 64px 16px;}
    .section-4{margin-top: -230px;}
    .lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
    .title-km{font-size: 76px;}
    .title-64{font-size: 56px;}
    .title-46{font-size: 42px;}
    .title-32{font-size: 28px;}
    .title-24{font-size: 22px;}
    .txt-20{font-size: 16px;}
    .section-2 .section-inner{flex-wrap: wrap;}
    .section-2 .about-txt{width: 100%;}
    .section-2-1 .section-inner{flex-direction: column-reverse;}
    .km-img:last-of-type .kmi{width: 100% !important;}
    .km-img{width: 100%;}
    .km-img-keve .kmi{aspect-ratio: none;height: 250px !important}
    .km-img:first-of-type .kmi{aspect-ratio: inherit;}
    .kml-title>p br{display: inherit;}
    .km-img-wrap{flex-wrap: wrap;}
    .km-img:last-of-type .kmi{height: auto;}
    .km-img-wrap .km-img:last-of-type{flex-direction: row;}
    .km-img-wrap .km-img:last-of-type .kmi{width: calc(50% - 8px) !important;}
    .vision-wrap{gap: 64px;}
    .section-4{margin-top: -64px;padding-top: 0px !important;}
    .product-img{max-width: 480px;}
    .main-banner{padding: 0 16px;}
    .gold-line{right: 17px;width: 60px;}
    .kml-img-wrap{gap: 16px;}
    .b-a-wrap{max-width: 420px;}
    .b-a-guide>span{font-size: 12px;}
    .b-a-guide>span>svg{width: 16px;height: 16px;}
    .news-wrap{gap: 16px;}
    .news-item{width: calc(50% - 8px);}
    .footer-inner{gap: 16px;}
}
@media (max-width: 840px) {
    .about-txt{gap: 16px;}
    .chart-wrap{flex-wrap: wrap;justify-content: center;}
    .chart-item{max-width: 480px;}
    section{padding: 64px 16px;}
    .section-title{padding: 52px 16px;text-align: center !important;}
    .lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
    .title-km{font-size: 66px;}
    .title-64{font-size: 46px;}
    .title-46{font-size: 36px;}
    .title-32{font-size: 28px;}
    .title-24{font-size: 20px;}
    .txt-20{font-size: 16px;}
    .vision-wrap{gap: 32px;flex-wrap: wrap;}
    .section-4{margin-top: 64px;}
    .product-item{flex-wrap: wrap;flex-direction: column-reverse;align-items: center;gap: 16px;}
    .product-img{max-width: 420px;}
    .product-txt{text-align: center;}
    .product-txt .btn-wrap{justify-content: right;}
    .swiper-btn{right: auto;left: 0;}
    .main-banner{aspect-ratio: 4/4;background-size: cover;background-position: 80% 0}
    .footer-item span{font-size: 14px;}
    .footer-inner>p{font-size: 14px;}
}
@media (max-width: 768px) {
    .footer-item-wrap{flex-wrap: wrap;gap: 16px;}
    .footer-item{width: 100%;}
    .protocol-wrap{gap: 16px;}
    .pc-non{display: inherit;}
    .lm-category-wrap{border-bottom: 0 !important;}
    .lm-category{flex-wrap: wrap !important;border-radius: 32px;}
    .kml-img-wrap{flex-wrap: wrap;gap: 32px;}
    .kml-img-item{width: calc(50% - 16px);}
    .lm-category-wrap{padding-top: 32px !important;margin-bottom: 32px !important;}
    .lm-category>button{height: 64px;}
    .section-7 .section-inner{flex-wrap: wrap;justify-content: center;gap: 32px;}
    .b-a-title{width: 100%;text-align: center;}
    .b-a-title br{display: none;}
    .history-item{gap: 16px;}
    .solution-item{width: 100%;}
    .si-title>svg{width: 36px;height: 36px;padding: 8px;}
    .si-title{gap: 10px;}
}

@media (max-width: 640px) {
    section{padding: 64px 16px;}

    

    .section-title{padding: 52px 16px;text-align: center !important;}
    .lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
    .title-km{font-size: 62px;}
    .title-64{font-size: 42px;}
    .title-46{font-size: 32px;}
    .title-32{font-size: 26px;}
    .title-24{font-size: 20px;}
    .txt-20{font-size: 15px;}

    .kml-img-item{width: calc(50% - 8px);}
    .kml-img-wrap{gap: 16px;}
    .history-sub>span{width: 30px;}
}

@media (max-width: 540px) {
    .mo-menu{padding: 16px;}
    .mo-menu>a{font-size: 16px;}
    .mo-sub-menu>a{font-size: 14px;}
    .roadmap-item>p>svg{width: 16px;height: 16px;}
    .roadmap-sub-wrap{flex-wrap: wrap;}
    .roadmap-sub-wrap .roadmap-sub:first-of-type{padding-bottom: 0;}
    .si-sub>span{font-size: 12px;padding: 3px 7.5px;}
    .solution-wrap{gap: 10px;}
    .about-txt{gap: 5px;}
    .chart-wrap{gap: 32px;}
    .protocol-wrap{margin-bottom: 32px;}
    section{padding: 32px 16px;}
    .section-title{padding: 32px 16px;text-align: center !important;}
    .section-5{padding-bottom: 0px !important;padding-top: 32px !important;}
    .lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
    .title-km{font-size: 56px;}
    .title-64{font-size: 36px;}
    .title-46{font-size: 28px;}
    .title-32{font-size: 24px;}
    .title-24{font-size: 18px;}
    .txt-20{font-size: 14px;}
    .kmi{height: 150px !important;}
    .km-img-wrap .km-img:last-of-type{flex-direction: column;}
    .km-img-wrap .km-img:last-of-type .kmi{width: 100% !important;}
    .section-2{gap: 10px;}
    .km-img-wrap{gap: 10px;}
    .km-img:last-of-type{gap: 10px;}
    .protocol-item-wrap{gap: 10px;}
    .map-area{margin-bottom: 16px;}
    .km-img-txt>p>svg{right: 0;width: 32px;height: 32px;;}
    .section-4{margin-top: 32px;}
    .btn-wrap>button{height: 42px;font-size: 15px;padding: 0 16px;}
    .swiper-button-prev, .swiper-button-next{width: 42px !important;height: 42px !important;}
    .vision-item>p>span::after{height: 3px;}
    .vision-img{aspect-ratio: 4/1.5;}
    .kml-tag>span{font-size: 12px;padding: 3px 10px;}
    .kml-title{gap: 10px;}
    .kml-img-item{width: 100%;max-width: 320px;text-align: center;}
    .kml-img-wrap{gap: 16px;}
    .kml-img{aspect-ratio: 4/2;}
    .lm-category>button{font-size: 14px;height: 52px;}
    .protocol-item{gap: 0px;}
    .kml-img-item>span{font-size: 14px;}
    .protocol-item span{font-size: 14px;}
    .protocol-item ul li{font-size: 13px;}
    .protocol-item p{font-size: 15px;}
    .news-item{width: 100%;}
    .history-sub>span{width: 25px;}
}

@media (max-width: 480px) {
    .history-item{flex-wrap: wrap;}
    .history-item>p{width: 100%;position: static;}
    .protocol-item{width: 100% !important;}
    .b-a-title br{display: inherit;}
}

@media (max-width: 420px) {
    section{padding: 32px 16px;}
    .section-title{padding: 32px 16px;text-align: center !important;}
    .section-5-last{padding-bottom: 32px;}
    .lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
    .title-km{font-size: 46px;white-space: wrap;word-break: break-all;}
    .title-64{font-size: 36px;}
    .title-46{font-size: 28px;}
    .title-32{font-size: 24px;}
    .title-24{font-size: 18px;}
    .txt-20{font-size: 14px;}
    .news-title span{font-size: 12px;}
    .view-more{font-size: 12px;}
    .view-more>span{gap: 2.5px;}
}

@media (max-width: 360px) {
    .view-more{margin-top: 5px;padding-top: 5px;}
    .news-item{border-radius: 10px;}
    .news-txt{padding: 10px;}
    .protocol-item{border-radius: 10px;padding: 10px;}
}

@media (max-width: 280px) {
    section{padding: 32px 16px;}
    .section-title{padding: 32px 16px;text-align: center !important;}
    .section-5-last{padding-bottom: 32px;}
    .lm-category-wrap{margin: 0px auto 64px auto;padding-top: 64px;}
    .title-km{font-size: 36px;white-space: wrap;word-break: break-all;}
    .title-64{font-size: 30px;}
    .title-46{font-size: 24px;}
    .title-32{font-size: 20px;}
    .title-24{font-size: 16px;}
    .txt-20{font-size: 14px;}
}