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

==base
==header
==banner
==about
==product
==news
==pagi + nodata
==contact
==breadcrumb
==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: 36px; 
	--fs-infoTitle: 28px;
	--fs-itemTitle: 24px;
	--fs-footerTitle: 22px;
	--fs-BNTxt: 20px;
	--fs-headerNav: 18px;
	--fs-btn: 16px; 
	--fs-normal: 16px; 
}

/* ================= 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-block;
	padding: 12px 32px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.3;
	color: var(--cnvs-black);
	background-color: var(--cnvs-themecolor);
	border-radius: 8px;
	transition: .3s ease-in-out;
}

.btn-base:hover {
	background-color: var(--cnvs-orangecolor);
	color: var(--cnvs-white);
}

/* ==================== title ==================== */
.section-title {
	display: block;
	font-size: var(--fs-sectionTitle);
	line-height: 1.5;
	letter-spacing: 1px;
	font-weight: 700;
	color: var(--cnvs-black);
	margin-bottom: 32px;
}

.item-title {
	font-size: var(--fs-itemTitle);
	line-height: 1.5;
	letter-spacing: 1px;
	font-weight: 700;
	margin-bottom: 0;
	transition: .3s ease-in-out;
}


/* =========================================================================
==header
========================================================================= */
#header-wrap {
	padding: 10px 0;
}

.menu-container {
	padding: 10px 0 6px;
}

/* =========================================================================
==banner
========================================================================= */
#slider {
	aspect-ratio: 2000 / 833;
}

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

.banner-title {
	font-size: var(--fs-BNTitle);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.35;
	margin-bottom: 32px;
}

.banner-txt {
	font-size: var(--fs-BNTxt);
	line-height: 1.75;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 32px;
}

[class*=slider-arrow-]:hover i {
	color: var(--cnvs-white);
}


/* =========================================================================
==about
========================================================================= */
.about-item-title {
	font-size: var(--fs-BNTxt);
	line-height: 1.3;
}

.about_4_1:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  background: url('../images/introbg_2000x1115.jpg') no-repeat bottom / cover;
  z-index: 0;
}

.about_4_1__img {
	padding: 5px;
  box-shadow: 0px 0px 6px hsl(180deg 100% 33% / 10%)
}

.about_4_1__img:before {
	content: '';
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(#C78904 14.62%, #F4DB8B 35.85%, #C78904 60.62%, #F4DB8B 85.38%);
	height: 100%;
	z-index: -1;
}

.about_4_1__disc {
  top: calc(50% + 15px);
	transform: translateY(calc(-50% + 15px));
  width: calc(100% + 100px);
  padding: 48px 60px;
  box-shadow: 0px 0px 6px hsl(180deg 100% 33% / 10%);
}

.about_4_1__disc li {
	border-left: 4px solid var(--cnvs-redcolor);
}

.quality-wrap {
	gap: 24px;
}

.quality-wrap > div {
	background-color: rgba(var(--cnvs-themecolor-rgb),.3);
}

/* ================= history ================= */
.history_6__time-item::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(135deg, #C78904 14.62%, #d6c075 35.85%, #C78904 60.62%, rgb(224, 202, 129) 85.38%);
}

.history_6__time-year {
  width: 20%;
  background: linear-gradient(135deg, #C78904 14.62%, #d6c075 35.85%, #C78904 60.62%, rgb(224, 202, 129) 85.38%);
  height: fit-content;
}

.history_6__time-txt {
  position: relative;
  margin-left: 10%;
  width: 70%;
  padding: 10px 0px 10px 30px;
}


/* =========================================================================
==product
========================================================================= */
.product-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255,150,48,0), rgba(255,150,48,.5));
	opacity: 0;
	z-index: 1;
	transition: .3s ease-in-out;
}

.product-item:hover::before {
	opacity: 1;
}

.product-item .img-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5));
	opacity: 1;
	transition: .3s ease-in-out;
}

.product-item:hover .img-wrap::before {
	opacity: 0;
}

/* 預設只顯示 12 筆，展開後顯示全部 */
.default-product-wrap > .mb-4:nth-child(n+13) {
	display: none;
}

.default-product-wrap.is-expanded > .mb-4:nth-child(n+13) {
	display: block;
}

/* ================= cate ================= */
.procate-wrap .pro-sub-link.active {
	background-color: var(--cnvs-redcolor);
	color: var(--cnvs-white);
	border-color: var(--cnvs-redcolor);
}

.pro-sub-link {
	color: var(--cnvs-white);
	border: 1px solid var(--cnvs-white);
	transition: .3s ease;
}

.pro-sub-link:hover {
	background-color: rgb(255 150 48 / 60%);
	border-color: rgb(255 150 48 / 60%);
	color: var(--cnvs-white);
}

/* ================= info img ================= */
.proSwiper .swiper-slide {
	cursor: pointer;
}

.proSwiper2 .swiper-wrapper {
	align-items: center;
}

.swiper-slide-thumb-active {
	border-width: 2px !important;
	border-color: var(--cnvs-redcolor) !important;
}

.swiper-slide-thumb-active::before {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: calc(50% - .5em);
	top: -.5em;
	border-top: 0;
	border-right: .5em solid transparent;
	border-bottom: .5em solid var(--cnvs-redcolor);
	border-left: .5em solid transparent;
}

.prodcut-info-img-wrap [class*=swiper-button-] {
	width: 36px;
	height: 36px;
	margin-top: 0;
	border-color: var(--cnvs-orangecolor) !important;
	opacity: 0;
	transition: .3s ease-in-out;
	color: var(--cnvs-orangecolor);
}

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

.prodcut-info-img-wrap [class*=swiper-button-]:hover {
	background-color: var(--cnvs-orangecolor) !important;
	color: var(--cnvs-white);
}

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

.btn-shopee {
	background-color: #ee4d2d;
	color: var(--cnvs-white);
}

.btn-lineshopping {
	background-color: #06c755;
	color: var(--cnvs-white);
}

.btn-lineshopping:hover {
	background-color: #059a42;
}

.pro-tag {
	padding: 12px;
	gap: 10px;
	font-size: 14px;
}

.prodcut-info-img-wrap .pro-tag {
	font-size: var(--fs-normal);
}

/* ================= tab ================= */
.product-tab-wrap {
	border: 2px solid var(--cnvs-themecolor);
}

.nav-link {
	font-size: 18px;
	position: relative;
	color: var(--cnvs-contrast-600);
}

.nav-link::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 50%;
	background-color: var(--cnvs-redcolor);
}

[role=tablist] a.active {
	color: var(--cnvs-redcolor);
}

/* =========================================================================
==news
========================================================================= */
.news-item {
	padding: 8px;
}

.news-item .grid-inner {
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	border: 1px solid var(--cnvs-redcolor);
	border-top: 5px solid var(--cnvs-redcolor);
}
.news-item .img-wrap {
	display: block;
}

.news-item .img-wrap::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.2);
	opacity: 1;
	transition: .3s ease-in-out;
	z-index: 1;
}

.news-item .date {
	line-height: 1.3;
}

.news-item .img-wrap:hover::before {
	opacity: 0;
}

.news-tag {
	max-width: 58%;
	background-color: var(--cnvs-redcolor);
	line-height: 1.4;
	padding: 4px 8px 4px 32px;
	border-radius: 0px 8px 8px 0px;
	box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

/* .news-tag:hover {
	background-color: var(--cnvs-orangecolor);
} */

.news-tag .php_tagname + .php_tagname::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 16px;
	background-color: #fff;
	margin: 0 8px 0 4px;
	transform: translateY(3px);
}

/* ================= sidebar ================= */
.sidebar {
	top: calc(111px + 24px);
}

.cate-wrap a {
	color: var(--cnvs-black);
}

.cate-wrap li.active a {
	color: var(--cnvs-redcolor);
	background: rgba(var(--cnvs-themecolor-rgb),.15);
	background-image: url(../images/deco-line-3.png);
}

.hot-wrap .news-item .img-wrap {
	width: 140px;
	flex-shrink: 0;
}

.hot-wrap .news-item .item-title {
	font-size: 18px;
}

.hot-wrap .news-item:last-child {
	border: none !important;
}

/* ================= info ================= */
.info-title {
	font-size: var(--fs-infoTitle);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 1px;
}


/* =========================================================================
==pagi + nodata
========================================================================= */
.page-item {
	margin: 0 4px;
}

.page-link {
	width: 42px;
	height: 42px;
	color: var(--cnvs-orangecolor);
	border-color: var(--cnvs-orangecolor);
	background-color: transparent;
}

.nodata {
	border: 1px solid var(--cnvs-black);
}


/* =========================================================================
==contact
========================================================================= */
.contact-item {
	border: 1px solid #D9D9D9;
}

.contact-item::before  {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.8);
	z-index: -1;	
}


/* =========================================================================
==footer
========================================================================= */
.footer-h1 {
	font-size: var(--fs-normal);
	letter-spacing: 1px;
	line-height: 1.75;
	font-weight: 400;
	color: var(--cnvs-white);
	text-align: justify;
}

.footer-title {
	font-size: var(--fs-footerTitle);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1px;
	color: var(--cnvs-white);
}

.footer-content {
	line-height: 1.3;
}


/* =========================================================================
==breadcrumb
========================================================================= */
.breadcrumb-title {
	font-size: var(--fs-sectionTitle);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 1px;
}

.php_breadcrumb li:not(:last-child)::after {
	content: '/';
	display: inline-block;
	margin: 0 12px;
	color: rgba(255, 255, 255, .7);
}


/* =========================================================================
==RWD
========================================================================= */
@media (min-width:1700px) {
	.container-content {
		max-width: 1680px;
	}
}

@media (min-width:1560px) {
	.container-header {
		max-width: 1440px;
	}
}

@media (max-width:1399px) {
	.about_4_1__disc {
		padding: 24px 48px;
	}
}

@media (max-width:1199px) {
	.hot-wrap .news-item .img-wrap {
		width: 120px;
	}
}

@media (max-width:991px) {
	.wow {
		animation-name: none !important;
		visibility: visible !important;
		opacity: 1;
	}

	/* ================= base ================= */
	:root {
		--fs-BNTitle: 40px;
		--fs-sectionTitle: 32px; 
		--fs-infoTitle: 26px;
		--fs-itemTitle: 22px;
		--fs-footerTitle: 20px;
		--fs-BNTxt: 17px;
		--fs-headerNav: 17px;

		--cnvs-header-height: 76px;
		--cnvs-section-margin: 60px;
	}

	.section-title {
		margin-bottom: 24px;
	}

	/* ================= banner ================= */
	.banner-title, .banner-txt {
		margin-bottom: 20px;
	}

	/* ================= contact ================= */
	.contact-line-img {
		width: 110px;
	}
	
	/* ================= about ================= */
	.about_4_1:before {
    width: 100%;
  }
	
  .about_4_1__disc {
    width: 100%;
		top: auto;
		transform: none;
  }
}

@media (max-width:767px) {
	/* ================= base ================= */
	:root {
		--fs-BNTitle: 36px;
	}

	.section-title {
		margin-bottom: 24px;
	}

	/* ================= banner ================= */
	.banner-title, .banner-txt {
		margin-bottom: 8px;
	}

	/* ================= footer ================= */
	.footer-logo {
		width: 90px;
	}

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

	/* ================= about ================= */
	.about_4_1__disc {
    padding: 20px 30px;
  }

	.history_6__time-year {
    width: 30%;
  }

  .history_6__time-txt {
    width: 65%;
		margin-left: 5%;
    padding: 10px 0px 10px 20px;
  }

  .history_6__time-item::before {
    top: 23px;
    width: 35%;
  }
	
	/* ================= product ================= */
	.prodcut-info-img-wrap .pro-tag {
		font-size: 14px;
	}
}

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

		--cnvs-header-height: 64px;
		--cnvs-section-margin: 40px;
	}

	.btn-base {
		padding: 10px 24px;
	}

	/* ================= footer ================= */
	.footer-logo {
		width: 80px;
	}

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

	/* ================= intro ================= */
	.history_6__time-year {
    width: 100%;
    padding: 5px;
  }

  .history_6__time-item::before {
    top: 17px;
    width: 33%;
  }

  .history_6__time-txt {
    width: 100%;
    padding: 4px 0 0;
    margin-left: 0;
  }
}


/* =============================================
   Modal 關閉按鈕樣式
   ============================================= */
.modal .btn-close {
  background-color: #fff;
  padding: 0.5rem;
  opacity: 1;
}

.modal .btn-close:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff972f'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

#about, #product, #news {
	top: -90px;
}