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

.km-main input,textarea,select{font-family: 'pretendard'}
.km-main{font-family: 'pretendard';position: relative;}
body{margin: 0 !important;}

@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;
}

/* 주요 컬러 
.common{background-color: #095b98;}
.dark{background-color: #3f4756;}
.silver{background-color: #a3acbd;}
*/
.common{background-color: #7030a0;}
.dark{background-color: #333f50;}
.silver{background-color: #fff6ff;}

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;}
}

.km-main section{padding: 128px 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%;}

.menu{gap: 32px;display: flex;}
.menu-item{padding: 24px 0;position: relative;}
.menu-item>a{font-size: 20px;font-weight: 500;color: #000;}
.sub-menu{position: absolute;max-height: 0;left: 50%;overflow: hidden;transform: translateX(-50%);top: 100%;width: auto;white-space: nowrap;background-color: #fff;min-width: 100%;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.15);border: 1px solid #ccc;border-top: 0;}
.menu-item:hover .sub-menu{max-height: auto;}
.sub-menu>a{display: flex;align-items: center;padding: 10px 16px;font-size: 16px;font-weight: 300;transition: 0.2s;}
.sub-menu>a:hover{background-color: #f1f1f1;}

.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: #7030a0;}
.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: url('../img/keramedix_banner_1.png');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);}

.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);}
.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-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: #7030a0;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: 2px solid #7030a0;border-radius: 100px;padding: 0 32px;font-size: 18px;font-weight: 500;color: #7030a0;transition: 0.3s;gap: 10px;}
.btn-wrap>button svg{width: 24px;height: 24px;fill: #7030a0;transition: 0.3s;}
.btn-wrap>button:hover svg{fill: #fff;}
.btn-wrap>button:hover{background-color: #7030a0;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: #7030a0;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: #7030a0;}
.swiper-button-next:hover>svg{fill: #7030a0;}

.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: #7030a0;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;}
.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: #7030a0 !important;font-weight: 300;}

.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{width: 100%;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;}
  .protocol-item:hover span{color: #121212 !important;}
  .protocol-item:hover{background-color: rgba(255, 255, 255, 0.2);}
  .protocol-item>p{transition: 0.3s;}
  .protocol-item:hover>p{color: #7030a0;}

  .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: #7030a0;}
.news-item:hover .view-more svg{fill: #7030a0;}

.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;}
@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) {
    .chart-wrap{gap: 32px;}
    .view-more{font-size: 14px;}
    .view-more svg{width: 16px;height: 16px;}
    .main-banner{padding: 0 32px;}
    section{padding: 96px 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{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;}

}

@media (max-width: 993px) {
    .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%;}
    .km-img:last-of-type .kmi{width: 100% !important;}
    .km-img{width: 100%;}
    .kmi{aspect-ratio: none;height: 200px !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);}
}
@media (max-width: 840px) {
    .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}
}
@media (max-width: 768px) {
    
    .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;}
}

@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) {
    .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;}
    .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;}
}