:root {
    --mainColor: #49a4ee;
    --mainColor-dark: #00419c;

    --mainColor-nav: #e2b811;
    --mainColor-navDark: #29abf6;
    --mainColor-sub: #fff8da;
    --mainDeep: #f16100;
    --mainDark: #af3700;

    --auxColor: #a8f5ff;

    --bs-btn-hover-bg: #f1ac19 !important;
    --bs-btn-hover-border-color: #de9a07;

    /* dropdown-item設定 */
    /* --bs-body-color: #ffffff;
    --bs-tertiary-bg: #a36000; */

    /* --bs-navbar-color: #ecc987 !important;
    --bs-navbar-active-color: #e64a4a !important; */

} 

body {
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
}

img {width: 100%;}

/* a {text-decoration:none;} */

/* 頁首區 */
.head_bg-gradint {background: linear-gradient(180deg, #75d9ff 0%, #a3ecfd 30%, #d1fffa 90%, #ffffff 91%);}

.head_imgBox {
    position: relative;
    width: 100%;
    /* padding-top: 80%; */
    text-align: center;
    /* overflow: hidden; */
    /* background-image: url(../assets/images/dfimg.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.h_navbar_r {
    font-size: 18px;
    position: absolute;
    top: 55%;
    right: 4%;
    z-index: 99;
    /* top: 165px; */
    /* right: 55px; */
    /* top: calc(48% - 0px); */
    /* left: calc(59% - 0px); */
}

.jb_navbar_ps {
    font-size: 18px;
    position: absolute;
    top: 54%;
    right: 4%;
    z-index: 9;
}

/* 頁尾區 */
.footer_bgimg {
    background-image: url(../assets/images/footer_img.png);
}

/* 導覽 下拉 覆蓋BS */
.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {color: #ffdb53;}

.navbar-nav {
    --bs-nav-link-color: #ffffff;
    --bs-nav-link-hover-color: #ffbd30;
    /* --bs-nav-link-disabled-color: #ffffff99; */
}
/* .nav-link.disabled { color: #ffffff99;} */

.dropdown-menu {
    padding: 12px;
    padding-right: 20px;
    border-radius: 12px;
    /* --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); */
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: #754400;;
}

.dropdown-item {
    color: #FFFFFF;
    border-radius: 8px;
    margin: 4px;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #cf9700;
    /* background-color: #a36000; */
}

/* 內容區 */
.pg-block {
    color: #FFFFFF;
    background-color: var(--mainColor-dark);
}

.pg-block-grey {
  background-color: #ebebeb;
  padding: 16px 0;
  margin-top: 32px;
}

.jb-title-color {color: #ffbd30;}
.jb-title-color-bu {color: #00419c;}
.jb-title-color-lt {color: #1989c9;}

.jb-title {
  color: #00419c;
  text-align: center;
  margin-bottom: 28px;
  border-bottom: 1px #c5c5c5 solid; 
  padding-bottom: 8px;
  
}

/* 文字齊行 左右 */
.jb-text-justify {text-align: justify;}

/* 首行凸排 */
.jb-text-indent-em {text-indent: -1.2em; padding-left: 1.2em;}

.jb-grayBox {
  background-color: #eeeeee;
  padding: 16px;
  border-radius: 8px;
}

.jb-title-box {
  color: #00419c;
  margin-left: -4px;
  /* background-color: var(--mainColor-dark);
  padding: 8px 24px;
  border-radius: 30px;
  width: fit-content;
  line-height: inherit; */
}

.w-60 {width: 60% !important}

/* 內容區-a-連結覆蓋設定 */
.link-light {color: #ffffff !important; text-decoration:none;}
.link-light:hover {color: #ffbd30 !important;}

/* 商品圖+區 浮動 */
.fl-foodimg {
    position: relative;
    right: -12%;
    width: 75%;
}

.fi-ctx-box {
    position: relative;
    top: -16px;
}

/* 側邊導覽-小螢幕 */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #ffdb53;
}

.sidenav .active {color: #ffdb53;}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 40px;
  margin-left: 50px;
}

.openNavBtn {
  position: absolute;
  top: 0;
  left: 12px;
  font-size: 48px;
  /* margin-left: 50px; */
  z-index: 8;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.sidenav-secBox {
  border-color: #6d6d6d;
}

.sidenav-text {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* 側邊導覽-小螢幕 - end */

.fc-menu {
  background-color: var(--mainColor-dark);
  padding: 16px;
}

.fc-menu a {
  color: white;
  font-size: 18px;
  text-decoration: none;
  display: block;
  padding: 4px 12px;
  margin: 8px 0;
}
.fc-menu a:hover {
  background-color: #b97900;
  border-radius: 8px;
}

.fc-menu .active {
  background-color: #cf9700;
  border-radius: 8px;
}


/* 營運實況 相冊 */
.robroy__caption > p {font-size: 1.25em; margin-top: 8px;}

.robroy_gallery_it > div {
  padding: 0 6px;
}

.mdv_it {
  height: 100%;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px 0px rgb(0 0 0 / 0.3);
  overflow: hidden;
  text-align: center;
}
.mdv_it :hover {
  height: 100%;
  /* background-color: white; */
  /* box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2); */
}
.mdv_it p {padding: 8px !important;}



/* 符合框架 圖片 */
.imgConform_Box {
    background-color: rgb(207, 207, 207);
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 */
    text-align: center;
    overflow: hidden;
    transition: height .15s ease-in-out;
    /* background-image: url(../assets/images/dfimg.jpg); */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: cover; */
}
  
.imgConform_Box img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    font-size: 20px;
    color: white;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
    vertical-align: middle;
    display: inline-block;
}
/* 符合框架 圖片 end */
/* 符合框架 YT */
.videoConform_Box {
    background-color: rgb(207, 207, 207);
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 4:3 */
    text-align: center;
    overflow: hidden;
    /* background-image: url(../assets/images/dfimg.jpg); */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: cover; */
}
  
.videoConform_Box iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    font-size: 20px;
    color: white;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
    vertical-align: middle;
    display: inline-block;
}
/* 符合框架 YT end */
.brr-8 {
    border-radius: 8px;
}

.rec-it {
  height: 100%;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px 0px rgb(0 0 0 / 0.3);
  /* overflow: hidden; */
  display: flex;
  padding: 16px;
}

.rec-it-tex-p {font-size: 0.9em; text-align: justify;}

.rec-it-tex-psm {
  font-size: 0.7em;
  word-break: break-all !important;
  margin-bottom: 0;
}

/* 表格- 成本利潤分析表 */
.dataBox {
    text-align: center;
    background-color: #e6e6e6;
    /* background: linear-gradient(225deg, #0f1b49, #02091d); */
    border-radius: 16px;
    padding: 16px;
    width: 100%;
    height: 100%;
}

td {align-content: center;}

.jb-table-th {
  font-size: 1.1em;
  color: white !important;
  background-color: #cf9700 !important;
}

.jb-table-td-bb {
  font-size: 1.1em;
  font-weight: 600;
  color: #875f00 !important;
}

.table-nowrap {
    white-space:nowrap;
}
/* 表格- 成本利潤分析表 end */
/* 表格- 與其他加盟系統之比較 */
.jb-table-td-con-1 {
  font-size: 1.1em;
  font-weight: 600;
  color: #875f00 !important;
  white-space:nowrap;
}

.jb-table-td-con-2 {
  /* font-weight: 600; */
  color: #870000 !important;
}

.jb-table-co-rW {
  width: 100%;
}

@media (min-width: 961px) {
  .jb-table-co-rW {width: 100%;}
}

@media (max-width: 960px) {
  .jb-table-co-rW {width: 150%;}
}

@media (max-width: 768px) {
  .jb-table-co-rW {width: 100%;}
}

@media (max-width: 576px) {
  .jb-table-co-rW {width: 200%;}

  .jb-table-td-con-1 {font-size: 1em;}
}

@media (max-width: 452px) {
  .jb-table-co-rW {width: 220%;}

  .jb-table-td-con-1 {font-size: 1em;}
}
/* 表格- 與其他加盟系統之比較 end */

/* 向上按鈕 */
#toTopBtn {
  display: none;
  position: fixed;
  transform: translate3d(0, 0, 0);
  cursor: pointer;
  top: auto;
  right: 8px;
  bottom: 36px;
  left: auto;
  z-index: 100;
  font-size: 32px;
  text-align: center;
  align-content: center;
  width: 64px;
  height: 64px;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.30);
  border-radius: 50%;
}    
/* 向上按鈕 */ 
.at-bottom {bottom: 180px !important;}



/* 裝置自適應 啟用 */
@media (min-width: 961px) {
  .jb_navbar_ps {
    font-size: 18px;
    top: 54%;
    right: 4%;
  }
}

@media (max-width: 960px) {
  .jb_navbar_ps {
    font-size: 16px;
    top: 55%;
    right: 4%;
  }
}

@media (max-width: 840px) {
  .jb_navbar_ps {
    font-size: 14px;
    top: 55%;
    right: 4%;
  }
}

@media (max-width: 768px) {
  .navbar {
    display: none;
  }
}
@media (min-width: 769px) {
  .openNavBtn {
    display: none;
  }
}
/* 裝置自適應 啟用 end */




@media (max-width: 768px) {
  .basic-modal-content {
    width: 80%;
    margin: 0 10% ;
  }
}

@media (min-width: 1024px) {
  .basic-modal-content {
    width: 70%;
    margin: 0 15% ;
  }
}
@media (min-width: 1280px) {
  .basic-modal-content {
    width: 60%;
    margin: 0 20% ;
  }
}
@media (min-width: 1440px) {
  .basic-modal-content {
    width: 50%;
    margin: 0 25% ;
  }
}
@media (min-width: 1536px) {
  .basic-modal-content {
    width: 40%;
    margin: 0 30% ;
  }
}


/* Test */
/* #num1,#num2,#num3,#num4 {
  display: none;
} */


/* ********** */

.bg-main {background-color: #070314;}

.bg-ah-dark {
    background-color: #000313 !important;
    border-bottom: #a8f5ff;
    border-width: 2px;
    /* box-shadow: 0 0px 6px 0 rgba(131, 230, 255, 0.5); */
}

.wax-content {width: max-content !important;}
.w-30 {width: 30% !important}

.color-rank-gold {color: #f7cc1f;}
.color-rank-silver {color: #e6e6e6;}
.color-rank-bronze {color: #ad8708;}

/* 覆蓋 BS5 CSS */

.form-check-input:checked {
    background-color: #f16100;
    border-color: #f16100;
}

/* 覆蓋 BS5 CSS */

.bg-gradint {background: linear-gradient(180deg, #75d9ff, #d1fffa);}

.hr-color {border-top-color: var(--auxColor);}

.vr-line-color {
    border-right-color: rgba(168, 245, 255, 0.25) !important;
}

.v-line {
    height: 140px;
    border-right: 1px solid;
    border-right-color: rgba(168, 245, 255, 0.25) !important;
}




.tx24b { 
    font-size: 24px !important;
    font-weight: bold;
}

.tx32 {font-size: 32px;}
.tx36 {font-size: 36px;}
.tx42 {font-size: 42px;}
.tx48 {font-size: 48px;}

.em06 {font-size: 0.6em;}
.em07 {font-size: 0.7em !important;}
.em08 {font-size: 0.8em;}
.em09 {font-size: 0.9em;}
.em12 {font-size: 1.2em;}
.em135 {font-size: 1.35em;}
.em15 {font-size: 1.5em;}

.iconColor {
    color: var(--auxColor);
}

.scale-135::before {transform: scale(1.35);}


.equal-height {
    display: flex !important;
}

.shadow2box {
    box-shadow: 0 1px 3px 0 rgba(131, 230, 255, 0.35);
}

/* 置底物件 上層框架需+ position-relative */
.bottom-obj-16 {
    position: absolute;
    bottom: 16px;
    left: 24px;
    right: 24px;
    width: fit-content;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}



/* 覆蓋BS */
.table-dark {
    --bs-table-bg: #1f202124;
    --bs-table-striped-bg: #0000003d;
    --bs-table-border-color: #6d6d6d;
    --bs-table-hover-bg: #003669;
}



/* 頁碼 */
.active>.page-link, .page-link.active {
    background-color: var(--mainColor-navDark);
    border-color: var(--mainColor-navDark);
}

.pagination {
    --bs-pagination-color: var(--mainColor-navDark);
}