@media screen and (max-width: 483px){
    .MagicZoomPup{
        display: none !important;
    }
    .MagicZoomBigImageCont{
        display: none !important;
    }
    .container{
        width: 100%;
        margin: 0 auto;
    }
    .swap{
        overflow: hidden;
        padding: 0 15px;
    }

    /*頭部*/
    .header{
        height: 60px;
        border-bottom: 1px solid #d9d9d9;
        position: relative;
    }
    .header .swap{
        overflow: hidden;
    }
    .logo{
        float: left;
    }
    .logo img{
        height: 40px;
        margin: 10px 0;
    }
    .bars{
        float: right;
        width: 36px;
        height: 60px;
        position: relative;
    }
    .bars img{
        height: 30px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .nav{
        display: none;
        position: absolute;
        z-index: 1000;
        width: 100%;
        left: 0;
        top: 61px;
    }
    .nav ul{
        display: table;
    }
    .nav ul .nav-li{
        width: 100%;
        line-height: 40px;
        background: #f76e3a;
        border-bottom: 2px solid #ffff;
    }
    .nav ul .nav-li .nav-a{
        font-size: 12px;
        color: #fff;
        display: block;
        text-indent: 20px;
    }
    .nav ul .active{
        background: #000;
        border-bottom: 2px solid #fff;
    }
    .nav ul .active .nav-a{
        color: #fff;
    }
    .nav .nav-child{
        display: none;
    }
    .nav-child li{
        width: 100%;
        line-height: 40px;
        background: #f76e3a;
        border-bottom: 2px solid #fff;
    }
    .nav-child li:last-child{
        border: none;
    }
    .nav-child li a{
        font-size: 12px;
        color: #fff;
        display: block;
        text-align: center;
        line-height: 27px;
    }
    .shop-link{
        float: right;
    }
    .shop-link a{
        display: block;
        line-height: 60px;
        margin: 0 3px;
        float: left;
        font-size: 12px;
        color: #333333;
        padding-left: 12px;
    }
    .shop-link .login{
        background: url("../image/common/icon-logout.png") no-repeat center left;
        background-size: 10px;
    }
    .shop-link .cart{
        background: url("../image/common/icon-cart.png") no-repeat center left;
        background-size: 10px;
    }
    .footer{
        border-top: 1px solid #d9d9d9;
        line-height: 60px;
        text-align: center;
        font-size: 14px;
        color: #333333;
    }

    /*首頁*/
    .indexBanner{
        overflow: hidden;
        margin-top: 20px;
    }
    .indexBanner img{
        width: 100%;
    }
    .indexBanner iframe{
        width: 100%;
        height: 300px;
    }
    .iShopList{
        margin-top: 20px;
        overflow: hidden;
    }
    .iShopBox{
        width: 49%;
        margin-bottom: 20px;
        margin-right: 2%;
        float: left;
    }
    .iShopBox:nth-child(2n-2){
        margin-right: 0;
    }
    .iShopBox h4{
        font-size: 18px;
        color: #333333;
        text-indent: 10px;
        line-height: 1.5;
    }
    .iShopBox h4:first-child{
        margin-top: 30px;
    }
    .iShopBox h3{
        font-size: 24px;
        color: #333333;
        text-indent: 10px;
        line-height: 1.5;
    }
    .iShopBox .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin-left: 10px;
        margin-top: 30px;
    }
    .iShopBox:nth-child(4n-4){
        margin-right: 0;
    }
    .iShopBox img{
        width: 100%;
        height: 130px;
    }
    .iShopBox p{
        font-size: 12px;
        height: 24px;
        color: #666;
        line-height: 24px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .aBox{
        width: 100%;
        height: 40px;
        background: #ff6a36;
        overflow: hidden;
    }
    .aBox a{
        margin: 6px;
        line-height: 26px;
        text-align: center;
        display: block;
        color: #fff;
        border: 1px solid #fff;
        font-size: 12px;
    }
    .iShopDetail{
        margin-top: 30px;
        overflow: hidden;
        margin-bottom: 50px;
    }
    .iShopDetail h1{
        font-size: 30px;
        color: #000;
        line-height: 1.5;
    }
    .iShopDetail .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
    }
    .idBox{
        overflow: hidden;
        margin-top: 20px;
    }
    .idBoxLeft{
        width: 100%;
        overflow: hidden;
    }
    .idBoxLeft h1{
        font-size: 20px;
        color: #f56981;
        line-height: 2;
    }
    .idBoxLeft h6{
        font-size: 16px;
        color: #f56981;
        line-height: 2;
    }
    .idBoxLeft p{
        font-size: 14px;
        color: #a2a3a5;
        line-height: 1.5;
    }
    .idBoxRight{
        width: 100%;
        margin-top: 30px;
    }
    .idBoxRight img{
        width: 100%;
    }

    /*about*/
    .aboutBanner{
        width: 100%;
        height: 200px;
        background: url("../image/about/about-banner.png") no-repeat center center;
        font-size: 30px;
        color: #333333;
        line-height: 200px;
        text-align: center;
        background-size: 100%;
    }
    .aboutBox{
        overflow: hidden;
        margin-top: 30px;
    }
    .aboutBoxItem{
        overflow: hidden;
        margin-bottom: 50px;
    }
    .aboutBoxContent{
        padding: 30px 15px;
        background: #f7f7f7;
        text-align: left;
    }
    .aboutBoxContent .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin: 10px 0;
    }
    .aboutBoxContent h1{
        font-size: 36px;
        color: #000;
        line-height: 1.5;
    }
    .aboutBoxContent h2{
        font-size: 18px;
        color: #f56981;
        line-height: 2;
    }
    .aboutBoxContent p{
        font-size: 14px;
        color: #a2a3a5;
        line-height: 2;
    }
    .aboutBoxImg{
        width: 100%;
    }
    .aboutBoxImg img{
        width: 100%;
    }
    .aboutList{
        width: 100%;
        margin: 0 auto 30px auto;
        position: relative;
    }
    .abImgBox{
        width: 100%;
        height: 360px;
        position: relative;
    }
    .abImgBox img{
        position: absolute;
        inset: 0;
        object-fit: cover;
        object-position: center center;
        width: 100%;
        height: 100%;
        border-radius: 16px;
    }
    .aboutList .swiper-button-prev{
        left: 0;
        color: #fff;
        background: #f76e3a;
        height: 360px;
        top: 22px;
    }
    .aboutList .swiper-button-prev:after{
        font-size: 18px;
    }
    .aboutList .swiper-button-next{
        right: 0;
        color: #fff;
        background: #f76e3a;
        height: 360px;
        top: 22px;
    }
    .aboutList .swiper-button-next:after{
        font-size: 18px;
    }

    /*分店介紹*/
    .detailBanner{
        width: 100%;
        background: url("../image/detail/detail-banner.png") no-repeat center center;
        overflow: hidden;
        margin: 0 0 30px 0;
        padding: 15px 0;
        background-size: 100%;
    }
    .dbBox{
        width: 100%;
        position: relative;
    }
    .dbBox img{
        width: 100%;
    }
    .dbBox iframe{
        width: 100%;
        height: 300px;
    }
    .dbBox h1{
        font-size: 30px;
        text-align: center;
        color: #333333;
        line-height: 1.5;
    }
    .dbBox .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin: 10px auto;
    }
    .detailAddress{
        overflow: hidden;
        margin-top: 30px;
    }
    .daLeft{
        width: 100%;
        height: 300px;
    }
    .daLeft iframe{
        width: 100%;
        height: 300px;
    }
    .daRight{
        width: 100%;
    }
    .daRight h1{
        font-size: 24px;
        color: #f56981;
        border-bottom: 1px solid #e6e6e6;
        line-height: 2;
    }
    .daRight p{
        font-size: 16px;
        color: #a2a3a5;
        line-height: 1.5;
        margin: 15px 0;
        padding-left: 30px;
    }
    .daRight .address{
        background: url("../image/detail/address.png") no-repeat left 5px;
    }
    .daRight .tel{
        background: url("../image/detail/tel.png") no-repeat left 5px;
    }
    .daRight .time{
        background: url("../image/detail/time.png") no-repeat left 5px;
    }
    .daRight .seePrice{
        width: 200px;
        height: 50px;
        background: #f76e3a;
        overflow: hidden;
    }
    .seePrice a{
        display: block;
        margin: 6px;
        line-height: 36px;
        border: 1px solid #fff;
        color: #fff;
        font-size: 16px;
        text-align: center;
    }
    .blackBox{
        width: 100%;
        height: 100vh;
        background: #000;
        opacity:0.3;
        z-index: 99;
        position: fixed;
        top: 0;
        display: none;
    }
    .detailPrice{
        display: none;
        width: 100%;
        position: fixed;
        top: 20%;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 100;
        cursor: zoom-out;
    }
    .detailPrice img{
        width: 100%;
    }
    .detailBarList{
        overflow: hidden;
        margin: 30px 0;
    }
    .detailBarList h1{
        font-size: 24px;
        color: #333333;
        border-bottom: 1px solid #e6e6e6;
        line-height: 2;
    }
    .barList{
        overflow: hidden;
        margin: 15px 0 0 0;
    }
    .barItem{
        float: left;
        width: 49%;
        height: 250px;
        overflow: hidden;
        margin: 0 2% 15px 0;
    }
    .barItem:nth-child(2n-2){
        margin-right: 0;
    }
    .barItem p{
        font-size: 12px;
        color: #333333;
        text-align: center;
        line-height: 40px;
    }
    .barItemImg{
        width: 100%;
        height: 170px;
        overflow: hidden;
        position: relative;
    }
    .barItemImg img{
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .barItemA{
        width: 100%;
        height: 40px;
        background: #ff6a36;
        overflow: hidden;
    }
    .barItemA a{
        margin: 6px;
        font-size: 12px;
        line-height: 26px;
        text-align: center;
        display: block;
        color: #fff;
        border: 1px solid #fff;
    }

    /*理髮師詳情*/
    .barDetail{
        overflow: hidden;
        margin: 30px 0;
    }
    .bdLeft{
        width: 100%;
    }
    .bdH{
        width: 100%;
        font-size: 18px;
        color: #333333;
        background: #e6e6e6;
        line-height: 40px;
        text-indent: 15px;
    }
    .bdLeft ul{
        overflow: hidden;
        background: #e6e6e6;
        margin-top: 10px;
    }
    .bdLeft ul li{
        width: 100%;
        height: 60px;
        line-height: 60px;
    }
    .bdLeft ul li a{
        font-size: 14px;
        color: #333333;
        display: block;
    }
    .bdLeft ul li img{
        height: 40px;
        width: 40px;
        margin: 0 15px;
        border-radius: 50%;
    }
    .bdLeft ul li a:hover{
        color: #ff6a37;
    }
    .bdLeft ul .active a{
        color: #ff6a37;
    }
    .bdRight{
        width: 100%;
        overflow: hidden;
        margin-top: 30px;
    }
    .barContent{
        width: 100%;
        overflow: hidden;
        margin-bottom: 50px;
    }
    .bcLeft{
        width: 100%;
    }
    .bcLeft img{
        width: 100%;
        margin-bottom: 15px;
    }
    .bcRight{
        width: 100%;
        line-height: 2;
        color: #333;
    }
    .bcRight h1{
        line-height: 1.5;
    }
    .barWork{
        overflow: hidden;
        margin-top: 20px;
    }
    .barWork-item{
        width: 49%;
        height: 175px;
        margin-bottom: 10px;
        margin-right: 2%;
        float: left;
        overflow: hidden;
        position: relative;
    }
    .barWork-item:nth-child(2n-2){
        margin-right: 0;
    }
    .barWork-item img{
        position: absolute;
        inset: 0;
        object-fit: cover;
        object-position: center center;
        width: 100%;
        height: 100%;
        border-radius: 16px;
    }


    /*服務範圍*/
    .serviceBanner{
        width: 100%;
        height: 200px;
        background: url("../image/service/service.png") no-repeat center center;
        font-size: 42px;
        color: #333333;
        line-height: 200px;
        text-align: center;
        background-size: 100%;
    }
    .serviceContent{
        width: 100%;
        overflow: hidden;
        margin: 0 0 50px 0;
    }
    .serviceItem{
        width: 100%;
        overflow: hidden;
        margin: 50px 0;
        display: inline-table;
    }
    .si-content{
        width: 100%;
    }
    .si-content h1{
        font-size: 36px;
        color: #000;
        line-height: 2.0;
        background: url("../image/service/border.png") no-repeat bottom left;
    }
    .si-content h2,h3,h4,h5,h6{
        font-size: 20px;
        color: #f56981;
        line-height: 2;
        margin-top: 15px;
    }
    .si-content p{
        font-size: 14px;
        color: #a2a3a5;
        line-height: 2.5;
    }
    .si-img{
        width: 100%;
    }
    .si-img img{
        width: 100%;
    }

    /*優惠推廣*/
    .preferBanner{
        width: 100%;
        height: 200px;
        background: url("../image/prefer/prefer.png") no-repeat center center;
        font-size: 42px;
        color: #333333;
        line-height: 200px;
        text-align: center;
        background-size: 100%;
    }
    .prefer{
        overflow: hidden;
        width: 100%;
        margin-bottom: 50px;
    }
    .preferItem{
        width: 100%%;
        margin: 15px 0;
        overflow: hidden;
    }
    .preferItem img{
        width: 100%;
    }

    /*预约*/
    .reserveBanner{
        width: 100%;
        height: 200px;
        background: url("../image/reserve/reserve.png") no-repeat center center;
        font-size: 42px;
        color: #333333;
        line-height: 200px;
        text-align: center;
        background-size: 100%;
    }
    .reserveContent{
        overflow: hidden;
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid #d9d9d9;
    }
    .reserveContent h1{
        font-size: 30px;
        color: #333333;
    }
    .reserveContent .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .rcLeft{
        width: 100%;
        overflow: hidden;
    }
    .rcRight{
        width: 100%;
        overflow: hidden;
        margin-top: 30px;
    }
    .rcRight p{
        font-size: 16px;
        color: #333333;
        overflow: hidden;
        line-height: 2;
    }
    .rcRight span{
        float: left;
    }
    .reserveForm{
        overflow: hidden;
    }
    .reserveForm .Reform-control{
        width: 99%;
        margin: 0 0 15px 0;
        border: 1px solid #333333;
        color: #333333;
        font-size: 14px;
        height: 40px;
        text-indent: 10px;
        line-height: 40px;
    }
    .reserveForm .Reform-control:nth-child(2){
         height: 80px;
         text-indent: 0;
    }
    .Reform-control::placeholder{
        color: #333333;
    }
    [type="checkbox"], [type="radio"]{
        margin-right:5px;
    }
    .reserveForm .Reform-submit{
        width: 100%;
        height: 40px;
        line-height: 40px;
        border: none;
        outline: none;
        cursor: pointer;
        background: #f76e3a;
        text-align: center;
        color: #fff;
        font-size: 14px;
    }
    .reserveContact{
        overflow: hidden;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .reserveContact h1{
        font-size: 30px;
        color: #333333;
    }
    .reserveContact .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .reLink{
        overflow: hidden;
    }
    .reLink a{
        font-size: 16px;
        color: #333333;
        line-height: 60px;
        margin-right: 20px;
    }
    .reLink a:first-child{
         display: table;
    }
    .reLink img{
        height: 30px;
    }

    /*产品列表*/
    .shopBox{
        overflow: hidden;
        margin: 30px 0;
    }
    .shopLeft{
        width: 100%;
    }
    .shopLogo{
        width: 100%;
        height: 40px;
        position: relative;
    }
    .shopLogo img{
        position: absolute;
        height: 40px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .shopNav{
        margin-top: 20px;
        display: table;
    }
    .shopNav h1{
        line-height: 36px;
        background: #f76e3a;
        font-size: 14px;
        display: block;
        color: #fff;
        text-indent: 6%;
        letter-spacing: 1px;
    }
    .shopNav ul{
        background: #f7f7f7;
        display: table;
    }
    .shopNav ul li{
        width: 94%;
        margin: 0 0 0 6%;
        line-height: 46px;
        border-bottom: 1px solid #e0e0e0;
        font-size: 14px;
        position: relative;
    }
    .shopNav ul li a{
        color: #333333;
        display: block;
    }
    .shopNav ul .ShopNavLi:hover{
        background: url("../image/shop/db.png") no-repeat 300px 20px;
    }
    .shopNav ul .ShopNavLi:hover .bs{
        color: #f76e3a;
    }
    .shopNav ul .active{
        background: url("../image/shop/db.png") no-repeat 300px 20px;
    }
    .shopNav ul .active .bs{
        color: #f76e3a;
    }
    .shopNav ul li .shopNavChild{
        display: none;
        width: 100%;
    }
    .shopNavChild li:hover a{
        color: #f76e3a;
    }
    .shopRight{
        width: 100%;
        margin-top: 30px;
        overflow: hidden;
    }
    .shopSearch{
        width: 100%;
        overflow: hidden;
    }
    .shopSearchInput{
        width: 99%;
        height: 38px;
        border: 1px solid #d9d9d9;
        font-size: 14px;
        text-indent: 15px;
    }
    .shopSearchInput::placeholder{
        font-size: 14px;
        color: #999999;
    }
    .shopSearchSubmit{
        width: 100%;
        height: 40px;
        background: #f76e3a;
        color: #fff;
        font-size: 14px;
        margin-top: 15px;
    }
    .shopRight h1{
        font-size: 18px;
        color: #ffffff;
        line-height: 40px;
        background: #565656;
        text-indent: 15px;
        margin-top: 20px;
    }
    .shopRight a{
        color: #fff;
    }
    .shopList{
        overflow: hidden;
        width: 100%;
        height: auto;
        margin-top: 20px;
    }
    .shopItem{
        float: left;
        width: 49%;
        height: auto;
        background: #f7f7f7;
        margin: 0 2% 10px 0;
    }
    .shopItem:nth-child(2n-2){
        margin-right: 0;
    }
    .shopImgBox{
        position: relative;
        width: 90%%;
        height: 170px;
        margin: 5%;
    }
    .shopImgBox img{
        position: absolute;
        width: auto;
        height: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .shopItem p{
        font-size: 14px;
        color: #333333;
        line-height: 24px;
        height: 24px;
        overflow: hidden;
        padding: 0 8px;
        text-overflow: ellipsis;
        white-space:nowrap;
    }
    .shopItem h2{
        font-size: 18px;
        color: #ff3030;
        line-height: 40px;
        height: 40px;
        overflow: hidden;
        padding: 0 8px;
    }
    .page{
        display: table;
        margin: 20px auto;
    }
    .page a{
        font-size: 12px;
        color: #333333;
        float: left;
        display: block;
        border: 1px solid #333;
        padding: 5px 8px;
        margin: 0 5px;
        border-radius: 3px;
    }
    .page .active{
        background: #f76e3a;
        border: 1px solid #f76e3a;
        color: #fff;
    }

    /*聯絡我們*/
    .contactBanner{
        width: 100%;
        height: 200px;
        background: url("../image/contact/caontact.png") no-repeat center center;
        font-size: 42px;
        color: #333333;
        line-height: 200px;
        text-align: center;
        background-size: 100%;
    }
    .contactBox{
        overflow: hidden;
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 30px;
        padding-bottom: 30px;
    }
    .ctLeft{
        width: 100%;
    }
    .ctLeft h1{
        font-size: 24px;
        color: #f56981;
        margin-top: 30px;
    }
    .ctLeft .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .ctLeft p{
        font-size: 16px;
        color: #a2a3a5;
        line-height: 1.5;
        margin: 15px 0;
        padding-left: 30px;
    }
    .ctLeft .address{
        background: url("../image/detail/address.png") no-repeat left 5px;
    }
    .ctLeft .tel{
        background: url("../image/detail/tel.png") no-repeat left 5px;
    }
    .ctRight{
        width: 100%;
        height: 400px;
        overflow: hidden;
    }
    .ctRight iframe{
        width: 100%;
        height: 400px;
    }
}