@charset "utf-8";
/*網站全域設定/＝＝＝＝＝*/

/*反白顏色*/
::-moz-selection{  background-color: #594135;  color: #fff;}
::selection{  background-color: #594135;  color: #fff;}
:root {
    --MainColor: #594135;
    --SubColor:#EBEBDF;
    --SubColor02:#594135;
    --logocolor01:#1c1410;
    --SFont:'Noto Serif TC', serif;
    --SFontEN: 'EB Garamond', serif;
    --TitleColorEN:#a87a63;
    --TitleColor:#594135;
    --FontColor:#594135;
    --f60: 60px;
    --f54: 54px;
    --f48: 48px;
    --f42: 42px;
    --f40: 40px;
    --f36: 36px;
    --f32: 32px;
    --f28: 28px;
    --f24: 24px;
    --f22: 22px;
    --f20: 20px;
    --f18: 18px;
    --f17: 17px;
    --f16: 16px;
    --pd80:80px;
}

/*★★★卷軸設定↓↓↓↓↓↓↓↓↓↓↓↓*/
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
    width: 10px; /*右側捲軸寬度*/
    height: 0px; /*下方捲軸高度*/
}

/* 軌道背景底色 */
::-webkit-scrollbar-track {    background: #EBEBDF; }
/* 滑桿顏色 */
::-webkit-scrollbar-thumb {    background: #886B41; }
/* 滑桿滑鼠滑入時的顏色 */
::-webkit-scrollbar-thumb:hover {    background: #4D3920; }

/* 頁面的麵包屑 首頁/頁面名稱/ */
.path { display:none;}
.pageIndex .main_part {    border-top: none;}
#content {    min-height: 80vh;}
body.blog_in_page {
    color: var(--FontColor);
    font-size: var(--f18);
    letter-spacing: 1px;
}

/*頁碼*/
.page strong, .page a:hover {    background: var(--SubColor);}
.page li.activeN {    color: var(--SubColor);}

.main_part {    max-width: 1400px;    padding: var(--pd80) 20px;}

/*Main/＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*Header/＝＝＝＝＝*/
.header_area {
    position: sticky;
    width: 100%;
    transition: all 0.5s;
    border-bottom: 1px solid #efefef;
}

.pageIndex .header_area {
    position: fixed;}


.main_header_area {background: #ffffff;}
.pageIndex .header_area {        opacity: 0;    transition: all 0.5s ease-in-out;}
.header_area.sticky {    background: #fff;}

/*下滑*/
.pageIndex .header_area.sticky {    opacity: 1;  transition: all 0.5s;  }
.header_area.sticky .main_header_area {    background: #ffffffeb;}
.header_area {background: #fff;}
/*選單最大寬度設定*/
.main_header_area .container {    max-width: 95%;}
.navigation {
    display: grid;
    align-items: center;
}

/*隱藏購物車搜尋欄*//*
.box_search{display:none;}
/*隱藏購物車*//*
.me_tp_features a.tp_btn_cart {display: none;}
/*隱藏匯款通知*//*
.me_tp_features a.tp_btn_notice{display: none;}
/*隱藏選單按鈕連結*//*
.tp_links{display: none;}

/*選單漸變效果＝＝*/
/*首頁固定選單 開啟後下方RWD 768對應標籤也需開啟*//*
.pageIndex .header_area{position: fixed;    width: 100%;}

/*Logo/＝＝＝＝＝*/
.nav-brand {    width: 100%;max-width: 250px;transition:all 0.3s;}
.header_area .nav-brand {    transition: all 0.3s;}
.header_area.sticky .nav-brand {    max-width: 220px;}

/*按鈕/＝＝＝＝＝*/
.animated-arrow {
    background: var(--logocolor02);
    overflow: hidden;
}
.animated-arrow:before {
    content: '';
    background: var(--logocolor01);
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    height: 100%;
    position: absolute;
    z-index: 0;
}
.animated-arrow:hover:before {
    transform: translate3d(100%, 0, 0);
}
.animated-arrow b, .animated-arrow .i_blog_b a i.fa-solid.fa-arrow-right {
    z-index: 2;
    position: relative;
}

/*大圖/＝＝＝＝＝*/
/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:relative; 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;}
}

/*op - 左右打開*/
.pageIndex::before {
    content: "";
    pointer-events: none;
    display: block;
    width: 50%;
    height: 100%;
    background: url(https://pic03.eapple.com.tw/jhengpin/banner-03.png) no-repeat;
    background-position: left center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    animation: open_left 2s cubic-bezier(0.73, 0.08, 0.11, 0.99) forwards;
    animation-delay: 2.2s;
}

.pageIndex::after {
    content: "";
    pointer-events: none;
    display: block;
    width: 50%;
    height: 100%;
    background: url(https://pic03.eapple.com.tw/jhengpin/banner-03.png) no-repeat;
    background-position: right center;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    animation: open_right 2s cubic-bezier(0.73, 0.08, 0.11, 0.99) forwards;
    animation-delay: 2.2s;
}

@keyframes open_left {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-150%);
    }
}

@keyframes open_right {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(150%);
    }
}


.pageIndex #page::before {
    content: "";
    pointer-events: none;
    display: block;

    background-image: url(https://pic03.eapple.com.tw/jhengpin/banner-04.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    width: 100%;
    height: 0;
    padding-bottom: 100%;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 100000000;

    opacity: 0;
    animation: logo-fade 3s ease-in-out forwards;
}

@keyframes logo-fade {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.bannerindex .swiper-slide.swiper-slide:before, .bannerindex .swiper-slide.swiper-slide:after {
        content: ""; position: absolute;  z-index: 999; pointer-events: none;
}

/*大圖1*/
.bannerindex .swiper-slide:nth-child(1).swiper-slide:before{
        background: url(https://pic03.eapple.com.tw/jhengpin/banner-05.png);
        background-size: contain;
        background-repeat: no-repeat;
        top: 0;
        left:0;
        width: 100%;
        height:100%;
        background-position: center;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        opacity: 1;
        animation-delay: .5s;
}
.bannerindex .swiper-slide:nth-child(1).swiper-slide-active:before {  
    animation-name:ban_croll;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}  


/*大圖2*/
.bannerindex .swiper-slide:nth-child(2).swiper-slide:before{
        background: url(https://pic03.eapple.com.tw/jhengpin/banner-06.png);
        background-size: contain;
        background-repeat: no-repeat;
        top: 0;
        left:0;
        width: 100%;
        height:100%;
        background-position: center;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        opacity: 0;
}
.bannerindex .swiper-slide:nth-child(2).swiper-slide-active:before {  
    -webkit-animation: slideDownBlurAnimation 1s 0.6s ease-in-out forwards;
    animation: slideDownBlurAnimation 1s 0.6s ease-in-out forwards;

}



@keyframes slideDownBlurAnimation {
    0% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    }
    100% {
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translateY(0);
            transform: translateY(0);
    }
}

/*Banner/＝＝＝＝＝*/

.banB {display: none;}



/*Page/＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*麵包屑＝＝*/
.path p a:hover {    color: var(--logocolor01);}
/*頁碼＝＝*/
.page {    width: 100%;    margin: 40px auto;    display: flex;    flex-wrap: wrap;    justify-content: center;    align-items: center;}
.page li {    display: flex;    margin: 3px;    width: 30px;    height: 30px;    line-height:30px;    align-items: center;    justify-content: center;}
.page li a {    display: block;    width: inherit;    height: inherit;    line-height: inherit;    padding: 0;    transition:all 0.3s;}
.page strong, .page a:hover {    background: var(--logocolor01);border: 1px solid var(--logocolor01);}


/*RWD*/
@media screen and (max-width: 1024px) {
:root {
    --f60: 54px;
    --f54: 48px;
    --f48: 40px;
    --f42: 38px;
    --f40: 36px;
    --f36: 32px;
    --f32: 28px;
    --f28: 24px;
    --f24: 22px;
    --f22: 20px;
    --pd80:60px;
}

/*Header/＝＝＝＝＝*/
.pageIndex .header_area {    opacity: 1;}
.header_area {position: sticky;background: #fff;}
.navigation {
    display: flex;
    align-items: center;
}


/*Logo*/
.header_area .nav-brand {        max-width: 180px;        margin-top: 8px;}
.header_area.sticky .nav-brand {    max-width: 180px;}
}

@media screen and (max-width: 768px) {
.pageIndex .header_area {
    position: sticky;
}
}

/*第一層*/
.stellarnav ul {    text-align: right;}
.stellarnav > ul > li > a {
    transition: all 0.3s;
    color: var(--FontColor);
    letter-spacing: 0.03rem;
    padding: 0 15px;
    margin: 0;
    font-weight: bold;
}
.stellarnav > ul > li:hover > a{color: var(--logocolor01);}
.stellarnav li.has-sub > a:after {
    position: absolute;
    top: 40%;
    right: 5px;
    height: 7px;
    width: 7px;
    display: block;
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: transparent #8d8d8d #8d8d8d transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}/*下拉線條箭頭*/

/*第二層*/
.stellarnav li li {    border: none;}
.stellarnav li li > a, .stellarnav li li.has-sub > a {
    padding: 10px 7px;
    transition: all 0.3s;
}
.stellarnav li li:hover > a, .stellarnav li li.has-sub:hover > a {
    color: #fff;
    padding-left: 10px;
    background: var(--logocolor01);
}

/*SubMenu*/
.box_search {    width: 175px;}
.box_search input[type=text] {
    width: 131px;
    border-radius: 0;
}
.shop_search_btn {
    background: var(--logocolor01);
    border-radius: 0;
}

.tp_links a{transition:all 0.3s;}
.tp_links a:hover {    color: var(--logocolor01);}
.tp_links {    display: none;}

.me_tp_features {    order: 1;}

/*bottom menu*/
#bottom_menu li a em,#bottom_menu li a i  {color: #594135;}
#bottom_menu li:nth-child(2) {
  display: none;
}


/*rwd*/

@media screen and (max-width: 1024px) {
.stellarnav ul {
    text-align: center;
}
}

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

/*側邊選單*/

    .stellarnav .menu-toggle:after {margin-top: 8px;font-weight: 400;}
    .stellarnav .menu-toggle span.bars span {height: 1px;}
	.stellarnav.mobile > ul > li > a.dd-toggle{top: 15px;}
	.stellarnav.mobile > ul > li.open > a.dd-toggle{top: 5px;}
	.stellarnav a.dd-toggle .icon-plus:before,.stellarnav a.dd-toggle .icon-plus:after {border-bottom: solid 1px #777;}
	.stellarnav.mobile .close-menu{position: relative;color: transparent;}
	.stellarnav.mobile .close-menu > *{display: none;}
	.stellarnav.mobile .close-menu:before{content: "×";position: absolute;right: 10px;top: 10px;color: #000;
        font-size: 12px;}
    .stellarnav.mobile > ul > li > a b{vertical-align: middle;}
	.stellarnav .menu-toggle span.bars span {height: 2px;width: 28px;background: #594135;}
	.stellarnav .menu-toggle:after {font-weight: 600;color: #fff;}
	.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu {background: transparent;}
	.stellarnav.mobile.left .close-menu {background: #594135;width: 32px;height: 32px;margin: 10px 10px 0 auto;
		border-radius: 10px;display: block;}
    .stellarnav.mobile .close-menu:before {font-size: 20px;top: 0;right: 0;display: block;width: 100%;height: 100%;
    	line-height: 30px;text-align: center;color: #fff;padding-left: 1px;}
    .stellarnav.mobile {left: 8px;top: 8px;}
    .stellarnav.mobile li.open {background: #f8f8f8;padding: 0;}
    .stellarnav.mobile li.open li.open {background: #f3f3f3;padding: 0;}
    .stellarnav.mobile li li.has-sub a {padding: 10px 15px;}
    .stellarnav.mobile li.has-sub li a {text-align: left;padding: 8px 15px;color: #594135;}
    .stellarnav.mobile li.has-sub li a.dd-toggle{right: 5px;}
    .stellarnav.mobile li.has-sub li a.dd-toggle:hover {padding-left: 0;text-align: center;background: transparent;}
    .stellarnav.mobile > ul > li {border-bottom: 1px #f6f5f5 solid;}
    .stellarnav.mobile > ul > li > a {color: #594135;}
    .stellarnav.mobile > ul > li > a.dd-toggle {top: 5px;}
    .stellarnav a.dd-toggle .icon-plus:before, .stellarnav a.dd-toggle .icon-plus:after{width: 10px;}
    .stellarnav.mobile > ul > li > ul > li > ul ~ a.dd-toggle .icon-plus {margin: 0 auto;display: block;}
    .stellarnav li.has-sub li a:hover {background: #fff;color: #594135;}
}




@media screen and (max-width: 600px) {
:root {
    --f60: 32px;
    --f54: 32px;
    --f48: 28px;
    --f42: 26px;
    --f40: 24px;
    --f36: 22px;
    --f32: 20px;
    --f28: 18px;
    --f24: 18px;
    --f22: 18px;
    --f20: 17px;
    --f18: 16px;
    --f17: 15px;
    --f16: 15px;
    --pd80:40px;
}

/*大圖logo/＝＝＝＝＝*/
    .pageIndex #page::before {
        width: 200%;
        height: 200%;
        padding-bottom: 0;
}
}

/* -------------------- FOOTER -------------------- */

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

    /* 開啟手機板下方按鈕所需設定 */

    .footer.with_shopping_mode {
        padding: 30px 0 70px;
    }

    #to_top {
        bottom: 60px;
    }
}


/*--------------------版權塊 -------------------- */

.copy {
    border-top: none;
    margin-top: 30px;
}

.copy,
.copy a {
    font-size: 10px;
    color: var(--bg-color);
}

.copy a:hover {
    color: var(--bg-color);
    text-decoration: underline var(--bg-color) 1px solid;
    text-underline-offset: 4px;
}

/*YKQK版權塊 -------------------- */

.footer {
    background: #fff;
    padding: 40px 0 20px;
    box-shadow: 0px -5px 20px rgba(51, 51, 51, .05);
}

.footer .center {
    padding: 0 3%;
    max-width: 1200px;
}

.footer_logo {
    width: 40%;
    max-width: 250px;
    margin: 0 auto;
}

.footer_info {
    grid-template-columns: 1fr;
    padding: 0;
    grid-gap: 20px;
}

.footer_info li {
    padding: 0;
}

/* 聯絡資訊 */
.footer_info li:nth-child(1) {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
    gap: 0px 20px;
    text-align: center;
}

.footer_info li p,
.footer_info li p a{
    color: var(--FontColor);
}

.footer_info li p.line{display: none;}/*隱藏line*/

/* 導覽按鈕 */
.footer_info li:nth-child(2) {
    margin-top: 20px;
    text-align: center;
}

.footer_menu a {
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--FontColor);
    transition: var(--tr);
}

.footer_menu a:hover {
    background: transparent;
    color: var(--SubColor);
    transition: var(--tr);
}

/* 隱藏回首頁 */
.footer_menu a:first-of-type {
    display: none;
}


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

@media screen and (max-width: 1300px) {
    .footer_info {
        grid-template-columns: 1fr;
        padding-right: 0;
        text-align: center;
    }

    .footer_logo {
        /* width: 120px; */
        margin: 0 auto;
    }

    .box_link {
        position: relative;
        max-width: inherit;
        flex-direction: row;
        right: auto;
        justify-content: center;
    }

    .box_link a {
        margin: 8px;
    }

}


/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {
    .footer_logo {
        width: 60%;
    }
}



/*相簿管理******************************************** */
.album_page .main_part {
    max-width: 1600px;
    padding: 100px 20px 50px;
}

/*相簿主分類*/
.subalbum-menu h2 {font-size: 18px;color: #a87a63;letter-spacing: .2rem;}
.show-list .show_pic {aspect-ratio: 4 / 3;}
.show-list .show_pic img {transform: scale(1);transition: all .5s;}
.show-list .show_name{color: #a87a63;letter-spacing: .2rem;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: #594135;}

.show-list .item .show_pic {
    overflow: hidden;
    border-radius: 20px;
    transition: 0.5s;
    position: relative; /* 讓 <p> 可以絕對定位在裡面 */
}


.show-list .item .show_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
    transform: scale(1);
    transition: transform 0.5s, border-radius 0.5s;
}

.show-list .item:hover .show_pic img {
    transform: scale(1.2);  /* hover 放大 */
    border-radius: 20px;
}

/* 文字置中並寬度跟容器同步 */
.other_subalbum li a p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;
    width: 100%;           /* 寬度跟容器一樣 */
    box-sizing: border-box; /* 包含 padding */
    transition: all 0.5s;
    text-align: center;  
}

.other_subalbum li:hover a p {
    color: #fff;
    padding: 10px;
    background: #594135;
    font-size: 20px;
}

.other_album_choice li {background: #594135;padding: 5px 20px;border-radius: 0;font-size: 13px;}
.album_fixed_title {    color: #594135;}



/*相簿次分類*/
.pic-list .item h6 {
    display: flex;
    justify-content: center;}

/*相簿特效*/
.show_content {opacity: 0;              /* 初始透明 */
  transform: translateY(10px); /* 從下方浮現 */
  animation: fadeIn 1s ease forwards; /* forwards 保持最終狀態 */
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);}
}




/*內頁BANNER 設定*/
.banner {
    position: relative;
    background: #f5f2f0;
    width: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: 50%;
    aspect-ratio: 100 / 25;
    overflow: hidden;
}
.banner::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    animation: zoomOut 5s;
    background-size: cover;
    background-position: center;
    background-image: url(https://pic03.eapple.com.tw/jhengpin/banner-ner.png);
}

@keyframes zoomOut {
 0% { transform: scale(1.1); }
 100% { transform: scale(1);}
}

.banner h5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    align-items: flex-start !important;
    padding: 0px 20px;
    margin: auto;
    max-width: 1300px;
    color: #FFF;
    font-family: "Noto Serif CJK TC", serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 5px;
}

.banner h5:after {
    content: '設計 × 製作 × 施工一條龍';
    display: block;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 2px;
    margin-top: 15px;
    margin-bottom: 0px;
    padding-bottom: 20px;
    position: relative;  
    animation: SlideUp 1s 0.1s ease-in-out forwards;
    opacity: 0; 
}
@keyframes SlideUp {
    0% {    opacity: 0;   -webkit-transform: translateY(30px);   transform: translateY(30px);    }
    100% {  opacity: 1;   -webkit-transform: translateY(0);    transform: translateY(0);    }
}



@media screen and (max-width: 768px) {
.banner h5{    font-size: 22px;}
.banner h5:after{font-size: 14px;}
.banner {min-height: 70vw;}

}



/*聯絡我們*/
.contact_form {    grid-gap: 15px;}
.contact_le_map a,.contact_form li.last cite {    background: #594135;}
.info_TEL:before, .info_TEL2:before, .info_PHONE:before, .info_LINE:before,
.info_FAX:before, .info_TAXID:before, .info_MAIL:before, .info_ADD:before, .info_ADD2:before {
letter-spacing: 2px;
}

.list_before.info li {
    padding-left: 45px;
}