@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;}
.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;}
}

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

/*基本設定*/
.pageIndex .main_part { border-top: 0px solid #ccc;}

/*中間小標刪除*/
.path { display:none;}

/*header最右側按鈕*/
.tp_links a.me_tp_call:before {	display:none;}
.tp_links a.me_tp_mail:before {	display:none;}

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

/*header*/
.pageIndex .header_area {
    position: fixed;
    width: 100%;}
.main_header_area { background: #616161; box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);}
.main_header_area .container {max-width: 100%;}
/*HEADER的LOGO置中*/
.nav-header {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 3px;
    text-align: center;
    padding: 10px 10px 10px;}

/*HEADER的選單置中*/
.nav-menu {
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
    max-width: 100%;
    text-align: center;
    float: none;
    background: #ffffffc4;}
.nav-menu>li {    text-align: center;    position: relative;}
.nav-menu > li > a {color: #000000;letter-spacing: 3px;padding: 18px 20px;font-size: 16px;}
.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a { color: #e06666;font-weight: bold;}
.tp_links {display: none;}

/*下拉式選單*/
.nav-menu>li>.nav-dropdown { min-width: 180px;left: 50%;transform: translate(-50%);border: unset;}
.nav-dropdown .nav-dropdown {transform: translate(0%);}
.nav-dropdown > li > a {letter-spacing: 2px;border-bottom: unset;}
.nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus {color: #fff;background: #e06666;}
.nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus {color: #fff;background: #e06666;width: 100%;border-bottom: unset;}
.nav-dropdown .nav-dropdown {border: unset;}
.navigation-portrait .nav-dropdown>li>a:before {display: none;}
.navigation-portrait .nav-dropdown>li>a { padding: 12px 50px;    width: 100%;}
.navigation-portrait .nav-dropdown>li>ul>li>a {padding-left: 50px;}

/*下拉選單箭頭*/
.submenu-indicator-chevron {border-color: transparent #000000 #000000 transparent;}
.nav-menu>li:hover>a .submenu-indicator-chevron, .nav-menu>.active>a .submenu-indicator-chevron, .nav-menu>.focus>a .submenu-indicator-chevron {
    border-color: transparent #e06666 #e06666 transparent;}

/*購物車*/
.me_tp_features {top: 20px;right: 60px;}
.box_search input[type=text] {border: solid 1px #e06666;width: 135px;background: url(../images/search-icon.png) no-repeat 9px center #ffffff;}
.shop_search_btn {background: #e06666;}
.me_tp_features a {color: #fff;}
.me_tp_features a.tp_btn_cart {display: none;}
.me_tp_features a.tp_btn_notice {display: none;}

/*1024以下時變側邊選單 讓設置回復初始*/
@media screen and (max-width: 1024px) {
.nav-menu > li > a {
    letter-spacing: 1px;
    padding: 15px 10px;
    font-size: 15px;}
}

/*768以下時變側邊選單 讓設置回復初始*/
@media screen and (max-width: 768px) {
.pageIndex .header_area { position: relative;}
.header_area {position: relative;}
.nav-menu>li:not(.tp_links) { width: 100%; text-align: left;}
.nav-menu > li > a > span { display: block;}
.nav-dropdown {transform: unset;}
.nav-dropdown>li>a {width: calc(100% - 45px);}
.nav-header { display: inherit; position: static; left: 0;transform: none;margin: 0 auto;}
.me_tp_features {padding: 0 35px 15px;}
.box_search input[type=text] {width: 100%;}
.navigation-portrait .nav-menu > li > a { padding: 20px 35px;}
.navigation-portrait .nav-menu>li:last-child {border-bottom: solid 0px #f0f0f0;}

/*手機版選單*/
.nav-toggle {top: 15px; right: 30px;}
.nav-toggle:before {
    top: 5px;
    right: 0px;
    width: 28px;
    height: 3px;
    background-color: #ffffff;
    box-shadow: 0 0.5em 0 0 #ffffff, 0 1em 0 0 #ffffff;}
.nav-toggle:after {
    color: #fff;    
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;}
.navigation-portrait .nav-menus-wrapper {width: 85%;}
.nav-menu {padding:0;}
.nav-menu>li>.nav-dropdown {transform: unset;}
.navigation-portrait .submenu-indicator {height: 54px;}
.navigation-portrait .submenu-indicator-chevron {top: 23px;}
}


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


/*內頁BANNER 設定*/
.banner {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 0;
    height: 400px;
}
.banner h5 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #ffffffe0;
    margin: 0;
    padding: 15px 30px;
    letter-spacing: 2px;
    border-radius: 0 15px;
}
.banner.banA {display: none;}
.banner.banB {display: none;}
.banner.banC {}
.banner.banD {}
.banner.banE {background-image: url(https://pic03.eapple.com.tw/sunsofa99/ban02.jpg);background-position: bottom 20% center;}
.banner.banF {background-image: url(https://pic03.eapple.com.tw/sunsofa99/ban03.jpg);background-position: bottom center;}
.banner.banblog {background-image: url(https://pic03.eapple.com.tw/sunsofa99/ban04.jpg);background-position: bottom 33% center;}

@media screen and (max-width: 768px) {
.banner {height: 200px;}
.banner h5 {font-size: 18px;width: fit-content;}
}
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*footer*/

.footer {background: #616161;}
.center {padding-top: 30px;max-width: 1400px;}
.footer_info {
    display: flex;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;}
.footer_logo {width: 20%;}
.footer_logo a {display: block;width: 300px;margin: 0 auto;}
.footer_logo img {width: 100%;}
.footer_info li p {
    display: inline-block;
    line-height: 200%;
    width: 33.333%;
    min-width: 340px;
    color: #fff;}
.footer_info li p a {color: #fff;}
.footer_info li p.fax:before {content: 'IG：';}
.footer_info li p.taxid:before { content: 'LINE：';}

.footer_info ul {
    display: flex;
    width: 75%;
    flex-direction: column;}
.footer_info li:nth-child(1), .footer_info li:nth-child(2) {width: 100%;}

.footer_menu{
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;}
.footer_menu a:nth-child(1) { display: none;}
.footer_menu a {
    text-align: center;
    display: inline-block;
    padding: 10px 20px;
    letter-spacing: 2px;
    border: 0px #727272 solid;
    margin: 10px 5px 0px 0;
    font-size: 13px;
    line-height: 100%;
    color: #ffffff;
    background: #a0a0a0;}
.footer_menu a:hover {
    background: #616161;
    color: #fff;
}
.double_key {
    padding: 30px 0 15px;
    width: 100%;
    text-align: center;}
.copy {color: #030303;}

@media screen and (max-width: 1170px) {
.footer_logo {width: 100%;margin-bottom: 30px;margin-right: 0;}
.footer_info {flex-direction: column;}
.footer_info ul {width: 100%;}
.footer_info li:nth-child(1) {text-align: center;}
.footer_info li p {width: 100%;min-width: 300px;}
.footer_menu {justify-content: center;}
}

@media screen and (max-width: 768px) {
.footer_logo a {width: 235px;}
.footer_menu a {min-width: 200px;}
.fa-credit-card:before {
    content: '';
    background: url(https://pic03.eapple.com.tw/sunsofa99/logo-14.svg) center no-repeat;
    width: 100%;
    height: 25px;
    display: block;}
.fa-shopping-cart:before {
    content: '';
    background: url(https://pic03.eapple.com.tw/sunsofa99/logo-15.svg) center no-repeat;
    width: 100%;
    height: 25px;
    display: block;}
}


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

/*首頁最新消息*/
.news_part {padding-left: 0;}
.news_part .title_box {margin-left: 0;padding: 15px 0 50px;width: 100%;}
.news_part .title_box h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    margin-bottom: 5px;}
.news_part .title_box span {font-weight: bold;letter-spacing: 2px;}
.news_list ul li:hover {
    box-shadow: unset;
    background: #f4f4f4;}
.animated-arrow {
    background: #e06666;
    border-radius: 30px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;}

/*促銷方案*/
.other_promotion.clearfix{
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;}
.other_promotion li {
    width: 33.333%;
    margin: 20px 0;} 

@media screen and (max-width: 768px) {
.other_promotion li {width: 100%;padding: 0 50px;} 
}

@media screen and (max-width: 400px) {
.other_promotion li {padding: 0 20px;} 
}

/***購物車***************************************************************************/
.product_page .main_part , .product_info_page .main_part{    width: 100%;    max-width: 1400px;}
.products-list.clearfix {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}
@media screen and (max-width: 1400px) {.product_page .main_part, .product_info_page .main_part {    max-width: 1200px;}}

.sidebarBtn {    display: none !important;}
.accordion-panel {    display: block !important;}
.accordion-thumb {    display: none;}
.accordion .accordion-item:nth-child(2) {    display: none ;}
.accordion-item {    pointer-events: none;}


/* 產品的看更多按鈕設定 */
.products-list .more {    border: 1px solid #616161 !important;    color: #616161;    display: none !important;}
.products-list a:hover .more {    background: #616161;    border-color: #616161;}

/*外層選單*/
.product-layer-two {text-align: center;}
.product-layer-two li ul {display: none;}
.product-layer-two li:hover > a { background: #616161;    color: #fff;}
.product-layer-two li.active > a {background: #616161;    color: #fff;	font-weight: normal;}
.product-layer-two li a {border: 1px solid #616161;    color: #616161;}

/*外層圖片*/
.products-list .item { width: 33.333%;margin: 10px 0;}
.products-list .item a { max-width: 100%;}
.products-list .pic {    
    padding-bottom: 75%;
    height: 0;
    border-radius: 20px;
    overflow: hidden;
    filter: drop-shadow(2px 2px 10px #e7e7e7);}
.products-list .pic img {
    max-width: 100%;
    min-width: 100%;
    transform: translateY(-10%);
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
    max-width: 100%;
    display: inline-block;}
.products-list .name {font-size: 18px;margin-top: 20px;height: 25px;text-align: center;}
.products-list .item:hover .name {color: #e06666;font-weight: 600;transition: 0.4s;}
.products-list .item:hover img { filter: brightness(0.6);transition: 0.3s;}
.products-list .item img { transition: 0.2s;border-radius: 20px;}
.products-list .price b {display: none;}

@media screen and (max-width: 1024px) {
.products-list .item {width: 50%;}
}

@media screen and (max-width: 768px) {
.product_page .show_content {padding: 15px 0;}
.products-list .item {width: 100%;margin-bottom: 30px;}
}

/* 內頁 */
.product_main{display: block;margin: auto;width: 100%; padding: 30px 0;}
.product_pic {display: flex;width: 100%;max-width: 1000px;margin: auto;padding-left: 0px;flex-direction: column;}
.product_pic .bx-wrapper{display: block;padding: 0 0 0 5px;margin: 0;}
.product_pic .bx-wrapper .bx-viewport {
    border: unset;
    left: 0;
    background: unset;}
.product_pic #bx-pager {
    display: flex;
    align-content: space-between;
    justify-content: flex-start;
    margin-left: 0;
    position: relative;
    padding: 0;
    width: 100%;}
.product_pic #bx-pager a {
    width: unset;
    height: unset;
    border: unset;}
.product_pic #bx-pager h6 {display: none;}

/*編輯器圖片自動100%*/
.accordion-panel img {
    width: 100%;
    display: block;
    margin: 20px auto;}

/*商品資訊*/
.product_main .prod{width: 100%;margin: 0 auto;}
.product_main .prod .prod-item {line-height: 300%;}

/*商品Q&A*/
.half_box {width: 100%; padding-right: 0;float: none;}
.half_box li, .half_box li span {letter-spacing: 1px;}
.half_box li.btn_blankTop {margin-top: 35px;}
.breakF {padding: 10px;}
.lastPage { background:#343a40;margin: 0 auto 40px;}
.nextaction { background-color: #e06666;}
.lastaction { color:#fff; background-color: #343a40;}

/*相關推薦*/
.related_list {display: flex;justify-content: center;}
.prod_related {
    border-top: 1px solid #999;
    background: unset;
    padding: 50px 15px;}
.prod_related h6 {margin: 0 auto 50px;}
.prod_related h6 span:before {color: #343a40;}

@media screen and (max-width: 768px) {
/*購物車內頁*/
.product_pic {    display: block;}
.product_pic .bx-wrapper{    padding:0;}
.bx-wrapper .bx-viewport{    left:0;    -webkit-box-shadow: none;    box-shadow: none;}
.product_pic #bx-pager {    width: 100%;    flex-direction: row;    padding: 0 5px;}
.product_pic #bx-pager a {    margin: 0;}
.product_main .prod { width: 100%;}
.product_main .prod .prod-item { line-height: 200%;}
}


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

/*文章設定*/
/*(新)文章分類*/
/*文章管理*/
.blog_page .main_part{max-width: 1400px;}
h5.blog_le_t {
    font-size: 25px;
    font-weight: bold;
    color: #000;}
.blog_le .accordion {
    border-radius: 10px;
    border: unset;
    background: #616161;}
.accordion li .link {padding: 15px 0px;text-align: center;font-weight: 500;}
.accordion li .link a {color: #fff;letter-spacing: 1px;font-weight: unset;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category { background: #e06666 !important;}
/*大分類*/
.blog_subbox{display: flex;flex-wrap: wrap;}
.subbox_item{
    width: 33%;
    padding: 0 10px;
    margin: 20px 0px;}
.subbox_item a {    overflow: hidden;}
.subbox_item a:before {
    transform: translate(-50%,0%);
    left: 50%;
    right: 0;
    bottom: -17%;
    letter-spacing: 2px;
    opacity: 0;
    display: block;
    color: #fff;
    background: #616161;
    border-radius: 15px 15px 0 0;
    width: 100%;
    padding: 12px 0;
    text-align: center;}
.subbox_item a:hover:before{bottom: 0%;}
.subbox_item a:after {display: none;}
.blog_list_le{
    width: 100%;
    padding: 0;
    border-radius: 5px;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
    position: relative;}
.blog_list_le img {
    position: absolute;
    transform: translate(-50% , -50%);
    min-height: 100%;
    object-fit: cover;
    top: 50%;
    left: 50%;}
.subbox_item a:hover .blog_list_le img {transform: translate(-50% , -50%) scale(1.1); transition: 0.5s ease-in-out;}
.blog_list_ri {
    width: 100%;
    background: #ffffff00;
    padding: 10px 15px;
    border-bottom: 1px solid #616161;}
.blog_list_ri h5{font-size: 18px;font-weight: 500 !important;color: #000000 !important;}
.blog_list_ri em {color: #000000 !important;}
.blog_list_ri p{line-height: 160%;font-size: 13px;}
.blog_page h4.blog_category_title, .blog_in_page h4.blog_category_title {color:#616161;font-weight: normal;border-bottom: 1px #ccc solid;}
/*文章內頁按鈕*/
.blog_back a {padding: 15px; width: 33%;}
.blog_back a.article_btn_back {background: #ffffff; border: 1px solid #616161; color: #616161;}
.blog_back a.article_btn_back:hover { background: #616161; border: 1px solid #616161; color: #ffffff;}
.blog_back a.article_btn_prev, .blog_back a.article_btn_next  {background: #616161;}
.blog_back a.article_btn_prev:hover, .blog_back a.article_btn_next:hover  {background: #cccccc;}

@media screen and (max-width: 1024px){
.subbox_item {width: 50%;}
.blog_list_le img {min-width: 100%;}
}

@media screen and (max-width: 768px){
.subbox_item {width: 100%;border-bottom: unset;margin: 20px 0px 30px; padding: 0 5px;}
h5.blog_le_t, .blog_le .accordion {
    display: block;
    text-align: center;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*相簿*/
.album_page .main_part { max-width:1400px;}
.album_class_page .main_part { max-width:1400px;}
.album_info_page .main_part { max-width:1400px;}

ul.show-list.clearfix {
    display: flex;
    flex-wrap: wrap;}
.show-list .item {
    width: 50%;
    margin: 0 0 30px 0;
    padding: 0 10px;
    transition: all .4s 100ms cubic-bezier(.42,0,.58,1);
    filter: drop-shadow(2px 2px 10px #e7e7e7);}
.overlay { display: none;}
.show-list .show_pic {border-radius: 5px;padding-bottom: 75%;}

.show-list .item a {
    display: flex;
    align-items: center;
    justify-content: center;}
.show-list .item .show_name {
    font-size: 18px;
    display: block;
    position: absolute;
    margin-top: 0;
    width: 45%;
    text-align: center;
    transform: translate(0%, -50%);
    top: 90%;
    left: 0;
    opacity: 1;
    font-weight: 500;
    color: #ffffff;
    background: #616161;
    padding: 20px 0px;
    z-index: 2;
    line-height: 100%;
    height: unset;}

.show-list .item:hover .show_name {
    background: #000000;
    transition: all .4s 100ms cubic-bezier(.42,0,.58,1);
    color: #ffffff;}

/*相簿次分類*/
.subalbum-menu {margin: 0; padding: 0;}
.subalbum-menu h2 {display: none;}

/*更多作品*/
.other_subalbum {
    display: flex;
    flex-wrap: wrap;}
.other_subalbum li {
    background: unset;
    width: 33.333%;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    border-radius: 5px;}
.other_subalbum li a {border-radius: 5px;}
.other_subalbum li a img {
    transform: scale(1);
    transition: all .2s 100ms cubic-bezier(.42,0,.58,1);}
.other_subalbum li a:hover img {
    transform: scale(1.1);
    transition: all .2s 100ms cubic-bezier(.42,0,.58,1);}
.other_subalbum li p {
    padding: 10px 0 0;
    text-align: center;
    letter-spacing: 2px;
    color: #616161;
    font-size: 18px;
    font-weight: bold;}
.album_fixed_title {
    font-size: 18px;
    letter-spacing: 1px;
    color: #616161;
    padding-right: 0px;
    background: unset;}
.other_album_choice li {
    background: #e06666;
    border-radius: 20px;
    padding: 9px 20px 12px;}

/*相簿內頁*/
ul.pic-list.clearfix {
    display: flex;
    flex-wrap: wrap;}
.clearfix:before, .clearfix:after {display: none;}
.pic-list .item {
    margin: 5px 0%;
    padding: 0 5px;
    width: 33.333%;
    filter: drop-shadow(2px 2px 10px #e7e7e7);}
.pic-list .show_pic { border-radius: 6px;}
.pic-list .show_pic img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    position: absolute;
    transform: translate(-50%,-50%) scale(1);
    transition: all .2s 100ms cubic-bezier(.42,0,.58,1);
    top: 50%;
    overflow: hidden;}
.pic-list .item:hover .show_pic img {
    transform: translate(-50%,-50%) scale(1.1);
    transition: all .2s 100ms cubic-bezier(.42,0,.58,1);}

/*相簿最內頁*/
.other_subalbum li a {
    display: block;
    overflow: hidden;}

.other_album:before {top: 50px;}

@media screen and (max-width: 1024px) {
.other_subalbum li { width: 50%;}
}

@media screen and (max-width: 768px) {
.album_page .main_part {padding: 0px 10px 10px;}
.album_info_page .main_part { padding: 0px 10px 10px;}
.album_class_page .main_part {padding: 0px 10px 10px;}
.show-list .item {width: 100%;transition: all .4s 100ms cubic-bezier(.42,0,.58,1);}
.pic-list .item {width: 50%;transition: all .4s 100ms cubic-bezier(.42,0,.58,1);}
.overlay {opacity: 1;}
.show-list .item:hover .overlay {opacity: 0;}
.show-list .item .show_name {opacity: 1;}
.show-list .item:hover .show_name {opacity: 0;}
}

@media screen and (max-width:500px) {
.other_subalbum li {width: 100%; margin: 0 0 20px;}
.pic-list .item {width:100%;}
.show-list .item .show_name {
    width: 50%;
    font-size: 16px;
    padding: 15px 0px;
    top: 80%;}
}

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


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

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