@charset "utf-8";

/*●●●●●●●●●●●●●●●●●●●●●●●●   隱藏內容   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.me_tp_features{display:none;}
.path p, .path p a{display:none;}
.footer_logo{display: none;}
.box_link{display:none;}

/*●●●●●●●●●●●●●●●●●●●●●●●●   浮動按鈕   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.info_fix_links{ display:block !important;}/*保持展開*/
.info_fix>span { display: none;}/*隱藏展開鈕*/
.linksBtn, .info_fix:hover>.linksBtn{ background: #de8c66;}

.info_fix_links a { opacity: 0.6; border: 1px solid #ffffff30;}
.info_fix_links a:hover { opacity: 1;  animation: move2 2s; animation-timing-function: ease-out;}

.info_fix_links a, .info_fix_links a:hover{background:var(--mainColor);}
.info_fix_links a:nth-of-type(even), .info_fix_links a:nth-of-type(even):hover { background:var(--mainColor2);}



#to_top{box-shadow: none;border-radius: 0; width: 45px; height: 45px; border: 1px solid #00000033;
           background: #fff;  color: var(--pinkDD);   padding-top: 7px; font-size: 10px;}
#to_top i.top {height: 16px;}
#to_top i.top:before, #to_top i.top:after {background: var(--pinkD);}

@media screen and (max-width: 768px){
#to_top { bottom: 50px;}
}
/*●●●●●●●●●●●●●●●●●●●●●●●●   大範圍設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
*{letter-spacing: .1rem; font-family: 'Advent Pro','Noto Sans TC', sans-serif;}
:root{
--mainColor: #ae7b48 /*咖啡色*/;
--mainColor2: #e4c08a /*金色*/;

--subColor: #bca558/*金色*/;
--subColor2: #e1e1e4/*淺灰色*/;
--subColor3: #d9d0c3/*暖灰色*/;
--subColor4: #be0017/*紅色*/;

--pinkL: #ffc2c2; /*粉*/
--pink: #CF9E9E; /*淺灰粉*/
--pinkD: #C48888;  /*深灰粉*/
--pinkDD:#995757;  /*深深灰粉*/
--grayL:#f2f2f2; /*淺灰*/
}

#content_main {background: var(--grayL);}
#content {}
.lastPage, .animated-arrow {background:#837a72;font-size: 12px;margin: 40px auto 0; border-radius: 10px;border-radius: 5px;}
.lastPage:hover, .animated-arrow:hover {background: var(--mainColor);}

.animated-arrow{width: 150px;height: 45px;}


@media screen and (max-width: 768px){
}         
@media screen and (max-width: 600px) {
	.main_part {padding: 10px 20px;}
	.path p, .path p a{font-size: 12px;}
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   HEADER區塊   ●●●●●●●●●●●●●●●●●●●●●●●●*/*/
/*主選單動畫*/
.stellarnav > ul > li {padding: 20px .5% 30px;animation: down 1s both;}
.stellarnav > ul > li:nth-of-type(2){animation-delay: .05s;}
.stellarnav > ul > li:nth-of-type(3){animation-delay: .1s;}
.stellarnav > ul > li:nth-of-type(4){animation-delay: .15s;}
.stellarnav > ul > li:nth-of-type(5){animation-delay: .2s;}
.stellarnav > ul > li:nth-of-type(6){animation-delay: .25s;}
.stellarnav > ul > li:nth-of-type(7){animation-delay: .3s;}
.stellarnav > ul > li:nth-of-type(8){animation-delay: .35s;}
.stellarnav > ul > li:nth-of-type(9){animation-delay: .4s;}
@keyframes down {0%{transform: translateY(-100px);opacity: 0;} 100%{transform: translateY(0px);opacity: 1;}}



.main_header_area .container {max-width: 95%;}
.navigation {display: flex;align-items: center;padding: 10px 0 25px;}
.nav-brand img{display: block;}
	
.header_area {position: fixed; transition: all .5s;background: transparent;padding: 0;}
.header_area.sticky{background: linear-gradient(275deg,var(--mainColor), transparent);}

/*LOGO*/
.nav-header {position: fixed;background:transparent; transition: all .5s;  top: 20%; left: 7%;max-width: 280px;} 
.sticky .nav-header { transition: all 1.5s; top: 0; max-width: 150px;}


/*第一層*/	
.stellarnav > ul {  margin-right: 4%;}
.stellarnav > ul > li > a { font-size: 16px;color: white;position: relative;overflow: inherit;}
.stellarnav > ul > li > a { display: none; }
.sticky .stellarnav > ul > li > a {display: block;}
.stellarnav.desktop li.has-sub a.dd-toggle {display:none;}
.stellarnav > ul > li > a b{ height: 20px; font-weight: 500;}

.stellarnav > ul > li > a:before{content: "";width: 80%; height: 3px;background: var(--mainColor2);
position: absolute;bottom: -6px;left: 45%;transform: translateX(-50%);opacity: 0;transition: all .3s;}
.stellarnav > ul > li > a:hover:before{bottom: -15px;opacity: 1;}

.stellarnav > ul > li > a:hover b{transform: translateY(-10px); -webkit-transform: translateY(-10px);}


/*第二層*/
.stellarnav li li a{ transition: all 1s ease;}
.stellarnav li li:hover a{background: var(--mainColor2); color: #ffffff;}
.stellarnav ul ul { left: -15px; width: 170px;}
.stellarnav ul li:nth-of-type(2) ul { width: 260px;}

.stellarnav li.has-sub > a:after {border-left: 5px solid transparent;border-right: 5px solid transparent;
    border-top: 5px solid #898989;display:none;}/*主選單箭頭*/
.stellarnav > ul > li.has-sub > a { padding-right: 0;}



@media screen and (max-width: 1200px) {
.nav-header{  top: 18%; max-width: 220px;}	
.sticky .nav-header { max-width: 130px;}

}
@media screen and (max-width: 1024px) {
.stellarnav > ul { text-align: right; }
.nav-header {    max-width: 180px; }
.sticky .nav-header { max-width: 100px;}
}

@media screen and (max-width: 900px) {
.nav-header {  top: 16%; }

}

@media screen and (max-width: 768px) {
.header_area { position: relative; padding: 20px 0 30px;  background: var(--mainColor2);border-top: 10px solid var(--mainColor);}
.header_area.sticky {background: linear-gradient(180deg, #614c1bf0, #7f6e46d4, transparent);}

.header_area .nav-brand { transition: all 2s ease;}
.header_area.sticky .nav-brand{max-width: 70px;transition: all 2s ease;}

.stellarnav ul li:nth-of-type(2) ul { width: 100%;}



.header_area .nav-header {max-width: 20%;left: 40%;top: 3%;}

.pageIndex .header_area .nav-header { /*margin-left: 15%;*/}

.header_area.sticky .nav-header {background: transparent;}



/*側邊欄位*/
/*meau*/
.stellarnav .menu-toggle span.bars span{background: var(--mainColor);}
.stellarnav .menu-toggle:after { font-size: 9px; color: white;}

/*clease*/
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { background: transparent; color: white;}
.stellarnav .icon-close:before, .stellarnav .icon-close:after { border-bottom: solid 3px #ffffff;}
.stellarnav .icon-close { margin-right: 5px;}
	
/*底色*/
.stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul { background: #805121e0; max-width: 300px;backdrop-filter: saturate(93%) blur(5px);}

/*+ x*/
.stellarnav.mobile > ul > li > a.dd-toggle { padding: 13px;}
.stellarnav a.dd-toggle .icon-plus:before, .stellarnav a.dd-toggle .icon-plus:after {border-bottom: solid 3px var(--mainColor2);}
	
/*第一層*/
.stellarnav > ul > li, .stellarnav.mobile li.open {padding: 15px;}

.stellarnav.mobile > ul > li { border-bottom: 1px #ffffff3d solid;}
.stellarnav.mobile li.open { background: transparent;}

.stellarnav > ul > li > a:before{  display:none;}
.stellarnav.mobile > ul > li > a { border: none;padding: 0;}
.pageIndex .stellarnav > ul > li > a { display: block;}


/*第二層*/
.stellarnav.mobile ul ul {margin-top: 5px;}
.stellarnav li li{border: none;}
.stellarnav.mobile li li a { border-bottom: 1px solid rgb(156 156 156);}
.stellarnav ul ul { left: 0;}
.stellarnav li li:hover a {background: #454545;}
.stellarnav.mobile li li a.dd-toggle, .stellarnav.mobile li li.has-sub a, .stellarnav.mobile li.open li.open
 {  background: transparent;color: gray; border: none;}
.stellarnav.mobile ul ul ul {  background: #ececec;}
.stellarnav.mobile ul ul ul li{border-bottom: 1px solid #ffffff;}
.stellarnav.mobile ul ul>li.has-sub{border-bottom: 1px solid rgb(156 156 156);}
.stellarnav.mobile li.open li.open{padding: 0;}

}

@media screen and (max-width: 570px) {
.stellarnav .menu-toggle { padding: 10px;}
.header_area .nav-header { max-width: 30%; left: 33%;}


}

/*●●●●●●●●●●●●●●●●●●●●●●●●   FOOTER區塊   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.footer{background: var(--grayL);padding: 25px 0 0;}
.footer .center {    max-width: 90%; width: 768px;}
.footer_info {grid-template-columns:1fr; padding: 0;}
.footer_info ul{display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;}
.footer_info li {display: inline-block;    width: 44%;}
.footer_info li:nth-child(1){ }
.footer_info li:nth-child(2){ }
.footer_info li p { padding-left: 10px;}
.footer_info li p,.footer_info li p a{color: #eee;font-size: 16px;}

.footer_info li:nth-child(1):before{content: "菩提生命禮儀";
    display: block;
    color: #4c4c4c;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    /*font-weight: bold;*/
    font-size: 19px;
    padding: 8px 10px 10px;
    margin-bottom: 5px;
    letter-spacing: 1px;}
	
.footer_info li p, .footer_info li p a {font-size: 13px;color: #717171;}

.footer_menu a{width: 140px;background:#ffffff;border: none;color: var(--subColor);font-size: 12px;padding: 10px;margin: 0 4px 8px 0;
    text-align: center;position: relative;z-index: 0;border-radius: 6px;}
.footer_menu a:first-child{display: none;}
.footer_menu a:before{content: "";width: 0;height: 100%;position: absolute;top: 0;left: 0;transition: all .5s;border-radius: 6px;
background: var(--mainColor);z-index: -1;}
.footer_menu a:hover { background: white;}
.footer_menu a:hover:before{left: auto;right: 0;width: 100%;transition: all .5s;}

.copy {padding: 6px 0 10px; margin-top: 20px;background: var(--mainColor);}
.copy, .copy a{color: #fff;letter-spacing: 0;font-size: 11px;}

@media screen and (max-width: 1200px){
	.box_link{display: none;}
	.footer_info{padding-right: 0;}
}
@media screen and (max-width: 768px){
	.footer {padding: 25px 0 50px;}
	.footer_logo {max-width: 80px;}
	.footer_info {grid-template-columns: 1fr;grid-gap: 20px;padding: 0;}
	.footer_info li+li{margin-top: 0;}

	.footer_logo {margin: 0 auto;}
	
	.footer_info li{width: 100%;margin-bottom: 10px;text-align: left;}
	.footer_info li:nth-child(2){margin-bottom: 0;text-align: center;}
	.footer_menu { text-align: left;}
	.footer_menu a { padding: 10px 8px;width: 110px;}
	
	#bottom_menu {background: #636363;  box-shadow: none;}
	#bottom_menu li a i::before {color: white;}
	#bottom_menu li a em {color: wheat;}
	#bottom_menu li a { padding: 10px 5px 3px;}
	
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   大圖部分設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/
/*預設解除背景輪播*/
#content_main { margin:0;    background: #e4dacb;}
.bannerindex { position:relative; height:auto;}
.bannerindex .swiper-banner { position:static; margin:0; height:auto;} 
.bannerindex .swiper-slide img { height:auto;}


/*各別*/
.bannerindex .swiper-slide{position: relative;}
.bannerindex .swiper-slide:before, .swiper-slide:after {
    content: "";
    position: absolute;
    z-index: 999;
    pointer-events: none;
    transition-duration: 2s;
    transition-timing-function: linear;
}

.bannerindex .swiper-slide.swiper-slide-active:nth-child(1):before, .bannerindex .swiper-slide.swiper-slide-active:nth-child(1):after,
.bannerindex .swiper-slide.swiper-slide-active:nth-child(2):before, .bannerindex .swiper-slide.swiper-slide-active:nth-child(2):after {
    background-image: url(https://pic03.eapple.com.tw/putifuneral/BNA1.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
	top: 0;
    background-size: contain;
    position: absolute;
    z-index: 101;
    animation: up_pop 3s ease;
	
}
.bannerindex .swiper-slide.swiper-slide-active:nth-child(1):after, .bannerindex .swiper-slide.swiper-slide-active:nth-child(2):after{
    background-image: url(https://pic03.eapple.com.tw/putifuneral/BNA2.png);
    animation: fade_in 3s ease;
}

.bannerindex .swiper-slide.swiper-slide-active:nth-child(2):before { background-image: url(https://pic03.eapple.com.tw/putifuneral/BNB1.png);}
.bannerindex .swiper-slide.swiper-slide-active:nth-child(2):after{   background-image: url(https://pic03.eapple.com.tw/putifuneral/BNB2.png);}

@keyframes up_pop {
 0% { transform: translateX(-10%); opacity: 0;}
 70% { transform: translateX(1%);opacity: 1;}
 85% { transform: translateX(0);opacity: 1;}
 100% { transform: translateX(0);}
}
@keyframes fade_in {
 0% { opacity: 0;}
 35% { opacity: 0;}
 100% { opacity: 1;}
}

/*切換鈕*//*
.bannerindex {--swiper-pagination-color: #fff;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction
{bottom: auto;top: 50%;left: 2vw;width: 25px;}
.bannerindex .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet
{margin: 0px 5px; width: 3px; height: 13px;border-radius: 2px;}


/*內頁BANNER 設定*/
.banner {background: url(https://pic03.eapple.com.tw/guoxingas/ban.jpg) no-repeat; background: var(--mainColor2);
background-position: center top !important;background-size: cover !important; padding: 3% 0 1%;}
.banner h5 {font-weight: 400;color: #ffffff; letter-spacing: .3rem; font-size: 20px;margin: 12vw 0 3vw;}
.banner h5:before{content: "PUTIFUNERAL"; letter-spacing: 6px; display: block;font-size:3vw;}
	
.banner.banC h5:before { content: "";}
.banner.banF h5:before { content: "";}
.article_a .banner.banblog h5:before { content: "";}
.article_b .banner.banblog h5:before { content: "";}

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

}
@media screen and (max-width: 450px){
.banner {}
.banner h5 {}

}

/*●●●●●●●●●●●●●●●●●●●●●●●●   首頁顯示   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*英文*/
.i_prod_tit h2, .i_video_tit h2, .module_i_news .title_i_box h6, .module_i_album .title_i_box h6, .news_part .title_i_box h6{
	font-size: 25px; color: var(--mainColor);}
/*中文*/
.i_prod_tit span, .i_video_tit span, .module_i_news .title_i_box h4, .module_i_album .title_i_box h4, .news_part .title_i_box h4{
	font-weight: 500;font-size: 18px; color: #4b4b4b;}
/*版面*/
.prod_part section, .module_i_news section, .module_i_album section { max-width: 1000px; padding: 50px 20px;}
.module_i_news, .prod_part { padding: 0;}
.module_i_news_list, .module_i_news_list.swiper{padding: 0;}


/*●●●●●●●●●●●●●●●●●●●●●●●●   文章   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*首頁顯示*/
.i_blog_le { aspect-ratio: 3 / 2;    grid-gap: 10px;}
	
.module_i_news ul{}
.module_i_news li{background: #ffffff59;}
.module_i_news li a:after {  background: transparent;border: 1px solid var(--mainColor);}


/*文章首頁*/
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category{background: var(--mainColor) !important;}
.blog_list_ri h5 { color: #3e3e3e;}
.subbox_item a:after { background: rgb(0 0 0 / 4%);}
.subbox_item a:before { color: white; background: var(--mainColor); padding: 10px;}
.subbox_item {    border: 1px solid var(--subColor2);}
	
	
/*左邊分類*/
h5.blog_le_t span {
    color: var(--subColor3);
}


/*文章內頁*/
.blog_shareData {
    border-bottom: 1px solid var(--mainColor);
    padding-bottom: 15px;}
.blog_back a.article_btn_back {
    background: var(--subColor);
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   商品產品購物車   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*首頁*/
.product-layer-two{display: flex; flex-wrap: wrap;gap: 5px;}
.product-layer-two ul { grid-gap: 0;}
.product-layer-two li { width: 150px;}
.product-layer-two li i { top: 2px;}
.product-layer-two li li { width: 150px; border: none;border-bottom: 1px solid #ffffff;}
.product-layer-two li:hover a, .product-layer-two li.active a {border: 1px #ccc solid;background: white;}
.product-layer-two li li a {background: var(--mainColor) !important; color: white !important;}

@media screen and (max-width: 768px) {
.product-layer-two {display: flex;}
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   聯絡我們表單   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*表單*/
.blank_letter { text-align: center;}
.contact_content { padding: 5% 10% !important; background: #f8f8f8;}
.contact_content .information_left{display: none;}
.contact_content .information_right { width: 100%; padding: 0;max-width: 100%;}
.contact_form li.last cite { background: var(--mainColor);}
.contact_form li.last blockquote:hover, .contact_form li.last cite:hover { background:var(--mainColor2);color: white;}
.contact_page .contact_editbox { padding: 0;}
.contact_page .banner h5 {display:none;}
.blank_letter { text-align: right;}
.contact_form li .form__label { display: flex; flex-direction: row-reverse; justify-content: flex-end;}
.contact_form li { align-items: center;}

@media screen and (max-width: 600px) {
.contact_form li .form__label { background: transparent;}
.contact_form li { grid-gap: 0px;}		
.contact_form li .form__label { font-weight: normal;}		

}