@charset "utf-8";

/*優品家木地板*/
/*網站全域設定/=====*/
/*
  #A08F7D /*網站主要色系
  #705B50 /*網站輔助色系1
  #A2897B /*網站輔助色系2
  #99836d; /*文字顏色*/


/*網站字體*/

body {
    font-family: 'Noto Serif TC';
}
	
/*header*==========*/


.tp_links a {
    display: none;
}
.header_area.sticky .main_header_area {
    background: #FFF;
    transition: all 0.3s ease-in-out;
	box-shadow: 1px 1px 15px rgba(38,15,1,.2);
}
.header_area.sticky .nav-brand img{
	width: 245px; 
	position: relative; 
	top: 30px; 
	max-width: 245px;
	filter: brightness(1.3);
}
.header_area.sticky .stellarnav>ul>li>a b {
    color: #99836d;
    font-weight: 400;
    letter-spacing: 2px;
}
.nav-brand img{ 
    width: 245px; 
	position: relative; 
	top: 30px; 
	max-width: 245px;
	filter: brightness(40.5);
}
.main_header_area { 
   background: #fff0;
}
.main_header_area .container {
    max-width: 1600px;
    width: 95%;
}
.stellarnav {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
}
.stellarnav li a {
    padding: 10px;
}
.stellarnav>ul>li>a b {
    color: #fff;
    font-weight: 400;
    letter-spacing: 2px;
}
.stellarnav li.has-sub>a:after {
    display: none;
}
.stellarnav>ul>li>a,
.stellarnav.desktop li>a {
    color: #99836d;
    font-size: 16px;
    font-weight: 500;
    padding: 0px 15px;

    letter-spacing: 0.107em;
}
.stellarnav.desktop>ul li ul a {
    padding: 10px;
    color: #99836d;
}
.stellarnav.desktop li.has-sub a {}
.stellarnav>ul>li>a:hover,
.stellarnav.desktop li.has-sub a:hover {
    color: #705B50;
}
.stellarnav.desktop>ul li ul a:hover {
    border-left: 5px solid #705B50;
}
.stellarnav>ul>li:hover>a,
.stellarnav>ul>li.active>a,
.stellarnav>ul>li.focus>a {
    color: #99836d;
}
.header_area {
    position: relative;
    width: 100%;
    transition: all 0.3s ease-in-out;
}
.header_area.sticky .stellarnav>ul>li:hover>a,
.header_area.sticky .stellarnav>ul>li.active>a,
.header_area.sticky .stellarnav>ul>li.focus>a {
    color: #999;
}
.header_area.sticky {
    transition: all 0.3s ease-in-out;
}
.stellarnav>ul>li {
    transition: all 0.6s;
    vertical-align: top;
    position: relative;
}
.stellarnav ul:hover li a {
    opacity: 0.3;
    transition: all 0.3s ease-in-out;
}
.stellarnav ul li:hover a {
    opacity: 1;
    transition: all 0.3s ease-in-out;
}
.header_area:after {
    content: "";
    display: block;
    width: 100%;
    height: 8px;
    position: absolute;
    bottom: -8px;
    left: 0;
    transform: rotate(-180deg);
    background: url(https://pic03.eapple.com.tw/tywangpin/header_dili_top.svg) repeat-x center 0; */
}
.stellarnav>ul>li:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    /* content: "\f1b0"; */
    text-align: center;
    font-size: 10px;
    left: 0;
    transform: translate(0%, -20%) rotate(45deg);
    z-index: 10;
    position: absolute;
    margin: 0 auto;
    top: 50%;
    transition: all 0.1s ease-in-out;
    color: #5d352a;
}
.stellarnav>ul>li:hover:before {
    transition: all 0.1s ease-in-out;
    background-position: 100% 0;
    -webkit-transform: translate(0%, -10px) rotate(10deg);
    transform: translate(0%, -10px) rotate(10deg);
    color: #9a6a5d;
}

@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
.navigation-portrait .nav-menu > li > a {    padding: 10px 10px 10px 40px;}
.nav-brand img {
    filter: none;
}
.main_header_area {
    background: #fff;
}
.stellarnav>ul>li>a b {
	color: #705B50;
}
}

/*大圖*/
.swiper-slide img {
    width: 100%;
    height: auto;
}

/*頁面上方banner*==========*/


.banner {
    font-size: 35px;
	letter-spacing: 6px;
    padding: 229px 0;
    text-align: center;
    background-image: url(https://pic03.eapple.com.tw/youpinjia/banC.jpg);
	color: #fff;
	position: relative;
    top: -110px;
}
.banner h5 {
    display: block;
    font-family: 'Noto serif TC';
    font-weight: normal;
    color: #fff;
    font-size: 30px;
    text-align: left;
	padding-left: 390px
}
.banner::after {
    content: "";
    position: relative;
    display: block;
    max-width: 1200px;
    width: 29%;
    height: 1px;
    background-color: #fff;
    top: 12px;
}
.banB { 
     background-image: url(https://pic03.eapple.com.tw/youpinjia/banBlog.jpg);
}
.banF { 
    background-image: url(https://pic03.eapple.com.tw/youpinjia/banC.jpg);
}
.banE { 
    background-image: url(https://pic03.eapple.com.tw/youpinjia/banC.jpg);
}
.banC { 
    background-image: url(https://pic03.eapple.com.tw/youpinjia/banC.jpg);
}

/*頁面上*==========*/

.blog_list_le { 
    width: 40%;
}
.blog_list_ri { 
    width: 53%;
}
.sidebarBtn { 
    border: 0px #ddd solid; 
}
.contact_form li .form__insert { 
    letter-spacing: 1px; 
}
.contact_form li .form__label { 
    padding-right: 4px; 
	line-height: 20px;
}
.list_before.info li { 
    padding-left: 41px; 
}
ul.prod li .prod-panel { 
    font-size: 13px; 
	line-height: 20px; 
}

/*按鈕*==========*/

.show-list .item:hover .show_name { 
    color: #D5BEA4;
}
.other_album_choice li { background: #463A39; 
    font-size: 14px;
}
.contact_form li.last cite { 
    background: #D5BEA4;
}
.contact_form li.last blockquote, .contact_form li.last cite { 
    border: 1px #D5BEA4 solid;
}
.prod_related { 
    background: #ffffff;
}
.lastaction { 
    color: #3a2f23; 
	background-color: #F7F2ED;
}
.lastPage { 
    background: #D5BEA4;
}
.inquiry_a1 { 
    background: #D5BEA4; 
}
.inquiry_a2 { 
    background: #463A39; 
}
.products-list .more {
    border: 1px solid #ab9d8f;
    color: #ab9d8f;
}
.products-list .item a:hover .more { 
    background: #ab9d8f; 
}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category { 
    background: #D5BEA4 !important; 
}
.blog_le .accordion { 
    border: 0px; 
}
	
/*首頁最新消息*==========*/

.news_part .title_i_box h6 {
    color: #A5894F;
    font-family: serif;
}
.news_part .title_i_box h4 {
    color: #463a39;
}
.news_list ul li span {
    display: inline-block;
    vertical-align: top;
    padding: 15px 0;
    font-size: 15px;
    color: #2B2118;
    width: 150px;
    background: #E6C997;
}
.news_list ul li p {
    padding-left: 10px;
}

/*文章頁面*==========*/


.blog_search input[type=search] {
    font-size: 14px;
    color: #2B2118;
    border: solid 1px #8696A7;
    border-radius: 0px;
}
.blog_le .accordion {   
    overflow: unset;
}
.blog_list_le {
    width: 100%;
}	
.subbox_item a:after {
    width: 100%;
}
.blog_le .accordion li .link:last-child {
    border: none;
    background: #d5cabe!important;
}
.blog_back a.article_btn_back {
    background: #c9bfb3;
}
.blog_back a.article_btn_next {
    background: #ab9d8f;
}
.blog_back a.article_btn_prev {
    background: #ab9d8f;
}
.accordion li .link {
    color: #fff;
}

/*文章內頁*==========*/


.blog_back {
    padding-bottom: 30px;
}
.blog_search input[type=search] {
    border: solid 1px #ab9d8f;
}
.blog_le .accordion li .link:last-child {
    background: #ab9d8f;
}


/*商品頁面*==========*/

.products-list .name {
	height: 35px;
}
.inquiry_a2 {
    background: #ab9d8f;
}
.nextaction {
    background-color: #ab9d8f;
}
.lastPage {
    background: #ab9d8f;
}

/*線上表單*===========*/

.list_before {
    font-size: 13px;
	letter-spacing: 0.2px;
}
.contact_le_map a {
    background: #A08F7D;
}
.contact_form li.last blockquote, .contact_form li.last cite {
    border: 0px;
}
.contact_form li.last cite {
    background: #BCAE9C;
}
.contact_form li input.noborder {
    border: 0px #ddd solid;
    border-bottom: 1px #8696a7 solid;
}
.contact_form li textarea.noborder {
    border: 0px #ddd solid;
    border-bottom: 1px #8696a7 solid;
}
.contact_form li .form__label {
    width: 77px;
}

/*footer*==========*/


.box_link {
    display: none;
}
.footer {
    background: #e5ddd2;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
	box-shadow: 1px 1px 15px rgba(38,15,1,.2);
}
.footer:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://pic03.eapple.com.tw/youpinjia/light-wood-floor.jpg);
    mix-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1;
    pointer-events: none; 
}
.footer_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    width: 95%;
    margin: auto;
}
.footer_menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
    gap: 5px;
}
.footer_info ul {
    width: 100%;
}
.footer_info li p,
.footer_info li p a {
    color: #705B50;
}
.footer_menu a {
    margin: 0;
    text-align: center;
    padding: 5px;
    transition: all 0.3s;
    color: #705B50;
	border: 1px #705B50 solid;
}
.footer_menu a:hover {
    background: #BCAE9C; 
}
.footer_menu a {
    background: transparent; 
}
.copy {
    background: transparent;
    color: #705B50;
    border: none; 
	background: #e5ddd2;
}
.copy a {
    color: #705B50;
    transition: all 0.3s; 
}
.box_link a {
    transition: all 0.3s;
    color: #705B50; 
}
.box_link a:hover {
    background: #192821;
    color: #c6c7b0; 
}
.footer_logo img {
	display: none; 
}
.double_key a {
    color: #705B50 !important;
}


/*手機版選單*/
.stellarnav .menu-toggle:after {
    color: #705b50;
}
.stellarnav .menu-toggle span.bars span {
    background: #705b50;
}
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu {
    background: #d5bea4;
}


@media screen and (max-width: 768px) { 

.footer_info li { 
    flex-direction: column;
}
.banner h5 {
    display: block;
    font-family: 'Noto serif TC';
    font-weight: normal;
    color: #fff;
    font-size: 30px;
    text-align: left;
	padding-left: 127px;
}
.banner::after {
    display: none;

}
}
@media screen and (max-width: 401px) { 
.products-list .name {
    font-size: 14px;
}

}
