@charset "utf-8";

/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n) 

*/


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


/*上方選單解除滑動固定
.header_area.sticky { position:relative;}
*/

body {font-family: 'Noto Serif TC', serif;}
.main_header_area {
    background: white;
    box-shadow: 0 0 8px rgba(0 0 0 / 4%);
}
.main_header_area .container {max-width: 1800px;padding: 0 2%;}
.navigation {padding: 0 0 0 320px;}
.stellarnav li.has-sub > a:after {content: none;}
.stellarnav > ul > li > a {
    padding: 0 2px;
    line-height: 122px;
    height: 122px;
    color: #555;
    display: block;
    font-size: 15px;
    font-weight: 500;
    margin: 0 16px;
    transition: all 0.3s;
}
.header_area.sticky .stellarnav > ul > li > a{
    line-height: 100px;
    height: 100px;
}
.stellarnav > ul > li > a:hover,.stellarnav li.has-sub:hover>a {color: #900000;font-weight: bold;}
.nav-header {top: 6px;}
.nav-brand {
    width: 320px;
    display: block;
    transition: all 0.3s;
}
.nav-brand img {display: block;}
.header_area.sticky .nav-brand {width: 256px;}
.me_tp_features {display: none;}

/*次分類*/
.stellarnav > ul > li.drop-left > ul {
    right: auto;
    left: 0;
}
.stellarnav li.drop-left ul ul, .stellarnav ul ul ul {
    right: auto;
    left: 100%;
}
.stellarnav li li a,
.stellarnav li li.has-sub > a,
.stellarnav.mobile li li.has-sub a {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
}
.stellarnav li li a:hover,
.stellarnav li li.has-sub > a:hover,
.stellarnav.mobile li li.has-sub a:hover {
    color: #900000;
    font-weight: bold;
}
.stellarnav > ul > li > ul > li > a,
.stellarnav li li.has-sub > a {
	background: #fff;
	transition: all .3s;
}
.stellarnav > ul > li > ul > li > a:hover,
.stellarnav > ul > li > ul > li > ul > li > a:hover,
.stellarnav > ul > li:hover > ul > li:hover > a {
	background: #f9f9f9;
}

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


/*預設解除背景輪播*/
#content_main {
    margin: 0;
    box-shadow: 0 0 20px rgba(0 0 0 / 4%);
}
.bannerindex { position:static; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-slide img { height:auto;}
@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
}

.main_part {max-width: 1500px;}


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


/*內頁BANNER 設定*/
.banner {
    height: 300px;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: url(https://pic03.eapple.com.tw/sevenluzhu/banner.jpg) center no-repeat;
    background-size: cover;
}
.banE {
    background: url(https://pic03.eapple.com.tw/sevenluzhu/ba4.jpg) center no-repeat;
    background-size: cover;
}
.banblog {
    background: url(https://pic03.eapple.com.tw/sevenluzhu/ba1.jpg) center no-repeat;
    background-size: cover;
}
.banA {
    background: url(https://pic03.eapple.com.tw/sevenluzhu/ba2.jpg) center no-repeat;
    background-size: cover;
}

.banner h5{
    color: #fff;
    font-family: 'Noto Serif TC';
    letter-spacing: 1.5px;
    font-size: 36px;
    text-shadow: 0 0 12px black;
    filter: drop-shadow(0 0 24px black);
}

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


/*促銷*/
.promotion_title em {margin: 0 12px 2px 0;}
.other_promotion {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 12px 10px;
}
.other_promotion::before, .other_promotion::after {display: none;}
.other_promotion li {
    width: 100%;
    margin-left: 0;
}
.other_promotion li a {
    width: 100%;
    margin: 0;
}
.promotions_page .edit {
    line-height: 170%;
    font-size: 16px;
    color: #333;
}
.promotions_page .edit img{
    width: 99%!important;
    max-width: 380px!important;
}


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


/*文章設定*/
h4.blog_category_title {
    margin-bottom: 30px;
    border-bottom: 1px #ccc solid;
    padding: 8px 0 20px;
}
h5.blog_le_t,
h5.blog_le_t span
{font-family: 'Cormorant Infant','Noto Serif TC', serif;color: #333;}

h5.blog_le_t span {padding-left: 8px;}
h5.blog_le_t {letter-spacing: 0;}

.blog_search input[type=search] {border-radius: 0;background: white;}
.blog_search input[type=submit] {filter: grayscale(1);}
.blog_le .accordion {border-radius: 0;}
.accordion li .link, .accordion li:last-of-type {border-bottom: none;}
.accordion li {
    border-bottom: 1px solid #ccc;
    transition: all 0.2s ease;
}
.blog_le .accordion > li .link a,
.blog_le .accordion > li .link i {color: #222;}
.accordion li .link {font-weight: 500;}
.blog_le .accordion > li:hover,
.blog_le .accordion > li.open:hover,
.blog_le .accordion > li.on_this_category:hover {
    background: #900000 !important;
}
.blog_le .accordion > li:hover .link a,
.blog_le .accordion > li.open:hover .link i,
.blog_le .accordion > li.on_this_category.open:hover .link a,
.blog_le .accordion > li.on_this_category:hover .link a,
.blog_le .accordion > li.on_this_category:hover .link i,
.blog_le .accordion > li.open .link i,
.blog_le .accordion > li.open .link a,
.blog_le .accordion > li.on_this_category .link a,
.blog_le .accordion > li.on_this_category .link i {
    color: #fff !important;
}
 .blog_le .accordion > li.open,
 .blog_le .accordion > li.on_this_category {
    background: #ac4040 !important;
}
.blog_le .accordion > li, .submenu {background: #fff;}
.submenu a {
    font-family: 'Cormorant Infant','Noto Serif TC';
    color: #222;
    letter-spacing: 0px;
    font-weight: 400;
    padding: 12px 12px 12px 36px;
    border-left: #f9f9f9 0 solid;
    background: #f9f9f9;
    transition: all .15s;
}
.submenu a:before {font-weight: var(--fa-style, 900);}
.submenu a:hover {background: #f9f9f9;color: #000;border-left: #f9f9f9 4px solid;font-weight: 500;}
.submenu a:before {left: 12px;font-family:var(--fa-style-family, "Font Awesome 6 Free")}

.blog_subbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 16px;
}
.blog_subbox:before {content: none;}
.subbox_item {
    width: 100%;
    margin-bottom: 0;
    border-bottom: none;
}
.blog_list_le {
    padding: 0;
    width: 100%;
    position: relative;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.blog_list_le img {
    min-width: 100%;
    display: block;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.blog_list_ri {
    padding: 10px 5px;
    width: 100%;
}
.blog_list_ri h5 {font-weight: bold;}
.blog_list_ri em {margin: 6px 0 8px;}
.blog_list_ri p {
    line-height: 150%;
    -webkit-line-clamp: 2;
    color: #444;
}
.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: #900000;
    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-family: 'Cormorant Infant';
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    transform: translate(-50%,-50%);
    width: 148px;
    height: 40px;
    left: 50%;
    top: 50%;
    z-index: 9;
    opacity: 0;
    transition: ease all .4s;
}
/*內頁*/
.blog_in_page h4.blog_category_title {
    margin-bottom: 22px;
    padding: 8px 0 12px;
}
.blog_box_edit * {
    line-height: 170%;
    font-size: 16px;
    color: #333;
}
.blog_back {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 8px;
    justify-content: center;
}
.blog_back a {width: 100%;}
.blog_back a.article_btn_next, .blog_back a.article_btn_prev, .blog_back a.article_btn_back {
    background: #900000;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}


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


/*相簿*/
.show-list, .other_subalbum {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
}
.show-list:before, .show-list:after, .other_subalbum:before, .other_subalbum:after {content: none;}
.show-list .item, .other_subalbum li {
    width: 100%;
    padding: 0;
    margin: 0;
}
.show-list .show_pic, .other_subalbum li a div {
    width: 100%;
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 3/4;
}
.show-list .show_pic img, .other_subalbum li a img {
    max-width: 100%;
    min-width: 100%;
    display: block;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.show-list .item:hover .show_name {
    color: #900000;
}
.show-list .show_name {
    text-align: center;
    color: #444;
    letter-spacing: 0;
    margin-top: 8px;
}
.other_album_choice li a {color: #900000;}
.other_album_choice li {
    background: none;
    border: 1px solid #900000;
    border-radius: 0;
}
.pic-list .item h6 {font-size: 17px;}
.other_subalbum li {background: transparent;}
.album_fixed_title {background: none;color: #888;}

/*次分類*/
.subalbum-menu h2 {color: #555;}
.other_subalbum li p {margin-top: 6px;}
.subalbum-menu h2 .block {display: none;}
.subalbum-menu {margin: 0;padding: 0;}

/*相片*/
.pic-list{
    -moz-column-count: 3;
    -moz-column-gap: 16px;
    -webkit-column-count: 3;
    -webkit-column-gap: 16px;
    column-count: 3;
    column-gap: 16px;
    width: 100%;
}
.pic-list .item {
    width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    padding: 0;
    margin: 0 0 16px;
}
.pic-list .show_pic {
    height: auto;
    padding-bottom: 0;
}
.pic-list .show_pic img {
    width: 100%;
}
.pic-list .item h6 {
    padding: 0 5px;
    margin-top: 5px;
}


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

/*聯絡*/
.contact_le_map a {display: none;}
.contact_page .main_part {max-width: 1456px;}
.information_left, .information_right {padding: 0;}
.contact_content .information_right {padding-left: 120px;width: calc(100% - 265px);}
.contact_content .information_left {width: 250px;position: relative;}
.contact_content .information_left:before {
    content: '';
    background: #900000;
    width: 360px;
    height: 722px;
    position: absolute;
    z-index: -1;
    transform: translate(-50%, 0);
    top: 0;
    left: 50%;
    margin-top: -140px;
}
.information_left .blank_letter, .list_before, .list_before a {color: #fff;}
.blank_letter {
    font-family: "Noto Serif TC", serif;
    padding-top: 0;
    font-size: 28px;
    color: #000;
}
.contact_form {color: #222;}
.contact_form li {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 16px 0;
    border-bottom: none;
}
.contact_form li.last {justify-content: flex-end;padding-bottom: 0;}
.contact_form li .form__insert {line-height: 160%;width: calc(100% - 100px);}
.contact_form li .form__label {
    width: 100px;
    text-align: left;
    margin-left: 0;
    margin-bottom: 6px;
    padding-right: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.star { order: 1;}
.contact_form li .noborder {
    border: none !important;
    background: #f6f6f6;
    padding: 4px 6px 6px;
}
.contact_form li.last cite{
    background-color: #900000;
    color: #fff;
    border: 1px #900000 solid;
    margin-left: 8px;
    font-weight: 500;
}
.contact_form li.last blockquote {
    font-weight: 500;
    border: 1px #900000 solid;
    color: #900000;
}


/*footer*/
.box_link {display: none;}
.footer_logo {display:none;}
.footer {padding: 36px 0 0;background: #fff;box-shadow: 0 -2px 10px #0000000c;}
.footer .center {max-width: 1600px;padding: 0 2%;}
.footer_info {font-weight: 400;}
.footer_info, .footer_info li {padding: 0;}
.footer_info ul {
    display: flex;
    width: 100%;
    letter-spacing: 0;
}
.footer_info li:nth-child(1) {width: 100%;display: flex;flex-flow: column wrap;}
.footer_info li p, .footer_info li p a {color: #555;}
.footer_info li p {
    display: inline-block;
    width: 100%;
    letter-spacing: .5px;
    line-height: 185%;
}
.footer_info li:nth-child(2) {
	width: 100%;
	position: relative;
}
.footer_menu {
    width: max-content;
    position: absolute;
    right: 0;
}
.footer_menu a {
	padding: 6px 12px;
	border: none;
	color: #555;
	background: transparent;
	margin: 0;
	margin-left: 8px;
}
.footer_menu a:hover {
    background: #900000;
    color: #fff;
}
.footer_menu a:first-of-type {display: none;}
.copy, .copy a, .copy a:hover {color: #fff;font-family: 'Noto Serif TC';}
.copy {
    padding: 18px 0;
    border-top: none;
    background: #900000;
}

@media screen and (max-width: 1024px) {
.navigation { padding: 0;}
.nav-header {padding: 6px 0;}
.nav-brand{margin: 0 auto;width: 220px;}
.header_area.sticky .nav-brand {width: 200px;}
.main_header_area .container {padding: 0;}
.header_area.sticky .stellarnav > ul > li > a,
.stellarnav > ul > li > a {
    line-height: 48px;
    height: 54px;
    margin: 0 12px;
}

.footer_info ul {flex-flow: column;}
.footer_menu {width: 100%;position: relative;margin: 0 auto;}
.footer_menu a {margin: 4px 0;}
.footer_info li, .copy {text-align: center;}
.footer_info li:nth-child(2) {margin-top: 12px;}

.blog_subbox {grid-template-columns:  1fr 1fr;}
.other_promotion {grid-template-columns: repeat(2, 1fr);}


}


@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {display: block; }
.footer.with_shopping_mode { padding:30px 0 58px; }
#to_top { bottom:68px;}


.stellarnav > ul > li > a ,
.header_area.sticky .stellarnav > ul > li > a{
    height: auto;
    line-height: 150%;
    margin: 0 6px;
    transition:none;
}
.stellarnav.mobile > ul {border-top: none;}
.stellarnav.mobile li.open> a{ padding: 10px 43px 10px 7px;}
.stellarnav.mobile li.open> a.dd-toggle { padding: 12px 8px;}

.banner { height: 180px;}
.banner h5 {font-size: 28px;}
.main_part {padding: 36px 4% 10px;}

.contact_content {padding: 24px 0 0;}
.contact_content .information_left:before { content: none;}
.blank_letter {color: #000!important;font-size: 24px;}
.list_before, .list_before a {color: #222;}
.contact_content .information_right {padding: 0;}
.contact_content .information_right,
.contact_content .information_left,
.contact_form li .form__insert
{width: 100%;}
.list_before, .contact_form  {
    margin-top: 24px;
    margin-bottom: 44px;
}
.list_before.info li {padding-left: 40px;}
.contact_form li {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 0 0 16px 0;
    border-bottom: none;
}
.contact_form li .form__label {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    text-align: left;
    margin-left: 0;
    margin-bottom: 6px;
    padding-right: 0;
}
.star {order: 1;height: 18px;}
.contact_form li.last cite {margin-left: 8px;}
.contact_form li.last { justify-content: flex-end;}

.pic-list {
    -moz-column-count: 2;
    -moz-column-gap: 8px;
    -webkit-column-count: 2;
    -webkit-column-gap: 8px;
    column-count: 2;
    column-gap: 8px;
}
.show-list, .other_subalbum {grid-template-columns: 1fr;}
.show-list .show_pic, .other_subalbum li a div {aspect-ratio: 4/3;}
.pic-list .item {margin: 0 0 4px;}
.show-list .show_name {
    margin-top: 6px;
    font-size: 16px;
}

.blog_subbox {grid-template-columns: 1fr;}
h4.blog_category_title {font-size: 24px;}
.blog_list_ri h5 { font-size: 18px;}
.blog_box_edit * {font-size: 15px;}
.blog_back {margin: 28px auto;}
.subbox_item a .blog_list_le:before {font-size: 15px;}

.other_promotion {grid-template-columns: 1fr;gap: 8px;}
.promotion_title h2 {margin-top: 6px;}






}