@media screen and (min-width: 483px){
    .container{
        max-width: 1920px;
        margin: 0 auto;
    }
    .swap{
        width: 1500px;
        overflow: hidden;
        margin: 0 auto;
    }

    /*頭部*/
    .header{
        height: 145px;
        border-bottom: 1px solid #d9d9d9;
    }
    .header .swap{
        overflow: unset;
    }
    .logo{
        float: left;
    }
    .logo img{
        height: 144px;
        margin: 0;
    }
    .bars{
        display: none;
    }
    .nav{
        float: left;
        margin-left: 80px;
    }
    .nav ul{
        display: table;
    }
    .nav ul .nav-li{
        line-height: 83px;
        margin: 30px 25px;
        border-bottom: 2px solid #fff;
        position: relative;
    }
    .nav ul .nav-li .nav-a{
        font-size: 16px;
        color: #333333;
        display: block;
    }
    .nav ul .active .nav-a{
        color: #f76e3a;
    }
    .nav ul .nav-li .nav-a{transition: 0.5s ease;position: relative;}
    .nav ul .nav-li .nav-a:not(.lang):after{position: absolute;bottom: 0;left: 0;width:0;height: 2px;background:#f76e3a;content: '';transition: 1s ease;}
    .nav ul .nav-li .nav-a:hover{color: #f76e3a;text-decoration: none;}
    .nav ul .nav-li .nav-a:hover:after{width:100%;}

    .nav .nav-child{
        position: absolute;
        top: 70px;
        left: 30px;
        border: 1px solid #cccccc;
        display: none;
        z-index: 98;
    }
    .nav-child li{
        width: 150px;
        padding: 10px 10px;
        background: #ffffff;
        line-height: 25px;
        border-bottom: 1px solid #e6e6e6;
        text-align:center;
    }
    .nav-child li a{
        font-size: 14px;
        color: #333333;
    }
    .nav-child li:hover a{
        color: #ff6f3a;
    }
    .nav ul .nav-li:hover .nav-child{
        display: block;
    }
    .shop-link{
        float: right;
    }
    .shop-link a{
        display: block;
        line-height: 85px;
        margin: 30px 25px;
        float: left;
        font-size: 16px;
        color: #333333;
        padding-left: 50px;
    }
    .shop-link .login{
        background: url("../image/common/icon-logout.png") no-repeat center left;
    }
    .shop-link .cart{
        background: url("../image/common/icon-cart.png") no-repeat center left;
    }
    .footer{
        border-top: 1px solid #d9d9d9;
        line-height: 100px;
        text-align: center;
        font-size: 14px;
        color: #333333;
        font-weight: 600;
    }

    /*首頁*/
    .indexBanner{
        overflow: hidden;
        margin-top: 20px;
    }
    .indexBanner img{
        width: 100%;
    }
    .indexBanner iframe{
        width: 100%;
        height: 844px;
    }
    .iShopList{
        margin-top: 100px;
        /*overflow: hidden;*/
    }
    .iShopBox{
        width: 24%;
        height: 380px;
        margin-right: 1.3%;
        margin-bottom: 50px;
        float: left;
    }
    .iShopBox h4{
        font-size: 36px;
        color: #333333;
        text-indent: 30px;
        line-height: 1.5;
        font-weight: 500;
    }
    .iShopBox h4:first-child{
        margin-top: 30px;
    }
    .iShopBox h3{
        font-size: 48px;
        color: #333333;
        text-indent: 30px;
        line-height: 1.5;
        font-weight: 500;
    }
    .iShopBox .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin-left: 30px;
        margin-top: 30px;
    }
    .iShopBox:nth-child(4n-4){
        margin-right: 0;
    }
    .iShopBox img{
        width: 100%;
        height: 250px;
    }
    .iShopBox p{
        font-size: 14px;
        color: #666;
        line-height: 40px;
    }
    .aBox{
        width: 100%;
        height: 50px;
        background: #ff6a36;
        overflow: hidden;
    }
    .aBox a{
        margin: 6px;
        line-height: 36px;
        text-align: center;
        display: block;
        color: #fff;
        border: 1px solid #fff;
    }
    .iShopDetail{
        margin-top: 50px;
        /*overflow: hidden;*/
        margin-bottom: 100px;
    }
    .iShopDetail h1{
        font-size: 48px;
        color: #000;
        line-height: 1.5;
    }
    .iShopDetail .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
    }
    .idBox{
        overflow: hidden;
        margin-top: 20px;
    }
    .idBoxLeft{
        width: 645px;
        min-height: 607px;
        overflow: hidden;
        float: left;
    }
    .idBoxLeft h1{
        font-size: 36px;
        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.8;
    }
    .idBoxRight{
        width: 855px;
        float: left;
    }
    .idBoxRight img{
        width: 100%;
    }

    /*about*/
    .aboutBanner{
        width: 100%;
        height: 350px;
        background: url("../image/about/about-banner.png") no-repeat center center;
        font-size: 72px;
        color: #333333;
        line-height: 350px;
        text-align: center;
    }
    .aboutBox{
        overflow: hidden;
        margin-top: 30px;
    }
    .aboutBox .swap{
        width: 80%;
        margin: 0 auto;
    }
    .aboutBoxItem{
        overflow: hidden;
        margin-bottom: 100px;
    }
    .aboutBoxContent{
        width: 60%;
        height: 520px;
        background: #f7f7f7;
        float: left;
        text-indent: 10%;
    }
    .aboutBoxContent .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin: 20px 0 30px 10%;
    }
    .aboutBoxContent h1{
        font-size: 36px;
        color: #000;
        line-height: 2;
        margin-top: 50px;
        font-family: 'Sarabun',"微軟正黑體",sans-serif;
    }
    .aboutBoxContent h2{
        font-size: 20px;
        line-height: 2.5;
        color: #f56981;
        font-weight: 600;
        font-family: 'Sarabun',"微軟正黑體",sans-serif;
    }
    .aboutBoxItem:nth-child(2) .aboutBoxContent h2{
        margin-top: 100px;
    }
    .aboutBoxContent p{
        font-size: 16px;
        line-height: 2.5;
        font-family: 'Sarabun',"微軟正黑體",sans-serif;
        color: #a2a3a5;
        letter-spacing: 1px;
        text-indent: 0;
        padding: 0 90px;
    }
    .aboutBoxItem:nth-child(1) .aboutBoxContent{

    }
    .aboutBoxItem:nth-child(1) .aboutBoxImg{
        margin-left: 10%;
    }
    .aboutBoxItem:nth-child(2) .aboutBoxContent{
        margin-left: 10%;
    }
    .aboutBoxImg{
        width: 30%;
        float: left;
    }
    .aboutBoxImg img{
        width: 100%;
    }
    .aboutList{
        width: 1540px;
        margin: 0 auto 50px auto;
        position: relative;
    }
    .abImgBox{
        width: 172px;
        height: 200px;
        position: relative;
        margin-left: 24px;
    }
    .abImgBox img{
        position: absolute;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    /*.aboutList img{*/
    /*    width: 172px;*/
    /*    height: 200px;*/
    /*    margin-left: 24px;*/
    /*}*/
    .aboutList .swiper-button-prev{
        left: 0;
        color: #fff;
        background: #f76e3a;
        height: 200px;
        top: 22px;
    }
    .aboutList .swiper-button-prev:after{
        font-size: 16px;
    }
    .aboutList .swiper-button-next{
        right: 0;
        color: #fff;
        background: #f76e3a;
        height: 200px;
        top: 22px;
    }
    .aboutList .swiper-button-next:after{
        font-size: 16px;
    }

    /*分店介紹*/
    .detailBanner{
        width: 100%;
        height: 520px;
        background: url("../image/detail/detail-banner.png") no-repeat center center;
        overflow: hidden;
    }
    .dbBox{
        float: left;
        width: 50%;
        height: 440px;
        margin: 40px 0;
        position: relative;
    }
    .dbBox img{
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .dbBox iframe{
        width: 100%;
        height: 440px;
    }
    .dbBox h1{
        font-size: 60px;
        color: #333333;
        text-indent: 100px;
        line-height: 1.5;
        font-weight: 500;
    }
    .dbBox h1:first-child{
        margin-top: 50px;
    }
    .dbBox .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin: 20px 0 0 100px;
    }
    .detailAddress{
        overflow: hidden;
        margin-top: 50px;
    }
    .daLeft{
        float: left;
        width: 50%;
        height: 450px;
    }
    .daLeft iframe{
        width: 100%;
        height: 450px;
    }
    .daRight{
        float: left;
        width: 45%;
        margin-left: 5%;
        height: 450px;
    }
    .daRight h1{
        font-size: 36px;
        color: #f56981;
        border-bottom: 1px solid #e6e6e6;
        line-height: 2.5;
    }
    .daRight p{
        font-size: 14px;
        color: #a2a3a5;
        line-height: 1.8;
        margin: 30px 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: 270px;
        height: 65px;
        background: #f76e3a;
        overflow: hidden;
    }
    .seePrice a{
        display: block;
        margin: 6px;
        line-height: 51px;
        border: 1px solid #fff;
        color: #fff;
        font-size: 20px;
        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: 960px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 100;
        cursor: zoom-out;
    }
    .detailPrice img{
        width: 100%;
    }
    .detailBarList{
        overflow: hidden;
        margin: 50px 0;
    }
    .detailBarList h1{
        font-size: 36px;
        color: #f56981;
        border-bottom: 1px solid #e6e6e6;
        line-height: 2.4;
    }
    .barList{
        overflow: hidden;
    }
    .barItem{
        float: left;
        width: 284px;
        height: 475px;
        overflow: hidden;
        margin: 25px 20px 25px 0;
    }
    .barItem:nth-child(5n-5){
        margin-right: 0;
    }
    .barItem p{
        font-size: 16px;
        color: #a2a3a5;
        text-align: center;
        line-height: 75px;
    }
    .barItemImg{
        width: 284px;
        height: 350px;
        overflow: hidden;
        position: relative;
    }
    .barItemImg img{
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .barItemA{
        width: 100%;
        height: 50px;
        background: #ff6a36;
        overflow: hidden;
    }
    .barItemA a{
        margin: 6px;
        line-height: 36px;
        text-align: center;
        display: block;
        color: #fff;
        border: 1px solid #fff;
    }

    /*理髮師詳情*/
    .barDetail{
        overflow: hidden;
        margin: 50px 0;
    }
    .bdLeft{
        width: 285px;
        float: left;
    }
    .bdH{
        width: 92%;
        font-size: 24px;
        color: #333333;
        background: #e6e6e6;
        line-height: 50px;
        padding-left: 8%;
    }
    .bdLeft ul{
        overflow: hidden;
        background: #e6e6e6;
        margin-top: 10px;
    }
    .bdLeft ul li{
        width: 100%;
        height: 80px;
        line-height: 80px;
        margin: 10px 0;
    }
    .bdLeft ul li a{
        font-size: 16px;
        color: #333333;
        display: block;
    }
    .bdLeft ul li img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 0 20px;
    }
    .bdLeft ul li a:hover{
        color: #ff6a37;
    }
    .bdLeft ul .active a{
        color: #ff6a37;
    }
    .bdRight{
        width: 1200px;
        float: left;
        overflow: hidden;
        margin-left: 15px;
    }
    .barContent{
        width: 100%;
        overflow: hidden;
        margin-bottom: 50px;
    }
    .bcLeft{
        width: 500px;
        float: left;
    }
    .bcLeft img{
        width: 100%;
    }
    .bcRight{
        width: 650px;
        float: left;
        margin-left: 50px;
        line-height: 2;
        color: #333;
    }
    .barWork{
        overflow: hidden;
        margin-top: 20px;
    }
    .barWork-item{
        float: left;
        width: 285px;
        height: 285px;
        margin: 0 15px 15px 0;
        position: relative;
    }
    .barWork img{
        position: absolute;
        inset: 0;
        object-fit: cover;
        object-position: center center;
        width: 100%;
        height: 100%;
        border-radius: 16px;
    }

    /*服務範圍*/
    .serviceBanner{
        width: 100%;
        height: 350px;
        background: url("../image/service/service.png") no-repeat center center;
        font-size: 72px;
        color: #333333;
        line-height: 350px;
        text-align: center;
    }
    .serviceContent{
        width: 100%;
        overflow: hidden;
        margin: 0 0 50px 0;
    }
    .serviceItem{
        width: 100%;
        overflow: hidden;
        margin: 50px 0;
        display: inline-table;
    }
    .serviceItem:nth-child(2n-1) .si-content{
        float: left;
    }
    .serviceItem:nth-child(2n-1) .si-img{
        float: right;
    }
    .serviceItem:nth-child(2n-2) .si-content{
        float: right;
    }
    .serviceItem:nth-child(2n-2) .si-img{
        float: left;
    }
    .si-content{
        width: 50%;
    }
    .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: 46%;
        padding: 0 2%;
    }
    .si-img img{
        width: 100%;
    }

    /*優惠推廣*/
    .preferBanner{
        width: 100%;
        height: 350px;
        background: url("../image/prefer/prefer.png") no-repeat center center;
        font-size: 72px;
        color: #333333;
        line-height: 350px;
        text-align: center;
    }
    .prefer{
        overflow: hidden;
        width: 100%;
        margin-bottom: 50px;
    }
    .preferItem{
        width: 30%;
        height: 562px;
        float: left;
        margin: 15px 1.5%;
        position: relative;
        overflow: hidden;
    }
    .preferItem img{
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
    }

    /*预约*/
    .reserveBanner{
        width: 100%;
        height: 350px;
        background: url("../image/reserve/reserve.png") no-repeat center center;
        font-size: 72px;
        color: #333333;
        line-height: 350px;
        text-align: center;
    }
    .reserveContent{
        overflow: hidden;
        margin-bottom: 50px;
        padding-bottom: 50px;
        border-bottom: 1px solid #d9d9d9;
    }
    .reserveContent h1{
        font-size: 48px;
        color: #333333;
    }
    .reserveContent .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .rcLeft{
        width: 50%;
        float: left;
        overflow: hidden;
    }
    .rcRight{
        width: 40%;
        float: left;
        margin-left: 10%;
        overflow: hidden;
    }
    .rcRight p{
        font-size: 24px;
        color: #333333;
        overflow: hidden;
        line-height: 2.4;
    }
    .rcRight span{
        float: left;
    }
    .reserveForm{
        overflow: hidden;
    }
    .reserveForm .Reform-control{
        width: 45%;
        margin: 0 4% 30px 0;
        border: 1px solid #333333;
        color: #333333;
        font-size: 16px;
        height: 48px;
        text-indent: 10px;
        float: left;
        line-height: 50px;
    }
    .reserveForm #attr_27{
        width: 94%;
    }
    .Reform-control::placeholder{
        color: #333333;
    }
    .reserveForm .Reform-submit{
        width: 200px;
        height: 50px;
        line-height: 50px;
        border: none;
        outline: none;
        cursor: pointer;
        background: #f76e3a;
        text-align: center;
        color: #fff;
        font-size: 16px;
        float: left;
    }
    .reserveContact{
        overflow: hidden;
        margin-bottom: 50px;
    }
    .reserveContact h1{
        font-size: 48px;
        color: #333333;
    }
    .reserveContact .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .reLink{
        overflow: hidden;
    }
    .reLink a{
        font-size: 24px;
        color: #333333;
        float: left;
        display: block;
        line-height: 60px;
        margin-right: 20px;
    }
    .reLink a:first-child{
        margin-right: 60px;
    }

    /*产品列表*/
    .shopBox{
        overflow: hidden;
        margin: 30px 0;
    }
    .shopLeft{
        width: 180px;
        float: left;
    }
    .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: 40px;
        background: #f76e3a;
        font-size: 16px;
        display: block;
        color: #fff;
        text-indent: 6%;
        letter-spacing: 1px;
    }
    .shopNav ul{
        background: #f7f7f7;
        padding-bottom: 100px;
        display: table;
    }
    .shopNav ul li{
        width: 94%;
        margin: 0 0 0 6%;
        line-height: 50px;
        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 150px center;
    }
    .shopNav ul .ShopNavLi:hover .bs{
        color: #f76e3a;
    }
    .shopNav ul .active{
        background: url("../image/shop/db.png") no-repeat 150px center;
    }
    .shopNav ul .active .bs{
        color: #f76e3a;
    }
    .shopNav ul li .shopNavChild{
        width: 180px;
        position: absolute;
        left: 170px;
        top: 0;
        display: none;
        z-index: 1000;
    }
    .shopNavChild li:hover a{
        color: #f76e3a;
    }
    .shopRight{
        width: 1300px;
        margin-left: 20px;
        float: left;
        overflow: hidden;
    }
    .shopSearch{
        width: 100%;
        overflow: hidden;
    }
    .shopSearchInput{
        width: 650px;
        height: 38px;
        float: left;
        border: 1px solid #d9d9d9;
        font-size: 14px;
        text-indent: 15px;
    }
    .shopSearchInput::placeholder{
        font-size: 14px;
        color: #999999;
    }
    .shopSearchSubmit{
        width: 80px;
        height: 40px;
        float: left;
        background: #f76e3a;
        color: #fff;
        font-size: 14px;
        margin-left: 15px;
        cursor: pointer;
    }
    .shopRight h1{
        font-size: 16px;
        color: #ffffff;
        line-height: 40px;
        background: #565656;
        text-indent: 15px;
        margin-top: 20px;
    }
    .shopRight a{
        color: #fff;
    }
    .shopList{
        overflow: hidden;
        width: 100%;
        height: auto;
    }
    .shopItem{
        float: left;
        width: 200px;
        height: auto;
        background: #f7f7f7;
        margin: 10px 20px 10px 0;
    }
    .shopItem:nth-child(6n-6){
        margin-right: 0;
    }
    .shopImgBox{
        position: relative;
        width: 184px;
        height: 184px;
        margin: 8px;
    }
    .shopImgBox img{
        position: absolute;
        width: auto;
        height: auto;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 100%;
    }
    .shopItem p{
        font-size: 14px;
        color: #333333;
        line-height: 25px;
        height: 25px;
        overflow: hidden;
        padding: 0 8px;
        text-overflow: ellipsis;
        white-space:nowrap;
    }
    .shopItem h2{
        font-size: 16px;
        color: #ff3030;
        line-height: 40px;
        height: 40px;
        overflow: hidden;
        padding: 0 8px;
    }
    .page{
        display: table;
        margin: 20px auto;
    }
    .page a{
        font-size: 16px;
        color: #333333;
        float: left;
        display: block;
        border: 1px solid #333;
        padding: 10px 15px;
        margin: 0 10px;
        border-radius: 5px;
    }
    .page .active{
        background: #f76e3a;
        border: 1px solid #f76e3a;
        color: #fff;
    }

    /*聯絡我們*/
    .contactBanner{
        width: 100%;
        height: 350px;
        background: url("../image/contact/caontact.png") no-repeat center center;
        font-size: 72px;
        color: #333333;
        line-height: 350px;
        text-align: center;
    }
    .contactBox{
        overflow: hidden;
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 50px;
        padding-bottom: 50px;
    }
    .ctLeft{
        width: 588px;
        padding-right: 112px;
        height: 450px;
        float: left;
    }
    .ctLeft h1{
        font-size: 36px;
        color: #f56981;
        margin-top: 90px;
    }
    .ctLeft .line{
        width: 50px;
        height: 5px;
        background: #f76e3a;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .ctLeft p{
        font-size: 16px;
        color: #a2a3a5;
        line-height: 1.5;
        margin: 30px 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: 800px;
        height: 450px;
        float: left;
        overflow: hidden;
    }
    .ctRight iframe{
        width: 100%;
        height: 450px;
    }
}