/* =========================================================================

==base
==pop-ad
==header
==banner
==product
==product info
==sidebar + pagination + breadcrumb + up cate
==news
==video + faq
==footer
==privacy
==subscribe-popup
==RWD

========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/* wow animation載入預設透明度校正，配合custom.js */
/* .wow {
	opacity: 0;
}

.cke_editable .wow {
	opacity: 1;
} */

/* =========================================================================
==base
========================================================================= */
:root {
	--fs-BNTitle: 48px;
	--fs-sectionTitle: 28px;
	--fs-infoTitle: 28px;
	--fs-BNTxt: 20px;
	--fs-sidebarTitle: 20px;
	--fs-itemTitle: 18px;
	--fs-headerNav: 16px;
	--fs-normal: 16px;
	--fs-small: 14px;

	--section: 80px;
	--fixedSize: 44px;

	--cnvs-themecolor: #5B6255;
	--cnvs-themecolor-rgb: 91, 98, 85;
	--cnvs-txt: #333333;
	--cnvs-bg-gray: #F2F1EE;
	--cnvs-bg-gray2: #EAE9E6;
	--cnvs-txt-gray: #999999;
	--cnvs-txt-gray2: #878787;
	--cnvs-red: #D86767;
	--cnvs-gold: #a15b14;
	--cnvs-blue: #6693c8;
}

/* ================= base ================= */
body,
.form-control {
	word-break: break-word;
	letter-spacing: 1px;
	line-height: 1.8;
	font-weight: 400;
	font-family: "Noto Sans TC", sans-serif;
	color: var(--cnvs-txt);
}

.form-control::placeholder {
	color: var(--cnvs-txt-gray);
}

p:last-child,
ul:last-child,
ol:last-child,
li:last-child,
form:last-child,
.form-control:last-child {
	margin-bottom: 0;
}

a {
	color: var(--cnvs-txt);
	transition: .3s ease;
}

a:hover {
	color: var(--cnvs-themecolor);
}

button {
	transition: .3s ease;
}

/* ================= ellipsis ================= */
.one-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.two-row { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.three-row { 
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
	

/* ==================== btn ==================== */
.btn-base {
	display: inline-flex;
	padding: 8px 48px;
	border-radius: 4px;
	color: var(--cnvs-white);
	background-color: var(--cnvs-themecolor);
	border: 1px solid var(--cnvs-themecolor);
	transition: .3s ease;
}

.btn-base:hover,
.btn-base:active {
	background-color: var(--cnvs-txt);
	border-color: var(--cnvs-txt);
	color: var(--cnvs-white);
}

.btn-base.no-bg {
	padding: 8px 32px;
	gap: 8px;
	background-color: transparent;
	color: var(--cnvs-themecolor);
}

.btn-base.no-bg:hover,
.btn-base.no-bg:active {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

/* ==================== title ==================== */
.section-title {
	font-size: var(--fs-sectionTitle);
	line-height: 1.5;
	color: var(--cnvs-txt);
	font-weight: 400;
}

.section-title .en {
	font-size: var(--fs-normal);
	font-weight: 400;
	line-height: 1.8;
	color: var(--cnvs-txt-gray);
}

.item-title {
	font-size: var(--fs-itemTitle);
	color: var(--cnvs-txt);
	line-height: 1.5;
	font-weight: 400;
	margin-bottom: 6px;
}

.info-title {
	font-size: var(--fs-infoTitle);
	line-height: 1.5;
	color: var(--cnvs-txt);
}

/* ==================== other ==================== */
#wrapper {
	background-color: var(--cnvs-bg-gray);
}

.section {
	background-color: transparent;
	padding: var(--section) 0;
	margin: 0;
}

.form-control {
	background-color: transparent;
	border-radius: 4px;
	border: 1px solid var(--cnvs-txt-gray);
}

.form-control:focus {
	background-color: transparent;
	box-shadow: none;
	color: var(--cnvs-txt);
	border-color: var(--cnvs-themecolor);
}

.form-control[readonly]:focus {
	border-color: var(--cnvs-txt-gray);
}

.color-red {
	color: var(--cnvs-red) !important;
}

.color-gold {
	color: var(--cnvs-gold) !important;
}

.color-blue {
	color: var(--cnvs-blue) !important;
}

.color-gray {
	color: var(--cnvs-txt-gray) !important;
}

.bg-red {
	background-color: var(--cnvs-red) !important;
}

.bg-blue {
	background-color: var(--cnvs-blue) !important;
}

.bg-gray2 {
	background-color: var(--cnvs-bg-gray2) !important;
}

.bg-txt {
	background-color: var(--cnvs-txt) !important;
}

/* =========================================================================
==pop-ad
========================================================================= */
.pop-ad {
	display: flex;
	background-color: rgba(0,0,0,0.7);
	z-index: 999;
}

.pop-ad-content {
	max-width: 950px;
	max-height: 90%;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
	overflow: auto;
	padding-top: 36px;
}

/* .pop-ad-content .img-wrap {
	aspect-ratio: 1920 / 1070;
} */

.pop-ad-content .img-wrap img {
	object-fit: cover;
}

.pop-ad-content .btn-base {
	font-size: var(--fs-BNTxt);
	padding: 16px 16px;
}

.pop-ad-close {
	top: 0px;
	color: var(--cnvs-white);
}

/* =========================================================================
==header
========================================================================= */
#header {
	--cnvs-header-height: 59px;
	--cnvs-primary-menu-submenu-padding-y: 8px;
	--cnvs-top-search-placeholder: var(--cnvs-txt-gray);
}

#header-wrap,
.is-expanded-menu .sticky-header #header-wrap,
body:not(.is-expanded-menu) .sticky-header #header-wrap {
	background-color: var(--cnvs-bg-gray);
}

#header-wrap {
	border-bottom-color: var(--cnvs-bg-gray2);
	z-index: 99;
}

.header-wrap-clone {
  height: calc(var(--cnvs-header-height) + 13px);
}

/* ================= logo ================= */
#header-wrap #logo img {
	width: 135px;
	height: auto;
	object-fit: contain;
}

/* ================= icons ================= */
.header-misc {
	gap: 24px;
}

.header-misc-icon > a {
	font-size: 24px;
	color: var(--cnvs-txt);
}

.header-misc-icon.login-icon a {
	font-size: 26px;
}

.top-cart-number {
	font-size: 10px;
	width: 18px;
	height: 18px;
	background-color: var(--cnvs-txt);
}

.top-search-form input {
	font-size: var(--fs-headerNav);
}

/* ================= menu ================= */
.is-expanded-menu .menu-link {
	--cnvs-primary-menu-padding-x: 14px;
}

.menu-link span,
.sub-menu-container .menu-item > .menu-link span,
.is-expanded-menu .sub-menu-container .menu-item > .menu-link span {
	font-size: var(--fs-headerNav);
	line-height: 1.5;
	font-weight: 400;
	color: var(--cnvs-txt);
}

.menu-item .menu-link > div span {
	display: inline-block;
	position: relative;
	padding: 4px;
}

.menu-container > .menu-item > .menu-link > div > span::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--cnvs-txt);
  transition: transform .4s ease;
  transform: scale3d(0, 1, 1);
  transform-origin: 100% 50%;
  transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
}

.menu-container > .menu-item:hover > .menu-link > div > span::before {
  transform: scale3d(1, 1, 1);
  transform-origin: 0% 50%;
}

.sub-menu-container .menu-item > .menu-link > div > span::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-bottom: solid 1px transparent;
  transition: .3s all;
}

.sub-menu-container .menu-item:hover > .menu-link > div > span::before {
	border-bottom-color: var(--cnvs-txt);
}

/* ================= ham ================= */
.cnvs-hamburger {
	--cnvs-hamburger-size: 20px;
	--cnvs-hamburger-offset: calc(-1 * calc(calc(var(--cnvs-hamburger-size) - calc(var(--cnvs-hamburger-width) * 2)) * .45));
}

.cnvs-hamburger .cnvs-hamburger-inner,
.cnvs-hamburger .cnvs-hamburger-inner::before,
.cnvs-hamburger .cnvs-hamburger-inner::after {
	background-color: var(--cnvs-txt);
}

.primary-menu-trigger {
	margin-left: 12px;
}

/* =========================================================================
==banner
========================================================================= */
.slider-element {
	aspect-ratio: 1920 / 720;
}

.swiper-slide-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.3);
}

.banner-title {
	font-size: var(--fs-BNTitle);
	line-height: 1.3;
}

.banner-desc {
	font-size: var(--fs-BNTxt);
}

.swiper-pagination span,
.swiper-pagination span:hover {
	width: 8px;
	height: 8px;
	border: none;
	background-color: var(--cnvs-themecolor) !important;
	opacity: 0.6;
}

.swiper-pagination span.swiper-pagination-bullet-active {
	background-color: var(--cnvs-themecolor) !important;
	opacity: 1;
}

.banner-mobile {
	display: none;
}

/* =========================================================================
==product
========================================================================= */
/* ================= img ================= */
.pd-item .img-wrap img {
	transition: .3s ease;
}

.pd-item:hover .img-wrap img {
	transform: scale(1.05);
}

/* ================= txt ================= */
.pd-item .item-title {
	font-size: 15px;
	margin-bottom: 0;
}

.pd-item .item-title span {
	border-bottom: 1px solid transparent;
	transition: .3s all;
}

.pd-item:hover .item-title span {
	color: var(--cnvs-themecolor);
	border-bottom-color: var(--cnvs-themecolor);
}

.pd-item-price {
	color: var(--cnvs-contrast-600);
	line-height: 1.3;
}

.pd-item-price * {
	line-height: 1.3;
}

.pd-item-price .txt {
	font-weight: 600;
	font-size: var(--fs-small);
	color: var(--cnvs-contrast-600);
}

/* ================= tag ================= */
.tag-wrap {
	font-size: var(--fs-small);
	line-height: 1.3;
	top: 0;
	left: 0;
	padding: 12px;
	gap: 4px;
}

.tag-item {
	padding: 3px 12px;
	border-radius: 2px;
}

.tag-item.keyword-item {
	border: 1px solid #d0d0d0;
	color: var(--cnvs-txt-gray2);
	font-size: var(--fs-small);
}

.sidebar-item .tag-item.keyword-item {
	padding: 1px 5px;
	display: inline-block;
	line-height: 1.5;
}

.tag-item.keyword-item:hover {
	border-color: var(--cnvs-themecolor);
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

/* ================= owl nav ================= */
.owl-carousel .owl-nav [class*=owl-] {
	opacity: 1;
	width: 48px;
	height: 48px;
	font-size: 20px;
	color: var(--cnvs-themecolor);
	background-color: transparent;
	border-color: var(--cnvs-txt-gray);
}

.owl-carousel .owl-nav [class*=owl-]:hover {
	color: var(--cnvs-white);
}

.owl-carousel .owl-nav [class*=owl-] {
	left: calc(-1 * (48px + 36px));
}

.owl-carousel .owl-nav .owl-next {
	left: auto;
	right: calc(-1 * (48px + 36px));
}

.owl-dots {
	display: none;
}

/* ================= more btn ================= */
.sec-more-btn {
	margin-top: 56px;
}

/* ================= price filter ================= */
.pd-func-wrap {
	margin-bottom: 36px;
}

.price-filter input {
	max-width: 150px;
	height: 38px;
}

.price-filter .btn-base {
	height: 38px;
}

.price-filter-item button {
	border-radius: 2px;
}

/* =========================================================================
==product info
========================================================================= */
/* ================= swiper ================= */
.proSwiper .swiper-slide {
	opacity: 0.6;
}

.proSwiper .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}

/* ================= swiper nav ================= */
[class*=swiper-button]::after {
	display: none;
}

[class*=swiper-button] {
	width: 48px;
	height: 48px;
	font-size: 20px;
	border-radius: 50%;
	color: var(--cnvs-txt-gray);
	background-color: transparent;
	border: 1px solid transparent;
	opacity: 0;
	transition: .3s ease;
}

.prodcut-info-img-wrap:hover [class*=swiper-button] {
	opacity: 0.5;
}

.prodcut-info-img-wrap:hover [class*=swiper-button]:hover {
	opacity: 1;
	border-color: var(--cnvs-txt-gray);
}

/* ================= bigger-btn ================= */
.img-bigger-btn {
	opacity: 0;
	cursor: pointer;
	width: 44px;
	height: 44px;
	font-size: 22px;
	color: var(--cnvs-txt-gray);
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.2);
	bottom: 24px;
	right: 24px;
	transition: .3s ease;
}

.img-bigger-btn:hover {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

.proSwiper2 .swiper-slide:hover .img-bigger-btn {
	opacity: 1;
}

/* ================= product side infomation ================= */
.pd-side-info-wrap .more-btn {
	border-left: 1px solid #d0d0d0;
}

/* ================= spec ================= */
.pd-side-info-wrap .spec-wrap input[type="radio"] {
	display: none;
}

.pd-side-info-wrap .spec-wrap .specs-item {
	line-height: 1.5;
	padding: 4px 12px;
	border: 1px solid var(--cnvs-themecolor);
	cursor: pointer;
}

.pd-side-info-wrap .spec-wrap input[type="radio"]:checked + .specs-item {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

/* ================= num ================= */
.pd-side-info-wrap .num-wrap input {
	background-color: transparent;
	border: 1px solid var(--cnvs-themecolor);
}

.pd-side-info-wrap .num-wrap .qty {
	border-right: none;
	border-left: none;
	width: 150px;
}

/* ================= price ================= */
.pd-side-info-wrap .price-wrap .price-item .txt {
	color: var(--cnvs-txt-gray2);
}

.pd-side-info-wrap .price-wrap .price-item .price {
	font-size: 20px;
}

/* ================= tag ================= */
.pd-side-info-wrap .info-tag-wrap {
	gap: 4px;
}

/* ================= btn ================= */
.pd-side-info-wrap .like-btn {
	background-color: transparent;
	color: var(--cnvs-txt);
	border-color: var(--cnvs-txt);
}

.pd-side-info-wrap .like-btn:hover {
	background-color: var(--cnvs-txt);
	color: var(--cnvs-white);
}

.bl_iAddCart.btn-base {
	background-color: var(--cnvs-red);
	border-color: var(--cnvs-red);
}

.bl_iAddCart.btn-base:hover,
.bl_iAddCart.btn-base:active {
	background-color: #c63e3e;
	border-color: #c63e3e;
}

/* ================= share ================= */
.share-wrap a {
	font-size: 20px;
	color: var(--cnvs-txt);
}

.share-wrap a.fa-link {
	font-size: 17px;
}

.share-wrap a.fa-link:hover {
	color: var(--cnvs-themecolor);
}

/* ================= comment ================= */
/* ==== view ==== */
.comment-view-wrap > ul > li {
	border-bottom: 1px solid #d0d0d0;
}

.comment-view-wrap .star-wrap {
	gap: 16px;
}

.comment-view-wrap .star-wrap .date {
	color: var(--cnvs-txt-gray2);
}

.comment-view-wrap .star-wrap .dot::before {
	content: '';
	display: inline-block;
	margin-right: 16px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--cnvs-txt-gray2);
	vertical-align: 3px;
}

.comment-view-wrap .list-info {
	column-gap: 80px;
	row-gap: 8px;
}

/* ==== wirte ==== */
.comment-write-wrap .rate-wrap input[type="radio"] {
	display: none;
}

.comment-write-wrap .rate-wrap {
	direction: rtl;
}

.comment-write-wrap .rate-wrap label {
	font-size: 20px;
	color: var(--cnvs-txt-gray);
}

.comment-write-wrap .rate-wrap label:hover,
.comment-write-wrap .rate-wrap label:hover ~ label,
.comment-write-wrap .rate-wrap input:checked ~ label,
.comment-write-wrap .rate-wrap:hover > input:checked ~ label
{
  color: var(--cnvs-themecolor);
}

.comment-write-wrap .rate-wrap label:hover i::before,
.comment-write-wrap .rate-wrap label:hover ~ label i::before,
.comment-write-wrap .rate-wrap input:checked ~ label i::before,
.comment-write-wrap .rate-wrap:hover > input:checked ~ label i::before
{
  content: '\f586';
}

/* ==== upload ==== */
.comment-write-wrap .upload_wrap .upload_btn {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
	border: 1px solid var(--cnvs-txt-gray);
  border-radius: 4px;
	overflow: hidden;
}

.comment-write-wrap .upload_wrap i {
  position: absolute;
  color: #aaa;
  font-size: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
	pointer-events: none;
	transition: .3s ease;
}

.comment-write-wrap .upload_wrap .upload_btn input {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.comment-write-wrap .upload_wrap .upload_btn:hover i {
	color: var(--cnvs-white);
}

.comment-write-wrap .upload_wrap .upload_btn input:after {
  content: "";
  position: absolute;
  font-size: 15px;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  display: block;
  background: var(--cnvs-bg-gray);
  text-align: center;
  transition: all 0.3s;
}

.comment-write-wrap .upload_wrap .upload_btn:hover input:after {
  background: #9da199;
}


/* =========================================================================
==sidebar + pagination + breadcrumb + up cate
========================================================================= */
/* ================= sidebar ================= */
.sidebar-item:not(:first-child) {
	margin-top: 56px;
}

.sidebar-title {
	position: relative;
	color: var(--cnvs-txt);
	font-size: var(--fs-sidebarTitle);
	font-weight: 600;
	margin-bottom: 16px;
	z-index: 0;
}

.sidebar-item .toggle.active .toggle-header {
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.5) !important;
	color: var(--cnvs-white);
}

.sidebar-item .toggle.active .toggle-title {
	padding-left: 16px;
}

.sidebar-item .toggle.active .toggle-title span {
	color: var(--cnvs-white) !important;
}

.sidebar-item .toggle.active .toggle-content .active span {
	color: var(--cnvs-txt);
	font-weight: 500;
}

.sidebar-item .toggle:hover .toggle-header {
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.2);
}

.sidebar-item .toggle .toggle-title:hover span,
.sidebar-item .toggle .toggle-content a:hover {
	color: var(--cnvs-themecolor);
}

.sidebar-item .toggle-title {
	padding-top: 2px;
	padding-bottom: 2px;
}

.sidebar-item .toggle-title,
.sidebar-item .toggle-content li a {
	color: var(--cnvs-txt-gray2);
}

.sidebar-item .toggle-header {
	font-weight: 400;
}

.sidebar-item .toggle-icon {
	transform: translateY(3px);
}

/* ================= pagination ================= */
.page-item {
	margin: 0 4px;
}

.page-link {
	width: 42px;
	height: 42px;
	border-radius: 50% !important;
	border: 0;
	background-color: transparent;
}

.page-link.arrow {
	background-color: transparent;
	font-size: 14px;
}

.page-link:hover,
.page-link.arrow:hover {
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.3);
}

.page-item.active	.page-link {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

/* ================= breadcrumb ================= */
.breadcrumb-wrap .main-content {
	gap: 8px;
}

.breadcrumb-wrap * {
	color: var(--cnvs-txt-gray2);
	line-height: 1.5;
}

.breadcrumb-wrap li:not(:last-child):after {
	content: "\f285";
	font-family: bootstrap-icons !important;
	vertical-align: -.125em;
	font-size: 12px;
	display: inline-block;
	margin: 0 6px;
}

.breadcrumb-wrap li.active {
	color: var(--cnvs-themecolor);
}

.breadcrumb-wrap .h1 {
	font-size: 18px;
}

.breadcrumb-wrap a {
	border-bottom: 1px solid transparent;
}

.breadcrumb-wrap a:hover {
	border-bottom-color: var(--cnvs-themecolor);
}

/* ================= up cate ================= */
.up-cate-wrap {
	gap: 16px;
}

.up-cate-wrap a {
	padding: 4px 24px;
	border: 1px solid var(--cnvs-themecolor);
	color: var(--cnvs-themecolor);
}

.up-cate-wrap a:hover {
	border-color: rgba(var(--cnvs-themecolor-rgb), 0.5);
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.5);
	color: var(--cnvs-white);
}

.up-cate-wrap li.active a {
	background-color: var(--cnvs-themecolor);
	color: var(--cnvs-white);
}

/* =========================================================================
==news
========================================================================= */
.news-item {
	column-gap: 32px;
}

.news-item .img-wrap img {
	transition: .3s ease;
}

.news-item .img-wrap:hover img {
	transform: scale(1.05);
}

.news-item .item-title span {
	border-bottom: 1px solid transparent;
}

.news-item .item-title a:hover span {
	border-bottom-color: var(--cnvs-themecolor);
}

.news-item .more-btn {
	font-size: var(--fs-small);
	border-bottom: 1px solid transparent;
}

.news-item .more-btn:hover {
	border-bottom-color: var(--cnvs-themecolor);
}

/* ================= sidebar hot ================= */
.news-hot-wrap .news-item {
	column-gap: 16px
}

.news-hot-wrap .news-item .item-title a {
	color: var(--cnvs-txt-gray2);
}

.news-hot-wrap .news-item .item-title a:hover {
	color: var(--cnvs-themecolor);
}

/* ================= news info ================= */
.news-info-wrap * {
	color: var(--cnvs-txt-gray2);
}

.news-info-wrap a {
	color: var(--cnvs-themecolor);
	border-bottom: 1px solid transparent;
}

.news-info-wrap a:hover {
	border-bottom-color: var(--cnvs-themecolor);
}

.news-info-wrap .dot::before {
	content: '';
	display: inline-block;
	margin-right: 16px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--cnvs-txt-gray2);
	vertical-align: 3px;
}

/* =========================================================================
==video + faq
========================================================================= */
.video-list-wrap iframe {
	aspect-ratio: 128/72 !important;
	width:100% !important;
}

.faq-wrap .toggle-content {
	color: var(--cnvs-txt-gray2);
}

/* =========================================================================
==intro
========================================================================= */
.intro-paragraph-2 {
	margin-bottom: 32px;
}

.intro-paragraph-2 .img-wrap {
	transform: translateY(32px);
}

.intro-paragraph-2 .txt {
	padding: 40px;
}

.intro-paragraph-2 .icons-wrap > div:nth-child(odd) {
	border-right: 1px solid var(--bs-border-color);
}

.intro-paragraph-2 .icons-wrap > div:nth-child(1),
.intro-paragraph-2 .icons-wrap > div:nth-child(2) {
	border-bottom: 1px solid var(--bs-border-color);
}

.intro-paragraph-3 .txt {
	padding: 24px 60px;
}

.intro-paragraph-3 .scale-reverse {
	transform: scale(-1);
}

/* =========================================================================
==footer
========================================================================= */
/* ================= footer sec 1 ================= */
.footer-img img {
	width: 170px;
}

.foooter-sns a {
	font-size: 24px;
}

.footer-h1 {
	font-size: var(--fs-normal);
	line-height: 1.8;
	font-weight: 600;
}

/* ================= menu ================= */
.widget a {
	border-bottom: 1px solid transparent;
}

.widget a:hover {
	border-bottom-color: var(--cnvs-themecolor);
}

.widget .footer-menu {
	display: flex;
	flex-wrap: wrap;
}

.widget .footer-menu li {
	width: 159px;
}

/* ================= contact ================= */
.foooter-contact a span {
	border-bottom: 1px solid transparent;
}

.foooter-contact a:hover span {
	border-bottom-color: var(--cnvs-themecolor);
}

/* ================= copyrights ================= */
.copyrights {
	font-size: var(--fs-small);
}

/* ================= float sns ================= */
.float-sns-wrap {
	gap: 16px;
	right: 36px;
	bottom: calc(30px + var(--fixedSize) + 16px);
	z-index: 99;
}

.float-sns-wrap a {
	font-size: 22px;
}

.float-sns-wrap .social-icon,
.stretched #gotoTop {
	width: var(--fixedSize);
	height: var(--fixedSize);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

/* .float-sns-wrap .bg-facebook i {
	transform: translateY(3px);
} */

/* ================= go to top ================= */
.stretched #gotoTop {
	font-size: 22px;
	background-color: var(--cnvs-themecolor);
	right: 36px;
	bottom: 30px;
}

.stretched #gotoTop:hover {
	background-color: var(--cnvs-txt);
}

/* =========================================================================
==subscribe-popup
========================================================================= */
.changeModal .modal-dialog {
	max-width: 1150px;
}

.changeModal input {
	display: none;
	-webkit-appearance: none;
}

.changeModal .checkbox::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 0.25em;
	border: 1px solid var(--cnvs-themecolor);
	margin-right: 8px;
}

.changeModal input:checked + label .checkbox::before,
.changeModal input:checked + .label .checkbox::before {
	background-image: url(../images/check.svg);
	background-color: var(--cnvs-themecolor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.changeModal input:checked + label .main-txt,
.changeModal input:checked + .label .main-txt {
	border-color: var(--cnvs-themecolor) !important;
}

/* =========================================================================
==RWD
========================================================================= */
@media (min-width: 1200px) {
	.menu-link {
		padding: 28px var(--cnvs-primary-menu-padding-x) 12px;
	}

	.header-misc {
		padding-bottom: 16px;
	}

	#logo {
		padding-bottom: 16px;
	}
}

@media (max-width: 1499px) {
	/* ================= product ================= */
	.owl-dots {
		display: block;
	}

	.owl-nav {
		display: none;
	}

	.owl-carousel .owl-dots .owl-dot {
		margin-top: 36px;
	}
}

@media (max-width: 1399px) {
	#header-wrap #logo img {
		width: 130px;
	}

	.widget .footer-menu li {
		width: 180px;
	}
}

@media (max-width: 1199px) {
	/* ================= base ================= */
	:root {
		--fs-BNTitle: 40px;
		--fs-BNTxt: 18px;

		--section: 60px;
	}

	/* ================= pop-ad ================= */
	.pop-ad-content {
		max-width: 800px;
	}

	/* ================= header ================= */
	#header {
		--cnvs-header-height: 80px;
	}

	.header-wrap-clone {
		height: calc(var(--cnvs-header-height) + 1px);
	}
	
	#header-wrap #logo img {
		width: 120px;
		height: var(--cnvs-header-height);
	}

	.menu-item .menu-link > div span {
		padding: 0;
	}

	.menu-container > .menu-item > .menu-link > div > span::before {
		display: none;
	}

	/* ================= product ================= */
	.sec-more-btn {
		margin-top: 48px;
	}

	/* ================= subscribe-popup ================= */
	.changeModal .modal-dialog {
		max-width: 90%;
	}
}

@media (max-width: 991px) {
	/* ================= base ================= */
	:root {
		--fs-sectionTitle: 26px;
		--fs-infoTitle: 26px;
		/* --fs-headerNav: 17px; */
	}

	.wow {
		animation-name: none !important;
		visibility: visible !important;
		opacity: 1;
	}
	
	/* ================= pop-ad ================= */
	.pop-ad-content {
		max-width: 680px;
	}

	/* ================= banner ================= */
	#slider {
		display: none !important;
	}

	.banner-mobile {
		display: block;
	}

	.slider-element {
		aspect-ratio: 1200 / 1065;
	}

	/* ================= product ================= */
	.sec-more-btn {
		margin-top: 36px;
	}

	.owl-carousel .owl-dots .owl-dot {
		margin-top: 30px;
	}

	/* ================= product info ================= */
	.pd-side-info-wrap .btn-base {
		padding: 8px 32px;
	}

	/* ================= sidebar + pagination + breadcrumb ================= */
	.sidebar-item:not(:first-child) {
		margin-top: 48px;
	}

	/* ================= intro ================= */
	.intro-paragraph-2 {
		margin-bottom: 0;
	}

	.intro-paragraph-2 .img-wrap {
		transform: translateY(0px);
	}

	/* ================= footer ================= */
	.float-sns-wrap,
	.stretched #gotoTop {
		right: 28px;
	}

	.widget .footer-menu li {
		width: 160px;
	}
}

@media (max-width: 767px) {
	/* ================= base ================= */
	.btn-base {
		padding: 8px 40px;
	}
	
	.btn-base.no-bg {
		padding: 6px 28px;
	}

	/* ================= pop-ad ================= */
	.pop-ad-content .btn-base {
		padding: 12px 16px;
	}

	/* ================= header ================= */
	#header {
		--cnvs-header-height: 70px;
	}

	#header-wrap #logo img {
		width: 110px;
	}

	.header-misc {
		gap: 16px;
	}

	.primary-menu-trigger {
		margin-left: 8px;
	}

	.header-misc-icon > a {
		font-size: 22px;
	}

	.header-misc-icon.login-icon a {
		font-size: 24px;
	}

	.cnvs-hamburger {
		--cnvs-hamburger-size: 18px;
	}

	/* ================= product info ================= */
	.comment-view-wrap .list-info {
		column-gap: 60px;
	}

	/* ================= sidebar + pagination + breadcrumb ================= */
	.breadcrumb-wrap .h1 {
		font-size: 16px;
	}
		
	.breadcrumb-wrap * {
		font-size: 14px;
	}

	/* ================= intro ================= */
	.intro-paragraph-2 .txt {
		padding: 36px;
	}

	.intro-paragraph-2 .icons-wrap img {
		width: 100px;
	}

	.intro-paragraph-3 .txt {
		padding: 24px 42px;
	}

	/* ================= privacy ================= */
	.feature-box {
		--cnvs-featured-box-icon: 3.5rem;
	}
}

@media (max-width: 575px) {
	/* ================= base ================= */
	:root {
		--fs-BNTitle: 30px;
		--fs-sectionTitle: 24px;
		--fs-infoTitle: 24px;
		--fs-itemTitle: 17px;
		--fs-BNTxt: 16px;

		--section: 48px;
		--fixedSize: 40px;
	}

	.btn-base {
		padding: 6px 32px;
	}	

	.form-check-input[type=checkbox] {
		transform: translateY(6px);
	}

	/* ================= pop-ad ================= */
	.pop-ad-content .btn-base {
		padding: 10px 16px;
	}

	/* ================= header ================= */
	#header-wrap #logo img {
		width: 105px;
	}

	.header-misc {
		gap: 12px;
	}

	.primary-menu-trigger {
		margin-left: 4px;
	}

	/* ================= product ================= */
	.pd-func-wrap {
		margin-bottom: 24px;
	}

	.price-filter input {
		max-width: 100px;
	}

	.tag-wrap {
		font-size: 12px;
		padding: 6px;
	}

	.tag-item {
    padding: 2px 8px;
	}

	.pd-item-price .txt {
		font-size: 13px;
	}

	.pd-item-price .ori-price span:not(.txt),
	.pd-item-price .member-price span:not(.txt) {
		font-size: 15px;
	}

	/* ================= product info ================= */
	.nav {
		--bs-nav-link-padding-y: 6px;
	}

	.pd-side-info-wrap .btn-base {
		padding: 6px 24px;
	}

	.comment-view-wrap .list-info {
		row-gap: 4px;
	}

	/* ================= sidebar + pagination + breadcrumb ================= */
	.sidebar-item:not(:first-child) {
		margin-top: 44px;
	}

	/* ================= intro ================= */
	.intro-paragraph-2 .txt {
		padding: 24px;
	}

	.intro-paragraph-2 .icons-wrap img {
		width: 90px;
	}

	/* ================= footer ================= */
	.mt-36 {
		margin-top: 36px;
	}

	.foooter-sns a {
		font-size: 22px;
	}

	.float-sns-wrap {
		right: 20px;
		bottom: calc(44px + var(--fixedSize) + 16px);
	}

	.stretched #gotoTop {
		font-size: 20px;
		right: 20px;
		bottom: 44px;
	}

	.social-icon {
		line-height: 36px !important;
	}

	/* ================= privacy ================= */
	.feature-box {
		--cnvs-featured-box-icon: 3.5rem;
	}

	/* ================= subscribe-popup ================= */
	.changeModal .modal-dialog {
		max-width: 100%;
	}
}