/* ===== 서브 히어로 ===== */
section{
    padding: 8rem 0;
}
.sub-hero{background:#fff;color:#111}
.sub-hero-inner{
  max-width:1100px;margin:0 auto;padding:56px 16px 28px;
  text-align:center;
}
.sub-kicker{
  margin:0 0 8px;font-size:12px;letter-spacing:.1em;
  color:#a3aab5;font-weight:600;
}
.sub-title{
  margin:0;font-size:32px;line-height:1.25;font-weight:800;color:#0f1114;
}
@media (max-width:560px){
  .sub-title{font-size:26px}
}
.sub-divider{
  border:0;border-top:1px solid #eceff3;margin:24px 0 0;
}

/* ===== 탭 내비 ===== */
/* 헤더가 fixed면 top 값을 헤더 높이(예: 64/72/80px)로 맞춰줘 */
.sub-tabs{
  position:sticky; top:64px; z-index:50;     /* 필요 없으면 이 줄 지워도 됨 */
  background:#fff; border-bottom:1px solid #eceff3;
}
.sub-tabs-inner{
  max-width:760px;margin:0 auto;padding:12px 16px;
  display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
}
.sub-tab{
  position:relative; display:inline-block;
  padding:8px 6px; font-size:14px; color:#9aa3af; text-decoration:none;
  transition:color .15s ease;
}
.sub-tab:hover{color:#1f5eff}
.sub-tab.is-active{color:#1f5eff;font-weight:700}
.sub-tab.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-12px;
  height:2px; background:#1f5eff; border-radius:2px;
}



/* main */
main{
    margin: 13.2rem auto 0;
    width: 95%;
    height: calc(var(--vh) * 100 - 16.8rem);
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
}
main .main_back{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(/img/main_back.jpg) no-repeat;
    background-size: cover;
    background-position: 63% bottom;
    transform-origin: center center;
    animation: zoom 1.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes zoom{
    0%{transform: scale(1.1);}
    100%{transform: scale(1);}
}
main .wrap{
    max-width: 1216px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 4%;
}
main b{
    margin-bottom: 2.4rem;
    font-weight: 500;
    font-size: 2.3rem;
    letter-spacing: -0.01em;
    color: #fff;
}
main h2{
    font-weight: 700;
    font-size: 5.2rem;
    line-height: 1.4;
    color: #fff;
}
main .text-change{
    overflow:hidden;
    display:block;
    min-height: 1.4em;
}
main .text-change span{
    display: block;
    animation: main-chamber 1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
    opacity: 0;
}
main .text-change.c2 span{
    animation-delay: .4s;
}
main .text-change.c3, main .text-change.c4{
    display: none;
}
main .text-change.c3 span{
    animation-delay: .2s;
}
main .text-change.c4 span{
    animation-delay: .4s;
}
@keyframes main-chamber {
    0%{transform:translateY(100%);}
    100% {transform:translateY(0); opacity: 1;}
}
main h4{
    margin-top: 3.2rem;
    font-weight: 200;
    font-size: 2rem;
    color: #fff;
}


/* solution */
.solution .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.solution iframe{
    margin-top: 8rem;
    width: 100%;
    aspect-ratio: 1920 / 1080;
    max-width: 1280px;
    border-radius: 2rem;
    overflow: hidden;
}


/* introduce */
.introduce{
    /* padding: 6rem 0 0; */
}
.introduce .top_box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.introduce .profile{
    position: relative;
    margin-top: 10rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 5%;
}
.introduce .profile.sb::before{
    display:none;
}
.introduce .profile::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, #FFFFFF, #ECEFF7);
    filter: blur(4px);
}
.introduce .profile img{
    margin-left: -7%;
    width: 640px;
    max-width: 60%;
    object-fit: contain;
}
.introduce .profile .text_box{
    padding: 10rem 0;width: 50%;
}
.introduce .profile .text_box h2{
    margin: 1.2rem 0 3.6rem;
}
.introduce .profile .text_box ul:first-child{
    margin-top: 0;
}
.introduce .profile .text_box ul{
    margin-top: 1.6rem;
}
.introduce .profile .text_box ul li{
    position: relative;
    font-weight: 400;
    font-size: clamp(14px, 1.8rem, 18px);
    line-height: 1.5;
    padding-left: 1.2rem;
    color: #333;
}
.introduce .profile .text_box ul li::before{
    content: '';
    position: absolute;
    left: 0;
    top: .6em;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #191919;
}


/* problem */
.problem{
    width: 100%;
    margin: 4rem 0;
}
.problem .problem-slide {
    margin-top: 8rem;
    width: 100%;
}
.problem .problem-slide .swiper-wrapper {
    transition-timing-function: linear !important;
}
.problem .problem-slide .swiper-slide{
    width: fit-content;
}
.problem .problem-slide .swiper-slide img {
    height: 10rem;
    object-fit: contain;
}


/* disease */
.disease{
    padding: 12rem 0;
    background: #F4FDFA;
}
.disease .wrap{
    display: flex;
    justify-content: center;
    padding-left: 3%;
}
.disease img{
    width: 65%;
    object-fit: contain;
}


/* differentiation */
.differentiation{
    background: linear-gradient(to bottom, #FFFFFF, #F3F6F9);
    overflow: visible;
    height: calc(var(--vh) * 440);
}
.differentiation .wrap{
    height: 100%;
}
.differentiation .sticky{
    position: sticky;
    top: 8rem;
    height: calc(var(--vh) * 100 - 10rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.differentiation .fold_cards{
    position: relative;
    margin: 8rem auto 0;
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.differentiation .fold_cards .card{
    width: 100%;
    height: 75%;
    flex-shrink: 0;
    background: #fff;
    border-radius: 3.6rem;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .08);
    padding: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    transform-origin: top;
    transform: perspective(1800px);
    transition: all 1.7s;
}
.differentiation .fold_cards .card:nth-child(1) {
    background-image: url(/img/card1.jpg);
}
.differentiation .fold_cards .card:nth-child(2) {
    background-image: url(/img/card2.jpg);
}
.differentiation .fold_cards .card:nth-child(3) {
    background-image: url(/img/card3.jpg);
}
.differentiation .fold_cards .card h3{
    font-weight: 600;
    font-size: 3rem;
    letter-spacing: -0.02em;
    text-shadow: .4rem .4rem 3.5rem rgba(0, 0, 0, 0.1);
}
.differentiation .fold_cards .card p{
    font-size: 2.1rem;
    margin-top: 1.8rem;
    font-weight: 300;
    color: #D9D9D9;
    text-shadow: .4rem .4rem 3.5rem rgba(0, 0, 0, 0.1);
}
.differentiation .fold_cards .card p span{
    font-weight: 500;
    color: #fff;
}


/* graph */
.graph .container{
    margin: 8rem auto 0;
    max-width: 1216px;
    width: 100%;
    display: flex;
}
.graph .container img{
    width: 33.33%;
    object-fit: contain;
}


/* review */
.review{
    padding: 18rem 0 6rem;
}
.review .background{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 75%;
    background: var(--main);
}
.review .top_box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.review .title b{
    color: var(--sub2);
}
.review .title h2{
    color: #fff;
}
.review .review_slide{
    position: relative;
    margin-top: 6rem;
    width: 140%;
    padding: 3.6rem 0;
}
.review .review_slide .swiper-slide{
    position: relative;
    height: auto;
    padding: 5rem 5rem 6rem; 
    background-color: #fff;
    box-shadow: .9rem 1.2rem 2.4rem 1.2rem rgba(0, 0, 0, .07);
    border-radius: 2rem;
    max-width: 680px;
}
.review .review_slide .swiper-slide .profile_box{
    display: flex;
    align-items: center;
}
.review .review_slide .swiper-slide .profile_box h5{
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.004em;
    color: #555;
}
.review .review_slide .swiper-slide .profile_box p{
    display: inline-block;
    padding-left: 2rem;
    margin-left: 2rem;
    border-left: .5px solid #a9a9a9;
    font-weight: 300;
    font-size: clamp(12px, 1.8rem, 18px);
    color: #a9a9a9;
}
.review .review_slide .swiper-slide h3{
    font-weight: 600;
    margin-top: 6.2rem;
    font-size: 2.4rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: #333;
}
.review .review_slide .swiper-slide .p_box{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.review .review_slide .swiper-slide .p_box p{
    font-size: clamp(14px, 1.8rem, 18px);
    line-height: 1.5;
    letter-spacing: 0;
    color: #555;
}
.review .swiper-scrollbar {
    position: relative;
    margin-top: 6rem;
    width: 100%;
    background: rgba(62, 62, 62, .2); 
    border-radius: 8px;
    height: 8px;
}
.review .swiper-scrollbar-drag {
    background: #555; /* 이동하는 막대 색 */
    border-radius: 8px;
    height: 100%;
    transition: .3s;
}
.review button.next{
    position: absolute;
    left: -7%;
    top: 60%;
    width: 6.2rem;
    z-index: 2;
}
.review button.next img{
    width: 100%;
    object-fit: contain;
}


/* process */
.process .wrap{
    max-width: 1264px;
}
.process .card{
    margin-top: 8rem;
    border: 1px solid #D9D9D9;
    border-radius: 1.2rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.process .card .t_name{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}
.process .card .t_name button{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.2rem 1rem;
    color: #BBBBBB;
    border-bottom: 4px solid #fff;
    cursor: pointer;
    transition: .4s;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.4;
    letter-spacing: -0.02em;
}
.process .card .t_name button.on{
    color: #525A95;
    border-bottom: 4px solid #525A95;
}
.process .card .t_name button img{
    width: 2.8rem;
    object-fit: contain;
    margin-right: 1.2rem;
    display: none;
}
.process .card .t_name button.on img{
    display: block;
}
.process .card .card_contents{
    position: relative;
    width: 100%;
    height: 50rem;
}
.process .card .card_contents article{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    display: none;
}
.process .card .card_contents article.on{
    display: flex;
}
.process .card .card_contents article .l_box{
    flex: 1;
    height: auto;
    max-width: 57.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10rem;
    animation: growth_fadeIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes growth_fadeIn{
    0%{transform: translateY(3rem); opacity: 0;}
    100%{transform: translateY(0); opacity: 1;}
}
.process .card .card_contents article .l_box b{
    margin-top: 2.4rem;
    font-size: clamp(14px, 1.8rem, 18px);
}
.process .card .card_contents article .l_box p{
    color: #555;
}
.process .card .card_contents article .l_box p:first-of-type{
    margin-top: 3.6rem;
    margin-bottom: 1.5rem;
}
.process .card .card_contents article img{
    width: 500px;
    height: 100%;
    max-width: 42.5%;
    object-fit: cover;
    object-position: 75% 35%;
}
.hit{
    font-size: 2.5rem;
    font-weight: 800;
}
.hit_small{
     font-size: 1.5rem;
      color: #555;
      margin-left: 20px;

}

/* qna */
.qna{
    padding: 6rem 0;
}
.qna .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rem;
}
.qna .back_img_top{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    background: url(/img/qna_back_top.png) no-repeat;
    background-size: cover;
    background-position: center top;
    z-index: -1;
}
.qna .back_img_bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: url(/img/qna_back_bottom.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    z-index: -1;
}
.qna article{
    width: 100%;
    max-width: 1216px;
    display: flex;
    justify-content: space-between;
}
.qna article div b{
    font-family: "Literata", serif;
    font-size: 7.4rem;
    font-weight: 400;
    color: var(--sub1);
    display: block;
    margin-bottom: 2.4rem;
}
.qna article .a_box{
    margin-top: 20rem;
}
.qna article .a_box .p_box p{
    color: #222;
}
.qna article .a_box .p_box p:first-child{
    font-weight: 700;
    padding-bottom: 1.2rem;
}
.diff-kicker {
  font-size: 14px;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: .5rem;
  text-align: center;
}
.view .title h2{
    margin: 0;
}
.diff-title {
  font-weight: 800;
  line-height: 1.25;
  font-size: 28px;text-align: center;
  margin: 0 0 32px;
}
.got {
    margin-top: 60px;
}
/* view */
.view2{
 background-color: #222;
 color: #fff;
}
.view2 p{
    color: #1f5eff;
}
.view2 h2{
    color: #fff;
}
.view .view_slide{
    margin-top: 6rem;
    width: 100%;
    padding: 3rem 0;
}
.view .view_slide .swiper-slide{
    width: 1216px;
    max-width: 72%;
    border-radius: 1.2rem;
    overflow: hidden;
    transition: .2s;
}
.view .view_slide .swiper-slide-active{
    box-shadow: 0 0 3rem 0 rgba(0, 0, 0, .1);
}
.view .view_slide .swiper-slide img{
    width: 100%;
    object-fit: cover;
}
.view .view_slide button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 6.2rem;
}
.view .view_slide button img{
    width: 100%;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 0 22px 4px rgba(0, 0, 0, .08);
}
.view .view_slide button.prev{
    left: 10%;
}
.view .view_slide button.next{
    right: 10%;
}
.view  .swiper-pagination {
    position: relative;
    margin-top: 4rem;
}
.view .swiper-pagination-fraction {
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
    color: #888;
    display: none;
}
.view  .swiper-pagination-current {
    font-family: 'Noto Serif KR', serif;
    font-weight: 600;
    letter-spacing: 0.03em;    
    font-size: 4.2rem;
    line-height: 1.35;
    color: #4E515A;
}
.view  .swiper-pagination-total {
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1.35;
    color: #888;
}


/* info */
.info{
    padding: 6rem 0;
}
.info .wrap{
    max-width: 1216px;
}
.info .info_box{
    margin-top: 8rem;
    width: 100%;
    display: flex;
    border-top: 1px solid var(--sub1);
    border-bottom: 1px solid var(--sub1);
}
.info .info_box > div{
    flex: 1;
    padding: 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.info .info_box > div h3{
    color: var(--main);
}
.info .info_box .l_box{
    padding-left: 8%;
    background: rgba(238, 245, 251, .44);
    border-right: 1px solid var(--sub1);
}
.info .info_box .l_box strong{
    margin-top: 1.6rem;
    font-weight: 700;
    font-size: 4rem;
    line-height: normal;
    color: var(--sub1);
}
.info .info_box .r_box p{
    color: #7d7d7d;
}
.info .info_box .r_box p:first-of-type{
    margin-top: 1.6rem;
}
.info .info_box .r_box .time_table{
    margin-top: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.info .info_box .r_box .time_table div{
    display: flex;
    font-size: 2.4rem;
}
.info .info_box .r_box .time_table div b{
    display: block;
    width: 9.2rem;
    text-wrap: nowrap;
    font-weight: 500;
    color: #555;
    letter-spacing: .54em;
}
.info .info_box .r_box .time_table div:last-child b{
    letter-spacing: -0.04em;
}
.info .info_box .r_box .time_table div span{
    font-weight: 600;
    margin-left: 3.6rem;
    color: var(--sub1);
}


/* visit */
.visit .wrap{
    max-width: 1216px;
}
.visit #map{
    margin-top: 8rem;
    width: 100%;
    height: 50rem;
    border-radius: 1.6rem;
}
.visit .address{
    margin-top: 2.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.visit .address div{
    margin-right: auto;
    font-weight: 700;
    font-size: 2.4rem;
    color: #222;
}
.visit .address div img{
    width: 2.9rem;
    object-fit: contain;
    margin-right: 1.2rem;
}
.visit .transportation{
    margin-top: 8rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.visit .transportation > div{
    width: 100%;
    padding: 6rem;
    border-radius: 2.4rem;
    border: 1px solid #1E81CE;
    background: rgba(238, 245, 251, .12);
    display: flex;
}
.visit .transportation > div:last-child{
    background: rgba(238, 245, 251, .6);
}
.visit .transportation > div img{
    width: 8.4rem;
    object-fit: contain;
    padding-right: 6.4rem;
    padding-left: .4rem;
    box-sizing: content-box;
    border-right: 1px solid #3f64c381;
    margin-right: 6rem;
}
.visit .transportation > div .text_box{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.visit .transportation > div .text_box h3{
    font-weight: 700;
    color: #222;
}
.visit .transportation > div .text_box h4{
    font-weight: 300;
    color: #555;
}


/* sub01 */
/* Layout */
.case-sec{background:#fff;color:#0f1114}
.case-inner{
  max-width:1100px;margin:0 auto;padding:56px 16px;
  display:grid;grid-template-columns:460px 1fr;gap:40px;align-items:center;
}
@media (max-width: 900px){
  .case-inner{grid-template-columns:1fr;gap:22px}
}

/* Image card */
.case-visual{margin:0}
.case-visual img{
  display:block;width:100%;height:auto;border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}

/* Speech bubble */
.case-bubble{
  background:#eef3fb;color:#1f2937;
  padding:20px 24px;border-radius:12px;line-height:1.8;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  position:relative;margin-bottom:22px;
  font-size:15px;
}
/* 꼬리 */
.case-bubble::after{
  content:"";position:absolute;left:28px;bottom:-14px;
  width:0;height:0;border:8px solid transparent;border-top-color:#eef3fb;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.04));
}

/* Texts */
.case-title{margin:12px 0 8px;font-size:20px;font-weight:800}
.case-desc{margin:0;color:#4b5563;line-height:1.8;font-size:14px}

/* ===== Layout ===== */
.symp-sec{color: #0f1114;
    overflow: hidden;
    background: url(/img/ss.png);
    background-position: 50% 50%;
    background-size: cover;}
.symp-inner{
  max-width:1200px;margin:0 auto;padding:72px 16px;
  display:grid;grid-template-columns:minmax(320px,520px) 1fr;
  gap:36px;align-items:center;
}
@media (max-width:980px){
  .symp-inner{grid-template-columns:1fr;gap:18px}
}

/* LEFT copy */
.symp-kicker{margin:0 0 10px;font-size:13px;letter-spacing:.06em;color:#9aa3af;font-weight:600}
.symp-title{margin:0 0 22px;font-size:32px;line-height:1.25;font-weight:800}
@media (max-width:560px){ .symp-title{font-size:26px} }

/* Checklist (blue ring + check) */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checklist li{
  position:relative;padding-left:34px;font-size:15px;line-height:1.9;color:#1f2530;
}
.checklist li::before{
  content:"";position:absolute;left:0;top:0.55em;
  width:20px;height:20px;border:2px solid #1f5eff;border-radius:50%;
}
.checklist li::after{
  content:"";position:absolute;left:6px;top:0.68em;
  width:10px;height:10px;border:2px solid #1f5eff;border-left:0;border-top:0;
  transform:rotate(45deg);
}

/* RIGHT visual */
.symp-visual{margin:0;position:relative}
.symp-visual img{
  display:block;width:120%;max-width:none;height:auto;
  transform:translateX(8%);           /* 오른쪽으로 살짝 밀어 화면 끝까지 보이게 */
  filter:saturate(1.05) contrast(1.02);
}
/* 부드러운 페이드(왼쪽을 희게 블렌드) */
.symp-visual::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 35%);
  pointer-events:none;
}

/* ===== 모바일 섹션 ===== */
.care-mo{
  background:#24385a;  /* 배경 남색 (원하는 색으로 변경 가능) */
  color:#fff;
  display: none;
}
.care-wrap{
  max-width:420px;      /* 모바일 최대 폭 */
  margin:0 auto;
  padding:28px 18px 40px;
}

/* 헤더 */
.care-head{ text-align:center; margin-bottom:18px; }
.care-eyebrow{
  margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.02em; opacity:.95;
}
.care-title{
  margin:0 0 10px; font-size:22px; line-height:1.35; font-weight:900;
}
.care-sub{
  margin:0; font-size:13px; line-height:1.8; color:rgba(255,255,255,.85);
}

/* 타임라인 래퍼(세로 라인) */
.care-timeline{ position:relative; margin-top:18px; }
.care-timeline::before{
  content:""; position:absolute; left:84px; top:0; bottom:0;
  width:2px; background:rgba(255,255,255,.65);
}

/* 스텝 아이템 */
.care-step{
  display:grid; grid-template-columns:72px 1fr; gap:16px;
  position:relative; padding:16px 0;
}

/* 라인 위 하얀 점 */
.care-step::before{
  content:""; position:absolute; left:84px; top:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.18);
}

.care-ico{
  width:72px; height:72px; margin:0; border-radius:50%;
  background:rgba(255,255,255,.18); display:grid; place-items:center;
}
.care-ico img{ width:36px; height:36px; object-fit:contain; filter:invert(1) opacity(.95); }

.care-txt h3{
  margin:6px 0 6px; font-size:16px; font-weight:800;
}
.care-txt p{
  margin:0; font-size:13px; line-height:1.9; color:rgba(255,255,255,.9);
}

/* 여백 조절(첫/마지막) */
.care-step:first-child{ padding-top:6px; }
.care-step:last-child{ padding-bottom:6px; }





/* ===== Layout ===== */
.disc-why-sec{
  background:#F0F4FA;  /* 아주 연한 블루 배경 */
  color:#0f1114;
}
.disc-why-inner{
  max-width:1100px;
  margin:0 auto;
  padding:48px 16px 72px;
}

/* Illustration */
.disc-illu{ margin:0 0 28px; }
.disc-illu img{
  display:block;
  width:min(520px, 100%);
  height:auto;
}

/* Card */
.disc-card{
  background:#fff;
  border:1px solid #e6eefb;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  padding:24px;
  display:grid;
  grid-template-columns:320px 1fr;
  gap:22px;
}
@media (max-width:860px){
  .disc-card{ grid-template-columns:1fr; padding:20px; }
}

/* Card - left */
.disc-card-title{
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
  color:#1f5eff;
}
.disc-card-kicker{
  margin:0;
  font-size:12px;
  color:#8a97ad;
}

/* Card - right */
.disc-card-body p{
  margin:0 0 10px;
  color:#1d2430;
  line-height:1.9;
  font-size:14px;
}
.disc-card-body em{ font-style:normal; font-weight:700; color:#1f5eff; }




/* 영역 */
.usg-sec{background:#fff; color:#111;}
.usg-inner{max-width:1180px; margin:0 auto; padding:56px 16px 72px;}
.usg-title{margin:0 0 12px; font-size:28px; font-weight:800;}
.usg-desc{margin:0 0 28px; color:#60656f; line-height:1.9; max-width:640px;}

/* 슬라이더 카드 (16:9, 둥근 모서리) */
.usg-card{
  margin:0; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#dedede;             /* 이미지 없을 때 회색 플레이스홀더 */
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.usg-card img{width:100%; height:100%; object-fit:cover; display:block;}

/* 슬라이드 간격 */
.usg-slick .slick-list{margin:0 -12px;}
.usg-slick .slick-slide{margin:0 12px;}

/* 화살표(심플한 둥근 버튼) */
.usg-slick .slick-prev, .usg-slick .slick-next{
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,.35); z-index:5;
}
.usg-slick .slick-prev::before, .usg-slick .slick-next::before{display:none;}
.usg-slick .slick-prev, .usg-slick .slick-next{
    
    display: none!important;place-items:center;}
.usg-slick .slick-prev::after, .usg-slick .slick-next::after{
    display: none !important;
  content:""; width:10px; height:10px; border:2px solid #fff; border-left:0; border-top:0;
}
.usg-slick .slick-prev::after{transform:rotate(135deg);}
.usg-slick .slick-next::after{transform:rotate(-45deg);}

/* 도트 숨김 */

.usg-slick .slick-dots{display:none !important;}







/* ===== Section ===== */
.flow-sec{background:#24385a;color:#e8edf6;}
.flow-inner{max-width:1180px;margin:0 auto;padding:76px 16px;}
.flow-kicker{margin:0 0 10px;font-size:13px;color:#9fb2d6;letter-spacing:.06em;text-align:center;}
.flow-title{margin:0 0 14px;text-align:center;font-size:30px;line-height:1.35;font-weight:800;}
.flow-desc{margin:0 auto 34px;text-align:center;color:#b9c7df;line-height:1.9;max-width:620px;font-size:14px}

/* ===== Timeline (icons + rail + dots) ===== */
.flow-track{margin-top:10px}
.flow-steps{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  height:230px; /* 아이콘 영역 높이 고정 */
}
@media (max-width:900px){
  .flow-steps{grid-template-columns:repeat(2,1fr);height:260px}
}
@media (max-width:560px){
  .flow-steps{grid-template-columns:1fr;height:240px}
}

/* 진행 라인 */
.flow-steps .rail{
  position:absolute;left:0;right:0;bottom:58px; /* 점 바로 아래 */
  height:1px;background:rgba(255,255,255,.25);
}

/* 아이콘 원 */
.step{position:relative;display:flex;justify-content:center;align-items:center;}
.circle{
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.circle svg{width:68px;height:68px;opacity:.95}
.step:hover .circle{
  transform:translateY(-2px);
  background:rgba(255,255,255,.09);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* 진행 점 */
.dot{
  position:absolute;left:50%;bottom:53px;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:#fff;
}

/* ===== Captions ===== */
.flow-captions{
  list-style:none;margin:10px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  text-align:center;
}
.flow-captions strong{display:block;margin:6px 0 8px;font-weight:800;color:#ffffff}
.flow-captions p{margin:0;color:#c9d6eb;line-height:1.8;font-size:13px}
@media (max-width:900px){
  .flow-captions{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .flow-captions{grid-template-columns:1fr;text-align:left}
  .flow-captions strong{margin-left:2px}
}

/* 헤더 */
.core-inner{max-width:1180px;margin:0 auto;padding:40px 16px 64px;color:#0f1114}
.core-kicker{margin:0 0 6px;font-size:12px;color:#9aa3af;letter-spacing:.06em}
.core-title{margin:0 0 20px;font-size:28px;font-weight:800}

/* 레이아웃 */
.core-grid{
  display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start;
}
@media (max-width:900px){
  .core-grid{grid-template-columns:1fr;gap:18px}
}

/* 세로 탭 */
.vtabs{display:flex;flex-direction:column;gap:10px}
.vtab{
  all:unset; /* 버튼 기본 스타일 제거 */
  display:block;padding:10px 8px;border-radius:8px;cursor:pointer;
  color:#333; font-size:15px; line-height:1.6; font-weight:700;
}
.vtab .num{color:#a3aab5;margin-right:6px;font-weight:800}
.vtab:hover{background:#f3f5f9}
.vtab.is-active{color:#1f5eff}
.vtab.is-active .num{color:#1f5eff}

/* 패널 */
.panels{min-height:360px}
.panel-fig{margin:0 0 14px}
.panel-fig img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.08)}
.panel-title{margin:6px 0 8px;font-size:18px;font-weight:800}
.panel-desc{margin:0;color:#4b5563;line-height:1.9;font-size:14px}

.panels section{
    padding: 0;
}
/* 모든 패널 기본 숨김 */
.panels .panel{display:none;}
/* 활성 패널만 보이기 */
.panels .panel.is-active{display:block;}
/* 혹시 프레임워크가 hidden을 무시할 경우 대비 */
.panels .panel[hidden]{display:none !important;}



/* 섹션 전체 */
.hero-cta{
  position:relative;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  min-height:420px;              /* 필요하면 높이만 조절 */
  display:grid; place-items:center;
  overflow:hidden;
}
/* 어둡게 오버레이 */
.hero-cta::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.55);    /* 어둡기 조절: .45 ~ .65 */
}

/* 가운데 콘텐츠 */
.hero-cta-inner{
  position:relative; z-index:1;
  max-width:760px; padding:48px 16px; text-align:center;
}
.hero-cta-text{
  margin:0 0 18px;
  color:#e9edf2; line-height:1.9; font-size:15px;
}

/* 버튼 */
.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:6px;
  color:#fff; text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.06);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-ghost::after{
  content:""; width:10px; height:10px; margin-left:2px;
  border:2px solid currentColor; border-left:0; border-top:0;
  transform:rotate(-45deg);
}
.btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateY(-1px); }

@media (max-width:760px){
  .hero-cta{ min-height:360px; }
  .hero-cta-text{ font-size:14px; }
}



/* 반응형 */
@media (max-width:980px){
  .usg-title{font-size:24px;}
  .usg-desc{margin-bottom:18px;}
}




@media (max-width:980px){
  .symp-visual img{width:100%;transform:none}
  .symp-visual::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 30%)}
}



@media (min-width: 1920px) {
    .view .view_slide button{
        width: 7rem;
    }
    .view .view_slide button.prev{
        left: 21.5%;
    }
    .view .view_slide button.next{
        right: 21.5%;
    }
    
}
@media (max-width: 1440px) {
    .problem .problem-slide .swiper-slide img {
        height: 8.4rem;
    }
    .differentiation{
        height: auto;
    }
    .differentiation .sticky{
        position: relative;
        top: auto;
        height: auto;
        display: block;
    }
    .differentiation .fold_cards{
        width: 90%;
    }
    .differentiation .fold_cards .card{
        height: auto;
        aspect-ratio: 100 / 66;
        padding: 4.8rem;
    }
    .review{
        padding-top: 16rem;
    }
    .review button.next{
        left: -5%;
        width: 5.4rem;
    }
    .process .card .t_name button{
        font-size: 2.05rem;
    }
    .process .card .card_contents article .l_box{
        padding: 0 8rem;
    }
    .process .card .card_contents article .l_box br{
        display: none;
    }
    .problem {
        padding-bottom: 20rem;
    }
    .view .view_slide button{
        width: 5.4rem;
    }
    .view .view_slide button.prev{
        left: 6.5%;
    }
    .view .view_slide button.next{
        right: 6.5%;
    }
}
@media (max-width: 1024px) {
    main h2{
        font-size: 4.8rem;
    }
    .solution iframe{
        margin-top: 6rem;
    }
    .introduce .top_box{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 2.4rem;
    }
    .introduce .profile{
        margin-top: 2.8rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 6rem;
    }
    .introduce .profile::before{
        display: none;
    }
    .introduce .profile img{
        position: relative;
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        padding-top: 5%;
        background-color: #ECEFF7;
        border-radius: 6px;
    }
    .introduce .profile .text_box{
        padding: 0;
    }
    .problem{
        margin: 0;
    }
    .disease img{
        width: 85%;
    }
    .differentiation .fold_cards .card{
        padding: 3.6rem;
    }
    .differentiation .fold_cards .card h3{
        font-size: 2.6rem;
    }
    .differentiation .fold_cards .card p{
        font-size: clamp(13.8px, 1.8rem, 18px);
    }
    .review .review_slide{
        width: 120%;
    }
    .review .review_slide .swiper-slide{
        max-width: 550px;
    }
    .process .card .card_contents{
        height: 44rem;
    }
    .process .card .card_contents article .l_box{
        padding: 0 4.5rem;
    }
    .qna article{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .qna article .q_box h2{
        font-size: 3.8rem;
    }
    .qna article .a_box{
        margin-top: 4.8rem;
    }
    .view .view_slide .swiper-slide{
        max-width: 82%;
    }
    .view .swiper-pagination{
        margin-top: 2rem;
    }
    .view .swiper-pagination-fraction {
        font-size: 2.2rem;
    }
    .view  .swiper-pagination-current { 
        font-size: 3.6rem;
    }
    .view  .swiper-pagination-total {
        font-size: 2.2rem;
    }
    .info .info_box{
        flex-direction: column;
        border: 1px solid var(--sub1);
        border-radius: .6rem;
    }
    .info .info_box > div{
        padding: 8%;
    }
    .info .info_box .l_box{
        border: 0;
        border-bottom: 1px solid var(--sub1);
        padding-left: 8%;
    }
    .info .info_box .l_box strong {
        margin-top: 1.2rem;
        font-size: 3.6rem;
    }
    .visit .address{
        flex-wrap: wrap;
        row-gap: 1.6rem;
    }
    .visit .address div{
        width: 100%;
    }
    .visit .transportation > div{
        flex-direction: column;
        row-gap: 4rem;
        padding: 4.8rem;
    }
    .visit .transportation > div img{
        padding: 0;
        border: 0;
    }
}

@media (max-width: 768px) {
    main .text-change.c2{
        display: none;
    }
    main .text-change.c3, main .text-change.c4{
        display: block;
    }
    .differentiation .fold_cards .card{
        border-radius: 2.6rem;
        padding: 2.8rem;
    }
    .differentiation .fold_cards{
        width: 100%;
    }
    .graph .container{
        margin: 6rem auto 0;
        flex-direction: column;
        row-gap: 4rem;
    }
    .graph .container img{
        width: 100%;
        object-fit: contain;
        padding: 0 10%;
    }
    .review{
        padding-top: 14rem;
    }
    .review .top_box{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 2.4rem;
    }
    .review .review_slide{
        width: 100%;
        overflow: visible;
    }
    .review .review_slide .swiper-slide{
        max-width: none;
    }
    .review .review_slide .swiper-slide .p_box p br{
        display: none;
    }
    .review button.next{
        display: none;
    }
    .process .card .t_name button{
        font-size: 1.8rem;
        padding: 2.4rem .6rem;
    }
    .process .card .t_name button span{
        display: none;
    }
    .process .card .card_contents{
        height: 560px;
    }
    .process .card .card_contents article{
        flex-direction: column-reverse;
        height: 100%;
    }
    .process .card .card_contents article .l_box{
        width: 100%;
        height: auto;
        max-width: none;
        padding: 5rem 4rem;
    }
    .process .card .card_contents article .l_box p:first-of-type{
        margin-top: 4rem;
    }
    .process .card .card_contents article img{
        width: 100%;
        height: 30rem;
        max-width: none;
    }
    .qna .back_img_top{
        background-size: contain;
    }
    .qna .back_img_bottom{
        background-size: contain;
    }
    .qna article div b {
        font-size: 6rem;
    }
    .problem {
        padding-bottom: 18rem;
    }
    .view .view_slide button{
        width: 5.6rem;
    }

    .flow-sec{
        display: none;
    }
    .care-mo{
        display: block;
    }
}
@media (max-width: 480px) {
    main h2{
        font-size: 31px;
    }
    .solution iframe {
        margin-top: 4.8rem;
    }
    .introduce .profile {
        margin-top: 1.2rem;
    }
    .graph .container img{
        padding: 0 2.5%;
    }
    .disease img{
        width: 95%;
    }
    .differentiation .fold_cards .card p br{
        display: none;
    }
    .process .card .t_name button{
        font-size: 13.8px;
    }
    .process .card .card_contents{
        height: 490px;
    }
    .process .card .card_contents article img{
        height: 25rem;
    }
    .review{
        padding-top: 12rem;
    }
    .qna article div b {
        font-size: 5.6rem;
    }
    .qna article .q_box h2 {
        font-size: 3.4rem;
    }
    .qna article .a_box .p_box p br{
        display: none;
    }
    .visit .transportation > div{
        row-gap: 3rem;
        padding: 3.6rem;
    }
    .visit .transportation > div h4 br{
        display: none;
    }
}