/* 已放到footer */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');




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


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


/*滾動條全域設定---------- */

/*寬度*/
::-webkit-scrollbar {
    width: 6px;
}

/*軌道顏色*/
::-webkit-scrollbar-track{
    background-color: #251302;
    border-radius: 3px;
}

/*滑塊*/
::-webkit-scrollbar-thumb {
    background-color: #a57932;
    border-radius: 3px;
}


/* 開場動畫 */

.bannerindex {
    position: relative;}

.pageIndex  #page{position: relative;}


.pageIndex #page::after {
    content: "";
    display: block;
    background-image: url(https://pic03.eapple.com.tw/sleepmore/logo_loading.png);
    background-size: cover;
    width: 850px;
    height: 850px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000000000000000000001;
    pointer-events: none;
    animation: banner-logo 2.8s forwards;
}
.pageIndex #page::before {
    content: "";
    display: block;
    background-image: url(https://pic03.eapple.com.tw/sleepmore/logo_bg.jpg);
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1000000000000000000000;
    animation: banner-bg 2.6s forwards;

}

@keyframes banner-logo {
    0% {
        opacity: 0;
        filter: blur(0);
    }

    25% {
        opacity: 1;
        filter: blur(0);
    }

    50% {
        filter: blur(0);
        opacity: 1;
    }

    80% {
        filter: blur(0);
        opacity: 0.8;
    }

    100% {
        filter: blur(10);
        opacity: 0;

    }
}

@keyframes banner-bg {
    0% {}

    50% {}

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 768px) {
    .pageIndex #page::after {
        width: 300px;
        height: 300px;}}








/* 內頁製作時刪掉 */
body.pageIndex #content_main {
    min-height: auto !important;
}


* {
    font-family: 'Montserrat', 'Lato', 'Noto Sans JP', 'Noto Sans TC';
}







::placeholder{color: transparent;}
body.pageIndex .clearfix:before,
body.pageIndex .clearfix:after {
    display: none;
}

.main_part {
    max-width: 1600px;
    width: 95%;
}

body.promotions_page .main_part {
    max-width: 1200px;
}

div#page {
    /* background: #f9f8f7; */
    /* background: #989d8f7a; */
    background: #f9f8f7;
}

body.pageIndex div#page {
    background: #f9f8f7;
}


body.contact_page div#page {
    /* background: #989d8f7a; */
}

body.other_select_page ul.other_promotion.clearfix,
body.other_select_page .page {
    display: none;
}

#content_main {
    background: transparent;
}


/* 錨點滾動 */
html {
    scroll-behavior: smooth;
}

/* 全域設定 */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(102, 102, 102, 0.6);
}

::-webkit-scrollbar-thumb {
    background-color: #403b28;
}

::selection {
    color: #ffebcd;
    background: #13345D;
}

/* 固定背景========== */
.animated15 {
    animation: none;
}

/* ios適用 */
body.pageIndex #content_main,
body.services_page #content_main,
body.case_page #content_main,
#content_main {
    min-height: auto;
}


/* 編輯頁做好後刪掉_end */
#page {
    position: relative;
    /* overflow: hidden; */
    /* contain: paint; */
}



body.contact_page #page:before {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}


@media screen and (max-width: 768px) {
    /* body.contact_page #page:before{
        background-image: url(https://pic03.eapple.com.tw/haos/con_bg.jpg);} */
}

@media screen and (min-width: 769px) {
    /* body.contact_page #page:before{
        background-image: url(https://pic03.eapple.com.tw/haos/con_bg.jpg);} */
}


/* 每頁裝飾======== */
body.other_select_page .promotion_title {
    display: none;
}



.main_part {
    position: relative;
}

body.blog_page .main_part,
body.product_page .main_part,
body.product_info_page .main_part,
body.album_page .main_part,
body.album_class_page .main_part,
body.album_info_page .main_part {
    overflow: hidden;
    z-index: 0;
    padding-top: 0;
}


body.product_info_page .main_part:after {
    opacity: 0.2;
}


/* 客戶編輯器 */
ul.prod li .prod-panel img {
    max-width: 100%;
}

/* 客戶編輯器分享文章*/
body.share_page .edit * {
}

body.share_page .edit p {
    font-size: 17px;
    line-height: 2;
    color: #AC844C;
    font-weight: 400;
}

body.share_page .edit a {
    color: #a78a6b;
    font-size: 17px;
    border-bottom: 1px solid #8A80303d;
    font-weight: 400;

}

body.share_page .edit h3 {
    background: #78856d82;
    border-radius: 100px;
    text-align: left;
    color: #fff;
    padding: 5px 5%;
    font-size: 16px;
    letter-spacing: 2px;
}

body.share_page .edit h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    padding-left: 20px;
    margin: 0 0 20px 0px;
    border-left: 1px solid #8A80303d;
    color: #403b28;
}

body.share_page .edit h6 {
    color: #a78a6b;
    font-size: 18px;
    font-weight: 600;
}


body.share_page .edit>li {
    color: #AC844C;
    line-height: 1.8;
    margin-left: 17px;
}


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

    body.share_page .edit p,
    body.share_page .edit a,
    body.share_page .edit>li,
    body.share_page .edit h6 {
        font-size: 16px;
    }

    body.share_page .edit h5 {
        font-size: 18px;
    }

}



/* 大圖頁碼隱藏 */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    display: none;}


/* 客戶編輯器文章管理 */
body.blog_in_page .blog_box_edit * {
}

body.blog_in_page .blog_box_edit p {
    font-size: 17px;
    line-height: 2;
    color: #AC844C;
    font-weight: 400;
}

body.blog_in_page .blog_box_edit a {
    color: #a78a6b;
    font-size: 17px;
    border-bottom: 1px solid #8A80303d;
    font-weight: 400;

}

body.blog_in_page .blog_box_edit h3 {
    background: #AC844C;
    border-radius: 100px;
    text-align: left;
    color: #fff;
    padding: 5px 5%;
    font-size: 16px;
    letter-spacing: 2px;
}

body.blog_in_page .blog_box_edit h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    padding-left: 20px;
    margin: 0 0 20px 0px;
    border-left: 1px solid #8A80303d;
    color: #403b28;
}

body.blog_in_page .blog_box_edit h6 {
    color: #a78a6b;
    font-size: 18px;
    font-weight: 400;
}


body.blog_in_page .blog_box_edit>li {
    color: #AC844C;
    line-height: 1.8;
    margin-left: 17px;
}

.lastPage {background:  #AC844C;}


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

    body.blog_in_page .blog_box_edit p,
    body.blog_in_page .blog_box_edit a,
    body.blog_in_page .blog_box_edit>li,
    body.blog_in_page .blog_box_edit h6 {
        font-size: 16px;
    }

    body.blog_in_page .blog_box_edit h5 {
        font-size: 18px;
    }

}

/* 客戶編輯器購物車 */
body.product_info_page .prod-panel * {
}

body.product_info_page h3.prod-thumb {
    display: none;
}

body.product_info_page .prod-panel p {
    font-size: 17px;
    line-height: 2;
    color: #AC844C;
    font-weight: 400;
}

body.product_info_page .prod-panel h3 {
    background: #78856d82;
    border-radius: 100px;
    text-align: left;
    color: #fff;
    padding: 5px 5%;
    font-size: 16px;
    letter-spacing: 2px;
}

body.product_info_page .prod-panel h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    padding-left: 20px;
    margin: 0 0 20px 0px;
    border-left: 1px solid #8A80303d;
    color: #403b28;
}


.pic-list .item h6 {
    color: #a78a6b;
    font-size: 18px;
    font-weight: 400;
}


body.product_info_page .prod-panel h6 {
    color: #a78a6b;
    font-size: 18px;
    font-weight: 400;
}

body.product_info_page .prod-panel a {
    color: #a78a6b;
    font-size: 17px;
    border-bottom: 1px solid #8A80303d;
}


body.product_info_page .prod-panel>li {
    color: #AC844C;
    line-height: 1.8;
    margin-left: 17px;
}

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

    body.product_info_page .prod-panel p,
    body.product_info_page .prod-panel a,
    body.product_info_page .prod-panel>li,
    body.product_info_page .prod-panel h6 {
        font-size: 16px;
    }

    body.product_info_page .prod-panel h5 {
        font-size: 18px;
    }

}

/* 客戶編輯器_促銷方案 */
body.promotions_page .edit * {
}

body.promotions_page .edit h4:not(:nth-child(1)) {
    margin-top: 5%;
}

body.promotions_page .edit p {
    font-size: 17px;
    line-height: 2;
    color: #AC844C;
    font-weight: 400;
}

body.promotions_page .edit h3 {
    background: #78856d82;
    border-radius: 100px;
    text-align: left;
    color: #fff;
    padding: 5px 5%;
    font-size: 16px;
    letter-spacing: 2px;
}

body.promotions_page .edit h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    padding-left: 20px;
    margin: 0 0 20px 0px;
    border-left: 1px solid #8A80303d;
    color: #403b28;
}


body.promotions_page .edit h6 {
    color: #a78a6b;
    font-size: 18px;
    font-weight: 400;
}

body.promotions_page .edit a {
    color: #a78a6b;
    font-size: 17px;
    border-bottom: 1px solid #8A80303d;
}

body.promotions_page .edit>li {
    color: #AC844C;
    line-height: 1.8;
    margin-left: 17px;
}

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

    body.promotions_page .edit p,
    body.promotions_page .edit a,
    body.promotions_page .edit>li,
    body.promotions_page .edit h6 {
        font-size: 16px;
    }

    body.promotions_page .edit h5 {
        font-size: 18px;
    }

}




/* header======= */



/* end */

.main_header_area {
    background: transparent;
}

.main_header_area .container {
    max-width: 100%;
    width: 96%;
}

.stellarnav {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.stellarnav li a {
    padding: 10px;
}



.stellarnav>ul>li>a b {
    color: #AC844C;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 14px;
}

.stellarnav>ul>li>a b:nth-child(1) {
    font-size: 15px;
    font-weight: 600;
}


.stellarnav>ul>li>a b:nth-child(2) {
    font-size: 13px;
}

.stellarnav li.has-sub>a:after {
    display: none;
}

.stellarnav>ul>li>a,
.stellarnav.desktop>li.has-sub>a {
    color: #AC844C;
    font-size: 16px;
    font-weight: 500;
}

.stellarnav.desktop li.has-sub a {}

.stellarnav>ul>li>a:hover,
.stellarnav.desktop li.has-sub a:hover {
    color: #6d4d2a;
}



/*選單hover*/
.stellarnav>ul>li:hover>a,
.stellarnav>ul>li.active>a,
.stellarnav>ul>li.focus>a {
    color: #6d4d2a;
}

.header_area {
    position: fixed;
    width: 100%;
    transition: all 0.3s ease-in-out;
    background: #ffffff8f;
}

.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: #643c12;
}

.stellarnav>ul>li {
    transition: all 0.6s;
    vertical-align: top;
    position: relative;
}


.stellarnav>ul>li:hover:after {
    width: 100%;
}


/* 選單hover效果 
.stellarnav>ul>li:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    height: 10px;
    width: 0%;
    background: #6c4103;
    opacity: 0.2;
    -moz-transition: width 0.3s;
    -o-transition: width 0.3s;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
}*/

.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/haos/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;
}

/*下拉文字hover*/


.stellarnav ul ul>li>a {
    background: transparent;
    color: #6C4A10;
    letter-spacing: 2px;
}

.stellarnav li li {
    border: none;
    font-weight: 600;
}

.stellarnav ul ul ul:before {
    background: #13141387;
}

.stellarnav ul ul .stellarnav ul ul {
    border: none;
}


.stellarnav ul ul>li:hover>a,
.stellarnav ul ul>li.focus>a {
    color: #747A6A;
}

.submenu-indicator {
    margin-top: 13px;
}

/* 下拉小三角 */
span.submenu-indicator-chevron {
    display: none;
}

/*手機板選單調整*/
.navigation-portrait .nav-toggle {
    color: #333333;
}

.nav-toggle:before {
    background-color: #333333;
    box-shadow: 0 0.5em 0 0 #333333, 0 1em 0 0 #333333;
}


.stellarnav ul {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
    gap: 30px;
}



.stellarnav.mobile>ul>li {
    border-bottom: none;
}

.stellarnav.mobile li.open {
    background: transparent;
}

.stellarnav ul ul>li>a:hover,
.stellarnav ul ul>li>a:focus {
    color: #131413;
}

.stellarnav>ul>li>ul {
    left: 50%;
    transform: translateX(-50%);
    /* overflow: auto; */
    /* max-height: 300px; */
    font-size: 14px;
}

.stellarnav>ul>li>ul li .has-sub a {
    padding-left: 0px;
    padding-right: 0px;
}

.stellarnav.mobile.right .close-menu,
.stellarnav.mobile.left .close-menu {
    background: transparent;
}

.stellarnav.desktop ul>li>ul .has-sub>a {
    padding: 10px;
}

.stellarnav ul ul {
    /* width: 300px; */
}

.stellarnav ul ul ul {
    max-height: 300px;
    overflow: auto;
    width: 150px;
}

/* .stellarnav ul ul>li {
    padding: 4px 10px;
} */


.stellarnav>ul>li:nth-of-type(1){padding-right: 40px;}
.stellarnav>ul>li:nth-of-type(4){padding-right: 30px;}
.stellarnav>ul>li:nth-of-type(5){padding-right: 30px;}

/* 隱藏第三個主選單項目的下拉選單中的第一個 li */
.stellarnav > ul > li:nth-of-type(3) > ul > li:first-child {
    display: none;
}


/* 小漢堡 */
.nav-toggle:before {
    background-color: #7a7a7a;
    ;
    box-shadow: 0 0.5em 0 0 #7a7a7a, 0 1em 0 0 #7a7a7a;
}


.me_tp_features {
    max-width: 400px;
    order: 1;
    top: 25px;
    position: relative;
    display: inline;
    display: flex;
    width: auto;
}

.tp_btn_cart span,
.tp_btn_notice span {
    display: none;
}

.tp_links {
    display: none;
}

.box_search input[type=text] {
    background: transparent;
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-left: none;
    padding-left: 0;
}

.shop_search_btn {
    background: transparent;
}

/* .box_search{width: 100%;} */
.header_area input[type="submit"] {
    display: block;
    background: url(https://pic03.eapple.com.tw/haos/search_icon.svg);
    background-size: contain;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    background-position: center;
    margin: 5px 0;
    right: -25px;
}

.box_search input[type=text]:after {
    content: "SEARCH";
}

.box_search {
    margin-right: 25px;
    order: 0;
}

/* LOGO */
.nav-header {    max-width: 205px;}

/* ================================== */


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

    .stellarnav>ul>li>a,
    .stellarnav.desktop li.has-sub>a {
        padding: 0px 10px;
    }
}

@media screen and (max-width: 1024px) {
    .header_area {    padding: 0px; position: relative;}
    .stellarnav ul {    gap: 10px;}

    .navigation {
        flex-wrap: wrap;
    }

    .stellarnav ul {
        justify-content: center;
        padding-bottom: 0px;
    }

    .stellarnav>ul>li {
        display: inline-block;
        width: initial;
    }

    .stellarnav ul ul {
        left: auto;
        top: auto;
    }

    .stellarnav ul ul:before,
    .stellarnav ul ul .stellarnav ul ul:before {
        height: 100%;
        transform: translateY(0px);
    }

    .main_header_area {
        background: #f9f8f7;
    }

    .me_tp_features {
        top: 0;
        justify-content: center;
    }

    .header_area.sticky{    position: fixed;}
}

@media screen and (max-width: 768px) {
.stellarnav .menu-toggle span.bars span{background: #ada17e;}
.stellarnav .menu-toggle:after{    color: #ada17e;}
.stellarnav a{    color: #ac844c;}
.stellarnav .icon-close:before {    border-bottom: solid 3px #ac844c;}
.stellarnav .icon-close:after{    border-bottom: solid 3px #ac844c;}
.stellarnav a.dd-toggle .icon-plus:before{    border-bottom: solid 3px #c8c5b4;}
.stellarnav a.dd-toggle .icon-plus:after{    border-bottom: solid 3px #c8c5b4;}
    .stellarnav>ul>li>a b:nth-child(1) {
        display: none;
    }

    .stellarnav ul ul>li>a {
        font-size: 14px;
    }

    .stellarnav.mobile>ul>li>a {
        display: flex;
        align-items: flex-end;
    }

    .stellarnav>ul>li>a b:nth-child(1) {
        padding-left: 8px;
    }

    .stellarnav>ul>li>a,
    .stellarnav.desktop li.has-sub>a {
        font-size: 18px;
    }

    .stellarnav>ul>li:hover a:before {
        display: none;
    }

    .main_header_area .container {
        width: 100%;
    }

    .stellarnav.mobile>ul>li {
        display: block;
    }

    .stellarnav ul ul {
        background: transparent;
    }

    .stellarnav ul ul>li>a:hover,
    .stellarnav ul ul>li>a:focus {
        color: #999;
    }

    .stellarnav ul ul {
        border: none;
        right: auto;
        left: 100%;
        top: 0;
    }

    .stellarnav.desktop li.has-sub a {
        padding: 18px;
    }

    .stellarnav.mobile.right>ul,
    .stellarnav.mobile.left>ul {
        border-right: none;
        max-width: 70%;
    }


    .stellarnav.mobile ul {
        background: #fbfbfb;
    }

    .nav-header {
        width: 100%;
    }



    .me_tp_features {
        position: static;
        padding: 0px;
        width: 100%;
        top: 0;
        justify-content: flex-end;
    }

    .navigation {
        flex-direction: column;
        align-items: center;
        height: auto;
        background: #f9f8f7;
    }

    .navigation-portrait .nav-menu>li>a {
        color: #131413;
    }

    .stellarnav ul ul:before,
    .stellarnav ul ul .stellarnav ul ul:before {
        display: none;
    }

    .stellarnav ul ul>li>a {
        color: #aba07d;
    }

    .stellarnav.mobile li a {
        border-bottom: none;
    }


    .stellarnav ul ul>li>a,
    .megamenu-list>li>a {
        width: calc(100% - 100px);
    }

    .stellarnav li li,
    .stellarnav.mobile>ul>li {
        border-bottom: 1px solid #8A80303d;
    }

    .stellarnav ul ul {
        background: #131413;
    }

    .navigation-portrait .stellarnav>ul>li {
        border: none;
    }

    .stellarnav.mobile li li.has-sub a {
        padding: 10px 0px 10px 10px;
    }
    .header_area.sticky{    position: fixed;}

.stellarnav .menu-toggle, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile, .stellarnav .close-menu{ padding: 25px;}

}

/* logo */
.nav-brand h1 {
    display: block;
    background: url(https://pic03.eapple.com.tw/haos/h_logo.svg);
    background-size: contain;
    width: 168px;
    height: 60px;
    background-repeat: no-repeat;
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;

    background-position: center;
    margin: 5px 0;
}

.header_area.sticky {
    transition: all 0.3s ease-in-out;
    background: rgb(248 247 246 / 87%);
}

.header_area.sticky .nav-brand h1 {
    filter: initial;
}


a.nav-brand {
    padding: 2px 0;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
}

.navigation-portrait .nav-brand {
    justify-content: center;
}

.navigation {
    display: flex;
    padding: 0;
    justify-content: center;
}

.nav-header {
    position: relative;
}


@media screen and (max-width: 768px) {
    .nav-header {
        padding: 2% 0;
        z-index: 0;
    }

    .nav-brand h1 {
        filter: initial;
    }

    a.nav-brand {
        justify-content: center;
    }

    .navigation {
        margin-top: 0;
    }
}

@media screen and (max-width: 476px) {
    .nav-brand h1 {
        width: 200px;
        height: 33px;
    }

.stellarnav .menu-toggle, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile, .stellarnav .close-menu{        padding: 15px;}


}

/* 大圖 */
/*預設解除背景輪播*/

.swiper-wrapper {
    position: relative;
}


/* 大圖 */
/*預設解除背景輪播*/
#content_main {
    margin: 0;
}

.bannerindex {
    position: relative;
    top: 0;
    height: calc(100%);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    overflow: hidden;
}

.swiper-banner {
    position: static;
    margin: 0;
    height: auto;
}

.swiper-slide img {
    height: auto;
}

@media screen and (max-width: 1024px) {
    .bannerindex {
        position: relative;
    }

}

@media screen and (max-width: 768px) {
    .bannerindex {
        height: 0;
        padding-bottom: 67%;

        left: 0;
        width: 100%;
    }

    .swiper-slide img,
    .swiper-container-fade .swiper-slide,
    .swiper-container-fade .swiper-slide,
    .swiper-banner,
    .bannerindex {
        height: 100vh;
    }

    .swiper-slide img {
        object-fit: cover;
    }
}




/*內頁BANNER 設定*/
.banner {
    padding: 15vw 0 10vw 0;
    position: relative;
    background: rgba(0,0,0,5%) no-repeat fixed;
    color: var(--second-color);
    background-size: 100%;
  }
  
  .banner h5 {
    font-weight: normal;
    writing-mode: vertical-lr;
    font-size: 18px;
    top: 50%;
    left: 60%;
    transform: translate(115%, 70%);
    width: 30vw;
    max-width: 100%;
    font-family: "El Messiri", "NOTO serif TC";
    letter-spacing: 3px;
    color: #ac844c;
  }
  
  .banner h5:after {
    content: "Articles";
    font-size: 5em;
    display: block;
    font-weight: 300;
    writing-mode: horizontal-tb;
    letter-spacing: 5px;
    padding-left: 12px;
    color: #ac844c; 
  }
  
  /*文章-最新消息*/
  .blog_page  .banner h5:after, .blog_in_page  .banner h5:after {  content: "NEWS";}
  .banner.banblog {background: url(https://pic03.eapple.com.tw/sleepmore/banner.jpg) no-repeat fixed;background-size: 100%;}
  
  /*相簿-成效對比*/
  .album_page  .banner h5:after, .album_info_page  .banner h5:after {  content: "RESULTS";}
  .banner.banE {background: url(https://pic03.eapple.com.tw/sleepmore/banner2.jpg) no-repeat fixed;background-size: 100%;}*/
  /*購物車-建築作品
  .banner.banF {background: url(https://pic03.eapple.com.tw/xuyuan2022/bn.jpg) no-repeat fixed;background-size: 100%;}*/

  /*編輯頁-服務項目*/
  .other_page .banner h5:after {  content: "Service";}

  body.contact_page.bodyDesktop .banner h5:after {  content: "Contact";}
  .banner.banC {background: url(https://pic03.eapple.com.tw/xuyuan2022/bn.jpg) no-repeat fixed;background-size: 100%;}
  
  /*編輯頁-服務流程*/
.banner.banA{display: none;}

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

@media screen and (max-width: 1440px){
    .banner h5 {
        transform: translate(100%, 35%);
        left: 50%;
    }
    }
    
    @media screen and (max-width: 1200px){
    .banner h5 {
        transform: translate(85%, 20%);
    }
    }
    
    @media screen and (max-width: 1024px) {
    .banner {padding: 5vw 0;}
    .banner h5 {font-size: 16px;}
  
    }
    
    @media screen and (max-width: 768px) {
     
    .banner h5:after {
        font-size: 4em;
    }
    
    .banner {
      padding: 5vw 0 0vw 0;
    }
    
    .banner.banblog,
    .banner.banE,
    .banner.banB{
      background-size: 100%;
      object-fit: cover;
    }
    
    .banner h5 { transform: translate(85%, 35%);   letter-spacing: 0px;}
  
    }
  

    @media screen and (max-width: 425px) {
        .banner h5 {
            transform: translate(-105%, 145%);font-size: 10pt;}
        
            .banner.banblog, .banner.banE, .banner.banB {
                background-size: 125%; }
        
        }
        @media screen and (max-width: 320px) {
            .banner h5 {
                transform: translate(-105%, 106%);}
    
    }


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




/*footer*/

.copy a:hover {color: #444;}
.footer_menu a:first-child {display: none;}
.footer {
    /*background: url(https://pic03.eapple.com.tw/sleepmore/footer_bg.jpg);*/
    padding: 80px 0 45px;
}
.footer_info ul {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.footer_info {
    display: flex;
    flex-direction: column;
    padding-right: 0px;
    padding: 0px 25px;
}
.footer_logo img {
    display: none;
    width: 150px;
}
.footer_menu {
    display: flex;
    justify-content: flex-end;
}
.box_link {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    top: 70px;
    padding: 0px 30px;
}
.box_link a {
    font-size: 23px;
    border: none;
}
.footer_info li:nth-child(1) {
    width: 100%;
    padding: 10px 0px;
}
.footer_info li:nth-child(2) {
    width: 100%;
}
.footer_info li p {
    color: #AC844C
}
.footer_menu a {
    border: none;
    margin: 0 5px;
    background: transparent;
    letter-spacing: 1pt;
    transition: .4s;
    color: #AC844C
}
.footer_menu a:hover {
    background: #91775f;
    transition: .4s;
    padding: 5px 10px;
    text-shadow: 2px 2px 3px #0404048c;
}

.box_link a{
    transition: .4s;
}

.box_link a:hover {
    color: #D7C9BC;
    transition: .4s;
}

.copy {
    padding: 30px 0;
    width: 95%;
    margin: 50px auto 0px;
    color: #AC844C
}

a {
    color: #AC844C
}

.footer_info li p {font-weight: 500;}


@media screen and (max-width: 1440px) {
    footer .center { max-width: 95%;}}

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

.footer_info li:nth-child(1) {
    width: 50%;
}
.copy {
    display: flex;
    justify-content: center;
}
}

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

.footer_info ul {
flex-wrap: wrap;
}

.footer_menu {
    justify-content: flex-start;
}

.footer_info li:nth-child(2) {
    padding: 10px 0px;
}

.box_link {
    top: -10px;
}

.copy {
    border: none;
}

.footer_menu {
    flex-wrap: wrap;
}

.footer_info li:nth-child(1) {
    width: 100%;
    padding: 0px 15px;
}

.footer_logo {
    padding: 0px 18px;
}

.footer_menu a {
    margin: 7px 7px;
    padding: 7px 10px;
}

.copy {
    margin-top: -10px;
}    

.footer {
    padding: 80px 0 0px;
}

}

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

.box_link {
    justify-content: flex-start;
    top: 2px;
    left: 2px;
    padding: 0px 0px;
}

.footer_info li+li {
    margin-top: 8px;
}

.footer_menu a {
    margin: 7px 7px;
    border: 1pt solid;
    border-radius: 5px;
}
.copy {
    margin-top: 0px;
}

.footer.with_shopping_mode {
    padding: 80px 0 50px;
}

#bottom_menu li {
    background: #c8c5b3;
}

#bottom_menu li a i {
    color: #ffffff;
}

#bottom_menu li a em {
    color: #FFF;
}

}


/* 浮動按鈕 */
.linksBtn {display: none;}

/* to_top */
#to_top {    background: #e9e3e0;box-shadow: 0px 0px 10px #aba07d;border-radius: 20%;}

.main_part { width: 100%;}

/* 其他頁面按鈕 */
.other_promotion{display: none;}




/* 文章管理================================== */
.blog_box_edit {
    background: #ededed;
    padding: 3em 3em;
    min-height: 100vh;
    box-shadow: 0px 0px 15px rgb(170 170 170 / 30%);

}



body.blog_page .main_part {
    max-width: 90%;
    width: 1600px;
    padding: 40px 20px;
}

h4.blog_category_title {
    font-size: 21px;
    font-weight: 400;
    color: #26495B;
    letter-spacing: 2.5px;
}

body.blog_page h4.blog_category_title {
    display: none;
}

.blog_subbox.clearfix {
    margin: 0 auto;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

/*文章設定*/


/*選單*/

/*左側文章分類*/
.blog_le {
    padding: 0;
}

h5.blog_le_t em {
    display: inline-block;
    font-style: normal;
    font-family: 'NOTO serif TC';
    font-weight: 500;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    height: 80px;
    border-left: 1px solid #BFBFBF;
    padding-top: 0;
    padding-right: 15px;
    margin-top: 0px;
    font-size: 17px;
    color: #777777;
}

h5.blog_le_t span {
    display: none;
}

.blog_le .accordion {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: 0;
    padding: 0 10px;
    overflow: inherit;
}

.blog_le .accordion li {
    float: left;
    position: relative;
    text-align: center;
}

.blog_le {
    width: 100%;
    position: relative;
}

.blog_search input[type=submit] {
    height: 53px;
}

.blog_search input[type=search] {
    height: 53px;
    border-radius: 0;
}

.blog_search {
    width: 280px;
    position: absolute;
    top: 20px;
    right: 0;
}

.blog_ri {
    width: 100%;
    padding: 0;
}

.submenu li {
    width: 100% !important;
}



.blog_le .accordion>li:hover .link a,
.blog_le .accordion>li.on_this_category .link a {
    color: #6C4A10!important;  font-family: 'NOTO serif TC';
}

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

.blog_le .accordion li div a {
    color: #7c7c7c;
    font-weight: 500;
}

.blog_le .accordion li i {
    color: #bdbdbd;
    right: 35px;
}

.submenu {
    background: #ffffff;
    position: absolute;
    list-style: none;
    z-index: 98;
    white-space: nowrap;
    border: 1px solid #ececec;
}

.blog_le .accordion>li:hover .link i,
.blog_le .accordion>li.on_this_category .link i {
    color: #a4a4a4 !important;
}

.submenu a:hover {
    background: #ffffff;
    color: #6C4A10;
    font-weight: bold;
}

.submenu a:before {
    content: "。";
}

.fa-chevron-down:before {
    content: "↓";
    color: transparent;
}

.submenu a {
    position: relative;
    color: #525261;
    padding: 12px 12px 12px 25px;
    transition: all 0.5s ease;
    display: inline-block;
    text-decoration: none;
    float: left;
}

.accordion li .link {
    border-bottom: 0px solid #CCC;
}

body.blog_in_page .blog_box_edit *{  color: #ac844c; border-color: #ac844c;}

/* 文章內頁圖片隱藏 */
.articel_mainPic {display: none;}

@media screen and (max-width: 768px) {
    .blog_le .accordion {
        display: none;
    }

    .blog_search {
        position: relative;
        width: 100%;
        top: 0;
    }

    h4.blog_category_title {
        font-size: 18px;
    }
}

@media screen and (max-width: 476px) {
    h4.blog_category_title {
        font-size: 16px;
    }
}


/* end */
.blog_back a.article_btn_back {
    background: #989D8F;
    transition: all 0.3s ease-in-out;
    background: transparent;
    border-bottom: 1px solid #2e3233;
    color: #2e3233;
}

.blog_back a.article_btn_back:hover {
    filter: brightness(1.2);
    transition: all 0.3s ease-in-out;

}

.blog_back a.article_btn_prev,
.blog_back a.article_btn_next {
    background: #bfc0c0;
    background: transparent;
    border-bottom: 1px solid #2e3233;
    color: #2e3233;


}

.blog_back a.article_btn_prev:hover,
.blog_back a.article_btn_next:hover {
    filter: brightness(1.2);
    transition: all 0.3s ease-in-out;
}




.blog_list_ri {
    width: calc(100%);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 34px 0px 40px;
    position: relative;
    top: -63px;
}

.blog_box {
    width: 100%;
    max-width: 100%;
}

body.blog_page .subbox_item:hover .blog_list_le {
    transition: border-radius 1.2s cubic-bezier(.165, .84, .44, 1), filter .5s cubic-bezier(.165, .84, .44, 1), -webkit-filter .8s cubic-bezier(.165, .84, .44, 1);
}

.subbox_item {
    width: 100%;

    background-color: transparent;
    /* -webkit-box-shadow: 0px 0px 13px 0px rgb(0 0 0 / 7%);
    box-shadow: 0px 0px 13px 0px rgb(0 0 0 / 7%); */
    /* border-radius: 0 10px 10px 0; */
    overflow: hidden;
    margin-bottom: 2%;
    position: relative;
}

.subbox_item a {
	display: flex;
    flex-direction: column;
}

.subbox_item a:after {
    display: none;
}

.subbox_item:hover img {
    transform: translate(-50%, -50%) scale(1.05);
    object-fit: cover;
    width: 100%;
    transition: all 0.4s ease;
    opacity: 0.8;

}

.blog_list_le img {
    display: block;
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: all 5000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transform: translate(-50%, -50%) scale(1);
    width: 100%;
    height: 100%;

}

.blog_list_le {
    display: block;
    position: relative;
    text-align: center;
    overflow: hidden;
    width: 100%;
    padding: 0;
    padding-bottom: 0;
    aspect-ratio: 12/9;
    padding-top: 75%;
    /* padding-top ios12支援同 aspect-ratio: 12/9*/
    height: auto;
    min-height: 300px;
}




.subbox_item a:before {
    display: none;
}

.blog_list_ri em {
    order: 3;
    width: 100%;
    text-align: right;
    color: #747A6A;
}

.blog_list_ri h5 {
    text-align: center;
    padding: 0 20px 15px;
    color: #ac844c;
    background: #e0ded9;
    position: relative;
    top: 0;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* box-shadow: 0 20px 20px #6C4A10; */
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    overflow: initial;
    font-size: 16px;
    display: block;
    font-weight: 400;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    display: block;
    width: 95%;
    min-height: 36px;
    letter-spacing: 2.5px;

}

.subbox_item:hover h5 {
    background: #eae4cb;
    color: #6C4A10;
}


.blog_list_ri h5:before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    border-top: 12px solid transparent;
    border-right: 12px solid #c2c0aa;
    width: 0;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}


.subbox_item:hover h5:before {
    border-right: 12px solid #e6e6e6;
}


.blog_list_ri h5:after {
    content: "";
    position: absolute;
    top: -12px;
    left:-12px;
    width: calc(100% - 0px); 
    height: 12px;
    margin-left: 12px;
    background-color: #e0ded9;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}


.subbox_item:hover h5:after {
    background-color: #eae4cb;
}

.blog_list_ri p {
    border-top: 1px solid transparent;
    margin-top: 10px;
    color: #525261;
    font-size: 13px;
    line-height: 2;
    padding: 20px 0;
    width: 100%;
    -webkit-line-clamp: inherit;
    letter-spacing: 1.8px;

}

.blog_list_ri p:after {
    content: '...';
}



.subbox_item:hover:before {
    width: 100%;
    transition: all .5s;
}

@media screen and (max-width: 1400px) {
    .subbox_item a {
        grid-auto-flow: initial;
    }

    .blog_list_le {
        margin: auto;
    }

    .blog_subbox.clearfix {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media screen and (max-width: 1024px) {
    .blog_le.fadeInLeft.animated15.clearfix {
        position: relative;
        top: auto;
    }

    .blog_list_le {
        width: 100%;
    }

    .blog_list_ri {
        width: 100%;
        padding: 0;
    }

    .blog_list_ri p {
        margin-top: 7px;
        margin-bottom: 19px;
    }

    .blog_list_ri i {
        bottom: -7px;
    }

    .blog_list_le {
        width: 100%;
    }

    .blog_list_ri {
        width: 100%;
        padding: 20px 0px 40px;
        top: -49px;
    }

    .blog_list_ri h5 {
        -webkit-line-clamp: initial;
        min-height: auto;
    }

    .blog_subbox.clearfix {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .blog_list_ri p {
        font-size: 13px;
    }

    .blog_subbox.clearfix {
        gap: 10px;
    }

    .blog_list_ri {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 476px) {
    .blog_box {
        width: 100%;
        padding: 0;
    }

    .blog_box_edit {
        padding: 2em;
        margin-bottom: 40px;
    }

    .blog_subbox.clearfix {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog_box {
        margin-bottom: 80px;
    }

    .blog_back a.article_btn_back,
    .blog_back a.article_btn_prev,
    .blog_back a.article_btn_next {
        font-size: 14px;
    }
}







/* =============== ▼ 相簿管理 ▼ =============== */

/* ＝＝＝ 【【  預設區塊不動 ↓↓↓  】】 ＝＝＝ */

/*相本分類全版面 ( 限制最寬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;}

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

/* ＝＝＝ 【【  版型設定(基本) ↓↓↓  】】 ＝＝＝ */

/* +++ 通用 -------------------- */

/* 副標 (該頁分類/相簿名稱) */
.subalbum-menu h2 {
    font-size: 18px;
    color: #777;
    letter-spacing: .6rem;
}

/* 圖片 */
.show-list .show_pic,
.pic-list .show_pic {
    border-radius: var(--br);
}

.show-list .show_pic img,
.pic-list .show_pic img {
    transform: scale(1);
    filter: saturate(1);
    -webkit-filter: saturate(1);
    transition: ease-out 0.5s;
}

.show-list .item:hover .show_pic img,
.pic-list .item:hover .show_pic img {
    transform: scale(1.05);
    filter: saturate(1.5);
    -webkit-filter: saturate(1.5);
}

/* 觀看更多 */
.other_album_choice li {
    background: #ac844c;
    padding: 5px 20px;
    border-radius: 0;
    font-size: 13px;
}

/* +++ 分類總覽頁 (album_page) -------------------- */

/* 分類名稱 */
.show-list .show_name{
    color: #777;
    letter-spacing: .6rem;
    text-align: center;
}

.show-list .item {
    margin-bottom: 30px;
}

.show-list .item .overlay {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.show-list .item:hover .show_name {
    color: #DDD3C5;
}

.show-list {    grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));}





/* +++ 相簿目錄頁 (album_class_page) -------------------- */

/* 相簿名稱 */
.other_subalbum li a p{
    color: #555;
    letter-spacing: .6rem;
    text-align: center;
}

.other_subalbum li:hover a p {
    color: #DDD3C5;
}

/* +++ 相片頁 (album_info_page) -------------------- */

/* 相簿描述 */
.album_descrip{
    color: #ccc;
    letter-spacing: .15rem;
}

/* 相片描述 */
.pic-list .item h6{
    color: #555;
}


/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {

    /*次分類*/
    .subalbum-menu {
        margin: 0;
    }

    .other_subalbum li a p {
        color: #fdfdfd;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
}


@media screen and (max-width: 425px) { .show_content {padding: 55px 0;}}


@media screen and (max-width: 320px) {
    .show-list {
        grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    }
    .main_part {
        padding: 75px 10px 10px;
    }
    .show_content {
        width: 100%;
        padding: 0px 0;
    }


}

/* ＝＝＝ 【【  客製更動處 ↓↓↓  】】 ＝＝＝ */

/* +++ 布局 -------------------- */

/* +++ 分類總覽頁 (album_page) -------------------- */



/* +++ 相簿目錄頁 (album_class_page) -------------------- */

/* +++ 相片頁 (album_info_page) -------------------- */

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */

/* =============== ▲ 相簿管理 ▲ =============== */