@charset "UTF-8";
/*===================================================================

common
breadcrumb
pagination-wrapper
section-title
triangle deco
header
	電腦版
		::logo
		::選單
	手機版
footer
	::footer logo
	::footer網站地圖
	::footer聯絡資訊
	::footer-版權
	::向上按鈕
btn_wrapper
	::btn 基本設定
	::btn按鈕樣式1
	::btn按鈕樣式2
banner_main
	::電腦版輪播
	::手機版輪播
	::輪播文字
	::輪播小點點
about-one
index-payment
index-news
index-product
	::產品卡片
	::輪播箭頭
	::輪播小點點
index-client
	::輪播箭頭
	::輪播小點點
privacy
about-payment
about-sales
about-history
contact-page
store-page
send-page
news-list
news-info
client-list
client-info
product-list
product-info
	::上方產品資訊
	::下方產品詳細資訊
#linear-gradient selection

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

/*
-----------------------------------------------------------------------
  common
-----------------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');

:root {
  --color-primary: #E83818;
  --color-primary-rgb: 232, 56, 24;
  --color-secondary: #E4AA17;
  --color-secondary-rgb: 228, 170, 23;
  --color-third: #6AA58A;
  --color-third-rgb: 106, 165, 138;
  --color-fourth: #E5E0CD;
  --color-fourth-rgb: 229, 224, 205;
  --color-fifth: #2F2A26;
  --color-fifth-rgb: 47, 42, 38;
  --color-text: #26211E;
  --color-white: #FFFFFF;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-bg: #eee;
  /*文字*/
  --font-family: 'PT Serif', 'Noto Sans TC', sans-serif;
  --font-main1: 36px;
  --font-main2: 26px;
  --font-main3: 24px;
  --font-text: 18px;
  --font-small-text: 16px;
  --font-btn-text: 16px;
  --letter-spac: .15em;
  --section-pad: 7.5rem 0;
  --bread-pad: 9.375rem 0px;
}

@media screen and (max-width:991px) {
  :root {
    --font-main1: 30px;
    --font-main2: 22px;
    --font-main3: 20px;
    --font-text: 16px;
    --font-small-text: 14px;
    --font-btn-text: 15px;
    --section-pad: 6.25rem 0;
    --bread-pad: 7.5rem 0px;
  }
}

@media screen and (max-width:575px) {
  :root {
    --font-main1: 24px;
    --font-main2: 20px;
    --font-main3: 18px;
    --font-text: 15px;
    --font-small-text: 12px;
    --font-btn-text: 14px;
    --letter-spac: .1em;
    --section-pad: 5rem 0;
    --bread-pad: 4.375rem 0px;
  }
}

.seo-text {
  position: fixed;
  left: -9999px;
  top: -9999px;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-text);
  font-weight: 400;
  letter-spacing: var(--letter-spac);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  word-break: break-word;
}

a {
  color: var(--color-primary);
}

a,
a:hover,
a:focus,
a:visited {
  text-decoration: none;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);
  margin: 0;
}

p {
  margin: 0;
}

p:not(:last-child) {
  margin-bottom: .8rem;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
}


::selection {
  background: var(--color-primary);
  color: var(--color-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--color-primary);
  /* Firefox */
  color: var(--color-white);
  text-shadow: none;
}

::-webkit-selection {
  background: var(--color-primary);
  /* Safari */
  color: var(--color-white);
  text-shadow: none;
}

.sec-padding {
  padding: var(--section-pad);
}

/*
-----------------------------------------------------------------------
  breadcrumb
-----------------------------------------------------------------------
*/

.breadcrumb {
  position: relative;
  display: block;
  padding: var(--bread-pad);
  background-image: url('../img/breadcrumb_1920x380.jpg');
  background-size: cover;
}

.breadcrumb::after {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(var(--color-fifth-rgb), 0.7) 0%, rgba(var(--color-fifth-rgb), 0.3) 100%)
}

.breadcrumb-title {
  position: relative;
  font-size: var(--font-main1);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-white);
  z-index: 9;
}

.breadcrumb-list {
  position: relative;
  display: block;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  z-index: 9;
}

.breadcrumb-list li {
  position: relative;
  display: inline-block;
  font-size: var(--font-text);
  font-weight: 300;
  letter-spacing: var(--letter-spac);
  color: var(--color-fourth);
}

.breadcrumb-list li+li {
  margin-left: .5rem;
}

.breadcrumb-list li a {
  color: var(--color-fourth);
  transition: .6s;
}

.breadcrumb-list li a:hover {
  color: var(--color-primary);
}

.breadcrumb-list li span {
  color: var(--color-fourth);
}


/*
-----------------------------------------------------------------------
  pagination-wrapper
-----------------------------------------------------------------------
*/

.pagination-wrapper {
  position: relative;
  display: block;
}

.pagination li+li {
  margin-left: 1.5rem;
}

.pagination li a {
  display: inline-block;
  font-size: var(--font-text);
  font-weight: 700;
  text-align: center;
  width: 36px;
  height: 36px;
  line-height: 130%;
  color: var(--color-primary);
  border-radius: .5rem;
  background-color: var(--color-fourth);
  border-color: transparent;
}

.pagination li a:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.pagination li.active a {
  color: var(--color-white);
  background-color: var(--color-primary);
  border: transparent;
}

/*
-----------------------------------------------------------------------
  section-title
-----------------------------------------------------------------------
*/
.sec-title-wrapper {
  position: relative;
  display: block;
  margin-bottom: 3rem;
}

.sec-title-wrapper .chinese-title {
  position: relative;
  display: block;
  font-size: var(--font-main1);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  line-height: 1;
  color: var(--color-primary);
}

.sec-title-wrapper .chinese-title::after {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  left: 14rem;
  width: calc(50% - 14rem);
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.sec-title-wrapper .eng-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--letter-spac);
  color: rgba(var(--color-secondary-rgb), .5);
  text-transform: uppercase;
  margin-left: 2.75rem;
}

/*
-----------------------------------------------------------------------
  triangle deco
-----------------------------------------------------------------------
*/

.triangle-big-deco {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 13.5vw;
  height: 33.5vw;
  background: linear-gradient(180deg, rgba(var(--color-third-rgb), 0.3) 30%, rgba(var(--color-secondary-rgb), 0.3) 100%);
  clip-path: polygon(0 0%, 0% 100%, 100% 60%);
}

.triangle-small-deco__wrapper {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
}

.triangle-small-deco__wrapper:before {
  position: absolute;
  content: '';
  display: block;
  top: -5rem;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-third-rgb), .2);
  clip-path: polygon(100% 0, 100% 100%, 0 60%);
}

.triangle-small-deco__wrapper:after {
  position: absolute;
  content: '';
  display: block;
  top: -4.7rem;
  right: 0;
  width: 98%;
  height: 98%;
  background-color: var(--color-bg);
  clip-path: polygon(100% 0, 100% 100%, 0 60%);
}

.triangle-small-deco {
  position: relative;
  display: block;
  width: 11.7vw;
  height: 22.4vw;
  background: linear-gradient(90deg, rgba(var(--color-third-rgb), 0.3) 30%, rgba(var(--color-secondary-rgb), 0.3) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 60%);
  z-index: 1;
}

.triangle-liner-deco {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 7vw;
  height: 15vw;
}

.triangle-liner-deco:before {
  position: absolute;
  content: '';
  display: block;
  top: -5rem;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-third-rgb), .2);
  clip-path: polygon(0 0%, 0% 100%, 100% 60%);
}

.triangle-liner-deco:after {
  position: absolute;
  content: '';
  display: block;
  top: -4.7rem;
  left: 0;
  width: 97%;
  height: 97%;
  background-color: var(--color-bg);
  clip-path: polygon(0 0%, 0% 100%, 100% 60%);
}

/*
-----------------------------------------------------------------------
  header
-----------------------------------------------------------------------
*/

.header_main {
  position: relative;
  display: block;
  background-color: var(--color-bg);
  z-index: 999;
}

.header_main-menu {
  position: relative;
  display: block;
}

.sticky-header.sticky {
  position: fixed;
  left: 0;
  margin: 0;
  width: 100%;
  box-shadow: 0px 4px 15px rgba(var(--color-black-rgb), 0.1);
  animation: .6s fadeInDown;
  z-index: 999;
}

/*---------------------------------------
    電腦版
---------------------------------------*/

/* ::logo */
.header_logo {
  position: relative;
  display: block;
}

/* ::選單 */
.navbar {
  padding: 0;
}

.navbar .nav-item {
  position: relative;
  display: block;
}

.navbar .nav-item+.nav-item {
  margin-left: 3.125rem;
}

.navbar-nav .nav-link {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text);
  padding: 2rem 0;
}

.navbar-nav .nav-link:hover {
  color: var(--color-primary);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active::after,
.navbar-nav .show>.nav-link {
  color: var(--color-primary);
}

.dropdown .nav-link::after {
  position: relative;
  display: inline-block;
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-size: 16px;
  font-weight: 900;
  color: var(--color-text);
  margin-left: .5rem;
}

.dropdown .nav-link:hover::after {
  color: var(--color-primary);
}

.dropdown>.has-submenu {
  position: absolute;
  display: block;
  top: 5.75rem;
  left: -50%;
  list-style: none;
  padding-left: 0;
  background-color: var(--color-fourth);
  opacity: 0;
  visibility: hidden;
  transition: .6s;
  transform: translateY(10%);
}

.dropdown:hover>.has-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.has-submenu>li+li {
  border-top: 1px solid var(--color-white);
}

.has-submenu>li .dropdown-item {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text);
  padding: 1rem;
  min-width: 250px;
  transition: .6s;
}

.has-submenu>li .dropdown-item:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}

/*---------------------------------------
    手機版
---------------------------------------*/
.navbar-toggler {
  font-size: 1.5rem;
  color: var(--color-primary);
  border: 0;
  padding: 0;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0;
}

.offcanvas {
  background-color: var(--color-bg);
}

.offcanvas_logo {
  width: 150px;
}

.offcanvas .btn-close {
  font-size: 1.25rem;
  color: var(--color-primary) !important;
  background-image: none;
  padding: 0;
  margin: 0;
  opacity: 1;
}


/*
-----------------------------------------------------------------------
  footer
-----------------------------------------------------------------------
*/

.footer_main {
  position: relative;
  display: block;
  background-color: var(--color-fourth);
}

.footer_top-area {
  position: relative;
  display: block;
  padding: 6.25rem 0;
}

/* ::footer logo */
.footer-logo {
  position: relative;
  display: block;
}

/* ::footer網站地圖 */
.footer-sitemap {
  position: relative;
  display: block;
}

.footer-sitemap ul {
  position: relative;
  list-style: none;
  padding-left: 0;
}

.footer-sitemap ul li {
  position: relative;
  width: calc((100% - 1rem) / 3);
}

.footer-sitemap__link {
  display: block;
  padding: .625rem 0;
  font-size: var(--font-text);
  font-weight: 500;
  color: var(--color-text);
  transition: .6s;
}

.footer-sitemap__link:hover {
  color: var(--color-primary);
}

/* ::footer聯絡資訊 */
.footer-contact {
  position: relative;
  display: block;
}

.footer-contact ul {
  position: relative;
  list-style: none;
  padding-left: 0;
}

.footer-contact ul li:nth-child(odd) {
  position: relative;
  width: 200px;
}

.footer-contact ul li:nth-child(even) {
  width: calc(100% - 200px);
}

.footer-contact__link {
  display: block;
  padding: .625rem 0;
  font-size: var(--font-text);
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 400;
  color: var(--color-text);
  transition: .6s;
}

.footer-contact__link:hover {
  color: var(--color-primary);
}

.footer-contact__link .contact-icon {
  color: var(--color-primary);
}

/* ::footer-版權 */
.footer_copyright-area {
  position: relative;
  display: block;
  padding: 1rem 0;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.footer_copyright-area .copyright-text {
  font-size: var(--font-text);
  color: var(--color-white);
}

/* ::向上按鈕 */
.footer__scroll-to-top {
  position: fixed;
  display: block;
  right: 1.25rem;
  bottom: 2rem;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: var(--font-text);
  text-align: center;
  color: var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-fourth);
  cursor: pointer;
  overflow: hidden;
  transition: .6s;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
}

.footer__scroll-to-top:hover {
  background-color: var(--color-white);
}

.footer__scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  animation: .6s fadeInUp;
}

/*
-----------------------------------------------------------------------
  btn_wrapper
-----------------------------------------------------------------------
*/
.btn_wrapper {
  position: relative;
  display: block;
}

/* ::btn 基本設定 */
.btn_wrapper .btn {
  position: relative;
  border-radius: 8rem;
  font-size: var(--font-btn-text);
  letter-spacing: var(--letter-spac);
  padding: 0.625rem 1.5625rem;
  transition: .6s;
}

/* ::btn按鈕樣式1 */
.btn-1 {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.btn-1:hover {
  color: var(--color-primary);
  background-color: var(--color-fourth);
}

/* ::btn按鈕樣式2 */
.btn-2 {
  color: var(--color-white);
  border: 1px solid var(--color-secondary);
  background-color: var(--color-secondary);
}

.btn-2:hover {
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  background-color: var(--color-white);
}

/*
-----------------------------------------------------------------------
  banner_main
-----------------------------------------------------------------------
*/
.banner_main {
  position: relative;
  display: block;
}

/* ::電腦版輪播 */
.pc-banner-area {
  position: relative;
  height: 850px;
}

.pc-banner-area .swiper-wrapper .swiper-slide {
  background-size: cover;
  background-position: center;
}

/* ::手機版輪播 */
.mobile-banner-area {
  position: relative;
  height: 100vw;
}

.mobile-banner-area .swiper-wrapper .swiper-slide {
  background-size: cover;
}

/* ::輪播文字 */
.banner-content-wrapper {
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  /* padding: 19.4rem 0; */
}

.banner-title-wrapper {
  position: relative;
  display: block;
}

.banner-title-wrapper .title {
  position: relative;
  display: inline-block;
  font-size: var(--font-main1);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 2;
}

.banner-title-wrapper .title-line {
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
  left: 0;
  font-size: var(--font-main1);
  font-weight: 900;
  letter-spacing: var(--letter-spac);
  -webkit-text-stroke: 4px var(--color-white);
  z-index: 1;
}

.banner-text {
  font-size: 3.125rem;
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-white);
  text-shadow: 2px 2px 10px var(--color-black);
}

.pc-banner-area .swiper-slide-active .banner-title-wrapper {
  animation: 1.5s fadeInDown;
}

.pc-banner-area .swiper-slide-active .banner-text {
  animation: 1s fadeInUp;
}

.pc-banner-area .swiper-slide-active .btn_wrapper {
  animation: 2s fadeInUp;
}

/* ::輪播小點點 */
.banner__swiper-pagination {
  position: relative;
  display: block;
  bottom: 2.875rem !important;
  text-align: center;
  z-index: 9;
}

.banner__swiper-pagination .swiper-pagination-bullet {
  width: 3.5rem;
  height: 5px;
  border-radius: 0;
  background: var(--color-white);
  opacity: 1;
  transition: .6s;
}

.banner__swiper-pagination .swiper-pagination-bullet-active {
  width: 5.5rem;
  background: var(--color-primary);
}

.banner__swiper-pagination>.swiper-pagination-bullet+.swiper-pagination-bullet {
  margin-left: 1rem;
}

/*
-----------------------------------------------------------------------
  about-one
-----------------------------------------------------------------------
*/
.about-one {
  position: relative;
  display: block;
}

.about-img {
  position: relative;
  display: block;
  border-radius: 2.5rem;
  z-index: 2;
}

.about-sec-title .chinese-title::after {
  width: calc(100% - 14rem);
}

.about-content-wrapper {
  position: relative;
  display: block;
}

.about-content-wrapper .content-title {
  display: inline-block;
  font-size: var(--font-main3);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-content-wrapper .content-text {
  font-size: var(--font-text);
  text-align: justify;
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
}

.about-content-wrapper>.content-text+.btn_wrapper {
  margin-top: 1.875rem;
}

/*
-----------------------------------------------------------------------
  index-payment
-----------------------------------------------------------------------
*/

.index-payment {
  position: relative;
  display: block;
}

.index-payment .triangle-big-deco {
  left: auto;
  right: -5rem;
  top: -7rem;
  transform: rotate(180deg) scale(.5);
  opacity: .5;
}

.index-payment .triangle-small-deco__wrapper {
  left: -1rem;
  right: auto;
  transform: rotate(180deg) scale(.95);
  opacity: .5;
}

.index-payment .triangle-small-deco__wrapper:before {
  top: 3rem;
}

.index-payment .triangle-small-deco__wrapper:after {
  top: 3.3rem;
}

.payment-title__wrapper {
  position: relative;
  display: block;
  text-align: center;
  margin-bottom: 3rem;
}

.payment-title {
  display: inline-block;
  font-size: var(--font-main1);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.payment-item__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 1rem;
  background-color: var(--color-white);
  border-bottom: 4px solid var(--color-primary);
  padding: 1.875rem 1.5rem;
  height: 100%;
}

.payment-item__wrapper::after {
  position: absolute;
  content: '';
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(var(--color-secondary-rgb), .2);
  border-radius: .8rem;
  transition: .6s;
}

.payment-item__wrapper:hover:after {
  height: 100%;
}

.payment-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  z-index: 1;
}

.payment-img {
  position: relative;
  display: block;
  width: 3.75rem;
}

.payment-text {
  font-size: var(--font-main3);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
  transition: .6s;
}

.payment-img+.payment-text {
  margin-left: 2rem;
}

/*
-----------------------------------------------------------------------
  index-news
-----------------------------------------------------------------------
*/

.index-news {
  position: relative;
  display: block;
  background-image: url('../img/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.index-news::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--color-third-rgb), 0.2) 0%, rgba(var(--color-secondary-rgb), 0.2) 100%);
}

.index-news-area {
  position: relative;
  display: block;
  padding-left: calc(var(--bs-gutter-x) * 5);
  padding-right: calc(var(--bs-gutter-x) * 5);
}

.news-sec-title .chinese-title::after {
  width: calc(100% - 14rem);
  left: 0;
}

.news-sec-title .eng-title {
  margin-left: 0;
  margin-right: 2.75rem;
}

.news-list-content {
  position: relative;
  display: block;
  list-style: none;
  padding-left: 0;
}

.news-list-content li {
  position: relative;
  display: block;
}

.news-list-content li:not(:last-child) {
  margin-bottom: 2rem;
}

.news-tag {
  position: relative;
  display: block;
}

.news-tag>.date {
  display: inline-block;
  font-size: var(--font-small-text);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-radius: 2rem;
  padding: .2rem .8rem;
}

.news-tag>.category {
  display: inline-block;
  font-size: var(--font-small-text);
  font-weight: 400;
  color: var(--color-white);
  background-color: var(--color-third);
  border-radius: 2rem;
  padding: .2rem .8rem;
  transition: .6s;
}

.news-tag>.category:hover {
  color: var(--color-primary);
  background-color: var(--color-fourth);
}

.news-tag>.date+.category {
  margin-left: .5rem;
}

.news-content-title {
  display: -webkit-box;
  font-size: var(--font-main3);
  font-weight: 700;
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  /*行數*/
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  transition: .6s;
}

.news-content-title:hover {
  color: var(--color-secondary);
}

.news-content-text {
  display: -webkit-box;
  font-size: var(--font-text);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  /*行數*/
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.news-list-content+.btn_wrapper {
  margin-top: 1.875rem;
}

/*
-----------------------------------------------------------------------
  index-product
-----------------------------------------------------------------------
*/

.index-product {
  position: relative;
  display: block;
  background-image: url('../img/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.index-product::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--color-third-rgb), 0.2) 0%, rgba(var(--color-secondary-rgb), 0.2) 100%);
}

.product-sec-title .chinese-title::after {
  width: calc(50% - 14rem);
  right: auto;
  left: 14rem;
}

.product-carousel {
  position: relative;
  display: block;
  overflow-x: hidden;
}

/* ::產品卡片 */
.product-card {
  position: relative;
  display: block;
  padding: 1.875rem;
  border-radius: 1rem;
  background-color: #FAFAFA;
}

.product-img {
  position: relative;
  display: block;
  border-radius: 1rem;
  background-color: var(--color-white);
  margin-bottom: 2rem;
  overflow: hidden;
}

.product-img img {
  transition: .6s;
}

.product-card:hover .product-img img {
  transform: scale(1.2);
}

.product-category {
  position: relative;
  display: block;
  font-size: var(--font-text);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-third);
  transition: .6s;
}

.product-category:hover {
  color: var(--color-secondary);
}

.product-title {
  position: relative;
  display: -webkit-box;
  font-size: var(--font-main3);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  /*行數*/
  -webkit-box-orient: vertical;
  margin-bottom: 2rem;
  transition: .6s;
}

.product-title:hover {
  color: var(--color-secondary);
}

.product-card .btn_wrapper .btn {
  display: block;
}

/* ::輪播箭頭 */
.product__swiper-navigation {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 24rem);
  top: 55%;
  left: 12rem;
}

.product__swiper-navigation .swiper-button-next,
.product__swiper-navigation .swiper-button-prev {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  color: var(--color-primary);
  background-color: var(--color-white);
  box-shadow: 2px 2px 5px rgba(var(--color-black-rgb), 0.15);
  transition: .6s;
}

.product__swiper-navigation .swiper-button-next:hover,
.product__swiper-navigation .swiper-button-prev:hover {
  background-color: var(--color-fourth);
}

.product__swiper-navigation .swiper-button-prev:after {
  content: '\f104';
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
  transform: scale(.7);
}

.product__swiper-navigation .swiper-button-next:after {
  content: '\f105';
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
  transform: scale(.7);
}

/* ::輪播小點點 */
.product__swiper-pagination {
  position: relative;
  display: none;
  bottom: 0 !important;
  text-align: center;
  z-index: 9;
}

.product__swiper-pagination .swiper-pagination-bullet {
  width: 2.5rem;
  height: 5px;
  border-radius: 0;
  background: var(--color-white);
  opacity: 1;
  transition: .6s;
}

.product__swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

.product__swiper-pagination>.swiper-pagination-bullet+.swiper-pagination-bullet {
  margin-left: 1rem;
}

/*
-----------------------------------------------------------------------
  index-client
-----------------------------------------------------------------------
*/

.index-client {
  position: relative;
  display: block;
}

.index-client .triangle-small-deco__wrapper {
  top: 0;
  bottom: auto;
  right: -3rem;
  transform: scale(.6);
}

.client-title__wrapper {
  position: relative;
  display: block;
  margin-bottom: 3rem;
}

.client-title__wrapper .eng-title {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  line-height: 1.2;
  color: rgba(var(--color-secondary-rgb), .5);
  text-transform: uppercase;
}

.client-title__wrapper .chinese-title {
  font-size: var(--font-main1);
  font-weight: 700;
  color: var(--color-primary);
}

.client-carousel {
  position: relative;
  display: block;
  overflow-x: hidden;
}

/* ::輪播箭頭 */
.client__swiper-navigation {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 24rem);
  top: 62%;
  left: 12rem;
}

.client__swiper-navigation .swiper-button-next,
.client__swiper-navigation .swiper-button-prev {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  color: var(--color-primary);
  background-color: var(--color-white);
  box-shadow: 2px 2px 5px rgba(var(--color-black-rgb), 0.15);
  transition: .6s;
}

.client__swiper-navigation .swiper-button-next:hover,
.client__swiper-navigation .swiper-button-prev:hover {
  background-color: var(--color-fourth);
}

.client__swiper-navigation .swiper-button-prev:after {
  content: '\f104';
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
  transform: scale(.7);
}

.client__swiper-navigation .swiper-button-next:after {
  content: '\f105';
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
  transform: scale(.7);
}

/* ::輪播小點點 */
.client__swiper-pagination {
  position: relative;
  display: none;
  bottom: 0 !important;
  text-align: center;
  z-index: 9;
}

.client__swiper-pagination .swiper-pagination-bullet {
  width: 2.5rem;
  height: 5px;
  border-radius: 0;
  background: var(--color-white);
  opacity: 1;
  transition: .6s;
}

.client__swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

.client__swiper-pagination>.swiper-pagination-bullet+.swiper-pagination-bullet {
  margin-left: 1rem;
}

/*
-----------------------------------------------------------------------
  privacy
-----------------------------------------------------------------------
*/

.privacy {
  position: relative;
  display: block;
}

.privacy-list {
  list-style: none;
  padding-left: 0;
}

.privacy-list>li+li {
  margin-top: 3rem;
}

.privacy-list>li .list-title {
  font-size: var(--font-main2);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-primary);
}

.privacy-list>li p {
  font-size: var(--font-text);
  letter-spacing: var(--letter-spac);
  line-height: 1.8;
  color: var(--color-text);
}

/*
-----------------------------------------------------------------------
  about-payment
-----------------------------------------------------------------------
*/

.about-payment {
  position: relative;
  display: block;
  background-image: url(../img/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-payment::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--color-third-rgb), 0.2) 0%, rgba(var(--color-secondary-rgb), 0.2) 100%);
}

/*
-----------------------------------------------------------------------
  about-sales
-----------------------------------------------------------------------
*/

.about-sales {
  position: relative;
  display: block;
}

.about-sales .triangle-big-deco {
  left: auto;
  right: -5rem;
  top: auto;
  bottom: -10rem;
  transform: rotate(180deg) scale(.5);
  opacity: .5;
}

.about-sales .triangle-small-deco__wrapper {
  top: 5rem;
  left: -1rem;
  right: auto;
  transform: scaleY(-1) rotate(180deg);
  opacity: .5;
}

.about-sales .triangle-small-deco__wrapper:before {
  top: -3rem;
  height: 23vw;
}

.about-sales .triangle-small-deco__wrapper::after {
  top: -2.5rem;
  height: 22.3vw;
}

.sales-item {
  position: relative;
  display: block;
}

.sales-item .title {
  display: inline-block;
  font-size: var(--font-main3);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  background: linear-gradient(90deg, #E83818 0%, #E4AA17 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sales-item p {
  font-size: var(--font-text);
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
}

.sales-volume-list {
  position: relative;
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.sales-volume-list li+li {
  margin-left: 8.75rem;
}

.sales-volume-list li span {
  display: block;
  font-family: 'Noto Sans TC';
  font-weight: 700;
  text-align: center;
  letter-spacing: var(--letter-spac);
}

.sales-volume-list li.mechanism span {
  color: var(--color-primary);
}

.sales-volume-list li.volume span {
  color: var(--color-secondary);
}

.sales-volume-list li span.number {
  font-size: 2.625rem;
}

.sales-volume-list li span.text {
  font-size: var(--font-text);
}

.about-sales__deco {
  position: absolute;
  display: block;
  background-image: url(../img/about/thumb.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 20rem;
  height: 15rem;
  left: 0;
  bottom: 0;
}

/*
-----------------------------------------------------------------------
  about-history
-----------------------------------------------------------------------
*/

.about-history {
  position: relative;
  display: block;
  background-image: url('../img/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-history::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--color-third-rgb), 0.2) 0%, rgba(var(--color-secondary-rgb), 0.2) 100%);
}

.history-sec-title .chinese-title::after {
  width: calc(100% - 14rem);
  left: 0;
}

.history-sec-title .eng-title {
  margin-left: 0;
  margin-right: 2.75rem;
}

.timeline-list {
  position: relative;
  display: block;
  list-style: none;
  padding: 1rem 0;
  text-align: center;
}

.timeline-list::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #E2BD5D;
}

.timeline-item {
  position: relative;
  display: block;
  width: 30rem;
}

.timeline-item:not(:last-child) {
  margin-bottom: 3.75rem;
}

.timeline-item:nth-child(odd) {
  text-align: left;
  margin-left: 44rem;
}

.timeline-item:nth-child(even) {
  text-align: right;
  margin-left: 7rem;
}

.timeline-item__date {
  position: relative;
  display: inline-block;
  padding: 2px 10px;
  border-radius: .5rem;
  font-size: var(--font-small-text);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-white);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.timeline-item__date::before {
  position: absolute;
  content: '';
  display: block;
  top: 50%;
  width: 55%;
  height: 1px;
  border-bottom: 2px dashed #E2BD5D;
}

.timeline-item:nth-child(odd) .timeline-item__date::before {
  left: -3.5rem;
}

.timeline-item:nth-child(even) .timeline-item__date::before {
  right: -3.5rem;
}

.timeline-item__text {
  position: relative;
  display: block;
}

.timeline-item__text>p {
  font-size: var(--font-text);
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
}

.timeline-item__text>p:not(:last-child) {
  margin-bottom: .2rem;
}

/*
-----------------------------------------------------------------------
  contact-page
-----------------------------------------------------------------------
*/
.contact-page {
  position: relative;
  display: block;
}

.contact-sec-title .chinese-title::after {
  width: calc(50% - 16rem);
  left: 16rem;
}

.contact-form {
  position: relative;
  display: block;
}

.form-control,
.form-select {
  padding: 1rem;
  font-size: var(--font-small-text);
  font-weight: 400;
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
  background-color: var(--color-fourth);
  border: none;
  border-radius: .5rem;
}

.form-control:focus,
.form-select:focus {
  border-color: transparent;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--color-fifth-rgb), .25);
  background-color: var(--color-fourth);
  color: var(--color-text);
}

.form-select {
  color: #9E9E9E;
}

.input-group input::placeholder,
.input-group textarea::placeholder,
.input-group select option[selected] {
  color: #9E9E9E;
}

/*
-----------------------------------------------------------------------
  store-page
-----------------------------------------------------------------------
*/

.store-page {
  position: relative;
  display: block;
  background-color: rgba(var(--color-fourth-rgb), .2);
}

.store-title {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--font-main3);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-primary);
}

.store-title::before {
  position: relative;
  display: inline-block;
  content: '';
  width: 8px;
  height: 2rem;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  margin-right: 1.5rem;
}

.store-info-list {
  position: relative;
  display: block;
  list-style: none;
  padding-left: 2rem;
  margin: 2rem 0;
  min-height: 10rem;
}

.store-info-list li {
  position: relative;
  display: block;
}

.store-info-list li:not(:last-child) {
  margin-bottom: 1rem;
}

.store-info__link {
  display: flex;
  align-items: baseline;
  font-size: var(--font-text);
  letter-spacing: var(--letter-spac);
}

.store-info__link>svg {
  color: var(--color-secondary);
}

.store-info__link>span {
  color: var(--color-text);
  transition: .6s;
}

.store-info__link:hover>span {
  color: var(--color-primary);
}

.store-map {
  position: relative;
  display: block;
}

.store-map iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}


/*
-----------------------------------------------------------------------
  send-page
-----------------------------------------------------------------------
*/

.send-page {
  position: relative;
  display: block;
}

.send-title {
  font-size: var(--font-main1);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.send-title:not(:last-child) {
  margin-bottom: 0.5rem;
}


/*
-----------------------------------------------------------------------
  news-list
-----------------------------------------------------------------------
*/

.news-list {
  position: relative;
  display: block;
}

.news-sidebars {
  position: relative;
  display: block;
}

.news-sidebars__item {
  position: relative;
  display: block;
}

.news-sidebars__item+.news-sidebars__item {
  margin-top: 3rem;
}

.news-sidebars__title-wrapper {
  position: relative;
  display: block;
  border-bottom: 2px solid var(--color-secondary);
}

.news-sidebars__title-wrapper .title {
  display: inline-block;
  font-size: var(--font-main2);
  font-weight: 700;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 0 0.5rem 0.5rem;
}


.news-search-form .form-control:focus {
  box-shadow: 0 0 0;
}

.news-search-btn {
  font-size: var(--font-text);
  font-weight: 900;
  letter-spacing: var(--letter-spac);
  color: var(--color-white);
  background-color: var(--color-primary);
  transition: .6s;
}

.news-search-btn:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

.news-sidebars__category {
  position: relative;
  display: block;
  list-style: none;
}

.news-sidebars__category li:not(:last-child) {
  margin-bottom: 1.25rem;
}

.news-sidebars__category li a {
  font-size: 1.25rem;
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
  transition: .6s;
}

.news-sidebars__category li a:hover {
  color: var(--color-primary);
}

.news-list .news-list-content {
  padding: 0 1.875rem;
}

/*
-----------------------------------------------------------------------
  news-info
-----------------------------------------------------------------------
*/

.news-info {
  position: relative;
  display: block;
}

.news-info-content {
  padding: 0 1.875rem;
}

.news-info-title {
  font-size: var(--font-main3);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-primary);
}

.news-content {
  position: relative;
  display: block;
}

.news-content p {
  font-size: var(--font-text);
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
}

.news-content p:not(:last-child) {
  margin-bottom: .5rem;
}

.news-content p+img {
  margin-top: 1.875rem;
}

.social-share {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 4rem;
}

.social-share::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.share-text {
  position: relative;
  display: block;
  font-size: var(--font-small-text);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 1rem;
}

.social-icons {
  position: relative;
  display: flex;
  align-items: center;
}

.social-icons a {
  font-size: var(--font-main3);
  line-height: 100%;
  width: 25px;
  height: 25px;
  color: rgba(var(--color-secondary-rgb), 0.6);
  transition: .6s;
}

.social-icons a:hover {
  color: rgba(var(--color-secondary-rgb), 1);
}

.social-icons a+a {
  margin-left: 1rem;
}

/*
-----------------------------------------------------------------------
  client-list
-----------------------------------------------------------------------
*/

.client-list {
  position: relative;
  display: block;
}

.client-category {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}

.client-category li {
  position: relative;
  display: block;
}

.client-category li:not(:last-child) {
  margin-right: 2rem;
}

.client-category__link {
  display: block;
  font-size: var(--font-main3);
  font-weight: 700;
  color: var(--color-primary);
  padding: .625rem 2.5rem;
  border-radius: 5rem;
  background-color: rgba(var(--color-secondary-rgb), .5);
  transition: .6s;
}

.client-category__link:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.client-category__link.active {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.client-link {
  display: block;
  overflow: hidden;
}

.client-link img {
  max-width: 100%;
  transition: .6s;
}

.client-link:hover img {
  transform: scale(1.1);
}

/*
-----------------------------------------------------------------------
  client-info
-----------------------------------------------------------------------
*/

.client-info {
  position: relative;
  display: block;
}

.client-info__top-area {
  position: relative;
  display: block;
  padding: 0 5rem;
}

.client-title {
  font-size: var(--font-main1);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-primary);
}

.client-content {
  position: relative;
  display: block;
}

.client-content p {
  font-size: var(--font-text);
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
}

.client-info__top-area hr {
  margin: 5rem 0;
  border: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.client-info__bottom-area {
  position: relative;
  display: block;
}

/*
-----------------------------------------------------------------------
  product-list
-----------------------------------------------------------------------
*/

.product-list {
  position: relative;
  display: block;
}

.product-sidebars {
  position: relative;
  display: block;
}

.product-sidebars__item {
  position: relative;
  display: block;
}

.product-sidebars__item+.product-sidebars__item {
  margin-top: 3rem;
}

.product-sidebars__title-wrapper {
  position: relative;
  display: block;
  border-bottom: 2px solid var(--color-secondary);
}

.product-sidebars__title-wrapper .title {
  display: inline-block;
  font-size: var(--font-main2);
  font-weight: 700;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 0 0.5rem 0.5rem;
}

.product-search-form .form-control:focus {
  box-shadow: 0 0 0;
}

.product-search-btn {
  font-size: var(--font-text);
  font-weight: 900;
  letter-spacing: var(--letter-spac);
  color: var(--color-white);
  background-color: var(--color-primary);
  transition: .6s;
}

.product-search-btn:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

.product-sidebars__category {
  position: relative;
  display: block;
  list-style: none;
}

.product-sidebars__category li:not(:last-child) {
  margin-bottom: 1.25rem;
}

.product-sidebars__category li a {
  font-size: 1.25rem;
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
  transition: .6s;
}

.product-sidebars__category li a:hover {
  color: var(--color-primary);
}

.product-list .product-card {
  padding: 1rem;
  height: 100%;
}

.product-list .product-category {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/*
-----------------------------------------------------------------------
  product-info
-----------------------------------------------------------------------
*/

.product-info {
  position: relative;
  display: block;
}

/* ::上方產品資訊 */
.product-info__top-area {
  position: relative;
  display: block;
}

.product-info__swiper-wrapper,
.product-info__thumbsSlider-wrapper {
  position: relative;
  display: block;
}

.product-info__swiper .swiper-slide,
.product-info__thumbsSlider .swiper-slide {
  border: 1px solid var(--color-fourth);
}

.product-info__thumbsSlider .swiper-slide {
  cursor: pointer;
}

.thumbsSlider__swiper-pagination {
  position: relative;
  display: block;
  text-align: center;
  bottom: 0 !important;
  top: 0 !important;
}

.thumbsSlider__swiper-pagination .swiper-pagination-bullet {
  margin: 0 .3rem !important;
  background: var(--color-fourth);
  opacity: 1;
  transform: scale(1.2);
}

.thumbsSlider__swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

.product-info__category {
  position: relative;
  display: inline-block;
  font-size: var(--font-small-text);
  font-weight: 300;
  letter-spacing: var(--letter-spac);
  color: var(--color-white);
  border-radius: 5rem;
  background-color: var(--color-third);
  padding: .25rem .625rem;
  transition: .6s;
}

.product-info__category:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

.product-info__title {
  font-size: var(--font-main1);
  font-weight: 700;
  color: var(--color-primary);
}

.product-info__top-content {
  position: relative;
  display: block;
}

.product-info__top-content p {
  font-size: var(--font-text);
  letter-spacing: var(--letter-spac);
  color: var(--color-text);
}

/* ::下方產品詳細資訊 */
.product-info__bottom-area {
  position: relative;
  display: block;
  margin-top: 4.375rem;
}

.pd-tabs .nav-item {
  position: relative;
  display: block;
}

.pd-tabs .nav-item:not(:last-child) {
  margin-right: 1rem;
}

.pd-tab-link {
  font-size: var(--font-main3);
  font-weight: 700;
  letter-spacing: var(--letter-spac);
  color: var(--color-primary);
  background-color: rgba(var(--color-secondary-rgb), .5);
  border: 0;
  border-radius: .5rem .5rem 0 0;
  padding: .5rem 1rem;
  transition: .6s;
}

.pd-tab-link:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.pd-tab-link.active {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.pd-tab-content {
  position: relative;
  display: block;
  padding: 1.875rem 2rem;
  border: 2px solid rgba(var(--color-secondary-rgb), .5);
}

.pd-spec-title {
  font-size: var(--font-text);
  font-weight: 700;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/*
-----------------------------------------------------------------------
  linear-gradient selection
-----------------------------------------------------------------------
*/

.about-content-wrapper .content-title::selection,
.pd-spec-title::selection,
.send-title::selection,
.news-sidebars__title-wrapper .title::selection,
.product-sidebars__title-wrapper .title::selection,
.payment-title::selection,
.sales-item .title::selection {
  -webkit-text-fill-color: var(--color-white);
}