@charset "utf-8";

/*校稿版面設定*/
.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*/
.pageIndex .header_area { position: absolute; width: 100%;}
.pageIndex .header_area.sticky { position: fixed;}
.main_header_area { background: #fff;}
.nav-brand { max-width: 150px; width: 100%;}

/*menu*/
.nav-menu { display: flex; flex-direction: row; align-items: center; justify-content: space-around; margin: 25px 0 0;}
.nav-menu > li > a { padding: 25px 17px 10px; font-size: 14px; font-weight: 600; color: #666;}
.nav-menu>li.tp_links { display: none;}

.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a { color: #366349;}

/*menu下拉箭頭*/
.submenu-indicator-chevron { border-color: transparent #666 #666 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 #366349 #366349 transparent;}

/* = = = dropdown = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.nav-dropdown { background: rgba(255,255,255,0.9);}
.nav-dropdown>li>a { color: #5f5f5f; background-color: transparent; border-bottom: none;}
.nav-menu>li>.nav-dropdown, .nav-dropdown .nav-dropdown { border: 1px solid #ccc;}

/*--下拉點選次分類時，主分類狀態+箭頭顏色---------------------------------------*/

/*主分類狀態*/
.nav-dropdown>li:hover>a, .nav-dropdown>li.focus>a { color: #366349;}
/*主分類hover*/
.nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus { color: #fff; background-color: #366349;}
/*箭頭*/
.nav-dropdown>li:hover>a .submenu-indicator-chevron, .nav-dropdown>.focus>a .submenu-indicator-chevron { border-color: transparent #366349 #366349 transparent;}

/* = = = footer = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.footer { background: #fff;}
.footer_logo { margin: 0 0 0 10px; max-width: 280px; width: 100%; position: relative;}
.footer_logo::before {
    content: "象元印刷事業股份有限公司";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 15px;
    left: 0;
    color: #222;
    font-weight: 600;
}
.footer_logo::after {
    content: "";
    position: absolute;
    width: 45px;
    height: 3px;
    bottom: -12px;
    left: 0;
    background: #666;
}
.footer_logo img { max-width: 150px; width: 100%; opacity: 0;}
.footer_info { padding: 0;}
.footer_info ul { width: 100%; padding: 0;}

/*footer_info*/
.footer_info li:nth-child(1) { width: 49%; padding: 20px 10px; border-right: 1px solid #ccc;}
.footer_info li p { }
.footer_info li p a { color: inherit;}

.footer_info li p.tel2:before { content: '傳真：';}

/*footer_menu*/
.footer_info li:nth-child(2) { width: 49%;}
.footer_menu { margin-top: 10px;}
.footer_menu a { margin: 5px; padding: 5px 10px; background: transparent; border: 1px #ccc solid; width: 31%; text-align: center;}
.footer_menu a:hover { background: #366349; color: #fff; border: 1px #366349 solid;}

/* = = = 版面基礎調整 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*index內容*/
.pageIndex .main_part { border-top: none;}

/*分頁小標*/
.path { display: none;}

/*版權資訊*/
.copy { border-top: none;}

/*下拉編輯頁面*/
.promotion_title h2 { display: none;}
.other_select_page .clearfix { display: none;}
.other_select_page .page { display: none;}

/* = = = 手機板選單 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*手機板選單*/
.nav-toggle:before { background-color: #366349; box-shadow: 0 0.5em 0 0 #366349, 0 1em 0 0 #366349;}
.nav-toggle:after { color: #366349;}
.nav-menus-wrapper-close-button { color: #366349;}

.nav-menus-wrapper.nav-menus-wrapper-open { background: #ffffffdd; width: 80%;}
.navigation-portrait .nav-menu > li { border-top: 1px solid #ccc;}
.navigation-portrait .nav-menu > li:first-child { border-top: none;}
.navigation-portrait .nav-menu > li > a { text-align: center; margin: 0; padding: 15px 0;}

/*底部按鈕*/
#bottom_menu li:first-child:nth-last-child(3), #bottom_menu li:first-child:nth-last-child(3) ~ li { width: 50%;}
#bottom_menu li:nth-child(3) { display: none !important;}

/* = = = 文章管理 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*--文章總覽---------------------------------------*/

/*主分類hover*/
.blog_le .accordion .link { padding: 0;}
.blog_page .link a, .blog_in_page .link a { padding: 15px 10px; display: block;}
.blog_le .accordion > li:hover { background: #366349 !important;}
.blog_le .accordion > li:hover .link { color: #fff !important;}

/*選定分類*/
.blog_le .accordion > li.on_this_category { background: #366349 !important;}

/*次分類hover*/
.submenu a:hover { background: #aaa; color: #fff;}

/*文章列表*/
.subbox_item a:before { color: #366349; background: transparent; transition: all 500ms;}
.subbox_item a:after { background: rgba(255,255,255,0.6); border: 2px solid #366349; backdrop-filter: blur(1px); transition: all 500ms;}

/*對齊*/
.subbox_item { display: inline-block; float: none; height: 150px;}
.subbox_item a { height: 100%;}

/*頁數樣式調整*/
.page li.activeN { border: 1px #ccc solid; padding: 5px 10px; border-radius: 30px;}
.page li:not(li.activeN) { padding: 2px 2px 2px 0; border-radius: 30px;}
.page li:not(li.activeN):hover { background: #444; color: #fff;}
.page li:not(li.activeN):hover a { color: #fff;}
.page a { border: none;}
.page a:hover { background: transparent;}

/*--文章內頁---------------------------------------*/

/*回列表、上下篇文章*/
.blog_back a.article_btn_back { background: #366349;}
.blog_back a.article_btn_prev, .blog_back a.article_btn_next { background: #666;}

/* = = = 小工匠撇部分享文章 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*標題底橫線*/
.promotion_title h2 { border-bottom: 2px solid #366349;}
.promotion_title { border-bottom: 1px solid #366349;}

/* = = = 相簿管理 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.overlay { transform: scale(1,0);}
.subalbum-menu h2 { display: none;}

/*相簿名稱*/
.show-list .show_name { text-align: center;}
.show-list .item:hover .show_name { color: #366349;}

/*相簿內頁*/
.album_info_page .subalbum-menu h2 { color: #444;}
.album_info_page .block { background: #666;}
.album_fixed_title { background: transparent;}
.other_album:before { right: 0; width: 80%;}
.other_album_choice li { background: transparent; padding: 0; margin: 15px 10px 10px 0;}
.other_album_choice li a { color: #fff; padding: 7px 20px; background: #366349; border-radius: 50px;}

/*其他相簿*/
.album_fixed_title { background: transparent;}
.other_album:before { width: 80%; right: 0;}

/* = = = 店家商品 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*--首頁商品區------------------------------------------------------------*/

.pageIndex .main_part:nth-child(3) { padding-bottom: 20px;}
.pageIndex .products-box { max-width: 1200px; margin: auto;}
.pageIndex .item.first_box { display: block; text-align: center; width: 100% !important; margin-top: 45px;}
.pageIndex .title_box { color: #366349;}
.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: #366349;}
.pageIndex .arrow { fill: #fff;}

@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_page #content { min-height: 80vh;}

/*主分類*/
.product-layer-two li a { border: none; border-right: 1px solid #366349; background: transparent; padding: 0 14px; color: #366349;}
.product-layer-two>li:last-of-type a { border-right: 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: #366349; color: #fff;}

/*商品呈現*/
.products-list .pic { overflow: hidden;}
.products-list .more { border: 1px solid #366349; color: #366349;}
.products-list a:hover .more { background: #366349; border-color: #366349;}
.products-list .price b:first-child { color: #666;}
.products-list .price b:last-child { color: #366349;}

/*--個別商品頁面------------------------------------------------------------*/

/*輪播圖*/
.product_pic h6 { color: #222;}
.block { background: #222;}
.product_pic {overflow: hidden;}
.product_info_page .product_pic h6 { color: #222;}
.product_info_page .block { background: #222;}

/*商品資訊*/
.sidebarBtn .price { color: #366349;}
.action-button { background: #366349;}
.action-button:hover { background: #666;}

/*商品QA*/
.lastaction { background-color: #ccc; color: #666;}
.nextaction { background-color: #888;}

/*相關推薦*/
.prod_related { background: #fff;}
.prod_related h6 span:before { color: #366349;}
.related_list li a { padding: 10px 4px; border-radius: 15px;}

/*上一頁*/
.lastPage { background: transparent; color: #366349; border: 1px solid #366349;}
.lastPage:hover { background: #366349; color: #fff;}

/* = = = 聯絡表單 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*資訊*/
.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;}
.TEL2:before { content: "傳真";}

/*表格*/
.contact_form li { border-bottom: none;}
.list_before.info li a { color: inherit;}
.noborder { background: transparent; border-bottom: 1px solid #ccc;}
.contact_page input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; margin: 0 5px 0 20px;}

/*選項*/
.form select { background: #fff;}
.contact_page input[type="checkbox"]:first-child, input[type="radio"]:first-child { margin: 0 5px 0 0;}

/*文字區塊、驗證碼*/
.contact_form li:nth-of-type(5) .noborder, .contact_form li:nth-of-type(6) .noborder { background: transparent; border: 1px solid #ccc;}
.contact_form li:nth-of-type(6) .form__insert img { filter: brightness(1.5); padding: 5px;}

/*驗證碼對齊*/
.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;}

/*送出*/
.contact_page .animated-arrow { background: transparent; border: 1px solid #ccc;}
.contact_page .animated-arrow:hover { background: #366349;}
.contact_page .innersend { color: #444; font-weight: 600;}
.contact_page .animated-arrow:hover .innersend { color: #fff;}
.contact_page .arrow { fill: #666;}
.contact_page .animated-arrow:hover .arrow { fill: #fff;}

/* = = = 購物車與匯款通知 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*--匯款通知------------------------------------------------------------*/
.separate_title { -webkit-filter: grayscale(1); filter: grayscale(1);}
.rewrite_simple { background: #666 url(../images/simple_left.png) 10% center no-repeat;}
.send_simple { background: #366349 url(../images/simple_right.png) 88% center no-repeat;}

/*--購物車------------------------------------------------------------*/

/*購物車&付款方式*/
.car_page .animated-arrow { background: #366349;}
.car_page .arrow { fill: #fff;}

/*訂單成立*/
.order_list_tit b { color: #366349;}
.order_list_tab td:nth-child(1) { color: #666;}
.order_list_pro tr:first-child { background: #ccc;}
.order_list_pro tr:first-child td { color: #444;}

/*--會員資訊------------------------------------------------------------*/

/*右側會員登入*/
.right_member_in { background: #366349;}
.right_member_in img { -webkit-filter: grayscale(1) brightness(2); filter: grayscale(1) brightness(2);}
.right_member_in a { color: #fff;}

/*會員登入頁面*/
.member_title { margin-top: 100px;}
.member_title p { border-top: 2px #666 solid;}
.login_mem_name, .login_mem_pass { -webkit-filter: grayscale(1); filter: grayscale(1);}
.login_mem_submit { background: #366349;}
.login_mem_other_link a { color: #666;}
.member_login_regist { background: #ededed;}
.member_login_regist p { color: #666;}
.member_login_regist a { background: #444;}

/*會員專區*/
.member_title img { -webkit-filter: grayscale(1) brightness(0.3); filter: grayscale(1) brightness(0.3);}
.member_order { background: transparent;}
.member_order a.m_order_1, .member_order a.m_order_2, .member_order a.m_order_3 { border: 1px #444 solid;}
.member_order a.m_order_3:hover, .member_order a.m_order_2:hover, .member_order a.m_order_3:hover { background: #366349;}

/*會員資料*/
.mem_regist_title_s { background: #ddd;}
.mem_box2 input.bbtn01 { background: #444;}
.mem_box2 input.bbtn02 { background: #366349;}
.member_regist input { color: #444;}

/*訂單紀錄*/
.order_history tr td:nth-child(3) a { background: #444;}

/* = = = 預設解除背景輪播 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

#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;}
}

@media screen and (max-width: 1024px){
    /*header*/
    .pageIndex .header_area { position: relative;}

    /*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;}

    .navigation-portrait .nav-dropdown>li>a:before { background: transparent; }
    .nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a { color: #343a40;}
    .nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus { color: #5f5f5f; background-color: transparent;}

    /*footer*/
    .footer_logo { text-align: center; margin: 0 auto 10px auto;}
    .footer_logo::after { opacity: 0;}
    .footer_info { display: block; text-align: center;}
    .footer_info ul { width: 100% !important; border-left: none;}
    .footer_info li p { width: 100%;}

    /*聯絡表單 ※如改成編輯區，請刪除*/
    .list_before.info { width: 100%; max-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;}
}
