@charset "utf-8";
/*reset*/
html { -webkit-overflow-scrolling: touch; font-size:10px; scroll-behavior: smooth; }
body {padding-top: 50px;}
.starter-template {padding: 40px 15px; text-align: center;}
.row { margin-left: 0px; margin-right: 0px;}
.col-xs-1, .col-xs-2, .col-sm-1, .col-md-1, .col-lg-1 { padding-left: 5px; padding-right: 5px;}
html, body {font-family: '微軟正黑體';}
/* 不折行 20190327 */
.nowrap {white-space:nowrap;}
/* 自動折行 20190327 */
.btn{white-space:normal;}

/* remove gutter spacing outside */
.row.no-gutter { margin-left: 0; margin-right: 0; }

/* only remove padding of middle columns */
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) { padding-right:0; padding-left:0; }

/* for ios 11 modal bug */
body.iosBugFixCaret.modal-open { position: fixed; }

/* 20180524 */
.btn-group-vertical {width: 100%;}
.hotpink {color:hotpink;}
.forestgreen { color: forestgreen;}
.red { color: red;}
.gray { color: gray;}
.dimgray { color: dimgray;}
.blue { color: #0078ff; }
.white { color: white;}
.purple { color:purple;}
.darkblue { color:darkblue;}
.lightpurple { color:#cc99ff;}
.lightpink {color:lightpink;}
.lightred {color:#fa9292;}
.lightblue {color:#cbe7ff;}
.lightgreen {color:#f2ffe2;}
.lightskyblue {color:lightskyblue;}
.lightgray {color:lightgray;}
.fbblue {color:#3b5998;}
.linegreen {color: #00b900;}
.instagramred { background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}   
.locationred {color: #da4c39;}
.yellow {color: yellow;}
.deepskyblue {color:deepskyblue;}
.tiffany {color: #3acbc8;}
.orange {color: hsl(34, 97%, 64%);}
.lightcoral {color:lightcoral;}
.red_rgb {color: rgba(255, 99, 132, 0.3);}
.pink_rgb {color: rgba(153, 102, 255, 0.3);}
.close_red { color: red;}
.close_red:hover { color: lightcoral;}


/* form-inline中的checkbox & button 垂直置中 */
.form-inline [type="button"]{ margin-top: 2px; line-height: normal; }
.form-inline [type="checkbox"]{ margin-top: 6px; line-height: normal; }

/* table 修改 20180604========= */
/* td中的checkbox 垂直置中 */
td input[type="checkbox"]{ margin-top: -5px; line-height: normal; }

/* td中的button 垂直置中 */
td button[type="button"]{ margin-top: -5px; line-height: normal; }

/* table中的字體大小 */
td { font-size: 1.6rem; font-weight: normal; letter-spacing:1px; line-height: 22px; }
th { font-size: 1.6rem; font-weight: bold; letter-spacing:1px; line-height: 22px; }


/* 導覽列修改 20180619========= */

.pagination>li>a, .pagination>li>span { 
  border-radius: 50% !important;
  margin: 0 5px; 
  color: #fff;
  background-color: rgba( 107, 46, 155, 0.3);
  border-width: 3px;
  border-color: rgba( 255, 255, 255, 0.5);
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #fff;
  background-color:  rgba( 107, 46, 155, 0.6);
  border-width: 3px;
  border-color: rgba( 255, 255, 255, 0.5);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: rgba( 107, 46, 155, 0.8);
  border-width: 3px;
  border-color: rgba( 255, 255, 255, 0.5);
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #fff;
  cursor: not-allowed;
  background-color: rgba( 107, 46, 155, 0.2);
  border-width: 3px;
  border-color: rgba( 0, 0, 0, 0.5);
}

/*map*/
.map { color: #000; text-align: left; text-shadow: none; }  

/* 修正badge顯示 20180525 */
.badge {
  display:inline-block;
  padding:.25em .4em;
  font-size:75%;
  font-weight:700;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:.25rem
}
.badge:empty{display:none} 
.btn .badge{position:relative;top:-1px}  
.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}  



/* 修正modal顯示 20180523 */
.modal-backdrop {
  /* bug fix - no overlay */    
  display: none;    
}
/* 版頭字體大小 20180603 */
.nav { font-size: 1.6rem; font-weight: normal; letter-spacing:1px; line-height: 22px; }

/*===========版頭顏色 begin========================*/

/* 選單背景色 navbar */
.navbar-default {
  background-color: rgba( 0, 0, 0, 0.6);
  border: none;
}

/* 標題logo Title */
.navbar-default .navbar-brand {
  color: #ffffff;
}
/* 標題logo 點選色 */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #faefff;
}
/* 選單連結選項顏色 Link */
.navbar-default .navbar-nav > li > a {
  color: #ffffff;
}
/* 選單連結選項點選色 */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffd4fc;
}

/* 縮放選單連結選項顏色 Link */
.navbar-default .nav-stacked > li > a {
  color: #ffffff;
}

/* 縮放選單連結選項點選色 */
.navbar-default .nav-stacked > li > a:hover,
.navbar-default .nav-stacked > li > a:focus {
  color: #727272;
}


/* 選單連結選項active色及點選色 */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #FFFFFF;
  background-color: #faefff;
}

/* 選單bar選項清單色 */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #FFFFFF;
  background-color: #686868;
}

/* 下拉式箭頭 Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #faefff;
  border-bottom-color: #777;
}

/* 下拉式箭頭點選色 */
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #F7C0FF;
  border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #F7C0FF;
  border-bottom-color: #555;
}

/* Mobile version */
.navbar-default .navbar-toggle {
  border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #CCC;
}
/* 純選單文字(無連結) */
.navbar-default .navbar-text {
  color: #ffd257;
}
/* 選單分隔線 */
.nav_hr {
  width: 100%;
  margin-top: 5px; 
  margin-bottom: 5px;
  border-color: #939393;
}
.navbar-default .navbar-btn {padding-top:5px;padding-bottom:5px;}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffd4fc;
  }
}
/*===========版頭顏色 end========================*/


/* 版頭增加子選單 20190327 */
.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}
.dropdown-submenu {
  position:relative;
}
.dropdown-submenu>.dropdown-menu {
  top:0;
  left:100%;
  margin-top:-6px;
}




/* 版頭背景色塊去除圓角 20180619 */
.navbar { 
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

/* radio & checkbox 字樣不折行 20180604 */
@media (min-width: 768px) {
  .form-inline .radio input[type="radio"], 
  .form-inline .checkbox input[type="checkbox"] {
    float: left;
    margin-right: 5px;
  }
}

/* 級距字型大小 20180531*/
@media (max-width: 767px) {
  /* your custom css class on a parent will increase specificity */
  /* so this rule will override Bootstrap's font size setting */
  .label { font-size: 1.6rem; }
  h1 {font-size: 3.5rem;}
  h2 {font-size: 3rem;}
  h3 {font-size: 2.5rem;}
  h4 {font-size: 1.55rem;}
  h5 {font-size: 1.4rem;}
  h6 {font-size: 1.4rem;}
}

@media (min-width: 768px) and (max-width: 991px) {
  .label { font-size: 1.6rem; }
  h1 {font-size: 4rem;}
  h2 {font-size: 3rem;}
  h3 {font-size: 2.5rem;}
  h4 {font-size: 1.55rem;}
  h5 {font-size: 1.5rem;}
  h6 {font-size: 1.4rem;}
}

@media (min-width: 992px) and (max-width: 1199px) {
  .label { font-size: 1.6rem;}
  h1 {font-size: 4.5rem;}
  h2 {font-size: 3.5rem;}
  h3 {font-size: 2.3rem;}
  h4 {font-size: 1.75rem;}
  h5 {font-size: 1.5rem;}
  h6 {font-size: 1.3rem;}
}

@media (min-width: 1200px) {
  .label { font-size: 1.6rem; }
  h1 {font-size: 4.5rem;}
  h2 {font-size: 3.5rem;}
  h3 {font-size: 2.3rem;}
  h4 {font-size: 1.8rem;}
  h5 {font-size: 1.6rem;}
  h6 {font-size: 1.3rem;}
}

/*layout*/
.picwall_sm { margin-top:100px; }
.picwall_md { margin-top:50px; }
.row-margin-top { margin-top: 20px; } 
.well{background:#FFFFFF ; }
.thumbnail {padding: 0px !important;}
.thumbnail img {width: 100%;}
.form-inline {padding:10px;}
.form-inline > * {margin:5px 1px !important;}
.footer { padding-top: 5px;  background-color: rgba( 237, 237, 237, 0.5);}
.modal { background: rgba(000, 000, 000, 0.8); }
.carousel-inner > .item > img {margin: 0 auto;}
.carousel {background-color: black; padding-top:10px;}
.dl {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
.caption p { font-size: 1.6rem; font-weight: normal; letter-spacing:1px; line-height: 26px; }

/*動態checkbox*/
keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: #40e0d0;
}
.option-input:checked::before {
  height: 40px;
  width: 40px;
  position: absolute;
  content: '✔';
  display: inline-block;
  font-size: 26.66667px;
  text-align: center;
  line-height: 40px;
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}

 
.regular-checkbox + label {
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 9px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
}
 
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
 
.regular-checkbox:checked + label {
  background-color: #5bc0de;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
  color: #99a1a7;
}
 
.regular-checkbox:checked + label:after {
  content: '\2714';
  font-size: 1.4rem;
  position: absolute;
  top: 0px;
  left: 3px;
  color: #ffffff;
}
 
 
.big-checkbox + label {
  padding: 1.6rem;
}
 
.big-checkbox:checked + label:after {
  font-size: 2.6rem;
  left: 4px;
}
 
.tag {
  font-family: Arial, sans-serif;
  width: 200px;
  position: relative;
  top: 5px;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  float: left;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* loader 20190905 */

.loader {
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
  width: 200px;
  height: 200px;
  z-index: 999999999 !important;
}