/* 기본 본문 스타일 */
 body {
            font-family: 'Yu Mincho', serif; /* 폰트 패밀리를 'Noto Sans JP'로 설정, 대체 폰트로 sans-serif 사용 */
            transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */
            width: 100%; /* 전체 너비를 화면에 맞추어 고정 */
            margin: 0 auto; /* 가운데 정렬 */
            padding: 0; /* 여백 제거 */
            overflow-x: hidden; /* 가로 스크롤 막기 */

        }

/* 문단 스타일 */
p {
    margin-bottom: 0px; /* 하단 여백 제거 */
    font-size: 15px; /* 글자 크기 설정 */
    color: #000000; /* 글자 색상 설정 */
    line-height: 24px; /* 줄 간격 설정 */
}

/* 링크 스타일 */
a {
    text-decoration: none!important; /* 텍스트 장식 제거 (강제) */
}

/* 저작권 텍스트 스타일 */
.copyright-text {
    text-transform: capitalize; /* 각 단어의 첫글자만 대문자로 변환 */
}

/* 주요 버튼 스타일 */
.main-button a {
    background-color: #000000; /* 배경 색상 설정 */
    border-radius: 5px; /* 테두리 반경 설정 */
    padding: 10px 10px; /* 패딩 설정 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
    color: #fff; /* 글자 색상 설정 */
    font-size: 14px; /* 글자 크기 설정 */
    text-transform: capitalize; /* 모든 글자를 대문자로 변환 */
    font-weight: 300; /* 글자 두께 설정 */
    letter-spacing: 0.4px; /* 글자 간격 설정 */
    text-decoration: none; /* 텍스트 장식 제거 */
    transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */

}


#navbarResponsive {
    margin-top: 10px; /* 원하는 상단 마진 값으로 변경 */
}


.main-button a:hover {
    opacity: 0.7; /* 마우스를 올렸을 때 불투명도 설정 */
}

/* 섹션 제목 스타일 */
.section-heading {
    margin-top: 50px; /* 상단 여백 설정 */
    margin-bottom: 40px; /* 하단 여백 설정 */
}

.section-heading .line-dec {
    width: 40px; /* 너비 설정 */
    height: 5px; /* 높이 설정 */
    background-color: #000000; /* 배경 색상 설정 */
}

.section-heading h1 {
    font-size: 22px; /* 글자 크기 설정 */
    font-weight: 400; /* 글자 두께 설정 */
    color: #1e1e1e; /* 글자 색상 설정 */
    margin-top: 15px; /* 상단 여백 설정 */
}


/* 카테고리 부모요소 넓히기 */

.custom-container {
    width: 100%; /* 너비를 100%로 설정하여 전체 화면을 차지하도록 함 */
    max-width: 1900px; /* 최대 너비를 설정하여 너무 넓어지지 않도록 제한 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 1000px 15px; /* 좌우 여백 설정 (필요에 따라 조정) */
}




/* 프리 헤더 스타일 */
header {
    width: 100%;
    position: fixed; /* 페이지 상단에 고정 */
    top: 0;
    z-index: 1000; /* 다른 요소 위에 표시되도록 설정 (선택 사항) */
    background-color: #000000; /* 배경 색상 설정 */
}

#pre-header {
    background-color: #000000; /* 배경 색상 설정 */
    text-align: center; /* 텍스트 정렬 설정 */
}

#pre-header span {
    color: #fff; /* 글자 색상 설정 */
    font-size: 16x; /* 글자 크기 설정 */
    padding: 10px 0px; /* 패딩 설정 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}

/* 헤더 스타일 */

/* styles.css */
.navbar {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}



.navbar,
.navbar .nav-link,
.dropdown-content {
  background-color: #ffffff;
}


.navbar .navbar-brand {
    text-align: center; /* 텍스트 정렬 설정 */
    width: 100%; /* 너비 설정 */
    position: relative; /* 상대 위치 설정 */
    padding: 40px 0px; /* 패딩 설정 */
}

.bg-dark {
    background-color: #fff!important; /* 배경 색상 설정 (강제) */
    border-bottom: 0px solid #eee; /* 하단 테두리 설정 */
}

#navbarResponsive {
    z-index: 999; /* 쌓임 순서 설정 */
    position: absolute; /* 절대 위치 설정 */
    left: 46%; /* 왼쪽 위치 설정 */
    top: 100px; /* 상단 위치 설정 */
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    width: 100%; /* 네비게이션 바의 가로 크기를 90%로 설정 (원하는 크기로 조정 가능) */
    max-width: 1200px; /* 최대 가로 크기 설정 (원하는 크기로 조정 가능) */
}


.navbar-dark .navbar-nav .nav-item {
    margin: 0px 15px; /* 좌우 여백 설정 */
}

.navbar-dark .navbar-nav .nav-link {
    text-transform: capitalize; /* 모든 글자를 대문자로 변환 */
    font-size: 17px; /* 글자 크기 설정 */
    font-weight: 450; /* 글자 두께 설정 */
    color: #1e1e1e; /* 글자 색상 설정 */
    transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */
    padding-top: 35px; /* 상단 패딩 설정 */
    padding-left: 0; /* 좌측 패딩을 더 넓게 설정 */
    padding-right: 0; /* 우측 패딩을 더 넓게 설정 */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
    color: #3a8bcd; /* 마우스를 올렸을 때, 활성화 상태일 때 글자 색상 설정 */
}

.navbar:after {
    width: 100%; /* 너비 설정 */
    height: 1px; /* 높이 설정 */
    content: ''; /* 내용 없음 */
    position: absolute; /* 절대 위치 설정 */
    left: 0; /* 왼쪽 위치 설정 */
    bottom: -52px; /* 하단 위치 설정 */
}



.navbar-dark .navbar-toggler-icon {
    background-image: none; /* 배경 이미지 제거 */
}

.navbar-dark .navbar-toggler {
    background-color: #bb8945; /* 배경 색상 설정 */
    height: 50px; /* 높이 설정 */
    outline: none; /* 외곽선 제거 */
}

.navbar-dark .navbar-toggler-icon:after {
    content: '\f0c9'; /* 내용 설정 (FontAwesome 아이콘) */
    color: #FFF; /* 글자 색상 설정 */
    font-size: 22px; /* 글자 크기 설정 */
    line-height: 30px; /* 줄 간격 설정 */
    font-family: 'FontAwesome'; /* 폰트 패밀리 설정 */
}

/* 배너 스타일 */
.banner {
    margin-top: 80px; /* 상단 여백 설정 */
    background-image: url(../images/suzuran01.jpg); /* 배경 이미지 설정 */
    background-size: cover; /* 배경 이미지 크기 설정 */
    background-repeat: no-repeat; /* 배경 이미지 반복 설정 */
    padding: 400px 0px; /* 패딩을 증가시켜 배경 이미지의 표시 영역 확대 */
    background-position: center center; /* 배경 이미지 위치 설정 */

}

.banner .caption {
    background-color: rgba(250,250,250,0.9); /* 배경 색상 설정 */
    padding: 30px; /* 패딩 설정 */
    max-width: 450px; /* 최대 너비 설정 */
}

.banner .caption h2 {
    margin-top: 0px; /* 상단 여백 제거 */
    margin-bottom: 15px; /* 하단 여백 설정 */
    font-size: 24px; /* 글자 크기 설정 */
    font-weight: 700; /* 글자 두께 설정 */
    color: #1e1e1e; /* 글자 색상 설정 */
}

.banner .caption .line-dec {
    width: 30px; /* 너비 설정 */
    height: 5px; /* 높이 설정 */
    background-color: #000000; /* 배경 색상 설정 */
}

.banner .caption p {
    margin-top: 15px; /* 상단 여백 설정 */
    margin-bottom: 20px; /* 하단 여백 설정 */
}

/* NEW ARRIVAL 뉴아이템 */
.featured-items {
    margin-bottom: 70px; /* 하단 여백 설정 */
}

.featured-item {
    border-radius: 5px; /* 테두리 반경 설정 */
    border: 1px solid #eee; /* 테두리 설정 */
    padding: 20px; /* 패딩 설정 */
    transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */
}

.featured-item:hover {
    opacity: 0.9; /* 마우스를 올렸을 때 불투명도 설정 */
}

.featured-item img {
    width: 100%; /* 너비 설정 */
}

.featured-item h4 {
    font-size: 17px; /* 글자 크기 설정 */
    font-weight: 700; /* 글자 두께 설정 */
    color: #1e1e1e; /* 글자 색상 설정 */
    margin-top: 15px; /* 상단 여백 설정 */
    transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */
}

.featured-item:hover h4 {
    color: #3a8bcd; /* 마우스를 올렸을 때 글자 색상 설정 */
}

.featured-item h6 {
    color: #3a8bcd; /* 글자 색상 설정 */
    font-size: 15px; /* 글자 크기 설정 */
    font-weight: 700; /* 글자 두께 설정 */
    margin-bottom: 0px; /* 하단 여백 제거 */
}

.owl-theme .owl-dots {
    text-align: center; /* 텍스트 정렬 설정 */
    margin-top: 30px; /* 상단 여백 설정 */
}

.owl-theme .owl-dots .owl-dot {
    outline: none; /* 외곽선 */
}


/* owl-carousel의 active 상태 및 기본 상태 설정 */
.owl-theme .owl-dots .active span {
	background-color: #3a8bcd!important; /* 활성화 상태 배경 색상 설정 */
}
.owl-theme .owl-dots .owl-dot span {
	background-color: #aaa; /* 기본 상태 배경 색상 설정 */
	width: 8px; /* 너비 설정 */
	height: 8px; /* 높이 설정 */
	display: inline-block; /* 인라인 블록 요소로 설정 */
	margin: 0px 5px; /* 좌우 여백 설정 */
	outline: none; /* 외곽선 제거 */
}

/* 구독 폼 스타일 */
.subscribe-form {
	background-color: #ffffff; /* 배경 색상 설정 */
	padding: 10px 0px; /* 패딩 설정 */
	text-align: center; /* 텍스트 정렬 설정 */
}
.subscribe-form .section-heading  {
	margin-top: 0px; /* 상단 여백 제거 */
}
.subscribe-form .section-heading h1 {
	color: #fff; /* 글자 색상 설정 */
}
.subscribe-form .section-heading .line-dec {
	background-color: #fff; /* 배경 색상 설정 */
	margin: 0 auto; /* 중앙 정렬 */
}
.subscribe-form .main-content p {
	font-size: 17px; /* 글자 크기 설정 */
	color: #fff; /* 글자 색상 설정 */
	margin-bottom: 30px; /* 하단 여백 설정 */
}
.subscribe-form .main-content form  {
	color: #fff; /* 글자 색상 설정 */
	display: inline; /* 인라인 요소로 설정 */
}
.subscribe-form .main-content form input {
	display: inline; /* 인라인 요소로 설정 */
}
.subscribe-form .main-content form input {
	width: 100%; /* 너비 설정 */
	height: 46px; /* 높이 설정 */
	border: 1px solid #fff; /* 테두리 설정 */
	background-color: transparent; /* 배경 색상 투명 설정 */
	padding-left: 15px; /* 좌측 패딩 설정 */
	color: #fff; /* 글자 색상 설정 */
	outline: none; /* 외곽선 제거 */
}
.subscribe-form .main-content form button:focus {
	color: #fff!important; /* 포커스 상태 글자 색상 설정 (강제) */
}
.subscribe-form .main-content form button {
	width: 100%; /* 너비 설정 */
	height: 45px; /* 높이 설정 */
	cursor: pointer; /* 마우스 커서 설정 */
	background-color: #fff; /* 배경 색상 설정 */
	outline: none; /* 외곽선 제거 */
	border-radius: 5px; /* 테두리 반경 설정 */
	padding: 10px 15px; /* 패딩 설정 */
	display: inline-block; /* 인라인 블록 요소로 설정 */
	color: #3a8bcd; /* 글자 색상 설정 */
	font-size: 14px; /* 글자 크기 설정 */
	text-transform: uppercase; /* 모든 글자를 대문자로 변환 */
	font-weight: 300; /* 글자 두께 설정 */
	letter-spacing: 0.4px; /* 글자 간격 설정 */
	text-decoration: none; /* 텍스트 장식 제거 */
	transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */
	box-shadow: none; /* 박스 그림자 제거 */
	border: none; /* 테두리 제거 */
}

/* 푸터 스타일 */
.footer {
    width: 100%;
    bottom: 0;
	text-align: center;
	padding: 40px 50px;
	background-color: #f8f9fa;
}
.footer ul {
	padding: 0; /* 여백 제거 */
	margin: 20px 10px;
}
.footer ul li {
	list-style: none;
	display: inline-block;
	margin: 0 10px; /* 좌우 여백 조정 */
}
.footer .logo img {
	max-width: 100%;
	margin-top: 60px;
	margin-bottom: 40px;
}
.footer .footer-menu {
	margin-bottom: 20px; /* 여백 줄임 */
}
.footer .footer-menu ul li {
	margin: 0 10px; /* 좌우 여백 조정 */
}
.footer .footer-menu a {
	font-size: 13px;
	color: #7a7a7a;
	text-transform: uppercase;
	transition: all 0.5s;
}
.footer .footer-menu a:hover {
	color: #3a8bcd;
	text-decoration: none;
}
.footer .social-icons {
	margin-bottom: 40px;
}
.footer .social-icons ul li {
	margin: 0 10px; /* 좌우 여백 조정 */
}
.footer .social-icons a {
	width: 32px;
	height: 32px;
	color: #fff;
	background-color: #aaa;
	text-align: center;
	display: inline-block;
	line-height: 33px;
	border-radius: 50%;
	font-size: 13px;
	transition: all 0.5s;
}
.footer .social-icons a:hover {
	background-color: #3a8bcd;
}

/* 하위 푸터 스타일 */
.sub-footer {
	border-top: 1px solid #eee;
	text-align: center;
}
.sub-footer p {
	font-size: 12px;
	color: #7a7a7a;
	line-height: 60px;
}
.sub-footer a {
	color: #3a8bcd;
	text-decoration: none;
}

/* 추천 페이지 스타일 */
.featured-page {
    width: 95%; /* 너비를 95%로 설정 */
    max-width: 1400px; /* 최대 너비 제한 */
    margin: 130px auto 40px; /* 상단 여백, 하단 여백, 자동 가운데 정렬 */
    padding: 2px; /* 내부 여백 설정 */
}


.featured-page .section-heading {
	margin-top: 0px; /* 상단 여백 제거 */
	margin-bottom: 0px; /* 하단 여백 제거 */
}

.featured-page .section-heading h1 {
    white-space: nowrap; /* 텍스트가 한 줄에 모두 표시되도록 설정 */
}


.featured-page #filters {
	margin-top: 15px; /* 상단 여백 설정 */
	text-align: right; /* 텍스트 정렬 설정 */
}
.featured .featured-item {
	margin-bottom: 30px; /* 하단 여백 설정 */
	text-decoration: none; /* 텍스트 장식 제거 */
}
.featured .featured-item h4 {
	transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */
}
.featured .featured-item:hover h4 {
	color: #3a8bcd; /* 마우스를 올렸을 때 글자 색상 설정 */
}
#filter button {
	outline: none; /* 외곽선 제거 */
}
#filter .btn-primary.focus,
.btn-primary:focus {
	color: #3a8bcd!important; /* 포커스 상태 글자 색상 설정 (강제) */
	box-shadow: none!important; /* 박스 그림자 제거 (강제) */
}
#filters .btn-primary {
	color: #1e1e1e; /* 글자 색상 설정 */
	border: none; /* 테두리 제거 */
	font-size: 15px; /* 글자 크기 설정 */
	font-weight: 700; /* 글자 두께 설정 */
	background-color: transparent; /* 배경 색상 투명 설정 */
}

/* Isotope 전환 효과 */
.isotope,
.isotope .item {
  -webkit-transition-duration: 0.8s; /* 전환 효과 시간 설정 */
     -moz-transition-duration: 0.8s; /* 전환 효과 시간 설정 */
      -ms-transition-duration: 0.8s; /* 전환 효과 시간 설정 */
       -o-transition-duration: 0.8s; /* 전환 효과 시간 설정 */
          transition-duration: 0.8s; /* 전환 효과 시간 설정 */
}

.isotope {
  -webkit-transition-property: height, width; /* 전환 효과 속성 설정 */
     -moz-transition-property: height, width; /* 전환 효과 속성 설정 */
      -ms-transition-property: height, width; /* 전환 효과 속성 설정 */
       -o-transition-property: height, width; /* 전환 효과 속성 설정 */
          transition-property: height, width; /* 전환 효과 속성 설정 */
}

.isotope .item {
  -webkit-transition-property: -webkit-transform, opacity; /* 전환 효과 속성 설정 */
     -moz-transition-property:    -moz-transform, opacity; /* 전환 효과 속성 설정 */
      -ms-transition-property:     -ms-transform, opacity; /* 전환 효과 속성 설정 */
       -o-transition-property:         top, left, opacity; /* 전환 효과 속성 설정 */
          transition-property:         transform, opacity; /* 전환 효과 속성 설정 */
}

/* 페이지 내비게이션 스타일 */
.page-navigation ul {
	text-align: center; /* 텍스트 중앙 정렬 */
	border-top: 1px solid #eee; /* 상단 경계선 */
	padding: 30px 0px 0px 0px; /* 패딩 */
	margin: 0px 0px 80px 0px; /* 마진 */
}
.page-navigation ul li {
	display: inline-block; /* 인라인 블록 디스플레이 */
}
.page-navigation ul li a {
	width: 40px; /* 너비 */
	height: 40px; /* 높이 */
	display: inline-block; /* 인라인 블록 디스플레이 */
	text-align: center; /* 텍스트 중앙 정렬 */
	line-height: 38px; /* 라인 높이 */
	border: 1px solid #eee; /* 테두리 */
	border-radius: 5px; /* 테두리 반경 */
	font-weight: 700; /* 폰트 두께 */
	color: #1e1e1e; /* 폰트 색상 */
	font-size: 15px; /* 폰트 크기 */
	text-decoration: none; /* 텍스트 데코레이션 없음 */
	transition: all 0.5s; /* 트랜지션 효과 */
}
.page-navigation ul li a:hover,
.page-navigation ul li.current-page a {
	background-color: #3a8bcd; /* 배경색 */
	border-color: #3a8bcd; /* 테두리 색상 */
	color: #fff; /* 폰트 색상 */
}



/* Responsive Style */
/* 반응형 스타일 */
@media (max-width: 991px) {

	.banner {
		border-top: none; /* 상단 경계선 없음 */
		margin-top: 0px; /* 상단 마진 없음 */
	}
	.navbar .navbar-brand {
		width: auto; /* 너비 자동 */
	}
	.navbar:after {
		display: none; /* 디스플레이 없음 */
	}
	#navbarResponsive {
	    z-index: 99999; /* z-index */
	    position: absolute; /* 절대 위치 */
	    top: 96px; /* 상단 위치 */
	    max-width: 1500px; /* 최대 너비 설정 */
        margin: 0 auto; /* 가운데 정렬을 위한 자동 마진 설정 */
	    text-align: center; /* 텍스트 중앙 정렬 */
	    background-color: rgba(250,250,250,0.95); /* 배경색 */
	    box-shadow: 0px 10px 10px rgba(0,0,0,0.1); /* 그림자 */
	}
	.navbar-dark .navbar-nav .nav-item {
		border-bottom: 1px solid #eee; /* 하단 경계선 */
	}
	.navbar-dark .navbar-nav .nav-item:last-child {
		border-bottom: none; /* 하단 경계선 없음 */
	}
	.navbar-dark .navbar-nav .nav-link {
		padding: 15px 0px; /* 패딩 */
	}
	.featured-page #filters {
		text-align: right; /* 텍스트 오른쪽 정렬 */
	} 
	.single-product .right-content {
		margin-top: 30px; /* 상단 마진 */
	}
	.about-page .right-content {
		margin-top: 30px; /* 상단 마진 */
	}
	.contact-page .right-content {
		margin-top: 30px; /* 상단 마진 */
	}
	.contact-page .right-content .col-md-6,
	.contact-page .right-content .col-md-12 {
		padding: 0px; /* 패딩 없음 */
	}
	.featured-page {
		margin-top: 80px; /* 상단 마진 */
	}
	.about-page,
	.contact-page {
		margin-top: 0px; /* 상단 마진 없음 */
	}

}

@media (max-width: 767px) {

	.subscribe-form .main-content form input.button {
		margin-top: 20px; /* 상단 마진 */
	}
	.featured-page #filters {
		margin-top: 15px; /* 상단 마진 */
		text-align: left; /* 텍스트 왼쪽 정렬 */
	} 

}


.shortcut-button {   /* 바로가기 버튼 */
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #000000;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .shortcut-button:hover {
            background-color: #0056b3;
        }







/* 기본 네비게이션 스타일 */
.nav-item {
  position: relative; /* 드롭다운 메뉴의 위치를 부모 요소에 상대적으로 설정 */
}

.nav-link {
  display: block; /* 블록 요소로 설정하여 전체 영역 클릭 가능하게 함 */
  padding: 0.5rem 1rem; /* 내부 여백 설정 */
  color: black; /* 글자 색상 설정 */
  text-decoration: none; /* 밑줄 제거 */
}

.nav-link:hover {
  background-color: #ffffff; /* 마우스 오버 시 배경색 변경 */
}

/* 드롭다운 메뉴 스타일 */


.dropdown-content {
  width: 150px; /* 너비 조정 */
  display: none; /* 기본 상태에서 드롭다운 메뉴를 숨김 */
  position: absolute; /* 부모 요소에 상대적인 위치 설정 */
  background-color: #ffffff; /* 배경색 설정 */
  min-width: 16px; /* 최소 너비 설정 */
  z-index: 1; /* 다른 요소보다 위에 표시되도록 설정 */
}

.dropdown-content a {
  color: black; /* 글자 색상 설정 */
  padding: 12px 16px; /* 내부 여백 설정 */
  text-decoration: none; /* 밑줄 제거 */
  display: block; /* 블록 요소로 설정하여 전체 영역 클릭 가능하게 함 */
}

.dropdown-content a:hover {
  background-color: #cacaca; /* 마우스 오버 시 배경색 변경 */
}

/* 드롭다운 메뉴를 보이게 하는 스타일 */
.nav-item:hover .dropdown-content {
  display: block; /* 부모 요소에 마우스를 올렸을 때 드롭다운 메뉴를 표시 */
}





/* div 텍스트, 이미지 배열과 반응형 */


.specific-container {
  display: flex; /* 플렉스 박스를 사용하여 내부 요소들을 나란히 배치 */
  align-items: center; /* 세로 정렬을 중앙으로 맞춤 */
  width: 80%; /* 전체 컨테이너의 너비 조절 */
  margin: 0 auto; /* 중앙 정렬 */
  border: 0px solid #ddd; /* 컨테이너 테두리 */
  padding: 20px; /* 컨테이너 내부 여백 */
  flex-direction: row;

}

.specific-container .image {
  flex: 1; /* 이미지가 차지할 공간 비율 설정 */
}

.specific-container .image img {
  max-width: 100%; /* 이미지가 부모 요소의 너비를 넘지 않도록 설정 */
  height: auto; /* 이미지의 비율을 유지하며 크기 조절 */
}

.specific-container .text {
  flex: 1; /* 텍스트가 차지할 공간 비율 설정 */
  padding-left: 10px; /* 텍스트와 이미지 사이에 여백 추가 */
  text-align: left; /* 텍스트를 왼쪽 정렬 */
}

/* 표 스타일 */
.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left; /* 텍스트를 왼쪽 정렬 */
}

.custom-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .specific-container {
    flex-direction: column; /* 플렉스 방향을 세로로 변경 */
    text-align: left; /* 텍스트를 왼쪽 정렬 유지 */
    width: 100%; /* 모바일에서 전체 너비 사용 */
  }

  .specific-container .text {
    padding-left: 0; /* 수직 배치 시 왼쪽 여백 제거 */
    padding-top: 20px; /* 텍스트 위쪽에 여백 추가 */
  }
}








/* PC 화면에서 이미지 크기 설정 */
@media (min-width: 768px) {
  .bannerTop img {
    width: 1000px; /* PC 화면에서 이미지를 부모 요소인 .bannerTop의 너비에 맞춤 */
    max-width: 100%; /* 이미지가 원본 크기를 넘지 않도록 최대 너비 설정 */
    height: auto; /* 이미지의 비율 유지 */
  }
}

/* 스마트폰 화면에서 이미지 크기 설정 */
@media (max-width: 767px) {
  .bannerTop img {
    width: 100%; /* 스마트폰 화면에서 이미지를 부모 요소인 .bannerTop의 너비에 맞춤 */
    max-width: 100%; /* 이미지가 원본 크기를 넘지 않도록 최대 너비 설정 */
    height: auto; /* 이미지의 비율 유지 */
  }
}





<style>
  .text-only {
    color: black; /* 텍스트를 블랙으로 설정 */
  }
  .text-only ul li a {
    color: black; /* 링크 텍스트도 블랙으로 설정 */
    text-decoration: none; /* 링크 밑줄 제거 */
  }
</style>








/* 랭킹 */


.ranking-items {
    margin-bottom: 70px; /* 하단 여백 설정 */
}

.ranking-item {
    border-radius: 5px; /* 테두리 반경 설정 */
    border: 1px solid #eee; /* 테두리 설정 */
    padding: 20px; /* 패딩 설정 */
    transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */
}

.ranking-item:hover {
    opacity: 0.9; /* 마우스를 올렸을 때 불투명도 설정 */
}

.ranking-item img {
    width: 100%; /* 너비 설정 */
}

.ranking-item h4 {
    font-size: 17px; /* 글자 크기 설정 */
    font-weight: 700; /* 글자 두께 설정 */
    color: #1e1e1e; /* 글자 색상 설정 */
    margin-top: 15px; /* 상단 여백 설정 */
    transition: all 0.5s; /* 모든 속성의 전환 효과 설정 */
}

.ranking-item:hover h4 {
    color: #3a8bcd; /* 마우스를 올렸을 때 글자 색상 설정 */
}

.ranking-item h6 {
    color: #3a8bcd; /* 글자 색상 설정 */
    font-size: 15px; /* 글자 크기 설정 */
    font-weight: 700; /* 글자 두께 설정 */
    margin-bottom: 0px; /* 하단 여백 제거 */
}

.owl-theme .owl-dots {
    text-align: center; /* 텍스트 정렬 설정 */
    margin-top: 30px; /* 상단 여백 설정 */
}

.owl-theme .owl-dots .owl-dot {
    outline: none; /* 외곽선 */
}



/* 페이지버튼 */
.pagination {
    text-align: center; /* 페이지 버튼 가운데 정렬 */
}

.page-btn {
    background-color: white; /* 배경색 */
    color: black; /* 텍스트 색상 */
    border: none; /* 테두리 제거 */
    padding: 10px 20px; /* 내부 여백 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 기본 링크 효과 제거 */
    display: inline-block;
    font-size: 13px; /* 글꼴 크기 */
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px; /* 모서리 둥글게 */
}

.page-btn:hover {
    background-color: lightgray; /* 마우스 호버 시 배경색 변경 */
}



/* 아워샵 슬라이드 */

.subscribe-form {
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 33.33%;
  box-sizing: border-box;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 1;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}




/* 가이드2번째버젼 */

.guidemenu {
    margin-left: 395px; /* 원하는 만큼의 왼쪽 여백 추가 */
}

.guidemenu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.guidemenu ul li {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}

.guidemenu ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.guidemenu ul li:hover .submenu {
    display: block;
}

.guidemenu .submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    width: 250px; /* 너비 조정 */

}


.guidemenu .submenu li:hover {
    background-color: #f0f0f0; /* 마우스 호버 시 배경색 */
}


.guidemenu .submenu li {
    display: block;
    margin-bottom: 5px;
}

.guidemenu .submenu li a {
    color: #333;
    text-decoration: none;
}

.guidemenu .submenu li a:hover {
    text-decoration: underline;
}




/* 가격정렬 라디오 스타일 */

.radio {
    margin: 0 10px;
}

label {
    font-size: 16px;
    margin-right: -5px;
    margin-left: 30px;

    cursor: pointer;
}