@charset "utf-8";
/*青峰花藝*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');

:root{
    --MainColor:#F8F7F5;
}

body {font-family: 'Noto Sans TC', sans-serif;letter-spacing: 1px;}

/*錨點滾動*/
html { scroll-behavior: smooth; }
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(102, 102, 102, 0.6); }
::-webkit-scrollbar-thumb {background-color: #777;border-radius: 50px;}

/*大圖================================*/
/*預設解除背景輪播*/
#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;}
}

/*側邊按鈕=============================*/
.info_fix_links{display: flex !important;}
.info_fix>span{display: none;}
a.info_fix_default.info_fix_tel{display: none;}
a.info_fix_default.info_fix_mail{display: none;}
.info_fix_links a{background: #999;}

/*header==============================*/
.right_member_in {top: 15%;z-index: 99999;}
.nav-header {width: 100%; text-align: center;}
.main_header_area {background: #FFF; box-shadow: 0px -1px 10px rgb(0 0 0 /10%);}
.submenu-indicator-chevron {display: none;} 
.nav-header {
    top: 0;
    display: block;
    text-align: center;
    position: relative;
    padding: 10px;
}
.nav-menu {
    margin:0;
    padding: 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
    border-top: 1px solid #eee;
}
.align-to-right {float: none;}
.nav-menu > li > a {
    color: #555;
	font-weight:550;
	letter-spacing:2px;
	padding: 15px 20px;
    transition: 0.2s ease-in;}

.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a {color:#777;transition: 0.2s ease-in;}
.nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus {color:#777;font-weight:550;}
.tp_links{display: none!important;}

/*選單*/
.tp_links{display: none;}
.me_tp_features{position: absolute;display: flex;justify-content: flex-start;flex-direction: row-reverse;z-index: 999;}
.stellarnav > ul > li > a b{font-family: 'Marcellus', sans-serif;font-weight: 400;line-height: 45px;}
.shop_search_btn {background: #ddd; COLOR:#000;border-radius: 0px; padding: 4px 10px; }
.box_search input[type=text] {border: solid 1px #ddd;border-radius: 0px;padding: 3px 10px 3px 32px;}
.stellarnav ul{text-align: center;border-top: 1px solid #eee;}
.navigation{padding: 10px 0 0px 0px;display: flex;flex-direction: column;}
.stellarnav li.has-sub > a:after{display: none;}
.stellarnav li.has-sub > a{padding: 0;}

@media screen and (max-width: 1024px) {
    .me_tp_features{position: relative;justify-content: center;}
    .nav-header{padding: 0px;z-index: 0;}
}
@media screen and (max-width: 768px) {
    .me_tp_features{justify-content: center;z-index: 1;}
}
@media screen and (max-width: 350px) {
    .me_tp_features{
        flex-direction: column-reverse;
        align-items: center;
        gap: 5px;
    }
}

/*下拉選單*/
.stellarnav li a{font-size: 15px;color: #444;}
.stellarnav li li:hover{background: #ddd;padding-left: 5px;transition: 0.3s;font-weight: 500;}
.stellarnav ul ul:nth-child(2){display: none;}

/*次分類*/
.stellarnav li.drop-left ul ul{left: 160px;}
.stellarnav li li.has-sub > a:after{border-left: none;border-top:none;border-bottom: none;right:10px;}

/*選單最大寬度--------------*/
.main_header_area .container { max-width: 85%; }

@media screen and (max-width: 768px) {
    .main_header_area .container { max-width: 100%; }
}

/*LOGO================================*/
.nav-brand{width: 95px;top: 3px;position: relative;}

@media screen and (max-width: 768px) {
    .nav-brand{top: -5px;}
}

/*麵包屑==============================*/
.path p, .path p a{display: none;}

/*banner==============================*/
.banner.banB{display: none;}
.banner.banblog{
    background-image: url(https://pic03.eapple.com.tw/gingfeng/banner-02.jpg);
    padding: 14.4%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.banner.banblog h5{display: none;}
.banner.banF{
    background-image: url(https://pic03.eapple.com.tw/gingfeng/banner-01.jpg);
    padding: 14.4%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.banner.banF h5{display: none;}
.banner.banE{
    background:transparent;
    padding: 140px;
    position: relative;
}
.banner.banD{display: none;}
.banner.banE h5{display: none;}

.banner.banE:before{
    content: '庭園造景&維護、植栽綠化、景觀設計、園藝設計、園藝資材、園藝種苗、屋頂花園、假山水池\A綠化工程、各類草皮、木作、石材、草皮修剪、樹木修剪等工程。';
    position: absolute;
    font-size: 20px;
    font-family: 'noto serif TC', sans-serif;
    color:#222;
    text-align: center;
    width: 100%;
    white-space: pre;
    top: 105px;
    right: 0%;
}
.banner.banE:after{
    content:'希望能為您打造一個專屬於您的庭園，有任何的問題可先來電洽詢: 0932-221-834(何先生)\A或加入LINE ID: gdhfy751103由小幫手在營業時間回答您的問題喔。';
    position: absolute;
    font-size: 18px;
    font-family: 'noto sans TC', sans-serif;
    color:#555;
    text-align: center;  
    width: 100%;
    right: 0%;
    white-space: pre;
    top: 180px;
}
@media screen and (max-width: 950px) {
    .banner.banE:before{font-size: 17px; }
    .banner.banE:after{
        font-size: 15px;
        top: 170px;
    }
}
@media screen and (max-width: 768px) {
    .banner.banE:before{
        white-space: break-spaces;
        text-align: left;
        padding: 0 40px;
        content: '庭園造景&維護、植栽綠化、景觀設計、園藝設計、園藝資材、園警種苗、屋貝花園、假山水池、綠化工程、各類草皮、木作、石材、草皮修剪、樹木修剪等工程。';
    }
    .banner.banE:after{
        content: '希望能為您打造一個專屬於您的庭園，有任何的問題可先來電洽詢: 0932-221-834(何先生)或加入LINE ID: gdhfy751103由小幫手在營業時間回答您的問題喔。';
        white-space: break-spaces;
        padding: 0 40px;
        text-align: left;
        top: 190px;
    }
}
@media screen and (max-width: 520px) {
    .banner.banE:before{top: 75px;}
}
@media screen and (max-width: 425px) {
    .banner.banE:before{top: 50px;}
}

/*首頁文章=============================*/
.module_i_news{padding: 90px 20px;}
.module_i_news .title_i_box h4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    letter-spacing: 2px;
    color: #535353;
    margin-bottom: 50px;
    font-weight: normal;
    font-family: 'noto serif TC', sans-serif;
}
.module_i_news .title_i_box h6{
    font-size: 40px;
    color: #202020;
    font-family: 'Marcellus';
}
.module_i_news ul{
    display: flex;
    flex-wrap: nowrap;
    max-width: 1500px;
    margin: 30px auto;
    grid-gap: 10px;
}
.module_i_news li{
    width: 25%;
    padding: 5px;
    margin: 0 0 20px 0;
    border: 1px solid #777;
}
.module_i_news li:nth-child(n+5){display: none;}
.module_i_news li a {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.module_i_news li a:before {
    transform: translate(-50%, 0%);
    left: 50%;
    right: 0;
    bottom: -15%;
    letter-spacing: 2px;
    height: 35px;
    line-height: 35px;
    opacity: 0;
    display: block;
    color: #fff;
    background:#777;
    width: 100%;
    text-align: center;
    font-family: 'Marcellus', sans-serif;
}
.module_i_news li a:hover:before{bottom: 0;}
.module_i_news li a:after {display: none;}
.i_blog_le{
    width: 100%; 
    padding: 0;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
    position: relative;
}
.i_blog_le img {
    position: absolute;
    transform: translate(-50% , -50%);
    min-height: 100%;
    object-fit: cover;
    top: 50%;
    left: 50%;
}
.i_blog_ri {
    width: 100%;
    background: unset;
    min-height: 130px;
    padding: 10px 10px;
}
.i_blog_ri h5{
    font-size: 18px;
    font-weight: 500 !important;
    color: #444 !important;
}
.i_blog_ri em {
    color: #535353 !important;
    font-family: 'noto sans TC', sans-serif;
}
.i_blog_ri p{
    line-height: 160%;
    font-size: 14px;
    -webkit-line-clamp: 2;
    font-family: 'noto sans TC', sans-serif;
}
.i_blog_b {max-width: 300px;}
.i_blog_b a {
    justify-content: center;
    transition: .3s ease-out;
    margin-top: 0;
}
.i_blog_b a b {font-weight: normal;}
.animated-arrow{background: #777;}

@media screen and (max-width: 768px){
.module_i_news {padding: 50px 5%;}
.module_i_news li {width: 50%;margin:0;}
}
@media screen and (max-width: 600px){
    .module_i_news ul{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    }
    .module_i_news li{width: 100%;}
}
@media screen and (max-width: 500px){
.module_i_news .title_i_box h4, .module_i_news .title_i_box h4:before {font-size: 20px;}
.module_i_news li { width: 100%;} 
.module_i_news li a {align-items: center;}
}


/*文章管理============================*/
h5.blog_le_t,
h4.blog_category_title {
   font-size: 25px;
   margin-bottom:10px;
}
.blog_le .accordion>li:hover .link { background: #a5a5a5; }
.blog_le .accordion>li.on_this_category .link { background: #8E639A; }
.subbox_item a:before { display: none; }
.blog_list_ri:after {
    content: 'READ MORE >';
    display: block;
    background: transparent;
    color: #000;
    letter-spacing: 1px;
    opacity: 1;
    left: 0;
    position: relative;
    padding: 0 22px 0 0;
    font-size: 12px;
    line-height: 12px;
}
.blog_list_ri em { display: none; }
.blog_list_ri p { padding-top: 8px; }
.blog_back a.article_btn_back { background: #ddd;color: #222; }
.blog_back a.article_btn_prev,
.blog_back a.article_btn_next {
    background: #777;
    color: #fff;
}
.blog_back a.article_btn_prev:hover,
.blog_back a.article_btn_next:hover { background: #ddd;transition:0.3s ;color: #222; }
.blog_search input[type=search] { border-radius: 2px; }
.blog_le .accordion { border-radius: 2px; }
.blog_subbox.clearfix {
    margin: 0 auto;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
body.blog_page .clearfix:before,
body.blog_page .clearfix:after { display: none; }
.subbox_item {
    background-color: transparent;
    overflow: hidden;
    position: relative;
    width: 100%;
    border-bottom: none;
}
.subbox_item a {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.subbox_item:hover img {
    transform: translate(-50%, -50%) scale(1.05);
    object-fit: cover;
    width: 100%;
    transition: all 0.4s ease;

}
.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);
}
.blog_list_le {
    display: block;
    position: relative;
    text-align: center;
    height: auto;
    aspect-ratio: 9 / 9;
    overflow: hidden;
    padding-bottom: 0;
    width: 100%;
}
.subbox_item a:after { display: none; }
.blog_list_ri { width: 100%; }
.blog_list_ri em {
    width: 100%;
    color: #7fcbcf;
}
.blog_list_ri h5 {
    position: relative;
    margin: 15px 0 0;
    font-size: 18px;
    letter-spacing: 0.035em;
}
.blog_list_ri p {
    color: #595959;
    margin: 15px 0 0;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.035em;
    width: 100%;
    padding: 0;
    margin: 10px 0;
}
.main_part { max-width: 1500px; }
.blog_le .accordion > li:hover .link, .blog_le .accordion > li.on_this_category .link {
    color: #222 !important;
    background: #ddd;
}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category{background: #ddd;color: #222 !important;}
.blog_le .accordion > li:hover .link a, .blog_le .accordion > li.on_this_category .link a{color: #222 !important;}
.submenu a:hover{background: #777;}
@media screen and (max-width: 1024px) {
	.blog_subbox.clearfix {
    margin: 0 auto;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (max-width: 768px) {
.blog_subbox.clearfix {
    margin: 0 auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (max-width: 500px) {
.blog_subbox.clearfix { grid-template-columns: 1fr 1fr ; }
}
@media screen and (max-width: 425px) {
.blog_subbox.clearfix { grid-template-columns: 1fr; }
}

/*相簿================================*/
.show-list .item:hover .show_name{color:var(--SubColor);}
.other_album_choice li{background-color: var(--SubColor);}
.show-list .item:hover a figure img {
    transform: scale(1.1);
    transition: 0.5s;
    top: 0;
    left: 0;
}
.show-list .item a figure img {transition: 0.5s;}
.show-list .show_name {text-align: center;}
.show-list .show_pic{padding-bottom: 70%;}
.album_info_page .pic-list { 
    -moz-column-count:3; 
    -moz-column-gap:10px; 
    -webkit-column-count:3; 
    -webkit-column-gap:10px; 
    column-count:3; 
    column-gap:10px; 
    width:100%; 
    margin:0 auto; 
}
.album_info_page .pic-list .item { 
    width:100%; 
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
    padding: 0; 
    margin: 0;
}
.album_info_page .pic-list .show_pic { height:auto; padding:0;}
.other_subalbum li p {margin-top: 10px;}
.other_subalbum li a img{    
    object-fit: cover;
    min-height: 250px;
}

@media (max-width: 1440px){
.album_info_page .pic-list{ 
    -moz-column-count:3; 
    -webkit-column-count:3;  
    column-count:3;
    }
}
@media (max-width: 768px) {
    .album_info_page .main_part{padding: 50px 0;}
    .other_album{padding: 0 16px;}
    .other_album:before{width: 0;}
    .album_info_page .pic-list{ 
        -moz-column-count:2; 
        -webkit-column-count:2;  
        column-count:2;
    }
}
@media (max-width: 480px) {
    .album_info_page .pic-list{
        -moz-column-count:1;  
        -webkit-column-count:1; 
        column-count:1;
    }
}

/*購物車==============================*/
.i_prod_tit h2{
    font-size: 50px;
    color: #555;
    font-weight: 500;
}
.i_prod_tit span{
    font-size: 26px;
    color: #555;
    font-weight: normal;
    letter-spacing: 3px;
    margin-top: -10px;
}
@media screen and (max-width:768px) {
    .i_prod_tit h2{font-size: 40px;}
    .i_prod_tit span{font-size: 25px;}
}
@media screen and (max-width:480px) {
    .i_prod_tit h2{font-size: 35px;}
    .i_prod_tit span{font-size: 22px;}
}
@media screen and (max-width:320px) {
    .products-list .item{width: 100%;}
}
/**/
.inquiry_a3{background-color: #999;}
.products-list .pic :hover{
    transition: 0.5s;
    transform: scale(1.2);
}
.product_page .main_part {
     max-width: 1500px;
     padding: 80px 20px;
}
.product_page .show_content,
.product_info_page .show_content { 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap;
}
.product_page .product-layer-two {
    position: relative;
    width: 220px;
    letter-spacing: 1px;
    min-height: 30vw;
}
.product_page .products-list,
.product-wrapper { 
    width: calc(100% - 270px); 
    display: flex; 
    flex-wrap: wrap; 
    align-items: flex-start;
}
ul.page { width: 100%;}
.product-layer-two li ul {
    position:static; 
    margin-top:10px; 
    width:100%; 
    margin-left:0;
}
.product-layer-two li:hover ul { 
    border: none !important; 
    display:block !important;
}
.product-layer-two li li {
    padding: 5px 10px;
    transition: all ease .3s;
    background: transparent;
    border: none;
}
.product-layer-two li li a{ padding:0;}
.product-layer-two li li:hover > a {
    background: #fff;
    color: #665F52;
}
.product-layer-two > li {
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: left;
    border-bottom: 1px dotted #ccc;
}
.product-layer-two > li ul > li + li { margin-top:5px;}
.product_info_page .product-layer-two { display: none;}
.product_info_page .products-list,
.product-wrapper { width: 100%;}
.product-layer-two li li:hover{ margin-left: 15px;}
.product_info_page .half_box { 
    width: 100%; 
    float: none; 
    padding-right: 0;
}
.product_info_page .half_box li.btn_blankTop { 
    margin-top: 50px; 
    justify-content: space-between; 
    display: flex;
}
.product_info_page .half_box li.btn_blankTop input { 
    width: calc(50% - 10px); 
    background-image: none; 
    padding: 0; 
    text-align: center;
    letter-spacing: 1px;
}
.product-layer-two li a {
    color: #222;
    border: none;
    background: transparent;
    transition: all 0.3s;
    line-height: 200%;
    padding-left: 25px;
    transition: all 0.3s;
}
.product-layer-two li:hover > a:before, .product-layer-two li.active > a:before {
    background: #665F52;
    color: #fff;
}
.products-list .name{height: auto;margin-bottom: 15px;}
.products-list .pic {overflow: hidden;}
.product-layer-two li li > a:before {
    content: '\f138';
    position: absolute;
    width: 13px;
    height: 0;
    left: 0px;
    top: 20%;
    margin-top: -6px;
    font-family: 'FontAwesome';
    color: #999;
    transition: all .5s;
}
.product-layer-two li li a {
    padding-left: 18px !important;
    font-size: 15px;
}
.product-layer-two li.active a{border: none;}
.product-layer-two li li:hover > a:before { color: #665F52;}
.products-list .item a:hover .more{background: #777;color: #fff;}
.products-list .more{border: 1px solid #777;color:#777;}

/*按鈕*/
.inquiry_a1{background: #777;}
.inquiry_a2{background: #999;}
h3.prod-thumb {
    color: #5cafde;
    padding-bottom: 5px;
}
li.prod-item {padding-top: 20px;}
.nextaction {background-color: #999;}
.lastaction {
    color: #ffffff;    
    background-color: #777;
}
.prod_related{display: none;}
ul.prod li h3.prod-thumb{
    background: #777;
    color: #ffffff;
}
ul.prod li .prod-panel{margin-top: 15px;}
.product_page .show_content > a { scroll-margin-top:350px;}
.product_page ul.products-list { scroll-margin-top: 350px;}

@media screen and (max-width: 768px) {
.products-list,
.product-wrapper { width: 100%;}
.product-layer-two { display: none;}
.product-layer-two > li { margin-bottom: 5px;}
.product_page ,
.product_page .products-list { width: 100%; border-right: none;}
.product_page .products-list, .product-wrapper{display: block;}
.product_page .show_content, .product_info_page .show_content{justify-content: normal;}
.clearfix:before, .clearfix:after{display: none;}
.product_page .main_part{padding: 0px 20px;}
.product_page .products-list{order: -1;}
.product_page .show_content > a { scroll-margin-top:350px;}
.product_page ul.products-list { scroll-margin-top: 350px;}
.product_page ul.page { order: 3;}
.product_page ul.product-layer-two { display: none;}
}


/*FOOTER==============================*/
.footer {border-top: 1px #eee solid;background:#fff;}
.footer_info li p { line-height: 170%;color: #666;}
.footer_info li:nth-child(2) {width: 100%; margin: 15px 0 8px -10px;}
.footer_logo img{width: 70%;}
.footer_menu a {
	border:none;
	border-right: 1px #999 solid;
    color:#999;
	background:none;
	text-align: center;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1.5;
	padding: 2px 10px;
	margin: 0;}
.footer_menu a:hover {
	color:#ddd;
	background: none; 
    font-weight: 550;}
.footer_menu a:nth-last-child(1) {border-right:none;}
.footer_info li p.add2 {display:none;}
.box_link {display:none;}
.copy {border-top: 1px #eee solid;}
.copy a {color: #999;}
.copy a:hover {color: #999;}

/*手機版選單==============================*/
.stellarnav .menu-toggle:after{display: none;}
.stellarnav .menu-toggle span.bars span{width: 30px;border-radius: 0px;}
.stellarnav .menu-toggle{padding: 35px 20px;}
.stellarnav.mobile.left > ul{background: #fff;}

@media screen and (max-width: 768px) { 
    .stellarnav .menu-toggle span.bars span{position: relative;top: 5px;background:#444;}
    .pageIndex .stellarnav > ul > li > a, .stellarnav > ul > li > a, .header_area.sticky .stellarnav > ul > li > a{padding: 15px 0 15px;margin: 0 10px;}
    .stellarnav.mobile > ul > li > a{padding: 15px 0 15px;line-height: 0;}
    .pageIndex .stellarnav .menu-toggle{padding: 35px 20px;}
}

/*第二層*/
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu{background: var(--MainColor);color: #000;}
.stellarnav .icon-close:after{border-bottom: solid 3px #000;}
.stellarnav .icon-close:before{border-bottom: solid 3px #000;}
.stellarnav.mobile.left > ul:after{
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    max-width: 400px;
    top: 0;
    left: 0;
    -webkit-transition: all 1s cubic-bezier(0.22, 1, 0.36, 1); 
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-transform: perspective(960px) rotateY(-90deg);
    transform: perspective(960px) rotateY(-90deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; 
    opacity: 0;
}
.stellarnav.active>ul:after {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: perspective(960px) rotateY(0deg);
    transform: perspective(960px) rotateY(0deg);
    z-index: -1;
}
.stellarnav.mobile > ul > li > a.dd-toggle{padding: 15px;top: 10px;}