@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;}
*/


/*上方選單右邊設定 臉書/LINE/電話/信箱
.tp_links a:before {寬高大小設定}
.tp_links a.me_tp_fb {}
.tp_links a.me_tp_fb:before {背景換圖/建議.SVG}
.tp_links a.me_tp_line {}
.tp_links a.me_tp_line:before {背景換圖/建議.SVG}
.tp_links a.me_tp_call {}
.tp_links a.me_tp_call:before {背景換圖/建議.SVG}
.tp_links a.me_tp_mail {}
.tp_links a.me_tp_mail:before {背景換圖/建議.SVG}
*/


/*電腦LOGO
.nav-brand {}
*/

/*手機LOGO
.nav-brand-m {}
*/


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


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


@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


/*上面顏色*/
.main_header_area {
    background: #000;}
.pageIndex .header_area {position: fixed;width: 100%;}
.pageIndex .header_area.sticky .main_header_area {
        background: rgba(0, 0, 0, 0.7);}
.pageIndex .main_header_area {
    background: rgb(255 255 255 / 0%);}
.pageIndex .main_header_area {
        transition: 0.3s ease;}
.pageIndex .nav-header {top: 20px;}
.nav-brand {width: 190px;margin-top:10px;}

.stellarnav > ul{text-align: center;margin: 15px 0;}
.stellarnav > ul > li{position: relative;}
.stellarnav > ul > li > a {padding: 10px 8px;color: #9a8875;letter-spacing: 3px;font-size: 16px;
	font-weight: 400;color: #fff;}
.stellarnav > ul > li > a:hover{color: #ff7554;}
.stellarnav li.has-sub > a {padding: 10px 12px 10px 8px;}
.stellarnav > ul > li > ul a {    background: #333;
    color: #fff;
    font-size: 15px;}
.stellarnav > ul > li > ul a:hover {background: #7b1603;}
.me_tp_features {display: block;position: absolute;right: 15px;top: 15px;max-width: 400px;}
.me_tp_features a{transition: all .3s;}
.me_tp_features a.tp_btn_notice i{margin-top: 5px;}
.me_tp_features a:hover{transform: translateY(-3px);}
.me_tp_features a i {margin: 0;}

.me_tp_features {display: block;top: 52px;}
.me_tp_features a{font-size: 12px;color: #ffffff;
    background: #7b1603;
    border: 0px solid #ffffff;
    width: 85px;height: 28px;text-align: center;line-height: 28px;}

.tp_links {display: inline-block;margin-top: 2px;display: none;}
.tp_links a {font-size: 18px;color: #99917f;background: #ecdec9;border-radius: 50%;
    width: 28px;height: 28px;text-align: center;line-height: 28px;margin: 0 2px;}
.main_header_area .container{    max-width: 1600px;
    padding: 0 3%;}
.shop_search_btn{background: #7b1603;}
.stellarnav li.has-sub > a:after{    border-top: 6px solid #fff;    top: 74%;}
.navigation{    padding: 20px 0 20px 220px;}
.pageIndex .nav-brand img{width:200px;}
.pageIndex .header_area.sticky .nav-brand img{    margin-top: -20px;        transition: .3s;width:160px;}
.box_search{    margin-right: 10px;    vertical-align: top;}
.box_search input[type=text] {
    padding: 5px 10px 3px 32px;
    border-radius: 0;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: none;
    cursor: pointer;
    border: 0;}
.shop_search_btn {
    padding: 6px 12px;
    border-radius: 0;}

@media screen and (max-width: 1440px) {
.me_tp_features {max-width: 100%;
    top: 14px;}
.stellarnav > ul {
        text-align: right;
		padding-left: 0px;}
.stellarnav {
    max-width: 100%;}
}
@media screen and (max-width: 1024px) {
.navigation {
        padding: 10px 0 10px 0px;
    }
.me_tp_features{position:relative;right: 0px;}
.pageIndex .header_area {
    position: relative;
    width: 100%;}
.main_header_area {
    background: #000000;}
.stellarnav > ul{text-align:center;}
.pageIndex .header_area.sticky .main_header_area {
    background: #000;
}
.nav-brand {
    width: 150px;}
.pageIndex .main_header_area {
    background: #000;}
}

/*footer*/
.footer{    background: #672316;}
.footer_info li p{    color: #fff;}
.footer_info li p a{    color: #fff;}
.footer_menu a{    color: #e1cfcf;
    background: #672316;    border: 0px #ccc solid;}
.footer_info li{text-align:center;}
.footer_logo img{max-width:200px;padding-bottom: 50px;}
.footer_info ul{width:100%;}
.footer_logo{margin:0;width:100%;    text-align: center;}
.copy{color:#fff;}
.copy a{color:#fff;}
/*下方icon小圖*/
.box_link {
position: absolute;
    right: 0px;
    width: 100%;
    display: flex;
    left: -16px;
    text-align: center;
    align-items: center;
    top: 36%;
    justify-content: center;
    padding-top: 10px;}
.box_link a {
    transition: all 0.3s;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px #fff solid;
	    font-size: 20px;
		    margin: 0 10px 3px 0;
}
.fa-facebook:before{color:#fff;}
.fa-line:before{color:#fff;}
.fa-whatsapp:before{color:#fff;}
.fa-envelope::before{color:#fff;}
.fa-instagram:before{color:#fff;}
.box_link a:hover {    background: #9b2126;    color: #fff;}

/*相簿*/
.show-list .show_name{color: #fdfdfd;}
.show-list .item:hover .show_name {
    color: #d56021;}
.other_album_choice li {
    background: #666;}
.album_fixed_title{background: #222;    color: #fff;}

/*其他頁字體顏色*/
.path p, .path p a{color:#fff;}

/*文章*/
h5.blog_le_t{color:#fff;}
/*文章管理*/
/*文章分類設定*/
.products-box {
    width: 90%;
    max-width: 1500px;
    margin: 100px auto;
}

.module_i_news ul {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 20px;
}

.module_i_news li {
    width: 25%;
    padding: 10px;
}

.i_blog_ri,
.i_blog_le {
    width: 100%;
}

.module_i_news li a,
.subbox_item a {
    overflow: hidden;
}

.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: #007490a1;
    content: none;
}

.module_i_news li a:before,
.subbox_item a:before {
     background: #1a1a1a85;
    color: #fff;
}

.module_i_news .title_i_box h4:before {
    content: "";
    display: block;
    text-align: center;
    border: 0px solid #b28532;
    width: 40px;
    margin: 0 auto 50px;
}

.module_i_news li a:before,
.subbox_item a:before {
    transform: translateX(0);
    width: 100%;
    bottom: -40px;
    right: 0;
    opacity: 0;
    padding: 10px;
}

.module_i_news li a:hover:before,
.subbox_item a:hover:before {
    opacity: 1;
    transform: translateX(0);
    bottom: 0;
    right: 0;
    padding: 10px;
}

/*文章分享變1排3個*/
.blog_list_le,
.blog_list_ri {
    width: 100%;}

.blog_list_ri p {
    line-height: 150%;
    -webkit-line-clamp: 2;}

.blog_subbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.subbox_item {
    width: calc(100% / 3);
    padding: 5px;
}

/*側邊欄*/
.blog_search input[type=search] {
    border-radius: 0;
}

.blog_le .accordion {
    border: none;
    border-radius: 0;
}

.blog_le .accordion>li:hover,
.blog_le .accordion>li.on_this_category {
    background: #000 !important;
}

.blog_le .accordion>li {
    transition: all 0.3s;
}

.blog_le .accordion li .link:last-child {
    border-bottom: 1px solid #eeeeee;
    position: relative;
    padding-left: 0px;
}

.accordion li .link:after {
    content: '';
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    top: 14px;
    position: absolute;
    transition: 900ms ease-in-out;
    left: 15px;
    background-size: contain;
}

.accordion li .link {
    padding: 0;
}

.accordion li .link:hover:after {
    left: 160px;
    transform: scale(1) rotate(0deg);
    filter: contrast(0) brightness(100);
}

.share_page .edit {
    text-align: justify;
    line-height: 180%;
}

.subbox_item a:before,
.subbox_item a:after {
    transition: 0.3s;
}

.accordion li .link {
    font-weight: 400;
    letter-spacing: 2px;
}
.accordion li .link a {
    color: #fff;}

.submenu a {
    color: #666;
    padding: 12px 12px 12px 30px;
    background: #71c5bd1f;
}

.submenu a:hover {
    background: #71c5bd;
    color: #FFF;
}

.blog_box_edit {
    line-height: 180%;
    text-align: justify;
}

h4.blog_category_title {
        color: #000;
    font-size: 25px;
}

.link a {
    width: 100%;
    display: block;
    padding: 15px 10px;
}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category{background: #672316 !important;}

.blog_list_le{position: relative;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;}
.blog_list_le img {
    display: block;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.blog_list_ri em {
    border-bottom: 1px solid;
}
.blog_list_ri h5{color: #fff;}
.blog_list_ri p{color: #fff;}

/*文章內頁設定*/
.blog_ri {
    min-height: 50vh;
}

.blog_back a.article_btn_prev {
    background: #9b4434;
    color: #fff;
}

.blog_back a.article_btn_back {
        background: #444;
    color: #fff;
}

.blog_back a.article_btn_next {
   background: #9b4434;
    color: #fff;
}

.other_promotion li a:before {
    border: 1px #71c5bd solid;
    border-bottom: none;
    border-right: none;
}

.other_promotion li a:after {
    border: 1px #71c5bd solid;
    border-top: none;
    border-left: none;
}
h4.blog_category_title {
    color: #fff;}
.blog_box_edit{color: #fff;}

@media screen and (max-width: 980px) {

    .module_i_news li,
    .subbox_item {
        width: 50%;
    }

    .module_i_news ul {
        max-width: 650px;
    }

    .products-box {
        margin: 70px auto;
    }

    .module_i_news {
        padding: 70px 20px;
    }
}

@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: 0% auto 20%;
        padding: 0 5%;
    }

    .module_i_news .title_i_box h4 {
        font-size: 24px;
    }
}

/*購物車*/
.products-list .name{color:#fff;}
.products-list .more {
    border: 1px solid #b53131;
    color: #b53131;}
.products-list .item a:hover .more {
    background: #b53131;}
ul.prod li h3.prod-thumb {
    background: #662727;
    color: #fff;}
.qaform{color: #fff;}
.prod_related {
    background: #444;}
.prod_related h6 span:before{    color: #fff;}
.lastPage{    background: #b53131;}
.nextaction{background-color: #b53131;}
.lastaction {
    color: #ccc;
    background-color: #888;}
.qaform .breakF{    color: #000;    background: #ccc;}
ul.prod li .prod-panel p {
    color: #fff;
}

/*詢價車*/
.shopping-cart .cell.product_name a {
    color: #fff;
}

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


/*內頁BANNER 設定*/
.banner{    padding: 125px 0;}
.banner.banblog h5,.banner h5 {
    position: absolute;
    bottom: 40%;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    left: 50%;
    transform: translateX(-50%);
    width:100%;
    letter-spacing: 4px;
	}
.banner h5:before { 
font-family: "Anton", sans-serif;
 	display: block;  
 	font-size:60px; 
	    color: #fff0;
 	letter-spacing: 5px; 
  font-weight: 400;
  font-style: normal;
      -webkit-text-stroke: 1.5px #efe4d1;
 	}
.banner.banblog {background: url(https://pic03.eapple.com.tw/fl82417/banner_bg002.jpg) no-repeat;
    height: 475px;
    background-position: center !important;
    background-size: cover !important;
    position: relative;}
.banner.banblog h5:before{content: "NEWS";}	
	
.banner.banB {display:none;}
.banner.banC {}
.banner.banE {background: url(https://pic03.eapple.com.tw/fl82417/banner_bg003.jpg) no-repeat;
    height: 475px;
    background-position: center !important;
    background-size: cover !important;
    position: relative;}
.banner.banE h5:before{content: "ALBUM";}	
.banner.banF {background: url(https://pic03.eapple.com.tw/fl82417/banner_bg001.jpg) no-repeat;
    height: 475px;
    background-position: center !important;
    background-size: cover !important;
    position: relative;}
.banner.banF h5:before{content: "PRODUCT";}	

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


/*文章設定*/
/*一排呈現
.subbox_item { width:100%;}
*/


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


/*相本分類全版面 ( 限制最寬2000px
.work_page .main_part { max-width:2000px;}
.work_page .show_content { padding:0; width:100%;}
.work_page .show-list .item { width:33%; display:inline-block; float:none; margin:0; padding:0;}
@media screen and (max-width: 768px) {
.work_page .show-list .item { width:49%;}
}
@media screen and (max-width: 570px) {
.work_page .show-list .item { width:100%;}
}
.work_page .show-list .item a { max-width:100%;}
.work_page .show-list .show_pic { height:auto; line-height:0;}
.work_page .show-list .show_pic img { max-width:100%; max-height:100%;}
.work_page .show-list .show_name { position:absolute; top:50%; right:10%; width:80%; height:auto; line-height:160%; font-size: 20px; color: #FFFFFF !important; border: solid 1px #fff; text-align: center; margin: -20px 0 0 -120px; padding:5px 20px; transition:all ease-in .3s; opacity:0;}
.work_page .show-list .item:hover .show_name {opacity:1;}
*/


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


/*相本列表
.work_info_page .main_part { max-width:2000px;}
.work_info_page .show_content { padding:0; width:100%;}
.work_info_page .subalbum-menu { text-align:center;}
.work_info_page .subalbum-menu h2 { float:none;}
.work_info_page .pic-list .item { margin:0; padding:10px; width:49%; float:none; display:inline-block;}
@media screen and (max-width: 768px) {
.work_info_page .pic-list .item { width:100%;}
}
.work_info_page .pic-list .show_pic { height:auto; line-height:0;}
.work_info_page .pic-list .show_pic img { max-width:100%; max-height:100%;}
.work_info_page .pic-list .item a { max-width:100%; pointer-events: none; cursor: default; } 取消連結被點擊效果
*/


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





@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {display: block; }
.footer.with_shopping_mode { padding:30px 0 70px; }
#to_top { bottom:60px;}
    .stellarnav > ul {
        margin: auto;}
.stellarnav.mobile ul{background:#000;}
.stellarnav.mobile li.open{background: #4f0f0f;}
.box_link{    left: 0px;}
.me_tp_features{top: 5px;}
}

@media screen and (max-width: 600px) { 
}
@media screen and (max-width: 475px) { 
.nav-brand img {
    width: 130px;
}
.box_link{
        padding-left: 25px;    top: 32%;}

}
@media screen and (max-width: 390px) { 
.me_tp_features a {
        width: 75px;}
}