@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500&display=swap');

/* 2023-project --------------------------------------------- 2023-05-18 */
.mainMenu {
  color:rgba(0, 0, 0, 0.35);
  font-size: 15px;
}

.mainMenu li, a {
  color:rgba(0, 0, 0, 0.7);
  text-decoration: none;
  padding: 6px 10px;
}

.mainMenu a:hover {
  color:rgba(0, 0, 0, 1);  
}

.bg-davie-1 {
  background: #999  ;
}

.bg-davie-2 {
  background: #bbb  ;
}

.bg-davie-3 {
  background: #666;
}

.bg-davie-4 {
  background: #333;
}

.bg-davie-5 {
  background: rgba(0,0,0,0.2);
}

.bg-davie {
  background: rgba(245,246,241, 0.5);
}

.card-davie {
  background: rgba(245,246,241, 0.5);
  border:1px solid #ccc;
}

.bg-transparent {
  background: rgba(255,255,255,0);
}

.bg-transparent-50 {
  background: rgba(255,255,255,0.5);
}

.bg-transparent-20 {
  background: rgba(255,255,255,0.2);
}

.bg-transparent-dark-80 {
  background: rgba(0,0,0,0.8);
}

.bg-transparent-dark-60 {
  background: rgba(0,0,0,0.6);
}

.bg-transparent-dark-50 {
  background: rgba(0,0,0,0.5);
}

.bg-transparent-dark-20 {
  background: rgba(0,0,0,0.2);
}

.bg-transparent-dark-10 {
  background: rgba(0,0,0,0.1);
}

.bg-transparent-info {
  background: rgba(13, 202, 240, 0.5);
}

.bg-transparent-warning {
  background: rgba(253, 126, 20, 0.9);
}

.bg-transparent-warning-50 {
  background: rgba(253, 126, 20, 0.5);
}

.bg-transparent-green {
  background: rgba(25, 135, 84, 1);
}

.bg-transparent-green-50 {
  background: rgba(25, 135, 84, 0.5);
}


.clear {
  clear:both;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  clear:right;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 寬度 ------------------------------------------- */
.w-15 {
  width: 15%;
}

.w-18 {
  width: 18%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 28%;
}


.w-35 {
  width: 33%;
}

.w-40 {
  width: 38%;
}

.w-45 {
  width: 45%;
}

.w-80 {
  width: 80%;
}


.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;
}

.w-50px
{
  width: 50px;
}


.w-100px
{
  width: 100px;
}

.w-120px
{
  width: 120px;
}

.w-150px
{
  width: 150px;
}

.w-160px
{
  width: 160px;
}


/* 高度 ------------------------------------------- */
.h-30px {
  height:30px;
}

.h-60px {
  height:60px;
}

.h-100px {
  height:100px; 
}

.h-130px {
  height:130px; 
}

.h-150px {
  height:150px; 
}

.h-200px {
  height:200px; 
}

.h-250px {
  height:200px; 
}


.h-300px {
  height:300px;
}

.h-330px {
  height:330px;
}

.h-350px {
  height:350px;
}

.h-400px {
  height:400px;
}

.h-450px {
  height:450px;
}

.h-500px {
  height:500px;
}

.page-buffer-bottom {
  display: contents;
  height:100px;
  background-color: #f00;
}


.hand-over {
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.hand-over:hover {
  color: #fff;
  margin-top:4px;
}

.pointer {
  cursor: pointer;
}


.booking_bigBtn {
  width:68px;
  height:68px;
  cursor: pointer;
  margin-top:-15px;
  border: 6px solid #212529;
}

.center_bigBtn {
  width:68px;
  height:68px;
  cursor: pointer;
  margin-top:-15px;
  border: 6px solid #212529;
}

.modal_bigRoundBtn {
  width:86px;
  height:86px;
  cursor: pointer;
  border: 6px solid #212529;
  text-align: center;
  /* margin-left:-30px; */
}

.position_fixed {
  position: fixed;
  width: 100%;
  text-align: center;
}

.btn-davie-gray-1 {
    background: rgba(173,181,189,0.5);
    color: #111;
    border: 0px;    
}

.btn-davie-gray-2 {
  background: rgba(173,181,189,0.2);
  color: #111;
  border: 0px;    
}

.modal-menu-bg {
    background: rgba(0,0,0,0);  
}

/* 企業重要訊息 -------------------------------- Start */

.group-top-news-title {
    /* font-family: "Helvetica Neue", "黑體-繁", "微軟正黑體",  "Helvetica", "Arial", "sans-serif"; */
    font-family: "Noto Sans TC", "sans-serif", "Helvetica Neue", "黑體", "微軟正黑體",  "Helvetica", "Arial";
    font-display: fallback;
    font-size: calc(23px + (38 - 23) * ((100vw - 320px) / (1800 - 320)));
    font-weight: 500;     
    word-break: break-all;
    /* text-align: justify   */
  }

.group-top-news-content {
    font-family: "Noto Sans TC", "sans-serif", "Helvetica Neue", "黑體", "微軟正黑體",  "Helvetica", "Arial";
    font-display: fallback;    
    word-break: break-all;
    text-align: justify;
    /* letter-spacing: 3px; */
    line-height: 1.5; 
    font-weight: 300;
    /* font-size: 16px; */
    font-size: calc(15px + (18 - 15) * ((100vw  - 320px) / (1800 - 320)));
}

.group-top-news-content p {
    margin-bottom:14px;
}

/* .group-top-news-content span {
    font-weight: normal;
} */

/* 企業重要訊息 -------------------------------- End */

/* 分店頁面 ----------------------------------- Start */
.store-content {
  font-size: calc(15px + (18 - 15) * ((100vw  - 320px) / (1800 - 320)));
}
/* 分店頁面 ----------------------------------- End */

/* 設計師頁面 --------------------------------- Start */
.stylist_showName_mobile {
  margin-top:-93px;
  /* background: rgba(0,0,0,0.45); */
  /* background-image: linear-gradient(to top, rgba(0,0,0) 20%, transparent 100%); */

  background: rgba(0,0,0,0.0.15);
  background-image: linear-gradient(to top, rgb(0,0,0) 25%, transparent 100%);  

}

.stylist_showName_promo {
  /* margin-top:-77px; */
  background: rgba(0,0,0,0.0.3);
  background-image: linear-gradient(to top, rgb(0,0,0) 20%, transparent 100%);
  /* background-image: linear-gradient(bottom, rgba(0,0,0) 0.5, transparent 70%); */

}

/* 處理 Safari 將 Tel 轉變為連結時多出的空白  */
.tel {
  padding: 0px;
}

.tel a {
  padding: 0px;
}

/* 處理 a 的額外 padding (因該是 bootstrap 的問題) */
body a {
  padding-left:0px;
}

.modal-top-bigBtn a {
  padding: 0px;
}

/*處理 tip 的 CSS*/
.tip {
  position: relative;
}
.tip:before {
  display: none;
  position: absolute;
  top: auto;
  right: 50%;
  bottom: -7px;
  margin-right: -5px;
  width: 0;
  height: 0;
  content: '';
  border: 5px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 10000;
}
.tip:after {
  display: none;
  position: absolute;
  top: 100%;
  right: 50%;
  padding: 0 10px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  content: attr(aria-label);
  white-space: pre;
  z-index: 10000;
  margin-top: 5px;
  line-height: 26px;
  transform: translateX(50%);
}

/*Youtube Short (for Frontend)*/
.YoutubeShort { 
  position: relative; padding:177% 0 0 0; height: 0; overflow: hidden; max-width: 100%;margin:0px;
} 
.YoutubeShort iframe, .YoutubeShort object, .YoutubeShort embed { position: absolute; top: 0; left: 0; width: 100%; height:100% }

/*Youtube Short (for Backend)*/
.YoutubeShort_backend { 
  position: relative; padding:56% 0 0 0; height: 0; overflow: hidden; max-width: 100%;margin:0px;
} 
.YoutubeShort_backend iframe, .YoutubeShort_backend object, .YoutubeShort_backend embed { position: absolute; top: 0; left: 0; width: 100%; height:100% }


.embed-container { position: relative; padding:177% 0 0 0; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* 底部資訊區  */
.copyrightBox a {
  color: #fff
}

.box-auto {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box-auto-container {
  display: contents;
}

.box-auto-content{
  flex: 1 1 auto;
}

.backToList_desktop {
  top:-42px;
  right:0px;
}




.teacher_showName_promo {
  /* margin-top:-77px; */
  background: rgba(0,0,0,0.0.3);
  background-image: linear-gradient(to top, rgb(0,0,0) 9%, transparent 100%);
  /* background-image: linear-gradient(bottom, rgba(0,0,0) 0.5, transparent 70%); */

}

.show-content-box blockquote {
  font-style: italic;
  font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1800 - 320)));
  background:rgba(0, 0, 0, 0.1);
  width: 100%;
  padding:10px;
  border-radius:10px 10px;
}

.show-content-box-course {
  word-break: break-all;
  text-align: justify;
  line-height: 1.6; 
  font-size: calc(12px + (18 - 12) * ((100vw  - 320px) / (1800 - 320)));
  font-family: "Noto Sans TC", "Helvetica Neue", "黑體", "微軟正黑體",  Helvetica, Arial, sans-serif;
  font-display: fallback;
  font-weight: 300;
}

.show-content-box-course-mobile {
  word-break: break-all;
  text-align: justify;
  line-height: 1.6; 
  font-size: calc(15px + (18 - 15) * ((100vw  - 320px) / (1800 - 320)));
  font-family: "Noto Sans TC", "Helvetica Neue", "黑體", "微軟正黑體",  Helvetica, Arial, sans-serif;
  font-display: fallback;
  font-weight: 300;
}


/* Panel-common 專用, 2023-08-06 */

.show-content-panel table {
  border:none;
  border-collapse: collapse;
  border-spacing: 0px;
}

.show-content-panel div {
  display: block;
}


.show-content-panel p {
  margin-bottom:10px;
}

.show-content-panel li {
  padding-top:5px;
  margin:0px 0px;
  /* font-size: calc(18px + (20 - 18) * ((100vw  - 320px) / (1800 - 320))); */
}

.show-content-panel ol,ul {
  margin-bottom:20px;
}

/* Article Title */
.mobile-title {
  font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1800 - 320)));  
}