@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@500&display=swap');

/*校稿版面設定*/
.services_page .main_part,.pageIndex .main_part,.other_page .main_part,.other_select_page .main_part{ width: 100%; max-width:100%; margin: auto; padding:0px; margin-top:-1px;}
.show_content { width: 100%; padding:0px; top:-1px;}
.edit { width: 100%; margin: 0 auto -5px; padding: 0px;}

/* = = = banner = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.banner { display: none;}
.banner h5 {}
.banner.banA {}
.banner.banblog {}

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

/*header*/
.main_header_area { background: #fff;}
.header_area::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    bottom: -5px;
    background: linear-gradient(to right, rgba(248,238,6,1) 2%,rgba(87,200,226,1) 17%,rgba(105,190,81,1) 30%,rgba(105,190,81,1) 51%,rgba(87,200,226,1) 65%,rgba(248,238,6,1) 82%,rgba(213,196,223,1) 100%);
}
.main_header_area .container { max-width: 90%;}
.nav-brand { max-width: 280px; width: 100%;}

/*menu*/
.nav-menu { display: flex; flex-direction: row; align-items: center; justify-content: space-around; font-family: 'Prompt';}
.nav-menu>li { margin: 0 10px; position: relative;}
.nav-menu > li > a { margin-right: 10px; font-size: 16px; letter-spacing: 1px; padding:7px;}
.nav-menu>li.tp_links { display: none;}

/*menu_hover*/
.nav-menu>li::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    top: 50%;
    background: linear-gradient(to right, rgba(248,238,6,0) 0%,rgba(149,215,141,1) 25%,rgba(87,200,226,1) 50%,rgba(159,217,128,1) 75%,rgba(248,238,6,0) 100%);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.nav-menu>li:hover::before { top: 0; opacity: 1; transition: all 0.5s ease-in-out;}
.nav-menu>li::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 50%;
    background: linear-gradient(to right, rgba(248,238,6,0) 0%,rgba(149,215,141,1) 25%,rgba(87,200,226,1) 50%,rgba(159,217,128,1) 75%,rgba(248,238,6,0) 100%);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.nav-menu>li:hover::after { bottom: 0; opacity: 1; transition: all 0.5s ease-in-out;}
.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a { color: #69BE51;}


/*menu下拉箭頭*/
.submenu-indicator-chevron { border-color: transparent #343a40 #343a40 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 #69BE51 #69BE51 transparent;}


/* ------------------------------ */
/* ------- 2022/7/29 ------------ */
/* -----------先隱藏-------------- */
/*.nav-menu > li:nth-child(5) > a { pointer-events: none; width:auto;}*/
.navigation-portrait .nav-menu > li:nth-child(5) > a .submenu-indicator { pointer-events:all;}
/* ------------------------------ */
/* ------------------------------ */
/* ------------------------------ */


/*手機板選單*/
.nav-toggle:before { background-color: #57C8E2; box-shadow: 0 0.5em 0 0 #57C8E2, 0 1em 0 0 #57C8E2;}
.nav-toggle:after { color: #57C8E2;}

/* = = = dropdown = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.nav-dropdown { background: #fff;}
.nav-dropdown>li>a { color: #5f5f5f; background-color: transparent; border-bottom: none;}
.nav-menu>li>.nav-dropdown, .nav-dropdown .nav-dropdown { border: none; box-shadow: 0 2px 5px #66666666;}

/*--下拉點選次分類時，主分類狀態+箭頭顏色---------------------------------------*/

.nav-dropdown>li:hover>a, .nav-dropdown>li.focus>a { color: #69BE51;}
.nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus { color: #fff; background: linear-gradient(to right, rgba(87,200,226,1) 0%,rgba(248,238,6,1) 58%,rgba(248,238,6,0) 100%);}
.nav-dropdown>li:hover>a .submenu-indicator-chevron, .nav-dropdown>.focus>a .submenu-indicator-chevron { border-color: transparent #69BE51 #69BE51 transparent;}

/* = = = footer = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.footer { background: #222; padding: 30px 0 50px;}

/*更換footer LOGO*/
.footer_logo { background: url(https://pic03.eapple.com.tw/onation/footer_logo.png) no-repeat center; height: 93px; max-width: 120px; width: 100%; margin-right: 60px;}
.footer_logo img { width: 0; height: 93px;}

/*footer_info*/
.footer_info li:nth-child(1) { width: 100%; border-bottom: 1px solid #666; padding-bottom: 10px;}
.footer_info li p { color: #fff;display: inline-block; padding-right: 35px; padding-bottom: 5px;}
.footer_info li p a { color: #fff;}

.footer_info li p.tel, .footer_info li p.fax, .footer_info li p.mail {}
.footer_info li p.tel:before {}
.footer_info li p.fax:before {}
.footer_info li p.mail:before { content: 'MAIL　';}
.footer_info li p.add { display: none;}
.footer_info li p.add:before {}
.footer_info li p.add2:before {}

/*footer_menu*/
.footer_info li:nth-child(2) { width: 100%; margin-top: 20px;}
.footer_menu a { background: transparent; border: none; border-left: 1px solid #666; color: #888; margin: 0 -4px 0 0; padding: 5px 15px;}
.footer_menu a:first-child { border-left: none;}
.footer_menu a:hover { background: #69BE51;}

/* = = = 版面基礎調整 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*index內容*/
.pageIndex .main_part { border-top: none;}

/*news_part*/
.news_part { display: none;}

/*分頁小標*/
.path { display: none;}

/*版權資訊*/
.copy { border-top: none; display: none;}

/*手機選單*/
.navigation-portrait .nav-dropdown li a { width: auto;}
.navigation-portrait .nav-dropdown li a:before { background: transparent;}

/* = = = 下拉頁面 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.other_select_page .promotion_title { display: none;}
.other_select_page .other_promotion.clearfix { display: none;}
.other_select_page .page { display: none;}

/* = = = 文章管理 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*--文章總覽---------------------------------------*/

.blog_page { background: url(https://pic03.eapple.com.tw/onation/blog_b.png) center;}

/*主分類hover*/
.blog_le .accordion { background: #fff;}
.accordion li .link{padding: 0;}
.accordion li .link a{padding: 15px 10px; display: block;}
.blog_le .accordion > li:hover { background: #57C8E2 !important;}
.blog_le .accordion > li:hover .link { color: #fff !important;}

/*選定分類*/
.blog_le .accordion > li.on_this_category { background: #69BE51 !important;}

/*次分類hover*/
.submenu a:hover { background: #F8EE06; color: #fff;}

/*列表*/
.subbox_item { display: inline-block; float: none; background: #fff; padding: 10px; height: 170px;}
.subbox_item:hover { box-shadow: 0 0 7px #f8ee06;}
.blog_list_le { height: 150px; display: inline-flex; align-items: center;}
.blog_list_ri h5 { color: #57C8E2;}

.subbox_item a:before { display: none; color: #D5C4DF; background: none; transition: all 500ms;}
.subbox_item a:after { display: none; background: rgba(255,255,255,0.6); border: 2px solid #D5C4DF; backdrop-filter: blur(1px); transition: all 500ms;}

/*--文章內頁---------------------------------------*/

/*回列表、上下篇文章*/
.blog_back a.article_btn_back { background: #447e34;}
.blog_back a.article_btn_prev, .blog_back a.article_btn_next { background: #666;}

/* = = = 小工匠撇部分享文章 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.share_page { background: url(https://pic03.eapple.com.tw/onation/blog_b.png) center;}
.share_page .main_part { width: 100%; display: flex; flex-direction: row-reverse;}
.share_page .other_promotion.clearfix { width: auto; position: absolute; top: 13%; left: 39%; display: flex; justify-content: center; align-items: center;}
.share_page .page { width: 100%; display: none;}
.share_page .edit { margin: 50px auto -5px;}

/*標題*/
.promotion_title { display: none;}
.promotion_title h2 { border-bottom: 2px solid #ADA17E;}
.promotion_title { border-bottom: 1px solid #ADA17E;}

/*文章分頁*/
.share_page .other_promotion li { width: auto; margin: 3px 0; padding: 0; background: #fff; margin: 0 10px;}
.share_page .other_promotion li:hover { background: #57C8E2; border-top: none;}
.other_promotion li:hover h3 { text-decoration: none; font-weight: normal; color: #fff;}
.other_promotion .pmtTime { display: none;}
.other_promotion .pmtTitle h3 { height: auto; margin: 0; padding: 5px 10px;}

@media screen and (max-width: 1024px){
    .share_page .main_part { flex-direction: column-reverse;}
    .share_page .other_promotion li { margin-top: 4px; margin-bottom: 4px;}
    .share_page .other_promotion.clearfix { top: 20%; left: 34%;}
}

@media screen and (max-width: 768px){ 
    .share_page .other_promotion li { margin-top: 4px; margin-bottom: 4px;}
    .share_page .other_promotion.clearfix { top: 16%; left: 27%;}
}

@media screen and (max-width: 425px){ 
    .share_page .other_promotion.clearfix { left: 10%;}
}


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

.overlay { transform: scale(1,0);}

/*相簿名稱*/
.show-list .show_name { text-align: center;}
.show-list .item:hover .show_name { color: #ADA17E;}

/* = = = 店家商品 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*--首頁商品區------------------------------------------------------------*/

.pageIndex .main_part:nth-child(3) { padding-bottom: 20px;}
.pageIndex .item.first_box { display: block; text-align: center; width: 100% !important; margin-top: 45px;}
.pageIndex .title_box { color: #ADA17E;}
.pageIndex .products-list .item { width: 19.8%;}
.pageIndex .products-list .name { font-size: 16px; font-weight: 600;}
.pageIndex .products-list .pic { padding-bottom: 75%; background: none; overflow: hidden;}
.pageIndex .animated-arrow { padding-left: 4%; background: #ADA17E;}

@media screen and (max-width: 1580px){ .pageIndex .products-list .item { width: 19.5%;}}
@media screen and (max-width: 768px){ .pageIndex .products-list .item { width: 32%;}}
@media screen and (max-width: 425px){ .pageIndex .products-list .item { width: 49%;}}

/*--商品總覽頁面------------------------------------------------------------*/

/*主分類*/
.product-layer-two li a { border: none; border-bottom: 1px solid #F8EE06; background: transparent; padding: 0 14px; color: #69BE51; font-family: 'Prompt'; padding: 10px 0;}
.product-layer-two>li:last-of-type a { border-bottom: none;}

/*次分類*/
.product-layer-two li ul li { padding: 0;}
.product-layer-two li li a { background: transparent;}
.product-layer-two li li a:hover { background: #447e34; color: #fff;}

/*商品呈現*/
.products-list .more { border: 1px solid #69BE51; color: #69BE51;}
.products-list a:hover .more { background: #69BE51; border-color: #69BE51;}

/*選單放在左邊*/
.product_page .show_content, 
.product_info_page .show_content{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}

.product-layer-two { position: relative; width: 17%; margin-right: 3%;}
.product-layer-two > li { width: 100%; max-width: 100%; padding: 0px; text-align: left;}
.product-layer-two li ul { position: unset; margin-top: 10px; display: block !important; width: 100%; margin-left: 0;}
.product-layer-two li:hover ul { border: none !important; display:block !important;}

.product-layer-two li li{ display: block; padding: 5px 10px; transition: all ease .3s;}
.product-layer-two li li a { padding: 0; font-size: 16px;}
.product-layer-two li li:hover{ margin-left: 15px;}
.products-list, 
.product-wrapper { width: 80%;}
.page{ width: 100%;}
.product-layer-two li ul li a { color: #57C8E2;}
.product-layer-two li li:hover > a { background:none; color: #7597A8;}

.product-layer-two li li > a:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 8px;
    background: #fff;
    left: 0;
    margin-left: -20px;
    top: 50%;
    margin-top: -4px;
    clip-path: polygon(0 0, 100% 50% , 0 100%);
}
.product-layer-two li li:hover > a:before { background: #7597A8;}

/*購物車次分類固定展開*/
.product-layer-two > li ul > li + li { margin-top: 5px;}

@media screen and (max-width: 1024px) {
    .sidebarBtn { width: 100%;}
    .product_main { width: 100%;}
    .mobile_product_name { display: block; color: #7597a8;}
    }    

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

@media screen and (max-width: 600px) {
.product-layer-two , .products-list, .product-wrapper { width: 100%;}
.product-layer-two { margin-right: 0;}
.product-layer-two li ul { display: none !important;}
.product-layer-two li:hover ul { display: block !important;}
.product-layer-two > li { margin-bottom: 5px;}
.product-layer-two > li:first-child { margin-top: 0px;}
}

@media screen and (max-width: 375px) {
.product-layer-two > li { width: 47%;}
.product-layer-two li a { font-size: 15px;}
}

@media screen and (max-width: 320px) {
.product-layer-two li a { font-size: 12px;}
}

/*--個別商品頁面------------------------------------------------------------*/

/*商品QA*/
.lastaction { background-color: #ccc;}
.nextaction { background-color: #888;}

/*相關推薦*/
.prod_related { background: #fff;}
.prod_related h6 span:before { color: #69BE51;}

/*上一頁*/
.lastPage { background: #69BE51;}

/* = = = 聯絡表單 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.contact_page { background: url(https://pic03.eapple.com.tw/onation/blog_b.png) center;}
.contact_content { padding: 50px; background: rgba(255,255,255,0.5); border: 1px solid #ccc; backdrop-filter: blur(0.8rem);}

/*資訊*/
.TEL:before, .TEL2:before, .PHONE:before, .FAX:before, .TAXID:before, .MAIL:before, .ADD:before, .ADD2:before { font-weight: normal;}
.list_before.info li { padding-left: 38px;}

.list_before.info li.ADD { display: none;}

/*表格*/
.contact_form li { border-bottom: none;}
.noborder { background: transparent; border: 1px solid #ccc;}
.contact_form li:nth-child(5) .noborder, .contact_form li:nth-child(6) .noborder { background: transparent; border: 1px solid #ccc;}
.contact_form li:nth-child(6) .form__insert img { filter: brightness(1.5); padding: 5px;}
.form__insert input[type="radio"] { margin-left: 10px;}

/*驗證碼對齊*/
.contact_form li:nth-of-type(6) .form__insert { display: inline-flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap;}
.captcha { margin-right: 20px;}

/*送出*/
.animated-arrow { background: transparent; border: 1px solid #ccc; color: #666;}
.animated-arrow:hover { background: linear-gradient(to right, rgba(105,190,81,1) 0%,rgba(87,200,226,1) 50%,rgba(248,238,6,1) 100%);}
.innersend { color: #444; font-weight: 600;}
.innersend:hover { color: #fff;}
.arrow { fill: #666;}
.animated-arrow:hover .arrow { fill: #fff;}

/* = = = 預設解除背景輪播 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

#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;}
}

/* = = = RWD設定 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

@media screen and (max-width: 1500px){ 
    .nav-menu { display: block;}
    .nav-menu > li > a { font-size: 14px;}
}

@media screen and (max-width: 1024px){ 
	/*header*/
    .main_header_area .container { max-width: 100%;}
    /*footer*/
    .footer_info ul { width: 100%;}
    .footer_info { width: 90%; margin: auto;}
}

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

    /*header*/
    .nav-menu { flex-direction: column; align-items: flex-start; padding: 0 20px;}
    .nav-menu > li > a { font-size: 16px;}

    /*footer*/
    .footer_logo { text-align: center; margin: 0 auto 10px auto;}
    .footer_info { display: block; text-align: center;}
    .footer_info ul { width: 100% !important; border-left: none;}
    .footer_info li p { width: 100%;}

    /* 行動裝置相容性調整 大圖調整 */
    .swiper-slide img { animation-fill-mode: none; -webkit-animation-fill-mode: none;}
        
    /* 行動裝置相容性調整 新版最新消息內頁 */
    .blog_back {display: flex; justify-content: space-between; align-items: center; align-content: center;}
    .blog_back a {width:31.5%;}

}

@media screen and (max-width: 600px) {
    /*footer*/
    .footer_info ul li:nth-child(1) { width: 95%; margin: auto; border-right: none; text-align: center;}
}

@media screen and (max-width: 425px){
    /*footer*/
    .footer_menu{text-align: center;}
}