@charset "utf-8";
@media(max-width: 1439px) {
}

/*xl以下*/
@media(max-width: 1199px) {
    /*商品卡片*/
    .product_card_list{
        margin-left: -12px;
        margin-right: -12px;
    }
    .product_card_item{
        padding-left: 12px;
        padding-right: 12px;
    }
    .putin_cart_btn{
        display: block;
    }
    .product_card:hover .putin_cart_onimg{
        display: none;
    }
}

/*lg以下*/
@media(max-width: 991px) {
    /*header*/
    .page_header{
        padding-right: 0;
        box-shadow: 0 0 2px rgb(0 0 0 / 20%);
    }
    .header_box{
        height: 72px;
    }
    .page_header .my_container{
        display: flex;
    }
    .header_right{
        order: 2;
        flex: 1;
        padding-top: 0;
    }
    .header_box{
        order: 1;
        margin: 0;
    }
    .header_box>*{
        padding: 0;
    }
    .header_logo{
        margin-top: 0;
        display: flex;
        align-items: center;
    }
    .header_logo a img, .page_header.zoom .header_logo a img {
        height: 40px;
    }
    .header_nav{
        display: none;
    }
    .mobile_menu{
        display: block;
    }
    .header_right .nav-item{
        height: 100%;
    }
    .header_right .nav-link{
        height: 100%;
        font-size: 22px;
    }
    .header_right .nav-link:hover{
        color: var(--font-color);
    }
    .header_right .nav-item.cart .nav-link span {
        top: 16px;
    }
    .header_right .nav-item.contact{
        display: none;
    }
    .header_right .nav-item.cart:hover .header_cart_list_box{
        display: none;
    }
    .under_page_header {
        height: 72px;
    }
    /*footer*/
    .footer_logo{
        margin-bottom: 32px;
    }
    .footer_logo_slgan {
        margin-top: 16px;
    }
    .footer_block_title {
        margin-bottom: 16px;
    }
    /*麵包屑*/
    .breadcrumb_box{
        display: none;
    }
    /*頁面標題*/
    .page_title {
        padding-top: 16px;
        padding-bottom: 16px;
        margin-bottom: 40px;
    }
    /*文章清單*/
    .article_inventory_body {
        flex: 1;
    }
    .article_inventory_img {
        flex: initial;
        width: 30%;
    }
    /*首頁-banner*/
    .banner_box{
        margin-top: 0;
    }
    /*購物車*/
    .product_table_img {
        width: 88px;
    }
    .product_table_price {
        width: 15%;
    }
    .product_table_subtotal {
        width: 15%;
    }
    /*聯絡我們*/
    .contact_info .office_info_list {
        padding: 20px 16px;
    }
    /*會員專區*/
    .member_nav{
        width: 100%;
        border-right: none;
        padding-right: 16px;
    }
    .member_nav .nav{
        flex-direction: row;
        border-bottom: solid 2px var(--bg-color);
    }
    .member_nav .nav-item{
        flex: 1;
    }
    .member_nav .nav-item.logout {
        display: none;
    }
    .member_nav .nav-link {
        color: var(--font-color3);
        padding: 0 12px 12px 12px;
        font-size: 18px;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        border-bottom: none;
        text-align: center;
    }
    .member_nav .nav-link.active {
        position: relative;
        color: var(--font-color);
        font-weight: 500;
        background-color: #fff;
    }
    .member_nav .nav-link.active::before {
        content: "";
        position: absolute;
        height: 3px;
        width: 32px;
        bottom: 0;
        left: calc(50% - 16px);
        background-color: var(--brand-main-color);
    }
    .member_content{
        flex: initial;
        width: 100%;
        padding-left: 16px;
        padding-top: 32px;
    }
    .member_title{
        display: none;
    }
}

/*md以下*/
@media(max-width: 767px) {
    /*footer*/
    .footer_box{
        padding-top: 48px;
    }
    .footer_office_info{
        margin-top: 32px;
    }
    .footer_logo{
        text-align: center;
    }
    .footer_nav .nav{
        max-height: none;
        flex-direction: row;
    }
    .footer_nav li{
        width: 50%;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    /*商品卡片*/
    .product_card_item{
        width: 33.333%;
    }
    .product_card_title{
        font-size: 1rem;
    }
    /*活動卡片*/
    .news_card_item{
        width: 50%;
    }
    /*圖片連結*/
    .link_card_item {
        width: 50%;
    }
    /*購物車*/
    .cart_product_table_header{
        display: none;
    }
    .product_table_row>div {
        padding: 8px;
    }
    .cart_product_table_body .product_table_row {
        display: grid;
        grid-template-columns: 80px auto 28px;
        padding-top: 4px;
        padding-bottom: 12px;
    }
    .product_table_img {
        width: 80px;
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 1;
    }
    .product_table_name{
        grid-row-start: 1;
        grid-row-end: 1;
        grid-column-start: 2;
        grid-column-end: 2;
    }
    .product_table_price {
        grid-row-start: 2;
        grid-row-end: 2;
        grid-column-start: 2;
        grid-column-end: 4;
        width: 100%;
    }
    .product_table_price .product_price{
        display: flex;
        align-items: center;
    }
    .product_table_price .product_price .special_price+.original_price{
        margin-left: 12px;
    }
    .product_table_count{
        grid-row-start: 3;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 4;
        width: 100%;
    }
    .product_table_subtotal{
        grid-row-start: 4;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 4;
        width: 100%;
        padding-bottom: 0 !important;
    }
    .product_table_delete{
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 3;
        grid-column-end: 3;
        width: 28px;
        height: 100%;
        padding-left: 0 !important;
    }
    .product_table_delete .btn i{
        font-size: 20px;
        margin-right: 0;
    }
    .product_table_delete .btn .txt{
        display: none;
    }
    /*聯絡我們*/
    .contact_info {
        order: 2;
    }
    .contactus_form{
        order: 1;
    }
    /*404*/
    .error_content{
        padding-top: 56px;
        padding-bottom: 80px;
    }
    .error_page .recommend_article_box {
        margin-top: 80px;
    }
    .error_txt{
        width: 100%;
        text-align: center;
    }
    .error_img{
        width: 100%;
        margin-bottom: 32px;
    }
    /*會員專區-訂單查詢*/
    .member_content .cart_product_table{
        border: none;
    }
    .member_content .cart_product_table_body{
        padding: 0;
    }
    .order_table_row {
        position: relative;
        display: block;
        background-color: #fff;
        padding-top: 8px;
        padding-bottom: 0;
        border: solid 1px var(--border-color);
    }
    .order_table_row+.order_table_row{
        margin-top: 8px;
    }
    .order_table_row>div {
        padding: 4px 12px;
    }
    .order_table_date {
        display: flex;
        width: 100%;
    }
    .order_table_date::before {
        content: "訂單日期：";
    }
    .order_table_id {
        display: flex;
        width: 100%;
    }
    .order_table_id::before {
        content: "訂單編號：";
    }
    .order_table_price {
        display: flex;
        width: 100%;
        text-align: left;
    }
    .order_table_price::before {
        content: "訂單金額：";
    }
    .order_table_row>div.order_table_status{
        border-top: solid 1px var(--border-color);
        text-align: left;
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 4px;
        height: 48px;
        display: flex;
        align-items: center;
    }
    .order_table_link{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 48px;
    }
    .order_table_link a{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    /*會員專區-訂單查詢*/
    .order_status{
        position: relative;
        display: block;
    }
    .order_status::before {
        position: absolute;
        content: "";
        width: 2px;
        height: calc(100% - 10px);
        left: 7px;
        top: 2px;
        background-color: var(--border-color);
        z-index: 1;
    }
    .order_status_item_point::before, .order_status_item_point::after {
        display: none;
    }
    .order_status_item {
        position: relative;
        z-index: 2;
    }
    .order_status_item_point{
        margin-bottom: 0;
    }
    .order_status_item_point .icon {
        width: 16px;
        height: 16px;
    }
    .order_status_item_txt{
        text-align: left;
        padding-left: 28px;
        margin-top: -18px;
        margin-bottom: 16px;
    }
    .order_status {
        margin-bottom: 32px;
    }
    .order_status_item:last-child{
        position: relative;
    }
    .order_status_item:last-child::after{
        position: absolute;
        content: "";
        width: 2px;
        height: 100%;
        background-color: #fff;
        left: 7px;
        top: 0;
        z-index: 1;
    }
    .order_status_item:last-child .icon{
        position: relative;
        z-index: 2;
    }
    .cart_dashboard.order_record_content .product_list_lastcheck_body{
        padding: 0 8px;
    }
}

/*sm以下*/
@media(max-width: 575px) {
    h1{
        font-size: 28px;
    }
    h2{
        font-size: 24px;
    }
    h3{
        font-size: 20px;
    }
    .block_mb{
        margin-bottom: 80px;
    }
    .main_pt {
        padding-top: 24px;
    }
    .main_pb{
        padding-bottom: 48px;
    }
    .w_200, .w_300{
        max-width: 100%;
    }
    /*搜尋*/
    .search_input_box .my_select{
        width: 100px;
    }
    /*吐司*/
    .my_toast{
        top: 20%;
        width: calc(100% - 48px);
        left: 24px;
    }
    /*彈窗*/
    .modal-dialog{
        margin-left: 16px;
        margin-right: 16px;
    }
    .my_modal .modal-footer .two_btn{
        width: calc(100% + 24px);
    }
    .my_modal .modal-footer .two_btn>div {
        flex: 1;
    }
    .my_modal .modal-footer .two_btn>div .btn{
        min-width: auto;
        width: 100%;
    }
    /*簡單彈窗*/
    .simple_modal .modal-footer .two_btn>div{
        flex: 1;
    }
    .simple_modal .modal-footer .two_btn .btn{
        width: 100%;
        min-width: auto;
    }
    /*分享列*/
    .share_list_box {
        margin-top: 32px;
    }
    .share_list_box p::after {
        width: 24px;
        margin-left: 8px;
        margin-right: 8px;
    }
    .share_item+.share_item {
        margin-left: 24px;
    }
    /*頁面標題*/
    .page_title{
        padding-bottom: 10px;
        padding-top: 12px;
        background-color: var(--bg-color);
        margin-bottom: 32px;
    }
    .page_title h1{
        font-size: 20px;
        color: var(--font-color2);
    }
    /*登入註冊*/
    #login_Modal .close_modal_btn .btn-close{
        width: 40px;
        height: 40px;
        padding: 0;
        margin-right: -8px;
    }
    #login_Modal .modal-body {
        padding: 16px 20px 32px 20px;
    }
    .login_modal_block_title {
        margin-top: -28px;
    }
    .login_form {
        margin-top: 24px;
    }
    /*看更多*/
    .block_more_link {
        margin-top: 40px;
    }
    /*區塊標題*/
    .block_title {
        margin-bottom: 20px;
    }
    .block_title h2, .block_title h1{
        font-size: 22px;
    }
    .block_title h2::before, .block_title h1::before{
        width: 32px;
        left: calc(50% - 16px);
    }
    /*表單*/
    .my_form_btn .two_btn{
        justify-content: center;
    }
    .my_form_btn .two_btn>div{
        flex: 1;
    }
    .my_form_btn .two_btn>div .btn{
        min-width: auto;
        width: 100%;
    }
    /*文章清單*/
    .article_inventory{
        padding-bottom: 0;
    }
    .article_inventory_img{
        order: 1;
        width: 100%;
        padding-top: 0;
    }
    .article_inventory_body{
        padding: 20px 12px 0 12px;
        order: 2;
    }
    .article_inventory .article_card_info{
        text-align: center;
    }
    .article_inventory .article_card_info::before {
        left: calc(50% - 12px);
    }
    /*活動卡片*/
    .news_card_list{
        margin-bottom: -20px;
    }
    .news_card_item{
        width: 100%;
        padding-bottom: 20px;
    }
    /*關鍵字*/
    .tag_list{
        margin-bottom: -16px;
    }
    .tag_list span{
        padding-bottom: 16px;
    }
    .tag_list span.txt{
        width: 100%;
    }
    /*商品列表*/
    .product_card_list{
        margin-bottom: -32px;
    }
    .product_card_item{
        width: 50%;
        padding-bottom: 32px;
    }
    .product_card_item a{
        display: flex;
        flex-direction: column;
        height: calc(100% - 56px);
    }
    .putin_cart_btn{
        height: 36px;
    }
    /*首頁-banner*/
    .banner_box{
        margin-bottom: 48px;
    }
    .banner_box>.my_container{
        padding-left: 0;
        padding-right: 0;
    }
    .banner_Swiper .swiper-pagination{
        bottom: 0;
    }
    /*圖片連結*/
    .link_card{
        display: block;
        background-color: var(--bg-color);
        padding: 8px 8px 12px 8px;
    }
    .link_card_list {
        margin-bottom: -16px;
    }
    .link_card_item {
        width: 100%;
        padding-bottom: 16px;
    }
    /*寵物小知識*/
    .index_article_box.block_mb{
        margin-bottom: 48px;
    }
    /*部落格*/
    .blog_block_box+.blog_block_box{
        margin-top: 80px;
    }
    .blogx_class_page .article_card_list {
        margin-top: 20px;
    }
    /*文章分類列表*/
    .blog_class_title{
        margin-top: 24px;
    }
    .blog_class_page .article_card_list{
        margin-top: 0;
    }
    /*置頂按鈕*/
    .go_top{
        right: 16px;
    }
    /*文章內容頁*/
    .article_container header {
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .article_img {
        margin-top: 24px;
    }
    .recommend_article_box{
        margin-top: 80px;
    }
    /*商品列表頁*/
    .product_page_banner{
        margin-top: 24px;
        margin-bottom: 64px;
    }
    .search_results {
        margin-bottom: 20px;
    }
    .search_results .block_title h1{
        font-size: 22px;
    }
    .search_results .my_select{
        padding: 0 40px 0 8px;
        height: 36px;
        border-radius: 0;
        border: none;
        border-bottom: solid 1px var(--border-color);
    }
    .search_results .my_select:hover{
        border-bottom: solid 1px var(--font-color2);
    }
    .search_results_order{
        order: 1;
    }
    .search_results_order .my_select{
        margin-right: auto;
        width: 100%;
    }
    .search_results_count{
        order: 2;
        text-align: center;
        margin-top: 16px;
    }
    /*商品內容頁*/
    .product_content_page~.page_footer{
        padding-bottom: 60px;
    }
    .product_content_row{
        padding-top: 0;
    }
    .product_pic_swiper_box{
        padding-right: 0;
        margin-left: -16px;
        margin-right: -16px;
    }
    .product_pic_swiper_box .swiper_button_box .swiper-button-next, .product_pic_swiper_box .swiper_button_box .swiper-button-prev{
        display: none;
    }
    .product_info {
        padding-left: 0;
        margin-top: 20px;
    }
    .product_present_box {
        margin-top: 64px;
    }
    .product_present_tabcontent {
        padding-top: 32px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .product_info h1 {
        margin-bottom: 8px;
    }
    .producg_keep {
        margin-top: 24px;
    }
    .producg_keep .keep_btn{
        margin-left: auto;
        margin-right: auto;
    }
    .product_buy {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        z-index: 100;
        border-top: solid 1px var(--bg-color);
    }
    .product_buy .two_btn{
        margin: 0;
    }
    .product_buy .two_btn>div{
        flex: 1;
        padding: 0;
    }
    .product_buy .two_btn>div .btn{
        width: 100%;
        border-radius: 0;
        height: 60px;
    }
    .product_buy .two_btn>div .btn.maincolor_border_btn:hover{
        background-color: #fff;
        color: var(--font-color);
    }
    .recommend_product_box {
        margin-top: 32px;
        padding-top: 32px;
    }
    /*購物車*/
    .order_step_box {
        padding-top: 32px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .cart_product_table {
        margin-top: 24px;
    }
    .discount_accord {
        margin-top: 16px;
    }
    .discount_accord_remind {
        margin-top: 16px;
    }
    .cart_order_price {
        margin-top: 16px;
    }
    .cart_go_nextstep .two_btn>div{
        flex: 1;
    }
    .cart_go_nextstep .two_btn>div .btn{
        width: 100%;
    }
    .cart_noitem{
        margin-top: 64px;
        min-height: 50vh;
    }
    .cart_dashboard{
        margin-top: 16px;
    }
    .cart_dashboard_body {
        padding: 0px 8px;
    }
    .product_list_lastcheck{
        margin-top: 24px;
    }
    .product_list_lastcheck_body {
        padding: 0;
    }
    .product_list_lastcheck_body .product_table_count{
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
    }
    .product_list_lastcheck_body .product_table_count::before{
        content: "數量：";
    }
    /*完成訂單*/
    .order_success_content{
        margin-top: 32px;
        padding: 0;
        border: none;
        border-radius: 0;
    }
    .order_success_content_txt{
        margin-bottom: 32px;
    }
    /*最新消息內容*/
    .news_img {
        margin-top: 24px;
    }
    /*搜尋結果頁*/
    .search_page_input_box {
        margin-top: 20px;
        margin-bottom: 28px;
    }
    .search_page_input_txt{
        display: none;
    }
    .search_page_input_box input{
        font-size: 22px;
    }
    .search_article_page .search_results_count{
        margin-top: 0;
    }
    /*404*/
    .error_content{
        padding-bottom: 40px;
        /* border-bottom: none; */
    }
    .error_page .recommend_article_box {
        margin-top: 40px;
    }
    .error_txt{
        padding: 0;
    }
    .error_img{
        margin-bottom: 32px;
    }
    .error_img img{
        max-width: 80%;
    }
    /*會員專區*/
    .member_data .form-label{
        width: 120px;
    }
    /*會員專區-追蹤清單*/
    .product_keep_delete{
        right: 16px;
    }
    /*會員專區-訂單查詢*/
    .order_noitem{
        text-align: center;
    }
    .order_noitem_btn .btn{
        margin: 0 auto;
    }
    .cart_dashboard.order_record_content{
        margin-top: 16px;
    }
}

/*超窄*/
@media(max-width: 350px) {
    /*完成訂單*/
    .order_success_order_btn .two_btn>div{
        flex: 1;
    }
    .order_success_order_btn .two_btn>div .btn{
        min-width: none;
        width: 100%;
    }
}