.bar.after{height:calc(320px * 0.2);}
	.bar.before{ height: calc(320px * 0.60);}
	.circle-badge{ left: 257px;  top: 80px;}
	.arrow-image-wrapper{  transform: rotate(93deg); left: 160px;}
.byun_top_img p{	
    width: 522px;
    margin: 0 auto;
    border-radius: 100px;
	background:#1a1b1c;
	    z-index: 2;
    position: relative;
}
	
	
/* 과민성대장증후군 스타일*/	
.ghamin_container {
	position:relative;
    width: 1000px;
    margin: 0 auto;
    color: #333;
}
.ghamin_container *, .ghamin_container *:before, .ghamin_container *:after {
    box-sizing: inherit;
}
.ghamin-blind {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* 상단 섹션 */
.ghamin-hero-section {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 50px;
}
.ghamin-visual-box {
 width:1000px;
 height: 503px;
    position: relative;
}
.ghamin-main-illustration {
 
}
.ghamin-cause-box {
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ghamin-title-main {
   margin: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.4;
    color: #444;
}
	
.ghamin-title-main strong {
    font-weight: 700;
    color: #222;
}
.ghamin-cause-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 63%;
}
.ghamin-cause-list li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f7;
}
.ghamin-cause-list li:last-child {
    border-bottom: none;
}
.ghamin-cause-label {
    font-weight: 700;
    font-size: 17px;
    width: 200px;
    color: #333;
    position: relative;
}
.ghamin-cause-desc {
    font-size: 16px;
    color: #666;
}

/* 하단 섹션 */
.ghamin-symptom-section {
    margin-top: 20px;
}

.ghamin-symptom-section	h2{
	margin-bottom: 40px;
}
	
.ghamin-symptom-section	h2 strong{ color: #2aa12e;}
	

	
#ghamin-symptom-content {
   position: relative;
    width: 1000px;
    margin: 0 auto;
	background: url('/data/skin/front/pure/img/byunhom/ghamin/ghamin_img_sojang.png');
}
.ghamin-card-list {
    z-index: 2;
    width: 600px;
}
#ghamin-card1, #ghamin-card2, #ghamin-card3 {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #eaeaea;
}
	
#ghamin-card2{  
	left: 80px;
	}
.ghamin-card-img {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
    flex-shrink: 0;
    background-color: #eee;
}
.ghamin-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ghamin-card-text {
    flex: 1;
}
.ghamin-card-tag {
    font-size: 16px;
    color: #646464;
    display: block;
    margin-bottom: 5px;
}
.ghamin-card-quote {
    margin: 0 0 8px 0;
    font-size: 22px;
    color: #333;
	font-weight: 600;
}
.ghamin-card-quote strong {
    color: #c92a2a; /* 붉은색 강조구문 */
    font-weight: 700;
}
.ghamin-card-detail {
    margin: 0;
    font-size: 15px;
    color: #5b5b5b;
    background-color: #fffde7; /* 노란색 하이라이트 배경 효과 */
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
}



/* 반응형 모바일 레이아웃 조정 */
@media (max-width: 768px) {
    .ghamin-cause-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .ghamin-cause-list {
        width: 100%;
    }
    #ghamin-symptom-content {
        flex-direction: column;
    }

    .ghamin-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .ghamin-card-img {
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%;
        height: 160px;
    }
}	
	
	
	
/* 그래프 왼쪽 */
	
.chart-container_left {
  padding: 25px;
  width: 550px;
 height: 550px;
}
	

.chart-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
	
/* 수소호기 검사 수치 */
	#ghamin_graph02{ margin-top: 8px; margin-bottom: 0px; }
	.fade-wrap.fade-in{ margin-bottom: 10px; }
	
/* ========================================================
   소장세균과증식(SIBO) 그래프 애니메이션 CSS 
   ======================================================== */

/* 1. 초기 상태 설정 (애니메이션 시작 전 숨김 및 위치 조정) */
	
#ghamin_graph01 .youso_01{
	position: absolute;
    top: 30px;
    left: 160px;
    background: #e03950;
    font-size: 20px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: 700;
}

#ghamin_graph01 .red-circle{
	    position: absolute;
    top: 10px;
    left: 290px;
    width: 80px;
    height: 60px;
    border-radius: 50%;
    background: rgba(224, 51, 51, 0.2);
}
	
	
#ghamin_graph02 .youso_02{
    position: absolute;
    bottom: 90px;
    right: 120px;
    background: #2348c3;
    font-size: 20px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: 700;
}
	
	
	
#ghamin_graph01 .youso_01, 
#ghamin_graph01 svg circle, /* 만약 빨간 동그라미가 SVG 요소라면 */
#ghamin_graph01 .red-circle { 
    opacity: 0;
    transform: scale(0.5);
    transform-origin: center;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* 탄력적인 Bounce 효과 */
}

#ghamin_graph02 .youso_02,
#ghamin_graph02 .blue-badge {
    opacity: 0;
    transform: translateY(15px); /* 아래에서 위로 스르륵 올라오는 효과 */
    transition: all 0.6s ease-out;
}

/* 2. fade-in 클래스가 붙었을 때 활성화 상태 */

/* [치료 전] 세균 과증식 문구 및 빨간 동그라미 강조 */
#ghamin_graph01.fade-in .youso_01,
#ghamin_graph01.fade-in .red-circle {
    opacity: 1;
    transform: scale(1);
    /* 그래프 이미지가 먼저 나온 후 약간의 시차(0.4초)를 두고 강조되도록 설정 */
    transition-delay: 0.4s; 
}

/* [치료 후] 정상수치 말풍선 등장 */
#ghamin_graph02.fade-in .youso_02,
#ghamin_graph02.fade-in .blue-badge {
    opacity: 1;
    transform: translateY(0);
    /* 치료 전 그래프가 완전히 인지된 후 나오도록 시차(0.8초)를 넉넉히 둠 */
    transition-delay: 0.8s; 
}

/* 맥박이 뛰는 듯한 지속적인 강조 효과 (선택 사항) */
@keyframes pulseRed {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224, 51, 51, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(224, 51, 51, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224, 51, 51, 0); }
}

/* 애니메이션이 완료된 후 빨간 동그라미에 깜빡이는 효과를 주고 싶다면 아래 주석을 해제하세요 */
/* #ghamin_graph01.fade-in .red-circle {
    animation: pulseRed 2s infinite 1s;
}
*/