@charset "utf-8";


@media (max-width:1399px) {

    /*-----------------------------------------------
        首頁index
    -----------------------------------------------*/
    /*header__carousel*/
    .header__carousel .owl-dots .owl-dot::after {
        /* right: calc(0px - calc((100vw - 1140px)/2)); */
        right: calc(80px - calc((100vw - 1140px)/2));
    }

    /*card__carousel*/
    /* .card__carousel__outer {
        width: calc(100vw - ((100% - 1140px)/2));
    } */

    /* .card__more {
        padding-top: 500px;
    } */
    /* locations */
    .locations_listbox{
        background-position: right -70px;
    }
    /*-----------------------------------------------
        全站 swiper
    -----------------------------------------------*/
        .my-pagination{
            padding-left: calc((100vw - 1140px)/2 + 12px);
            padding-right: calc((100vw - 1140px)/2 + 12px);
        }
}

@media (max-width:1199px) {

/*-----------------------------------------------
    首頁index
-----------------------------------------------*/
    /*header__carousel*/
    .header__carousel .owl-dots .owl-dot::after {
        /* right: calc(0px - calc((100vw - 960px)/2)); */
        right: calc(80px - calc((100vw - 960px)/2));
    }

    /*card__carousel*/
    /* .card__carousel__outer {
        width: calc(100vw - ((100% - 960px)/2));
    } */

    /* .card__more {
        padding-top: 420px;
    } */

    /*top banner*/
    .fTitle {
        font-size: 32px;
    }
    /* locations */
    .locations_listbox{
        background-position: right -140px;
    }
    /* designerworks */    
    .designerworks_txtbox .f36{
        font-size: 1.25rem;
    }
    /* serviceProcess */
    .serviceProcess_bg.pageFrame{        
        margin-top:-40px;
    }

    /* service */
    .serviceItems_list:nth-child(even) {
        margin-top: 0;
    }
    .serviceItems_list:nth-child(even) .serviceItems_Num {
        left: initial;
        right: -132px;
        color: #fff;
    }
    /* franchising */
    .franchList{
        width:34%;
        max-width: initial;       
    }
    .franchSlider{        
        width: 66%;
        max-width: initial;     
        margin-left: 30px;    
    }
    /*--------
    ---------------------------------------
        全站 swiper
    -----------------------------------------------*/
        .my-pagination{
            padding-left: calc((100vw - 960px)/2 + 12px);
            padding-right: calc((100vw - 960px)/2 + 12px);
        }

    /* instafeed */
    /* .modal-dialog-scrollable .modal-content .modal-body{
        max-height: 532px;
    } */
}

@media (max-width:991px) {

/*-----------------------------------------------
    首頁index
-----------------------------------------------*/
    /*header__carousel*/
    .header__carousel .owl-dots .owl-dot::after {
        /* right: calc(0px - calc((100vw - 720px)/2)); */
        right: calc(80px - calc((100vw - 720px)/2));
    }

    /*card__carousel*/
    /* .card__carousel__outer {
        width: calc(100vw - ((100% - 720px)/2));
    } */

    .card__outer .card__title {
        font-size: 16px;
    }

    /* .card__more {
        padding-top: 380px;
    } */
    /*fixed btn*/
    .goTop {        
        right: 32px;
    }

    .btn--fixed {
        bottom: 120px;
        right: 34px;
    }
    /* .btn--fixed-line {
        bottom: 220px;
    } */
    /* locations */
    .locations_listbox{
        background:none;
    }
    .locations_listbox ul>li>div{
        color: var(--Gray3);
    }
    .serviceItems_list:nth-child(even) .serviceItems_Num {
        left: -110px;
        right: initial;
        color: #fff;
    }
    /* designer */
    .designerName.f24{
        font-size: 1rem;
    }
    .designerworksTitle .f32{
        font-size: 1.25rem;
    }
    /* about */
    .about_diff_desc{
        height: 100px;
    }
    .about_how_title.f32,
    .about_diff_title.f32{
        font-size: 1.5rem;
    }
    .abouttop_bg .f24{
        font-size: 1rem;
    }
    /* franchising */
    .franchising_build_txt{
        border-left: none;       
        border-top: 1px solid #aaa;
    }
    .franchList .swiper-pagination {
        border-top: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .franchList{
        width:100%;        
    }
    .franchSlider{        
        width: 100%;        
        margin-left: 0; 
        padding: 0 20px;  
    }
    .franchTitle{
        margin-top: 20px;
    }
    .franchFrame .franchList .swiper-pagination-bullet{
        text-align: center;
    }
    .franchFrame .franchList .swiper-pagination-bullet .panNo{        
        margin-right: 0 !important;
    }
    /* contact */
    /* .contact_bg .f24{
        font-size:1.2rem
    } */
    /* login */
    .loginf .f32{
        font-size:1.5rem
    }
    .loginf .f24{
        font-size:1.2rem
    }
    /* m_order */
    .item-proname{
        width: 480px;
    }
    /* cart */
    .cart_divider::before{
        display: none;
    }
    .cartList{
        display: none;
    }
    /*-----------------------------------------------
        全站 swiper
    -----------------------------------------------*/
        .my-pagination{
            padding-left: calc((100vw - 720px)/2 + 12px);
            padding-right: calc((100vw - 720px)/2 + 12px);
        }
        .swiper-pagination-bullets.swiper-pagination-horizontal{
            bottom: 0;
        }
    /*-----------------------------------------------
        log in
    -----------------------------------------------*/
    .registerLogin{
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
    /*-----------------------------------------------
        helpCenter
    -----------------------------------------------*/
    /* .hc_nav .nav-link-text,
    .hc_nav .nav-link-text:hover,
    .hc_nav .nav-link.active .nav-link-text{
        background: none;
    } */

    /* instafeed */
    /* .modal-dialog-scrollable .modal-content .modal-body{
        max-height: unset;
        overflow-y: auto;
    } */
    .modal-dialog-scrollable .modal-content{
        overflow-y: scroll;
    }
}

@media (max-width:767px) {
/* 選單 */
    /* .hc-offcanvas-nav.nav-open[class*='hc-nav-'] div.nav-container {
        transform: translate3d(0, 0, 0) !important;
    } */
    .hc-offcanvas-nav.hc-nav-1.nav-levels-overlap.nav-position-left li.level-open > .nav-wrapper {     
        transform: translate3d(0, 0, 0) !important;
    }
    .sticky{        
        height: 60px; 
    }
    .sticky .navbar-toggler{
        padding: 20px;
    }
/*-----------------------------------------------
    首頁index
-----------------------------------------------*/
    /*blog*/
    .blog__header {
        padding: 16px 20px;
    }

    .box__body .box__title {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .box__body .box__text {
        font-size: 14px;
    }

    /*header__carousel*/
    .header__carousel .owl-dots .owl-dot::after {
        /* right: calc(0px - calc((100vw - 540px)/2));
        font-size: 16px; */
        display: none;
    }

    .header__carousel .owl-dots .owl-dot:first-child::after {
        bottom: 72vh;
    }

    .header__carousel .owl-dots .owl-dot:nth-child(2)::after {
        bottom: 66vh;
    }

    .header__carousel .owl-dots .owl-dot:nth-child(3)::after {
        bottom: 60vh;
    }

    .header__carousel .owl-dots .owl-dot:last-child::after {
        bottom: 54vh;
    }

    /*card__carousel*/
    /* .card__carousel__outer {
        width: calc(100vw - ((100% - 540px)/2));
    } */

    /* .card__more {
        padding-top: 360px;
    } */

    /*brand*/
    /* .brand__logo {
        width: 40px;
        height: 40px;
    } */

    .navbar-toggler {
        padding: 30px 20px;
        background-color: transparent;
    }

    /*top banner*/
    .social {
        left: 12px;
        top: 80%;
    }

    /*fixed btn*/
    .goTop {
        width: 40px;
        height: 40px;
        right: 32px;
        bottom: 24px;
        background-size: 60%;
    }

    .btn--fixed {
        width: 44px;
        height: 44px;
        bottom: 85px;
        right: 30px;
    }
    /* .btn--fixed-line {
        bottom: 160px;
    } */
    /* blog */
    .blogTitle {
        width: 90%;
    }
    .blogTitle .f32{
        font-size: 1.25rem;
    }
    /* designerworks */
    .designerworksTitle {
        width: 90%;
    }
    
    .serviceItems_list:nth-child(odd) {
        background-color: transparent;
    }
    .serviceItems_list .serviceItems_Num {
        left: 20px !important;
        right: initial !important;
        top:-130px;
        color: #fff;
    }
    /* designer */
    .avatar300 {
        height: 200px;
        width: 200px;
    }
    .designersPageTop.pageFrame{
        margin-top: -125px;
    }
    .motto{
        width: 100%;
    }
    /* franchising */    
    .franchFrame .franchList .swiper-pagination-bullet{
        
    }
    .franchFrame .franchList .swiper-pagination-bullet .panNo{        
        font-size:20px;
    }
    .franchImg {        
        max-width: 94%;
        margin: 20px auto 0;
    }
    .franchFlowlist li{
        line-height: 1.8;
    }
    .franchSlider .franchTitle {
        margin-right: 15px;
    }    
    /* m_order */    
    .item-proname{       
        width: 300px;
                
    } 
    /* cart */
    .stepper-line {
        width: 30px;
    }
    .stepper-circle {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }
    .stepper-label {
        width: 50px;
        font-size: 1rem;
    }
    .stepper {
        width: calc(100% - 210px);
    }
    .shoplist-title {
        width: 130px;
        font-size: 1rem;
        text-align: center;
    }
    .cartbadgenum {     
        /* right: 27px; */
        right: 12px;
    }
    /*-----------------------------------------------
        全站 swiper
    -----------------------------------------------*/
        .my-pagination{
            padding-left: calc((100vw - 540px)/2 + 12px);
            padding-right: calc((100vw - 540px)/2 + 12px);
        }
}

@media (max-width:575px) {

/*-----------------------------------------------
    首頁index
-----------------------------------------------*/
    /*blog*/
    .blog__header {
        width: 50%;
    }

    /*header__carousel*/
    .header__carousel .owl-dots .owl-dot::after {
        display: none;
    }

    /*card__carousel*/
    /* .card__carousel__outer {
        position: relative;
        width: 100%;
    } */

    .card__outer {
        margin-bottom: 24px;
    }

    .card__outer .card__title {
        font-size: 14px;
    }

    .card__carousel .owl-dots {
        bottom: 0;
    }

    /* .card__more {
        padding-top: 60px;
    } */

    /*footer*/
    .footer__nav__link {
        padding: 12px 0;
    }

    .footer__nav__link::before {
        width: 100%;
    }

    /*top banner*/
    .fTitle {
        font-size: 24px;
    }
    /* contact */
    /* .contact_bg .f24{
        font-size:1rem;
    }    */
     /* m_order */    
    .item-proname{       
        width: calc( 100vw - 240px );        
    }

    /*-----------------------------------------------
        全站 swiper
    -----------------------------------------------*/
        .my-pagination{
            padding-left: 40px;
            padding-right: 40px;
        }   

}

@media (max-width:480px) {
}