td {font-size:9pt; font-family: 굴림; }



        .left_button-container {
    		width:190px;
            max-width:190px;
    		padding: 0;
    		position: inline-block;
			background: #fafafa;
            background-size: cover;
            overflow: hidden;
    		margin: 0px 0 50px 0;
    		flex-direction: column; /* 컨테이너 내의 요소를 세로로 배치합니다. */
    		align-items: flex-start; /* 버튼을 왼쪽으로 정렬합니다. */
		}


/* 퀵 메뉴 */
         .quick-button {
   			border: none;
    		position: relative;
			width:190px;
    		transform: translateX(0%);
    		height: 80px;
    		line-height: 20px;
    		background-color: transparent;
			padding: 40px 0 0 0;
    		cursor: pointer;
    		overflow: hidden;
    		white-space: nowrap;
			border-bottom: 1px solid #ccc;
    		display: block; /* 각 버튼을 새로운 라인에 배치 */
			transition: background-color 0.3s, color 0.3s;
		}

		.quick-button:hover {
            color: #f5f5f5;
			background-color: #3c3c3c;
        }

        .quick-button a {
            color: inherit;
            text-decoration: none;
        }
		.s-em1 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 12pt;
			font-weight: 600;
			display: block;
			margin: 0;
			padding: 0;
        }

        .s-em2 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 9pt;
			font-weight: 400;
			display: block;
			margin: 0;
			padding: 0;
        }

/* A 메뉴 */
         .a-button {
   			border: none;
    		position: relative;
			width:190px;
    		transform: translateX(0%);
    		height: 80px;
    		line-height: 16px;
    		background-color: transparent;
			padding: 30px 0 0 0;
    		cursor: pointer;
    		overflow: hidden;
    		white-space: nowrap;
			border-bottom: 1px solid #ccc;
    		display: block; /* 각 버튼을 새로운 라인에 배치 */
			transition: background-color 0.3s, color 0.3s;
		}

		.a-button:hover {
            color: #f5f5f5;
			background-color: #3c3c3c;
        }

        .a-button a {
            color: inherit;
            text-decoration: none;
        }


/* I 메뉴 */
         .i-button {
   			border: none;
    		position: relative;
			width:190px;
    		transform: translateX(0%);
    		height: 50px;
    		line-height: 15px;
    		background-color: transparent;
			padding: 0 0 0 0;
    		cursor: pointer;
    		overflow: hidden;
    		white-space: nowrap;
			border-bottom: 1px solid #ccc;
    		display: block; /* 각 버튼을 새로운 라인에 배치 */
			transition: background-color 0.3s, color 0.3s;
		}

		.i-button:hover {
            color: #f5f5f5;
			background-color: #3c3c3c;
        }

        .i-button a {
            color: inherit;
            text-decoration: none;
        }


/* 할리~인디언 메뉴 */
        .special-button {
   			border: none;
    		position: relative;
			width:190px;
    		transform: translateX(0%);
    		height: 60px;
    		line-height: 20px;
    		cursor: pointer;
    		overflow: hidden;
			border-bottom: 1px solid #ccc;
			color: #111;
    		white-space: nowrap;
    		padding: 0 15px 0 0px;
    		display: block; /* 각 버튼을 새로운 라인에 배치 */
    		margin: 0px; /* 각 버튼 사이의 여백 설정 */
			text-align: right;
			transition: background-color 0.3s, color 0.3s;
			background-color: transparent;
		}

		.special-button:hover {
            color: #f5f5f5;
			background-color: #3c3c3c;
        }

        .special-button a {
            color: inherit;
            text-decoration: none;
        }


/* 커스텀 메뉴 */
        .brand-button {
   			border: none;
    		position: relative;
			width:190px;
    		transform: translateX(0%);
    		height: 45px;
    		line-height: 15px;
    		background-color: transparent;
    		cursor: pointer;
    		overflow: hidden;
			border-bottom: 1px solid #ccc;
			color: #111;
    		white-space: nowrap;
    		padding: 0 15px 0 0px;
    		display: block; /* 각 버튼을 새로운 라인에 배치 */
    		margin: 0px; /* 각 버튼 사이의 여백 설정 */
			text-align: right;
			transition: background-color 0.3s, color 0.3s;
		}

		.brand-button:hover {
            color: #f5f5f5;
			background-color: #3c3c3c;
        }

        .brand-button a {
            color: inherit;
            text-decoration: none;
        }


		.q-em1 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 11pt;
			font-weight: 600;
			display: block;
			margin: 0;
			padding: 0;
        }

        .q-em2 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 9pt;
			font-weight: 400;
			display: block;
			margin: 0;
			padding: 0;
        }


        .s-em1 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 12pt;
			font-weight: 600;
			display: block;
			margin: 0;
			padding: 0;
        }

        .s-em2 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 9pt;
			font-weight: 400;
			display: block;
			margin: 0;
			padding: 0;
        }

        .c-em1 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 11pt;
			font-weight: 600;
			display: block;
			margin: 0;
			padding: 0;
        }

        .c-em2 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 8pt;
			font-weight: 400;
			display: block;
			margin: 0;
			padding: 0;
        }



		.category1,.category3 {
			width: 190px;
			height: 36px;
			background-color: #e5e5e5;/*그레이d5d5d5 레드 e31e24*/
			text-align: center;
			line-height: 18px;
			color: #111; /*그레이3c3c3c 밝은 f5f5f5*/
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 12pt;
			font-weight: 700;
			left:50%;
			padding: 15px 0 15px 0;
			margin: 0;
		}

        .category1-name1,.category3-name1 {
			display: block;
        }

        .category1-name2,.category3-name2 {
			font-size: 9pt;
			font-weight: 500;
			display: block;
        }

		.category2 {
			width: 190px;
			height: 55px;
			border: none;
			border-bottom: 1px solid #ccc;
			background: #ff8a24; /*그레이d5d5d5 레드 e31e24*/
			text-align: center;
			cursor: pointer;
			color: #f5f5f5; /*그레이3c3c3c 밝은 f5f5f5*/
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 12pt;
			font-weight: 500;
			padding: 0;
			margin: 0;
			transition: background-color 0.3s, color 0.3s;
		}

		.category2:hover {
			background-color: #3c3c3c;
            color: #f5f5f5;
        }

        .category2-name1 {
			display: block;
        }

        .category2-name2 {
			font-size: 9pt;
			font-weight: 400;
			display: block;
        }


/* ================================================================
   [아이콘 지정 - 범용 규칙]

   기존 방식: 브랜드마다 개별 CSS 클래스로 이미지 지정 (약 700줄)
   변경 방식: HTML의 <img> 태그로 이미지 직접 삽입, CSS는 위치/크기만 제어

   → 새 브랜드 추가 시 이 CSS 영역은 건드릴 필요 없음
   → HTML에 <img class="menu-icon" src="..."> 만 넣으면 됨
   ================================================================ */

/* 퀵 버튼 아이콘 (상단 큰 버튼 + 대리점 안내) */
.quick-button .menu-icon {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    object-fit: contain;
    z-index: 1;
    transition: filter 0.3s ease;
}
.quick-button:hover .menu-icon {
    filter: brightness(0) invert(1);
}

/* 스페셜 버튼 - 기종 이미지 (할리/골드윙/인디언) - 크게 */
.special-button .menu-icon.type-model {
    position: absolute;
    top: 60%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 60px;
    object-fit: contain;
    z-index: 1;
    transition: filter 0.2s ease;
}
.special-button:hover .menu-icon.type-model {
    filter: brightness(0) invert(1);
}

/* 스페셜 버튼 - 브랜드 로고 (타이어/배터리/오일/신원파츠) - 작게 */
.special-button .menu-icon {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 30px;
    object-fit: contain;
    z-index: 1;
    transition: filter 0.2s ease;
}
.special-button:hover .menu-icon {
    filter: brightness(0) invert(1);
}

/* 브랜드 버튼 아이콘 (브랜드 목록)
   width와 height 둘 다 고정 → 가로형/정사각형/세로형 로고 모두
   같은 크기의 보이지 않는 박스 안에 들어감. object-fit:contain이
   비율 유지하며 박스 안에 최대한 크게 맞춰줌 */
.brand-button .menu-icon {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 40px;
    object-fit: contain;
    z-index: 1;
    transition: filter 0.2s ease;
}
.brand-button:hover .menu-icon {
    filter: brightness(0) invert(1);
}


/* ================================================================
   아코디언 (접이식 메뉴)

   JS 파일(toggleAccordion)과 함께 작동합니다.
   - 초기 상태: display: none (숨김)
   - 클릭 시: JS가 max-height를 0에서 원래 높이까지 부드럽게 증가
   - overflow: hidden 필수 (펼쳐지는 중에 내용 삐져나오지 않게)
   ================================================================ */
.accordion {
    background-color: transparent;
    overflow: hidden;
}

.accordion-content {
    background-color: transparent;
    display: none;
    overflow: hidden;
    max-height: 0;
}