/*

Breezed Template

https://templatemo.com/tm-543-breezed

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap);   /* 思源宋體 Noto Serif TC */
@import url(https://fonts.googleapis.com/css2?family=Huninn&display=swap);   /* jf open 粉圓字型*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #6E9667;
  font-family:"Playfair Display",serif;font-weight:700;
	margin: 1em 0 0.5em 0;
}
h4{color: #fff; font-weight: 400; padding: 5px 10px; margin-bottom: 8px;  display: inline-block;
  background: #6E9667;border-radius:5px;}
ul {
  margin-bottom: 0px;
}

p {
  font-size: 16px;  line-height: 1.7;  
  color: #444; margin: 0 0 0.75em 0;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Raleway', sans-serif;
}

section .container { padding: 120px 20px}

::selection {
  background: #6E9667;
  color: #fff;
}

::-moz-selection {
  background: #6E9667;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
	
	section .container { padding: 70px 20px}
}

a.main-stroked-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 11px 25px;
  background-color: transparent;
  border: 2px solid #fff;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-stroked-button:hover {
  background-color: #fff;
  color: #6E9667;
}

a.main-filled-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #6E9667;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-filled-button:hover {
  color: #fff;
  background-color: #6E9667;
}

a.main-button-icon {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #6E9667;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.main-button-icon:hover i {
  padding-left: 5px;
}

button.main-button {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  border-radius: 25px;
  padding: 10px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #6E9667;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

button.main-button:hover {
  color: #fff;
  background-color: #6E9667;
}

button.main-button-icon {
  border: none;
  outline: none;
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #6E9667;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

button.main-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

button.main-button-icon:hover i {
  padding-left: 5px;
}

a.text-button-icon {
  text-transform: uppercase;
  color: #1e1e1e;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.text-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.text-button-icon:hover {
  color: #6E9667;
}

a.text-button-icon:hover i {
  padding-left: 5px;
}


.section-heading h6 {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section-heading h2 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 20px;
  margin-bottom: 0px; 
}


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

.background-header {
  background-color: #fff;
  height: 68px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}
.header-area::before {
  content: ""; /* 伪元素必须有 content 属性 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/header-bg.png"); /* 设置背景图片 */
  background-size: cover; /* 根据需要调整背景大小 */
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1; /* 将伪元素置于内容下方 */
}

.background-header::before {
  content: ""; /* 伪元素必须有 content 属性 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/header-bg-2.png"); /* 设置背景图片 */
  background-size: cover; /* 根据需要调整背景大小 */
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1; /* 将伪元素置于内容下方 */
}
.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #6E9667!important;
}

.background-header .nav li a.active {
  color: #6E9667!important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 68px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 68px;
  background: transparent;
}

.header-area .main-nav .logo { content: url("../images/logo.png"); 
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo:hover {filter: invert(1) brightness(150%);}
.header-area .main-nav .nav {
  float: right;
  background-color: transparent;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
}


.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #7a7a7a;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 32px;
  line-height: 32px;
  border: transparent;
}

.header-area .main-nav .nav li a {  font-weight: 300;	font-size: 15px;}
#tw .header-area .main-nav .nav li a { font-size: 16px;}
.header-area .main-nav .nav li a {
  color: #fff;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fff!important;
  opacity: 0.5;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active{
  color: #6E9667!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 25px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 14px;
  color: #fff;
  position: absolute;
  right: 8px;
  top: 8px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #7a7a7a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 285px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu.short ul {  width: 120px;}
.header-area .main-nav .nav li.submenu.middle ul {  width: 200px;}

#tw .header-area .main-nav .nav li.submenu ul { width: 220px;}
#tw .header-area .main-nav .nav li.submenu.short ul {  width: 90px;}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #fff;
  color: #333!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 14px;
  border-bottom: 1px solid #f5f5f5;
}

#tw .header-area .main-nav .nav li.submenu ul li a {  font-size: 16px;}
.header-area .main-nav .nav li.language {
  background:rgba(0,0,0,0.2); padding: 0 5px;border-radius:7px;transition: all 0.5s linear;
}
.header-area .main-nav .nav li.language:hover { background:#fff;transition:All 0.6s ease;}
.header-area .main-nav .nav li.language:hover a {color: #333!important; }
.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #6E9667!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 68px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #6E9667;
}



@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
	
  .header-area .main-nav .logo { content: url("../images/logo-m.png");height: 80px; }	
  
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #6E9667!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important; 
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 45px !important;
    line-height: 45px !important;
    padding: 0px !important;font-size: 17px; font-weight: bold;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #6E9667!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 15px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
	
	.header-area .main-nav .nav li.submenu.short ul,
	.header-area .main-nav .nav li.submenu.middle ul,
	#tw .header-area .main-nav .nav li.submenu.short ul,
	#tw .header-area .main-nav .nav li.submenu ul 
	
	{  margin: 0 auto; width: 100%;}
	
	.header-area .main-nav .nav li.language a{
  background:#E7E7E7!important; letter-spacing: 10px; 
}
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/
/* ==== Main CSS === */
.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center
}

.img-fill img {
  min-height: 100%;
  width: 100%;filter: blur(0px) brightness(80%); /* 將亮度設為 50%，圖片會變暗 */
  position: relative;
  display: inline-block;
  max-width: none;
}

.img-fill img.forPC{ display: block}
.img-fill img.forMobile{ display: none}

@media  (max-width: 800px){
	.img-fill img.forPC{ display: none}
	.img-fill img.forMobile{ display:block}
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

.slick-slide {
  float: left /* If RTL Make This Right */ ;
  padding: 0;
}

/* ==== Slider Style === */
.Modern-Slider .item .img-fill{
  height:96vh;
  background:#000;
}

.Modern-Slider .item .info > div{
  display:inline-block!important;
  vertical-align:middle;
}

.Modern-Slider .NextArrow{
  position:absolute;
  top:50%;
  right:30px;
  border:0 none;
  background-color: transparent;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:#FFF;
  z-index:5;
  outline: none;
}

.Modern-Slider .NextArrow:before{
  content:'\f105';
}

.Modern-Slider .PrevArrow {
  position:absolute;
  top:50%;
  left:30px;
  border:0 none;
  background-color: transparent;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:#FFF;
  z-index:5;
  outline: none;
}

.Modern-Slider .PrevArrow:before{
  content:'\f104';
}

.scroll-down {
  position: absolute;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  z-index: 10;
}

.scroll-down a {
  display: inline-block;
  background-color: #6E9667;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1); transition: all 0.5s linear;
}

.scroll-down a:hover {filter: invert(1) brightness(250%);transition:All 0.6s ease;}

ul.slick-dots {
  display: none!important;
}

.Modern-Slider .text-content {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Modern-Slider .item h3 {
  margin-bottom: 25px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  color:#FFF;
  animation:fadeOutRight 1s both;
}

.Modern-Slider .item h5 {
  margin-bottom: 50px;
  font-size: 46px; color: #E4F2DD;
  overflow:hidden;
  animation:fadeOutLeft 1s both;
}

.Modern-Slider .item a {
  margin: 0 5px;
}

.Modern-Slider .item.slick-active h3{
  animation:fadeInDown 1s both 1s;
}

.Modern-Slider .item.slick-active h5{
  animation:fadeInLeft 1s both 1.5s;
}

.Modern-Slider .item.slick-active{
  animation:Slick-FastSwipeIn 1s both;
}

.Modern-Slider .buttons {
  position: relative;
}

.Modern-Slider {background:#000;}


/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

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

#about {
  
  position: relative;
  z-index: 9;
}

#about .container {
 
}

#about .section-heading {
 
}

#about .section-heading h6 {
  color: #6E9667;
}

#about .service-item {
  margin-top: 30px;
}

#about .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}
#about video{width: 100%; height: 375px; }
#about img { width: 65%;  }

#about ul { margin: 0}
#about li {font-size: 16px;  line-height: 1.7; margin-bottom: 10px; }
#about li b {color: #fff; font-weight: 400; padding: 10px; margin-bottom: 5px; height: 42px;
  background: #6E9667;border-radius:0 5px 5px 0; }
#about li span { display: block;color:#6E9667;margin-top: 10px; }
#about li i {  color: #fff;font-size: 20px;  background: #ABCBA9;padding: 12px;height: 40px;border-radius:5px 0 0 5px; }
#about li b br{ display:none; }

.video-container {
  position: relative;
  display: inline-block;
}

.video-container video {
  display: block; /* 确保图像是块级元素 */
}

.video-container::after {
  content: ""; /* 伪元素必须有 content 属性 */
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 375px; background: #fff;  
}

@media (max-width: 767px) {
  #about img { width: 75%; float: none; }
	#about video{width: 100%; height: 250px;}	
	
	#about li i { display: block; text-align: center; margin: 0px auto;height: 40px; padding: 10px;border-radius:5px 5px 0 0;}
	#about li b { display: block;  text-align: center;border-radius:0 0 5px 5px;}
	#about li b br{ display: block; }
	#about li span { display: block;  }
}

#about .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#about a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#about .right-text-content {
  margin-top: 40px;
}

#about p {
  font-size: 16px;
  line-height: 1.7;
  color: #444; margin: 0 0 0.75em 0;
}

p.boss { text-align: right; font-weight: bold; margin-bottom: 50px;}


/*
---------------------------------------------
features
---------------------------------------------
*/

#features {
  padding-top: 80px;
  padding-bottom: 70px;
}

#features .features-item {
  margin-bottom: 50px;
}

.features-item .features-icon {
  float: left;
}

#features .features-content {
  margin-left: 75px;
}

.features-item .features-content h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-bottom: 15px;
}

.features-item .features-content p {
  margin-bottom: 15px;
}



/*
--------------------------------------------
testimonials
--------------------------------------------
*/
#testimonials {
  margin-top: 120px;
  padding: 80px 0px;
  padding: 120px 0px;
  background-image: url(../images/slide-03.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#testimonials .section-heading {
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
}

#testimonials .item {
  position: relative;
  text-align: center;
}

#testimonials .item h4 {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  margin-top: 22px;
  margin-bottom: 7px;
}


#testimonials .item span {
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#testimonials .item .member-thumb {
  position: relative;
}

#testimonials .item .hover-effect {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.95);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

#testimonials .item .hover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#testimonials .item:hover .hover-effect {
  opacity: 1;
  visibility: visible;
}

#testimonials .item .hover-effect ul li {
  display: inline-block;
  margin: 0px 5px;
}

#testimonials .item .hover-effect ul li a {
  width: 32px;
  height: 32px;
  display: inline-block;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 50%;
  color: #6E9667;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

#testimonials .item .hover-effect ul li a:hover {
  color: #fff;
  background-color: #6E9667;
}

#testimonials .owl-carousel {
  padding-bottom: 60px;
}

.owl-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.owl-dots .owl-dot {
  outline: none;
  height: 10px;
}

.owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 5px;
  outline: none;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
}

.owl-dots .active span {
  width: 10px;
  height: 10px;
  margin-bottom: -1px;
}





/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

#contact-us .section-heading {
  margin-bottom: 50px;
}

#contact-us .section-heading h6 {
  color: #6E9667;
}
#contact-us h4 {margin: 0.5em 0 0 0; color:#6E9667;background:none ; font-size: 25px; font-weight: 700; padding: 0;}
#contact-us  ul li {
   height: 47px; line-height: 47px; 
}
#contact-us  ul li:first-child{
    line-height: 23px; 
}
#contact-us  ul li {
  font-size: 16px;
  letter-spacing: 0.5px;
}
#contact-us  ul li a { color: inherit}
#contact-us  ul li a:hover { color: #6E9667}

#contact-us { 
  background: url("../images/contact-bg.jpg") 
}

#contact-us i{font-size: 20px;	color: #fff; line-height: 40px;text-decoration: none;
height: 40px; float: left;
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle; margin-right: 10px;
  border-radius: 50%; /* may require vendor prefixes */
  background: #6E9667;
}

#contact-us img { padding: 10px}


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

footer {
  padding: 30px 0px;
  background: #252C30 
}

footer .container{  background: url("../images/paipenpro-w.jpg") no-repeat right; background-size: contain}
footer .left-text-content p {
  color: #fff;
  font-size: 14px;
}

footer .left-text-content a {
  color: #fff;
}

footer .right-text-content {
  
}

footer .right-text-content p {
  color: #999;
  font-size: 13px; text-align: right; margin: 0 40px 0 0;
}
footer .right-text-content p a {
  color: #999;
}

@media (max-width: 767px) {
 footer .container{     background-position: center top; background-size:  15%;padding-top: 120px;  }
 footer p {   text-align:center;  }
footer .right-text-content {    }
footer .right-text-content p{   text-align: center;margin: 20px 0 0 0;  }	
	#contact-us .qrcode {  margin: 40px 0;}
	
	#contact-us h4 { font-size: 20px;}
}


/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
#preloader {
  overflow: hidden;
  background-image: linear-gradient(145deg, #339b9e 0%, #68cc98 100%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 0.5s 0s linear infinite;
  animation: jumper 0.5s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}




/* 
---------------------------------------------
portfolio
--------------------------------------------- 
*/

#projects  .item {
    text-align: center;
	position: relative; /* 關鍵：讓內部的絕對定位以這層為基準 */
  display: inline-block; /* 讓容器寬度跟隨圖片大小 */
}/* -----old background: #F1F2F0;------ */
#projects  .item img:hover {
  border: 0px solid #fff;box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.75);
	transition:All 0.6s ease;transform: scale(1.2);border-radius:10px; 
}

#projects  .item img {transition: all 0.5s linear;
   border: 5px solid #97B492; display: block;
  width: 100%; /* 或固定寬度 */
  height: auto;
}
#projects  .item img.overlay-img {
  position: absolute; /* 關鍵：脫離文件流，重疊在上方 */  
  /* 調整位置：例如放在右下角 */
  top: 45px;
  right: 0px;  
  /* 調整大小 */
  width: 71px;  
  /* 可選：增加透明度 */
  opacity: 0.8;border:none;
}

#projects  .item:hover img.overlay-img {
  position: absolute; /* 關鍵：脫離文件流，重疊在上方 */  
  /* 調整位置：例如放在右下角 */
  top: 0px;
  right: -20px;  
  /* 調整大小 */
  width: 71px;  
  /* 可選：增加透明度 */
  opacity: 1;border:none;
}

#projects .section-heading,#about .section-heading {
  text-align: center; 
	background: url("../images/section-heading-bg.jpg") no-repeat center; background-size: cover; padding: 60px 0; margin:68px 0 0 0; 	
}

#projects .section-heading h2,#about .section-heading h2 {
 color: #fff; font-size: 55px;  margin: 5px auto;
}

#tw #projects .section-heading h2,#tw #about .section-heading h2{font-family: 'Huninn', serif; letter-spacing: 10px; font-weight: 500;}
#tw #projects .section-heading h2.en {  font-family:"Playfair Display",serif;font-weight:700;letter-spacing: 0px;}
#tw #contact-us h2 {font-family: 'Huninn', serif; letter-spacing: 11px; font-weight: 500;}
#tw #contact-us h4,#tw #projects .section-heading h3 {font-family: 'Huninn', serif; font-weight: 500;}

#projects .section-heading h3 {border-top: 1px solid;
 color: #fff; font-size: 40px; line-height: 1.75;  margin: 5px auto; display: inline-block; padding: 0;
}

#projects .item h5 { font-size: 16px;line-height: 1.5; padding: 10px 0 0 0; margin: 0;  height: 70px; color: #333;font-family:Georgia, "Times New Roman", Times, serif; font-weight: 400;}
#projects  .item h5.narrowing {  line-height: 1.1;}
#projects .item h6 {background:#6E9667; color: #fff;  margin: 0!important; height: 45px; display: flex ; align-items: center;justify-content: center;}
#projects .item p{ font-size: 14px;color: #000;}
#tw #projects .item h5 { height: 70px;font-size: 16px; font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;}
#projects  ul{ margin: 0 0 1em 1.5em;}
#projects  li{ list-style: disc;}

.catalogue { margin: 0 auto; }

@media (max-width: 992px) {
  #projects .filters ul li {
    display: inline-block;
    margin-right: 10px;
    padding: 0px;
  }
  #projects  .item p{ line-height: 1.2; font-size: 12px;}
  #projects .section-heading h2,#about .section-heading h2 {font-size: 45px;  }
  #projects .section-heading h3 { font-size: 26px;padding:10px 0 0 0; width: 85% }
  #projects .item h6 { line-height: 1;}
  #projects .item h6.many_modle {  font-size: 13px;}
}

/* GNET 五等分 5 columns */
.col-lg-3 {margin:15px 0;}
.col-md-1-5{ 
    position: relative; background:#fff;  
     margin:10px; display:inline-block;width:calc(20% - 20px);
}
.col-md-1-5 img{width:100%; }

.section.gray{ background: #eee; }
#subpage a.subpage-item img { width: 100%; text-decoration: none;  border-radius:7px 7px 0 0;}
#subpage a.subpage-item{ border:none;background: #fff;padding: 5px; border-radius:7px; display: block; transition: all 0.5s linear;}
#subpage a.subpage-item:hover{ background: #c8b7a6 /* 莫蘭迪棕 */; transition:All 0.6s ease;}
#subpage a.subpage-item:hover h5{  color: #fff;}

.subpage {  padding: 0 20px 15px 20px; }
.subpage h2{  font-size: 1.75em; border-top: 3px solid; border-bottom: 3px solid;display: inline-block; line-height: 1.3; margin-bottom: 30px;}
.subpage li{ list-style: disc; line-height: 1.7; }
.subpage ul{ margin: 0 0 25px 25px;}
#subpage h5 { color: #333; font-family: 'Raleway', sans-serif; font-weight: 400; text-align: center; padding-bottom: 5px;}

.DTC hr { background:url("../images/line.jpg"); height: 10px; border: none; }

 .search-container {        max-width: 250px; margin: 7px auto 0 auto;    }
        #site-search-form {
            display: flex;
            border: 0px solid #ccc;
            border-radius: 5px;
            overflow: hidden; /* 讓圓角生效 */
        }
        #search-query {
            flex-grow: 1; /* 讓輸入框填滿空間 */
            border: none;
            padding: 2px;background-color: #9BAAB3;
        }
        #search-query:focus {
            outline: none; /* 移除點擊時的藍色外框 */
        }
        #search-button {
            border: none;
            background-color: #6E9667; /* 藍色按鈕 */
            color: white;
            padding: 5px 10px;
            font-size: 16px;
            cursor: pointer; /* 滑鼠移上去時顯示手形 */
        }
        #search-button:hover {
            background-color: #252C30; /* 滑鼠懸停時變深色 */
        }

#randomBackgroundDiv {
  width: 100%;
  background-size: cover; /* Ensures the image covers the entire div */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents image repetition */
	}

@media (max-width: 767px) {
 #projects .col-md-1-5, #projects .col-sm-6,.col-md-1-5 {   width: calc(50% - 15px); margin:5px;padding: 0}
 
 #projects .col-lg-2 {   width: calc(50% - 5px); margin:5px 0;}

 #projects  .item h5 { font-size: 15px; padding: 5px 0; height: 80px; }
 
 #tw #projects  .item h5 { height: 50px;}
 #projects  .item p { font-size: 14.5px;}
		
 #subpage .row div {width: calc(50% - 5px); margin:20px 0;}
	
	#randomBackgroundDiv {  height: auto;	}
	#tw #contact-us h4 { font-size: 25px;}
	
	#contact-us  ul li {  font-size: 15px;  letter-spacing: 0;}
	#tw #contact-us  ul li {  font-size: 17px;  letter-spacing: 0.5px;}
	
}