/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html {
  overflow-x: hidden;
}

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

img { image-rendering: crisp-edges; }
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;
  max-width:95vw !important ;
}

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

.text-primary {
  color: #339999 !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, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 30px;
	bottom: 30px;
	z-index: 996;
	background: rgba(51,153,153,0.5) ;
	width: 60px;
	height: 60px;
	border-radius: 50px;
	transition: all 0.4s;
}

.back-to-top i {
	font-size: 36px;
	color: #fff;
	line-height: 0;
}
.back-to-top i:hover {
	color: #000;
}
.back-to-top:hover {
	background: rgba(102,204,204,1) ;
}
.back-to-top.active {
	visibility: visible; opacity: 1;
}

.next-candidate { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 70px; z-index: 996; background: #339999; width: 40px; height: 40px; border-radius: 50px; transition: all 0.4s; }
.next-candidate i { font-size: 28px; color: #fff; line-height: 0; }
.next-candidate:hover { background: #3687c1; color: #fff; }
.next-candidate.active { visibility: visible; opacity: 1; }

.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: #339999;
}

.btn.btn-primary {
	background: #339999;
	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: linear-gradient(180deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	border-color: rgba(51,102,102,0.5);
	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: linear-gradient(180deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	border-color: rgba(51,102,102,0.5);
	color: #fff;
}

.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: linear-gradient(180deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	border-color: rgba(51,102,102,1);
	color: #fff;
}
.btn-default {
	background-color: #f8f9fa;
	border-color: #ddd;
	color: #444;
}

.btn-default:hover, .btn-default:active, .btn-default.hover {
	background: linear-gradient(180deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	border-color: rgba(51,102,102,0.5);
	color: #fff;
}

.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%;
  image-rendering: crisp-edges;
}

.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; width:100vw; transition: all 0.5s; color:#fff; }
#header.header-scrolled { background: rgba(51, 153, 153, 0.9); 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;image-rendering: crisp-edges; }

/*--------------------------------------------------------------
# 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;
  color:#fff;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 10px 10px 10px 20px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  transition: 0.3s all;
}

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

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

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: -50%;
  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;
  column-gap:0px;
/*  column-rule:#eee dashed 1px;*/
}

.navbar .dropdown ul li {
  min-width: 225px;
}
.navbar .dropdown ul li:hover {
	background: linear-gradient(to right, rgba(39, 70, 133, 0.8) 0%, rgba(61, 179, 197, 0.8) 100%) ;
}

.navbar .dropdown ul li:hover i {
	-webkit-animation: ics-beat 1s infinite linear; animation: ics-beat 1s infinite linear;
}

.navbar .dropdown ul a {
  font-size: 15px;
  font-weight:500;
  color: #101c36;
}

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

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

.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: #339999;
}

.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: #339999;
}

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
	background: linear-gradient(to right, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%), url(../img/hero-bg.jpg);
	position: relative;
	padding-top:80px;
}
#hero_stage { margin-top:150px; }

.watermark			{	position:relative; }
.watermark:after	{	display: block; width: 100%; height: auto; padding:10px; text-align:center; letter-spacing:1px; color:rgba(255,255,255,0.6) ; background: rgba(0,0,0,0.3) ; position: absolute; bottom: 0px; left: 0px; }
@media screen and (max-width:575px) {
	.watermark:after{	content:"MODEL FACE 模特兒經紀公司"; }
}
@media screen and (min-width:576px) {
	.watermark:after{	content:"MODEL FACE 模特兒經紀公司 \00a9 All rights reserved"; }
}

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

@media screen and (max-width:575px) {
  .hero-section .wave { bottom: -180px; }
}
@media screen and (min-width:576px) and (max-width:767px) {
  .hero-section .wave { bottom: -200px; }
}
@media screen and (min-width:768px) and (max-width:991px) {
  .hero-section .wave { bottom: -200px; }
}
@media screen and (min-width:992px) and (max-width:1199px) {
  .hero-section .wave { bottom: -200px; }
}
@media screen and (min-width:1200px) and (max-width:1399px) {
  .hero-section .wave { bottom: -200px; }
}
@media screen and (min-width:1400px) {
  .hero-section .wave { bottom: -150px; }
}

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

.hero-section, .hero-section > .container > .row {
  /*height: 100vh;*/
  min-height: 400px;
}

.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 a {}
.hero-section a:hover  { z-index:3; }
.hero-section .iphone  { display:grid;position:relative;overflow:hidden; border-radius: 45px;-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35));filter: drop-shadow(12px 12px 12px rgba(0, 0, 0, 0.35)); }
.hero-section .iphone:hover  { z-index:3; }
.hero-section .iphone .overlap { grid-row:1;grid-column:1;z-index:2; }
.hero-section .iphone img { grid-row:1;grid-column:1;width:250px;height:505px;overflow:hidden;border-radius: 46px; }

@media screen and (max-width: 992px) {
  .dock-3, .dock-2, .dock-1 { position: relative; top:0; max-width: 100%; }
}

.dock-3, .dock-2, .dock-1 { width: 250px; }

@media screen and (max-width: 992px) {
  .dock-1 { margin-left:-200px; }
}
.dock-1 { margin-top: 50px; margin-left: 0px; width: 250px; }
.dock-2 { margin-top: -455px; margin-left: 90px; width: 250px; }
.dock-3 { margin-top: -455px; margin-left: 180px; width: 250px; }

@media screen and (max-width: 992px) {
  .dock-2 {
    width: 250px;
    position: absolute;
    margin-top: 0px;
    margin-left: 100px;
  }
}

/*--------------------------------------------------------------
# Ribbon
--------------------------------------------------------------*/
.ribbon {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	z-index: 999;
	font-size: 13px;
	padding: 3px 0 3px 0;
	background: #EC0000;
	letter-spacing:2px;
	text-align:center;
	color: #fff;
}
.ribbon-primary	{	background:#0b5ed7 !important; color:#fff ; }
.ribbon-warning	{	background:#ffc107 !important; color:#000 ; }
.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; }
}

/*-
#
----*/
#showgirl_photo-filters { padding: 0; margin: 0 auto 20px auto; list-style: none; text-align: center; }
#showgirl_photo-filters 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; }
#showgirl_photo-filters li:hover,
#showgirl_photo-filters li.filter-active { color: #fff ; background: #3498db; }
#showgirl_photo-filters li:hover a, 
#showgirl_photo-filters li.filter-active a { color: #fff ; }
#showgirl_photo-filters li:last-child { margin-right: 0; }

/*--------------------------------------------------------------
# Photo
--------------------------------------------------------------*/
.photo .photo-wrap {
	transition: 0.3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
	background: linear-gradient(-45deg, #274685, #3db3c5);
	display:flex ;
	flex-direction:column ;
}
.photo .photo-wrap.type-1{ background: linear-gradient(-45deg, #274685, #3db3c5) !important; }	/*	報名中	*/
.photo .photo-wrap.type-2{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	已截止	*/
.photo .photo-wrap.type-4{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	徵選中	*/
.photo .photo-wrap.type-8{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	通知中	*/
.photo .photo-wrap.type-16{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	執行中	*/
.photo .photo-wrap.type-32{ background: linear-gradient(-45deg, #302601, #967503) !important; }	/*	結案	*/
.photo .photo-wrap.type-64{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	取消	*/
.photo .photo-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; }	*/
.photo .photo-wrap img { transition: all ease-in-out 0.3s; image-rendering: crisp-edges; }
.photo .photo-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;
}
.photo .photo-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;
}
.photo .photo-wrap .photo-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;
}
.photo .photo-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;
}
.photo .photo-wrap .filename .statics {	display:flex;flex-direction:row; background: rgba(255,255,255,0.5) ;font-size:13px; }
.photo .photo-wrap .filename p { line-height:1.2em; }
.photo .photo-wrap .filename p span { }
.photo .photo-wrap .filename p span.title { font-size:14px; line-height:1.25em !important; }

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

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

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {	padding-top: 40px; }
.portfolio-details .portfolio-details-slider img { width: 100%; image-rendering: crisp-edges; }
.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; }

/*--------------------------------------------------------------
# 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;
	image-rendering: crisp-edges;
}
.candidate .member .member-img:hover img {
	transform: scale(1.2) ;
	transition: all ease-in-out 0.3s;
	image-rendering: crisp-edges;
}

.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-flters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.candidate #candidate-flters 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-flters li:hover, .candidate #candidate-flters li.filter-active {
	color: #fff ;
	background: rgba(51,102,102,0.75) ;
}
.candidate #candidate-flters li:hover a, .candidate #candidate-flters li.filter-active a {
  color: #fff ;
}

.candidate #candidate-flters 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;}

.ics-spin	{ display:inline-block; -webkit-animation: ics-spin 1s infinite linear !important; animation: ics-spin 1s infinite linear !important; }
.ics-pulse	{ display:inline-block; -webkit-animation: ics-spin 1s infinite steps(8); animation: ics-spin 1s infinite steps(8); }

a:hover i { display:inline-block; -webkit-animation: ics-beat 1s infinite linear; animation: ics-beat 1s infinite linear; }
li:hover i.ics-beat { display:inline-block; -webkit-animation: ics-beat 1s infinite linear; animation: ics-beat 1s infinite linear; }
button:hover i { display:inline-block; -webkit-animation: ics-beat 1s infinite linear; animation: ics-beat 1s infinite linear; }

@-webkit-keyframes ics-spin {
  0%	{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100%	{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes ics-spin {
  0%	{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100%	{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes ics-beat {
  0%	{ -webkit-transform: scale(1.6); transform: scale(1.6); }
  50%	{ -webkit-transform: scale(1.2); transform: scale(1.2); }
  100%	{ -webkit-transform: scale(1); transform: scale(1); }
}

.debug	{	border:#f00 solid 1px !important; }
.debug-blue	{	border:#00f solid 1px !important; }
.clickable	{	cursor:pointer; }
.invisible	{	display:none; }

.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; }