/*========================================================*/
/*-------首頁內容--------*/
/*========================================================*/









/*/////////////////////////////////////////////////////////*/
/*-------共用區塊--------*/
/*/////////////////////////////////////////////////////////*/


/*首頁內容區塊*/	
.mainContent{
	padding: 50px 0px;
	background-image: url(../index/images/bg.jpg);
}



	/*----- 首頁標題1 -----*/
	.index_title {
		font-size: 30px;
		font-weight: bold;
		color: #777;
		line-height: 1.3;
		text-align: center;
		margin-bottom: 20px;
	}	
		.index_title h2{	
			font-size: inherit;
			line-height: initial;
			padding: 0;
			margin: 0;
			display: inline-block;
			font-weight: inherit;
		}	
	
		/*----- 首頁標題1 -----*/
	.index_title2 {
		font-size: 26px;
		font-weight: bold;
		color: #000;
		line-height: 1.3;
		text-align: center;
		margin-bottom: 20px;
		position: relative;
		/* display: inline-block; */
	}	
	.index_title2::before {
		position: absolute;
		content: '';
		background-image: url(../index/images/title_icon.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		width: 270px;
		height: 90px;
		top: 50%;
		left: 75%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		z-index: -1;
	}
		.index_title2 h2{	
			font-size: inherit;
			font-size: clamp(1.5rem, 1.367rem + 0.22vw, 1.625rem);
			line-height: initial;
			padding: 0;
			margin: 0;
			/* display: inline-block; */
			font-weight: inherit;
		}	

		


		.main.index_main {
			padding-top: 146px;
		}
	
@media (max-width: 990px){
	.main {
		padding-top: 82px;
	}
	.main.index_main {
		padding-top: 82px;
	}
	.mainContent{	
		padding: 25px 0px;	
	}	



		/*----- 首頁標題1 -----*/
		.index_title{
			font-size: 25px;
			line-height: 1.2;
		}
		

}
@media (max-width: 540px){
	
	.index_title2 {
		font-size: 24px;
	}
}



/* -----------首頁關於我們區塊------------------ */
.index_aboutBg{
	padding: 60px 0;
	overflow: hidden;
}
.index_aboutBg_in {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

.index_aboutLeft{
	width: 40%;
}

.index_aboutLeft img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.index_aboutRight {
    width: calc( 100% - 40% - 100px );
}
.index_about_area{
	max-height: 300px;
    overflow: hidden;
}

.index_aboutBg_in .btn_area{
	text-align: left;
}

.index_aboutBg_in .index_title2 {
	
	text-align: left;
	margin-bottom: 20px;
}
.index_aboutBg_in .index_title2 {
    display: inline-block;
}
@media(max-width:990px){
	.index_aboutBg{
		padding: 30px 0;
	}
	.index_aboutBg_in {
		display: block;
	}
	.index_aboutLeft {
		width:100%;
	}
	.index_aboutRight {
		width:100%;
		margin-top: 20px;
	}
	.index_aboutBg_in .index_title2 {
		text-align: center;
		display: block;

	}
	.index_title2::before {
		left: 54%;
	}
	.index_aboutBg_in .btn_area {
		text-align: center;
	}
}

@media(max-width:540px){
	/* .index_aboutBg_in .index_title2 {
		font-size: 24px;
	} */
	.index_title2::before {
		left: 60%;
	}
}


/* ---------------首頁產品區塊------------------------------ */
.index_productBg{
	padding: 60px 0;
	position: relative;
	overflow: hidden;
}

.index_productBg::before{
	content: '';
	width: 100%;
	height: 300px;
	background-color:var(--primary_color) ;
	position: absolute;
	bottom: 0;
	left: 0;
}
.index_productBg .index_title2::before{
	left: 52%;
}

.index_productBg .product_list{
	/* padding: 20px; */
	width: 100%;
	padding: 0;
}
.product_list a{
	color: #000;
	text-decoration: none;
	display: block;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	padding-bottom: 58px;
}
/* .product_list a::before{
	content: '';
	width: 80px;
    height: 32px;
    background-color: #E02A27;
    position: absolute;
    top: 30px;
    left: 0px;
    z-index: 2;
}
.product_list a::after{
	content: 'NEWS';
    color: #fff;
    position: absolute;
    top: 38px;
    left: 16px;
    z-index: 3;
    font-size: 16px;
} */
/* ------------產品區輪播------------------------------- */
.main .swiper-button-prev_product, 
.main .swiper-button-next_product {
    position: unset;
    margin: 0px;
    z-index: 10;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main .swiper-button-prev_product{		
	background-image: url(../index/images/left_arrow.png);
	margin: 0 5px;
}
.main .swiper-button-next_product{
	background-image: url(../index/images/right_arrow.png);
}
.main .swiper-button-prev_product:after, 
.main .swiper-button-next_product:after {
    /* content: 'prev'; */
	display: none;
}
.switch{
	display: flex;
	position: absolute;
	top: 6%;
	right:13%;
	transform: translate(-50%,-50%);
}
@media(max-width:1280px){
	.switch {
		right: 4%;
	}
}
@media(max-width:990px){
	.index_productBg{
		padding: 30px 0;
	}
	.index_product_area {
		margin-top: 30px;
	}
	.switch {
		right: 0;
	}
}
@media(max-width:540px){
	.main .swiper-button-prev_product, 
.main .swiper-button-next_product {
    width: 40px;
    height: 40px;
}
.switch {
    top: 20%;
}
}
@media(max-width:425px){
.switch {
    top: 23%;
}
}
/* ------------產品區輪播------------------------------- */
.index_product_area{
	margin-top:60px;
}

.product_title{
	/* font-size: 16px; */
	font-size: clamp(0.875rem, 0.742rem + 0.22vw, 1rem);
	padding: 20px 10px;
}
.product_info{
	background-color: #fff;
    /* transform: translateY(135px); */
    height: 58px;
    transform: translateY(0px);
    transition: all .5s ease-in-out;
    position: absolute;
    bottom: 0;
	/* padding: 20px; */
}
.product_description{
	opacity: 0;
	padding: 0 10px;
	transition: all .5s ease-in-out;
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 22px;
	
}
.product_list:hover .product_info{
    height:160px;
	
}
.product_list:hover .product_description{
	opacity: 1;
}

.product_img{
	position: relative;
	padding-top: 100%;
}
.product_img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
	object-fit: cover;
	transition: all .5s ease-in-out;
}
.product_list:hover .product_img img{
	filter:grayscale(1)
}



/* ---------------首頁最新消息區塊------------------------------ */
.index_newsBg{
	padding: 120px 0 60px 0;
	position: relative;
	overflow: hidden;
}
.index_newsBg .index_title2::before{
	left: 52%;
}
.index_newsBg .wrap{
	width: 60%;
}

.index_news_area{
	padding: 30px 0;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	margin-top: 60px;
	border-radius: 10px;
	position: relative;
	background-color: #fff;
}
.index_news_area a{
	color: #000;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0;
}
.news_date{
	font-size: 26px;
	font-weight: 600;
	color: var(--sec_color);
	min-width: 100px;
    text-align: center;
	line-height: 0.8;
	width: 10%;
}
.month,.year{
	font-size: 15px;
	display: inline;
	
}
.year::before{
	content: '/';
	padding-right: 5px;
	display: inline-block;
}
.news_info{
	width: 65%;
	padding-right: 15px;
}
.news_title{
	font-size: 18px;
	margin-bottom: 10px;
	transition: all .3s ease-in;
}
.index_news_list:hover .news_title{
	text-decoration: underline;
}

.news_description{
	Text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 1; */
    /* -webkit-box-orient: vertical; */
    line-height: 24px;
	color: #777;
	font-size: 13px;

}
.btn_area .news_btn{
	transition: 0.2s ease all;
   
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
	

}
.btn_area .news_btn input{
	color: var(--primary_color);
	background-color: transparent;
	border: 2px solid var(--primary_color);
}
.index_news_list:hover .btn_area .news_btn input{
	color: #fff;
}

.btn_area .news_btn input[type='button']{
	opacity: 1;
}
.btn_area .news_btn::before{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 100%;
    background-color: var(--primary_color);
   transform: translateX(-100%);
    transition: all .3s;
    z-index: -1;
}
.index_news_list:hover .btn_area .news_btn::before{
	transform: translateX(0px);
}
  /* ------------------ */
  

.btn_area.news_more_btn {
		position: absolute;
		bottom: -23px;
		left: 50%;
		transform: translateX(-50%);
}
.btn_area.news_more_btn input[type="button"]{
	font-size: 20px;
	width: 135px;
    height: 50px;
}


@media(max-width:1440px){
	.index_newsBg .wrap{
		width: 70%;
	}
	
}
@media(max-width:1280px){
	.index_newsBg .wrap{
		width: 80%;
	}
	
}
@media(max-width:990px){
	.index_newsBg {
		padding: 30px 0 30px 0;
	}
	.index_newsBg .wrap{
		width: 90%;
	}
	.index_news_area {
		padding: 15px 0;
	}
}
@media(max-width:768px){
	.news_info {
		width: 75%;
	}
	.news_btn{
		display: none;
	}
	.index_newsBg .btn_area {
		display: block;
		position: absolute;
		bottom: -26px;
		left: 50%;
		transform: translateX(-50%);
	}
	
}
@media(max-width:540px){
	.index_news_area a{
		display: block;
		margin: 0;
		padding: 15px 10px;
		border-bottom: 1px solid #ccc;
	}
	.index_news_area a:last-of-type{
		border-bottom: none;
	}
	.news_date {
		font-size: 22px;
		margin-bottom: 15px;
	}
	.day,.month,.year{
		display: none;
	}
	.news_date::before {
		color: var(--sec_color);
		content: attr(datetime);
	}
	.news_info {
		width: 100%;
	}
	
}

/* -----------首頁服務項目區塊------------------ */
.index_serviceBg{
	padding:  325px 0 60px 0;
	
}
.index_serviceBg .wrap{
	width: 85%;
}
.serviceBg_background{
	background-image: url(../index/images/background.webp);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
	padding: 45px 0;
}
.serviceBg_background::before{
	content: '/我們堅持使用最新鮮的食材/';
	font-size: 18px;
	width: auto;
    height: auto;
    letter-spacing: 1.3em;
    position: absolute;
    top: -54px;
    left: 140px;
	font-weight: 600;
}
.index_serviceBg_in {
    
}

.index_serviceLeft{
	width: 40%;
	
}
.index_service_area{
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow : hidden;
}
.index_serviceRight{
	width: 800px;
    position: absolute;
    right: 10%;
    bottom: -267px;
	transform: translateY(-50%);
}
.index_serviceRight img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* .index_serviceRight {
    width: calc( 100% - 40% - 100px );
} */

.index_serviceBg_in .btn_area{
	text-align: left;
}

.index_serviceBg_in .index_title2 {
	
	text-align: left;
	margin-bottom: 20px;
}
.index_serviceBg_in .index_title2 {
    display: inline-block;
}
.index_serviceBg_in .index_title2::before{
	display: none;
}

@media(max-width:1700px){
	.serviceBg_background::before{
		letter-spacing: 1.2em;
		left: 140px;
	}
	.index_serviceRight{
		width: 700px;
		bottom: -234px;
	}
	.index_serviceRight {
		right: 7%;
	}
}
@media(max-width:1520px){
	.index_serviceBg{
		padding: 225px 0 60px 0;
		
	}
	.serviceBg_background::before{
		letter-spacing: 1em;
		left: 113px;
	}
}
@media(max-width:1440px){
	.index_serviceBg .wrap {
		width: 93%;
	}
	.serviceBg_background::before {
		left: 60px;
	}
	.index_serviceRight {
		width: 600px;
		bottom: -200px;
	}
	.index_serviceRight {
		right: 6%;
	}
	
}
@media(max-width:1280px){
	
	.serviceBg_background::before {
		font-size: 16px;
	}
	.index_serviceRight {
		right: 3%;
	}
}
@media (max-width: 1100px){
	.index_serviceBg {
		padding: 60px 0;
	}
	.serviceBg_background::before {
		display: none;
	}
	.index_serviceLeft {
		width: 100%;
	}
	.index_serviceBg_in .index_title2 {
		display: block;
	}
	.index_serviceBg_in .index_title2 {
		text-align: center;
		
	}
	.index_serviceBg_in .btn_area {
		text-align: center;
	}
	.index_serviceRight {
		display: none;
	}

	
}

@media(max-width:540px){
	.index_serviceBg {
		padding: 30px 0;
	}
}

/* ------------------------------------------------- */
/* ------------首頁_相簿區塊------------------------------- */
.index_photoBg{
	position: relative;
	padding: 60px 0;
}
.index_photoBg .wrap{
	width: 70%;
}
.index_photoBg .index_title2::before{
	left: 52%;
}

/* ---------------相簿輪播區塊------------------------------------------ */
.main .swiper-button-prev_photo, 
.main .swiper-button-next_photo {
    position: absolute;
    top: 60%;
    margin: 0px;
    z-index: 10;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background-size: 60px;
    background-position: center;
    background-repeat: no-repeat;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main .swiper-button-prev_photo{		
	background-image: url(../index/images/left_arrow.png);
	left: 4%;
}
.main .swiper-button-next_photo{
	background-image: url(../index/images/right_arrow.png);
	right: 4%;
}
.main .swiper-button-prev_photo:after, 
.main .swiper-button-next_photo:after {
    /* content: 'prev'; */
	display: none;
}
/* -------------------------------------------------------- */
.index_photo_area{
	padding-top: 60px ;
}
.photo_area_in{
	padding:0 10px;
}
.photo_title{
	text-align: center;
	font-size: 18px;
	padding-top: 20px;
	line-height: 1.6;
	font-weight: 600;
}
.photo_list_in{
	border: 1px solid var(--primary_color);
	border-radius: 50%;
	padding: 10px;
	/* background-color: #fff; */
}
.photo_list a{
	display: block;
	border-radius: 50%;
	overflow: hidden;
	box-sizing: border-box;
	/* padding: 10px; */
	position: relative;
	padding-top: 100%;
}
.photo_list a img{
	width: 100%!important;
	height: 100%!important;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	opacity: 1;
	transition: all .3s ease-in;
}
.photo_list:hover img{
	opacity: 0.5;
}
.photo_list {
	
}
.photo_info h2{
	text-align: center;
	
}
/* .photo_info.hidden h2{
	border-bottom: none;
} */
.fancybox__left-panel h2{
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
}
.hidden p{
	display: none;
}

.pswp__custom-caption {		
	font-size: 14px;
	color: #fff;
	/* width: calc(100% - 32px); */
	/* max-width: 400px; 
	padding: 2px 8px;
	border-radius: 4px;*/
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);

	background: rgba(0 0 0 / 35%);
	padding: 0;
	line-height: 1.3;
	text-align: center;		
	max-width: calc(100% - 20px);
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* .pswp__custom-caption:before{
	content: "";		
	width: 100%;
} */
	.pswp__custom-caption a {
		color: #fff;
		/* text-decoration: underline; */

		text-decoration: none;			
	}
	.hidden-caption-content {
		display: none;
	}

	@media(max-width:990px){
		.index_photoBg {
			padding: 30px 0;
		}
		.index_photo_area {
			padding-top: 30px;
		}
	}
/* ----------------------------------------------- */
@media(max-width:990px){
	
}
@media(max-width:768px){

}
@media(max-width:540px){

}


/* ----------------------------------------------------- */
.fancybox__main-panel {
	flex: 0 0 auto;
	min-height: 0;
	margin: auto;
	position: relative;
	display: grid;
	/* grid-template-columns: 50% 50%; */
  }
  
  /* Example of aspect ratio hack before `aspect-ratio` has good browser support, see https://caniuse.com/mdn-css_properties_aspect-ratio  */
  @media (min-aspect-ratio: 16/9) {
	.fancybox__main-panel {
	  width: calc((100vh - 64px * 2) * 16 / 9);
	  height: calc(100vh - 64px * 2);
	}
  }
  
  @media (max-aspect-ratio: 16/9) {
	.fancybox__main-panel {
	  height: calc((100vw - 64px * 2) * 9 / 16);
	  width: calc(100vw - 64px * 2);
	}
  }
  
  .fancybox__left-panel {
	color: #222;
	background: #000;
	overflow: auto;
	padding: 3rem;
  }
  
  .fancybox__spinner {
	color: #222;
  }
  
  .fancybox__carousel {
	overflow: hidden;
	margin: 0;
	background: #000;
  }
  
  .fancybox__slide {
	padding: 0;
  }
  
  .carousel__button.is-close {
	top: 8px;
	right: 8px;
  }
  
  .fancybox__carousel .carousel__dots {
	top: calc(100% - 22px);
	color: #000;
	z-index: 20;

  }
  .fancybox__carousel.has-dots.is-draggable{
	order: -1!important;
  }
  .fancybox__caption {
	max-width: 80%;
  
	/* Prevent opacity change when dragging up/down */
	--fancybox-opacity: 1;
  }