#regionType {
    display: block;
    max-height: 100%;
}
#stylistHeader {
    position: absolute;
}
html[lang=zh-hk] #stylistHeader, html[lang=zh-cn] #stylistHeader {
    top: 1px;
}
#MWrapper {
    animation: initial;
    -webkit-animation: initial;
	-moz-animation: initial;
	-ms-animation: initial;
	-o-animation: initial;
}
#shopHeader {
    margin-bottom: 12%;
    padding-top: 7%;
    position: absolute;
    font-size: 15px;
    -webkit-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    opacity: 0;
}
#listWrapper {
    margin-left: 20%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 24%;
    overflow: hidden;
    padding-bottom: 5%;
    /* position: relative; */
}

.regionItem {
    font-size: 25px;
    line-height: 1.75em;
    color: #929292;
}
.regionWrapper.show .regionItem {
    color: #000000;
}

.regionItem:hover {
    cursor: pointer;
    color: #000000;
}
ul.districtList {
    font-size: 22px;
    line-height: 1.75em;
    /* margin-left: 10%; */
    margin-bottom: 8%;
    /* position: relative; */
}
.shopListWrapper {
    margin-left: 18%;
    -webkit-animation: slidedown 1s;
    -moz-animation: slidedown 1s;
    -ms-animation: slidedown 1s;
    -o-animation: slidedown 1s;
    animation: slidedown 1s;
    position: relative;
}

li.shopWrapper {
    margin-bottom: 8%;
    color: #929292;
}

.shopWrapper{
	color: #929292;
	position: relative;
}
.shopWrapper a{
	/*text-decoration:none;
	color: #929292;*/
}
.shopWrapper.active, .shopWrapper:hover{
	color: #000000;
	-webkit-transition: all .5s ease-out; 
	-ms-transition: all .5s ease-out; 
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}
.shopWrapper:after, .shopWrapper.active:after{
	content:'';
	width: 0;
	height: 100%;
	position: absolute;
	right: 0;
	display: block;
	top: 0;
	-webkit-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	background-color: #F4F4F4;
	background: -webkit-linear-gradient(left, #F4F4F4 , #FFFFFF);
	background: -o-linear-gradient(left, #F4F4F4, #FFFFFF);
	background: -moz-linear-gradient(left ,#F4F4F4, #FFFFFF);
	background: linear-gradient(to left,#F4F4F4, #FFFFFF);
}
.shopWrapper:hover:after, .shopWrapper.active:after{
	content: '';
    width: 100%;
    height: 100%;
    right: 0;
}
.select:hover{
	cursor: pointer;
}
#listWrapper .mCSB_inside > .mCSB_container{
    /* margin-right: 0; */
}
.shopName {
    font-size: 20px;
    line-height: 1.5em;
}

.area {
    font-size: 15px;
    font-weight: 400;
}


li.districtTxt:hover, li.shopWrapper:hover{
    cursor: pointer;
}
li.stylistIDArray {
    width: 21%;
    display: inline-block;
    margin: 0 2%;
    vertical-align: top;
    text-align: left;
    margin-bottom: 2%;
    min-width: 110px;
    transition: .5s;
    cursor: pointer;
}
li.stylistIDArray a {
    text-decoration: none;
}
ul#stylistList {
    /* display: table; */
    /* width: 100%; */
    /* position: relative; */
    text-align: left;
    margin-bottom: 5%;
    padding-top: 10%;
    /* height: 100%; */
    /* box-sizing: border-box; */
}
img.stylistPic {
    width: 100%;
    /* height: 240px; */
    background-color: grey;
    margin-bottom: 5%;
}

#stylistListWrapper, #stylistDetailsWrapper {
    padding: 4% 5%;
    position: relative;
    height: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

li.stylistIDArray:nth-child(4n) {
    /* margin-right: 0; */
}

.stylistName {
    font-size: 18px;
    line-height: 1.5em;
    text-decoration: none;
    color: #000000;
}

.stylistTitle {
    font-weight: 400;
    color: #929292;
    font-size: 16px;
}

#btnStylistPrev, #btnStylistNext {
    width: 15px;
    height: 22px;
}

#btnStylistIndex {
    width: 22px;
    height: 22px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
}
#stylistCtrlWrapper {
    position: fixed;
    bottom: 5%;
    width: 40%;
    left: 44%;
    right: 0;
    margin: 0 auto;
}
#stylistControl {
    width: 100%;
    position: relative;
}

#btnStylistPrev {
    float: left;
}

#btnStylistNext {
    float: right;
}

.btnStylistCtrl {
    /* position: absolute; */
}
#RWrapper.details #stylistListWrapper, #RWrapper.all #stylistDetailsWrapper {
    display: none;
}
#stylistDetailsType {
    position: relative;
    /* left: 5%; */
    font-size: 15px;
    margin-bottom: 30px;
}
#stylistDetailsWrapper {
    padding: 4% 5%;
    max-width: 1600px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#detailsStylistThumb {
    width: 48%;
    /* height: 470px; */
    display: inline-block;
    vertical-align: middle;
    margin-right: 4%;
    /* max-width: 374px; */
}

.stylistInfoWrapper {
    display: inline-block;
    vertical-align: middle;
    width: 46%;
    text-align: center;
}

#detailsStylistName {
    font-size: 30px;
    margin-bottom: 3%;
}

#detailsStylistTitle {
    font-size: 21px;
}

#detailsStylistNameWrapper {
    margin-bottom: 25%;
    margin-bottom: 50px;
}

#detailsShopName {
    font-size: 21px;
}

#detailsShopArea {
    font-weight: 400;
    font-size: 16px;
}

#btnShopInfo {
    padding: 4% 3%;
    background-color: #2b2b2b;
    color: #FFFFFF;
    line-height: 1.25em;
    text-align: center;
    margin-bottom: 15%;
    font-size: 18px;
    cursor: pointer;
    max-width: 160px;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-bottom: 20px;
}
#btnShopInfo a {
    color: #FFFFFF;
    text-decoration: none;
}
#detailsShopWrapper {
    margin-bottom: 20px;
}

#detailsShopWrapper #detailsShopArea { margin: 10px 0; }


#detailsShopAddr {
    margin-bottom: 20%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
}
a#tel {
    text-decoration: none;
    color: #000000;
}
#detailsUpperWrapper {
    position: relative;
    margin-bottom: 30px;
}
#workList .stylistWorkItem {
    display: inline-block;
    width: 30%;
    margin: 0 1%;
    margin-bottom: 2.5%;
}
#workList .stylistWorkItem img{
	max-width:100%;
	cursor: pointer;
}
#stylistDescriptionWrapper {
    margin-bottom: 50px;
	line-height:25px;
}


#descContent ul {
    list-style: initial;
}
#workLoadMore {
    display: block;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
    margin-bottom: 100px;
}

#workList {
    position: relative;
    margin-bottom: 40px;
    text-align: left;
    /* text-align: center; */
}

#stylistWorkWrapper {
    text-align: center;
}

#workList .stylistWorkItem.hidden {
    display: none;
}
#gradientWrapper {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 99;
}

/*#gradientBG {
    height: 130px;
    background-color: #F4F4F4;
    background: -webkit-linear-gradient(bottom, transparent 10%,  #F4F4F4 90%);
    background: -o-linear-gradient(bottom, transparent 10%,  #F4F4F4 90%);
    background: -moz-linear-gradient(bottom ,transparent 10%,  #F4F4F4 90%);
    background: linear-gradient(to bottom,transparent 10%,  #F4F4F4 90%);
}*/
#innerWrapper {
    width: 86%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.regionWrapper.show {
    display: block;
}

.regionWrapper {
    display: none;
}
#descContent li {
    line-height: 1.5em;
    font-size: 15px;
    font-weight: 400;
    list-style-position: outside;
    padding: 0;
    /* text-indent: -2em; */
    margin-left: 2em;
}
.btnDown{
	display:none !important;
}
.districtTxt {
    color: #929292;
   	-webkit-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	text-decoration: none;
}

.districtTxt.active, .districtTxt :hover{
    color: #000000;
}
.lazyload {
	opacity: 0;
	-webkit-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}

.lazyloaded {
	opacity: 1;
	animation: listInY 1s ease-out forwards;
    -webkit-animation: listInY 1s ease-out forwards;
    -ms-animation: listInY 1s ease-out forwards;
    -moz-animation: listInY 1s ease-out forwards;
    -o-animation: listInY 1s ease-out forwards;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}
 #districtdown, #shopdown {
	display: none;
 }
#lbWrapper {
    display: none;
}
 #lbWrapper.show {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: block;
	top: 0;
}

#lbBg {
    background-color: #FFFFFF;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    position: absolute;
}

#lbContentWrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#lbImg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transition: .5s;
    -webkit-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    max-height: 70vh;
    max-width: 70vw;
    height: auto;
    width: auto;
}

#btnlbImgPrev, #btnlbImgNext {
    width: 15px;
    height: 20px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    position: absolute;
}

.lbIndexbtn {
    display: block;
    position: absolute;
    /* bottom: 0; */
    width: 20px;
    height: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 11;
    z-index: 9999;
    cursor: pointer;
    bottom: 43px;
}

#lbNav {
    top: 0;
    bottom: 0;
    margin: auto 0;
    position: absolute;
    width: 100%;
    height: 20px;
}

#btnlbImgPrev {
    left: 20px;
}

#btnlbImgNext {
    right: 20px;
}
.fancybox-overlay {
    background: none;
    background-color: rgba(255,255,255, 0.7);
    z-index: 99999;
}
.fancybox-overlay-fixed {
    width: calc(100% - 270px) !important;
    left: 270px;
    height: calc(100vh - 80px) !important;
    top: 30px;
    padding-bottom: 50px;
}
.fancybox-prev span {
    background-image: url(./../../images/arrowprev.png);
    background-position: top left;
    width: 15px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    visibility: visible;
}
.fancybox-prev {
    left: -20%;
    width: 30%;
}
.fancybox-next span {
    background-image: url(./../../images/arrownext.png);
    background-position: top left;
    width: 15px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    visibility: visible;
}

.fancybox-next {
    right: -20%;
    width: 40%;
    visibility: visible;
}
.fancybox-close {
    bottom: -30px;
    top: auto;
    top: initial;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-image: url(./../../images/backtolist.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;
    /* position: absolute; */
}
.fancybox-skin {
    top: -20px;
}
.fancybox-opened {
    max-width: 90% !important;
    height: auto !important;
    z-index: 999999;
}

.fancybox-inner {
    width: 100% !important;
}
@media screen and (max-width: 1599px) {
    #shopHeader {
        display: block;
        opacity: 1;
    }
    .mCSB_inside > .mCSB_container{
        /* margin-right:20px; */
    }
    #stylistDetailsWrapper{
        padding: 80px 7% 30px;
        padding-right: 0%;
        /* padding-bottom: 3%; */
    }
    #detailsStylistNameWrapper{
        margin-bottom: 45px;
        margin-bottom: 12%;
    }
    #detailsStylistName {
        font-size: 25px;
    }

    #detailsStylistTitle {
       font-size: 18px;
    }

    #detailsShopName {
        font-size: 18px;
    }

    #detailsShopArea {
        font-size: 14px;
    }

    #detailsShopAddr {
        font-size: 15px;
        margin-bottom: 30px;
    }
    
   .fancybox-overlay-fixed{
    	width: calc(100% - 50px) !important;
    	left: 50px;
    	height: calc(100vh - 80px) !important;
    	top: 80px;
    	padding-bottom: 0;
    }
    .fancybox-prev {
		left: -10%;
		width: 10%;
	}

	.fancybox-next {
		right: -10%;
		width: 10%;
		visibility: visible;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    li.stylistIDArray{
        min-width: 30%;
    }
    li.stylistIDArray:nth-child(3n) {
        margin-right: 0;
    }
    li.stylistIDArray:nth-child(4n) {
        /* margin-right: 5%; */
    }
    .stylistName {
        font-size: 16px;
    }

    .stylistTitle {
        font-size: 14px;
    }
    ul.districtList {
        font-size: 19px;
    }

    .shopName {
        font-size: 18px;
    }

    .area {
        font-size: 13px;
    }
    #workList li{
        width: 47%;
    }
    #detailsStylistThumb {
        margin-right: 4%;
        min-width: 180px;
    }
    #innerWrapper {
        width: 94%;
    }
    #container {
        margin-right: 20px;
    }

    #listWrapper {
        margin-left: 12%;
    }

    .shopListWrapper {
        margin-left: 12%;
    }
}

@media screen and (max-width: 767px){
	#districtMask, #shopMask {
		width: 100%;
		position: absolute;
		height: 38px;
		z-index: 999;
		/* background-color: yellow; */
	}

	#districtMask, #shopMask {
		/*z-index: -1;*/
	}
	#detailsStylistThumb {
		width: 80%;
		left: 0;
		right: 0;
		margin: 0 auto;
		display: block;
		margin-bottom: 30px;
	}

	.stylistInfoWrapper {
		display: block;
		width: 80%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
    .districtDetailsWrapper {
        display: none;
    }

    .districtDetailsWrapper.show {
        display: block;
        position: relative;
    }

    .regionWrapper.show {
        display: block;
    }
    #shopHeader {
       padding-top: 0;
    }
    .shopListWrapper {
        margin-left: 10%;
    }
    ul#stylistList {
        /* margin-left: 30px; */
    }
    .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{
       /* margin-right: 0px; */
    }
    li.stylistIDArray{
        min-width: 45%;
        margin-bottom: 30px;
        margin-right: 2.5%;
        margin-left: 2.5%;
    }
    #MWrapper, #RWrapper {
        width: 90%;
        padding-left: 5%;
        /* padding-bottom: 100px; */
        padding-right: 5%;
    }

    #MWrapper {
		box-sizing: content-box;
        box-sizing: initial;
        height: auto;
        padding: 5%;
        /* padding-top: 0; */
    }

    li.districtTxt, li.shopWrapper {
        display: none;
    }

    ul.districtList.show li.districtTxt, li.districtTxt.active, .shopListWrapper.show li.shopWrapper, li.shopWrapper.active {
        display: block;
    }
    #stylistListWrapper {
    /* display: table; */
    margin: 0 auto;
    /* text-align: center; */
    height: auto;
	overflow: visible;
    overflow: initial;
	box-sizing: content-box;
    box-sizing: initial;
    padding-top: 50px;
    }
.mCustomScrollBox{
	max-height: 100%!important;
}
    #listWrapper {
        padding-top: 50px;
        margin-left: 7%;
        padding-bottom: 0;
        width: 93%;
    }
    #shopListDownBtn {
        display: none !important;
    }

    #mainWrapper.lr {
		box-sizing: content-box;
        box-sizing: initial;
    }

    #stylistDetailsWrapper {
        padding: 0;
        padding-top: 60px;
        padding-left: 0;
    }

    #stylistCtrlWrapper {
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 80%;
    }

    #stylistWorkWrapper {
        /* padding-bottom: 60px; */
    }
	#descContent li {

padding: 10px 0 10px 0px;
}

    #workList li{
        width: 45%;
        margin: 0 2%;
        margin-bottom: 2.5%;
    }
    #container {
		box-sizing: content-box;
        box-sizing: initial;
		overflow: visible;
        overflow: initial;
    }

    #innerWrapper {
        width: 100%;
    }
    ul.districtList {
        margin-bottom: 30px;
    }

    li.shopWrapper {
        margin-bottom: 20px;
    }

    .btnDown {
        display: none !important;
    }
    .gradientDetailsText {
		width: 65%;
	}
  	#districtdown.inactive, #shopdown.inactive {
  		display: none;
  	}
	#districtdown.active, #shopdown.active {
		width: 22px;
		height: 15px;
		position: absolute;
		right: 0px;
		display: block;
		z-index: 99;
		top: 15px;
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-webkit-transition: all .5s ease-out;
		-ms-transition: all .5s ease-out;
		-moz-transition: all .5s ease-out;
		-o-transition: all .5s ease-out;
		transition: all .5s ease-out;
		transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
	}
	#districtdown{
		top: 7px;
		cursor: pointer;
	}
	.shopListWrapper.show #shopdown, .districtList.show ~ #districtdown{
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg) ;
		-moz-transform: rotate(180deg);
		transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
	}

	#lbContent {
		width: 100%;
	}

	#lbdetails {
		position: relative;
		width: 100%;
		text-align: center;
	}

	body.m.lbmode #lbImg {
		position: relative;
		top: 0;
		transform: initial;
		-ms-transform: none;
		-webkit-transform: initial;
		-moz-transform: initial;
		left: 0;
		margin-bottom: 50px;
	}

	.lbIndexbtn {
		bottom: 0;
	}

	.fancybox-overlay-fixed{
    	width: 100% !important;
    	left: 0px;
    	height: calc(100vh - 48px) !important;
    	top: 48px;
    	padding-bottom: 0;
    }
    .fancybox-prev {
		left: -7%;
		width: 20%;
	}

	.fancybox-next {
		right: -7%;
		width: 20%;
		visibility: visible;
	}
}