@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.headerRwdContainer { display: none; }
.rwdMenuContainer{
	height: 50px;
	width: 100%;
	background: #d3d3d3;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	padding: 0 5px;
	position: fixed;
	top: 0;
	z-index: 150;
}
.rwdMenuIcon{
	width: 50px;
	color: #707070;
	text-align: center;
	cursor: pointer;
	line-height: 50px;
}
.rwdMenuLogo{
	vertical-align: middle;
	text-align: center;
	margin: 10px auto;
	width: calc(100% - 110px);
}
.rwdMenuLogo>a>img{
	width: 92px;
}
.rwdMemberLogOut a i{font-size: 25px; line-height: 50px;color: #707070;}


.rwdHeaderNavContainer {
	position: fixed;
	top: 0;
	bottom: 0;
	padding-top: 50px;
	width: 100%;
	background: rgba(0, 0, 0, 0.2);
	z-index: 50;
}
.rwdHeaderNav {
	height: 100%;
	padding: 70px 15px 0;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 300px;
	background:rgba(226, 226,226, 0.9);
	z-index: 50;
	font: normal 15px 'Century Gothic','微軟正黑體';
	line-height: 50px;
	letter-spacing: 1px;
	text-align: center;
	overflow-x: hidden;
	overflow-y: scroll;
}
.rwdHeaderNav::-webkit-scrollbar {
width: 5px;
}
.rwdHeaderNav::-webkit-scrollbar-track {
border-radius: 20px;
margin: 55px 0px 0 0;
}
.rwdHeaderNav::-webkit-scrollbar-thumb {
-webkit-border-radius: 4px;
border-radius: 4px;
border: solid 1px #888;
background: #999;
}
.rwdHeaderNav .position-relative{
	height: 100%;
	padding-bottom: 50px;
}
.rwdHeaderVipCardContainer{
	position: relative;
}
.rwdHeaderVipCard{
	width: 100%;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.3);
}
.rwdHeaderVipCard img{
	border-radius: 10px;
}
.rwdHeaderVipCardName{
	position: absolute;
	right: 10px;
	bottom:60px;
	font: bold 19px 'Century Gothic','微軟正黑體';
	letter-spacing: 5px;
	line-height: 16px;
}
.rwdHeaderVipCardNum{
	position: absolute;
	top: 20px;
	left: 15px;
	font: 600 20px 'Saira Semi Condensed','微軟正黑體';
	line-height: 16px;
	color: #888;
	text-shadow: 1.5px 1.5px rgba(0,0,0,0.2);
}
.rwdHeaderVipCardDate{
	padding: 4px 5px 4px 8px;
	position: absolute;
	right: 0px;
	bottom:28px;
	background: rgba(0,0,0,0.5);
	font: normal 15px 'Century Gothic','微軟正黑體';
	letter-spacing: 1.5px;
	color: #fff;
	line-height: 16px;
}
.rwdHeaderMemberBtnContainer{
	width: 100%;
	margin: 20px auto 0;
}
.rwdHeaderMemberBtnBox{
	position: relative;
}
.rwdHeaderMemberBtn {
	border-radius: 50%;
	/*background: no-repeat url(../images/rwdNavMemberBtn_5460.png) right bottom/45px #6b6b6b;*/
	background: #6b6b6b;
	padding: 12px 0;
}
.rwdHeaderMemberBtn a{
	color: #fff;
	font: normal 13px 'Century Gothic','微軟正黑體';
	letter-spacing: 1px;
	vertical-align: middle;
	text-align: center;
	display: block;
}
.rwdHeaderMemberBtn a i{
	font-size: 30px;
	display: inline-block;
	margin-bottom: 2px;
}
.rwdHeaderMemberBtnNum{
	position: absolute;
	right: -3px;
	top: -3px;
	width: 25px;
	height: 25px;
	background: #d41010;
	border-radius: 50%;
	font: bold 13px 'Century Gothic','微軟正黑體';
	text-align: center;
	line-height: 25px;
	z-index: 10;
	color: #fff;
}
.rwdHeaderNavList{
	margin-top: 30px;
	margin-bottom: 0px;
}
.rwdHeaderNavBox{
	width: 100%;
	height:130px;
	/*background: no-repeat url(../images/rwdNavListBg.png) right bottom/100px #303030;*/
	background: #303030;
	position: relative;
}
.rwdHeaderNavBoxBorder{
	border: solid 1px #c1c1c1;
	position: absolute;
	top: 5px ;
	bottom: 5px;
	right: 5px;
	left: 5px;
}
.rwdHeaderNavTitleContainer{
	position: relative;
	top: 62px;
	transform: translateY(-50%);
}
.rwdHeaderNavIcon{
	color: #fff;
	font-size: 40px;
	margin-bottom: 5px;
}
.rwdHeaderNavBoxTitle{
	font: normal 17px 'Century Gothic','微軟正黑體';
	color: #fff;
	letter-spacing: 2px;
}
.rwdHeaderNavNum{
	position: absolute;
	right: -6px;
	top: -6px;
	width: 30px;
	height: 30px;
	background: #d41010;
	border-radius: 50%;
	font: bold 15px 'Century Gothic','微軟正黑體';
	text-align: center;
	line-height: 30px;
	z-index: 10;
	color: #fff;
}
.rwdHeaderNavBottom{
	width: 80px;
	position: relative;
	margin: 5px auto;
}




/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.phoneMenu { width: 100%; height: 50px; background: rgba(60,100,0, 0.7); position: fixed; bottom: 0; z-index: 30; display: none; }
.phoneMenuBox { text-align: center; padding: 5px 0; }
.phoneMenuBox a { color: #fff; }
.phoneMenuBox a:hover{
	text-decoration: none;
}
.phoneMenuBox i {
	font-size: 20px;
	line-height: 25px;
}
.phoneMenuTitle { font: normal 12px 'Century Gothic','微軟正黑體'; line-height: 16px; letter-spacing: 2px; }
.phoneMenuCartTitle { }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> footerRwd<<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.footerRwd{
	height: 60px;
}
.footerRwdContent{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.footerRwdLogo{
	width: 70px;
	margin: 0 auto;
}
.footerRwdCopyright{
	padding-top: 5px;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> RWD<<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1280px) {
	/*.header { margin: 0 10px; }*/
}
@media screen and (max-width:1200px) {
	.mt-header{margin-top: 174px;}
}
@media screen and (max-width:1100px) {
}
@media screen and (max-width:1000px) {
}
@media screen and (max-width:992px){
	.headerContainer { display: none; }
	.headerRwdContainer { display: block; }
	.footer .container { max-width: 96%; width: 96%; }
	.footer { display: none; }
	.phoneMenu { display: block; }
	body{
		margin: 50px 0 80px;
	}
	.stylistDetailExperienceContainer{
		margin-top: 30px;
	}
}
@media screen and (max-width:950px){}
@media screen and (max-width:900px) {}
@media screen and (max-width:830px) {

}
@media screen and (max-width:800px) {
}
@media screen and (max-width:768px) {
body { margin-bottom: 80px; }
.pharmacyDetailName{
  font-size: 20px;
  margin-bottom: 15px;
}


}
@media screen and (max-width:750px) {}
@media screen and (max-width:700px) {}
@media screen and (max-width:650px) {}
@media screen and (max-width:600px) {}
@media screen and (max-width:550px) {}
@media screen and (max-width:576px) {
	.bodyBg{
	  background: url(../images/BG_phone.jpg) no-repeat fixed center center;
	  background-size: cover;
	}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:480px) {}
@media screen and (max-width:450px) {}
@media screen and (max-width:400px) {
	.contactTitle{
		display: block;
	}
}
@media screen and (max-width:380px) {}
@media screen and (max-width:360px) {
	.container{
		max-width: 98%;
	}
}