/*--------------------------------------------------------------
* filename	2026/theme/Softland/assets/css/style_notice.css
# General
--------------------------------------------------------------*/
html {
  overflow-x: hidden;
}

body {
  font-family: "微軟正黑體", "Roboto", sans-serif;
  color: #9fa1a4;
  line-height: 1.5;
}

a {
  color: #777;
  text-decoration: none;
  transition: .3s all ease;
}

a:hover {
  color: #000;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: "微軟正黑體", "Poppins", sans-serif;
  color: #000;
}

.container {
  z-index: 2;
  position: relative;
}
@media screen and (max-width: 575px) {
	.container { max-width:96vw; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.container { max-width:94vw; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.container { max-width:92vw; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.container { max-width:90vw; }
}
@media screen and (min-width: 1200px) {
	.container { max-width:80vw; }
}

.text-black {
  color: #000 !important;
}

.text-primary {
  color: #2d71a1 !important;
}
.text-secondary {	color:#666 !important ; }
.font-weight-bold	{	font-weight: 600; }
.font-weight-light	{	font-weight: 100; }

.border-top {
  border-top: 1px solid #f2f2f2 !important;
}

.border-bottom {
  border-bottom: 1px solid #f2f2f2 !important;
}

figure figcaption {
  margin-top: .5rem;
  font-style: italic;
  font-size: .8rem;
}

section {
  overflow: hidden;
}

.section {
  padding: 5rem 0;
}

.section-heading {
	font-size: 2rem;
	font-weight: 700;
	background: linear-gradient(-45deg, #3db3c5, #274685);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*--------------------------------------------------------------
# Back to top button / 浮動按鍵
--------------------------------------------------------------*/
/*
.floating_button		{	position:fixed;	visibility:hidden; opacity:0; right:24px; z-index:996; background:#2d71a1; width:60px; height:60px; border-radius:50px; transition:all 0.4s; }
.floating_button	i	{	font-size:36px; color:#fff; line-height:0; }
.floating_button:hover	{	background:#3687c1; color:#fff; }
.floating_button.active {	visibility:visible; opacity:1; }
.back-to-notice-inquiry	{	bottom: 164px; }
.back-to-top			{	bottom: 94px; }
.back-to-member-center	{	bottom: 24px; }
*/

/*--------------------------------------------------------------
# Floating Buttons
--------------------------------------------------------------*/
#floating-buttons {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 996;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.floating_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #2d71a1;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s, opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.floating_button.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.floating_button i {
  font-size: 28px;
  color: #fff;
  line-height: 1;
}

.floating_button:hover {
  background: #3687c1;
  color: #fff;
}

/* Member center 常態顯示，預設就是 active */
.back-to-member-center {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Vendor center 常態顯示，預設就是 active */
.back-to-vendor-center {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn.btn-outline-white {
  border: 2px solid #fff;
  background: none;
  color: #fff;
}

.btn.btn-outline-white:hover {
  background: #fff;
  color: #2d71a1;
}

.btn.btn-primary {
  background: #2d71a1;
  background: linear-gradient(-45deg, #1391a5, #274685);
  color: #fff;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: none;
}

.btn.disabled, .btn:disabled {
  opacity: 0.50;
  box-shadow: none;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
  box-shadow: none;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  box-shadow: none;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0 rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(38, 143, 255, 0.5);
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
  box-shadow: none;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
  box-shadow: none;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus, .btn-success.focus {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0 rgba(72, 180, 97, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(72, 180, 97, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
  box-shadow: none;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus, .btn-info.focus {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
  box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}

.btn-warning {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
  box-shadow: none;
}

.btn-warning:hover {
  color: #1f2d3d;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus, .btn-warning.focus {
  color: #1f2d3d;
  background-color: #e0a800;
  border-color: #d39e00;
  box-shadow: 0 0 0 0 rgba(221, 171, 15, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #1f2d3d;
  background-color: #d39e00;
  border-color: #c69500;
}

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(221, 171, 15, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
  box-shadow: none;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
  box-shadow: 0 0 0 0 rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(225, 83, 97, 0.5);
}

.btn-light {
  color: #1f2d3d;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
  box-shadow: none;
}

.btn-light:hover {
  color: #1f2d3d;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

.btn-light:focus, .btn-light.focus {
  color: #1f2d3d;
  background-color: #e2e6ea;
  border-color: #dae0e5;
  box-shadow: 0 0 0 0 rgba(215, 218, 222, 0.5);
}

.btn-light.disabled, .btn-light:disabled {
  color: #1f2d3d;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: #1f2d3d;
  background-color: #dae0e5;
  border-color: #d3d9df;
}

.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(215, 218, 222, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
  box-shadow: none;
}

.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}

.btn-dark:focus, .btn-dark.focus {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
  box-shadow: 0 0 0 0 rgba(82, 88, 93, 0.5);
}

.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1d2124;
  border-color: #171a1d;
}

.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(82, 88, 93, 0.5);
}

.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #007bff;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:focus, .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
}

.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:focus, .btn-outline-success.focus {
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:focus, .btn-outline-info.focus {
  box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5);
}

.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus, .btn-outline-warning.focus {
  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
}

.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:focus, .btn-outline-danger.focus {
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #1f2d3d;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:focus, .btn-outline-light.focus {
  box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
}

.btn-outline-light.disabled, .btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
  color: #1f2d3d;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:focus, .btn-outline-dark.focus {
  box-shadow: 0 0 0 0 rgba(52, 58, 64, 0.5);
}

.btn-outline-dark.disabled, .btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(52, 58, 64, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: none;
}

.btn-link:focus, .btn-link.focus {
  text-decoration: none;
}

.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}

.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group.show .dropdown-toggle {
  box-shadow: none;
}

.btn-group.show .dropdown-toggle.btn-link {
  box-shadow: none;
}

.btn-group-vertical {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.bg-gradient-lightblue {
  background: #3c8dbc linear-gradient(180deg, #599ec6, #3c8dbc) repeat-x !important;
  color: #fff;
}

.bg-gradient-lightblue.btn.disabled, .bg-gradient-lightblue.btn:disabled, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled):active, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled).active,
.show > .bg-gradient-lightblue.btn.dropdown-toggle {
  background-image: none !important;
}

.bg-gradient-lightblue.btn:hover {
  background: #3c8dbc linear-gradient(180deg, #518cad, #33779f) repeat-x !important;
  border-color: #307095;
  color: #ececec;
}

.bg-gradient-lightblue.btn:not(:disabled):not(.disabled):active, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled).active, .bg-gradient-lightblue.btn:active, .bg-gradient-lightblue.btn.active {
  background: #3c8dbc linear-gradient(180deg, #4f85a5, #307095) repeat-x !important;
  border-color: #2d698c;
  color: #fff;
}
.btn-default {
  background-color: #f8f9fa;
  border-color: #ddd;
  color: #444;
}

.btn-default:hover, .btn-default:active, .btn-default.hover {
  background-color: #e9ecef;
  color: #2b2b2b;
}


/* Feature 1 */
.feature-1 .wrap-icon {
  margin: 0 auto;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: relative;
  margin-bottom: 30px;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-1 .wrap-icon.icon-1 {
  background: linear-gradient(-45deg, #3b87bd, #2d71a2);
}

.feature-1 .wrap-icon i {
  font-size: 40px;
  line-height: 0;
  color: #fff;
}

.feature-1 h3 {
  font-size: 20px;
}

.feature-1 p {
  color: #b1b1b1;
}

/* Step */
.step {
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 40px;
}

.step .number {
  background: linear-gradient(-45deg, #1391a5, #274685);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: .2rem;
  margin-bottom: 10px;
  display: block;
}

.step p:last-child {
  margin-bottom: 0px;
}

/* Review */
.review h3 {
  font-size: 20px;
}

.review p {
  line-height: 1.8;
  font-style: italic;
  color: #333333;
}

.review .stars span {
  color: #FF8803;
}

.review .stars .muted {
  color: #ccc;
}

.review .review-user img {
  width: 70px;
  margin: 0 auto;
}

/* Testimonial Carousel */
.testimonials-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #2d71a1;
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #2d71a1;
}

/* Pricing */
.pricing {
  padding: 50px;
  background: linear-gradient(-45deg, #1391a5, #274685);
  color: #fff;
  padding-bottom: 12rem !important;
  position: relative;
  border-radius: 4px;
  color: #000000;
  background: #fff;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
}

.pricing h3 {
  color: #2d71a1;
}

.pricing .price-cta {
  text-decoration: none;
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  left: 0;
}

.pricing .price-cta .price {
  display: block;
  margin-bottom: 20px;
  font-size: 2rem;
  font-weight: 300;
}

.pricing .popularity {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .2rem;
  display: block;
  margin-bottom: 20px;
}

.pricing ul {
  margin-bottom: 50px;
}

.pricing ul li {
  margin-bottom: 10px;
}

.pricing .btn-white {
  background: #fff;
  border: 2px solid #f1f1f1;
  border-radius: 4px;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
}

.pricing .btn-white:hover {
  color: #2d71a1;
}

.pricing.popular {
  background: #fff;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
  color: #000000;
  background: linear-gradient(-45deg, #1391a5, #274685);
  color: #fff;
  box-shadow: none;
}

.pricing.popular .popularity {
  color: #b3b3b3;
}

.pricing.popular h3 {
  color: #fff;
  background: none;
}

.pricing.popular .btn-white {
  border: 2px solid #2d71a1;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(to right, #274685 0%, #3db3c5 100%);
  color: #fff;
}

.cta-section h2 {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .cta-section h2 {
    font-size: 2rem;
  }
}

.cta-section .btn {
  background: #000000;
	  color: #fff;
}

.cta-section .btn i {
  margin-right: 5px;
  font-size: 24px;
  line-height: 0;
}

/* Contact Form */
.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.8125rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
}

.form-control-lg {
  height: calc(2.875rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
select {
	cursor:pointer;
	background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 40%, transparent 60%), linear-gradient(to right, #eee, #eee);
	background-position: calc(100% - 16px) calc(1em - 2px), calc(100% - 11px) calc(1em - 2px), 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
}
select:focus, select.active {
	cursor:pointer;
	background:#E9F7F8 ;
	background-image: linear-gradient(45deg, transparent 50%, #2d71a1 50%), linear-gradient(135deg, #2d71a1 40%, transparent 60%), linear-gradient(to right, skyblue, skyblue);
	background-position: calc(100% - 16px) calc(1em - 2px), calc(100% - 11px) calc(1em - 2px), 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
	border:#2d71a1 solid 1px;
}
input.active {
	cursor:pointer;
	background:#E9F7F8 ;
	border:#2d71a1 solid 1px;
}
/*
select.form-control[size], select.form-control[multiple] {
	height: auto;
	background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray);
	background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
	border-color: grey;
	outline: 0;
}
*/
/*
select.form-control-sm[size], select.form-control-sm[multiple] {
	background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray);
	background-position: calc(100% - 15px) 0.5em, calc(100% - 20px) 1em, 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
	border-color: grey;
	outline: 0;
}
*/
textarea.form-control {
  height: auto;
}

.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #2d71a1;
}

.php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .error-message br + br {
  margin-top: 25px;
}

.php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.php-email-form textarea {
  min-height: 160px;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Blog */
.post-entry {
  margin-bottom: 60px;
}

.post-entry .post-text .post-meta {
  text-decoration: none;
  color: #ccc;
  font-size: 13px;
  display: block;
  margin-bottom: 10px;
}

.post-entry .post-text h3 {
  font-size: 20px;
  color: #000000;
}

.post-entry .post-text h3 a {
  text-decoration: none;
  color: #000000;
}

.post-entry .post-text h3 a:hover {
  text-decoration: none;
  color: #2d71a1;
}

.post-entry .post-text .readmore {
  color: #2d71a1;
}

.sidebar-box {
  margin-bottom: 30px;
  padding: 25px;
  font-size: 15px;
  width: 100%;
  float: left;
  background: #fff;
}

.sidebar-box *:last-child {
  margin-bottom: 0;
}

.sidebar-box h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.categories li, .sidelink li {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted gray("300");
  list-style: none;
}

.categories li:last-child, .sidelink li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.categories li a, .sidelink li a {
  text-decoration: none;
  display: block;
}

.categories li a span, .sidelink li a span {
  position: absolute;
  right: 0;
  top: 0;
  color: #ccc;
}

.categories li.active a, .sidelink li.active a {
  text-decoration: none;
  color: #000000;
  font-style: italic;
}

.comment-form-wrap {
  clear: both;
}

.comment-list {
  padding: 0;
  margin: 0;
}

.comment-list .children {
  padding: 50px 0 0 40px;
  margin: 0;
  float: left;
  width: 100%;
}

.comment-list li {
  padding: 0;
  margin: 0 0 30px 0;
  float: left;
  width: 100%;
  clear: both;
  list-style: none;
}

.comment-list li .vcard {
  width: 80px;
  float: left;
}

.comment-list li .vcard img {
  width: 50px;
  border-radius: 50%;
}

.comment-list li .comment-body {
  float: right;
  width: calc(100% - 80px);
}

.comment-list li .comment-body h3 {
  font-size: 20px;
}

.comment-list li .comment-body .meta {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .1em;
  color: #ccc;
}

.comment-list li .comment-body .reply {
  padding: 5px 10px;
  background: #e6e6e6;
  color: #000000;
  text-transform: uppercase;
  font-size: 14px;
}

.comment-list li .comment-body .reply:hover {
  color: #000000;
  background: #e3e3e3;
}

.search-form {
  background: #f7f7f7;
  padding: 10px;
}

.search-form .form-group {
  position: relative;
}

.search-form .form-group input {
  padding-right: 50px;
}

.search-form .icon {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header { height: 80px; transition: all 0.5s; z-index: 997; transition: all 0.5s; }
#header.header-scrolled { background: rgba(39, 70, 133, 0.8); height: 60px; }
#header .logo h1 { font-size: 28px; margin: 0; padding: 4px 0; line-height: 1; font-weight: 500; }
#header .logo h1 a, #header .logo h1 a:hover { color: #fff; text-decoration: none; }
#header .logo img { padding: 0; margin: 0; max-height: 40px; }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
/*  justify-content: space-between;*/
  padding: 10px 0 10px 30px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #fff;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 15px;
  color: #101c36;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #2d71a1;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
	position: fixed;
	overflow: hidden;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: linear-gradient(to right, rgba(39,70,133, 0.5) , rgba(61,179,197,0.5)) ;
	transition: 0.3s;
	z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
	position: absolute;
	top: 15px;
	right: 15px;
}
.navbar-mobile ul {
	display: block;
	position: absolute;
	top: 70px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	padding: 10px 0;
	border-radius: 10px;
	border:#888 solid 1px;
	background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
	overflow-y: auto;
	transition: 0.3s;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #101c36;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #2d71a1;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #2d71a1;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
  background: linear-gradient(to right, rgba(39, 70, 133, 0.8) 0%, rgba(61, 179, 197, 0.8) 100%), url(../img/hero-bg.jpg);
  position: relative;
}

.hero-section .wave {
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  bottom: -150px;
}

@media screen and (max-width: 992px) {
  .hero-section .wave {
    bottom: -150px;
  }
}

.hero-section .wave svg {
  width: 100%;
}

.hero-section, .hero-section > .container > .row {
  height: auto;
  min-height: 500px;
}

@media screen and (max-width:575px) { /* xs */
  .hero-section > .container { padding-top:50px;padding-bottom:50px; }
}
@media screen and (min-width:576px) and (max-width:767px) { /* sm */
  .hero-section > .container { padding-top:75px;padding-bottom:75px; }
}
@media screen and (min-width:768px) and (max-width:991px) { /* md */
  .hero-section > .container { padding-top:100px;padding-bottom:100px; }
}
@media screen and (min-width:992px) and (max-width:1199px) { /* lg */
  .hero-section > .container { padding-top:100px;padding-bottom:100px; }
}
@media screen and (min-width:1200px) and (max-width:1399px) { /* xl */
  .hero-section > .container { padding-top:100px;padding-bottom:200px; }
}
@media screen and (min-width:1400px) { /* xxl */
  .hero-section > .container { padding-top:150px;padding-bottom:200px; }
}

.hero-section.inner-page {
  height: 60vh;
  min-height: 0;
}

.hero-section.inner-page .hero-text {
  transform: translateY(-150px);
  margin-top: -120px;
}

@media screen and (max-width: 992px) {
  .hero-section.inner-page .hero-text {
    margin-top: -80px;
  }
}

.hero-section h1 {
  font-size: 3rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 30px;
  letter-spacing:1px;
}

@media screen and (max-width: 992px) {
  .hero-section h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-top: 40px;
  }
}

.hero-section p { font-size: 18px; color: #fff; letter-spacing:1px; }

.hero-section .phone-3, .hero-section .phone-2, .hero-section .phone-1 {
  overflow: hidden;
  box-shadow: 0 15px 50px 0 rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  width: 250px;
}
.hero-section  .phone-2 {
  margin-top: 100px;
  margin-left: -150px;
}

.hero-section  .phone-3 {
  margin-top: -450px;
  margin-left: 220px;
}

@media (max-width: 991px) {
  .hero-section .phone-3, .hero-section  .phone-2, .hero-section .phone-1 {
    position: relative;
    top: 0;
    transform: scale(0.3);
  }
  .hero-section .phone-3 img, .hero-section  .phone-2 img , .hero-section .phone-1 img {
    width:75% ;
    height: 75%;
    transform: scale(0.3);
  }
}

@media screen and (max-width: 992px) {
  .hero-section  .phone-1 {
    margin-left: -200px;
  }
  .hero-section  .phone-2 {
    position: absolute;
    margin-top: 0px;
    margin-left: 100px;
  }
  .hero-section  .phone-3 {
    position: absolute;
    margin-top: 0px;
    margin-left: 100px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section .phone-3, .hero-section  .phone-2, .hero-section .phone-1 {
  	width:150px !important;
  }
  .hero-section  .phone-1 {
    margin-left: -200px;
  }
  .hero-section  .phone-2 {
    width: 150px;
    position: absolute;
    margin-top: -100px;
    margin-left: 100px;
    border:#f00 solid 2px;
  }
  .hero-section  .phone-3 {
    width: 150px;
    position: absolute;
    margin-top: 0px;
    margin-left: 100px;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
	background: linear-gradient(to right, #274685 0%, #3db3c5 100%);
	color: #fff;
}
.footer p { color:#aaa; }
.footer h3 { font-size: 20px; font-weight:normal; margin-bottom: 20px; color:#fff ;text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
.footer ul li { margin-bottom: 10px; }
.footer a { color: #ccc; }
.footer a:hover	{ color:#fff; }
.footer .copyright { margin-bottom: 0px; }
.footer .copyright, .footer .credits { font-size: 14px; }

.social a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f8f9fa;
  position: relative;
  text-align: center;
  transition: .3s background ease;
  color: #0d1e2d;
  line-height: 0;
}

.social a span {
	display: inline-block;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size:20px;
}

.social a:hover {
	color: #fff;
	background: #2d71a1;
}

.social a i {
  line-height: 0;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-wrap {
	transition: 0.3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
	background: linear-gradient(-45deg, #274685, #3db3c5);
	display:flex ;
	flex-direction:column ;
}
.portfolio .portfolio-wrap.type-1{ background: linear-gradient(-45deg, #274685, #3db3c5) !important; }	/*	報名中	*/
.portfolio .portfolio-wrap.type-2{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	已截止	*/
.portfolio .portfolio-wrap.type-4{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	徵選中	*/
.portfolio .portfolio-wrap.type-8{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	通知中	*/
.portfolio .portfolio-wrap.type-16{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	執行中	*/
.portfolio .portfolio-wrap.type-32{ background: linear-gradient(-45deg, #302601, #967503) !important; }	/*	結案	*/
.portfolio .portfolio-wrap.type-64{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	取消	*/
.portfolio .portfolio-wrap.type-128{ background: linear-gradient(-45deg, #A08205, #F9D648) !important; }/*	請款中	*/

/*	.portfolio .portfolio-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all ease-in-out 0.3s; z-index: 2; opacity: 0; }	*/
.portfolio .portfolio-wrap img { transition: all ease-in-out 0.3s; }
.portfolio .portfolio-wrap .extension {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	text-transform: uppercase;
	text-align:center; 
	font-weight: 700;
	font-family: 'Roboto' ;
	z-index: 1;
	font-size: 15px;
	padding: 3px 0 3px 0;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.portfolio .portfolio-wrap .status {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	text-align:center; 
	font-weight: 300;
	z-index: 1;
	padding: 3px 0 3px 0;
	letter-spacing:2px;
}
.portfolio .portfolio-wrap .portfolio-info {
	opacity: 1 ;
	position: absolute ;
	height:30px; 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	transition: all ease-in-out 0.3s;
	align-items: flex-start;
	padding: 10px;
}
.portfolio .portfolio-wrap .filename {
	position: absolute;
	width:100%;
	text-align:center;
	align-items: flex-end;
	bottom:0;
	padding: 10px;
	word-break:break-all;
	font-size:15px;
	text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.portfolio .portfolio-wrap .filename .statics {	display:flex;flex-direction:row; background: rgba(255,255,255,0.5) ;font-size:13px; }
.portfolio .portfolio-wrap .filename p { line-height:1.2em; }
.portfolio .portfolio-wrap .filename p span { }
.portfolio .portfolio-wrap .filename p span.title { font-size:14px; line-height:1.25em !important; }

.portfolio .portfolio-wrap .portfolio-info h4	{	font-size: 20px; color: #fff; font-weight: 600; }
.portfolio .portfolio-wrap .portfolio-info p	{	color: rgba(255, 255, 255, 0.7); font-size: 14px; text-transform: uppercase; padding: 0; margin: 0; font-style: italic; }
.portfolio .portfolio-wrap .portfolio-links		{	text-align: center; z-index: 4; }
.portfolio .portfolio-wrap .portfolio-links a	{	color: #fff; margin: 0 5px 0 0; font-size: 28px; display: inline-block; transition: 0.3s; }
.portfolio .portfolio-wrap .portfolio-links a:hover {	color: #3498db;	}
.portfolio .portfolio-wrap:hover::before {  opacity: 1;  overflow: hidden;	}
.portfolio .portfolio-wrap:hover img {	transform: scale(1.2);	}
.portfolio .portfolio-wrap:hover .portfolio-info {  opacity: 1;	}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {	padding-top: 40px; }
.portfolio-details .portfolio-details-slider img { width: 100%; }
.portfolio-details .portfolio-details-slider .swiper-pagination {  margin-top: 20px;  position: relative; }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {  width: 12px;  height: 12px;  background-color: #fff;  opacity: 1;  border: 1px solid #3498db; }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {   background-color: #3498db;}
.portfolio-details .portfolio-info {   padding: 30px;  box-shadow: 0px 0 30px rgba(34, 34, 34, 0.08);}
.portfolio-details .portfolio-info h3 {   font-size: 22px;  font-weight: 700;  margin-bottom: 20px;  padding-bottom: 20px;  border-bottom: 1px solid #eee; }
.portfolio-details .portfolio-info ul {   list-style: none;  padding: 0;  font-size: 15px;}
.portfolio-details .portfolio-info ul li + li {  margin-top: 10px;}
.portfolio-details .portfolio-description {  padding-top: 30px;}
.portfolio-details .portfolio-description h2 {  font-size: 26px;  font-weight: 700;  margin-bottom: 20px;}
.portfolio-details .portfolio-description p {  padding: 0; }

/*--------------------------------------------------------------
# Ribbon
--------------------------------------------------------------*/
.ribbon {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	z-index: 1;
	font-size: 13px;
	padding: 5px 0 5px 0;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.ribbon-hero {
	width: 200px;
	position: absolute;
	top: 30px;
	right: -56px;
	transform: rotate(45deg);
	z-index: 1;
	font-size: 15px;
	padding: 5px 0 5px 0;
	text-align:center;
	font-weight:bold;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.ribbon-ll-4 {
	width: 200px;
	position: absolute;
	top: 165px;
	left: -70px;
	transform: rotate(45deg);
	z-index: 1;
	font-size: 13px;
	text-align:center;
	padding: 5px 0 5px 0;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.ribbon-ll-6 {
	width: 200px;
	position: absolute;
	top: 180px;
	left: -70px;
	transform: rotate(45deg);
	z-index: 1;
	font-size: 13px;
	text-align:center;
	padding: 5px 0 5px 0;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.ribbon-primary	{	background:#0b5ed7 !important; color:#fff ; }
.ribbon-warning	{	background:#ffc107 !important; color:#000 ; font-weight:bold; }
.ribbon-success	{	background:#23BC74 !important; color:#000 ; }
.ribbon-danger	{	background:#EC0000 !important; color:#fff ; }
.ribbon-white	{	background:#ffffff !important; color:#000 ; }
@media screen and (max-width:575px) {
  .ribbon { width:150;padding: 2px 0;top:8px;right:-82px; }
}
@media screen and (min-width:576px) and (max-width:767px) {
  .ribbon { width:150;padding: 2px 0;top:8px;right:-82px; }
}
@media screen and (min-width:768px) and (max-width:991px) {
  .ribbon { width:150;padding: 2px 0;top:8px;right:-82px; }
}
@media screen and (min-width:992px) and (max-width:1199px) {
  .ribbon { width:150; }
}
@media screen and (min-width:1200px) and (max-width:1399px) {
  .ribbon { width:150; }
}
@media screen and (min-width:1400px) {
  .ribbon { width:150; }
}

/*--------------------------------------------------------------
# Candidate
--------------------------------------------------------------*/
.candidate .member {
  margin-bottom: 20px;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  width:100% ;
}
.candidate .member .approved {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	z-index: 1;
	font-size: 13px;
	padding: 5px 0 5px 0;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.candidate .member .member-img {
	position: relative;
	overflow: hidden;
	width:100%;
	transition: 0.3s;
}
.candidate .member .member-img:hover img {
	transform: scale(1.2) ;
	transition: all ease-in-out 0.3s;
}

.candidate .member .social			{ position: absolute; left: 0; bottom: 0; right: 0; height: 40px; opacity: 0; transition: ease-in-out 0.3s; background: rgba(255, 255, 255, 0.85); display: inline-flex; justify-content: center; align-items: center;text-align:center; }
.candidate .member .social a		{ transition: color 0.3s; color: #222222; margin: 0px 3px;padding:0; display: inline-flex; justify-content: center; align-items: center;height:38px;width:38px; }
.candidate .member .social a i		{ line-height: 0;}
.candidate .member .social a:hover	{ color:#fff;}
.candidate .member .social i		{ font-size: 15px; margin: 0px;}

.candidate #candidate-container {
	display:flex ;
	text-align: center;
	justify-content: center ;
}
.candidate #candidate-container-v2 {
	display:flex ;
	flex-wrap: wrap;
	text-align: center;
	justify-content: flex-start ;
}

.candidate #candidate-filters,
.candidate #candidate-filters-v2 {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.candidate #candidate-filters li,
.candidate #candidate-filters-v2 li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 15px 10px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #222222;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
}

.candidate #candidate-filters li:hover, .candidate #candidate-filters li.filter-active,
.candidate #candidate-filters-v2 li:hover, .candidate #candidate-filters-v2 li.filter-active {
  color: #fff ;
  background: #3498db;
}
.candidate #candidate-filters li:hover a, .candidate #candidate-filters li.filter-active a,
.candidate #candidate-filters-v2 li:hover a, .candidate #candidate-filters-v2 li.filter-active a {
  color: #fff ;
}

.candidate #candidate-filters li:last-child,
.candidate #candidate-filters-v2 li:last-child {
  margin-right: 0;
}


.candidate .member .member-info {
	padding: 15px;
	line-height:1.25em ;
}

.candidate .member .member-info h4 {
	font-weight: 700;
	margin-bottom: 5px;
	font-size: 18px;
	color: #222222;
}

.candidate .member .member-info span {
	font-size: 13px;
	font-weight: 400;
	color: #777777;
}

.candidate .member .member-info p {
	font-style: italic;
	font-size: 14px;
	line-height: 1.25em ;
	color: #777777;
	margin:0;
}

.candidate .member:hover .social {
	opacity: 1;
}

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.8125rem + 2px);
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}

.text-break-all {word-break:break-all;}

.debug	{	border:#f00 solid 1px !important; }
.clickable	{	cursor:pointer; }
ul.customize{	list-style-type:none; }
ul.customize	li			{	padding-left:0em;clear:both; }
ul.customize span.browse { float:right;font-size:12px; }
ul.customize	li.active	{	color:#f00 ; }
ul.customize	li.active a	{	color:#f00 ; }
ul.customize	li.active::before	{	position:relative; content: "\f231" ; font-family: "bootstrap-icons" ; top:3px; left:-2px;color:#f00; }
ul.customize	li.active:hover::before	{	content: "\f231" ; font-family: "bootstrap-icons" ; }
ul.customize	li:hover	{	color:#2d71a1 ; }
ul.customize	dt			{	line-height:1.5em; padding-left:1em; }
ul.customize	li::before	{	position:relative; content: "\f234" ; font-family: "bootstrap-icons" ; top:3px; left:-2px; }
ul.customize	li:hover::before	{	content: "\f231" ; font-family: "bootstrap-icons" ; }
ul.customize.list-white	li::before	{	color:#fff ; }
.html	{	color:#000; line-height:1.5em; padding:0em !important; border-radius:15px !important; }
.html ol, .html ul	{	margin-left:0.5em; }
.html li { line-height:1.5em;margin-bottom:0.3em;clear:both; }
.html p { line-height:1.5em;margin:0.5em 0;padding:0; }
.html a { color:#2d71a1 ; }
.html table { border:#ccc solid 1px;background:#ccc !important;margin:0; }
.html td { padding: 3px 8px; }
.html img { max-width:100%;width:auto;height:auto;display:block; }

@media screen and (max-width:575px) {
	.flowchart { font-size:11px; }
}
@media screen and (min-width:576px) and (max-width:767px) {
	.flowchart { font-size:13px; }
}
@media screen and (min-width:768px) and (max-width:991px) {
	.flowchart { font-size:14px; }
}
@media screen and (min-width:992px) and (max-width:1199px) {
	.flowchart { font-size:15px; }
}
@media screen and (min-width:1200px) {
	.flowchart { font-size:16px; }
}

.flowchart { transform: rotate(0deg); transform-origin: 50%; }
.flowchart ul { position: relative; padding: 1em 0 0 0; white-space: nowrap; margin: 0 auto; text-align: center; }
.flowchart ul::after { content: ""; display:table; clear:both;padding:0; }
.flowchart li { display: inline-block; vertical-align: top; text-align: center; list-style-type: none; position: relative; padding: 1em 0 0 0;margin:0;width:auto; }
.flowchart li::before,
.flowchart li::after { content: ""; position: absolute; top: 0; right: 50%; border-top: 1px solid #888; width: 53%; height: 1.05em; }
.flowchart li::after { right: auto; left: 50%; border-left: 1px solid #888; }
.flowchart li:only-child::after,
.flowchart li:only-child::before { display: none; }
.flowchart li:only-child { padding-top: 0; }
.flowchart li:first-child::before,
.flowchart li:last-child::after { border: 0 none; }
.flowchart li:last-child::before { border-right: 1px solid #888; border-radius: 0 5px 0 0; }
.flowchart li:first-child::after { border-radius: 5px 0 0 0; }
.flowchart ul ul::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 1px solid #888; width: 0; height: 1.05em; }
.flowchart li a { border: 1px solid #888; padding: 0.25em 0.5em;text-decoration: none; display: inline-block; border-radius: 5px; color: #333; position: relative; top: 1px; transform: rotate(0deg); }
.flowchart li a:hover,
/*.flowchart li a:hover + ul li a { background: #e9453f; color: #fff; border: 1px solid #e9453f; }*/
.flowchart li a:hover { background: #e9453f; color: #fff; border: 1px solid #e9453f; }
.flowchart li a:hover + ul li::after,
.flowchart li a:hover + ul li::before,
.flowchart li a:hover + ul::before,
.flowchart li a:hover + ul ul::before { border-color: #e9453f;border-width:3px; }

/*
.flowchart ul.vertical { position: relative; padding: 1em 0 0 0; white-space: nowrap; margin: 0 auto; width:auto; text-align: center; }
.flowchart ul.vertical::after { content: ""; display:inline-block; clear:both;padding:0; }
.flowchart li.vertical { display:flex;flex-direction:column; vertical-align: top; left:50%; text-align: center; list-style-type: none; position: relative; padding: 0 0 0.25em 1em; }
.flowchart li.vertical::before { content: ""; position: absolute; top: -0.2em; left: 0; width: 1em; height: 1.5em; border-bottom: 1px solid #888;border-left: 1px solid #888;border-right:none;border-top:none; }
.flowchart li.vertical::after { content: "x"; position: absolute; top: 1.3em; left: 0; border-left: 1px solid #888;border-top:0 none;border-bottom:0 none;border-right:0 none; border-radius:0; width: 100%; height: 100%; background: rgba(255,0,0,0.5); }
.flowchart li.vertical:only-child::after,
.flowchart li.vertical:only-child::before { display: none; }
.flowchart li.vertical:only-child { padding-top: 0; }
.flowchart li.vertical:last-child::before { content: ""; position: absolute; top: -0.2em; left: 0; width: 1em; height: 50%; border-bottom: 1px solid #888;border-left: 1px solid #888; border-radius: 0 0 0 5px;border-top:0 none;border-right:0 none; }
.flowchart li.vertical:last-child::after { border: 0 none;padding:0 0 0 1em; }
.flowchart ul.vertical ul.vertical::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 1px solid #888; border-bottom:0 none; width: 0; height: 1.05em; }
.flowchart li.vertical a { border: 1px solid #888; padding: 0.5em 0.75em; text-decoration: none; display: inline-block; border-radius: 5px; color: #333; position: relative; top: 1px; transform: rotate(0deg); }
.flowchart li.vertical a:hover,
.flowchart li.vertical a:hover + ul li a { background: #e9453f; color: #fff; border: 1px solid #e9453f; }
.flowchart li.vertical a:hover + ul li::after,
.flowchart li.vertical a:hover + ul li::before,
.flowchart li.vertical a:hover + ul::before,
.flowchart li.vertical a:hover + ul ul::before { border-color: #e9453f; }
*/

.w-25 { width: 25% !important;}
.w-50 { width: 50% !important;}
.w-75 { width: 75% !important;}
.w-100 { width: 100% !important;}
.w-auto { width: auto !important;}
.h-25 { height: 25% !important;}
.h-50 { height: 50% !important;}
.h-75 { height: 75% !important;}
.h-100 { height: 100% !important;}
.h-auto { height: auto !important;}
.mw-100 { max-width: 100% !important;}
.mh-100 { max-height: 100% !important;}
.min-vw-100 { min-width: 100vw !important;}
.min-vh-100 { min-height: 100vh !important;}
.vw-100 { width: 100vw !important;}
.vh-100 { height: 100vh !important;}
.m-0 { margin: 0 !important;}
.mt-0,.my-0 { margin-top: 0 !important;}
.mr-0,.mx-0 { margin-right: 0 !important;}
.mb-0,.my-0 { margin-bottom: 0 !important;}
.ml-0,.mx-0 { margin-left: 0 !important;}
.m-1 { margin: 0.25rem !important;}
.mt-1,.my-1 { margin-top: 0.25rem !important;}
.mr-1,.mx-1 { margin-right: 0.25rem !important;}
.mb-1,.my-1 { margin-bottom: 0.25rem !important;}
.ml-1,.mx-1 { margin-left: 0.25rem !important;}
.m-2 { margin: 0.5rem !important;}
.mt-2,.my-2 { margin-top: 0.5rem !important;}
.mr-2,.mx-2 { margin-right: 0.5rem !important;}
.mb-2,.my-2 { margin-bottom: 0.5rem !important;}
.ml-2,.mx-2 { margin-left: 0.5rem !important;}
.m-3 { margin: 1rem !important;}
.mt-3,.my-3 { margin-top: 1rem !important;}
.mr-3,.mx-3 { margin-right: 1rem !important;}
.mb-3,.my-3 { margin-bottom: 1rem !important;}
.ml-3,.mx-3 { margin-left: 1rem !important;}
.m-4 { margin: 1.5rem !important;}
.mt-4,.my-4 { margin-top: 1.5rem !important;}
.mr-4,.mx-4 { margin-right: 1.5rem !important;}
.mb-4,.my-4 { margin-bottom: 1.5rem !important;}
.ml-4,.mx-4 { margin-left: 1.5rem !important;}
.m-5 { margin: 3rem !important;}
.mt-5,.my-5 { margin-top: 3rem !important;}
.mr-5,.mx-5 { margin-right: 3rem !important;}
.mb-5,.my-5 { margin-bottom: 3rem !important;}
.ml-5,.mx-5 { margin-left: 3rem !important;}
.p-0 { padding: 0 !important;}
.pt-0,.py-0 { padding-top: 0 !important;}
.pr-0,.px-0 { padding-right: 0 !important;}
.pb-0,.py-0 { padding-bottom: 0 !important;}
.pl-0,.px-0 { padding-left: 0 !important;}
.p-1 { padding: 0.25rem !important;}
.pt-1,.py-1 { padding-top: 0.25rem !important;}
.pr-1,.px-1 { padding-right: 0.25rem !important;}
.pb-1,.py-1 { padding-bottom: 0.25rem !important;}
.pl-1,.px-1 { padding-left: 0.25rem !important;}
.p-2 { padding: 0.5rem !important;}
.pt-2,.py-2 { padding-top: 0.5rem !important;}
.pr-2,.px-2 { padding-right: 0.5rem !important;}
.pb-2,.py-2 { padding-bottom: 0.5rem !important;}
.pl-2,.px-2 { padding-left: 0.5rem !important;}
.p-3 { padding: 1rem !important;}
.pt-3,.py-3 { padding-top: 1rem !important;}
.pr-3,.px-3 { padding-right: 1rem !important;}
.pb-3,.py-3 { padding-bottom: 1rem !important;}
.pl-3,.px-3 { padding-left: 1rem !important;}
.p-4 { padding: 1.5rem !important;}
.pt-4,.py-4 { padding-top: 1.5rem !important;}
.pr-4,.px-4 { padding-right: 1.5rem !important;}
.pb-4,.py-4 { padding-bottom: 1.5rem !important;}
.pl-4,.px-4 { padding-left: 1.5rem !important;}
.p-5 { padding: 3rem !important;}
.pt-5,.py-5 { padding-top: 3rem !important;}
.pr-5,.px-5 { padding-right: 3rem !important;}
.pb-5,.py-5 { padding-bottom: 3rem !important;}
.pl-5,.px-5 { padding-left: 3rem !important;}
.m-n1 { margin: -0.25rem !important;}
.mt-n1,.my-n1 { margin-top: -0.25rem !important;}
.mr-n1,.mx-n1 { margin-right: -0.25rem !important;}
.mb-n1,.my-n1 { margin-bottom: -0.25rem !important;}
.ml-n1,.mx-n1 { margin-left: -0.25rem !important;}
.m-n2 { margin: -0.5rem !important;}
.mt-n2,.my-n2 { margin-top: -0.5rem !important;}
.mr-n2,.mx-n2 { margin-right: -0.5rem !important;}
.mb-n2,.my-n2 { margin-bottom: -0.5rem !important;}
.ml-n2,.mx-n2 { margin-left: -0.5rem !important;}
.m-n3 { margin: -1rem !important;}
.mt-n3,.my-n3 {  margin-top: -1rem !important;}
.mr-n3,.mx-n3 {  margin-right: -1rem !important;}
.mb-n3,.my-n3 {  margin-bottom: -1rem !important;}
.ml-n3,.mx-n3 {  margin-left: -1rem !important;}
.m-n4 {  margin: -1.5rem !important;}
.mt-n4,.my-n4 {  margin-top: -1.5rem !important;}
.mr-n4,.mx-n4 {  margin-right: -1.5rem !important;}
.mb-n4,.my-n4 {  margin-bottom: -1.5rem !important;}
.ml-n4,.mx-n4 { margin-left: -1.5rem !important;}
.m-n5 {  margin: -3rem !important;}
.mt-n5,.my-n5 {  margin-top: -3rem !important;}
.mr-n5,.mx-n5 {  margin-right: -3rem !important;}
.mb-n5,.my-n5 {  margin-bottom: -3rem !important;}
.ml-n5,.mx-n5 {  margin-left: -3rem !important;}
.m-auto {  margin: auto !important;}
.mt-auto,.my-auto {  margin-top: auto !important;}
.mr-auto,.mx-auto {  margin-right: auto !important;}
.mb-auto,.my-auto {  margin-bottom: auto !important;}
.ml-auto,.mx-auto {  margin-left: auto !important;}

.table-rounded {
}
.table-rounded	td {
	border:none;
}
.table-rounded	td:not(:first-child) { border-left: 1px solid #ccc !important; }
.table-rounded	tr:not(:last-child) td { border-bottom: 1px solid #ccc !important; }
.table-rounded	tr td:not(:first-child) { border-left: 1px solid #ccc !important; }

.pill-fix	{	vertical-align:middle !important;transform:translateY(-2px) !important;	}
.table-hover	tr:hover > td:first-child	{	font-weight:700 ; }
.input-group.input-auto {	width:auto !important; display:inline-flex; }
.input-group.input-auto .form-control {	flex: 0 0 auto !important; width: auto !important; }
.input-group.input-compact > .form-control {
	height: 18px;
	padding: -2px 6px;
	font-size: 12px;
	line-height: 13px;
}
.input-group.input-compact > .input-group-prepend > .input-group-text,
.input-group.input-compact > .input-group-append > .input-group-text {
    height: 28px;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 20px;
}

.input-group.input-compact > .form-control {
    border-radius: 0;
}
.quote-box {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
}
/* 左側垂直標籤 */
.quote-label {
	background: #007bff; /* bootstrap primary */
	color: #fff;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 讓文字變垂直 */
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size:15px;
	letter-spacing: 3px;
	min-width: 36px;
}

/* blockquote 微調 */
.blockquote {
	font-size:13px;
	background: #fff ;
	flex: 1;
}

button.notice_flow	{ border-radius:15px;border:none;font-size:14px; }

/* 共用外框 */
p.notice_member, p.notice_admin, p.notice_vendor	{ font-weight:normal !important; display:inline-block; position:relative; background:#fff; color:#000; border-radius:4px; font-size:13px; line-height:17px; }
/* notice_member：左標籤 */
p.notice_member				{ padding:2px 5px 2px 40px; }
p.notice_member::before		{ position:absolute; left:0; top:0; bottom:0; width:35px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; border-radius:1px 0 0 1px;
	text-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.5),
			 1px 0px 0.5px rgba(0, 0, 0, 0.5),
			 1px -1px 0.5px rgba(0, 0, 0, 0.5),
			 0px 1px 0.5px rgba(0, 0, 0, 0.5),
			 0px -1px 0.5px rgba(0, 0, 0, 0.5),
			-1px 1px 0.5px rgba(0, 0, 0, 0.5),
			-1px 0px 0.5px rgba(0, 0, 0, 0.5),
			-1px -1px 0.5px rgba(0, 0, 0, 0.5),
			-2px 0px 2.5px rgba(0,0,0,.25),
			 2px 0px 2.5px rgba(0,0,0,.25),
			 0px 2px 2.5px rgba(0,0,0,.25),
			 0px -2px 2.5px rgba(0,0,0,.25) ;
}
/* notice_admin, notice_vendor：右標籤 */
p.notice_admin, p.notice_vendor					{ padding:2px 40px 2px 5px; }
p.notice_admin::after, p.notice_admin::after	{ position:absolute; right:0; top:0; bottom:0; width:35px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; border-radius:0 1px 1px 0;
	text-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.5),
				 1px 0px 0.5px rgba(0, 0, 0, 0.5),
				 1px -1px 0.5px rgba(0, 0, 0, 0.5),
				 0px 1px 0.5px rgba(0, 0, 0, 0.5),
				 0px -1px 0.5px rgba(0, 0, 0, 0.5),
				-1px 1px 0.5px rgba(0, 0, 0, 0.5),
				-1px 0px 0.5px rgba(0, 0, 0, 0.5),
				-1px -1px 0.5px rgba(0, 0, 0, 0.5),
				-2px 0px 2.5px rgba(0,0,0,.25),
				 2px 0px 2.5px rgba(0,0,0,.25),
				 0px 2px 2.5px rgba(0,0,0,.25),
				 0px -2px 2.5px rgba(0,0,0,.25) ;
}
/* notice_member TO_STATE */
p.APPLIED					{ border:1px solid #007bff; }
p.APPLIED::before			{ content:"報名"; background:#007bff; }
p.ON_LIST					{ border:1px solid #007bff; }
p.ON_LIST::before			{ content:"提交"; background:#007bff; }
p.OUT_OF_LIST				{ border:1px solid #880000; }
p.OUT_OF_LIST::before		{ content:"退出"; background:#880000; }
p.upload				{ border:1px solid #ff7b00; }
p.upload::before		{ content:"上傳"; background:#ff7b00; }
p.confirm				{ border:1px solid #006f3b; }
p.confirm::before		{ content:"確認"; background:#006f3b; }
p.quit					{ border:1px solid #880000; }
p.quit::before			{ content:"婉拒"; background:#880000; }
/* notice_admin TO_STATE */
p.hold					{ border:1px solid #ff9999; }
p.hold::after			{ content:"保留"; background:#ff9999; }
p.approval				{ border:1px solid #00aa7b; }
p.approval::after		{ content:"錄取"; background:#00aa7b; }
p.cancel				{ border:1px solid #aa3333; }
p.cancel::after			{ content:"取消"; background:#aa3333; }
p.charge				{ border:1px solid #eec240; }
p.charge::after			{ content:"請款"; background:#eec240; }
p.paid					{ border:1px solid #aa7700; }
p.paid::after			{ content:"匯款"; background:#aa7700; }

/* notice_admin TO_STATE */
p.RECOMMENDED			{ border:1px solid #ff9999; }
p.RECOMMENDED::after	{ content:"推薦"; background:#ff9999; }
p.INVITED				{ border:1px solid #00aa7b; }
p.INVITED::after		{ content:"邀請"; background:#00aa7b; }
p.cancel				{ border:1px solid #aa3333; }
p.cancel::after			{ content:"取消"; background:#aa3333; }
p.charge				{ border:1px solid #eec240; }
p.charge::after			{ content:"請款"; background:#eec240; }
p.paid					{ border:1px solid #aa7700; }
p.paid::after			{ content:"匯款"; background:#aa7700; }

/* 檔案總管容器 */
ul#file_list	{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, 120px); gap:0.4em; clear:both; }
ul#file_list li	{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; width:120px; height:160px; margin:0; padding:0; background:#eee; border:#bbb solid 2px; border-radius:10px; overflow:hidden; }
ul#file_list li:hover	{ border:#1D7AAD solid 2px; }
ul#file_list li div		{ display:flex; height:100px; width:100%; align-items:center; justify-content:center; padding:0.3em; }
ul#file_list li div img	{ border-radius:5px; }
ul#file_list li p.filename, ul#file_list li p.size{ width:100px; margin:0.25em 0; text-align:center; font-size:11px; color:#444;
	text-shadow: 1px 1px 0.5px rgba(255, 255, 255, 0.5),
			 1px 0px 0.5px rgba(255, 255, 255, 0.5),
			 1px -1px 0.5px rgba(255, 255, 255, 0.5),
			 0px 1px 0.5px rgba(255, 255, 255, 0.5),
			 0px -1px 0.5px rgba(255, 255, 255, 0.5),
			-1px 1px 0.5px rgba(255, 255, 255, 0.5),
			-1px 0px 0.5px rgba(255, 255, 255, 0.5),
			-1px -1px 0.5px rgba(255, 255, 255, 0.5),
			-2px 0px 1.5px rgba(255,255,255,.25),
			 2px 0px 1.5px rgba(255,255,255,.25),
			 0px 2px 1.5px rgba(255,255,255,.25),
			 0px -2px 1.5px rgba(255,255,255,.25) ;
}
ul#file_list li div.gears		{ padding:0.5em; border-top:#bbb solid 1px; position:absolute; left:0; right:0; bottom:0; background:#fff; text-align:center; font-size:13px; opacity:0; transform:translateY(100%); transition:all 0.2s ease 0.1s; pointer-events:none; }
ul#file_list li:hover div.gears	{ opacity:1; transform:translateY(0); pointer-events:auto; }
ul#file_list li div.gears img	{ margin:0.1em; cursor:pointer; }

tr.ticket > td > :not(input) + :not(input) {
    margin-top : 8px ;
}
/* td 內的內容區塊固定白底，不繼承 hover 變色 */
tr.ticket > td .quote-box,
tr.ticket > td .blockquote,
tr.ticket > td #notice-chatroom,
tr.ticket > td #notice-msg-list,
tr.ticket > td .input-group {
    background-color: #fff ;
    font-weight: normal ;
}
/* action bar 容器透明，讓 td hover 底色穿透 */
tr.ticket > td .notice-fsm-action-bar {
    background-color: #f00 !important ;
}

/* td 間距改 p-3 */
tr.ticket > td {
    padding : 1rem !important ;
}

/* chatroom 明顯圓角，白底，clip 子元素不超出圓角 */
#notice-chatroom {
    background-color : #fff ;
    border-radius    : 5px ;
    overflow         : hidden ;     /* 解決 hover 時四個角落白點問題 */
    border           : 1px solid rgba(0,0,0,.2) ;
}

/* msg-list 不需要自己的 border，由 chatroom 統一處理 */
#notice-msg-list {
    border           : none !important ;
    border-radius    : 0 !important ;
}
/* pending bar 整體 */
.notice_pending_bar {
    border-top: 1px dashed #ced4da;
}

/* disabled 按鈕取消瀏覽器預設的半透明，讓配色完整顯示 */
.notice_pending_btn {
    opacity: 0.82;
    cursor: default;
    pointer-events: none;
}

/* 角色前綴（廠商 / 經紀公司 / 模特兒）加底線區隔動作名稱 */
.notice_pending_prefix {
    font-weight: 600;
    padding-right: 0.35em;
    margin-right: 0.35em;
    border-right: 1px solid rgba(255,255,255,0.45);
}

/* dark 底色（bg-warning）的分隔線改深色 */
.bg-warning .notice_pending_prefix {
    border-right-color: rgba(0,0,0,0.2);
}
.notice-active-row td {
    background-color: var(--bs-table-hover-bg) !important;
}
.candidate-member.invisible {
    display: none !important ;
}

.app	{
    display: grid;
    grid-template-rows: 3fr 2fr;   /* 上半給 icon，下半給文字 */
    align-items: center;            /* 垂直：各自在自己格子裡置中 */
    justify-items: center;          /* 水平：全部置中 */

    aspect-ratio: 1 / 1;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    background-color: #fff;
    font-size: 1.25em;
    font-weight: bold;
    letter-spacing: -0.75px;
    text-shadow: 1px 1px 1px rgba(255,255,255,1),
                 1px 0px 1px rgba(255,255,255,1),
                 1px -1px 1px rgba(255,255,255,1),
                 0px 1px 1px rgba(255,255,255,1),
                 0px -1px 1px rgba(255,255,255,1),
                -1px 1px 1px rgba(255,255,255,1),
                -1px 0px 1px rgba(255,255,255,1),
                -1px -1px 1px rgba(255,255,255,1),
                 2px 0px 2px rgba(255,255,255,.9),
                -2px 0px 2px rgba(255,255,255,.9),
                 0px 2px 2px rgba(255,255,255,.9),
                 0px -2px 2px rgba(255,255,255,.9),
                 0px 3px 4px rgba(0,0,0,.18);
    padding: 0.5em;
    height: 100%;
}
.app:hover		{	border-color:#ccc; background-color:#ccc; color:#444; }
.app		i	{	color: #666;font-size: 3em;align-self: center;justify-self: center;padding-bottom: 0em;display: block;margin-bottom:0em ; }
.app		span{	align-self: center;justify-self: center;text-align: center;line-height: 1.2;display: block; }
.app:hover	i	{	color:#444; }
/*
.touch			{	border-color:#aea ; background-color:#efe; color:#494; }
.touch:hover	{	border-color:#aea ; background-color:#aea; color:#252; }
.touch		i	{	color:#494; }
.touch:hover i	{	color:#252; }
*/
.touch			{	border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; }
.touch:hover	{	border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; }
.touch		i	{	color:#5499c9; }
.touch:hover i	{	color:#2d71a1; }
.logout			{	border-color:#fcc ; background-color:#ffc0c0; color:#f00; }
.logout:hover	{	border-color:#fcc ; background-color:#ff9090; color:#a00; }
.logout		i	{	color:#f00; }
.logout:hover i	{	color:#a00 !important; }
.modelcard		{	border-color:#aea ; background-color:#efe; color:#494; }
.modelcard:hover{	border-color:#aea ; background-color:#aea; color:#252; }
.modelcard	i	{	color:#494; }
.modelcard:hover	i	{	color:#252; }
.modelface		{	border-color:#EEAD15 ; background-color:#F7D993; color:#89630A; }
.modelface:hover{	border-color:#EEAD15 ; background-color:#EEAD15; color:#553E06; }
.modelface	i	{	color:#89630A; }
.modelface:hover	i	{	color:#553E06; }
.app:hover		i	{ -webkit-animation: ics-beat 1s infinite linear; animation: ics-beat 1s infinite linear; }
.app.disable	{
	border:#ccc dashed 1px ;
	background:#eee ;
	border-radius:10px;
	color:#aaa ;
	cursor: not-allowed !important ;
}
.app.disable:hover	{	color:#666 ;	}
.app.disable	i	{	color:#fff;background-color: #eee ;font-size:3em; }
.app.disable:hover	i	{	text-shadow:#999 0px 0px 1px;	}

.applink:visited	.app		{	border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; }
.applink:visited	.app:hover	{	border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; }
.applink:visited	.app	i	{	color:#5499c9; }
.applink:visited	.app:hover i	{	color:#2d71a1; }

.notice_open			{	position:relative; border-color:#96c7ea ; background-color:#bfdff6; color:#5499c9; font-size:1.25em; padding:1.25em; overflow-wrap: break-word; word-break: break-word; white-space:normal; overflow:hidden; }
.notice_open:hover		{	border-color:#96c7ea ; background-color:#96c7ea; color:#2d71a1; font-size:1.25em; }
.notice_open		i	{	color:#5499c9; }
.notice_open:hover	i	{	color:#2d71a1; }

.notice_open	span.people{
	position:absolute;
	bottom:-20px;
	right:10px;
	font-size:3.5em;
	font-family:arial ;
	color:#d5eaf9 ;
	letter-spacing:-5px; 
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.02),
				-1px 1px 2px rgba(0, 0, 0, 0.02),
				 1px -1px 2px rgba(0, 0, 0, 0.02),
				-1px -1px 2px rgba(0, 0, 0, 0.02);
}
.notice_open	span.applied {
	position: absolute;
	width: 200px;
	top: 13px;
	right: -77px;
	transform: rotate(45deg);
	text-align:center; 
	font-weight: 300;
	font-size:13px;
	z-index: 1;
	padding: 3px 0 3px 0;
	letter-spacing:2px;
}

/* ============================================================
   行情頁 #cms 覆蓋區塊  v2
   貼在 style_notice.css 最尾端
   ============================================================ */

#cms	{
	border-radius:15px; 
	border:#eee solid 3px;
}
#cms	>	*	{
	color:#000;
	text-shadow:none;
}
/* ── 表格本體：還原 collapse、清除灰底 ── */
#cms table.price-table {
  background: #fff !important;
  border-radius: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  table-layout: fixed !important;   /* 與 tinymce-content.css 一致，欄寬由 th 控制 */
  font-size: 13px !important;       /* 與 tinymce-content.css 一致 */
}

/* ── 欄寬：與 tinymce-content.css 的 th width 一致 ── */
#cms table.price-table thead th:first-child { width: 36% !important; }
#cms table.price-table thead th:not(:first-child) { width: 16% !important; }

/* ── thead ── */
#cms table.price-table thead tr {
  background: #f4f8fb !important;
}
#cms table.price-table thead th {
  background: transparent !important;
  padding: 10px 13px !important;    /* 覆蓋 #cms td { padding: 3px 6px } */
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #666 !important;
  border: none !important;
  border-bottom: 1px solid #dde4ea !important;
  text-align: right !important;
  overflow-wrap: normal !important;
}
#cms table.price-table thead th:first-child {
  text-align: left !important;
}

/* ── tbody ── */
#cms table.price-table tbody tr {
  background: #fff !important;
  border-bottom: 1px solid #f0f2f4 !important;
}
#cms table.price-table tbody tr:last-child {
  border-bottom: none !important;
}
#cms table.price-table tbody tr:hover {
  background: #c7dbff !important;
}
#cms table.price-table tbody td {
  background: transparent !important;
  padding: 10px 13px !important;    /* 覆蓋 #cms td { padding: 3px 6px } */
  font-size: 13px !important;
  color: #444 !important;
  border: none !important;
  border-bottom: 1px solid #f0f2f4 !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
  overflow-wrap: break-word !important;
}
#cms table.price-table tbody td:not(:first-child) {
  text-align: right !important;
  color: #666 !important;
}
#cms table.price-table tbody td strong {
  color: #111 !important;
  font-weight: 700 !important;
}
#cms table.price-table tbody td.text-nowrap {
  white-space: nowrap;
}
#cms table.price-table td.col-center {
  text-align: center !important;
  color: #aaa !important;
  font-style: italic !important;
}

/* ── 連結：覆蓋 #cms a { color:#996600 } ── */
#cms .price-table a,
#cms .price-hero-cta,
#cms .price-notes a,
#cms .price-contact a {
  color: #2d71a1 !important;
}
#cms .price-table a:hover,
#cms .price-hero-cta:hover,
#cms .price-notes a:hover,
#cms .price-contact a:hover {
  color: #1a5f8a !important;
  text-decoration: underline !important;
}

/* ── Hero CTA 按鈕 ── */
#cms .price-hero {
  text-align: center !important;
  margin-bottom: 28px !important;
}
#cms .price-hero-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin: 0 0 8px !important;
}
#cms .price-hero-sub {
  font-size: 13px !important;
  color: #e74c3c !important;
  font-weight: 600 !important;
  margin: 0 0 14px !important;
  line-height: 1.5 !important;
}
#cms .price-hero-cta {
  display: inline-block !important;
  font-size: 13px !important;
  border: 1px solid #2d71a1 !important;
  border-radius: 4px !important;
  padding: 6px 18px !important;
  text-decoration: none !important;
}
#cms .price-hero-cta:hover {
  background: #2d71a1 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── 說明區塊 ── */
#cms .price-notes {
  background: #efeffa !important;
  border-left: 5px solid #3d81b1 !important;
  border-radius: 0 0.5em 0.5em 0 !important;
  padding: 14px 20px !important;
  margin-bottom: 22px !important;
}
#cms .price-notes ol {
  margin-left: 0 !important;
  margin:0;
  padding-left: 18px !important;
}
#cms .price-notes li {
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.75 !important;
  margin-bottom: 6px !important;
  clear: none !important;           /* 覆蓋 #cms li { clear:both } */
}
#cms .price-notes li strong { color: #333 !important; }

/* ── 提醒文字 ── */
#cms .price-tip {
  text-align: center !important;
  margin: 20px 0 24px !important;
}
#cms p.price-tip-main {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2d71a1 !important;
  margin: 0 0 5px !important;
  line-height: 1.5 !important;
}
#cms p.price-tip-sub {
  font-size: 12px !important;
  color: #999 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── 區塊小標題 ── */
#cms .price-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #aaa !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #eee !important;
  padding-bottom: 7px !important;
  margin: 26px 0 12px !important;
  background: transparent !important;
  line-height: 1.5 !important;
}

/* ── 表格卡片 ── */
#cms .price-card {
  border: 1px solid #dde4ea !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 22px !important;
  background: transparent !important;
  padding:0;
}
#cms .price-card-header {
  background: #e8f2fa !important;
  border-bottom: 1px solid #ccdded !important;
  border-radius: 0 !important;
  padding: 9px 16px !important;
  color: #1a5f8a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

/* ── 聯絡列 ── */
#cms .price-contact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 20px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #eef5fb !important;
  border: 1px solid #ccdded !important;
  border-radius: 8px !important;
  padding: 13px 18px !important;
  margin-top: 22px !important;
  font-size: 13px !important;
  color: #666 !important;
}
#cms .price-contact strong { color: #333 !important; }

/* ── KOL badge ── */
#cms .kol-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
  background: #fde8e8 !important;
  color: #c0392b !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
}