@charset "utf-8";

/*●●●●●●●●●●●●●●●●●●●●●●●●   大範圍設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/
*{letter-spacing: 1px;}


@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif+TC&family=Oswald:wght@200..700&display=swap');


@media screen and (max-width: 600px){
	.main_part {padding: 50px 20px 20px;}
}

/*※※※※※【【  此案件更動處↓↓↓  】】※※※※※*/

*{letter-spacing: 1px; /*font-family: "Noto Serif TC", serif;*/}
/*●●●●●●●●●●●●●●●●●●●●●●●●   大圖部分設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/
/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:static; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-slide img { height:auto;}
/*其他設定*/
.bannerindex {position: relative;}

@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
}


/*※※※※※【【  此案件更動處↓↓↓  】】※※※※※*/
/*大圖點點*/
.swiper-pagination-bullet {     width: 100px; height: 3px; border-radius: 0%;  background: #fdfdfd;}

@media screen and (max-width: 600px) {
  .swiper-pagination-bullet {    width: 50px;}
}

/*大圖閃閃/＝＝＝＝＝*/
.swiper-banner {
    overflow: hidden;
    transition-duration: .5s;
    width: 100%;
    max-height: 100vh;
    background: #eeeeee;
    text-align: center;
    vertical-align: middle;
  }
  .swiper-slide {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .swiper-banner .swiper-slide:before {
    content: "";
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 25%;
    opacity: 0.4;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 70%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 100%);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    filter: blur(10px);
    -webkit-animation: bannerLight 2.5s ease-in 2s infinite;
    animation: bannerLight 2.5s ease-in 2s infinite
  }
  
  @-webkit-keyframes bannerLight {
    0% {
      left: -100%;
      top: -0%
    }
  
    100% {
      left: 100%;
      top: 100%
    }
  }
  
  @keyframes bannerLight {
    0% {
      left: -100%;
      top: -0%
    }
  
    100% {
      left: 100%;
      top: 100%
    }
  }

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*大圖動畫*/
.swiper-slide {position: relative;}/*因為偽元素，所以要加的*/
.swiper-slide:before ,.swiper-slide:after { content: ""; position: absolute;  z-index: 999; pointer-events:none;}/*before+after依樣要寫的內容拆出來寫一起，要寫在個別下方也可以*/

.bannerindex .swiper-slide:nth-child(1)::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://pic03.eapple.com.tw/033702298/PIC-1.png);
  width: 100%;
  max-width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 10000;
}
.bannerindex .swiper-slide:nth-child(2)::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://pic03.eapple.com.tw/033702298/PIC-2.png);
  width: 100%;
  max-width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 10000;
}

.swiper-slide.swiper-slide-active:after { animation: slide-right  1s 0.5s both;}


/*往右特效*/
@keyframes slide-right {
  0% {-webkit-transform: translateX(-100%);  /* 一開始的位置 在X-100*/
            transform: translateX(-100%);
            opacity:0;/*透明度0*/}
  100% {-webkit-transform: translateX(0);/* 跑到最後終止的位置 在X-0*/
            transform: translateX(0);
            opacity:1;/*透明度顯示*/}
}
/*往左特效*/

  



/*●●●●●●●●●●●●●●●●●●●●●●●●   HEADER區塊   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/
.header_area {  position: fixed;  width: 100%; background: #cccccc00; padding: 0;}
.main_header_area {background: #fff;box-shadow: 1px 1px 10px rgba(0,0,0,.1);}
.main_header_area .container {max-width: 1800px;padding: 0 3%;}
.me_tp_features {display: none;}

/*新增的效果*/
.stellarnav > ul > li { position: relative;}
.stellarnav > ul > li > a, .stellarnav li.has-sub > a {  font-weight: 500;   position: relative;  padding: 0 20px; margin: 0; color: #cbcdcf;}
/*.stellarnav > ul > li:hover > a { color: #ffffff;}*/


.stellarnav li a {  padding: 12px 12px;  display: block;  color: #fff;  font-size: 14px;}
.stellarnav li li {  display: block;  border: none;  margin-bottom: 0px;  background: #333; border-bottom: 1px solid #f2f2f21a;}


@media screen and (max-width: 1200px){
	 .header_area {position: relative;}
}
@media screen and (max-width: 1024px){
	.nav-header {position: relative;}
	 .header_area {  position: relative;}
}
@media screen and (max-width: 768px) {
	.stellarnav.mobile {top: 10px;}/*漢堡按鈕*/
	.stellarnav .menu-toggle span.bars span {width: 15px;height: 1px;}
	.nav-header{top: 0;z-index: 0;}
	.nav-brand{margin-top: 5px;}
	/*主分類*/
	.stellarnav.mobile > ul > li > a {   vertical-align: middle;  color: #fff; }
	.stellarnav.mobile > ul > li > a.dd-toggle {padding: 0px;width: auto;top: 10px;right: 10px;}
	.stellarnav.mobile > ul > li.has-sub > ul a { padding: 15px;   color: #fff;   font-size: 14px;   font-weight: 200;  }
	

	
	/*其他下拉按鈕*/
	.stellarnav.mobile li.open {padding: 0;}
	.stellarnav.mobile li.open li.open{padding: 3px;background: #ddd;}
	.stellarnav.mobile li.open li.open > a{background: #ddd;}
	.stellarnav.mobile li li a.dd-toggle {width: 40px;height: 40px;}
	.stellarnav.mobile li a{border-bottom: none;}
	.stellarnav > ul > li > ul a:hover {background: #fff;}
	/*叉叉按鈕*/
	.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu{color: transparent;background: #9f8d53;}
	.stellarnav .icon-close {position: absolute;right: 15px;}
	.stellarnav li li {  display: block;   border: none;   border-bottom: 1px solid #ccc; margin-bottom: 0px;}

}
/*※※※※※【【  此案件更動處↓↓↓  】】※※※※※*/
.main_header_area{background: #121212;}
.main_header_area {
    background: linear-gradient(180deg, #000000a3, transparent);
    box-shadow: none;
    position: relative;
}
.main_header_area:after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: #000000cc;
    transition: all .5s;
    transition-timing-function: ease-in;
}
.stellarnav > ul > li {  padding: 25px 0;}
.stellarnav > ul > li > a {   color: #cbcdcf;  transition: all .5s;  letter-spacing: 2px;  font-size: 16px;   font-weight: 500;   height: 40px;  padding: 0 15px;}
.stellarnav > ul > li > a:hover {  color: #fff; font-weight: bold;}
.stellarnav > ul > li > a b {  font-weight: 500;  letter-spacing: 1px;  color: #cbcdcf;  font-size: 14px;}
.stellarnav > ul > li > ul a:hover {   background: #b2924f;  color: #fff;  border: none;}
.stellarnav li.has-sub > a {padding: 0px 25px 0px 15px;}
.stellarnav li.has-sub > a:after {border-top: 4px solid #fff;}
.stellarnav li.has-sub > a:hover:after {  color: #fff;}
.header_area.sticky .main_header_area:after{height: 100%;}
.header_area .nav-brand { transition: all 0.8s;}
.header_area.sticky {  width: 100%;  z-index: 9999;  background: rgb(255 255 255 / 0%);}


.stellarnav li.has-sub>a:after {
    content: '+';
    margin-left: 10px;
    border-left: none;
    border-right: none;
    border-top: none;
    color: #9da0a0;
    transition: all 0.3s ease-in-out;
}


.nav-header {  width: 110%;   max-width: max-content;}
.nav-brand {  margin-top: 10px;}

.nav-brand img {  max-width: 80%;}
@media screen and (max-width: 1300px){
.nav-header {  width: 120%;}

}


@media screen and (max-width: 1200px){
	.main_header_area { background: #000; }
	.main_header_area .container {   max-width: 1800px;  padding: 0px 2%;}
	.stellarnav > ul > li > a:hover { color: #dcc06e; }
	.stellarnav li.has-sub > a:hover:after {  color: #dcc06e;}
	
	.stellarnav > ul > li > a {  padding: 0 10px;}
	.stellarnav > ul > li > a { font-size: 13px;}
}

@media screen and (max-width: 1024px){
	.navigation {padding: 0;}
	.nav-brand { width: 70% !important;  }
	.stellarnav > ul > li {padding: 0;}
	.nav-header {  top: 20px;}
	
	.nav-brand {   margin: 0px 0 20px 0;}
	
}



@media screen and (max-width: 768px){
	.nav-header {top: 0px;z-index: 10;}
	.stellarnav .menu-toggle:after {color: #eee; display:none;}
	.stellarnav.mobile {top: 35px;}
	.stellarnav.mobile ul {background: #121212;}
	.stellarnav.mobile li.open { background: #c6ad61; color: #fff; }
	.stellarnav a.dd-toggle .icon-plus:before,.stellarnav a.dd-toggle .icon-plus:after {border-bottom: solid 2px #eee;}
	.stellarnav .icon-close:before {border-bottom: solid 3px #fff;}
	.stellarnav .icon-close:after { border-bottom: solid 3px #fff;}
	.swiper-wrapper::before{ background:none;}
	.stellarnav.mobile > ul > li > a b {color: #fff;}
	.header_area.sticky .main_header_area:after{height: initial;}
	.nav-brand {  margin: 17px 0px 8px 0;  }
	.stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul { max-width: 250px;}
	
	
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   FOOTER區塊   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/

.footer{background: #fff;padding: 50px 0 0;}
.footer .center{max-width: 1200px;padding: 0 3%;}
.footer_logo{width: 200px;margin: 0;}
.footer_logo img{max-width: 110%;}
.footer_info{padding: 0;display: flex;align-items: center;justify-content: space-around;}
.footer_info li{padding: 10px 0;display: inline-block;vertical-align: middle;}
.footer_info li:nth-child(1){width: 100%;}
.footer_info li:nth-child(2){width: 100%;}
.footer_info li p,.footer_info li p a{color: #444;}
.footer_menu a {background: transparent;color: #555;border: none;font-weight: 300;}
.copy {border-top: none;}
.copy a { color: #b3b1b3;  font-weight: 200;}
.copy a:hover { color: #333;}
.box_link {top: 100%;width: 100%;text-align: right;padding: 0 3%;max-width: 300px;display: none;}
.box_link a {display: inline-block;width: 30px;height: 30px;border: none;background: #111;padding: 0px;border-radius: 30px;}
.box_link a i{max-width: 100%;font-size: 18px;line-height: 30px;display: block;}

@media screen and (max-width: 768px){
	.footer_logo{margin-bottom: 0;}
	.footer_info ul {flex-wrap: wrap;}
	.footer_info li:nth-child(1){width: 100%;}
	.footer_info li:nth-child(2){width: 100%;text-align: center;}
	.footer_menu {margin: 0;}
	.footer_menu a{font-size: 12px;}
	.box_link{position: relative;right: 0;top: 0;text-align: left;padding: 15px 0;}
	.copy {padding: 30px 3% 0 3%;text-align: center;border-top: 1px solid #555;font-size: 12px;}
}
	
/*※※※※※【【  此案件更動處↓↓↓  】】※※※※※*/
.footer {background: #1b1b1b;}
.footer .center {max-width: 1600px;}
.footer_info ul {max-width: 750px;margin-left: 50px;}
.footer_info li {vertical-align: top;}
.footer_info li:before {  font-size: 20px;  color: #d6b96a;  margin-bottom: 10px; display: block;  font-weight: bold;}
.footer_info li:nth-child(1) {width: 50%;}
.footer_info li:nth-child(1):before{content: "CONTACT US";}
.footer_info li:nth-child(2) {width: 40%;}
.footer_info li:nth-child(2):before{content: "RELATED";}
.footer_info li p, .footer_info li p a {color: #e7e7e7;}
.footer_menu a { width: 46%; font-weight: 400; color: #e7e7e7;}
.footer_menu a:hover { background: #ffffff;  font-weight: bold;   color: #1b1b1b;}
.copy { border-top: 1px solid #2b2b2b; padding: 20px; margin-top: 50px;  background: #1e1e1e;}
.copy a:hover { color: #444;}



.footer_info li p.add2:before { content: '營業時間：';}

@media screen and (max-width: 1024px){
	.footer_info {flex-direction: column;align-items: flex-start;}
	.footer_info ul {margin-left: 0;width: 100%;}
}
@media screen and (max-width: 768px){
	.footer_info li:nth-child(2):before{text-align: left;}
	.footer_menu a {text-align: left;}
	.footer_menu a {  width: 29%; font-weight: 400;}
	.footer_menu a:nth-child(2) {  display: none;}
	.footer_info li:nth-child(2){width: 100%;text-align: left;}
	
	
	
}
@media screen and (max-width: 600px){
	.footer_info li {padding: 50px 10px 10px;}
	.footer_info li:nth-child(1){width: 100%;}
	.footer_info li:nth-child(1):after {  width: 100%;}
}




/*●●●●●●●●●●●●●●●●●●●●●●●●   文章分類管理   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/

/*首頁文章管理*/
.i_blog_le {aspect-ratio: 4 / 3;}
.module_i_news section { max-width: 1500px; }
.products-box {    width: 90%;    max-width: 1300px;    margin: 100px auto;    border-top: 1px solid #ccc;    padding-top: 50px;}
.module_i_news ul {  display: flex;  flex-wrap: wrap;   max-width: 1500px;}
.module_i_news li {width: 24%;  padding: 10px;  background: #ffffff; border: 1px solid #eee;}
.i_blog_ri , .i_blog_le { width: 100%;}
.i_blog_ri p {  font-size: 15px;   color: #666;   line-height: 150%;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;   white-space: normal;  overflow: hidden;  word-break: break-all;}

.module_i_news li a {  position: relative;  display: flex;  grid-gap: 10px;  flex-direction: column;}
.module_i_news li a:before , .module_i_news li a:after , .subbox_item a:before , .subbox_item a:after{    transition: 0.3s;}
.module_i_news li a:after , .subbox_item a:after{ background: rgb(222 184 135 / 70%);content: none;}
.module_i_news li a:before, .subbox_item a:before { background: rgb(90 90 90 / 80%); color: #fff;}
.module_i_news li a:before , .subbox_item a:before { transform: translateX(-50%);    width: 100%;   top: unset; }
.module_i_news li a:hover:before , .subbox_item a:hover:before { opacity: 1;  transform: translateX(-50%);  bottom: 0;}
.module_i_news li a:before {  left: 50%;   font-size: 18px;  padding: 10px 5px;}


.module_i_news .title_i_box h4,.module_i_album .title_i_box h4  {
	color: #CBA533;
	font-size: 25px;
	font-weight: 900;
}
.module_i_album .title_i_box h4:before {
	content: "ARTICLE";
	display: block;
	font-family: Montserrat;
	color: #DFC15B;
	font-size: 50px;
	letter-spacing: 1px;
	margin-bottom: -5px;
	font-weight: 700;
}

.module_i_news .title_i_box h4:before {
	content: "NEWS";
	display: block;
	font-family: Montserrat;
	color: #DFC15B;
	font-size: 50px;
	letter-spacing: 1px;
	margin-bottom: -5px;
	font-weight: 700;
}


/*文章分享變1排3個*/
.blog_page .main_part {    max-width: 1400px;}
.blog_list_le , .blog_list_ri {    width: 100%;}
.blog_subbox {    display: flex;    flex-wrap: wrap;    justify-content: flex-start;}
.subbox_item { width: calc(100% / 3);  padding: 5px;}
.i_blog_ri em { font-size: 12px;   font-style: normal;  display: block;   margin: 5px 0;}

@media screen and (max-width: 980px) {
.module_i_news li , .subbox_item {    width: 31%;}
.module_i_news ul {    max-width: 100%;}
.products-box {    margin: 70px auto;}
.module_i_news {    padding: 70px 20px;}
}

@media screen and (max-width: 768px) {
.module_i_news li , .subbox_item {    width: 48%;}
}

@media screen and (max-width: 600px) {
.module_i_news {    padding: 50px 20px;}
.module_i_news li , .subbox_item{    width: 100%;    margin: 0 auto;    max-width: 350px;}
.products-box {    margin: 50px auto;}
.module_i_news .title_i_box h4 {    font-size:32px;}
}


/*------------------------------------------------------------------------------*/



/*文章設定*/

h5.blog_le_t { font-family: 'Noto Sans TC','Microsoft JhengHei', sans-serif;}
h5.blog_le_t span { font-family: 'Geologica';}
h5.blog_le_t {letter-spacing: 0;}
.accordion li .link a {font-weight: 500;}
.blog_search input[type=search] {border-radius: 0;}
.blog_le .accordion {  border-radius: 0;   border: NONE;}
.accordion li:not(:last-of-type) {  border-bottom: 1px solid #fff;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category { background: #00a0e8 !important;   transition: all 0.3s;}
.blog_subbox {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-gap: 10px;  background: #ffffff5e; padding: 12px;}
.blog_subbox:before {content: none;}
.subbox_item {   width: 100%;  margin-bottom: 0;}
.blog_list_le {  padding: 0; width: 100%;}
.blog_list_ri {  padding: 12px 0;  width: 100%;}
.blog_list_ri em {   font-size: 12px;  color: #999; font-style: normal;  display: block;  margin: 5px 0;}
.blog_list_ri p { -webkit-line-clamp: 2;  line-height: 160%;   font-size: 14px;   font-weight: bold;   letter-spacing: 0.5px;}
.blog_list_le {  position: relative;  height: auto;  aspect-ratio: 4/3;   overflow: hidden;}
.blog_list_le img {   min-width: 100%;   display: block;  width: 100%;  margin: 0 auto;  height: 100%;   object-fit: cover;  object-position: center;}
h4.blog_category_title { border-bottom: 1px #afafaf solid;}
.submenu a:hover { background: #666;  color: #FFF;}
.submenu a {  display: block;   position: relative;  color: #666;   padding: 13px 6px 12px 29px;  letter-spacing: 1px;  font-size: 12px;}
.subbox_item a:before, .subbox_item a:after {content: none;}
.subbox_item a:hover .blog_list_le:before, .subbox_item a:hover .blog_list_le:after {  opacity: 1;}
.subbox_item a .blog_list_le:after {   content: '';
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 8;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: all .4s;
}
.subbox_item a .blog_list_le:before {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    content: 'VIEW MORE +';
    font-size: 14px;
    font-weight: 400;
    color: #f0f0f0;
    transform: translate(-50%, -50%);
    width: 148px;
    height: 40px;
    left: 50%;
    top: 50%;
    z-index: 9;
    opacity: 0;
    transition: ease all .4s;
    letter-spacing: 1px;
}
	
.blog_list_ri h5 {  font-weight: bold;}	

/*內頁*/
.blog_back {  width: 100%;   margin: 0 auto;  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-gap: 10px;  justify-content: center;}
.blog_back a {width: 100%;}
.blog_back a.article_btn_back {  background: #00a0e8;}
h5.blog_le_t, .blog_le .accordion {   display: block;}





@media screen and (max-width: 1024px) {
.blog_subbox {  grid-template-columns: 1fr 1fr;}
}

@media screen and (max-width: 768px) {
.blog_subbox {  grid-template-columns: 1fr; }
}

/*※※※※※【【  此案件更動處↓↓↓  】】※※※※※*/
/*側邊*/
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category { background: #e1c572 !important;}
.subbox_item a { display: grid;  grid-template-columns: auto;  position: relative;  grid-gap: 20px;}
.news_related h6 span:before {  content: '相關文章';  font-size: 24px; color: #333;}
.lastPage {   background: #333;}
.news_related_list li a {   background: transparent;}
.blog_back a.article_btn_back {   background: #e1c572;}

.link a {  width: 100%;  display: block; }



/*●●●●●●●●●●●●●●●●●●●●●●●●   相簿管理(有分類)   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/
/*大分類*/
.module_i_album section {max-width: 1500px;}
.i_album_list {grid-template-columns: repeat(3, 1fr);}
.album_page .main_part {max-width: 1600px;}
.show-list{display: flex;flex-wrap: wrap;}
.show-list .item {width: 32%;padding: 0%;margin: 0;}
.show-list .item:hover .show_name {color: #666;}
.show-list .show_name {  text-align: center; letter-spacing: 0;}
.overlay {-webkit-transform: scale(1);transform: scale(1);}
.show-list .show_pic img{min-height: 20vw;object-fit: cover;}
/*次分類*/
.album_class_page .main_part {max-width: 1600px;}
.subalbum-menu h2 {color: #555;text-align: center;display: block;}
.subalbum-menu h2 .block{display: none;}
.other_subalbum{display: flex;flex-wrap: wrap;}
.other_subalbum li {width: 32%;}
.other_subalbum li p{text-align: center;margin-top: 10px;color: #555;letter-spacing: 2px;}
.other_subalbum li div{height: 0;padding-bottom: 75%;overflow: hidden;}
.other_subalbum li img{min-height: 20vw;object-fit: cover;transition: all .5s;}
.other_subalbum li:hover img{opacity: .6;}
/*相片頁*/
.album_info_page .main_part {max-width: 1600px;}
.pic-list{display: flex;flex-wrap: wrap;}
.pic-list .item {padding: 0;margin: 0;width: 32%;}
.pic-list .item h6{font-weight: 500;}
.pic-list .show_pic img {min-height: 20vw;object-fit: cover;}
.other_album{margin-top: 200px;}
.album_fixed_title {background: transparent;font-size: 15px;}
.other_album_choice li {background: #555;border-radius: 3px;font-size: 12px;}


@media screen and (max-width: 1200px){
.show-list .item { width: 48%; }
.pic-list .item {width: 48%;}
.other_subalbum li {width: 48%;}

}

@media screen and (max-width: 768px){
	/*主分類*/

	.show-list .show_pic img{min-height: 35vw;}
	/*次分類*/
	.other_subalbum li img{min-height: 35vw;}
	/*相片頁*/
	.pic-list .show_pic img {min-height: 35vw;}
}

@media screen and (max-width: 600px){
	/*主分類*/
	.show-list .item {width: 100%;}
	.pic-list .item {width: 100%;}
	.other_subalbum li {width: 100%;}
	}


@media screen and (max-width: 450px) { 
	/*相簿*/
	.show-list .show_pic img{min-height: 140px;}
	.other_subalbum li img{min-height: 140px;}
	.pic-list .show_pic img {min-height: 140px;}
}

/*※※※※※【【  此案件更動處↓↓↓  】】※※※※※*/*/


/*●●●●●●●●●●●●●●●●●●●●●●●●   聯絡我們(表單功能)   ●●●●●●●●●●●●●●●●●●●●●●●●*/
#content_main,
#content {
    /* background-color: #F4F3F1; */
    background-image: url(https://pic03.eapple.com.tw/maggieflower/bg.png);
    /* background-color: #FCFAF8; */
    background-color: #FDFCFB;
    position: relative;

}
.list_before.info li {padding-left: 44px;}
#content { background: transparent;}
.contact_content .information_right { width: calc(100% - 315px);}
#content_main:before,
#content:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://pic03.eapple.com.tw/maggieflower/index_bg_02.jpg);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
    background-color: #FEFDF8;
    opacity: 0.5;
    z-index: -1;
}
.info_TEL:before, .info_TEL2:before, .info_PHONE:before, .info_LINE:before, .info_FAX:before, .info_TAXID:before, .info_MAIL:before, .info_ADD:before, .info_ADD2:before {
    letter-spacing: 1px;
}
.contact_form {
    grid-gap: 13px;
}

body.services_page #content {
    background-color: #F4F2ED;
    position: relative;

}




#content {
    position: relative;
    overflow: hidden;
}



#page {
    position: relative;
}

body.pageIndex #content_main:after {
    content: '';
    display: block;
    height: 100%;
    background: url(https://pic03.eapple.com.tw/maggieflower/bd_deli_sh.png) no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 0;
    animation: shadow_02 8s cubic-bezier(0.05, 0.54, 0.46, 1.06) 0s infinite normal forwards;
    /* font-feature-settings: "palt" 1; */
    transform-origin: top right;
    right: 0;
    pointer-events: none;
    opacity: 0.7;
    aspect-ratio: 2 / 2;
    width: 50%;
    top: 13%;
    background-position: top;
    opacity: 1;
    z-index: 100;
}


@keyframes shadow {
    0% {
        transform: skew(0deg, 0deg)
    }

    25% {
        transform: skew(0deg, 8deg)
    }

    50% {
        transform: skew(6deg, 10deg)
    }

    75% {
        transform: skew(6deg, 2deg)
    }

    to {
        transform: skew(0deg, 0deg)
    }
}

@keyframes shadow_02 {
    0% {
        transform: skew(0deg, 0deg)
    }

    25% {
        transform: skew(8deg, 0deg)
    }

    50% {
        transform: skew(10deg, 6deg)
    }

    75% {
        transform: skew(2deg, 6deg)
    }

    to {
        transform: skew(0deg, 0deg)
    }
}


/*●●●●●●●●●●●●●●●●●●●●●●●●   內頁BANNER 設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*內頁BANNER 設定*/
.banner {}
.banner h5 {width: 90%;margin: 0 auto;font-size: 28px;color: #fff;text-shadow: 0 0 10px rgba(0, 0, 0, .2);
position: absolute;top: 60%;left: 50%;transform: translate(-50%,-50%);letter-spacing: 3px;}
/*.banner h5::first-letter{font-size: 2vw;color:#f3f1ef;}*/
.banner h5:after {content: "Jun Yi"; font-size:16px;color:#f3f1ef;}

.banner { background-image: url(https://pic03.eapple.com.tw/033702298/bannre.jpg); background-position: center; width: 100%; background-size: cover;height: 350px;
 background-position: center;
    background-size: cover;
    overflow: hidden;
    background-image: none;
    position: relative;
    z-index: 1;
   }
.banner::before {
    content: "";
    background-image: linear-gradient(180deg, #00000000 40%, rgb(0 0 0 / 31%) 65%), url(https://pic03.eapple.com.tw/033702298/banner.jpg);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    animation-duration: 5s;
    background-size: cover;
    background-position: center;
    animation: bgScroll 20s linear infinite;
    width: 110%;
    height: 350px;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}
/.banner::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 350px;
    top: 0;
    left: 0;
    background: url(https://pic03.eapple.com.tw/06-2999995/5.png) #000;
    -webkit-animation: noise 1.5s steps(5) alternate infinite;
    animation: noise 1.5s steps(5) alternate infinite;
    z-index: -1;
}

@keyframes bgScroll {
    0% {        -webkit-transform: translateX(0);        transform: translateX(0);    }
    50% {        -webkit-transform: translateX(-5%);        transform: translateX(-5%);    }
    100% {        -webkit-transform: translateX(0);        transform: translateX(0);    }
}
@keyframes noise {
    0% {      background-position: -88px 166px    }
    20% {      background-position: 222px -333px    }
    40% {      background-position: -111px 444px    }
    60% {      background-position: 33px -66px    }
    80% {      background-position: -138px 212px    }
    100% {      background-position: 317px -197px    }
}





/*●●●●●●●●●●●●●●●●●●●●●●●●   其他設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/
/*麵包屑*/
.path p, .path p a {display: none;}
/*下拉編輯頁設定*/
.other_select_page .promotion_title{display: none;}
.other_select_page .other_promotion{display: none;}
/*頁碼*/
.page li {margin: 0;width: 30px;height: 30px;line-height: 30px;}
.page li a {width: auto;height: auto;line-height: inherit;}
.page strong, .page a{border-radius: 0;color: #555;border: 1px #555 solid;padding: 0;}
.page strong, .page a:hover {background: #333;}
.other_select_page .page{margin: 0;}
/*錨點滑動*/
html {scroll-behavior: smooth;}
/*top按鈕*/
#to_top {padding-top: 12px;width: 45px;height: 45px;color: #888;bottom: 50px;}
#to_top i.top {width: 12px;height: 12px;}
#to_top i.top:before, #to_top i.top:after {height: 8px;background: #555;}

@media screen and (max-width: 768px) {
	/* 開啟手機板下方按鈕所需設定 */
	#bottom_menu {display: none; }
	#to_top { bottom:60px;}
}

/*※※※※※【【  此案件更動處↓↓↓  】】※※※※※*/