@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&&family=Tenor+Sans&display=swap');


* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html,
body {
  -webkit-touch-callout: none;
  /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;
  /* prevent webkit from resizing text to fit */
}

html {
  touch-action: manipulation !important;
  -ms-touch-action: manipulation !important;
}

body {
  -webkit-overflow-scrolling: touch;
  padding-top: constant(safe-area-inset-top);
  /* 針對ios APP */
  padding-right: constant(safe-area-inset-right);
  /* 針對ios APP */
  padding-bottom: constant(safe-area-inset-bottom);
  /* 針對ios APP */
  padding-left: constant(safe-area-inset-left);
  /* 針對ios APP */
  top: 0 !important;
}

:root {
  --font: 'Microsoft JhengHei', -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  --default: #2c2c2c;
  --bs-primary-rgb:23, 119, 209;
  --bs-link-color-rgb:23, 119, 209;
  --swiper-theme-color: rgb(23, 119, 209);
  --swiper-theme-hover-color: rgb(43, 141, 231);
  --bs-secondary-rgb: 240, 174, 0;
  --bg-warning:239,185,27;
  --bs-tertiary-bg-rgb:251, 251, 251;
  --bs-light-text-emphasis: #616161;
  --menu_txt_scroll_hover: #000;
  --menu: #000;
  --menu-bg:#333333;
  --fc-border-color: #e9e9e9;
  --fc-page-bg-color: #ffffff;
  --fc-neutral-bg-color: transparent;
  --fc-today-bg-color: transparent;
  --text-strong:#111;
  --text-muted:#666;
  --red:#c93934;
  --green:#398f36;
  --yellow:#fac02d;
  --primary:#1777d1;
  --gray:#7c8387;
  --primary-200:#106cc2;
  --primary-100:#60b0f7;
  --bs-border-color: #bdbdbd;
  --bs-secondary-color:#888;
  --bs-breadcrumb-item-active-color:#888;
  --bs-dark-bg-subtle:#ddd;
  --light:#efefef;
  --bs-light-bg-subtle:#f2f2f2;
  --primary-light:#d7e6f1;
  --bg-blue: #9bceff;
  --bg-red: #ffc9c7;
  --bg-yellow: #ffe8b1;
  --google-blue: #1a73e8;
  --transition-speed: 800ms;
  --autoplay-delay: 5000ms;
}

.text-red{
  color: var(--red);
}
a.text-red:hover{
  color: #e7514b;
}
input{
  border-radius: 0.25rem;
  border: 1px solid var(--bs-border-color);
  padding: 5px;
}
::-webkit-scrollbar {
  -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
  width: 2px;
}

::-webkit-scrollbar:horizontal {
  height: 2px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 10px;
  border: 2px solid transparent;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
body{
  font-family: "Noto Sans TC", serif;
  font-optical-sizing: auto;
  font-style: normal;
  word-wrap:break-word;
  overflow-x: hidden;
}
a{
  text-decoration: none;
}
a:hover{
  color: rgb(var(--bs-primary-rgb));
}
input[readonly],textarea[readonly]{
  background: #f7f7f7 !important;
  cursor: default;
}
img{
  max-width: 100%;
  height: auto;
}
.goTop{
  position: fixed;
  right: 5px;
  bottom: 5px;
  z-index: 9;
  width: 40px;
  height: 40px;
  background: var(--default);
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  border: 1px solid;
  visibility: hidden;
}
.goTop:hover{
  cursor: pointer;
  background: var(--red);
}
.btn-primary{
  --bs-btn-bg: var(--swiper-theme-color);
  --bs-btn-border-color: var(--swiper-theme-color);
  --bs-btn-hover-bg:var(--swiper-theme-hover-color);
  --bs-btn-hover-border-color:var(--swiper-theme-hover-color);
  --bs-btn-active-bg:var(--swiper-theme-hover-color);
  --bs-btn-active-border-color:var(--swiper-theme-hover-color);
}
.btn-primary-200{
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
  --bs-btn-active-color:#fff;
  --bs-btn-disabled-color:#fff;
  --bs-btn-bg: #0dcbcb;
  --bs-btn-border-color: #0dcbcb;
  --bs-btn-hover-bg:#07b6b6;
  --bs-btn-hover-border-color:#07b6b6;
  --bs-btn-active-bg:#07b6b6;
  --bs-btn-active-border-color:#07b6b6;
}
.btn-outline-primary {
  --bs-btn-color: var(--swiper-theme-color);
  --bs-btn-border-color: var(--swiper-theme-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--swiper-theme-color);
  --bs-btn-hover-border-color: var(--swiper-theme-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--swiper-theme-color);
  --bs-btn-active-border-color: var(--swiper-theme-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--swiper-theme-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--swiper-theme-color);
  --bs-gradient: none;
}
.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--yellow);
  --bs-btn-border-color: var(--yellow);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffd469;
  --bs-btn-hover-border-color: #ffd469;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #ffd469;
  --bs-btn-active-border-color: #ffd469;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--yellow);
  --bs-btn-disabled-border-color: var(--yellow);
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #c93934;
  --bs-btn-border-color: #c93934;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #db3833;
  --bs-btn-hover-border-color: #db3833;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #db3833;
  --bs-btn-active-border-color: #db3833;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #c93934;
  --bs-btn-disabled-border-color: #c93934;
}
.btn-outline-secondary {
    --bs-btn-color: #000;
    --bs-btn-border-color: #bdbdbd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c93934;
    --bs-btn-hover-border-color: #c93934;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c93934;
    --bs-btn-active-border-color: #c93934;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #bdbdbd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #bdbdbd;
    --bs-gradient: none;
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2b26;
    --bs-btn-hover-border-color: #bb2b26;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bb2b26;
    --bs-btn-active-border-color: #bb2b26;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--red);
    --bs-btn-disabled-border-color: var(--red);
}
.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--light);
    --bs-btn-border-color: var(--light);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d1d1d1;
    --bs-btn-hover-border-color: #d1d1d1;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #d1d1d1;
    --bs-btn-active-border-color: #d1d1d1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--light);
    --bs-btn-disabled-border-color: var(--light);
}
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6f6f6f;
    --bs-btn-border-color: #6f6f6f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c5c5c;
    --bs-btn-hover-border-color: #5c5c5c;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5c5c5c;
    --bs-btn-active-border-color: #5c5c5c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6f6f6f;
    --bs-btn-disabled-border-color: #6f6f6f;
}
.btn-primary-light{
  background: var(--primary-light) !important;
}
.btn-primary-light:hover{
  background: var(--primary) !important;
  color: #fff;
}
.styled-pagination{
	list-style-type: none;
}
.styled-pagination li{
	position:relative;
	margin-right: 5px;
}
.styled-pagination li:first-child{
	margin-left: 5px;
}
.styled-pagination li a{
	position:relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
	height:30px;
	width:30px;
  border-radius: 50px;
  color:#6f6f6f;
	background-color: #fff;
	min-width:30px;
	font-weight:500;
	text-align:center;
	text-transform:capitalize;
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
}
.styled-pagination li a:hover,
.styled-pagination li a.active{
	color:#fff;
	background-color:#6f6f6f;
}
footer{
  background: #2d2d2d;
  color: #fff;
}
footer a{
  color: #fff;
}
footer a:hover{
  color: var(--red);
}
.breadcrumb > li{
  display: flex;
  align-items: center;
}
.breadcrumb > li + li:before {
  font-family: bootstrap-icons !important;
  font-weight: 900;
  content: "\F285";
  padding: 4px 5px 0;
  font-size: 0.8em;
  color: #fff;
}
.breadcrumb{
  font-size: 0.9em;
  --bs-breadcrumb-margin-bottom: 0.8rem;
}
.breadcrumb a{
  color: var(--bs-secondary-color);
}

table:not(.table-condensed) th {
  background: #ededed !important;
  height: 60px;
  vertical-align: middle;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}
.goog-te-gadget span,body > .skiptranslate{
    display: none;
}
.goog-te-gadget {
    color: transparent !important;
    font-size: 0px !important;
}
#google_translate_element {
    display: flex;
    align-items: center;
    line-height: 1.1;
    position: relative;
}
#google_translate_element:before{
    content: '';
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    font-weight: 900;
    color: var(--secondary);
    font-size: 1.3rem;
    left: -.5rem;
}
#google_translate_element select{
    position: relative;
    border: 1px solid #f3f3f3;
    background: #f5f5f5;
    color: #797979;
    font-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 4px 25px 3px 8px;
    text-align: center;
    line-height: 1.5;
    font-weight: 600;
    border-radius: var(--bs-btn-border-radius);
  }
#google_translate_element:after{
    content: "\F229";
    font-family: 'bootstrap-icons';
    position: absolute;
    font-weight: 900;
    color: #aaaaaa;
    font-size: 0.6rem;
    top: 35%;
    right: 10px;
}
#google_translate_element select option{
    background: #fff;
    color:#444;
    border-radius: 0 !important;
}
#\:0\.targetLanguage + span{
    display: none;
}
/*menu*/
.wsmenucontainer {
  min-width: 100vw;   /* 100 % viewport width＝螢幕實際寬度 */
}
.wsactive .wsmenucontainer {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.wsmenu-submenu li {
  position: relative;
  padding: 0px;
  margin: 0px;
  display: block;
}
.wsmenu-submenu li:nth-child(n+2) {
  border-top: 1px solid transparent;
}
.overlapblackbg {
  display: none;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.overlapblackbg.menuopen {
  display: block;
}

.wsmenu-submenu>li:hover>a {
  background-color: #7b7b7b;
  color: #666666;
}

.wsmenu .wsmenu-list>li>a.active {
  color: #666666;
  background-color: rgba(0, 0, 0, 0.08);
}

.wsmenu .wsmenu-list>li>a:hover,
.wsmenu-list>li:hover>a {
  background-color: rgba(0, 0, 0, 0.08);
  color:var(--red) !important;
}

.wsmenu-list li:hover .wsmenu-submenu .wsmenu-submenu-sub {
  display: none;
}

.wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub li:hover .wsmenu-submenu-sub-sub {
  display: none;
  list-style: none;
  padding: 2px;
  border: solid 1px #eeeeee;
  background-color: #fff;
}

.wsmenu-click {
  height: 43px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 50px;
  z-index: 2;
}

.wsmenu-submenu .wsmenu-click {
  height: 36px;
}

.wsmenu-click i {
  display: block;
  font-size: 1em;
  color: rgba(0, 0, 0, 0.25);
  float: right;
}

.wsmenu-rotate {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.wsmenu-submenu-sub {
  width: 100% !important;
  position: static !important;
  left: 100% !important;
  top: 0 !important;
  display: none;
  margin: 0px !important;
  padding: 0px !important;
  border: solid 0px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wsmenu-submenu-sub li {
  margin: 0px 0px 0px 0px !important;
  padding: 0px;
  position: relative;
}

.wsmenu-submenu-sub a {
  display: block;
  padding: 10px 25px 10px 25px;
  border-bottom: solid 1px #ccc;
}

.wsmenu-submenu-sub li a.active {
  color: #000 !important;
}

.wsmenu-submenu-sub li:hover>a {
  background-color: #333333 !important;
  color: #fff;
}

.wsmenu-list>li>a .fa {
  margin-right: 6px;
}

.wsmenu-submenu-sub-sub {
  width: 100% !important;
  position: static !important;
  left: 100% !important;
  top: 0 !important;
  display: none;
  margin: 0px !important;
  padding: 0px !important;
  border: solid 0px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wsmenu-submenu-sub-sub li {
  margin: 0px 0px 0px 0px !important;
}

.wsmenu-submenu-sub-sub a {
  display: block;
  color: #000;
  padding: 10px 25px;
  background: #000 !important;
  border-bottom: solid 1px #ccc;
  font-weight: normal;
}

.wsmenu-submenu-sub-sub li a.active {
  color: #000 !important;
}

.wsmenu-submenu-sub-sub li:hover>a {
  background-color: #606060 !important;
  color: #fff;
}

.wsmenu .wsmenu-list {
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  padding: 0;
  width: 100%;
}

.wsmenu .wsmenu-list>li {
  width: 100%;
  padding: 0;
  text-align: center;
  display: block;
  float: none;
  border-right: none;
  background-color: transparent;
  position: relative;
  white-space: inherit;
  margin-bottom: 0.5rem;
}

.wsmenu .wsmenu-list>li>a {
  padding: 0.35rem 1rem;
  font-size: 1em !important;
  text-align: left;
  border-right: solid 0px;
  color: #000 !important;
  position: static;
  border: 0;
  font-weight: 400;
  display: block;
  border-radius: 0.3rem;
}

.wsmenu .wsmenu-list>li>a>.fa {
  font-size: 16px;
  color: #bfbfbf;
}

.wsmenu .wsmenu-list li a .arrow:after {
  display: none !important;
}

.wsmenu .wsmenu-list li ul li a .fa.fa-caret-right {
  font-size: 1em !important;
  color: #8E8E8E;
}

.mobile-sub .wsmenu-submenu {
  transform: none !important;
  opacity: 1 !important;
  display: none;
  position: relative !important;
  top: 0px;
  background-color: transparent;
  border: solid 1px #ccc;
  padding: 0px;
  visibility: visible !important;
}

.mobile-sub .wsmenu-submenu li a {
  display: block;
  background: none !important;
  font-size: 1em !important;
  text-align: left;
  padding: 9px 25px;
  color: #3a3a3a !important;
}

.mobile-sub .wsmenu-submenu li a:hover {
  background-color: #e7e7e7 !important;
  color: #666666;
}

.mobile-sub .wsmenu-submenu li:hover>a {
  background-color: #e7e7e7 !important;
  color: #666666;
}

.mobile-sub .wsmenu-submenu li .wsmenu-submenu-sub li a {
  line-height: 20px;
  height: 36px;
  background: none;
  border-bottom: none;
  padding-left: 38px;
}

.mobile-sub .wsmenu-submenu li .wsmenu-submenu-sub li .wsmenu-submenu-sub-sub li a {
  line-height: 20px;
  height: 36px;
  background: none;
  border-bottom: none !important;
  padding-left: 38px;
  color: #8e8e8e;
}

.wsmenu {
  width: 290px;
  height: 100%;
  position: fixed;
  right: -290px;
  top: 0px;
  margin: 0;
  background-color: #fff;
  z-index: 100;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  border: none !important;
}

.wsmenu.menuopen {
  overflow-y: auto;
  right: 0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.wsmenucontent {
  z-index: 2;
}

#navToggle_m {
  background: var(--red);
  padding: 6px 25px 22px 3px;
  border-radius: 50px;
  top: 31px;
}

.animated-arrow {
  width: auto;
  position: absolute;
  right: 15px;
  top: 24px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.animated-arrow {
  cursor: pointer;
  padding: 13px 23px 16px 0px;
}

.animated-arrow span,
.animated-arrow span:before,
.animated-arrow span:after {
  cursor: pointer;
  height: 3px;
  width: 23px;
  background: #000;
  position: absolute;
  display: block;
  content: '';
}

#navToggle_m span:before,
#navToggle_m span:after {
  background: #fff;
}

.animated-arrow span:before {
  top: -7px;
}

.animated-arrow span:after {
  bottom: -7px;
}

.animated-arrow span,
.animated-arrow span:before,
.animated-arrow span:after {
  transition: all 500ms ease-in-out;
}

#navToggle_m span {
  background-color: transparent;
}

#navToggle_m span:before,
.animated-arrow.active span:after {
  top: 7px;
}

#navToggle_m span:before {
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  bottom: 0px;
}

#navToggle_m span:after {
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.wsmenu-list li>.wsmenu-submenu {
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  visibility: visible !important;
  border: 0 !important;
}

.wsmenu-list li:hover>.wsmenu-submenu {
  display: none;
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  visibility: visible !important;
}

.wsmenu-submenu li>.wsmenu-submenu-sub {
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  visibility: visible !important;
}

.wsmenu-submenu li:hover>.wsmenu-submenu-sub {
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wsmenu-submenu-sub li>.wsmenu-submenu-sub-sub {
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wsmenu-submenu-sub li:hover>.wsmenu-submenu-sub-sub {
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -o-transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

header.header {
  width: 100%;
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 11;
  box-shadow: 0 0 8px rgb(153 153 153 / 50%);
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
header.header::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
a.logo img {
  max-height: 50px;
  width: auto;
}
header a{
  color: #000;
}
header a:hover{
  color:var(--red);
}
.menu-item-box{
  padding-right: 35px;
}
.bell-icon span {
  position: absolute;
  right: -6px;
  top: -1px;
  font-size: 0.75rem;
  width: 18px;
  height: 18px;
  background: #a71616;
  color: #fff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bell-icon-m {
  font-size: 0.75rem;
  width: 18px;
  height: 18px;
  background: #a71616;
  color: #fff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active .bell-icon-m{
  background: #000;
}
.menu-search-input{
  width: 100%;
  max-width: 600px;
}
.menu-search-input input[type="text"]{
  width: 100%;
  padding: 8px 42px 8px 15px;
  border-radius: 50px;
}
.menu-search-input input[type="text"] + button{
  position: absolute;
  right: 5px;
  min-width: 60px;
  border-radius: 50px;
  background: linear-gradient(156deg, rgb(0 0 0) 0%, rgb(181 180 180) 70%);
  color: #fff;
  border: 0;
}
.menu-search-input::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  padding: 2px;
  --angle: 0deg;
  background: conic-gradient(
    from var(--angle),
    transparent,
  #555555,
    transparent
  );
  animation: borderRotate 3s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes borderRotate {
  to {
    --angle: 360deg;
  }
}
.menu-search-input:has(input:focus)::before {
  background: #555555;
}
.m-tool-box{
  position: absolute;
  left: 20px;
  top: 12px;
}
.mobile-sub svg{
  min-width: 22px;
}
.menu-search-input-s{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 87px;
  z-index: 102;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.menu-search-input-s.active{
  display:flex;
}
.mobile-sub{
  padding-top: 65px;
}
header .user_img{
  width: 26px;
  min-width: 26px;
  height: 26px;
}
header .header-member-name{
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.user_img{
  width: 45px;
  min-width: 45px;
  height: 45px;
}
.state_icon{
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 50px;
}
.state_icon[data-state="1"]{
  background: var(--red);
}
.state_icon[data-state="2"]{
  background: var(--yellow);
}
.state_icon[data-state="3"]{
  background: var(--green);
}
.show_txt::before{
  content: '更多';
  position: relative;
  display: inline-block;
}
button[aria-controls="collapseMore"][aria-expanded="true"] .show_txt::before{
  content: '更少';
}
button[aria-controls="collapseMore"][aria-expanded="true"] i{
  transform: scaleY(-1);
}
.basic_link li{
  position: relative;
  display: flex;
  align-items: center;
}
.basic_link li::before{
  content: '';
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50px;
  display: inline-block;
  margin-right: 10px;
  margin-top: 2px;
}
.container-fluid{
  width: 1800px;
  max-width: 100%;
}
/*//menu*/
.footer_item li{
  position: relative;
}
.footer_item li:last-child{
  padding-right:0.9rem !important;
}
.footer_item li::before{
  content: '';
  width: 1px;
  height: 16px;
  background: #858585;
  position: absolute;
  right: 0;
  top: 5px;
}
.footer_item li:last-child::before{
  content: none;
}
.nav{
  --bs-nav-link-padding-y: 0.3rem;
}
.nav-link{
  background: #fff;
  color: #000;
}
.swiper-slide.active .nav-link,.swiper-slide:hover .nav-link{
  background: var(--red);
  color: #fff;
}
.filter_box a{
  color: #000;
}
.filter_box a.border:hover,.filter_box a.border.active{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary) !important;
}
.filter_box .border{
  border-color: #5c5c5c !important;
}
.filter_box .ai_item a.border:hover,.filter_box .ai_item a.border.active{
  background: var(--yellow);
  color: #000;
  border-color: var(--yellow) !important;
}
.breadcrumb-item+.breadcrumb-item::before{
  padding: 0 5px 0 0;
  content: var(--bs-breadcrumb-divider, "|");
  line-height: normal;
}
.collect_btn{
  width: 35px;
  height: 35px;
  min-width: 35px;
  background: #fff;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ddd;
  position: absolute;
  right: 4%;
  top: 6%;
  left: auto;
}
.collect_btn.active,.collect_btn:hover{
  color: var(--red);
}
.statistics_box i{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50px;
  background: var(--red);
  color: #fff;
}
.subcontractor_list > a:hover{
  border-color: var(--primary) !important;
}
.main_title{
  position: relative;
  padding-left: 25px;
  transform-origin: left;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.main_title::before{
  content: '';
  width: 8px;
  height: 100%;
  background: var(--main_title_color);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
}
.modal-header .btn-close{
  position: absolute;
  right: 20px;
  top: 20px;
}
.menu_swiper .swiper-slide{
  width: auto;
}
.swiper-button-next{
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50px;
  right: 4px;
  box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.2);
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
}
.swiper-button-prev{
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50px;
  left: 2px;
  box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.2);
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
}
.swiper-button-next:after, .swiper-button-prev:after{
  font-size: 16px;
  font-weight: 600;
  color: #000 !important;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
  opacity: 0;
}
.menu-search-input-s{
  width: 100%;
  height: 100%;
}
#menu-search-close{
  position: absolute;
  top: 1.1rem;
  right: 0.85rem;
  font-size: 1.5rem;
}
.menu-search-body{
  height: calc(100vh - 140px);
  overflow-y: auto;
}
.gsc-search-box .form-select:focus{
  box-shadow: none;
}
.card_1 a,.card_2 a > div{
  color: #000;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.card_1 a:hover{
  color: var(--primary-200);
  transform: scale(1.03);
}
.card_2 a:hover > div{
  color: var(--primary-200);
  transform: translateY(-10px);
}
.card_1 a:hover .title,.card_2 a:hover .title{
  font-weight: 500;
}
.card_1 a .ratio img{
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.card_1 a:hover .ratio img{
  transform: scale(1.15);
}
.index .section_block:has(a:hover) .main_title {
  transform: scale(1.1);
}
.card_1 a .ratio-16x9::after{
  content: '';
  background: rgba(0, 0, 0, .3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.card_1 a:hover .ratio-16x9::after{
  opacity: 1;
}
.current_title.other::after{
  content: '';
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #000;
  margin: 2px 0.8rem 0;
}
.btn-outline-dark{
  --bs-btn-bg:#fff;
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: #bdbdbd;
}
.btn-outline-dark:hover{
  color: #fff !important;
}
.ratio-3x4{
  --bs-aspect-ratio: 143.75%;
}
/*map*/
.store-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.store-item.active {
  background: #e0ebf5;
}
.map-result-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.map-info-window {
  width: min(280px, 70vw);
  padding: 4px 2px 2px;
}
.map-info-title {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-info-desc {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-0 { background: var(--green); }
.status-1 { background: var(--red); }
.page_tool_box{
  width: 32px;
  height: 32px;
  background: var(--light);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page_tool_box_out:hover .page_tool_box{
  background: var(--red);
}
.page_tool_box_out:hover .page_tool_box svg{
  fill: #fff;
}
.page_tool_box_out{
  color: #000;
}
.page_tool_box_out:hover{
  color: var(--red) !important;
}
/* 已收藏狀態：只讓愛心變實心紅，圓圈底色與文字維持原樣（favorite.js 注入 .fav-fill-icon 實心愛心） */
.page_tool_box_out .fav-fill-icon{
  display: none;
  color: var(--red);
  font-size: 18px;
  line-height: 1;
}
.page_tool_box_out.active .fav-fill-icon{
  display: inline-block;
}
.page_tool_box_out.active .page_tool_box svg{
  display: none;
}
.main_item_box .nav-item{
  margin: 0 10px 10px 0;
  min-width: 66px;
}
.map_box_btn{
  height: 100%;
  background: url(../img/subcontractor/map.svg);
  background-size: cover;
}
.map_box_btn span{
  background: var(--primary);
  padding: 5px 20px;
  color: #fff;
  width: 116px;
}
.map_box_btn:hover span{
  background: var(--swiper-theme-hover-color);
}
#mapModal .mapClose{
  position: absolute;
  right: 8px;
  top: 7px;
  z-index: 9;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.store-item .more{
  visibility: hidden;
  width: 90px;
  height: auto;
  font-weight: 500;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  box-shadow: 4px 3px 5px rgb(0 0 0 / 50%);
}
.store-item.active .more{
  visibility: visible;
}
.title-box {
  min-width: 98px;
}
.modal .title-box {
  min-width: 88px;
}
.identity2_item,.identity_r1_item{
  display: none;
}
.modal-body .btn-check + label{
  position: relative;
  padding: 12px 17px;
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  border: 0;
}
.modal-body .btn-check:checked + label{
  background: var(--primary);
  color: #fff;
}
.eyes{
  position: absolute;
  right: 0;
  top: .375rem;
  border: 0;
}
.eyes::before{
  content: "\F340";
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  margin-right: 5px;
}
input[type='text'] + .eyes::before{
  content: "\F341";
}
.main_title_p::after{
  content: '';
  width: 30px;
  height: 6px;
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  background: var(--red);
  border-radius: 50px;
}
.qa_list button{
  background: var(--bs-white);
  --bs-border-radius:0.75rem;
  border: 1px solid var(--bs-border-color) !important;
}
.qa_list button:focus-visible{
  background: var(--bs-white);
}
.qa_list button[aria-expanded="true"]{
  background: #4d4d4d;
  color: var(--bs-white);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #4d4d4d !important;
}
.qa_list .card-body {
  --bs-card-spacer-y: 1.5rem;
  --bs-border-radius: 0.75rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.qa_list button[aria-expanded="true"] .text-red{
  color: #fff;
}
.qa_list i{
  transition: transform 0.3s ease-in-out;
}
.qa_list button[aria-expanded="true"] i{
  transform: rotate(45deg);
}
.btn-outline-primary:hover .svg{
  fill: #fff;
}
.filter_num{
  width: 20px;
  height: 20px;
  background: #2c2c2c;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-size: 14px;
}
#filterModal{
  background: rgba(0, 0, 0, 0.4);
}
.filter_parent {
  display: flex;
  align-items: center;
  font-weight: 500;
  padding: 8px 5px 8px 15px;
}
.filter_parent:hover,.filter_children label:hover{
  cursor: pointer;
  background: var(--bs-light-bg-subtle);
}
.filter_children label {
  display: block;
  padding: 10px 0 10px 38px;
}
.filter-group label{
  position: relative;
}
.filter-group label input{
  opacity: 0;
}
.filter-group label::before{
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid #757575;
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 1px;
}
.filter_parent label::before{
  left: 1px;
}
.filter-group label:has(input:checked)::before{
  background: var(--primary);
}
.filter_children label.fake-checked::before{
  background: #afafaf;
  border: 1px solid #afafaf;
}
.filter_children label:has(input:checked)::after,.filter_children label.fake-checked::after{
  content: '\F26E';
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 37px;
  color: #fff;
  margin-top: 1px;
}
.filter_parent label:has(input:checked)::after{
  content: '\F26E';
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  color: #fff;
  margin-top: 1px;
}
.indeterminate::before{
  background: var(--primary);
}
.indeterminate::after{
  content: '\F2EA';
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  color: #fff;
  margin-top: 1px;
}
.filter-group:hover *{
  cursor: pointer;
}
#filterModal .nav-pills{
  width: 200px;
  position: sticky;
  top: 0;
}
#filterModal .tab-content{
  width: 100%;
}
.filter-group{
  border-bottom: 1px dashed #bdbbbb;
}
.filter-toggle{
  background: transparent;
}
.filter-group.active .filter_parent{
  background: var(--bs-light-bg-subtle);
}
.filter-group.active .filter-toggle i{
  display: inline-block;
  transform: rotate(180deg);
}
.modal-dialog-scrollable .modal-body{
  height: 350px;
}
.filterMore_btn::before{
  content: '展開';
  display: inline-block;
}
.filterMore_btn[aria-expanded="true"]::before{
  content: '收合';
}
.filterMore_btn[aria-expanded="true"] i{
  display: inline-block;
  transform: rotate(180deg);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
  background: var(--primary);
}
.menu-select {
  position: relative;
  display: inline-block;
}
.menu-select-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  width: 145px;
  min-width: 145px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.menu-select-btn::after{
  content: '\F282';
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  margin-left: 5px;
}
.menu-select-dropdown input{
  display: none;
}
.menu-select-dropdown + .border:focus-within{
  border-color: #c17142 !important;
  box-shadow: 0 0 8px rgb(193 166 66 / 60%);
}
#top_search_input_m:focus{
  outline: none;
}
.menu-select-dropdown input + label{
  background: transparent;
  color: #000;
  border-radius: 0.5rem;
  padding: 4px 8px;
  position: relative;
  font-size: 0.9rem;
}
.menu-select-dropdown input:checked + label{
  background: linear-gradient(156deg, rgb(241 187 55) 0%, rgba(202, 57, 53, 1) 99%);
  color: #fff;
}
.menu-select-dropdown input:checked + label::before{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0;
  border-color: var(--red) transparent transparent;
}
.menu-select-dropdown label:hover{
  cursor: pointer;
}
.subcontractor_page .nav-pills .nav-link.active,.subcontractor_page .nav-pills .show>.nav-link{
  background: var(--red);
}
.subcontractor_page .nav-link:hover{
  background: var(--red);
  color: #fff;
}
.subcontractor_page .nav-link {
  background: #ffffff;
  color: #000;
  border: 1px solid #bdbdbd;
  border-radius: 50px !important;
}
.community_tool a{
  color: #555;
}
.community_tool a:hover{
  color: var(--red);
}
.bi-x::before{
  font-weight: 600 !important;
}
.map_filter .filter_btn svg{
  fill: var(--primary);
}
.wsmenu .wsmenu-list>li.plan a{
  color: var(--red) !important;
}
.wsmenu .wsmenu-list>li.plan a svg{
  fill: var(--red);
}
.input-shadow{
  border:3px solid rgb(233 240 247);
}
.main_title_p_l{
  position: relative;
  padding-left: 25px;
}
.main_title_p_l::before{
  content: '';
  width: 8px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--red);
  border-radius: 50px;
}
.subcontractor_page .item-out a.item > div{
  transition: 0.3s linear;
}
.subcontractor_page .item-out a.item:hover > div{
  transform: translateY(-8px);
  border:3px solid rgba(43, 108, 176, 0.5) !important;
}
.editor{
  line-height: 1.8;
}
.material_swiper .input-shadow,#news .input-shadow{
  border:3px solid #f2f2f2;
}
.left_menu .btn{
  background: #fff;
  color: #000;
  border: 1px solid transparent;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.left_menu .btn:hover,.left_menu .btn.active{
  background: var(--red);
  color: #fff;
}
.left_menu .btn.return{
  background: #d9d9d9;
}
.left_menu .btn.return:hover{
  background: #4b4b4b;
  color: #fff;
}
#s_menu_btn i{
  width: 26px;
  height: 26px;
  background: var(--red);
  color: #fff;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
  box-shadow: rgb(0 0 0 / 30%) 0px 0px 5px 1px;
}
.left_menu.active #s_menu_btn i{
  transform: rotate(180deg);
}
.report-item {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 12px 36px;
  border-bottom: 1px solid #eee;
  position: relative;
  cursor: pointer;
}
.report-item:last-child{
  border-bottom: 0;
}
.report-item input[type="radio"] {
  position: absolute;
  left: 10px;
  top: 16px;
}
.report-title {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.report-desc {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}
.subcontractor_page .collect_btn{
  background: #ddd;
  color: #fff;
  position: relative;
  right: auto;
  top: auto;
}
.subcontractor_page .collect_btn.active{
  color: var(--red);
}
.file_box div + div{
  border-top: 1px dashed #bebebe;
}
.file_box a:hover{
  color: var(--primary) !important;
}
.subcontractor_page_info .swiper {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
}
.subcontractor_page_info .swiper-slide {
  background-size: cover;
  background-position: center;
}
.subcontractor_page_info .info_swiper2 {
  height: 500px;
  width: 100%;
}
.subcontractor_page_info .info_swiper {
  height: 150px;
  box-sizing: border-box;
  padding: 10px 0;
}
.subcontractor_page_info .info_swiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.subcontractor_page_info .info_swiper .swiper-slide-thumb-active {
  opacity: 1;
}
.subcontractor_page_info .swiper-slide{
  border-radius: 0.6rem;
  overflow: hidden;
}
.subcontractor_page_info .swiper-slide img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.member .step-wrap {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.member .step-line {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 7px;
  background: #ddd;
  z-index: 0;
  border-radius: 50px;
  overflow: hidden;
}
.member .step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.member .circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  margin: 0 auto;
}
.member .step-wrap .step:nth-child(1) .circle {
  background: #cc8254;
  box-shadow: 0 0 0px 4px rgba(204, 130, 84, 0.4);
}
.member .step-wrap .step:nth-child(2) .circle{
  background: #000;
  box-shadow: 0 0 0px 4px rgba(0, 0, 0, 0.4);
}
.member .step-wrap .step:nth-child(3) .circle{
  background: #d9b225;
  box-shadow: 0 0 0px 4px rgba(217, 178, 37,0.4);
}
.member .step-line::before{
  content: '';
  width: var(--progress);
  height: 100%;
  background: #5a5a5a;
  position: absolute;
  left: 0;
  top: 0;
}
.member .progress-circle {
  --size: 60px;
  --thickness: 8px;
  --color: #2b7bbb;
  --bg: #a6daff;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--color);
  position: relative;
  background: conic-gradient(
    var(--color) calc(var(--percent) * 1%),
    var(--bg) 0
  );
}
.member .progress-circle::before {
  content: "";
  position: absolute;
  width: calc(100% - var(--thickness));
  height: calc(100% - var(--thickness));
  background: var(--bs-light-bg-subtle);
  border-radius: 50%;
}
.member .progress-circle span {
  position: relative;
  z-index: 1;
}
.member_menu{
  position: sticky;
  top: 97.98px;
  z-index: 10;
}
.member_menu li a{
  background: #fff;
  border: 0;
}
.member_menu li a:not(.active):hover{
  background: #999;
}
.member_menu li a.active svg,.member_menu li a:hover svg{
  fill: #fff;
}
.member .nav-tabs .nav-link{
  padding: 10px 20px 15px;
  background: transparent;
  border-color: transparent;
}
.member .nav-tabs .nav-link.active{
  background: transparent;
  font-weight: 600;
  color: var(--red);
}
.member .tab-pane{
  padding: 1rem;
  overflow: hidden;
}
.member .tab-content .tab-pane:first-child {
  border-top-left-radius: 0;
}
.member .swiper-slide:hover .nav-link{
  color: var(--red);
}
.member .swiper-slide .nav-link.active::before{
  content: '';
  width: 100%;
  height: 5px;
  background: var(--red);
  position: absolute;
  left: 0;
  bottom: 0;
}
.m-title-box{
  min-width: 90px;
}
.checkthisform .m-title-box::after{
  content: '.';
  display: inline-block;
  opacity: 0;
}
.checkthisform .m-title-box.req::after{
  content: '*';
  display: inline-block;
  color: var(--red);
  opacity: 1;
}
.checkthisform .m-title-box.req.no-req::after{
  opacity: 0;
}
.upload-area {
  text-align: center;
  cursor: pointer;
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
}
.preview-area {
  position: relative;
}
.preview-area img {
  border-radius: 10px;
}
.member .upload-group-avatar {
  width: min(100%, 180px);
}
.member .upload-group-avatar .upload-area,
.member .upload-group-avatar .preview-area {
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
}
.member .upload-group-avatar .upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
}
.member .upload-group-avatar .preview-area {
  overflow: visible;
}
.member .upload-group-avatar .preview-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.member .upload-group-avatar .preview-area .btn-delete {
  top: -10px;
  right: -10px;
  z-index: 2;
}
.member .upload-group-cover {
  width: 100%;
  max-width: 746px;
}
.member .upload-group-cover .upload-area,
.member .upload-group-cover .preview-area {
  aspect-ratio: 16 / 9;
  border-radius: .75rem !important;
}
.member .upload-group-cover .upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
}
.member .upload-group-cover .preview-area {
  overflow: hidden;
}
.member .upload-group-cover .preview-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .75rem;
}
.btn-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  min-width: 26px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 0;
}
.deadline-btn {
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  background: #fff;
}
.deadline-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: #e7f1ff;
}
.btn-shadow_r{
  box-shadow: inset 0 -6px 1px #a3000080, inset 0 5px 10px #f0ebff4d;
  border-radius: 0.8rem;
  padding: 0.5rem 0.8rem 0.7rem;
}
.btn-shadow_r:hover{
  box-shadow: inset 0 -5px 10px 0 hsla(255, 100.00%, 96.08%, 0.30), inset 0 5px 10px 0 rgba(240, 235, 255, 0.3);
}
.btn-shadow_b{
  box-shadow: inset 0 -6px 1px #0032a380, inset 0 5px 10px #f0ebff4d;
  border-radius: 0.7rem;
  padding: 0.5rem 0.5rem 0.7rem !important;
  text-align: center;
}
.btn-shadow_b:hover,.map_box_btn:hover span{
  box-shadow: inset 0 -5px 10px 0 hsla(255, 100.00%, 96.08%, 0.30), inset 0 5px 10px 0 rgba(240, 235, 255, 0.3);
}
.subcontractor_list .nav-tabs{
  border-bottom: 2px solid var(--red);
}
.subcontractor_list .nav-tabs .nav-link {
  position: relative;
  padding: 10px 20px;
  margin-bottom: 0;
  border: 0;
  background: #fff;
  color: #000;
  font-weight: 500;
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  transition:none;
  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.subcontractor_list .nav-tabs .nav-link::before,
.subcontractor_list .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  background: inherit;
  z-index: -1;
}
.subcontractor_list .nav-tabs .nav-link::before {
  left: -10px;
  transform: skewX(-25deg);
  border-radius: 12px 0 0 0;
  box-shadow: -4px 0px 2px 0px rgba(0, 0, 0, 0.1);
}
.subcontractor_list .nav-tabs .nav-link::after {
  right: -10px;
  transform: skewX(25deg);
  border-radius: 0 12px 0 0;
  box-shadow: 3px 0px 2px 0px rgba(0, 0, 0, 0.1);
}
.subcontractor_list .nav-tabs .nav-link:hover {
  box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.4);
}
.subcontractor_list .nav-tabs .nav-link.active {
  background: var(--primary);
  color: #fff;
}
.subcontractor_list .tab_swiper_r .swiper-slide:nth-child(1) { z-index: 4; margin-left: 30px;}
.subcontractor_list .tab_swiper_r .swiper-slide:nth-child(2) { z-index: 3; }
.subcontractor_list .tab_swiper_r .swiper-slide:nth-child(3) { z-index: 2; }
.subcontractor_list .tab_swiper_r .swiper-slide:nth-child(4) { z-index: 1; }
.subcontractor_list .tab_swiper_r .swiper-slide:has(.nav-link.active) {
  z-index: 5 !important;
}
.s_article .ratio-16x9::after{
  content: '';
  width: 50px;
  height: 50px;
  background: url(../img/logo_w.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 5px;
  top: 10px;
  opacity: 0.8;
}
.tab_swiper_r .swiper-slide{
  padding-top: 6px;
  margin: 0 15px;
}
.tab_swiper_r .swiper-slide:last-child{
  padding-right: 8px;
}
.news_tag{
  position: absolute;
  top: 6%;
  left: 1.5rem;
  z-index: 1;
  background: #000;
  color: #fff;
  padding: 5px 8px;
  border-radius: 0.5rem;
}
.index .news_tag{
  top: 4%;
  left: 4%;
}
.news_tag_p {
  background: #000;
  color: #fff;
  padding: 5px 8px;
  border-radius: 0.5rem;
}
.video-wrap {
  position: relative;
  padding-top: 56.25%;
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-thumb {
  position: relative;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 5px 10px;
}
.more_outbox .more-item{
  visibility: hidden;
  position: absolute;
  z-index: -1;
}
.more_outbox.active .more-item{
  visibility: visible;
  position: relative;
  z-index: 0;
}
.more_outbox .more_btn::before{
  content: '顯示更多';
  display: inline-block;
}
.more_outbox.active .more_btn::before{
  content: '顯示更少';
}
.tab_swiper::before{
  content: '';
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  left: 0;
  bottom: 0;
}
.member .eyes{
  right: 10px;
}
.tab_swiper .swiper-button-prev{
  left: -10px;
}
.tab_swiper .swiper-button-next{
  right: -10px;
}
.hand-thumbs-box input{
  display: none;
}
.hand-thumbs-box input + label{
  border: 1px solid #919191;
  padding: 2px 15px;
  border-radius: 50px;
}
.hand-thumbs-box input:checked + label{
  background: var(--primary);
  color: #fff;
}
.select2-container .select2-selection--single {
  height: 38px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  border-color: var(--bs-border-color);
}
.select2-container .select2-selection--multiple{
  min-height: 38px !important;
  border-radius: var(--bs-border-radius);
}
.select2-selection__rendered {
  line-height: 24px;
}
.select2-selection__arrow {
  height: 36px !important;
}
.multi-upload-group {
  width: 100%;
}
.upload-area-m {
  text-align: center;
  display: inline-block;
}
.preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.preview-item {
  position: relative;
  width: 108px;
  height: 108px;
  margin-top: 15px;
}
.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.preview-item .btn-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  min-width: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  padding-left: 28px;
}
.number-control {
  display: flex;
  align-items: center;
  width: 140px;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.number-control button {
  width: 40px;
  height: 40px;
  border: none;
  background: #f2f2f2;
  cursor: pointer;
  transition: 0.2s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.number-control button:hover {
  background: #d1d1d1;
}
.number-control input {
  width: 60px;
  border: none;
  text-align: center;
  outline: none;
}
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e9e9e9;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.file-name {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.file-remove {
  cursor: pointer;
  color: #666;
  font-size: 14px;
  margin-left: 10px;
}
.file-remove:hover {
  color: #dc3545;
}
input[name="advanced"]:checked + .deadline-btn{
  border-color: var(--primary);
  color: var(--primary);
  background: #e7f1ff;
}
.my_notification .item{
  background: #fff;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
  border-radius: 14px;
}
.my_notification .item:hover {
  box-shadow: 0 0 10px 0px rgb(0 34 87 / 20%);
}
.my_notification .item.unread{
  background: #e9f3fb;
}
.my_notification .unread:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 10px;
  background-color: #c91b0f;
  z-index: 0;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
.select2-dropdown {
  max-height: 300px;
  overflow-y: auto;
}
.m-menu-mobile{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: var(--red);
  color: #fff;
}
.m-menu-mobile option{
  background-color: #fff;
  color: #000;
}
.about-swiper_out {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-swiper {
  width: 100%;
  max-width: 991px;
}
.about-swiper .slide-inner {
  width: 100%;
  height: 100%;
  padding: 0 20px;
}
.about-swiper .text-box {
  text-align: center;
}
.about-swiper .text-box h1 {
  font-weight: 600;
  margin-bottom: 0;
}
.about-swiper .text-box p {
  font-size: 1.25rem;
  color: #5f6368;
  margin-bottom: 40px;
  max-width: 450px;
}
.about-swiper_out .bg_box{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  transition: background-color var(--transition-speed) ease-in-out;
  background-color: var(--bg-blue);
}
.about-swiper .image-box img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.05));
}
.about-swiper .slide-inner {
  opacity: 0;
  transition: all 800ms ease-in-out;
}
.about-swiper .swiper-slide-next .slide-inner,
.about-swiper .swiper-slide-duplicate-next .slide-inner {
  transform: translateY(-60px);
  opacity: 0;
}
.about-swiper .swiper-slide-active .slide-inner {
  transform: translateY(0);
  opacity: 1;
}
.about-swiper .swiper-slide-prev .slide-inner,
.about-swiper .swiper-slide-duplicate-prev .slide-inner {
  transform: translateY(60px);
  opacity: 0;
}
.about-swiper_out .bg-light-subtle{
  width: 100%;
  max-width: 600px;
  height: 150px;
}
.about-swiper_out .bg-light-subtle i{
  position: absolute;
  left: 1.5rem;
  bottom: 1rem;
}
.manufacturerSwiper{
  height: 270px;
}
.manufacturerSwiper .swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
}
.manufacturerSwiper .swiper-button-prev,.manufacturerSwiper .swiper-button-next{
  color: var(--primary);
  border-radius: 5px !important;
  border: 1px solid;
}
.manufacturerSwiper .swiper-button-next:after, .swiper-button-prev:after{
  color: var(--primary);
}
.manufacturerSwiper .swiper-button-next.swiper-button-disabled,.manufacturerSwiper  .swiper-button-prev.swiper-button-disabled{
  opacity: 0.4;
}
.report_box{
  width: 35px;
  height: 35px;
  background: #ddd;
}
.report_box_out .collect_btn{
  color: #000;
}
.report_box_out .collect_btn:hover{
  color: #fff;
  background: #000;
}
.report_box svg{
  width: 12px;
  height: 12px;
}
.report_box:hover{
  background: #000 !important;
  color: #fff !important;
}
.report_box:hover svg{
  fill: #fff;
}
.a-plan-list a{
  color: #000;
  transition: all 0.3s;
}
.a-plan-list a i{
  color: var(--primary);
}
.a-plan-list a:hover{
  color: #fff;
  background: var(--primary);
}
.a-plan-list a:hover .btn{
  background: #fff;
  color: var(--primary);
}
.a-plan-list a:hover i,.a-plan-list a:hover .text-primary{
  color: #a0cff9 !important;
}
.a-qa_list > div{
  border-bottom: 1px solid #c6c6c6;
}
.a-qa_list > div:first-child{
  border-top: 1px solid #c6c6c6;
}
.a-qa_list > div:nth-child(even){
  background: #f1f1f1;
}
.a-qa_list .card-body{
  background: transparent;
}
.a-qa_list i{
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: var(--primary);
  color: #fff;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.a-qa_list button[aria-expanded="true"] i{
  transform: rotate(45deg);
}
.video-item video {
  max-height: 250px;
  object-fit: cover;
}
.faq_page .nav-pills .nav-link.active,.faq_page .nav-pills .show>.nav-link{
  background: var(--red);
}
.faq_page .nav-pills .nav-link{
  --bs-nav-link-hover-color:var(--red);
  border-radius: 50px;
  padding: 10px 15px;
}
.tag_box{
  background: url(../img/icon/stamp.svg);
  background-size: contain;
  width: 60px;
  height: 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -1rem;
  top: -1rem;
  transform: rotate(10deg);
}
.form-switch .form-check-input{
  width: 2.6em;
  height: 1.5em;
}
#plan_item:hover{
  cursor: pointer;
}
.discount-box{
  background: #686868;
  color: #fff;
  padding: 2px 8px;
}
#plan_item:checked ~ .discount-box{
  background: var(--red);
}
.clone-head-table-wrap{
  top: 97.98px !important;
}
.sp-title{
  width: 450px;
  text-align: left;
  padding: 5px 25px !important;
}
.compare .table>:not(caption)>*>*{
  padding: 1rem;
}
.compare .table{
  --bs-border-color: transparent;
  border-collapse: separate;
  border-spacing: 3px;
}
.compare .table tbody tr:nth-child(even) td{
  background: #f2f4f5;
}
.compare table thead tr{
  border-color: #fff;
}
.table-basic{
  border: 1px solid #e1e3e8;
  overflow: auto !important;
}
.compare table:not(.table-condensed) th:first-child{
  border-top-left-radius: 2rem;
}
.compare table:not(.table-condensed) th:last-child{
  border-top-right-radius: 2rem;
}
.compare table tbody tr:last-child td:first-child{
  border-bottom-left-radius: 2rem;
}
.compare table tbody tr:last-child td:last-child{
  border-bottom-right-radius: 2rem;
}
.compare .clone-head-table-wrap table:not(.table-condensed) th:first-child{
  border-top-left-radius: 0;
}
.compare .clone-head-table-wrap table:not(.table-condensed) th:last-child{
  border-top-right-radius: 0;
}
table:not(.table-condensed) th.plan_t_box{
  background: #e1f0fd !important;
}
#subscriptionModal label.form-check:has(input:checked),
#adModal label.form-check:has(input:checked){
  border-color: var(--primary) !important;
  background: #e1f0fd;
  outline: 1px solid var(--primary);
}
.business-hours-item{
  padding: 0.9rem 0;
  border-bottom: 1px solid #e5e5e5;
}
.business-hours-item:first-child{
  border-top: 1px solid #e5e5e5;
}
.business-hours-day{
  font-size: 0.9rem;
  font-weight: 500;
}
.closed-check{
  width: 100%;
  padding-left: 1.25em;
  margin-bottom: 0;
}
.time-slots{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
  margin-top: 13px;
}
.time-slot{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.time-input{
  position: relative;
}
.time-input label{
  position: absolute;
  top: -9px;
  left: 12px;
  background: #fff;
  padding: 0 .35rem;
  font-size: 12px;
  color: #666;
  line-height: 1;
}
.time-input .form-control{
  width: 128px;
  height: 38px;
  border-radius: .6rem;
  padding: 0 .3rem 0 .75rem;
}
.time-btn{
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  background: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.time-btn:hover{
  background: var(--red);
  color: #fff;
}
.remove-time{
  font-size: 1.1rem;
}
.time-disabled{
  opacity: .4;
  pointer-events: none;
}
.business-hours-item .form-check .form-check-input{
  margin-left: -1.25em;
  margin-top: 0.27rem;
}
.pfc-card{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.pfc-topbar{
  height: 4px;
  background: #e5e7eb;
}
.pfc-topbar-fill{
  height: 100%;
  width: var(--pfc-progress, 0%);
  background: #C62828;
  border-radius: 0 2px 2px 0;
  animation: pfc-bar-grow 1s ease-out forwards;
}
@keyframes pfc-bar-grow{
  from{
    width: 0;
  }
  to{
    width: var(--pfc-progress, 0%);
  }
}
.pfc-divider{
  width: 1px;
  background: #e5e7eb;
  align-self: stretch;
  flex-shrink: 0;
}
.pfc-seg{
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
}
.pfc-seg.pfc-on{
  background: #C62828;
}
.pfc-seg.pfc-mid{
  background: #ef9f9f;
  animation: pfc-blink 1s ease-in-out infinite;
}
@keyframes pfc-blink{
  0%, 100%{
    background: #ef9f9f;
  }
  50%{
    background: #C62828;
  }
}
.pfc-tier{
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(144deg, rgb(158 203 245) 0%, rgb(33 111 184) 70%);
  text-decoration: none;
  transition: background .15s;
  color: #fff;
}
.pfc-tier:hover{
  background: linear-gradient(144deg, rgb(33 111 184) 0%, rgb(33 111 184) 70%);
  color: #fff;
}
.pfc-tier.pfc-tier-outline{
  background: transparent;
  border-color: rgb(33 111 184);
  color: rgb(33 111 184);
}
.pfc-tier.pfc-tier-outline:hover{
  background: #EBF4FF;
  color: rgb(33 111 184);
}
.pfc-tier-icon{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EBF4FF;
  border: 1px solid #BFDBFE;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.miu-empty{
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.miu-empty:hover,.upload-area:hover{
  border-color: #9ca3af;
  background: #ececee;
}
.miu-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.miu-thumb{
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #e5e7eb;
}
.miu-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.miu-thumb-del{
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  border: none;
  transition: background .15s;
}
.miu-thumb-del:hover{
  background: rgba(0,0,0,.8);
}
.miu-thumb-main{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  background: rgba(0,0,0,.45);
  text-align: center;
  padding: 2px 0;
}
.miu-thumb-ghost{
  aspect-ratio: 1;
  border-radius: 8px;
  background: #f3f4f6;
}
.miu-add{
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px dashed #d1d5db;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.miu-add:hover{
  border-color: #9ca3af;
  background: #f3f4f6;
}
.miu-count{
  margin-top: 8px;
  text-align: right;
}
.modal-xxl {
  --bs-modal-width: calc(100% - 20px);
}
.pm-method{
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
  height: 100%;
}
.pm-method:has(input:checked){
  border-color: var(--primary) !important;
  background: #e1f0fd;
  outline: 1px solid var(--primary);
}
.pm-method:hover:not(:has(input:checked)){
  border-color: var(--bs-border-color) !important;
  background: #e1f0fd;
}
.pm-method-check{
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 10px;
  color: #3b82f6;
  font-weight: 700;
  display: none;
}
.pm-method:has(input:checked) .pm-method-check{
  display: block;
}
.pay-logo img{
  width: 70%;
}
#cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  vertical-align: middle;
  animation: blink 0.7s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typewriter-box{
  width: 350px;
  height: 30px;
}
.see-box .nav-pills .nav-link{
  border: 1px solid var(--bs-border-color);
}
.see-box .nav-pills .nav-link.active,.see-box  .nav-pills .show>.nav-link{
  background: var(--red);
}
.see-box .nav-pills .nav-link.active svg{
  fill: #fff;
}
.see-box .nav-pills .nav-link:hover:not(.active){
  color: var(--red);
}
.c_pic_box{
  background-color: #d3d3d3;
  background-image: radial-gradient(#afafaf 1px, transparent 1px);
  background-size: 14px 14px;
}
.card-expand {
  display: none;
}
.card-text-box {
  transition: transform 0.3s ease;
}
.person-card{
  min-height: 320px;
}
.person-card:hover .card-text-box {
  transform: translateY(-10px);
}
.person-card:hover .card-expand {
  display: block;
}
.person_pic_box_out{
  height: calc(100% + 40px);
  width: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.person_pic_box{
  width: 100%;
  height: calc(100% - 40px);
  background-size: cover;
  background-position: top center;
  display: flex;
  justify-content: center;
}
.person_pic_box img{
  height: calc(100% + 40px);
  width: auto;
  max-width: none;
}
.person_pic_box .txt{
  background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(181 180 180 / 0%) 60%);
  width: 100%;
  color: #fff;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.card-text-box{
  width: 50%;
}
.masonry-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
  grid-template-rows: 220px 220px;
  gap: 1rem;
}
.expertise-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.expertise-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.expertise-card:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}
.expertise-card:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}
.expertise-card:nth-child(5) {
  grid-column: 3;
  grid-row: 2;
  display: block;
}
.expertise-card:nth-child(n+6) {
  display: none;
}
.expertise-card {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
  background: #ddd;
}
.expertise-card .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.expertise-card:hover .card-img {
  transform: scale(1.04);
}
.expertise-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 45%, transparent 70%);
  z-index: 1;
  transition: opacity 0.3s ease;
}
.expertise-card:hover::before {
  opacity: 0.85;
}
.masonry-grid .card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card-cat {
  display: inline-block;
  width: fit-content;
  color: rgb(255 255 255);
  font-weight: 500;
  background: rgb(54 99 137);
  backdrop-filter: blur(4px);
  padding: 2px 15px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}
.card-title {
  font-size: 15px;
  font-weight: 500;
  color: white;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.card-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(54 99 137 / 60%);
  backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.expertise-card:hover .card-arrow {
  opacity: 1;
  transform: translateY(0);
}
.masonry-grid:has(.expertise-card:nth-child(1)):not(:has(.expertise-card:nth-child(2))) {
  grid-template-columns: 1fr;
  grid-template-rows: 280px;
}
.masonry-grid:not(:has(.expertise-card:nth-child(2))) .expertise-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.masonry-grid:has(.expertise-card:nth-child(2)):not(:has(.expertise-card:nth-child(3))) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 240px;
}
.masonry-grid:not(:has(.expertise-card:nth-child(3))) .expertise-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.masonry-grid:not(:has(.expertise-card:nth-child(3))) .expertise-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.masonry-grid:has(.expertise-card:nth-child(3)):not(:has(.expertise-card:nth-child(4))) {
  grid-template-columns: 1fr 1.4fr;
  grid-template-rows: 180px 180px;
}
.masonry-grid:not(:has(.expertise-card:nth-child(4))) .expertise-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.masonry-grid:not(:has(.expertise-card:nth-child(4))) .expertise-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.masonry-grid:not(:has(.expertise-card:nth-child(4))) .expertise-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}
.masonry-grid:not(:has(.expertise-card:nth-child(3))) .expertise-card:nth-child(1) {
  grid-row: 1;
}
.a_d_s{
  background:#f5f7ff;
}
.pill-tab {
  position: relative;
  display: inline-flex;
  background: white;
  border-radius: 100px;
  padding: 4px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}
.pill-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  border-radius: 100px;
  background: #C0392B;
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1), width 0.26s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}
.pill-btn {
  position: relative;
  z-index: 1;
  padding: 7px 18px;
  border-radius: 100px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pill-btn.active {
  color: white;
}
.save-tag {
  font-size: 0.7rem;
  font-weight: 600;
  background: #f5e8e8;
  color: var(--red);
  padding: 1px 5px;
  border-radius: 5px;
}
.pill-btn.active .save-tag {
  background: rgba(255,255,255,0.25);
  color: white;
}
.ad-card {
  background: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ad-card:hover,.pkg-card:hover{
  border-color: var(--primary) !important;
  outline: 1px solid var(--primary);
}
.ad-card:hover .btn-primary,.pkg-card:hover .btn-primary{
  background: var(--bs-btn-hover-border-color);
}
.ad-name {
  color: #0d0d0d;
}
.ad-pos {
  color: #5f6368;
}
.ad-limit {
  font-weight: 600;
  color: #888;
  background: #f5f5f5;
  padding: 2px 7px;
  border-radius: 20px;
}
.ad-limit-red {
  color: #C0392B;
  background: #fef0f0;
}
.ad-card-mid {
  display: flex;
  flex-direction: column;
}
.ad-price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 3px;
}
.ad-period {
  color: #5f6368;
}
.ad-price {
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0d0d0d;
}
.ad-price-red {
  color: #C0392B;
}
.ad-card-bot {
  margin-top: auto;
}
.btn-ad {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  border: 1.5px solid #ddd;
  color: #555;
  background: white;
  text-decoration: none;
  cursor: pointer;
}
.btn-ad-red {
  background: #C0392B;
  border-color: #C0392B;
  color: white !important;
}
.pkg-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #eee;
  display: flex;
  flex-direction: column;
}
.pkg-card-top {
  padding: 18px 18px 0;
}
.pkg-name {
  color: #0d0d0d;
  margin-bottom: 3px;
}
.pkg-target {
  color: #5f6368;
  padding-bottom: 14px;
}
.pkg-badge {
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
}
.pkg-badge-rec {
  background: #fef0f0;
  color: #C0392B;
}
.pkg-badge-hot {
  background: #fff8f0;
  color: #c05000;
}
.pkg-price-area {
  padding: 13px 18px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.pkg-main-price {
  color: #0d0d0d;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pkg-main-price-red {
  color: #C0392B;
}
.pkg-equiv {
  color: #5f6368;
}
.pkg-features {
  padding: 14px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #000;
}
.pkg-feat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pkg-feat-label {
  color: #000;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pkg-feat-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  flex-shrink: 0;
}
.pkg-feat-label-red::before {
  background: #C0392B;
}
.pkg-feat-val {
  font-weight: 700;
  color: #0d0d0d;
}
.pkg-feat-none {
  color: #dadce0;
}
.pkg-cta-wrap {
  padding: 0 18px 18px;
}
.star-display .star-icon {
  color: #f5a623;
  font-size: 1.2rem;
}
.star-display .star-icon + .star-icon{
  margin-left: 2px;
}
.star-input i {
  color: #ccc;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.15s;
}
.star-input i.active {
  color: #f5a623;
}
.community_tool a.social-active .bi-facebook:hover{
  color: #1777d1;
}
.community_tool a.social-active .bi-instagram:hover{
  color: #ec4a58;
}
.community_tool a.social-active .bi-youtube:hover{
  color: #ff0000;
}
.community_tool a.social-active .bi-line:hover{
  color: #06c152;
}
.community_tool a.social-active .bi-tiktok:hover{
  color: #000;
}
.community_tool a.social-active .bi-whatsapp:hover{
  color: #24cc63;
}
.community_tool a.social-active .bi-wechat:hover{
  color: #2aae67;
}
.community_tool a.social-active .bi-facebook{
  color: #1777d1;
}
.community_tool a.social-active .bi-instagram{
  color: #ec4a58;
}
.community_tool a.social-active .bi-youtube{
  color: #ff0000;
}
.community_tool a.social-active .bi-line{
  color: #06c152;
}
.community_tool a.social-active .bi-tiktok{
  color: #000;
}
.community_tool a.social-active .bi-whatsapp{
  color: #24cc63;
}
.community_tool a.social-active .bi-wechat{
  color: #2aae67;
}
.community_tool .social-inactive{
  color: #ccc;
}
/* footer 社群按鈕：品牌色（沿用 community_tool 色碼） */
.footer_social .bi-facebook{
  color: #1777d1;
}
.footer_social .bi-line{
  color: #06c152;
}
.footer_social .bi-youtube{
  color: #ff0000;
}
.footer_social .bi-instagram{
  color: #ec4a58;
}
.footer_social a:hover i{
  opacity: .75;
}
.select2-container .select2-search--inline .select2-search__field{
  height: 24px;
  margin-left: 10px;
}
.adv_banner_pic{
  --bs-aspect-ratio: 30%;
}
/* 首頁 Banner 版位：固定 1000×290 比例框，內圖以 object-fit:cover 等比放大填滿並置中裁切 */
.banner_frame{
  width: 100%;
  max-width: 1000px;
}
.banner_frame .adv_banner_pic{
  --bs-aspect-ratio: 29%;
}
.ads_page_box table{
  --bs-border-color: transparent;
    border-collapse: separate;
    border-spacing: 3px;
}
#ModalToggle .modal-dialog-scrollable .modal-body,
#adv1Modal .modal-dialog-scrollable .modal-body,
#adv2Modal .modal-dialog-scrollable .modal-body{
  height: auto;
}
.opacity-40 {
    opacity: .4!important
}
.youtube_icon{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  width: 60px;
  height: 40px;
}

/*20260721 new*/
.anchor-button {
  min-height: 76px;
  width: 220px;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  color: #27313c;
  box-shadow: 0 10px 28px rgba(28,48,78,.06);
  font-weight: 600;
  transition: .18s ease
}
.anchor-button:hover {
  border-color: rgba(19,119,212,.38);
  box-shadow: 0 16px 36px rgba(28,48,78,.10);
  transform: translateY(-2px)
}
.anchor-button-go {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f2f7ff;
  color: rgba(var(--bs-primary-rgb))!important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px
}
#plan .plan-control-head{max-width:760px;margin:0 auto 28px;text-align:center;position:relative}
#plan .plan-billing-toggle{position:relative;display:inline-flex;align-items:center;gap:4px;background:#eef2f8;border-radius:999px;padding:4px;margin:0 auto 10px;min-width:260px;justify-content:center}
#plan .plan-billing-slider{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:999px;background:var(--primary);box-shadow:0 3px 10px rgba(23,119,209,.20);transition:transform .26s cubic-bezier(0.4,0,0.2,1),width .26s cubic-bezier(0.4,0,0.2,1);z-index:0}
#plan .plan-billing-btn{position:relative;z-index:1;border:0;background:transparent;color:#343b46;border-radius:999px;padding:8px 38px;font-weight:900;cursor:pointer;line-height:1.1;transition:color .2s}
#plan .plan-billing-btn.active{color:#fff}
#plan .plan-save-note{color:#137333;font-size:14px;font-weight:900;min-height:20px;}

#plan .plan-grid{display:grid;gap:20px;align-items:start}
#plan .plan-grid.count-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1180px){#plan .plan-grid.count-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){#plan .plan-grid.count-3{grid-template-columns:1fr}}

#plan .google-plan{border:1px solid #d8dee8;border-radius:20px;background:#fff;display:flex;flex-direction:column;position:relative;transition:.18s ease;overflow:hidden}
#plan .google-plan:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(31,45,61,.10)}
#plan .google-plan.recommended{border:2px solid var(--primary);box-shadow:0 10px 26px rgba(23,119,209,.10)}
#plan .plan-badge{color:var(--primary);font-weight:900;margin:0;padding:22px 26px 0}
#plan .plan-badge:empty:before{content:'\00a0'}
#plan .plan-head{padding:8px 26px 12px;text-align:left}
#plan .plan-head h3{font-size:22px;line-height:1.2;margin:0 0 8px;font-weight:850;letter-spacing:-.02em;color:#111827}
#plan .plan-subtitle{margin:0 0 20px;line-height:1.55}
#plan .plan-chip{display:inline-flex;align-items:center;gap:6px;background:#f1f3f4;border-radius:999px;padding:4px 15px;color:#263238;font-weight:900;font-size: 15px;}
#plan .plan-chip-icon{font-size:13px;color:#5f6368}
#plan .plan-price-block{padding:0 26px 16px;text-align:left}
#plan .plan-price-lead{color:#3c4043;font-weight:700;margin-bottom:20px}
#plan .plan-price-lead:empty:before{content:'\00a0'}
#plan .plan-price-lead .old{text-decoration:line-through;color:#9ca7b2;font-weight:500;margin-right:8px}
#plan .google-price{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#111827;display:flex;align-items:baseline;gap:3px;flex-wrap:wrap}
#plan .google-price .currency{font-size:20px;font-weight:700}
#plan .google-price .suffix{font-size:15px;font-weight:700;color:#5f6368}
#plan .plan-body{padding:0 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
#plan .plan-body > .btn{width:100%}
#plan .plan-product-title{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:850;margin:4px 0 8px;color:#111827}
#plan .plan-product-star{font-size:20px;line-height:1}
#plan .plan-feature-list{min-height:238px;display:grid;gap:12px;align-content:start}
#plan .feature.google-feature{display:grid;grid-template-columns:18px 1fr;gap:10px;margin:0;color:#202124;line-height:1.5;min-height:46px;align-items:start}
#plan .plan-check{display:flex;align-items:center;height:1.5em}
#plan .plan-check::before{content:'';width:8px;height:8px;border-radius:50%;background:#000;flex-shrink:0}
#plan .feature-text strong{display:block;font-weight:700;color:#0d0d0d;margin-bottom:1px}
#plan .feature-text span{display:block;color:#000;line-height:1.45}
#plan .plan-permission-footer{margin-top:auto;padding-top:10px}
#plan .plan-permission-toggle{width:100%;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;gap:9px;background:#050505;color:#d7e7ff;min-height:44px;padding:0 16px;font-size:15px;font-weight:950;cursor:pointer;transition:.16s ease}
#plan .plan-permission-toggle:hover{background:#151515;transform:translateY(-1px)}
#plan .plan-permission-panel{display:none;margin-top:14px;border-top:1px solid #e5ebf2;padding-top:12px;animation:fadeIn .22s ease}
#plan .plan-permission-panel.is-open{display:block;min-height:360px}
#plan .plan-permission-panel.is-open .permission-list{align-content:start;align-items:start}
#plan .permission-list{display:grid;gap:10px}
#plan .permission-row{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 0;border-bottom:1px dashed #dde5ef;line-height:1.5}
#plan .permission-row span:first-child{color:#202124;font-weight:850}
#plan .permission-row strong{color:#5f6368;text-align:left;font-weight:500;white-space:normal}
#plan .compare-plus{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;border:2px solid #d7e7ff;font-size:15px;line-height:1;font-weight:950}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:1180px){#plan .plan-feature-list{min-height:216px}#plan .plan-permission-panel.is-open{min-height:300px}}
@media (max-width:620px){#plan .plan-feature-list{min-height:auto}#plan .plan-permission-footer{margin-top:16px}#plan .plan-permission-panel.is-open{min-height:auto}}
#plan .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/*//20260721 new*/

/* esme add */
.btn_find{
  position: relative;
  border:1px solid #ca3935;
  color: #ca3935;
}
.btn_find:before{
    content: "";
    position: absolute;
    --angle: 0deg;
    pointer-events: none;
    inset: -2px;
    border-radius: 999px;
    padding: 2px; 
    background: conic-gradient(from var(--angle), transparent, #f5d2d2, transparent);
    animation: 3s linear 0s infinite normal none running borderRotate;
    mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
}
.btn_find:hover{
  background: #ca3935;
  color: #fff;
  background-image: linear-gradient(105deg, #ca3935 35%, #f4a0a0 50%, #ca3935 65%) !important;
  background-size: 250% 100% !important;
  animation: fix-btn-sweep 3s ease-in-out !important;
  transition: transform 0.3s ease-in-out !important;
}
.btn_find svg{
  fill: #ca3935 !important;
}
.btn_find:hover{
  background: #ca3935;
  color: #fff;
}
.btn_pub{
  position: relative;
  border:1px solid #216fb8;
  color: #216fb8;
}
.btn_pub:before{
    content: "";
    position: absolute;
    --angle: 0deg;
    pointer-events: none;
    inset: -2px;
    border-radius: 999px;
    padding: 2px; 
    background: conic-gradient(from var(--angle), transparent, #c1d6eb, transparent);
    animation: 3s linear 0s infinite normal none running borderRotate;
    mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
}
.btn_pub svg{
  fill: #216fb8 !important;
}
.btn_pub:hover{
  background: #216fb8;
  color: #fff;
  background-image: linear-gradient(105deg, #216fb8 35%, #67a3dc 50%, #216fb8 65%) !important;
  background-size: 250% 100% !important;
  animation: fix-btn-sweep 3s ease-in-out !important;
  transition: transform 0.3s ease-in-out !important;
}
.side_btn{display: none;}
#header .nav_btn:hover svg,#header .side_btn:hover svg{
  fill: #fff !important;
}
.mobile-sub > .border-bottom:first-child{
  display: flex;
  justify-content: safe flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
.mobile-sub > .border-bottom:first-child .side_btn{
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (min-width: 992px){
  .menu-select{
    gap: 10px;
  }
  .menu-select .menu-search-input{
    flex: 0 1 420px;
    max-width: 420px;
    min-width: 220px;
  }
  .menu-select .nav_btn{
    flex: 0 0 auto;
    margin-left: 0 !important;
    white-space: nowrap;
  }
  .menu-select .menu-search-input + .nav_btn{
    margin-left: 24px !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px){
  .menu-select .nav_btn{
    display: none !important;
  }
  .side_btn{
    display: inline-flex !important;
    margin: 10px 0;
  }
}
@media (min-width: 1200px) and (max-width: 1399px){
  .menu-select .menu-search-input{
    max-width: 340px;
  }
}
@keyframes fix-btn-sweep {
    0%   { background-position: -150% center; }
    100% { background-position: 150% center; }
}
/* esme end */

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/

@media (min-width: 1800px){

}
@media (min-width: 1200px){
  .pe-lg-2-5{
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
  }
  .index .menu_swiper_out{
    position: sticky;
    top: 98px;
    z-index: 3;
  }
  .modal-xxl {
    --bs-modal-width: 1320px;
  }
  .modal-xxl .miu-grid{
    grid-template-columns: repeat(8, 1fr);
  }
  .ads_page_box .table tbody tr:nth-child(even) td {
    background: #f2f4f5;
  }
  .ads_page_box .table>:not(caption)>*>*{
    padding: .5rem 1.5rem;
  }
  .case_gov_box{
    border: 1px solid var(--bs-border-color);
  }
  .table-responsive.case_gov_box table tbody tr:last-child{
    border-color: transparent;
  }
}
@media (min-width: 1920px){
  .logo_box{
    width: 300px;
  }
  .modal-xxl {
    --bs-modal-width: 1500px;
  }
  .modal-xxl .miu-grid{
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (max-width: 1199px){
  .menu-select{
    flex-wrap: wrap;
  }
  .nav_btn{
    margin: 10px 10px 0 0 ;
  }
  .mobile-sub {
    padding-top: 55px;
  }
  #navToggle_m{
    top: 19px;
  }
  .table-responsive{
    overflow: visible;
  }
  .table-responsive thead{
    display: none;
  }
  .table-responsive table,.table-responsive table tbody{
    display: block;
  }
  .table-responsive table tr{
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 10px;
  }
  .table-responsive table tr + tr{
    margin-top: 15px;
  }
  .table-responsive table td{
    position: relative;
    display: flex;
    /* align-items: center; */
    border: 0;
    padding: 4px;
  }
  .table-responsive table td::before{
    content: attr(data-title);
    width: 200px;
    margin-right: 10px;
    background: #ededed;
    padding: 5px;
    font-weight: 500;
  }
  .table-responsive table td > div{
    width: calc(100% - 200px);
  }
  .table-responsive.case_gov_box table tr{
    box-shadow: none;
    border: 1px solid var(--bs-border-color);
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .index .menu_swiper_out{
    position: sticky;
    top: 98px;
    z-index: 3;
  }
  .subcontractor_page .info_swiper2 {
    height: 300px;
  }
  .subcontractor_page .info_swiper {
    height: 110px;
  }
  .upload-group {
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .left_menu,.member_menu,.clone-head-table-wrap{
    top: 75.58px !important;
  }
  .subcontractor_page .info_swiper2 {
    height: 350px;
  }
  .subcontractor_page .info_swiper {
    height: 110px;
  }
  .person-card {
    min-height: 220px;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .m-tool-box{
    top: 20px;
  }
}
@media (min-width: 992px){
  .col-lg-5th {
    flex: 0 0 auto;
    width: 20%;
  }
  .map_filter{
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
  }
  .map-layout {
    position: relative;
    display: flex;
    height: calc(100% - 60px);
  }
  #map {
    width: calc(100% - 400px);
  }
  #storeList {
    width: 400px;
    overflow-y: auto;
  }
  .storeList .swiper-wrapper {
    display: block !important;
    transform: none !important;
  }
  .storeList .swiper-slide {
    height: auto;
  }
  .animated-arrow{
    top: calc((100% - 29px ) / 2);
  }
  .left_menu{
    width: 350px;
    position: sticky;
    top: 97.98px;
    z-index: 1;
  }
  .right_box{
    width: calc(100% - 350px);
  }
  .about-swiper_out .bg_box{
    position: absolute;
    top: 3%;
    right: 5%;
  }
  .tab-btn-group {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
  }

  .tab-text-group {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    max-width: 220px;
  }
  .ab_see_box1{
    position: absolute;
  }
  .ab_see_box3{
    position: absolute;
    right: 0;
  }
  .phone-wrap{
    max-width: 40%;
  }
  .ab_see_box2 .tab-content{
    position: absolute;
    z-index: 2;
    top: 18%;
    left: -10%;
    width: 110%;
  }
  .person-box div:nth-child(3) .person_pic_box_out,
  .person-box div:nth-child(4) .person_pic_box_out{
    left: 0;
  }
  .person-box div:nth-child(3) .card-text-box,
  .person-box div:nth-child(4) .card-text-box{
    right: 0;
  }
  .border-lg-end{
    border-right: 1px solid var(--bs-border-color);
  }
}
@media (max-width: 991px){
  .index .menu_swiper_out{
    position: sticky;
    top: 75.58px;
    z-index: 3;
  }
  .map_filter {
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
  }
  .map-layout {
    display: flex;
    flex-wrap: wrap;
  }
  .storeList{
    order: 2;
    height: 120px;
  }
  #map {
    width: 100%;
    height: calc(100vh - 180px);
  }
  #mapModal .mapClose{
    top: 10px;
    padding: 6px 12px;
  }
  .mobile-hide{
    display: none !important;
  }
  .py-2-5{
    padding-top: .8rem;
    padding-bottom: .8rem;
  }
  #menu-search-btn{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .left_menu{
    position: sticky;
    z-index: 2;
    background: #2d2d2d !important;
    color: #fff;
  }
  .left_menu .text-primary{
    color: #fff !important;
  }
  .about-swiper_out .bg_box{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .card-expand {
    display: none !important;
  }
  .person-card:hover .card-text-box {
    transform: none;
  }
  .masonry-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 180px 180px;
  }
  .expertise-card:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  .expertise-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .expertise-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .expertise-card:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }
  .expertise-card:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
  .pill-tab {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .pill-btn {
    padding: 6px 12px;
  }
  .border-lg-end{
    border-bottom: 1px solid var(--bs-border-color);
  }
  .modal-header .btn-close{
    right:10px;
  }
  .nav_btn{
    display: none !important;
  }
  .side_btn{
     display: inline-flex !important;
     margin: 10px 0;
  }
}
@media (min-width: 768px){
  .compare .table-basic thead th:first-child{
    width: 30%;
  }
  .compare .table-basic thead th:nth-child(2){
    width: 15%;
  }
  .compare .table-basic thead th:nth-child(3){
    width: 15%;
  }
  .compare .table-basic thead th:nth-child(4){
    width: 15%;
  }
  .compare .table-basic thead th:last-child{
    width: 25%;
  }
  .report_box_out{
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media (max-width:767px) {
  a.logo img{
    max-height: 30px;
  }
  .animated-arrow{
    top:18px;
  }
  .left_menu,.clone-head-table-wrap{
    top: 63.58px !important;
  }
  .s-menu-h3_txt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }
  .subcontractor_page .info_swiper2 {
    height: 250px;
  }
  .subcontractor_page .info_swiper {
    height: 90px;
  }
  .m-title-box{
    justify-content: start;
  }
  .table-responsive table td::before{
    width: 110px;
  }
  .table-responsive table td > div{
    width: calc(100% - 110px);
    padding: 5px 0;
  }
  .menu-search-input input[type="text"]{
    padding: 4px 42px 4px 15px;
  }
  .menu-search-input input[type="text"] + button{
    width: 23px;
    min-width: 23px;
    height: 23px;
    font-size: 14px;
    padding: 0 !important;
    right: 3px;
    top: 3px;
  }
  .index .menu_swiper_out,.member_menu{
    top: 63.58px;
  }
  .subcontractor_list .nav-tabs .nav-link{
    padding: 8px;
  }
  .subcontractor_page_list .ratio-3x4{
        --bs-aspect-ratio: 60%;
  }
  .sp-title {
    width: 150px;
    padding: 5px !important;
  }
  .business-hours-day{
    padding-top: 0;
  }
  .time-slot{
    gap: .3rem;
  }
  .pfc-body-row{
    flex-wrap: wrap;
  }
  .pfc-divider{
    display: none;
  }
  .pfc-score{
    flex: 0 0 auto;
  }
  .pfc-text{
    order: 3;
    flex: 0 0 100%;
  }
  .pfc-tier{
    margin-left: auto;
  }
  .pfc-actions{
    order: 4;
    flex: 0 0 100%;
    flex-direction: column;
  }
  .pfc-actions .pfc-tier{
    width: 100%;
    margin-left: 0;
  }
  .miu-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .modal-xxl .miu-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .person-card {
    min-height: 120px;
  }
  .masonry-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 200px);
  }
  .expertise-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .expertise-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .expertise-card:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }
  .expertise-card:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
  }
  .expertise-card:nth-child(5) {
    grid-column: 1;
    grid-row: 5;
  }
  .pill-tab {
    width: 100%;
  }
  .pill-btn{
    width: 33.3333%;
    justify-content: center;
  }
  .save-tag{
    display: none;
  }
  .qa_list .card-body{
    --bs-card-spacer-y: 1rem;
  }
  .report_box_out{
    margin-left: auto;
  }
}
@media (max-width: 575px) {
  .m-tool-box{
    top: 16px;
  }
  #navToggle_m{
    top: 15px;
  }
  .map_box_btn span{
    padding: 5px 10px;
    width: 96px;
  }
  .map_box_btn{
    padding: 4px 0;
  }
  .my_notification .item img{
    width: 40px;
    height: 40px;
  }
  .modal-xxl .miu-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .menu-select:focus-within {
    position: absolute;
    z-index: 1;
    width: calc(100% - 12px);
    left: 6px;
  }
}

@media (min-width:1200px) and (max-width: 1400px){

}

@media (min-width: 992px) and (max-width: 1399px){
  .more_outbox .more-item.certificate_box{
    visibility: visible;
    position: relative;
    z-index: 0;
  }
  .masonry-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 180px 180px;
  }
  .expertise-card:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  .expertise-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .expertise-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .expertise-card:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }
  .expertise-card:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
}
@media (max-width: 1181px) {}


@media (max-width: 821px) {
}


/*iphone plus*/
@media (max-width: 430px) {}


/*iphone: 7px*/
@media (max-width: 400px) {}



/*iphone 5*/
@media (max-width: 321px) {}


/*iPhone XR*/
@media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2) {}

/*iPhone XS*/
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {}

/*iPhone XS Max*/
@media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3) {}

/*橫拿*/
@media screen and (orientation:landscape) {

}

/*縱拿*/
@media screen and (orientation:portrait) {}

/*設備寬高比*/
@media screen and (device-aspect-ratio: 16/9) {}