@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800');
@charset "utf-8";

body {
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;
	font-weight: 400;
	font-size: 14px;
	line-height: 2.2;
	letter-spacing: 1px;
	color: #4e3914;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (min-width: 992px) {
	body {
    padding-top: 80px;
  }
}

.force-noto, .force-noto * {
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;
}

a.btn-primary{
	background-color: #e7a900;
	border-color: #e7a900;
}
a.btn-primary:hover{
	background-color: #f3553c;
	border-color: #f3553c;
}
button.btn-primary{
	background-color: #e7a900;
	border-color: #e7a900;
}
button.btn-primary:hover{
	background-color: #f3553c;
	border-color: #f3553c;
}
a:hover
{
	color: #e7a900;	
	text-decoration:none;
}
a{
	text-decoration:none;
}
a.btn-secondary{
	background-color: #e7a900;
	border-color: #e7a900;
}
a.btn-secondary:hover{
	background-color: #5ec549;
	border-color: #5ec549;
}
button.btn-secondary{
	background-color: #e7a900;
	border-color: #e7a900;
}
button.btn-secondary:hover{
	background-color: #5ec549;
	border-color: #5ec549;
}

.top-nav{
	background-color: #ffffff !important;
}
.navbar-expand-lg.top-nav .navbar-nav .nav-link{
	padding: 10px 15px;
	color: #4e3914;
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover{
	border-bottom-style:solid;
	border-bottom-color: #e7a900;
	color: #e7a900;
	transform: scaleX(95%);
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link.active{
	border-bottom-style: solid;
	border-bottom-color: #e7a900;
	color: #e7a900;	
}
.navbar-expand-lg.top-nav .navbar-nav .dropdown-menu{
	margin: 0px;
	box-shadow: 3px 5px 15px rgba(0,0,0, .15);
	border: none;
	padding: 20px;
}
.navbar-expand-lg.top-nav .navbar-nav .dropdown-menu .dropdown-item{
	font-size: 14px;
	padding: 0px;
	padding-bottom: 15px;
	font-weight: 300;
}
.navbar-expand-lg.top-nav .navbar-nav .dropdown-menu .dropdown-item:last-child{
	padding: 0px;
}
.navbar-expand-lg.top-nav .navbar-nav .dropdown-menu .dropdown-item:hover{
	background: none;
	color: #4eaffe3a;
}
.top-nav .navbar-toggler{
	color: #4e3914;
	border-color: #4e3914;
}
.top-nav .navbar-toggler:hover{
	color: #e7a900;
	border-color: #e7a900;
}


.slider-main .carousel .carousel-inner .carousel-item:before{
	content: "";
	position: absolute;
	/*background: rgba(0,0,0,0.5);*/
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.carousel-item {
  height: 88vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.portfolio-item {
  margin-bottom: 30px;
}
.services-bar h1{
	font-weight: 600;
	font-size: 24px;
}
.services-bar .card{
	box-shadow: 3px 5px 15px rgba(0,0,0, .15);
	border: none;
}
.services-bar .card h4.card-header{
	background-color: #4e3914;
	color: #e7a900;
	font-size: 18px;
	font-weight: 400;
}
.services-bar .card .card-footer{
	background-color: #4e3914;
}
.about-main{
	padding: 30px 0px;
}
.about-main h2{
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 20px;
}
.about-main h5{
	font-size: 14px;
	font-family: "EB Garamond", "EB Garamond", "Noto Serif TC", serif;
    font-size: 12px;
    font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.5px;
}
.about-main p{
	font-size: 14px;
	text-transform: capitalize;
}
.about-main ul{
	padding-left: 20px;
}
.about-main ul li{
	position: relative;
	font-weight: 300;
	list-style: none;
	line-height: 29px;
}
.about-main ul li:before{
	content: "\f0da";
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;
	font-weight: 900;	
	position: absolute;
	left: -15px;
	top: 0px;
	color: #e7a900;
}
.portfolio-main{
	padding: 30px 0px;
}
.portfolio-main h2{
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 20px;
}
.portfolio-main .card {
	border: none;
	border-radius: 4px;
	overflow: hidden;
}
.portfolio-main .card .card-body .card-title{
	margin-bottom: 0px;
}
.portfolio-main .card .card-body .card-title a{
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	color: #e7a900;
}
.portfolio-main .card .card-body{
	background: #4e3914;
	padding: 10px 20px;
}
.card-img{
	overflow: hidden;
	position: relative;
}
.overlay{
	background: rgba(78,174,58,0.5);
	position: absolute;
	bottom: -100%;
	width: 100%;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.3s;
}
.overlay i{
	font-size: 35px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	color: #4e3914;
}
.portfolio-main .card:hover .overlay{
	bottom: 0px;
}

.footer { 
	width:100%; 
	/*background-color:#BEBEBE; */
	min-height:250px; 
	padding:10px 0px 25px 0px;
	}
.pt2 {
	padding-top: 40px;
	margin-bottom: 20px;
	color: #000000;
	font-weight: 500;
}
footer p {
	font-size: 13px;
	color: #171717;
	padding-bottom: 0px;
	margin-bottom: 8px;
}
.mb10 { 
	padding-bottom:0px ;
	}
.footer_ul_amrc { 
	margin:0px ; 
	list-style-type:none ; 
	font-size:14px; 
	padding:0px 0px 10px 0px ; 
	}
.footer_ul_amrc li {
	padding:0px 0px 5px 0px;
	}
.footer_ul_amrc li a{ 
	color:#cccccc;
	font-size: 14px;
	font-weight: 300;
	}
.footer_ul_amrc li a:hover{ 
	color:#fff; 
	text-decoration:none;
	}
.footer_ul_amrc li .media-left{
	margin-right: 10px;
}
.footer_ul_amrc li .media-left img{
	max-width: 50px;
}
.footer_ul_amrc li .media-body p{
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
}
.footer_ul_amrc li .media-body span{
	color: #cccccc;
	font-size: 14px;
	font-weight: 400;
}
.fleft { 
	float:left;
	}
.padding-right { 
	padding-right:10px; 
	}
.footer_ul2_amrc {
	margin:0px; 
	list-style-type:none; 
	padding:0px;
	}
.footer_ul2_amrc li p { 
	display:table; 
	}
.footer_ul2_amrc li a:hover { 
	text-decoration:none;
	}
.footer_ul2_amrc li i { 
	margin-top:5px;
	}
.footer_ul2_amrc li a {
	color: #e7a900;
}
.bottom_border { 
	padding-bottom:10px;
	}
.foote_bottom_ul_amrc {
	list-style-type:none;
	padding:0px;
	display:table;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
.foote_bottom_ul_amrc li { 
	display:inline;
	}
.foote_bottom_ul_amrc li a {
	color:#ffffff; 
	margin:0 12px;
	font-size: 16px;
	font-weight: 300;
	}
.footer-logo{
	padding: 10px 0px;
	text-align: center;
}
.footer-line {
	padding: 70px 0px;
	text-align: center;
	align-items: center;
}
.copyright a {
	color: #000000;
	text-decoration: underline;
}
.copyright a:hover{
	color: #e7a900;
	text-decoration: none;
}
.social_footer_ul { 
	display:table; 
	margin:15px auto 0 auto; 
	list-style-type:none;
	padding: 0;	
	}
.social_footer_ul li { 
	padding-left:20px; 
	padding-top:10px; 
	float:left; 
	}
.social_footer_ul li a { 
	color:#000000; 
	border:2px solid #000000; 
	padding:8px;
	border-radius:50%;
	}
.social_footer_ul li i {  
	width:20px; 
	height:20px; 
	text-align:center;
	}
.social_footer_ul li a:hover {
	color: #e7a900; 
	border:2px solid #e7a900; 
}

/* ---- All Pages CSS ---- */

.full-title{
	padding: 80px 0px;
	background: url(../images/all-title-bg.jpg) no-repeat center;
	position: relative;
}
.full-title:before{
	content: "";
	background: rgba(0,0,0,0.5);
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
}
.full-title h1{
	position: relative;
	color: #ffffff;
}
.full-title h1 small{
	float: right;
	padding: 15px 0px;
	font-size: 14px;
}

.breadcrumb-main .breadcrumb{
	background: #ffffff;
}
.breadcrumb-main .breadcrumb li a{
	color: #4e3914;
}
.breadcrumb-main .breadcrumb li{
	color: #4e3914;
}
.breadcrumb-main .breadcrumb-item + .breadcrumb-item::before{
	color: #4e3914;
}
.team-members-box{
	padding: 30px 0px;
}
.team-members-box h2{
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 20px;
}
.team-members-box .card{
	box-shadow: 3px 5px 15px rgba(0,0,0, .15);
	border: none;	
}
.team-members-box .card .card-footer{
	background: #e7a900;
}
.team-members-box .card .card-footer ul{
	margin: 0px;
	padding: 0px;
}
.team-members-box .card .card-footer ul li{
	display: inline-block;
}
.team-members-box .card .card-footer ul li a{
	width: 32px;
	height: 32px;
	line-height: 32px;
	background: #4e3914;
	color: #ffffff;
	display: inline-block;
	border-radius: 4.8px;
	font-size: 14px;
}
.customers-box h2{
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 20px;
}

.customers-box {
	background-color: #ffffff; /* 色底 */
	padding: 10px; /* 讓內容與邊界四周保持 2px 間距 */
	box-sizing: border-box; /* 確保 padding 不會撐破排版 */
}

.project-inner h3 {
	font-family: "EB Garamond", "Noto Serif TC", serif;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 30px;
}

.project-inner .row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start; /* 讓圖片與文字頂端對齊 */
}

/* 調整圖片區寬度（依你需求可微調） */
.project-inner .col-md-2 {
	flex: 0 0 80px; /* 圖片固定寬度區域 */
	max-width: 80px;
}

	.project-inner .col-md-2 img {
		width: 100%;
		height: auto;
	}

/* 文字區塊佔滿剩餘空間 */
.project-inner .col-md-10 {
	flex: 1;
	max-width: none;
	padding-left: 15px; /* 圖片與文字距離 */
}

.pagination_bar .pagination .page-item .page-link{
	font-size: 20px;
	background: #4e3914;
	border: 1px solid #4e3914;
	color: #ffffff;
	width: 35px;
	text-align: center;
}
.pagination_bar .pagination .page-item .page-link:hover{
	background: #e7a900;
}
.portfolio-item h4.card-title a{
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 20px;
	color: #4e3914;
}

.portfolio-item .card {
	font-size: 12px;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important; /* 如果要白底，改成 #fff */
}

/* 同時把 hover 效果也清掉 */
.portfolio-item .card:hover {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.portfolio-item a {
	color: #4e3914;
}

.portfolio-item a:hover {
	color: #e7a900;
}

.related-projects{
	padding: 30px 0px; 
}
.related-projects h3{
	font-weight: 600;
	font-size: 24px;
	margin: 0px;
	margin-bottom: 20px;
}
.blog-entries .card{
	box-shadow: 3px 5px 15px rgba(0,0,0, .15);
	border: none;
}
.blog-entries .card .card-body h2.card-title{
	font-size: 22px;
	font-weight: 500;
}
.blog-entries .card .card-footer{
	background-color: #4e3914;
}
.blog-entries .card .card-footer.text-muted{
	color: #ffffff !important;
}
.blog-entries .card .card-footer a{
	color: #e7a900;
}
.blog-right-side .card{
	box-shadow: 3px 5px 15px rgba(0,0,0, .15);
	border: none;
}
.blog-right-side .card h5.card-header{
	background-color: #4e3914;
	color: #ffffff;
	font-size: 20px;
	font-weight: 400;
}
.blog-right-side .card .card-body ul li{
	margin-bottom: 2px;
}
.blog-right-side .card .card-body ul li a{
	border-radius: 4.8px;
	padding: 6px;
	background: #4e3914;
	color: #e7a900;
	display: inline-block;
}
.pagination_bar_arrow .pagination .page-item .page-link{
	font-size: 20px;
	background: #4e3914;
	border: 1px solid #4e3914;
	color: #ffffff;
	width: 120px;
	text-align: center;
}
.pagination_bar_arrow .pagination .page-item .page-link:hover{
	background: #e7a900;
}
.faq-main{
	padding: 30px 35px;
	background: #4e3914;
	margin: 30px 0px;
}
.accordion-single{
	border-radius: 0px;
	border: none;
	border-bottom: 1px solid #e4e8ed;
}
.accordion-single .card-header{
	background-color: transparent;
	padding: 0px;
	border: none;
}
.accordion-single .card-header h5 a{
	color: #202428;
	display: block;
	position: relative;
	padding: 21.28px 32px 26.56px 20px;
	font-size: 18px;
	text-transform: capitalize;
}
.accordion-single .card-header h5 a:hover{
	color: #e7a900;
	text-decoration: none;
}
.accordion-single h5 a[aria-expanded="false"]::before {
    position: absolute;
    content: "\f0dd";
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;

	font-weight: 900;	
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	color: #4e3914;
}
.accordion-single h5 a[aria-expanded="true"]::before{
    position: absolute;
    content: "\f0de";
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;

	font-weight: 900;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #e7a900;
}
.error-contents{
	padding: 30px 0px;
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}
.error-contents{}
.pricing-box{
	padding: 30px 0px;
}
.pricing-box .card{
	position: relative;
	overflow: hidden;
	box-shadow: 3px 5px 15px rgba(0,0,0, .15);
	border: none;
}
.pricing-box .card h3.card-header{
	padding: 80px 15px;
	text-align: center;
	background: #4e3914;
	color: #ffffff;
}
.most_popular{
	position: absolute;
	top: 32px;
	font-size: 12px;
	text-align: center;
	width: 181px;
	padding: 4px 0;
	right: -36px;
	transform: rotate(40deg);
	background-color: #e7a900;
	color: #4e3914;
}


.contact-left h3{
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 20px;
}
.contact-right h3{
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 20px;
}
.contact-right p abbr{
	font-weight: bold;
	font-size: 18px;
}

.help-block ul{
	margin: 0px;
	padding: 0px;
	list-style: none;
	background: red;
	color: #fff;
	padding: 0px 15px;
}

.aboutUs {
    position: relative;
    padding: 45px 0 15px 0;
}
.aboutUs #aboutUs-title li {
	position: relative;
	cursor: pointer;
	display: inline-block;
	margin: 5px;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #000; /* 黑色文字 */
	background: transparent;
	overflow: hidden;
}

/* 黃色滑動效果，起始在左邊，覆蓋 1/8 高度 */
.aboutUs #aboutUs-title li::before {
	content: "";
	position: absolute;
	top: 87.5%; /* 只蓋住底部 1/8 */
	left: -100%; /* 從左邊隱藏 */
	width: 100%;
	height: 12.5%; /* 1/8 高度 */
	background: #ffeb3b; /* 黃色 */
	transition: left 0.6s ease-out;
	z-index: 1; /* 在文字下方 */
}

/* 文字保持在最上層 */
.aboutUs #aboutUs-title li span {
	position: relative;
	z-index: 2; /* 確保文字永遠在特效之上 */
}

/* hover 時，黃色條帶從左到右 */
.aboutUs #aboutUs-title li:hover::before {
	left: 0;
}

.aboutYuxi {
	position: relative;
	padding: 45px 0 15px 0;
}

.aboutYuxi #aboutYuxi-title li {
	position: relative;
	cursor: pointer;
	display: inline-block;
	margin: 5px;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #000; /* 黑色文字 */
	background: transparent;
	overflow: hidden;
}

/* 咖啡色滑動效果，起始在左邊，覆蓋 1/8 高度 */
.aboutYuxi #aboutYuxi-title li::before {
	content: "";
	position: absolute;
	top: 87.5%; /* 只蓋住底部 1/8 */
	left: -100%; /* 從左邊隱藏 */
	width: 100%;
	height: 12.5%; /* 1/8 高度 */
	background: #6f4e37; /* 咖啡色 */
	transition: left 0.6s ease-out;
	z-index: 1; /* 在文字下方 */
}

/* 文字保持在最上層 */
.aboutYuxi #aboutYuxi-title li span {
	position: relative;
	z-index: 2; /* 確保文字永遠在特效之上 */
}

/* hover 時，黃色條帶從左到右 */
.aboutYuxi #aboutYuxi-title li:hover::before {
	left: 0;
}

@media (min-width:768px) and (max-width:991px){
	.navbar-expand-lg.top-nav .navbar-nav .nav-link.dropdown-toggle::after{
		position: absolute;
		top: 18px;
		right: 6px;
	}
}

@media screen and (max-width:767px){
	.navbar-expand-lg.top-nav .navbar-nav .nav-link.dropdown-toggle::after{
		position: absolute;
		top: 18px;
		right: 6px;
	}
	.portfolio-main h2{
		text-align: center;
	}
	.customers-box{
		text-align: center;
	}
	.team-members-box h2{
		text-align: center;
	}
	.services-bar h1{
		text-align: center;
	}
	.social_footer_ul li{
		padding-left: 10px;
		padding-right: 10px;
	}
	.faq-main{
		padding: 20px 15px;
	}
	.accordion-single .card-header h5 a{
		font-size: 14px;
	}
}

@media (min-width:320px) and (max-width:575.98px){
	.navbar-expand-lg.top-nav .navbar-nav .nav-link.dropdown-toggle::after{
		position: absolute;
		top: 18px;
		right: 6px;
	}
	.portfolio-main h2{
		text-align: center;
	}
	.customers-box{
		text-align: center;
	}
	.team-members-box h2{
		text-align: center;
	}
	.services-bar h1{
		text-align: center;
	}
	.social_footer_ul li{
		padding-left: 10px;
		padding-right: 10px;
	}
	.faq-main{
		padding: 20px 15px;
	}
	.accordion-single .card-header h5 a{
		font-size: 14px;
	}
}


.cardtTime:nth-child(4n) {
  --bg-color: #10aec2;
}
.cardtTime:nth-child(4n+1) {
  --bg-color: #fbc82f;
}
.cardtTime:nth-child(4n+2) {
  --bg-color: #74759b;
}
.cardtTime:nth-child(4n+3) {
  --bg-color: #346c9c;
}

.header__number {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  padding: 6px 14px;
  font-size: 2rem;
  background-color: rgba(0,0,0,0.17);
}
.header__title {
  display: flex;
  margin-left: 10px;
  margin-top: 10px;  
  flex-direction: column;
  font-size: 0.6rem;
}
.title__sub {
  padding-top: 6px;
  font-size: 1.2rem;
}


.cardtTime__article {
  width: 100%;
  height: 65%;
  background-color: #fff;
  border: 1px solid rgba(200,200,200,0.5);
  border-top: none;
  padding: 10px;
}

.popup-wrap {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  content: '';
  background: rgba(0, 0, 0, 0.85);
}

.popup-box {
  width: 50%;
  padding: 50px 75px;
  transform: translate(-50%, -50%) scale(0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  background: #fff;
  text-align: center;
}
h2 {
  font-size: 32px;
  color: #1a1a1a;
}

h3 {
  font-size: 24px;
  color: #888;
}

.close-btn {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 100%;
  background: #d75f70;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  line-height: 40px;
  font-size: 32px;
}

.transform-in, .transform-out {
  display: block;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.transform-in {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.transform-out {
  -webkit-transform: translate(-50%, -50%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
}

.modal-content{
  background: transparent;
  border:none;
}

* Just a parent container for the videos */
.videos {
  margin: 20px auto;
  max-width: 700px;
}
/* Individual video container */
.video-wrap {
  position: relative;
  max-width: 700px;
  width: 100%;
  margin-bottom: 10px;
}
.video-wrap .placeholder {
  max-width: 700px;
  width: 100%;
}
.video-wrap .play-btn {
  position: absolute;
  max-width: 700px;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1; /* needed if using Bootstrap */
  text-align: center;
  color: #eaeaea;
  background-color: rgba(255,255,255,.4);
  border-radius: 50px;
  transition: color, background-color .2s ease;
}
.video-wrap .play-btn:hover,
.video-wrap .play-btn:focus {
  color: #000;
  background-color: rgba(255,255,255,.8);
  cursor: pointer;
}
.play-btn::after {
  /*
  Font Awesome recommends these styles
  https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
  */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /*
  Define the font family, weight, and icon
  */
  font-family: 'EB Garamond', 'Noto Serif TC', serif !important;
  font-weight: 900;
  font-size: 60px;
  content: "\f04b";
  /* positioning tweaks */
  padding-top: 20px;
  padding-left: 10px;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  /*border: 1px solid #ccc;*/
  border-top: none;
}

.service-title {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
}

.service-title:before {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  height: 1px;
  margin: auto;
  background: #c7c7c7;
  z-index: 1;
}

/* Menu Index */
.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spIndex {
	display: none;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spIndexEn {
	display: block;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link .spIndexEn {
	display: none;
}

/* Menu About */
.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spAbout {
	display: none;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spAboutEn {
	display: block;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link .spAboutEn {
	display: none;
}

/* Menu Projects */
.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spProjects {
	display: none;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spProjectsEn {
	display: block;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link .spProjectsEn {
	display: none;
}

/* Menu Workflow */
.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spWorkflow {
	display: none;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spWorkflowEn {
	display: block;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link .spWorkflowEn {
	display: none;
}

/* Menu Videos */
.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spVideos {
	display: none;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spVideosEn {
	display: block;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link .spVideosEn {
	display: none;
}

/* Menu Press */
.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spPress {
	display: none;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spPressEn {
	display: block;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link .spPressEn {
	display: none;
}

/* Menu Contact */
.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spContact {
	display: none;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spContactEn {
	display: block;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link .spContactEn {
	display: none;
}

/* Menu Furniishing */
.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spFurniishing {
	display: none;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover .spFurniishingEn {
	display: block;
}

.navbar-expand-lg.top-nav .navbar-nav .nav-link .spFurniishingEn {
	display: none;
}

.contact-left h3,
.contact-right h3 {
	font-family: 'EB Garamond', 'Noto Serif TC', serif;
	font-weight: 600;
	font-size: 32px;
	color: #1a1a1a;
	letter-spacing: 0.5px;
	margin-bottom: 20px;
}

.contact-right p,
.contact-right abbr,
.contact-left p,
.contact-right span {
	font-size: 12px;
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;
	line-height: 1.8;
	color: #333333;
}

.contact-page,
.contact-page * {
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;
	font-weight: 400;
	font-size: 12px;
	line-height: 2.2;
	letter-spacing: 1px;
	color: #4e3914;
}

input,
textarea,
select {
	font-family: 'EB Garamond', 'Noto Serif TC', serif;
	font-size: 12px;
	color: #4e3914;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #fff;
}

input::placeholder,
textarea::placeholder {
	color: #999999;
	font-style: italic;
}

.bousir-text {
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;
	font-weight: 400;
	font-size: 18px;
	line-height: 2.2;
	letter-spacing: 1px;
	color: #4e3914;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.bousir14-text {
	font-family: 'EB Garamond', 'Noto Serif TC', serif !important;
	font-weight: 400;
	font-size: 14px;
	line-height: 2.2;
	letter-spacing: 1px;
	color: #4e3914;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.carousel-wrapper {
	width: 100%;
	overflow: hidden;
	margin: 1rem auto;
	border: 0px solid #ccc;
	position: relative;
}

.carousel {
	display: flex;
	transition: transform 0.5s ease;
}

.carousel img {
	object-fit: cover;
	height: 100%;
}

.carousel-controls {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
}

.carousel-controls button {
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	font-size: 18px;
}

.four-lines-box {
	border: 1px solid #000; /* 四邊框線 */
	padding: 10px; /* 內距，避免文字貼邊 */
	width: 100%; /* 自動隨文字寬度，也可以換成固定寬度 */
	line-height: 1.6; /* 每行間距可自行調整 */
	font-size: 1rem;
}