.problem_nail_wrap{width:100%;color:#222;}
.problem_nail_wrap *{box-sizing:border-box;}
.center{text-align:center;}
.sub_title h3{font-weight:700;}

.problem_tabs{display:grid;grid-template-columns:repeat(2,1fr);width:700px;margin-left:auto;margin-right:auto;padding:6px;background:#f2f6f5;border-radius:50px;}
.problem_tabs button{height:58px;padding:0 30px;border:0;border-radius:50px;background:transparent;color:#000;font-size:18px;font-weight:600;cursor:pointer;transition:.25s;}
.problem_tabs button.active{background:#17786d;color:#fff;box-shadow:0 8px 20px rgba(23,120,109,.15);}

.problem_tab_cont{display:none;}
.problem_tab_cont.active{display:block;}

.problem_intro{display:grid;grid-template-columns:520px 1fr;gap:80px;}
.problem_main_img{position:relative;overflow:hidden;width:100%;border-radius:15px;background:#f2f4f3;aspect-ratio: 1 / 1}
.problem_main_img img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;}

.symptom_box{}
.symptom_list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.symptom_list li{display:flex;align-items:center;gap:0 6px;position: relative;padding: 20px 30px;border-radius: 100px;background: #f8f8f8;font-size: 17px;color: #185646;font-weight: 500;}
.symptom_list li img{width:17px;}

.problem_bubble{position:relative;text-align:center;align-items:center;justify-content:center;min-width:300px;margin:0 auto;display:flex;width:fit-content;height:50px;margin-top:1%;padding:0 45px;border-radius:50px;background:linear-gradient(
180deg, #78b94b 0%, #17786d 100%);color:#fff;font-size:18px;font-weight:700;text-align:center;animation:bubbleFloat 1.5s ease-in-out infinite;}

@keyframes bubbleFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-5px);}
}
.problem_bubble:after{content: "";position: absolute;left: 50%;bottom: -6px;width: 15px;height: 15px;background: #17786d;transform: translateX(-50%) rotate(45deg);border-radius: 2px;z-index: -1;}
.cause_list{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;}
.cause_item{min-width:0;}
.cause_img{overflow:hidden;position:relative;border-radius:15px;background:#eff4f2;}
.cause_img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cause_item:hover .cause_img img{transform:scale(1.04);}
.cause_item h4{line-height:1.55;text-align:center;font-weight:600;}

.nail_treatment{background:#f5f8f6;}
.treatment_head{display:flex;align-items:flex-end;justify-content:space-between;}

.treatment_nav{display:flex;align-items:center;gap:30px;}
.treatment_paging{display:flex;align-items:center;gap:8px;font-size:20px;color:#ccc;}
.treatment_paging strong{color:#17786d;font-size:20px;font-weight:800;}

.treatmentSwiper{overflow:hidden;}
.treatment_card{display:grid;grid-template-columns:500px 1fr;gap:65px;}
.treatment_img{overflow:hidden;width:100%;border-radius:500px;transition:all 1s;background:#eef2f0;opacity:0.5;}
.treatment_img img{width:100%;height:100%;object-fit:cover;}
.treatmentSwiper .swiper-slide-active .treatment_img{opacity:1;border-radius:15px;}
.treatment_txt{padding-top:40px;}
.point_num{display:inline-flex;height:30px;align-items:center;padding:0 13px;border-radius:30px;background:#e4f2ed;color:#17786d;font-size:13px;font-weight:700;}


.treatment_check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 35px;border-radius:15px;background:#fff;padding:20px;}
.treatment_check li{position:relative;padding-left:22px;font-size:17px}
.treatment_check li:before{content:"✓";position:absolute;left:0;top:0;color:#17786d;font-weight:700;}


.problem_fingernail{background:#fff;}

.problem_toenail,.problem_fingernail{position:relative;}
.problem_toenail:before,.problem_fingernail:before{content:"";position:absolute;z-index:-1;width:350px;height:350px;border-radius:50%;background:rgba(23,120,109,.025);}
.problem_toenail:before{left:-150px;top:300px;}
.problem_fingernail:before{right:-150px;top:250px;}

@media(max-width:768px){

.problem_tabs{width:100%;padding:5px;border-radius:40px;}
.problem_tabs button{height:52px;padding:0 15px;font-size:15px;}

.problem_intro{grid-template-columns:1fr;gap:30px;}
.problem_main_img{width:100%;max-width:500px;margin:0 auto;aspect-ratio:1/1;}

.symptom_list{grid-template-columns:1fr;gap:10px;}
.symptom_list li{padding:16px 20px;font-size:14px;}
.symptom_list li img{width:15px;}

.problem_bubble{min-width: 0;width: fit-content;max-width: 90%;height: auto;min-height: 36px;padding: 10px 25px;font-size: 13px;line-height: 1.5;margin-top: 15px;}

.cause_list{grid-template-columns:repeat(2,1fr);gap:15px;}
.cause_item h4{font-size:14px;}

.treatment_head{align-items:flex-start;flex-direction:column;gap:20px;}
.treatment_nav{width:100%;justify-content:space-between;gap:15px;}
.treatment_paging{font-size:16px;}
.treatment_paging strong{font-size:18px;}

.treatmentSwiper{overflow:hidden;}
.treatmentSwiper .swiper-wrapper{align-items:stretch;}
.treatment_card{grid-template-columns:1fr;gap:25px;}
.treatment_img{width:100%;border-radius:15px;aspect-ratio:5/3;opacity:1;}
.treatmentSwiper .swiper-slide-active .treatment_img{border-radius:15px;}
.treatment_txt{padding-top:0;}

.point_num{height:28px;padding:0 11px;font-size:12px;}

.treatment_check{grid-template-columns:1fr;gap:10px;padding:18px;}
.treatment_check li{padding-left:20px;font-size:14px;}

.problem_toenail:before,.problem_fingernail:before{width:220px;height:220px;}
.problem_toenail:before{left:-120px;top:250px;}
.problem_fingernail:before{right:-120px;top:200px;}

}