/* 서브탑 */
  
.sub-top {        
    height: 54vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.sub-top .bg-layer {
    width: 100%;
    height: 100%;
    background-size: cover;

    animation: zoom-in-effect 10s ease-out infinite alternate;
    
}
@keyframes zoom-in-effect {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.05); 
    }
    100% {
        transform: scale(1.0); 
    }
}
.sub-top .content-layer {
        position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}
.sub-top h2 {    
    color: #fff;
    font-family: var(--font-deco2);
    font-weight: lighter;
    font-size: 50px;    
}
.breadcrumb {
    color: #fff;font-size: 25px;
}
.breadcrumb a {
    color: #fff;
    font-family: var(--font-point);
    font-size: 18px;
    text-transform: uppercase;    
    padding: 0 5px;
}
.tabs {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tabs > li {
    width: 350px;
    text-align: center;
    }
.tabs li a {
    padding: 20px 0;
    text-decoration: none;
    color: #666;
    font-size: 24px;
    font-family: var(--font-deco);
    text-transform: uppercase;
}
.tabs li.active > a {
    font-weight: 600;
    color: #000;
    border-bottom: 5px solid #000;
    max-width: max-content;
    margin: 0 auto;
    font-family: var(--font-deco);
}

.tab-item { 
    position: relative; 
}
.tab-item > a {
    display: block;
    padding: 10px 30px;
    font-size: 18px;
    color: #333;
}
.tab-item.active > a {
    color: #0066AF;
    border-bottom: 2px solid #0066AF;
    font-weight: 600;
}
.tab-item .depth2 {
    position: absolute;
    top: 75px; 
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    left: 50%;
    width: 85%;
    padding: 20px 30px;
}
.tab-item:hover .depth2 {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.tab-item .depth2 li a {
    display: block;
    font-size: 20px;
    color: rgb(255 255 255 / 70%);
    text-align: center;
    transition: 0.2s;
}
.tab-item .depth2 li:hover a,
.tab-item .depth2 li.on a {
    color: #fff;
}


/* sub1_1 */
.sub1-1 {    padding-bottom: 300px !important;}
.sub1-1 .sub-intro {position: relative;     gap: 100px !important;}
.sub1-1 .sub-intro img.bg { 
    position: absolute;
    right: 0;
    bottom: -25%;
    z-index: -1;
    width: 89%;   
}
.sub1-1 .sub-intro img.logo {
    position: absolute;
    top: 90%;
    left: 160px;
}
.sub1-1 .sub-intro .txt-box .desc {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.sub1-1  .sub-intro .txt-box .desc {padding-top: 50px; padding-bottom: 0;}
.sub1-1 .sub-intro .txt-box .img {transform: translateX(-150px);}
.sub1-1 .sub-intro .txt-box .mark {
    position: absolute;
    right: 25%;}
.sub1-1 .sub-intro .txt-box .color {
    color: #00AAEB;
}
/* sub1_1 */

/* sub1_2 */
.sub1-2 {position: relative;}
.sub1-2 .history { 
    display: flex; 
    gap: 150px; 
    align-items: flex-start;
    position: sticky; 
    top: 30px; 
    height: 160vh; 
    box-sizing: border-box;
    overflow: hidden; 
    will-change: transform; 
}
.sub1-2 .history-wrap { 
    position: relative;
    width: 100%;
}
/* 왼쪽 이미지 박스 고정 */
.sub1-2 .history .img-box { 
    position: sticky; 
    width: 45%;
}
.sub1-2 .history .img-box img { width: 100%;};
.sub1-2 .history .img-box .move-img { 
    position: absolute; 
    left: -100px; 
    bottom: -35px; 
}
.sub1-2 .history .img-box .move-img {
        position: absolute;
    bottom: -30px;
    left: -150px;
    width: auto;
}
.sub1-2 .history .his-inner { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    height: 1500px;
    overflow: hidden; 
    width: 55%;
    padding-top: 50px;
}
.sub1-2 .history .his-inner .display-year { 
    font-size: 180px;
    color: #0066AF; 
    margin-bottom: 50px; 
    transition: 0.3s; 
    font-family: var(--font-deco2);
}
.sub1-2 .history .his-inner .txt-box .title { 
    font-size: 36px; 
    line-height: 55px; 
    font-weight: 400; 
}
.sub1-2 .history .his-inner .txt-box .desc {
    font-size: 22px;
    line-height: 34px;
     color: #4D4D4D; 
     padding-top: 30px;
 }
 .sub1-2 .history .his-inner .txt-box .title .bold,
 .sub1-2 .history .his-inner .txt-box .desc .bold {
    font-weight: 600;
 }
.history-timeline {
     margin-top: 50px; 
}
.sub1-2 .timeline-track { 
    display: flex; 
    gap: 0; 
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    padding-left: 201px;
}

.sub1-2 .timeline-item { 
    min-width: 500px; 
    position: relative; 
    transition: 0.3s;
 }
.sub1-2 .timeline-item .year-label { 
font-family: var(--font-deco2);
    font-size: 35px;
    font-weight: 500;
    color: #666666;
    padding-top: 30px;
    padding-bottom: 20px;
 }
.sub1-2 .timeline-item .bar { 
    border-top: 3px dashed #b2b2b2;
    position: relative; 
    margin-bottom: 20px; 
    width: 100%; 
}
.sub1-2 .timeline-item .bar::before { 
content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #fff;
    top: -3px;
    left: 5px;
    z-index: 9999;
    border-radius: 50%;
}
.sub1-2 .timeline-item .bar::after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: -8px; 
    width: 15px; 
    height: 15px; 
    background: #eee; 
    border-radius: 50%; 
    transition: 0.3s; 
}
.sub1-2 .timeline-item:last-child::before {
content: '';
    position: absolute;
    top: -25px;
    right: 0;
    width: 3px;
    height: 50px;
    background: #0066AF;
    z-index: 1;
}
.timeline-item:first-child::before {
    content: '';
        position: absolute;
    top: 0;
    left: -200px;
    width: 200px;
    height: 3px;
    background: #0066AF;
}
.timeline-item:first-child::after {
    content: '';
    position: absolute;
    top: -25px;
    left: -200px;
    width: 3px;
    height: 50px;
    background: #0066AF;
}
.sub1-2 .timeline-item.active .year-label {
     color: #333; 
    }

.sub1-2 .timeline-item.active .bar::after {
     background: #0066AF; 
     
    }
.sub1-2 .timeline-item.active .content {
     color: #333; 
    }

.sub1-2 .timeline-item .content {
     font-size: 15px;
      color: #666; 
     line-height: 20px; 
     transition: 0.3s; 
     display: flex;
    gap: 10px;
    padding-right: 100px;
    padding-bottom: 20px;
    }
 .sub1-2 .timeline-item.active .content .month {
        color: #0066AF;
    }
.sub1-2 .timeline-item .content .month {
    font-family: var(--font-point2);
    font-size: 25px;
    font-style: italic;
    transition: 0.3s; 
    width: 35px;
}
.sub1-2 .timeline-item .content p {padding-top: 3px;}
.sub1-2 .bg {
position: absolute;
    bottom: 150px;
    right: 100px;
    z-index: -1;
    opacity: 0.5;
}
/* sub1_2 */

/* sub1_3 */
.certificate.design .swiper-box {max-width: 800px !important;}
.certificate {
padding: 150px 0 100px;
position: relative;}
.certificate.awards,
.certificate.tradmark {background: #F2F2F2;}
.certificate .txt-box {max-width: 1600px;
    margin: 0 auto;}
.certificate .txt-box .title {font-size: 45px;
    font-weight: 400; color: #333333; text-transform: uppercase;}
.certificate .txt-box .desc {font-size: 23px; padding-top: 20px; color: #777777;}
 .certificate-swiper {
    position: relative;
    overflow: hidden;
}
 .certificate-swiper .slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 .certificate-swiper .slide img {
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.25));
    max-width: 100%;
}
 .certificate .swiper-box {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 100px;
}
.certificate  .navigation_wrapper,
.sub1-5-1  .navigation_wrapper {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    max-width: 1600px;
    z-index: 9;
}
.certificate  .certificate-swiper .slide p {
    text-align: center;
    margin-top: 30px;
    visibility: hidden;
    opacity: 0;
    font-size: 18px;
    line-height: 30px;
    color: #4D4D4D;
}
.certificate  .certificate-swiper .slide p span {font-weight: 600;}
.certificate  .certificate-swiper .swiper-slide-active p {
    visibility: visible;
    opacity: 1;
    transition: all 0.8s;
}
.sub1-5-1  .swiper-button-next,
.sub1-5-1  .swiper-button-prev,
.certificate  .swiper-button-next,
.certificate  .swiper-button-prev {
    background-image: none;
    top: 40%;
    z-index: 10;
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid #4d4d4d;
    border-radius: 50%;
    color: #4d4d4d;
}
.sub1-5-1 .swiper-button-next::after,
.sub1-5-1 .swiper-button-prev::after,
.certificate .swiper-button-next::after,
.certificate .swiper-button-prev::after {
    background-image: none;
    display: none;
}
.sub1-5-1 .swiper-3d .swiper-slide-shadow-left,
.sub1-5-1 .swiper-3d .swiper-slide-shadow-right,
.certificate .swiper-3d .swiper-slide-shadow-left,
.certificate .swiper-3d .swiper-slide-shadow-right {
    background-image: none;
}
/* sub1_3 */

/* sub1_4 */
.sub1-4 {
    position: relative;
    overflow-x: hidden; /* 가로 스크롤바 숨김 */
}

.sub1-4 .bg {
    position: absolute;
    bottom: 50px;
    right: 100px;
    z-index: -1;
}

.exhibitions {
    padding: 0 0 300px 160px;
    overflow: hidden;
    cursor: grab;
    
    /* [추가] 드래그 시 텍스트 선택 방지 (인식률 향상) */
    user-select: none; 
    -webkit-user-select: none;
    touch-action: pan-y; /* 모바일 대응 */
}

.exhibitions:active {
    cursor: grabbing; /* 클릭 시 쥐는 손모양 */
}

.exhibitions-sticky {
    /* position: sticky; 삭제 */
    /* top: 0; 삭제 */
    /* height: 100vh; 삭제 */
    position: relative;
    width: 100%;
}

.exhibitions .exhibitions-track {
    display: flex;
    width: max-content; /* 내용물만큼 길어지게 설정 */
   /* will-change는 JS에서 제어하므로 여기서 뺌 (성능 최적화) */
    pointer-events: none;
}

/* 이미지 트랙 */
.exhibitions .image-track {
    gap: 50px;
    margin-bottom: 50px;
    align-items: center;
}

.exhibitions .image-track .item {
    /* flex: 0 0 80vw; 고정 픽셀이 계산하기 편함 */
    width: 650px; 
    height: 400px;
    flex-shrink: 0; /* 찌그러짐 방지 */
    overflow: hidden;
}
.exhibitions .image-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease-in-out;
    -webkit-user-drag: none;
}

.exhibitions .image-track .item:hover img {
    transform: scale(1.1);
}

/* 텍스트 트랙 */
.exhibitions .text-track {
    align-items: flex-start;
    padding-left: 100px;
}

.exhibitions .text-track .item {
    width: 500px; /* 적절한 고정 너비 지정 */
    flex-shrink: 0;
    padding-right: 50px;
}

.exhibitions .text-track .item .year {
    font: var(--font-point2); /* 폰트 변수가 없다면 font-family로 변경 */
    font-style: italic;
    font-size: 45px;
    font-weight: 200;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 30px;
    position: relative;
    padding-left: 30px;
}

.exhibitions .text-track .item .year::before {
    content: '';
    position: absolute;
    background: #ccc;
    top: 50px;
    left: 0;
    width: 1px;
    height: 50px;
}

.exhibitions .text-track .item ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 30px;
}

.exhibitions .text-track .item ul li {
    display: flex;
    gap: 30px;
    align-items: flex-start; /* 텍스트 줄바꿈 시 정렬 유지 */
}

.exhibitions .text-track .item ul li .hat {
    font: var(--font-point2);
    font-style: italic;
    font-size: 30px;
    color: #808080;
    font-weight: 100;
    flex-shrink: 0; /* 날짜 안 줄어들게 */
}

.exhibitions .text-track .item ul li .desc {
    color: #000;
    font-size: 17px;
    letter-spacing: -0.5px;
    line-height: 1.4;
}

/* sub1_5 */
:root {
    --transition-speed: 0.55s;
    --card-gap: 20px;
    --bezier: cubic-bezier(.22, .61, .36, 1);
    --bg-dark: #001336;
    --bg-light: #f2f2f2;
}
.sub1-5 .card-grid {
    max-width: 1600px;
    margin: 0 auto;
    padding: 50px 0;
}
.sub1-5 .card-row {
    position: relative;
    display: flex;
    gap: var(--card-gap);
    height: 400px;
    margin-bottom: 20px;
}
.sub1-5 .card {
    flex: 1;
    position: relative;
    background: var(--bg-light);
    transition: z-index var(--transition-speed) step-end;
    z-index: 1;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 100%;
}
.sub1-5 .card.none {
    pointer-events: none;
}
.sub1-5 .card:hover {
    z-index: 10;
    transition: none;
}
.sub1-5 .card::after {
    content: '';
    position: absolute;
    top: 0;
    width: calc(200% + var(--card-gap));
    height: 100%;
    background: var(--bg-dark);
    z-index: 0;
    transform: scaleX(0);
    transition: transform var(--transition-speed) var(--bezier);
}
.sub1-5 .expand-right::after { left: 0; transform-origin: left; }
.sub1-5 .expand-left::after { right: 0; transform-origin: right; }
.sub1-5 .card:hover::after { transform: scaleX(1); }
.sub1-5 .card-content {
    position: relative;
    width: 100%;
    padding: 0 0 0 50px; 
    z-index: 2;
    transition: transform var(--transition-speed) var(--bezier);
    height: 100%;
}
.sub1-5 .card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    padding: 50px 0;
}
.sub1-5 .info-group {
    transition: transform var(--transition-speed) var(--bezier), color 0.3s ease 0.2s; 
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sub1-5 .info-group .desc {
    font-size: 15px;
    padding-top: 20px;
}
.sub1-5 .info-group .sub-title {font-size: 28px; letter-spacing: -1px;}
.sub1-5 .info-group .title {
    font-size: 35px;
    font-weight: 600;
    padding-top: 5px;
    position: relative;
}
.sub1-5 .card.blue .info-group .desc,
.sub1-5 .card.blue .info-group .sub-title,
.sub1-5 .card.blue .info-group .title {color: #fff;}
.sub1-5 .card:hover .info-group {
    transform: translateY(130px);
}
.sub1-5 .card-inner .info-group  .title .img {
    opacity: 0;
    margin-left: 5px;
    vertical-align: middle;
    transition: all 0.3s ease;
    position: absolute;
    bottom: 15px;
    left: 105%;
}
.sub1-5 .card:hover .info-group {
    color: #fff;
    transition: transform var(--transition-speed) var(--bezier), color 0.2s ease;
}
.sub1-5 .card:hover .info-group .title .img {opacity: 1;}
.sub1-5 .card .card-inner > .img {transition: all 0.3s ease;}
.sub1-5 .card:hover .card-inner > .img { opacity: 0;}
.sub1-5 .card:hover .info-group * {
    color: inherit;
}
.sub1-5 .big-title {
    position: absolute;
    top: 100px;
    left: 50px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform var(--transition-speed) var(--bezier), visibility 0.2s;
    transform: translateY(-50px);
    white-space: nowrap;
    font-size: 50px;
    color: rgb(255 255 255 / 50%);
}
.sub1-5 .card:hover .big-title {
    opacity: 1;
    visibility: visible;
    transform: translateY(-30px);
    transition: opacity 0.4s ease 0.2s, transform var(--transition-speed) var(--bezier);
}
.sub1-5 .card-image {
    position: absolute;
    bottom: 0;
    left: 100%;
    width: calc(100% + var(--card-gap));
    height: 100%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform var(--transition-speed) var(--bezier);
    overflow: visible; /* 🔥 중요 */
}
.sub1-5 .card-image img {
    width: 100%;
    transform: none;
    bottom: 0;
    position: absolute;
}
.sub1-5 .card:hover .card-image img {
    transform: scale(1); 
}
.sub1-5 .card:hover .card-image {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease 0.2s, transform var(--transition-speed) var(--bezier);
}
.sub1-5 .expand-right:hover .card-image {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.sub1-5 .expand-left:hover .card-content {transform: translateX(calc(-100% - var(--card-gap)));}
.sub1-5 .expand-left:hover .card-image {transform: translateX(-100%);}
.sub1-5 .card-row:first-child .card:nth-child(2) .card-image img {
    width: 80%;
    left: 20%;
}
.sub1-5 .card.blue .card-image img {
    object-fit: contain;
    width: 130%;
    left: -30%;
    bottom: 80px;
}
.sub1-5 .card.blue {background: #001336;}
/* sub1_5 */

/* sub1_5_1 */
.sub1-5-1 {padding-bottom: 0 !important; position: relative;}
.sub1-5-1 .bg {        
    position: absolute;
    right: 0;
    z-index: -1;
    width: 89%; 
    top: 10%;
    opacity: .5;}

.sub1-5-1 .title-box {padding: 150px 0 100px !important;}

.sub1-5-1 .process-tabs {
    display: flex;
    justify-content: center;
}
.sub1-5-1 .process-tab-list {
    display: flex;
}
.sub1-5-1 .process-tab {
    padding: 0 30px;
    border-right: 1px solid #B2B2B2;
}
.sub1-5-1 .process-tab:last-child {border-right: none;}
.sub1-5-1 .process-tab a {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    transition: color 0.3s ease;
}
.sub1-5-1 .process-tab.active a {color: #0075B8;     }
.sub1-5-1 .introduce {
    display: flex;
    align-items: center;
    padding: 150px 0;
    gap: 100px;
    justify-content: center;
  }
.sub1-5-1 .introduce .txt-box .title {
    font-size: 40px;
    line-height: 55px;
    font-weight: 500;
   }
.sub1-5-1 .introduce .txt-box .title .bold {font-weight: 700;}
.sub1-5-1 .introduce .txt-box .desc {
    line-height: 34px;
    font-size: 22px;
    padding-top: 30px;
   }
.sub1-5-1 .char {
    display: flex;
    justify-content: center;
    gap: 50px;
    max-width: 1600px;
    margin: 0 auto;
    padding-bottom: 150px;
}
.sub1-5-1 .char .char-item {
    display: flex;
    gap: 20px;
    background: rgb(229 229 229 / 20%);
    background: #f9f9f9;
    padding: 25px;
    border-radius: 20px;
    width: 28%;
    transition: background 0.5s ease,
    box-shadow 0.5s ease;
    align-items: center;
}
.sub1-5-1 .char .char-item .icon-box {
    background: #fff;
    border-radius: 20px;
}
.sub1-5-1 .char .char-item .txt-box .sub-title {
    color: #333333;
    font-size: 22px;
    transition: color 0.3s ease;
}
.sub1-5-1 .char .char-item .txt-box .desc {
    font-size: 15px;
    color: #666;
    line-height: 21px;
    padding-top: 10px;
    transition: color 0.3s ease;
}
.sub1-5-1 .char .char-item:hover {
    background: #001336;
    box-shadow: 1px 1px 5px 1px #0013368e;
}
.sub1-5-1 .char .char-item:hover .txt-box .sub-title{color: #fff;    }
.sub1-5-1 .char .char-item:hover .txt-box .desc {color: #f2f2f2bd;}
.sub1-5-1 .process-swiper {
    width: 100%;
    background: #F2F2F2;
    padding: 150px 0;
    height: 81vh;
    position: relative;
}
.sub1-5-1 .swiper-wrapper {
    position: absolute;
    left: 160px; 
    height: auto;
}
.sub1-5-1 .process-swiper .swiper-slide {
  border-radius: 20px;
  background: #fff;
}
.sub1-5-1 .process-swiper .swiper-slide-active {transform: scale(1.1) translateY(-5px); } 
.sub1-5-1 .swiper-slide img {width: 100%;}
.sub1-5-1 .swiper-slide .txt-box  {padding: 40px 50px;}
.sub1-5-1 .swiper-slide .txt-box .sub-title {
    font-size: 35px;
    font-weight: 600;
    text-align: left;
}
.sub1-5-1 .swiper-slide .txt-box .desc {font-size: 15px;
    text-align: left;
    line-height: 20px;
    padding-top: 10px;}
.sub1-5-1 .swiper-button-next {right: 14%;}
.sub1-5-1 .swiper-button-prev {left: 34%;} 
/* sub1_5_1 */

/* sub1_5_3 */
.sub1-5-3 .introduce {justify-self: flex-start;}
.sub1-5-3 .process-swiper {
    width: 100%;
    background: #F2F2F2;
    padding: 150px 0;
    height: 81vh;
    position: relative;
}
.sub1-5-3 .swiper-button-next {right: 14%;}
.sub1-5-3 .swiper-button-prev {left: 34%;}
/* sub1_5_3 */

/* sub1_5_4 */
.sub1-5-4 .over {
    background: #F2F2F2;
    padding-bottom: 150px;
}
.sub1-5-4 .over .sub-title {
    padding-bottom: 0; 
    padding-top: 30px;
    font-family: var(--font-main);
}
.sub1-5-4 .socks {
    display: flex;
    max-width: 1600px;
    margin: 0 auto;
    justify-content: space-between;
}
.sub1-5-4 .socks .socks-item {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 30%;
}
.sub1-5-4 .socks .socks-item .img-box {
    border-radius: 100px 0 100px 0;
    display: flex;
    background: #fff;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.sub1-5-4 .socks .socks-item .txt-box {
    text-align: center;
}
.sub1-5-4 .socks .socks-item .txt-box .title {
    font-size: 45px;
    font-weight: 600;
}
.sub1-5-4 .socks .socks-item .txt-box .desc {
    font-size: 23px;
    line-height: 30px;
    padding-top: 10px;
}
.sub1-5-4 .process-swiper {background: #fff;}
.sub1-5-4 .process-swiper .swiper-slide {background: #F6F8FC;}
/* sub1_5_4 */

/* sub1_5_5 */
.sub1-5-5 .introduce {justify-content: center;}
/* sub1_5_5 */

/* sub2_1 */
.disease {
    display: flex;
    flex-wrap: wrap;
    max-width: 1600px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}
.disease .disease-item.even {border-right: 1px solid #ddd;}
.disease .disease-item {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 700px;
    border-bottom: 1px solid #ddd;
    position: relative;
    overflow: hidden; 
}
.disease .disease-item .item-inner {
    background: #f2f2f2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: 
        opacity 0.5s ease,
        transform 0.5s ease;
}
.disease .disease-item:hover .item-inner {
    opacity: 1;
    transform: translateY(0);
}
.disease .disease-item .txt-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 0 100px;
    height: 100%;
    width: 100%;
}
.disease .disease-item .txt-box .title {
    color: #B2B2B2;
    font-size: 100px;
    font-weight: 600;
    letter-spacing: -1px;
}
.disease .disease-item .txt-box .title.mid {font-size: 90px;}
.disease .disease-item .txt-box .title.small {font-size: 60px;}
.disease .disease-item .txt-box .sub-title {
    font-size: 22px;
    line-height: 25px;
    font-weight: 600;
}
.disease .disease-item .txt-box .desc {
    font-size: 16px;
    color: #808080;
    font-weight: 400;
    line-height: 25px;
    white-space: break-spaces;
}
.disease .disease-item .txt-box .rec {
    display: flex;
    gap: 20px;
    background: #fff;
    padding: 10px 20px 10px 40px;
    border-radius: 20px;
    color: #808080;
    font-size: 18px;
    margin-top: 30px;
    font-weight: 400;
    margin-bottom: 20px;
}
.disease .disease-item .txt-box .rec br {display: none;}
.disease .disease-item .txt-box .rec .bold {
    font-weight: 800;
    color: #666666;
}
/* sub2_1 */

/* sub2_2 */
.sub-page {padding-bottom: 150px;}
.sub-intro {padding-bottom: 150px;}
.sub-page .title-box {padding: 150px 0;}
.sub-page .title-box .sub-title {
    font-family: var(--font-deco);
    font-size: 24px;
    color: #808080;
    text-align: center;
    padding-bottom: 30px;
    text-transform: uppercase;
}
.sub-page .title-box .main-title {
    font-size: 55px;
    font-weight: 600;
    text-align: center;
}
.sub-page .sub-intro {
    display: flex;
    gap: 70px;
    align-items: center;
}
.sub-page  .sub-video {
        border-radius: 0 500px 500px 0;
    width: 50%;
}
.sub-page .sub-intro .txt-box h3 {
    font-size: 40px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    line-height: 55px;
    padding-bottom: 30px;
}
.sub-page .sub-intro .txt-box h3 span {font-weight: 600;}
.sub-page .sub-intro .txt-box .desc {
    font-size: 22px;
    line-height: 35px;
    padding-bottom: 50px;
}
.sub-page .sub-intro .txt-box .btn {
    background: #0075B8;
    width: max-content;
    color: #fff;
    padding: 20px 30px;
    border-radius: 50px;
    font-size: 30px;
    font-weight: 600;
}
.sub-cont {padding: 100px 0;}
.sub-cont-title {
    text-align: center;
    padding-bottom: 50px;
}
.sub-cont-title .main-title {
    font-size: 55px;
    font-weight: 600;
    padding-bottom: 30px;
    line-height: 70px;
}
.sub-cont-title .desc {
    font-size: 24px;
    line-height: 34px;
    color: #999999;
}
.sub-cont-title .desc span {font-weight: 600;}
.age {background: #0d2035;}
.age .sub-cont-title {color: #fff;}
.age .sub-cont-title .desc {color: #fff;}
.age img,
.people img,
.comfortable img {
    display: block;
    margin: 0 auto;
}
.symptoms .sub-cont-inner,
.comfortable .sub-cont-inner {
    display: flex;
    justify-content: center;
    gap: 50px;
}
.symptoms .sub-cont-item .txt-box {
    padding-top: 50px;
    text-align: center;
}
.symptoms .sub-cont-item .txt-box .item-title {
    font-size: 40px;
    padding-bottom: 20px;
}
.symptoms .sub-cont-item .txt-box .desc {
    color: #666666;
    font-size: 23px;
}
.people .sub-cont-title {padding-top: 50px;}
.people .sub-cont-title .desc {color: #666; }
.feet {position: relative;}
.feet img {width: 100%;}
.feet .txt-box {    
    position: absolute;
    z-index: 9;
    top: 20%;
    color: #fff;
    left: 16%;
}
.feet .txt-box .main-title {
    font-size: 55px;
    padding-bottom: 30px;
}
.feet .txt-box .desc {
    font-size: 24px;
    line-height: 34px;
}
.comfortable .sub-cont-inner {padding-top: 100px;}
.comfortable .sub-cont-item {
    box-shadow: 1px 1px 3px 1px #ccc;
    border-radius: 20px;
    padding: 30px 30px 70px 30px;

   transition: transform 0.3s ease-out;
    cursor: pointer;
}

.comfortable .sub-cont-item:hover{
    transform: scale(1.1); 
} 
.comfortable .sub-cont-item .txt-box {padding-top: 30px;}
.comfortable .sub-cont-item .txt-box .item-title {
    font-size: 40px;
    padding-bottom: 20px;
}
.comfortable .sub-cont-item .txt-box .desc {
    color: #666666;
    font-size: 23px;
}
.different .sub-cont-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
.different .sub-cont-item .txt-box {
    font-family: var(--font-point2);
    background: #F2F2F2;
    padding: 50px;
    text-align: center;
    border-radius: 10px;
}
.different .sub-cont-item .txt-box .item-title {
    font-weight: 500;
    color: #1A1A1A;
    font-size: 33px;
    padding-bottom: 30px;
    position: relative;
}
.different .sub-cont-item .txt-box .desc {
    color: #404040;
    font-weight: 400;
    font-size: 20px;
}
.different .sub-cont-item.neo-shoes {
    box-shadow: -20px 1px 20px 1px #ddd;
    border-radius: 20px;
} 
.different .sub-cont-item.neo-shoes .item-title {
    font-size: 40px;
    position: relative;
}
.different .sub-cont-item .item-title::after {
    content: '';
    background: #fff;
    width: 100px;
    height: 3px;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
}
.different .sub-cont-item.neo-shoes .item-title::after {
    content: '';
    background: #0075B8;
    width: 130px;
    height: 3px;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
}
.different .sub-cont-item.neo-shoes .desc {font-size: 26px;}
.different .sub-cont-item.neo-shoes .txt-box {
    background: linear-gradient(to bottom, rgba(0, 117, 184, 0.1), #ffffff);
    border-radius: 20px;
}
.sub2-2 .sub-cont-title {
    padding-bottom: 100px;
}
.chart-img {display: none !important;}
.chart-wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 0;
    box-sizing: border-box;
    margin: 0 auto;
    }

    /* 차트 영역 (Y축 + 그래프) */
    .chart-body {
        display: flex;
        height: 350px;
        position: relative;
    }
    :root {
        --bg-color: #0e1a2b; /* 배경색 */
        --grid-color: rgba(255, 255, 255, 0.5); /* 그리드 점선 색 */
        --text-color: #ffffff;
        --bar-white: #f5f5f5;
        --bar-blue: #006fb9;
        --bar-lightblue: #7bcbef;
    }
    /* Y축 (숫자) */
    .y-axis {
        display: flex;
        flex-direction: column-reverse; /* 0이 아래로 가게 */
        justify-content: space-between;
        color: var(--text-color);
        font-size: 1.5rem;
        padding-right: 15px;
        text-align: right;
        width: 50px;
        height: 100%;
        position: relative;
        bottom: -9px; /* 텍스트 위치 미세 조정 */
    }

    /* 그리드 라인 컨테이너 */
    .grid-lines {
        position: absolute;
        left: 50px; /* Y축 너비만큼 띄움 */
        right: 0;
        top: 20px;
        bottom: 0;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        z-index: 0;
    }

    .grid-line {
        width: 100%;
        border-top: 1px dashed var(--grid-color);
        height: 0;
    }

    .opacity-line {opacity: 0;}
    .short-line {
        width: 1%;
    }
    /* 막대 그래프 영역 */
    .bars-container {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: flex-end; /* 막대 아래 정렬 */
        padding-left: 20px;
        z-index: 1;
        height: 100%;
        border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    }

    /* 각 연령대 그룹 */
    .bar-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        justify-content: flex-end;
        width: 15%;
        margin-bottom: -47px;
    }

    .bars-wrap {
        display: flex;
        align-items: flex-end; /* 막대 밑바닥 정렬 */
        gap: 6px; /* 막대 사이 간격 */
        height: 100%;
        padding-bottom: 1px; /* 바닥 선과 겹치지 않게 */
    }

    /* 개별 막대 스타일 */
    .bar {
        width: 40px;
        border-radius: 4px 4px 0 0;
        height: 0; /* 초기 높이 0 (애니메이션용) */
        transition: height 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); /* 올라오는 모션 */
    }

    /* 색상 지정 */
    .bar.overall { background-color: var(--bar-white); }
    .bar.men { background-color: var(--bar-blue); }
    .bar.women { background-color: var(--bar-lightblue); }

    /* X축 라벨 (나이) */
    .x-label {
        margin-top: 20px;
        color: var(--text-color);
        font-size: 1.5rem;
    }

    /* 범례 (Legend) */
    .legend {
        display: flex;
        gap: 20px;
        margin-top: 80px;
        padding-left: 50px; /* Y축 너비만큼 보정 */
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-color);
        font-size: 14px;
    }

    .legend-box {
        width: 20px;
        height: 20px;
    }
    .legend-box.overall { background-color: var(--bar-white); }
    .legend-box.men { background-color: var(--bar-blue); }
    .legend-box.women { background-color: var(--bar-lightblue); }

/* sub2_3 */
.prevent .sub-cont-inner {
    display: flex;
    gap: 30px;
    justify-content: center;
    color: #fff;
}
.prevent img {opacity: .3;}
.prevent .sub-cont-item {
    padding: 30px;
    background: rgb(0 0 0 / 30%);
    box-shadow: 0px 0px 5px 5px rgb(0 0 0 / 10%);

    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
    cursor: pointer;
}
.prevent .sub-cont-item .txt-box {
    text-align: center;
    padding-top: 30px;
    opacity: .3;
}
.prevent .sub-cont-item .txt-box .item-title, 
.socks .sub-cont-item .txt-box .item-title {
    font-size: 26px;
    padding-bottom: 20px;
}
.prevent .sub-cont-item .txt-box .desc {
    font-size: 18px;
    line-height: 22px;
}
.prevent .sub-cont-item:hover img,
.prevent .sub-cont-item:hover .txt-box {opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.prevent .sub-cont-item:hover {
    background: rgb(0 0 0 / 70%); /* 호버 시 배경을 더 어둡게 하여 컨텐츠 강조 */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px); /* 살짝 위로 들리는 효과 (선택사항) */
}
.socks .sub-cont-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.socks .sub-cont-item:hover .txt-box .item-title {color: #0075B8;}
.socks .sub-cont-item:hover .txt-box .desc {color: #000;}
.socks .sub-cont-item:hover .txt-box .cir {background: rgb(0 117 184 / 40%);}
.socks .sub-cont-item:hover .txt-box .cir-inner {background: rgb(0 117 184 / 80%);}
.socks .sub-cont-item .txt-box .cir {
    width: 20px;
    height: 20px;
    background: rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    position: relative;
    margin: 0 auto 10px;
    transition: background 0.3s ease;
}
.socks .sub-cont-item .txt-box .item-title {
    transition: color 0.3s ease;
}

.socks .sub-cont-item .txt-box .desc {
    transition: color 0.3s ease;
}
.socks .sub-cont-item .txt-box .cir-inner {
    width: 10px;
    height: 10px;
    background: rgb(0 0 0 / 80%);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.3s ease;
}
.socks .sub-cont-item .txt-box .desc {
    font-size: 24px;
    line-height: 34px;
    color: #808080;
    font-weight: 400;
}
.products .sub-cont-inner {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.products .sub-cont-inner .sub-cont-item {
    background: #FAFAFA;
    padding: 30px 30px 70px 30px;
    border-radius: 20px;
    box-shadow: 2px 2px 5px 1px #ddd;

    transition: transform 0.3s ease-out;
    cursor: pointer;
}
.products .sub-cont-inner .sub-cont-item:hover {
    transform: translateY(-5px);
}
.products .sub-cont-inner .sub-cont-item .img-box {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
}
.products .sub-cont-inner .sub-cont-item .txt-box {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.products .sub-cont-inner .sub-cont-item .txt-box .sub-title {
    background: #F2F2F2;
    width: max-content;
    padding: 10px 15px;
    border-radius: 50px;
    font-family: var(--font-deco);
    font-weight: 500;
    font-size: 14px;
}
.products .sub-cont-inner .sub-cont-item .txt-box .main-title {font-size: 30px;}
.products .sub-cont-inner .sub-cont-item .txt-box .desc {
    font-size: 18px;
    font-family: var(--font-point2);
    font-weight: 500;}
.products .sub-cont-inner .sub-cont-item .txt-box .desc li {
    padding-bottom: 10px;
    display: flex;
    gap: 10px;
}
.products .sub-cont-inner .sub-cont-item .txt-box .desc li span {padding-left: 5px;}
.products .sub-cont-inner .sub-cont-item .txt-box .btn {
    background: #0075B8;
    width: max-content;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
}
.products .sub-cont-item-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.products .sub-cont-item-wrap .sub-cont-item {
    display: flex;
    gap: 30px;
    padding: 30px 100px 30px 30px !important;
}
.products .sub-cont-item-wrap .sub-cont-item .img-box {padding: 30px 50px !important;}
/* sub2_3 */

/* sub3_1 */
.sub3-1 {padding-bottom: 0;}
.sub3-1 .product-content {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
        align-items: center;
        justify-content: space-between;
            padding-bottom: 150px;
}

.sub3-1 .thumb-list {
    width: 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sub3-1 .thumb {
    width: 85px;
    height: 85px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: 0.3s;
}
.sub3-1 .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sub3-1 .thumb.active, .sub3-1 .thumb:hover { border-color: #0066AF; }

.sub3-1 .main-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 480px;
    width: 480px;
}
.sub3-1 .main-img-box img {
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
    object-fit: contain;
}
.sub3-1 .info-box {width: 40%;}
.sub3-1 .info-box .title-box,
.sub3-1 .graph .title-box {
        padding: 0;
}
.sub3-1 .info-box .title-box .sub-title,
.sub3-1 .graph .title-box .sub-title,
.sub3-2 .orthotic .title-box .sub-title {
    text-align: left;
    padding-bottom: 10px;
    font-size: 20px;
}
.sub3-1 .info-box .title-box .main-title,
.sub3-1 .graph .title-box .main-title,
.sub3-2 .use .title-box .main-title,
.sub3-2 .orthotic .title-box .main-title {
    text-align: left;
    line-height: 70px;
    font-size: 50px;
}
.sub3-1 .info-box .gender {
    display: flex;
    padding-top: 20px;
    gap: 20px;
}
.sub3-1 .info-box .gender div {
    background: #C9C9C9;
    padding: 7px 20px;
    border-radius: 20px;
    font-size: 18px;
    color: #4D4D4D;
    font-weight: 500;
}
.sub3-1 .info-box .gender .woman {
    border: 1px solid rgb(178 178 178 / 70%);
    color: #B2B2B2;
background: #fff;
}

.sub3-1 .info-box .desc { 
    font-size: 20px;
    line-height: 32px;
    color: #808080;
    padding-top: 30px;
letter-spacing: -1px;}
.sub3-1 .info-box .spec-list {
        color: #333;
    padding-top: 50px;
    font-size: 15px;
    display: flex;
    font-weight: 500;
    flex-direction: column;
    gap: 20px;
}
.sub3-1 .info-box .spec-list li {
    border: 1px solid #eee;
    padding: 20px 20px 20px 50px;
    border-radius: 50px;
    width: max-content;
    box-shadow: 3px 3px 5px 1px #eee;
    position: relative;
    transition: background 0.3s ease;
}
.sub3-1 .info-box .spec-list li::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    left: 20px;
    background: #ddd;
    transform: translateY(-50%);
    transition: background 0.3s ease;
}
.sub3-1 .info-box .spec-list li:hover::before {
    background: #001B6A;
}

.sub3-1 .care {
    background: #F0F0F0;
    padding-bottom: 150px;
}
.sub3-1 .care .title-box,
.sub3-1 .detali .title-box {
    padding-bottom: 100px;
}
.sub3-1 .care .title-box .desc,
.sub3-1 .detali .title-box .desc {
    text-align: center;
    padding-top: 50px;
    font-size: 24px;
    line-height: 34px;
    color: #666666;
}
.sub3-1 .care .care-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
}
.sub3-1 .care .care-item .title {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    padding-top: 40px;
}
.sub3-1 .care .care-item .desc {
        font-size: 22px;
    color: #666666;
    padding-top: 20px;
    line-height: 30px;
    text-align: center;
}

.sub3-1 .detali {
    padding-bottom: 150px;
}
.sub3-1 .detali .title-box .sub-title {
    font-size: 18px;
    letter-spacing: 5px;
    font-weight: 600;
    color: rgb(178 178 178 / 70%);
    padding-bottom: 50px;
}
.sub3-1 .detali .img-box {
max-width: 1400px;
    margin: 0 auto;
    }
.sub3-1 .detali .img-box img {width: 100%;}
.sub3-1 .point {padding-bottom: 150px;}
.sub3-1 .point .img-box img {width: 100%;}
.sub3-1 .point .img-box:last-child {padding-top: 100px;}
.sub3-1 .graph {
    background: #000c2e;
    padding: 150px 0;
    display: flex;
    gap: 100px;
    align-items: center;
    justify-content: center;
}
.sub3-1 .graph .txt-box,
.sub3-1 .graph .title-box .sub-title {color: #fff;}
.sub3-1 .graph .txt-box .desc {
    font-size: 23px;
    line-height: 35px;
    padding-top: 50px;
}

/* sub3_1 */

/* sub3_2 */
.sub3-2 .nth-point {
    max-width: 1200px;
    margin: 0 auto;
}

.sub3-2 .use {
    background: url('../images/sub/sub3-3-img-12.png') no-repeat center/cover;
    height: 98vh;
    display: flex;
    align-items: center;

}
.sub3-2 .use .txt-box {padding-left: 300px;}
.sub3-2 .use .title-box {padding: 0 0 50px;}
.sub3-2 .use .desc {
    font-size: 25px;
    line-height: 35px;
    color: #333333;
}
.sub3-2 .orthotic {padding-top: 100px;}
.sub3-2 .orthotic .top {
    display: flex;
    justify-content: center;
    gap: 50px;
}
.sub3-2 .orthotic .top .img-box {
    width: 50%;
    display: flex;
    justify-content: flex-end;
}
.sub3-2 .orthotic .top .img-box img {
    width: 70%;
    object-fit: contain;
}
.sub3-2 .orthotic .top .txt-box {
    width: 50%;
    background: #000c2e;
    border-radius: 200px 0 0 0;
    padding: 150px 0 150px 150px;
}
.sub3-2 .orthotic .top .txt-box .title-box {padding: 0;}
.sub3-2 .orthotic .top .txt-box .sub-title,
.sub3-2 .orthotic .top .txt-box .main-title {    color: #fff;}
.sub3-2 .orthotic .top .txt-box .small-title {
color: #fff;
    font-size: 26px;
    padding-top: 10px;
}
.sub3-2 .orthotic .top .txt-box .desc {
color: #fff;
    font-size: 22px;
    line-height: 33px;
    padding-top: 30px;
}
.sub3-2 .orthotic .top .txt-box .desc:last-child {
color: #CCC;
    font-size: 20px;
    padding-top: 10px;
    line-height: 30px;
}
.sub3-2 .orthotic .bot {
    
    background: #F0F0F0;
}
.sub3-2 .orthotic .bot .img-box {
    width: 1600px;
    margin: 0 auto;
}
.sub3-2 .orthotic .bot .img-box img {width: 100%;}
/* sub3_2 */

/* sub3_3 */
.sub3-3 .care .care-item .desc {
    padding-top: 50px;
    color: #333333
}
/* sub3_3 */

/* sub3_4 */
.sub3-4 .kind {display: flex;
    gap: 25px;
    flex-wrap: wrap;
    padding: 150px 0;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}
.sub3-4 .kind .kind-item p {
    text-align: center;
    padding: 15px 0;
    font-size: 20px;
    text-transform: uppercase;
}
.sub3-4 .kind .kind-item img {
    border: 1px solid #ddd;
    width: 280px;
    height: 320px;
    object-fit: contain;
    padding: 20px;
}
/* sub3_4 */

/* sub3_5 */
.sub3-5 .point {padding-bottom: 0;}
.sub3-5 .point .img-box:nth-child(2) {
    padding-top: 100px;
}
.sub3-4 .thumb img, 
.sub3-5 .thumb img, 
.sub3-6 .thumb img, 
.sub3-7 .thumb img,
.sub3-8 .thumb img,
.sub3-9 .thumb img {object-fit: contain;}
.sub3-5 .care:last-child {margin-top: 100px;}
/* sub3_5 */

/* sub3_7 */
.sub3-7 .point .txt-box {
    text-align: center;
    padding-top: 50px;
}
.sub3-7 .point .txt-box .title {
    font-size: 50px;
    color: #1A1A1A;
}
.sub3-7 .point .txt-box .desc {
    font-size: 30px;
    padding-top: 30px;
    line-height: 40px;
    color: #666666;
}
/* sub3_7 */

/* sub3_8 */
.sub3-8 .info-box {width: 45%;}
.sub3-8 .care {background: #000c2e;}
.sub3-8 .care .main-title,
.sub3-8 .care .title {color: #fff;}
.sub3-8 .care .desc {color: rgb(255 255 255 / 80%) !important;}
/* sub3_8 */

/* sub3_9 */
.sub3-9 .thumb img {object-fit: contain;}
.sub3-9 .detali .img-box {
    max-width: unset;
    margin: 0 auto;
}
.sub3-9 .detali .title-box {padding: 100px 0;}
.sub3-9 .care:last-child {background: #000c2e;}
.sub3-9 .care:last-child {color: #fff;}
.sub3-9 .care:last-child .sub-title {color: #fff;}
.sub3-9 .care:last-child .desc {color: rgb(255 255 255 / 80%);}
/* sub3_9 */

/* sub4_1 */
.sub4-1 .contact {
    display: flex;
    gap: 100px;
    align-items: center;
}
.sub4-1 .contact .contact-inner {width: 40%;}
.sub4-1 .contact .contact-inner .sub-title {
    font-size: 30px;
    padding-bottom: 10px;
}
.sub4-1 .contact .contact-inner .title {
    font: var(--font-deco);
    font-size: 70px;
    font-weight: 600;
}
.sub4-1 .contact .contact-inner .sub-inquiry {
    display: flex;
    flex-direction: column;
    padding: 50px 0 100px;
    gap: 20px;
}
.sub4-1 .contact .contact-inner .sub-inquiry > div {
    display: flex;
    gap: 20px;
}
.sub4-1 .contact .contact-inner .sub-inquiry input {
    border: none;
    font-size: 25px;
    background: #F2F2F2;
    padding: 15px;
    font-weight: 400;
    width: 100%;
}
.sub4-1 .contact .contact-inner .sub-inquiry textarea {
    border: none;
    background: #F2F2F2;
    padding: 15px;
    font: var(--font-main);
    font-weight: 400;
    font-size: 25px;
}
.sub4-1 .contact .contact-inner .sub-inquiry input:focus,
.sub4-1 .contact .contact-inner .sub-inquiry textarea:focus {outline: none;}
.sub4-1 .contact .btn {
    background: #F2F2F2;
    width: fit-content;
    padding: 20px 40px;
    border-radius: 50px;
}
.sub4-1 .contact .btn button {
    font-size: 35px;
    font-weight: 600;
}
/* sub4_1 */

/* sub5_1 */
.sub5-1 {position: relative;}
.sub5-1 .bg {
    position: absolute;
    right: 0;
    top: 3%;
    width: 90%;
    z-index: -1;
}
.sub5-1 .info {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 1400px;
    padding: 0 0 100px 0;
}
.sub5-1 .info .top img {width: 40%;}
.sub5-1 .info .info-inner {
    display: flex;
    gap: 100px;
    justify-content: space-between;
    align-items: flex-end;
}
.sub5-1 .info p {
    display: flex;
    gap: 10px;
    flex-direction: column;
    font-size: 30px;
    line-height: 35px;
}
.sub5-1 .info p.tel {margin-bottom: 20px;}
.sub5-1 .info p span {
    color: #0080BA;
    font-size: 25px;
    font-weight: 600;
}
.sub5-1 .map,
.sub5-1 .by {
    max-width: 1600px;
    margin: 0 auto;
}
.sub5-1 .by ul {
    display: flex;
    justify-content: center;
    padding-top: 100px;
}
.sub5-1 .by ul li {
    position: relative;
    width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    justify-content: center;
}
.sub5-1 .by ul li:nth-child(2) {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.sub5-1 .by ul li img {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sub5-1 .by ul li .title {
    font-size: 30px;
    font-weight: 800;
    color: #231815;
}
.sub5-1 .by ul li .desc {
    text-align: center;
    color: #666;
    font-size: 23px;
    line-height: 35px;
}
/* sub5_1 */

/* sub5_2 */
.sub5-2 .key {
  display: flex;
  max-width: 1800px;
  margin: 0 auto;
  gap: 20px;
}
.sub5-2 .key-item {
    position: relative;
    overflow: hidden;
}
.sub5-2 .key-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sub5-2 .key-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(21 28 59 / 80%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}
.sub5-2 .key-item:hover::after {opacity: 1;}
.sub5-2 .txt-box {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: #fff;
}
.sub5-2 .block {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: transform 0.45s ease;
    width: 100%;
}
.sub5-2 .num {
    font-size: 35px;
    margin-bottom: 10px;
}
.sub5-2 .title {
    font-size: 50px;
    font-weight: 600;
}
.sub5-2 .hidden {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 150px); 
    opacity: 0;
    text-align: center;
    transition: opacity 0.45s ease, transform 0.45s ease;
    transition: opacity 0.45s ease, transform 0.45s ease;
    width: 100%;
}
.sub5-2 .sub-title {
    font-size: 25px;
    margin-bottom: 10px;
}
.sub5-2 .desc {
    font-size: 16px;
    color: #ccc;
    line-height: 20px;
    padding-bottom: 50px;
}
.sub5-2 .key-item:hover .block {transform: translate(-50%, -150px); }

.sub5-2 .key-item:hover .hidden {
    opacity: 1;
    transform: translate(-50%, -20px);
}
/* sub5_2 */


@media screen and (max-width: 1440px) {

    .sub-top {gap: 20px;}

    .tabs li a {font-size: 20px;}
    .tabs li.active > a {border-bottom: 3px solid #000;}

    /* sub1_1 */
    .sub1-1 {padding-bottom: 200px !important;}
    .sub1-1 .sub-intro {padding-right: 100px; gap: 70px !important;}
    .sub1-1 .sub-intro img {width: 45%;}
    .sub1-1 .sub-intro .txt-box .img {
        transform: translateX(0);
        width: 70%;
    }
    .sub1-1 .sub-intro .txt-box .desc br {display: none;}
    .sub1-1 .sub-intro .txt-box .mark {width: auto; right: 10%;}
    .sub1-1 .sub-intro img.logo {width: 35%;}
    .sub1-1 .sub-intro img.bg {top: 30%;}
    /* sub1_1 */

    /* sub1_2 */
    .sub1-2 .history {
        height: 140vh;
        top: 0;
    }
    .sub1-2 .history .img-box {width: 40%;}
    .sub1-2 .history .his-inner {width: 60%;}
    .sub1-2 .timeline-item {min-width: 480px;}
    .sub1-2 .history .his-inner .txt-box .title {
        font-size: 30px;
        line-height: 40px;
    }
    .sub1-2 .history .his-inner .txt-box .desc {
        font-size: 18px;
        line-height: 25px;
    }
    .sub1-2 .history .img-box .move-img {
        bottom: 0px;
        left: -50px;
        width: 120%;
    }
    .sub1-2 .history .his-inner .display-year {font-size: 140px;}
    .sub1-2 .timeline-item .year-label {font-size: 30px;}
    .sub1-2 .timeline-item .content .month {font-size: 20px;}
    .sub1-2 .timeline-item .content p {padding-top: 0px;}
    .sub1-2 .bg {
        bottom: 100px;
        width: 50%;
    }
    /* sub1_2 */
    
    /* sub1_3 */
    .certificate {padding: 150px 100px 100px;}
    .certificate .swiper-box {max-width: 1200px;}
    .certificate .navigation_wrapper, .sub1-5-1 .navigation_wrapper {top: 55%;}
    .certificate .swiper-button-prev {left: 3%;}
    .certificate .swiper-button-next {right: 3%;}
    /* sub1_3 */
    
    /* sub1_4 */
    .exhibitions .image-track .item {
        max-width: 550px;
        height: 300px;
    }
    .exhibitions .text-track .item .year {font-size: 30px;}
    .exhibitions .text-track .item {flex: 0 0 30vw;}
    .sub1-4 .bg {width: 40%;}
    .exhibitions .text-track .item ul li .hat {font-size: 20px;}
    .exhibitions .text-track .item ul li .desc {font-size: 15px;}
    .exhibitions .image-track {margin-bottom: 30px;}
    .exhibitions .text-track .item ul li {gap: 20px;}
    .exhibitions .text-track {padding-left: 50px;}
    /* sub1_4 */
    
    /* sub1_5 */
    .sub1-5 .card-grid {
        padding: 0 100px;
        overflow: hidden;
    }
    .sub1-5 .card-row {height: 350px;}
    .sub1-5 .card-content {padding: 0 0 0 30px;}
    .sub1-5 .big-title {
        left: 30px;
        font-size: 30px;
    }
    .sub1-5 .info-group .sub-title {font-size: 22px;}
    .sub1-5 .info-group .title {
        font-size: 30px;
        letter-spacing: -1px;
    }
    .sub1-5 .card-inner .info-group .title .img {width: 40px;}
    .sub1-5 .card-row:first-child .card:nth-child(3) .card-image img,
    .sub1-5 .card-row:first-child .card:nth-child(4) .card-image img,
    .sub1-5 .card-row:last-child .card:nth-child(4) .card-image img {
        width: 80%;
        right: 0;
    }
    .sub1-5 .card:hover .big-title {transform: translateY(-40px);}
    .sub1-5 .card:hover .info-group {transform: translateY(100px);}
    /* sub1_5 */
    
    /* sub1_5_1 */
    .sub1-5-1 .swiper-wrapper {
        position: static;
        height: auto;
    }
    .sub1-5-1 .introduce {padding: 150px 100px;}
    .sub1-5-1 .introduce .left {width: 50%;}
    .sub1-5-1 .introduce .left img {width: 100%;}
    .sub1-5-1 .introduce .right {width: 50%;}
    .sub1-5-1 .introduce .txt-box .title {
        font-size: 35px;
        line-height: 50px;
    }
    .sub1-5-1 .introduce .txt-box .desc {
        line-height: 32px;
        font-size: 20px;
    }
    .sub1-5-1 .char {gap: 30px;}
    .sub1-5-1 .char .char-item .txt-box .sub-title {
        letter-spacing: -1px;
        font-size: 20px;}
    .sub1-5-1 .char .char-item .txt-box .desc {font-size: 14px;}
    .sub1-5-1 .process-swiper {height: 80vh;}
    .sub1-5-1 .swiper-slide .txt-box {padding: 30px;}
    .sub1-5-1 .swiper-slide .txt-box .sub-title {font-size: 20px;}
    .sub1-5-1 .swiper-slide .txt-box .desc br {display: none;}
    .sub1-5-1 .navigation_wrapper {top: 50%;}
    .sub1-5-1 .swiper-button-next {right: 29% !important;}
    .sub1-5-1 .swiper-button-prev {left: 29% !important; }
    /* sub1_5_1 */
    
    /* sub1_5_4 */
    .sub1-5-4 .over {padding: 0 100px 150px;}
    .sub-page .title-box .main-title {font-size: 35px;}
    .sub1-5-4 .socks .socks-item .img-box {padding: 20px 40px;}
    .sub1-5-4 .socks .socks-item .txt-box .title {font-size: 30px;}
    .sub1-5-4 .socks .socks-item .txt-box .desc {
        font-size: 18px;
        line-height: 25px;
    }
    /* sub1_5_4 */

    /* sub2_1 */
    .disease {margin: 0 100px;}
    .disease .disease-item .txt-box {padding: 0 50px;}
    .disease .disease-item .txt-box .title {font-size: 70px;}
    .disease .disease-item .txt-box .sub-title br {display: none;}
    .disease .disease-item .txt-box .desc {white-space: normal;}
    .disease .disease-item .txt-box .title.mid {font-size: 60px;}
    .disease .disease-item .txt-box .title.small {font-size: 50px;}
    /* sub2_1 */

    /* sub2_2 */
    .sub-page .title-box .sub-title {
        font-size: 20px;
        padding-bottom: 20px;
    }
    .sub-page .title-box .main-title {font-size: 40px;}
    .sub-page .sub-intro img {width: 50%;}
    .sub-page .sub-intro .txt-box h3 {
        font-size: 35px;
        line-height: 45px;
    }
    .sub-page .sub-intro .txt-box .desc {
        font-size: 20px;
        line-height: 30px;
    }
    .sub-page .sub-intro .txt-box .btn {font-size: 25px;}
    .sub-cont-title .main-title {
        font-size: 40px;
        line-height: 50px;
        padding-bottom: 20px;
    }
    .sub-cont .sub-cont-title .desc {
        font-size: 20px;
        line-height: 30px;
    }
    .symptoms .sub-cont-item img {width: 100%;}
    .symptoms .sub-cont-inner, .comfortable .sub-cont-inner {
        max-width: 1200px;
        margin: 0 auto;
    }
    .symptoms .sub-cont-item .txt-box {padding-top: 30px;}
    .symptoms .sub-cont-item .txt-box .item-title {font-size: 35px;}
    .symptoms .sub-cont-item .txt-box .desc {font-size: 18px;}
    .feet .txt-box {left: 13%;}
    .feet .txt-box .main-title {
        font-size: 40px;
        padding-bottom: 20px;
    }
    .feet .txt-box .desc {
        font-size: 20px;
        line-height: 30px;
    }
    .comfortable > img {width: 30%;}
    .comfortable .sub-cont-item img {width: 100%;}
    .comfortable .sub-cont-item .txt-box .item-title {font-size: 35px;}
    .comfortable .sub-cont-item .txt-box .desc {
        font-size: 18px;
        line-height: 25px;
    }
    .different .sub-cont-item .txt-box {padding: 30px;}
    .different .sub-cont-item .txt-box .item-title {font-size: 30px;}
    .different .sub-cont-item .txt-box .desc {font-size: 18px;}
    .different .sub-cont-item.neo-shoes .item-title {font-size: 35px;}
    .different .sub-cont-item.neo-shoes .desc {font-size: 20px;}
    /* sub2_2 */

    /* sub2_3 */
    .prevent .sub-cont-inner {width: 90%; margin: 0 auto;}
    .prevent img {max-width: 130px;}
    .prevent .sub-cont-item .txt-box .item-title, 
    .socks .sub-cont-item .txt-box .item-title {font-size: 23px;}
    .prevent .sub-cont-item .txt-box .desc br {display: none;}
    .prevent .sub-cont-item .txt-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 61%;
    }
    .socks .sub-cont-item .txt-box .desc {
        font-size: 20px;
        line-height: 30px;
    }
    /* sub2_3 */

    /* sub3_1 */
     .sub3-1 .product-content {padding: 0 100px 150px;}
.sub3-1 .thumb {
    width: 55px;
    height: 55px;}
.sub3-1 .main-img-box {
    height: 400px;
    width: 400px;
}
.sub3-1 .info-box {
    width: 45%;
}
.sub3-1 .info-box .title-box .sub-title, 
.sub3-1 .graph .title-box .sub-title {
    font-size: 16px;
}
.sub3-1 .info-box .title-box .main-title, 
.sub3-1 .graph .title-box .main-title {line-height: 40px;}
.sub3-1 .info-box .title-box .main-title, 
.sub3-1 .graph .title-box .main-title {
    font-size: 30px;
}
.sub3-1 .info-box .gender div {
    font-size: 16px;}
.sub3-1 .info-box .desc {
    font-size: 18px;}
.sub3-1 .info-box .desc br {display: none;} 
.sub3-1 .care {
    padding-left: 100px;
    padding-right: 100px;
}
.sub3-1 .care .care-inner {gap: 50px;}
.sub3-1 .care .care-item img {width: 100%;}
.sub3-1 .care .care-item .title {
    font-size: 25px;}
.sub3-1 .care .care-item .desc {
    font-size: 18px;
    line-height: 28px;}
.sub3-1 .detali .img-box {
    padding: 0 100px;}
.sub3-1 .graph {padding: 150px 100px;}
.sub3-1 .graph .img-box {width: 50%;}
.sub3-1 .graph img {width: 100%;}
.sub3-1 .graph .txt-box {width: 50%;}
.sub3-1 .graph .txt-box .desc {
    font-size: 20px;}
.sub3-1 .graph .txt-box .desc br {
    display: none;}
    /* sub3_1 */

    /* sub3_2 */
    .sub3-2 .orthotic .bot .img-box {
    width: 100%;}
    .sub3-2 .nth-point .img-box {
        display: flex;
        justify-content: center;
    }
    .sub3-2 .nth-point .img-box img {
    width: 80%;
}
    .sub3-2 .use .txt-box {
    padding-left: 200px;
}
.main-title, .sub3-2 .use .title-box .main-title, .sub3-2 .orthotic .title-box .main-title {
    line-height: 40px;
    font-size: 30px;
}
.sub3-2 .use .desc {
    font-size: 20px;
    line-height: 30px;
}
.sub3-2 .orthotic .top .txt-box {
    padding: 100px 0 100px 100px;
}
.sub3-2 .orthotic .title-box .sub-title {font-size: 18px;}
.sub3-2 .orthotic .top .txt-box .small-title {
    font-size: 20px;}
.sub3-2 .orthotic .top .txt-box .desc,
.sub3-2 .orthotic .top .txt-box .desc:last-child {
    font-size: 18px;
    line-height: 30px;}





    /* sub3_2 */
    
    /* sub3_7 */
.sub3-7 .point .txt-box .title {
    font-size: 40px;
}
.sub3-7 .point .txt-box .desc {
    font-size: 28px;}
    /* sub3_7 */

    /* sub3_9 */
    /* sub3_9 */


 
    /* notice */
    .recruit__list_wrap {padding: 0 100px 150px !important;}
    .view__wrap, .write__wrap {margin: 150px 100px !important;}
    /* notice */

     /* sub4_1 */
    .sub4-1 .contact {padding-right: 100px;}
    .sub4-1 .contact .img-box {width: 50%;}
    .sub4-1 .contact .img-box img {width: 100%;}
    .sub4-1 .contact .contact-inner {width: 50%;}
    .sub4-1 .contact .contact-inner .sub-title {font-size: 25px;}
    .sub4-1 .contact .contact-inner .title {font-size: 50px;}
    .sub4-1 .contact .contact-inner .sub-inquiry input,
    .sub4-1 .contact .contact-inner .sub-inquiry textarea {
        font-size: 20px;
        padding: 10px 15px;
    }
    .sub4-1 .contact .contact-inner .sub-inquiry {padding: 50px 0;}
    .sub4-1 .contact .btn button {font-size: 25px;}
    /* sub4_1 */

    /* sub5_1 */
    .sub5-1 {padding: 0 100px 150px 100px;}
    .sub5-1 .info p {font-size: 25px;}
    .sub5-1 .info {
        padding: 0 50px 100px 50px;
        gap: 0;
    }
    .sub5-1 .by ul li .title {font-size: 25px;}
    .sub5-1 .by ul li .desc {
        font-size: 20px;
        line-height: 30px;
    }
    /* sub5_1 */

    /* sub5_2 */
    .sub5-2 .key {padding: 0 100px;}
    .sub5-2 .num {font-size: 25px;}
    .sub5-2 .title {font-size: 35px;}
    .sub5-2 .sub-title {font-size: 18px;}
    .sub5-2 .desc {
        font-size: 14px;
        padding-bottom: 30px;
    }
    .sub5-2 .desc br {display: none;}
    .sub5-2 .icon { width: 70px;}
    .sub5-2 .key-item:hover .block {transform: translate(-50%, -120px);}
    .sub5-2 .hidden {padding: 0 20px;}
    /* sub5_2 */
}

@media screen and (max-width: 1200px) {
        
    .sub-top {gap: 30px;}
    .sub-top h2 {font-size: 40px;}
    .breadcrumb a {font-size: 16px;}
    .tabs li {padding: 15px 0;}
    .tabs li a {
        font-size: 18px;
        padding: 15px 0;
    }

    /* sub1_1 */
    .sub1-1 {padding-bottom: 150px !important;}
    .sub1-1 .sub-intro .txt-box .desc {gap: 15px;}
    .sub1-1 .sub-intro .txt-box .mark {width: 15%;}
    .sub1-1 .sub-intro img.logo {
        top: 85%;
        left: 190px;
    }
    .sub1-1 .sub-intro img.bg {top: 25%;}
    /* sub1_1 */

    /* sub1_2 */    
    .sub1-2 .history {
    height: 90vh;}
    .sub1-2 .history .his-inner {padding: 0;}
.history-timeline {
    margin-top: 30px;
}
.sub1-2 .history .his-inner .display-year {
    font-size: 100px;
    margin-bottom: 30px;
}
    /* sub1_2 */
    
    /* sub1_3 */
    .certificate .txt-box .title {font-size: 35px;}
    .certificate .txt-box .desc {font-size: 20px;}
    .certificate .certificate-swiper .slide p {
        font-size: 15px;
        line-height: 23px;
    }
    .certificate .swiper-button-prev {left: 4%;}
    .certificate .swiper-button-next {right: 4%;}
    /* sub1_3 */

    /* sub1_4 */
    .exhibitions .image-track .item {
        max-width: 510px;
        height: 300px;
    }
    .exhibitions .text-track .item ul {
        padding-left: 20px;
        padding-right: 20px;
    }
    .exhibitions .text-track .item .year {margin-bottom: 20px;}
    .exhibitions .text-track .item {flex: 0 0 33vw;}
    .exhibitions .text-track .item ul li .desc br {display: none;}
    .exhibitions .text-track .item ul li .hat {width: 22px;}
    /* sub1_4 */
    
    /* sub1_5 */
    .disease {margin: 0 50px;}
    .sub1-5 .card-row {
        flex-wrap: wrap;
        height: auto;
    }
    .sub1-5 .card {flex: 1 1 49%; transition: none;}
    .sub1-5 .card:hover .card-image {display: none;}
    .sub1-5 .card::after {display: none;}
    .sub1-5 .expand-left:hover .card-content {transform: translateX(0);}
    .sub1-5 .card:hover .big-title {display: none;}
    .sub1-5 .card .info-group {margin-bottom: 30px;}
    .sub1-5 .card:hover .info-group {transform: translateY(0);}
    .sub1-5 .card:hover .info-group * {color: #333;}
    .sub1-5 .card:hover .card-inner > .img {opacity: 1;}
    .sub1-5 .card-row:first-child .card .card-image img {
        max-height: 280px;
        width: auto !important;
    }
    /* sub1_5 */

    /* sub1_5_1 */
    .sub1-5-1 .introduce .txt-box .title {
        font-size: 30px;
        line-height: 40px;
    }
    .sub1-5-1 .introduce .txt-box .desc {
        line-height: 28px;
        font-size: 18px;
    }
    .sub1-5-1 .introduce .txt-box .desc br {display: none;}
    .sub1-5-1 .char .char-item .txt-box .desc br {display: none;}
    .sub1-5-1 .char {
        gap: 20px;
        padding-left: 50px;
        padding-right: 50px;
    }
    .sub1-5-1 .char .char-item {
        width: 37%;
        padding: 20px;
        flex-direction: column;
    }
    .sub1-5-1 .char .char-item .txt-box {text-align: center;}
    .sub1-5-1 .process-swiper {height: 76vh;}
    .sub1-5-1  .process-swiper .swiper-slide {height: auto !important;}
    .sub1-5-1  .process-swiper .swiper-slide-active {transform: none;} 
    .sub1-5-1 .swiper-button-prev {left: 30% !important;}
    .sub1-5-1 .swiper-button-next {right: 30% !important;}
    /* sub1_5_1 */
    
    /* sub1_5_4 */
    .sub1-5-4 .socks .socks-item .img-box {border-radius: 50px 0 50px 0;}
    .sub1-5-4 .socks .socks-item .img-box img {width: 80%;}
    .sub1-5-4 .socks .socks-item .txt-box .title {font-size: 25px;}
    .sub1-5-4 .socks .socks-item .txt-box .desc {
        font-size: 16px;
        line-height: 23px;
    }
    .sub1-5-4 .socks .socks-item .txt-box .desc br {display: none;}
    /* sub1_5_4 */

    /* sub2_1 */
    .disease .disease-item .img-box img {width: 100%;}
    .disease .disease-item .txt-box .title {font-size: 50px;}
    .disease .disease-item .txt-box .title.mid {font-size: 50px;}
    .disease .disease-item .txt-box .title.small {font-size: 40px;}
    .disease .disease-item .txt-box .sub-title {font-size: 20px;}
    .disease .disease-item .txt-box .rec {font-size: 16px;}
    /* sub2_1 */

    /* sub2_2 */
    .chart-wrapper {display: none;}
    .sub-page .title-box .main-title {font-size: 30px;}
    .sub-page .sub-intro .txt-box h3 {
        font-size: 30px;
        line-height: 35px;
    }
    .sub-page .sub-intro .txt-box .desc {
        font-size: 16px;
        line-height: 25px;
    }
    .sub-page .sub-intro .txt-box .btn {font-size: 20px;}
    .sub-cont-title .main-title {
        font-size: 30px;
        line-height: 40px;
    }
    .sub-cont .sub-cont-title .desc {
        font-size: 16px;
        line-height: 25px;
    }
    .age img {width: 70%; display: block !important;}
    .sub-cont:not(.age){
        width: 90%;
        margin: 0 auto;
    }
    .symptoms .sub-cont-item .txt-box .item-title {font-size: 30px;}
    .symptoms .sub-cont-item .txt-box .desc {font-size: 16px;}
    .feet .txt-box .main-title {font-size: 30px;}
    .feet .txt-box .desc {
        font-size: 16px;
        line-height: 25px;
    }
    .comfortable .sub-cont-item .txt-box .item-title {font-size: 30px;}
    .comfortable .sub-cont-item .txt-box .desc {font-size: 16px;}
    .different .sub-cont-item .txt-box .item-title {font-size: 28px;}
    .different .sub-cont-item .txt-box .desc {font-size: 16px;}
    .different .sub-cont-item.neo-shoes .item-title {font-size: 30px;}
    .different .sub-cont-item.neo-shoes .desc {font-size: 18px;}
    /* sub2_2 */

    /* sub2_3 */
    .prevent .sub-cont-item .txt-box .item-title, .socks .sub-cont-item .txt-box .item-title {font-size: 20px;}
    .prevent .sub-cont-item .txt-box .desc {
        font-size: 16px;
        line-height: 20px;
    }
    .socks .sub-cont-item .txt-box .desc {font-size: 18px;}
    .socks .sub-cont-item .txt-box .item-title::after {top: -58%;}
    .products .sub-cont-inner .sub-cont-item .txt-box .main-title {font-size: 25px;}
    .products .sub-cont-inner .sub-cont-item .txt-box .main-title {font-size: 25px;}
    .products .sub-cont-inner .sub-cont-item .txt-box .desc li {    font-size: 16px;}
    .products .sub-cont-item-wrap .sub-cont-item {padding: 30px 50px 30px 30px !important;}
    .products .sub-cont-item-wrap .sub-cont-item .img-box {padding: 30px !important;}
    /* sub2_3 */
    
    /* sub3_1 */
    .tab-item .depth2 li a {
    font-size: 16px;
padding: 0;}
.sub3-1 .thumb-list {
    width: 55px;}
.sub3-1 .info-box .spec-list li {width: auto;}
.sub3-1 .care .title-box .desc, .sub3-1 .detali .title-box .desc {
        font-size: 20px;
    line-height: 30px;
    }
.sub3-1 .care .title-box, .sub3-1 .detali .title-box {
    padding-bottom: 50px;
}
    .sub3-1 .care .care-item .title {
        font-size: 20px;
    }
    .sub3-1 .care .care-item .desc {
        font-size: 16px;
        line-height: 25px;
    }
    .sub3-1 .care .care-item {width: 30%;}
.sub3-1 .care .care-item .desc br {display: none;}
.sub3-1 .detali .title-box .sub-title {
    font-size: 16px;
    padding-bottom: 30px;
}
.sub3-1 .info-box .title-box .main-title, 
.sub3-1 .graph .title-box .main-title {
        font-size: 28px;
}
    .sub3-1 .graph .txt-box .desc {
        font-size: 18px;
    }
    /* sub3_1 */
    
    /* sub3_2 */
    .sub3-2 .nth-point {   padding: 0 100px 100px;
}
    .sub3-2 .use .txt-box {
        padding-left: 100px;
    }
    .sub3-2 .orthotic .top .img-box {
    width: 45%;}
    .sub3-2 .orthotic .top .txt-box {
    width: 55%;}
    /* sub3_2 */

    /* sub3_4 */
.sub3-4 .kind {    padding: 150px 100px; }
.sub3-4 .kind .kind-item img {
    width: 230px;
    height: 300px;}
.sub3-4 .kind .kind-item p {
    font-size: 18px;}











    
    /* sub3_4 */

        /* sub3_7 */
.sub3-7 .point .txt-box .title {
    font-size: 30px;
}
.sub3-7 .point .txt-box .desc {
    font-size: 23px;
line-height: 35px;}
    /* sub3_7 */

    /* sub3_9 */
    .sub3-9 .detali .title-box {
    padding-bottom: 100px;
}
    .sub3-9 .detali .title-box:last-child {
    padding-bottom: 0;
}
    /* sub3_9 */

    /* sub4_1 */
    .sub4-1 .contact .contact-inner .sub-title {font-size: 20px;}
    .sub4-1 .contact .contact-inner .title {font-size: 40px;}
    .sub4-1 .contact .contact-inner .sub-inquiry {padding: 30px 0;}
    .sub4-1 .contact {gap: 50px;}
    /* sub4_1 */

    /* sub5_1 */
    .sub5-1 .info {
        width: 100%;
        padding: 0 30px 50px 30px;
        gap: 20px;
    }
    .sub5-1 .info .top img {width: 35%;}
    .sub5-1 .info p {
        line-height: 30px;
        font-size: 20px;
    }
    .sub5-1 .info p span {font-size: 22px;}
    .sub5-1 .by ul li .desc {
        font-size: 18px;
        line-height: 25px;
    }
    /* sub5_1 */
        
    /* sub5_2 */
    .sub5-2 .key {
        flex-wrap: wrap;
        justify-content: center;
    }
    .sub5-2 .key-item {width: 40%;}
    /* sub5_2 */
}

@media screen and (max-width: 1024px) {

    .sub-top h2 {font-size: 30px;}
    .breadcrumb a {font-size: 14px;}
    .tabs li a {font-size: 16px;}

    /* sub1_1 */
    .sub1-1 .sub-intro .txt-box .desc {padding-bottom: 0; padding-top: 20px; gap: 10px;}
    .sub1-1 .sub-intro img.logo {
        left: 20%;
        width: 25%;
    }
    /* sub1_1 */
    
    /* sub1_2 */
    .sub1-2 .history {
    gap: 100px;}
    .sub1-2 .history .his-inner .txt-box .title {
        font-size: 20px;
        line-height: 30px;
    }
    .sub1-2 .history .his-inner .txt-box .desc {
        font-size: 16px;
        line-height: 25px;
    }
    .sub1-2 .history .his-inner .display-year {
        font-size: 80px;
    }
    .sub1-2 .timeline-item {
        min-width: 475px;
    }
.sub1-2 .timeline-track {
    padding-left: 150px;
}






    /* sub1_2 */

    /* sub1_3 */
    .certificate {
        padding: 100px
    }
    .certificate .txt-box .title {
        font-size: 30px;
    }
    .certificate .txt-box .desc {
        font-size: 16px;
    }
    .certificate .swiper-button-prev {
        left: 3%;
    }
    .certificate .swiper-button-next {
        right: 3%;
    }
    /* sub1_3 */

    /* sub1_4 */
    .exhibitions {padding-left: 100px;}
    .exhibitions .text-track .item {flex: 0 0 40vw;}
    .exhibitions .image-track {gap: 70px;}
    /* sub1_4 */

    /* sub1_5 */
    .sub1-5 .card {flex: 1 1 48%;}
    .sub1-5 .info-group .sub-title {font-size: 20px;}
    /* sub1_5 */

    /* sub1_5_1 */
    .sub1-5-1 .introduce {gap: 50px;}
    .sub1-5-1 .introduce .txt-box .title {
        font-size: 25px;
        line-height: 35px;
    }
    .sub1-5-1 .introduce .txt-box .desc {
        line-height: 25px;
        font-size: 16px;
    }
    .sub1-5-1 .process-swiper {height: 78vh;}
    .sub1-5-1 .swiper-button-next, .sub1-5-1 .swiper-button-prev, 
    .certificate .swiper-button-next, .certificate .swiper-button-prev {
        width: 40px;
        height: 40px;
    }
    .sub1-5-1 .swiper-button-next {
        right: 26.5% !important;
    }
    .sub1-5-1 .swiper-button-prev {
        left: 26.5% !important;
    }
    /* sub1_5_1 */
    
    /* sub1_5_4 */
    .sub1-5-4 .title-box {padding: 100px 0 50px !important;}
    /* sub1_5_4 */


    /* sub2_1 */
    .disease .disease-item {height: 730px;}
    .disease .disease-item .txt-box .rec {margin: 0;}
    .disease .disease-item .txt-box .rec {
        font-size: 14px;
        gap: 10px;
        padding: 15px 20px;
        width: 100%;
    }
    /* sub2_1 */

    /* sub2_2 */
    .sub-page .title-box {padding: 100px 0;}
    .sub-page .title-box .sub-title {font-size: 16px;}
    .sub-page .sub-intro .txt-box h3 {
        font-size: 25px;
        line-height: 30px;
    }
    .sub-page .sub-intro .txt-box .desc {font-size: 14px;}
    .sub-page .sub-intro .txt-box .btn {
        font-size: 16px;
        padding: 15px 20px;
    }
    .symptoms .sub-cont-item .txt-box .item-title {font-size: 25px;}
    .symptoms .sub-cont-item .txt-box .desc {font-size: 14px;}
    .comfortable .sub-cont-inner {gap: 30px;}
    .comfortable .sub-cont-item {padding: 30px; width: 33%;}
    .comfortable .sub-cont-item .txt-box .item-title {font-size: 25px;}
    .comfortable .sub-cont-item .txt-box .desc {font-size: 14px;}
    .comfortable .sub-cont-item .txt-box .desc br {display: none;}
    .different .sub-cont-item .txt-box .item-title {font-size: 22px;}
    .different .sub-cont-item .txt-box .desc {font-size: 14px;}
    .different .sub-cont-item.neo-shoes .item-title {font-size: 25px;}
    .different .sub-cont-item.neo-shoes .desc {font-size: 16px;}
    .different .sub-cont-item.neo-shoes .item-title::after {
        width: 100px;
        height: 2px;
    }
    /* sub2_2 */

    /* sub2_3 */
    .products .sub-cont-inner {flex-direction: column;}
    .products .sub-cont-inner .sub-cont-item .img-box {
        padding: 30px;
        width: 50%;
        display: flex;
        justify-content: center;
    }
    .products .sub-cont-inner .sub-cont-item {padding: 30px;}
    .products .sub-cont-inner .sub-cont-item .img-box img {width: 80%;}
    .products .sub-cont-inner .sub-cont-item {display: flex; gap: 30px;}
    .products .sub-cont-item-wrap {gap: 30px;}
    /* sub2_3 */

    /* sub3_1 */
        .tab-item .depth2 li a {
        font-size: 14px;}
.sub3-1 .product-content {flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}
.sub3-1 .info-box {
    width: 100%;
    text-align: center;
}
.sub3-1 .info-box .title-box .sub-title,
.sub3-1 .info-box .title-box .main-title {text-align: center;}
.sub3-1 .info-box .gender {    justify-content: center;}
.sub3-1 .info-box .spec-list {    align-items: center;}
    .sub3-1 .info-box .spec-list li {
         width: max-content;
    }
.sub3-1 .care .care-item .title {
    padding-top: 30px;
    font-size: 18px;
}
    .sub-page .title-box .main-title {
        font-size: 28px;
    }

.sub3-1 .graph {
    gap: 50px;}
    .sub3-1 .info-box .title-box .sub-title, .sub3-1 .graph .title-box .sub-title {
        font-size: 14px;
    }
    /* sub3_1 */

    /* sub3_2 */
    .main-title, .sub3-2 .use .title-box .main-title, .sub3-2 .orthotic .title-box .main-title {
        line-height: 35px;
        font-size: 26px;
    }
.sub3-2 .use .title-box {
    padding: 0 0 30px;
}
    .sub3-2 .use .desc {
        font-size: 18px;
        line-height: 30px;
    }
.sub3-2 .use {
    height: 70vh;}
    .sub3-2 .orthotic .top .txt-box {
        border-radius: 100px 0 0 0;
        padding: 100px;
    }
    .sub3-2 .orthotic .top .txt-box .small-title {
        font-size: 16px;
    }
    .sub3-2 .orthotic .top .txt-box .desc, .sub3-2 .orthotic .top .txt-box .desc:last-child {
        font-size: 16px;
        line-height: 25px;
    }
.sub3-2 .orthotic .top .txt-box .title-box .desc br {
    display: none;
}





    /* sub3_2 */

    /* sub3_4 */
    .sub3-4 .kind .kind-item img {
        width: 185px;
        height: 250px;
    }


    /* sub3_4 */


     /* notice */
     .recruit__table_row .col.title {font-size: 18px !important;}
    .recruit__table_row {padding: 30px 40px !important;}
    .recruit__table_row .col.writer {font-size: 14px !important;}
    .recruit__table_row .col.date {font-size: 16px !important;}
    .recruit__table_row .view img {width: 100%;}
    .recruit__table_row .left {width: 85% !important;}
     /* notice */

     /* sub4_1 */
    .sub4-1 .contact .contact-inner .title {font-size: 35px;}
    .sub4-1 .contact .contact-inner .sub-inquiry input, .sub4-1 .contact .contact-inner .sub-inquiry textarea {font-size: 18px;}
    .sub4-1 .contact .btn {padding: 15px 30px;}
    .sub4-1 .contact .btn button {font-size: 20px;}
    /* sub4_1 */ 

     /* sub5_1 */
    .sub5-1 .info p {font-size: 18px;}
    /* sub5_1 */
}

@media screen and (max-width: 768px) {
    .sub-top {gap: 20px;}
    .sub-top h2 {
        font-size: 25px;
        text-align: center;
    }
    .tabs li {width: 30%;}
    .breadcrumb {
        display: flex;
        align-items: center;
    }
    .breadcrumb a {
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    .tabs li a {font-size: 14px;}

    /* sub1_1 */
    .sub1-1 {padding-bottom: 0px !important;}
    .sub1-1 .sub-intro {
        gap: 50px !important;
        padding-right: 0;
    }
    .sub-page .sub-intro img {width: 100%;}
    .sub1-1 .sub-intro img.bg {
        top: 35%;
        width: 100%;
    }
    .sub1-1 .sub-intro .txt-box {padding: 0 50px;}
    .sub1-1 .sub-intro .txt-box .img {width: 60%;}
    .sub1-1 .sub-intro .txt-box .mark {
        width: 25%;
        position: unset;
        float: right;
    }
    .sub1-1 .sub-intro img.logo {display: none;}
    /* sub1_1 */
    
    /* sub1_2 */
    .sub1-2 .history {
            flex-direction: column;
            height: auto;
            padding-bottom: 200px;
    }
    .sub1-2 .history .img-box {
        width: 80%;
    }
    .sub1-2 .history .his-inner {
        width: 100%;
        padding: 0 100px;
        height: auto;
    }
    .sub1-2 .timeline-track {
        flex-direction: column;
        padding: 0;
    }
    .sub1-2 .history .his-inner .display-year {
        display: none;
    }
.sub1-2 .timeline-item .bar {display: none;}
.sub1-2 .timeline-item .content .month {
    color: #0066AF;
}
.timeline-item:first-child::before,
.timeline-item:first-child::after,
.sub1-2 .timeline-item:last-child::before {display: none;}
.sub1-2 .timeline-item .content p br {display: none;}
    .sub1-2 .timeline-item .content p {
        width: 90%;
    }
    .sub1-2 .bg {
        bottom: 50px;
    }





.sub-page .sub-video {
        width: 90%;
    margin-right: auto;
}

    /* sub1_2 */
    
    /* sub1_3 */
    .certificate-swiper .slide img {max-width: 80%;}
    .certificate {padding: 100px 50px;}
    .certificate .swiper-button-next, .certificate .swiper-button-prev {opacity: 0;}
    .certificate .txt-box .title {font-size: 25px;}
    /* sub1_3 */

    /* sub1_4 */
    .sub1-4 {padding-bottom: 150px !important;}
    .sub1-4 .bg {right: 50px;}
    .exhibitions {
        padding: 0 50px;
        height: auto;
    }
    .exhibitions-sticky {
        position: static;
        height: auto;
        overflow: unset;
    }
    .exhibitions .image-track {
        flex-direction: column;
        gap: 50px;
        will-change: unset;
        width: 100%;
        transform: none !important;
        margin-bottom: 100px;
    }
    .exhibitions .image-track .item {
        max-width: unset;
        height: 100%;
        width: 100%;
        flex: unset;
    }
    .exhibitions .image-track img {
        width: 100%;
        display: block;
        height: auto;
        object-fit: unset;
    }
    .exhibitions .text-track {
        flex-direction: column;
        transform: none !important;
        gap: 50px;
        padding: 0 0 100px 0;
    }
    .exhibitions .text-track .item {flex: none;}
    .exhibitions .text-track .item .year::before {display: none;}
    .exhibitions .text-track .item .year {padding-left: 20px;}
    /* sub1_4 */
    
    /* sub1_5 */
    .sub1-5 {padding-bottom: 100px !important;}
    .sub1-5 .card-grid {padding: 0 50px;}
    .sub1-5 .card {flex: 1 1 48%;}
    .sub1-5 .card-content {padding: 30px;}
    .sub1-5 .info-group .sub-title {font-size: 16px;}
    .sub1-5 .info-group .title {font-size: 25px;}
    .sub1-5 .card-inner .info-group .title .img {display: none;}
    .sub1-5 .info-group .desc {
        font-size: 14px;
        height: 80px;
    }
    .sub1-5 .info-group .desc br {display: none;}
    .sub1-5 .card .card-inner > .img {width: 40px;}
    /* sub1_5 */

    /* sub1_5_1 */
    .sub1-5-1 .title-box {padding: 100px 0 !important;}
    .sub1-5-1 .process-tab {padding: 0 20px;}
    .sub1-5-1 .process-tab a {font-size: 14px;}
    .sub1-5-1 .introduce {padding: 100px 50px;}
    .sub1-5-1 .introduce .txt-box .title {
        font-size: 20px;
        line-height: 30px;
    }
    .sub1-5-1 .swiper-button-prev {left: 20% !important;}
    .sub1-5-1 .swiper-button-next {right: 20% !important;}
    /* sub1_5_1 */
    
    /* sub1_5_4 */
    .sub1-5-4 .title-box {padding: 100px 0 50px !important;}
    .sub1-5-4 .socks .socks-item .txt-box .title {font-size: 16px;}
    .sub1-5-4 .socks .socks-item .txt-box .desc {
        font-size: 13px;
        line-height: 20px;
    }
    .sub1-5-4 .socks {
        flex-direction: column;
        gap: 50px;
    }
    .sub1-5-4 .socks .socks-item {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
    .sub1-5-4 .socks .socks-item .img-box {width: 40%;}
    .sub1-5-4 .socks .socks-item .txt-box {width: 60%;}
    /* sub1_5_4 */

    /* sub2_1 */
    .sub2-1 {margin-bottom: 100px;}
    .disease .disease-item {
        height: 650px;
        width: 100%;
    }
    .disease .disease-item .txt-box .sub-title br {display: block;}
    .disease .disease-item .txt-box .rec {margin: 30px 0 0;}
    .disease .disease-item.even {border-right: none;}
    /* sub2_1 */

    /* sub2_2 */
    .sub-intro {padding-bottom: 100px;}
    .sub-page .title-box .sub-title {font-size: 12px;}
    .sub-page .title-box .main-title {font-size: 20px;}
    .sub-page .sub-intro {flex-direction: column;}
    .sub-page .sub-intro img {
        width: 85%;
        margin-right: auto;
    }
    .sub-page .sub-intro .txt-box h3 {
        font-size: 20px;
        line-height: 25px;
        padding-bottom: 20px;
    }
    .sub-page .sub-intro .txt-box .desc {padding-bottom: 30px;}
    .sub-cont-title .main-title {
        font-size: 20px;
        line-height: 30px;
    }
    .sub-cont .sub-cont-title .desc {
        font-size: 14px;
        line-height: 20px;
    }
    .symptoms .sub-cont-item .txt-box .item-title {font-size: 20px;}
    .symptoms .sub-cont-inner {flex-direction: column;}
    .symptoms .sub-cont-inner .sub-cont-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .symptoms .sub-cont-item img {width: 80%;}
    .feet .txt-box .main-title {font-size: 20px;}
    .feet .txt-box .desc {
        font-size: 14px;
        line-height: 20px;
    }
    .comfortable .sub-cont-inner {align-items: center; flex-direction: column;}
    .comfortable .sub-cont-item {width: 80%;}
    .comfortable .sub-cont-item .txt-box .item-title br {display: none;}
    .comfortable .sub-cont-item .txt-box .item-title {font-size: 20px;}
    .comfortable > img {width: 40%;}
    .different .sub-cont-item .txt-box .item-title {font-size: 18px;}
    .different .sub-cont-item.neo-shoes .item-title {font-size: 20px;}
    .different .sub-cont-item.neo-shoes .desc {font-size: 15px;}
    .different .sub-cont-item.neo-shoes .item-title::after {
        width: 80px;
        bottom: 25%;
        height: 2px;
    }
    .sub-page {padding-bottom: 0;}
    .sub-cont.people,  
    .sub-cont.different {padding-top: 0;}
    .people .sub-cont-title {padding-bottom: 0;}
    /* sub2_2 */

    /* sub2_3 */
    .prevent .sub-cont-inner {flex-wrap: wrap;}
    .prevent .sub-cont-item {width: 45%;}
    .prevent .sub-cont-item .txt-box {height: auto;}
    .prevent .sub-cont-item .txt-box .item-title, 
    .socks .sub-cont-item .txt-box .item-title {font-size: 18px;}
    .prevent .sub-cont-item .txt-box .desc {
        font-size: 14px;
        line-height: 20px;
    }
    .socks .sub-cont-item .txt-box .desc {font-size: 16px;}
    .products .sub-cont-inner .sub-cont-item .txt-box .main-title {font-size: 20px;}
    .products .sub-cont-inner .sub-cont-item .txt-box {padding-top:0;}
    .products .sub-cont-inner .sub-cont-item .txt-box .desc {font-size: 16px;}
    /* sub2-3 */

    /* sub3-1 */
    .tabs .depth2 li {
        width: 100%;
    }
        .sub3-1 .product-content {
        padding: 0 100px 100px;
    }
    .sub3-1 .info-box .title-box .sub-title, .sub3-1 .graph .title-box .sub-title {
        font-size: 12px;
    }
    .sub3-1 .info-box .title-box .main-title, .sub3-1 .graph .title-box .main-title {
        font-size: 20px;
        line-height: 30px;
    }
    .sub3-1 .info-box .gender div {
        font-size: 14px;
    }

    .sub3-1 .info-box .desc {
        font-size: 16px;
        line-height: 25px;
        letter-spacing: -0.25px;
    }
    .sub3-1 .info-box .spec-list li {
        font-size: 14px;
    }
    .sub3-1 .care .title-box .desc, .sub3-1 .detali .title-box .desc {
        font-size: 16px;
        line-height: 25px;
        padding-top: 30px;
    }
    .sub3-1 .care .title-box .desc br {display: none;}
        .sub3-1 .care .care-inner {
            flex-direction: column;
    }
    .sub3-1 .care .care-item {
        width: 100%;
    }
.sub3-1 .care {
    padding-bottom: 100px;
}
    .sub3-1 .detali .title-box .sub-title {
        font-size: 14px;
           font-weight: 400;
    }
    .sub3-1 .detali .img-box {
        padding: 0 50px;
    }
.sub3-1 .point .img-box {transform: scale(1.2) !important;}
.sub3-1 .graph {flex-direction: column; padding: 100px;}
    .sub3-1 .graph .txt-box,
    .sub3-1 .graph .img-box {
        width: 100%;
    }
.sub3-1 .graph .title-box .main-title br{ display: none;}
.sub3-1 .point {
    overflow: hidden;
}




    /* sub3-1 */
    
    /* sub3-2 */
    .main-title, .sub3-2 .use .title-box .main-title, .sub3-2 .orthotic .title-box .main-title {
        line-height: 30px;
        font-size: 20px;
    }
    .sub3-2 .use .desc {
        font-size: 15px;
        line-height: 25px;
    }
    .sub3-2 .orthotic .top .img-box {
        width: 100%;
        justify-content: center;
    }
.sub3-2 .orthotic .top {
    flex-direction: column;
}
    .sub3-2 .orthotic .top .txt-box {
        width: 90%;
        margin-left: auto;
    }













    /* sub3-2 */

    /* sub3-4 */
.sub3-4 .kind {gap: 0;}
    .sub3-4 .kind .kind-item img {
        width: 130px;
        height: 200px;
    }
.sub3-4 .kind .kind-item p {
    font-size: 16px;}
    /* sub3-4 */

            /* sub3_7 */
.sub3-7 .point .txt-box .title {
    font-size: 25px;
}
    .sub3-7 .point .txt-box .desc {
        font-size: 18px;
        line-height: 30px;
    }
    /* sub3_7 */

    /* sub3-9  */
        .sub3-9 .detali .title-box {
    padding: 50px 0;
}
    /* sub3-9  */

     /* sub4_1 */
    .sub4-1 {padding-bottom: 100px;}
    .sub4-1 .contact {padding-right: 50px;}
    .sub4-1 .contact .contact-inner .sub-title {font-size: 18px;}
    .sub4-1 .contact .contact-inner .title {font-size: 25px;}
    .sub4-1 .contact .contact-inner .sub-inquiry > div {gap: 10px;}
    .sub4-1 .contact .contact-inner .sub-inquiry input, 
    .sub4-1 .contact .contact-inner .sub-inquiry textarea {font-size: 16px;}
    .sub4-1 .contact .contact-inner .sub-inquiry {gap: 10px;}
    .sub4-1 .contact .btn button {font-size: 18px;}
    /* sub4_1 */

    /* notice */
    .recruit__list_wrap {padding: 0 50px 100px !important;}
    .recruit__table_row {padding: 30px 20px !important;}
    .recruit__table_row .view {
        width: 15%;
        text-align: right;
    }
    .recruit__table_row .view img {width: 60%;}
    .btn_write {font-size: 16px !important;}
    .view__wrap, .write__wrap {margin: 100px 50px !important;}
    /* notice */

    /* sub5_1 */
    .sub5-1 {padding: 0 50px 100px;}
    .sub5-1 .info p span {font-size: 20px;}
    .sub5-1 .info p {
        line-height: 23px;
        font-size: 16px;
    }
    .sub5-1 .info {
        padding: 0 0 50px 0;
        gap: 0;
    }
    .sub5-1 .map {height: 400px;}
    .sub5-1 .map iframe {height: 100%;}
    .sub5-1 .by ul {padding-top: 50px;}
    .sub5-1 .by ul li .title {
        font-size: 20px;
    }
    .sub5-1 .by ul li .desc {
        font-size: 15px;
        line-height: 23px;
    }
    .sub5-1 .by ul li:first-child img {width: 50%;}
    .sub5-1 .by ul li:last-child img {width: 60%;}
    /* sub5_1 */

    /* sub5_2 */
    .sub5-2 .key {padding-bottom: 100px;}
    .sub5-2 .key-item {width: 48%;}
    .sub5-2 .num {font-size: 20px;}
    .sub5-2 .title {font-size: 25px;}
    .sub5-2 .sub-title {font-size: 16px;}
    .sub5-2 .icon {width: 60px;}
    .sub5-2 .key-item:hover .hidden {transform: translate(-50%, -30px);}
    /* sub5_2 */
}

@media screen and (max-width: 414px) {
    .sub-top {
        background-position-x: -350px; padding-top: 30px;
        gap: 10px;
    }
    .sub-top h2 {font-size: 20px;}
    .breadcrumb {color: rgb(255 255 255 / 60%);}
    .breadcrumb a {color: rgb(255 255 255 / 60%);}
    .tabs {display: none;}
    

    /* sub1_1 */
    .sub1-1 .sub-intro .txt-box .mark {width: 35%;}
    .sub1-1 .sub-intro .txt-box .img {width: 80%;}
    /* sub1_1 */
    
    /* sub1_2 */
    .sub1-2 .history .img-box .move-img {
        left: -43px;
    }
    .sub1-2 .history {
        gap: 50px;
    }
    .sub1-2 .history .his-inner {
        padding: 0 20px;}
    .sub1-2 .history .his-inner .txt-box .title {
        font-size: 17px;
        line-height: 28px;
    }
    .sub1-2 .history .his-inner .txt-box .title br,
.sub1-2 .history .his-inner .txt-box .desc br {display: none;}
.sub1-2 .history .his-inner .txt-box .desc {
    padding-top: 20px;
    font-size: 14px;
        line-height: 23px;
}
    .sub1-2 .timeline-item .content p {
        font-size: 14px;
    }
    .sub1-2 .history {
        padding-bottom: 150px;
    }

.sub1-2 .bg {right: 20px; width: 60%;}
    .sub1-2 .timeline-item {
        min-width: auto;
    }
.sub1-2 .timeline-item .content {    padding-right: 0;}


    /* sub1_2 */
    
    /* sub1_3 */
    .certificate {padding: 50px 20px;}
    .certificate .txt-box .title {font-size: 18px;}
    .certificate .txt-box .desc {font-size: 13px;}
    .certificate .swiper-box {padding-top: 50px;}
    .certificate .swiper-box {width: 70%;}
    .certificate .certificate-swiper .slide p {font-size: 14px;}
    .certificate .certificate-swiper .slide p br {display: none;}
    .certificate .swiper-button-next, .certificate .swiper-button-prev {
        opacity: 1;
        width: 40px;
        height: 40px;
    }
    .certificate .swiper-button-prev {left: 6%;}
    .certificate .swiper-button-next {right: 6%;}
    .certificate .navigation_wrapper {top: 50%;}
    /* sub1_3 */

    /* sub1_4 */
    .exhibitions {padding: 0 20px;}
    .exhibitions .image-track {
        gap: 20px;
        margin-bottom: 50px;
    }
    .exhibitions .text-track .item ul {padding: 0;}
    .exhibitions .text-track .item .year {
        font-size: 25px;
        padding: 0 0 20px 0;
    }
    .exhibitions .text-track .item ul li .hat {
        font-size: 18px; 
        width: 15px;
    }
    .exhibitions .text-track .item ul li .desc {font-size: 14px;}
    .sub1-4 .bg {width: 60%;}
    /* sub1_4 */
    
    /* sub1_5 */
    .sub1-5 .card-grid {padding: 0 20px;}
    .sub1-5 .card-inner {padding: 30px 0;}
    .sub1-5 .card-content {padding: 20px;}
    .sub1-5 .info-group .desc {height: auto;}
    /* sub1_5 */
    
    /* sub1_5_1 */
    .sub1-5-1 .process-tabs {display: none;}
    .sub1-5-1 .introduce {
        padding: 0 20px 100px;
        flex-direction: column;
    }
    .sub1-5-1 .introduce .left {width: 100%;}
    .sub1-5-1 .introduce .right {width: 100%;}
    .sub1-5-1 .bg {top: 15%;}
    .sub1-5-1 .char {
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 100px;
    }
    .sub1-5-1 .char .char-item {
        width: 100%;
        flex-direction: row;
    }
    .sub1-5-1 .char .char-item .icon-box {width: 20%;}
    .sub1-5-1 .char .char-item .icon-box img {width: 100%;}
    .sub1-5-1 .char .char-item .txt-box {
        text-align: left;
        width: 80%;
    }
    .sub1-5-1 .char .char-item .txt-box .sub-title {font-size: 18px;}
    .sub1-5-1 .char .char-item .txt-box .desc {font-size: 13px;}
    .sub1-5-1 .process-swiper {
        height: auto;
        padding: 100px 80px;
    }
    .sub1-5-1 .swiper-slide .txt-box {padding: 20px;}
    .sub1-5-1 .swiper-slide .txt-box .sub-title {font-size: 16px;}
    .sub1-5-1 .swiper-slide .txt-box .desc {font-size: 13px;}
    .sub1-5-1 .swiper-button-next {    right: 5% !important;}
    .sub1-5-1 .swiper-button-prev {left: 5% !important;}
    /* sub1_5_1 */

    /* sub1_5_4 */
    .sub1-5-4 .over {padding: 0 20px 100px;}
    .sub1-5-4 .socks .socks-item {flex-direction: column;}
    .sub1-5-4 .socks .socks-item .img-box {width: 70%;}
    .sub1-5-4 .socks .socks-item .txt-box {width: 100%;}
    /* sub1_5_4 */

    /* sub2_1 */
    .disease {margin: 0 20px;}
    .disease .disease-item {
        height: auto;
        flex-direction: column;
        gap: 20px;
    }
    .disease .disease-item .txt-box {
        gap: 10px;
        padding: 20px;
    }
    .disease .disease-item .item-inner {
        position: static; 
        opacity: 1;
        transition:none;
        transform: none;
    }
    .disease .disease-item .txt-box .title {font-size: 25px !important;}
    .disease .disease-item .txt-box .sub-title {font-size: 18px;}
    .disease .disease-item .txt-box .sub-title br {display: none;}
    .disease .disease-item .txt-box .desc {
    font-size: 14px;
    line-height: 20px;
}
    .disease .disease-item .txt-box .rec {
        margin: 10px 0 0;
        width: auto;
        gap: 20px;
    }
    .disease .disease-item .txt-box .rec br {display: block;}
    .disease .disease-item .txt-box .rec span span {display: none;}

    /* sub2_1 */

    /* sub2_2 */
    .sub-page .title-box {padding: 50px 20px;}
    .sub-intro {padding-bottom: 50px;}
    .sub-cont {padding: 50px 0;}
    .sub-cont:not(.age) {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .sub-page .title-box .sub-title {padding-bottom: 10px;}
    .sub-page .sub-intro .txt-box {padding: 0 20px;}
    .sub-page .sub-intro .txt-box .desc br {display: none;}
    .sub-page .sub-intro .txt-box .btn {
        font-size: 14px;
        padding: 10px 20px;
    }
    .age .sub-cont-title {padding-left: 20px; padding-right: 20px;}
    .age img {width: 90%;}
    .symptoms .sub-cont-title .main-title br {display: none;}
    .symptoms .sub-cont-item .txt-box .item-title {padding-bottom: 10px;}
    .people .sub-cont-title {padding-bottom: 0;}
    .feet img {
        height: 400px;
        object-fit: cover;
    }
    .comfortable .sub-cont-title .desc br {display: none;}
    .comfortable > img {width: 60%;}
    .comfortable .sub-cont-item {
        padding: 20px;
        width: 85%;
    }
    .different .sub-cont-inner {flex-direction: column;}
    .different .sub-cont-title .main-title {padding: 0;}
    /* sub2_2 */

    /* sub2_3 */
    .prevent .sub-cont-item {width: 85%;}
    .socks .sub-cont-item .txt-box .item-title::after {top: -62%;}
    .products .sub-cont-inner .sub-cont-item {flex-direction: column;}
    .products .sub-cont-inner .sub-cont-item .img-box {width: 100%;}
    .products .sub-cont-inner .sub-cont-item .txt-box .main-title {font-size: 18px;}
    .products .sub-cont-inner .sub-cont-item .txt-box .desc br {display: none;}
    .products .sub-cont-inner .sub-cont-item {gap: 20px;}
    .products .sub-cont-inner .sub-cont-item .txt-box {gap: 15px;}
    .products .sub-cont-inner .sub-cont-item .txt-box .desc {font-size: 15px;}
    .products .sub-cont-inner .sub-cont-item .txt-box .sub-title {font-size: 13px;}
    .products .sub-cont-inner .sub-cont-item .txt-box .btn {
        padding: 10px 15px;
        font-size: 13px;
    }
    .products .sub-cont-item-wrap .sub-cont-item {padding: 30px !important;}
    /* sub2_3 */
    
    /* sub3_1 */
    .sub3-1 .product-content {
        padding: 0 20px 50px;
                flex-direction: column;
    }
.sub3-1 .thumb-list {
    flex-direction: row;
    width: 100%;
    justify-content: center;
}
    .sub3-1 .main-img-box {
        height: auto;
        width: 100%;
    }
        .sub3-1 .info-box .desc {
        font-size: 14px;
        line-height: 23px;}
    .sub3-1 .info-box .spec-list {padding-top: 30px;}
    .sub3-1 .info-box .spec-list li {
        width: auto;
        text-align: left;
        padding: 10px 20px 10px 50px;
    }
    .sub3-1 .care,
    .sub3-1 .detali {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 50px;
    }
    .sub3-1 .title-box {
        padding: 50px 0;
    }
    .sub3-1 .detali .title-box .sub-title {
        font-size: 12px;
        padding-bottom: 20px;
    }
    .sub3-1 .detali .img-box {
        padding: 0;
    }

    .sub3-1 .point .img-box {
        transform: scale(1.5) !important;
    }
.sub3-1 .point .img-:last-child img {
    transform: translateX(-20px);
}
    .sub3-1 .graph {
        padding: 50px 20px;
    }
    .sub3-1 .graph .txt-box .desc {
        font-size: 14px;
        padding-top: 30px;
        line-height: 25px;
    }
    .sub3-1 .graph .title-box .main-title {
        font-size: 18px;}
    .sub3-1 .info-box .title-box .sub-title, .sub3-1 .info-box .title-box .main-title {
        text-align: left;
    }
    .sub3-1 .info-box {
        text-align: left;
    }
    .sub3-1 .info-box .gender {
        justify-content: flex-start;
    }
    .sub3-1 .main-img-box {
        width: 80%;
    }
    .sub3-1 .info-box .spec-list li {
        font-size: 12px;
    }
.sub3-1 .info-box .spec-list {align-items: flex-start;}









    /* sub3_1 */
    
    /* sub3_2 */
        .sub3-2 .nth-point {
        padding: 50px 20px;
    }
.sub3-2 .nth-point .img-box:last-child {
    padding: 0;
}
    .sub3-2 .nth-point .img-box img {
        width: 60%;
    }
    .sub3-2 .use .txt-box {
        padding-left: 20px;
    }
    .main-title, .sub3-2 .use .title-box .main-title, .sub3-2 .orthotic .title-box .main-title {
        line-height: 25px;
        font-size: 18px;
    }
    .sub3-2 .use {
        height: 70vh;
        padding: 50px 20px;
    }
    .sub3-2 .orthotic .top .txt-box {
        width: 95%;
    }
    .sub3-2 .orthotic .top .txt-box {
        border-radius: 50px 0 0 0;
        padding: 50px 20px 50px 30px;
    }
    .sub3-2 .orthotic .title-box .sub-title {
        font-size: 12px;
    }
    .sub3-2 .orthotic .top .txt-box .small-title {
        font-size: 14px;
    }
    .sub3-2 .orthotic .top .txt-box .desc, .sub3-2 .orthotic .top .txt-box .desc:last-child {
        font-size: 14px;
    }













    /* sub3_2 */
    
    /* sub3_4 */
    .sub3-4 .kind {
        gap: 0;
        padding: 50px 20px;
    }
    .sub3-4 .kind .kind-item img {
        width: 180px;
        height: 200px;
    }
    /* sub3_4 */
    
    /* sub3_6 */
    .sub3-6 .point .img-box:nth-child(3) {
        transform: none !important;
    }
    /* sub3_6 */

                /* sub3_7 */
.sub3-7 .point .txt-box .title {
    font-size: 18px;
}
    .sub3-7 .point:last-child .txt-box .desc br {display: none;}
    .sub3-7 .point .txt-box .desc {
       font-size: 14px;
        line-height: 25px;
        padding-top: 20px;
    }
    /* sub3_7 */


    /* notice */
    .recruit__list_wrap {padding: 0 20px 100px !important;}
    .recruit__table_row .left {width: 100% !important;}
    .recruit__table_row .view {justify-content: flex-end !important;}
    .recruit__table_row .col.title span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .recruit__table_row .col.title {
        font-size: 16px !important;
        padding: 0 !important;
    }
    .recruit__table_row .col.writer {width: auto;}
    .recruit__table_row .col.writer {font-size: 12px !important;}
    .recruit__table_row .col.date {font-size: 14px !important;}
    .recruit__table_row {padding: 20px 20px !important;}
    .view__wrap, .write__wrap {margin: 100px 20px !important;}
    /* notice */

     /* sub4_1 */
    .sub4-1 .contact {
        flex-direction: column;
        padding-right: 20px;
        align-items: flex-start;
    }
    .sub4-1 .contact .img-box {width: 100%;}
    .sub4-1 .contact .contact-inner {
        width: 100%;
        padding-left: 20px;
    }
    .sub4-1 .contact .contact-inner .sub-inquiry input, 
    .sub4-1 .contact .contact-inner .sub-inquiry textarea {font-size: 14px;}
    .sub4-1 .contact .btn button {font-size: 16px;}
    /* sub4_1 */   

     /* sub5_1 */
    .sub5-1 {padding: 0 20px 100px;}
    .sub5-1 .info {gap: 30px;}
    .sub5-1 .info .top img {width: 60%;}
    .sub5-1 .info .info-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }
    .sub5-1 .info p br {display: none;}
    .sub5-1 .map {height: 300px;}
    .sub5-1 .by ul {
        flex-direction: column;
        align-items: flex-start;
    }
    .sub5-1 .by ul li {
    width: 100%;
    align-items: flex-start;
    }
    .sub5-1 .by ul li img {
        width: 50px !important;
        right: 0;
        left: unset;
        transform: translateY(-50%);
    }
    .sub5-1 .by ul li .desc {text-align: left;}
    .sub5-1 .by ul li:nth-child(2) {
        padding: 30px 0;
        margin: 30px 0;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    /* sub5_1 */

    /* sub5_2 */
    .sub5-2 .key {padding: 0 20px 100px;}
    .sub5-2 .key-item {width: 100%;}
     /* sub5_2 */
}

@media screen and (max-width: 320px) {
    /* sub1_5_1 */
    .sub1-5-1 .process-swiper {padding: 100px 20px;}
    .sub1-5-1 .navigation_wrapper {display: none;}
    /* sub1_5_1 */

    /* sub3_4 */
        .sub3-4 .kind .kind-item img {
        width: 130px;
        height: 180px;
    }
        .sub3-4 .kind .kind-item p {
        font-size: 14px;
    }
    /* sub3_4 */
}