@charset "UTF-8";
/* --------------------------------------------------
1 - BASE STYLE
-------------------------------------------------- */
/* --------------------------------
顏色
-------------------------------- */
/* --------------------------------
Animation
-------------------------------- */
/* --------------------------------
Mixin
-------------------------------- */
/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/
@import url("https://fonts.googleapis.com/earlyaccess/notosanskannada.css");
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900");
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed");
@import url("https://fonts.googleapis.com/css?family=Cormorant+Garamond:700");
/* --------------------------------
Breakpoints
-------------------------------- */
/* --------------------------------
Breakpoints // from boostrap
-------------------------------- */
/* --------------------------------
Basic Core
-------------------------------- */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* --------------------------------
Responsive Body
-------------------------------- */
body {
  font-size: 1rem;
  letter-spacing: .1rem;
  font-weight: 300;
  margin: 0 auto;
  color: #9B9B9B;
  font-family: "Lato", "Noto Sans Kannada", "微軟正黑體", "Open Sans", Helvetica, Arial, sans-serif;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  background-color: white;
  position: relative;
}

/* --------------------------------
Typography
-------------------------------- */
html {
  font-size: 18px;
}

@media only screen and (max-width: 480px) {
  html {
    font-size: 16px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  font-weight: initial;
  line-height: 1.5;
  text-align: center;
}

p {
  text-align: left;
  font-size: 0.9rem;
  font-weight: normal;
  color: #4A4A4A;
  line-height: 1.5em;
}

/* --------------------------------
Links
-------------------------------- */
a {
  color: #000000;
  text-decoration: none;
  outline: 0;
  letter-spacing: .1rem;
  -o-transition: all 0.1s ease-in;
  -webkit-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

a:hover, a:focus {
  color: #424242;
  text-decoration: none;
  outline: none;
}

a.line_green {
  color: #59b4ab;
  text-decoration: underline;
  font-weight: bold;
}

/* --------------------------------
Page Basic Style
-------------------------------- */
html.darken {
  background: #000;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 766px) {
  .container {
    margin: 0;
    padding: 0;
  }
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

hr {
  margin: 2vh 0;
  height: 0;
  border-top: 1px dashed #D2D2D2;
}

@media (max-width: 766px) {
  hr {
    margin: 5vh 0;
  }
}

.font-b {
  font-weight: bold;
  color: #313131;
}

/* --------------------------------
Background-Color Style
-------------------------------- */
.bg_grey {
  background: #FAFAFA;
}

.bg_white {
  background-color: #fff;
}

/* --------------------------------
Color Style
-------------------------------- */
.blue {
  color: #3766AB;
}

.red {
  color: #EA3324;
}

main {
  position: relative;
  min-height: calc(100vh - 359px);
  overflow: hidden;
  padding: 0px 0 5vh;
  border-top: 1px solid #EFEFEF;
}

@media only screen and (max-width: 768px) {
  main {
    min-height: calc(100vh - 359px);
  }
}

@media (max-width: 766px) {
  main {
    padding-bottom: 50px;
    padding-top: 70px;
    min-height: calc(100vh - 359px);
  }
}

[class^="type_"] {
  letter-spacing: .1rem;
  color: #313131;
  font-weight: bold;
  margin-bottom: 5vh;
}

.title {
  margin-bottom: 3vh;
  display: inline-block;
  font-size: 2.8rem;
  font-weight: bold;
  color: #000;
  line-height: 1.5em;
  border-bottom: 3px solid #000;
}

@media (max-width: 766px) {
  .title {
    font-size: 2rem;
  }
}

.type_h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #000;
}

.type_h3 {
  text-align: center;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

.type_h4 {
  font-size: 1.3rem;
  margin-bottom: 0;
  color: #4A4A4A;
}

.type_h5 {
  text-align: left;
  font-size: .9rem;
  line-height: 1.5rem;
}

.type_p {
  margin-bottom: 2vh;
}

.site-cavas {
  background: #fff;
  min-height: 100vh;
  padding-top: 178px;
}

@media (max-width: 766px) {
  .site-cavas {
    background: #fff;
    padding-top: 0;
  }
}

[canvas],
[off-canvas] {
  -webkit-transform: initial;
  -ms-transform: initial;
  transform: initial;
}

/* --------------------------------------------------
2 - COMPONENTS
-------------------------------------------------- */
.badge-outline-red {
  border: 1px solid #EA3324;
  background: #fff;
  border-radius: 5px;
  font-size: 0.8em;
  font-weight: normal;
  color: #EA3324;
  line-height: 1.5em;
}

.badge-red {
  background-color: #EA3324;
  font-size: 0.8em;
  font-weight: normal;
  color: #fff;
  line-height: 1.5em;
  margin-right: 10px;
  letter-spacing: 1px;
}

.badge-outline-blue {
  border: 1px solid #4A90E2;
  background: #fff;
  border-radius: 5px;
  font-size: 0.8em;
  font-weight: normal;
  color: #4A90E2;
  line-height: 1.5em;
}

.dot-red {
  background: #EA3324;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  display: inline-block;
  top: -3px;
  margin: 0 4px;
  vertical-align: middle;
}

.dot-green {
  background: #28a745;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  display: inline-block;
  top: -3px;
  margin: 0 4px;
  vertical-align: middle;
}

.dot-up-right {
  position: relative;
  top: -8px;
}

/* --------------------------------
Buttons  /  Default
-------------------------------- */
.btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4rem;
  border: 2px solid #313131;
  background-color: transparent;
  color: #313131;
  margin-bottom: 10px;
  padding: 0.675rem 1.2rem;
  letter-spacing: .1rem;
  font-weight: bold;
  font-size: .9rem;
}

.btn:hover, .btn:focus {
  border: 2px solid #59b4ab;
  background: #59b4ab;
  color: #fff;
}

.btn:focus {
  outline: 0;
}

.btn svg {
  vertical-align: text-bottom;
}

/* --------------------------------
Color Fill Button
-------------------------------- */
.btn-primary {
  color: #fff;
  background: #59b4ab;
  -webkit-transition: all ease-in .2s;
  -o-transition: all ease-in .2s;
  transition: all ease-in .2s;
  border: 2px solid #59b4ab;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4rem;
  margin-bottom: 10px;
  padding: 0.675rem 1.2rem;
  letter-spacing: .1rem;
  font-weight: bold;
  font-size: .9rem;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.active {
  color: #fff;
  border: 2px solid #44968e;
  background: #44968e;
}

.btn-facebook {
  color: #fff;
  background: #3766AB;
  -webkit-transition: all ease-in .2s;
  -o-transition: all ease-in .2s;
  transition: all ease-in .2s;
  border: 2px solid #3766AB;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4rem;
  margin-bottom: 10px;
  padding: 0.675rem 1.2rem;
  letter-spacing: .1rem;
  font-weight: bold;
  font-size: .9rem;
}

.btn-facebook:hover, .btn-facebook:focus, .btn-facebook.active {
  color: #fff;
  border: 2px solid #2b4f84;
  background: #2b4f84;
}

.btn-green {
  color: #fff;
  background: #59b4ab;
  -webkit-transition: all ease-in .2s;
  -o-transition: all ease-in .2s;
  transition: all ease-in .2s;
  border: 2px solid #59b4ab;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4rem;
  margin-bottom: 10px;
  padding: 0.675rem 1.2rem;
  letter-spacing: .1rem;
  font-weight: bold;
  font-size: .9rem;
}

.btn-green:hover, .btn-green:focus, .btn-green.active {
  color: #fff;
  border: 2px solid #44968e;
  background: #44968e;
}

.btn-pink {
  color: #fff;
  background: #2ea7e0;
  -webkit-transition: all ease-in .2s;
  -o-transition: all ease-in .2s;
  transition: all ease-in .2s;
  border: 2px solid #2ea7e0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4rem;
  margin-bottom: 10px;
  padding: 0.675rem 1.2rem;
  letter-spacing: .1rem;
  font-weight: bold;
  font-size: .9rem;
}

.btn-pink:hover, .btn-pink:focus, .btn-pink.active {
  color: #fff;
  border: 2px solid #1c8bbf;
  background: #1c8bbf;
}

.btn-dark {
  color: #fff;
  background: #2ea7e0;
  -webkit-transition: all ease-in .2s;
  -o-transition: all ease-in .2s;
  transition: all ease-in .2s;
  border: 2px solid #2ea7e0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4rem;
  margin-bottom: 10px;
  padding: 0.675rem 1.2rem;
  letter-spacing: .1rem;
  font-weight: bold;
  font-size: .9rem;
  font-size: 13px;
}

.btn-dark:hover, .btn-dark:focus, .btn-dark.active {
  color: #fff;
  border: 2px solid #1c8bbf;
  background: #1c8bbf;
}

.cursor_p {
  cursor: pointer;
}

.cursor_p:hover {
  text-decoration: underline;
}

[class^="btn-outlin-"] {
  border-radius: .3rem;
  padding: 6px 15px;
  border-style: solid;
  border-width: 1px;
  font-size: .7rem;
  font-weight: normal;
  margin: 0 .1rem;
}

[class^="btn-outlin-"]:hover, [class^="btn-outlin-"]:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
}

.btn-outlin-success {
  border-color: #59b4ab;
  color: #59b4ab;
}

.btn-outlin-success:hover, .btn-outlin-success:focus {
  background-color: #59b4ab;
}

.btn-outlin-secondary {
  border-color: #9B9B9B;
  color: #9B9B9B;
}

.btn-outlin-secondary:hover, .btn-outlin-secondary:focus {
  background-color: #9B9B9B;
}

button.nobtn {
  border-radius: 0;
  background-color: transparent;
  border: 0px;
}

.btn-link {
  border: 0px;
}

.btn-link:hover, .btn-link:focus {
  background: transparent;
  color: #2ea7e0;
  text-decoration: none;
  border: 0;
}

.love svg,
.play svg,
.delete svg,
.pause svg,
.stop svg {
  fill: currentcolor;
  width: 25px;
  height: 25px;
}

.love svg:hover,
.play svg:hover,
.delete svg:hover,
.pause svg:hover,
.stop svg:hover {
  fill: currentcolor;
}

.play svg,
.pause svg,
.stop svg {
  color: #9B9B9B;
}

.play svg:hover,
.pause svg:hover,
.stop svg:hover {
  color: #59b4ab;
}

.love svg {
  width: 20px;
  height: 20px;
  color: #EA3324;
}

.love svg:hover {
  color: #FF3E2E;
}

.delete svg {
  color: #9B9B9B;
}

.delete svg:hover {
  color: #FF3E2E;
}

.btn-outlin {
  padding: 0;
  border-radius: 50px;
  border-width: 1px;
  border-style: solid;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  font-size: 20px;
  position: relative;
}

.btn-outlin span {
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(100% / 2 - 10px);
  left: calc(100% / 2 - 10px);
}

.btn-outlin:hover, .btn-outlin.active {
  border-width: 1px;
}

.btn-outlin:hover span, .btn-outlin.active span {
  color: #fff;
}

.btn-outlin.love {
  border-color: #EA3324;
  color: #EA3324;
}

.btn-outlin.love:hover, .btn-outlin.love.active {
  background-color: #EA3324;
}

.btn-outlin.delete {
  border-color: #3766AB;
  color: #3766AB;
}

.btn-outlin.delete:hover {
  background-color: #3766AB;
}

/* --------------------------------
Badge
-------------------------------- */
.badge {
  font-size: 12px;
  letter-spacing: .1rem;
  font-weight: normal;
  padding: 0.5rem 0.7rem;
}

.badge-primary {
  background-color: #59b4ab;
}

/* --------------------------------
Size Padding
-------------------------------- */
.btn-xl {
  padding: 2rem;
}

.btn-lg {
  padding: 1.5rem;
}

.btn-md {
  padding: 0.9rem;
}

.btn-sm {
  padding: 0.5rem 0.7rem;
}

.btn-xs {
  padding: 8px 25px;
  letter-spacing: .2rem;
  font-weight: normal;
}

/* --------------------------------
Back to top Button
-------------------------------- */
.back-to-top {
  font-size: 2.4rem;
  color: #EA3324;
  position: fixed;
  right: 30px;
  bottom: 50px;
  z-index: 2;
  -webkit-transition: all ease .2s;
  -o-transition: all ease .2s;
  transition: all ease .2s;
  display: none;
}

.back-to-top:hover {
  color: #EA3324;
}

/* --------------------------------
Breadcrumb
-------------------------------- */
/* --------------------------------
top fixed header bar (mobile mosity)
-------------------------------- */
.fixed-top-header-mobile {
  height: 47px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  background: #EA3324;
}

@media (min-width: 767px) {
  .fixed-top-header-mobile {
    display: none;
  }
}

/* --------------------------------
bottom fıxed
-------------------------------- */
.action-buttons-fixed {
  padding: 15px 15px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.action-buttons-fixed .col-6 {
  max-width: calc(50% - 5px);
}

.action-buttons-fixed button {
  line-height: 2em;
}

.action-buttons-fixed button:foucs {
  background: inherit;
}

@media (min-width: 767px) {
  .action-buttons-fixed {
    display: none;
    position: relative;
  }
}

.action-buttons-fixed.gradient-bg {
  padding-top: 30px;
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 2%, #ffffff 61%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%, rgba(255, 255, 255, 0)), color-stop(61%, #ffffff));
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 2%, #ffffff 61%);
}

.action-buttons-fixed.white-bg {
  background: #fff;
  /* Rectangle 5: */
  -webkit-box-shadow: 0 2px 8px 1px rgba(218, 218, 218, 0.5);
  box-shadow: 0 2px 8px 1px rgba(218, 218, 218, 0.5);
}

/* --------------------------------
Form
-------------------------------- */
.formbox {
  padding-top: 10vh;
  background-color: #FAFAFA;
}

@media (max-width: 991px) {
  .formbox {
    padding-top: 140px;
  }
}

.formbox .col-10 {
  max-width: 460px;
}

@media (min-width: 767px) {
  .formbox .col-10 {
    max-width: 640px;
  }
}

@media (min-width: 1179px) {
  .formbox .col-10 {
    max-width: 920px;
  }
}

.formbox .max-100 {
  max-width: 100%;
}

@media (max-width: 766px) {
  .formbox .max-100 {
    max-width: 460px;
  }
}

.formbox a:hover, .formbox a:focus {
  font-weight: bold;
}

.formbox .form-group p {
  padding-left: 1.5rem;
}

.display_block {
  display: block;
  margin-bottom: 20px;
}

.form-control.radius-sm {
  border-radius: 1rem;
}

.hide {
  display: none;
}

.responsive-table {
  width: 100%;
  max-width: 100%;
}

.responsive-table th,
.responsive-table td {
  padding: 1rem 0 1rem 1rem;
  font-size: 12px;
  border-top: 0px;
  vertical-align: middle;
}

@media (min-width: 992px) {
  .responsive-table th,
  .responsive-table td {
    font-size: 13px;
  }
}

.responsive-table th:last-child,
.responsive-table td:last-child {
  padding-right: 1rem;
}

.responsive-table thead {
  background-color: #EFEFEF;
  font-size: 13px;
  color: #313131;
  border-top: 0px;
}

.responsive-table thead tr {
  padding: 0 1rem;
}

.responsive-table thead th {
  border-bottom: 0;
  min-width: 110px;
}

.responsive-table tbody + tbody {
  border-top: 0px;
}

.responsive-table tbody tr:nth-child(2n+1) {
  background-color: #fff;
}

.responsive-table tbody tr:hover, .responsive-table tbody tr:focus {
  background-color: #1d243a;
  color: #fff;
  /*
  a{
    color:$white;
    border-color: $white;
  }
  */
}

.responsive-table tbody tr:hover td:before, .responsive-table tbody tr:focus td:before {
  color: #fff;
}

.responsive-table tbody tr:hover a.pin, .responsive-table tbody tr:focus a.pin {
  display: inline-block;
}

.responsive-table tbody tr td a.line_green,
.responsive-table tbody tr td a.line_green:hover {
  color: #59b4ab;
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
}

@media (min-width: 992px) {
  .responsive-list tbody td a {
    color: #59b4ab;
    font-weight: bold;
    border-bottom: 2px solid #59b4ab;
  }
  .responsive-list tbody td a.pin {
    border: 0px solid transparent;
    color: transparent;
    cursor: pointer;
    display: inline-block;
  }
  .responsive-list tbody td a.pin.active {
    border: 0px solid #59b4ab;
    display: inline-block;
    color: #59b4ab;
  }
  .responsive-list tbody td:hover a.pin, .responsive-list tbody td:focus a.pin {
    color: #fff;
  }
  .responsive-list tbody td:hover a.pin.active, .responsive-list tbody td:focus a.pin.active {
    color: #59b4ab;
  }
  .responsive-list tbody td a.line_green,
  .responsive-list tbody td a.line_green:hover {
    border-bottom: 1px solid #59b4ab;
  }
}

@media (max-width: 991px) {
  .responsive-list thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .responsive-list tbody tr {
    position: relative;
    display: block;
    padding: 30px 0;
    width: 100%;
  }
  .responsive-list tbody td {
    position: relative;
    display: block;
    min-height: 30px;
    padding-bottom: 15px;
    padding-left: 40%;
    padding-right: 15px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    font-weight: bold;
  }
  .responsive-list tbody td a {
    color: #9B9B9B;
    font-size: 0.7rem;
    font-weight: bold;
    color: #59b4ab;
    line-height: 1.5em;
    border-bottom: 2px solid #59b4ab;
  }
  .responsive-list tbody td:before {
    content: attr(data-title);
    width: 40%;
    position: absolute;
    text-align: left;
    color: #313131;
    left: 0;
    padding-left: 20px;
    padding-right: 30px;
    letter-spacing: 0;
    display: block;
    font-weight: bold;
    line-height: 16px;
    font-size: 13px;
  }
  .responsive-list tbody td a.line_green,
  .responsive-list tbody td a.line_green:hover {
    border-bottom: 1px solid #59b4ab;
  }
  .responsive-list tbody a.pin {
    border: 1px solid #59b4ab;
    color: #59b4ab;
    cursor: pointer;
    display: inline-block;
  }
  .responsive-list tbody a.pin.active {
    color: #fff;
  }
  .responsive-list tbody a.delete {
    border-bottom: 0px;
  }
}

@media (max-width: 766px) {
  .responsive-list.responsive-list_100 tbody td {
    padding-left: 15px;
  }
  .responsive-list.responsive-list_100 tbody td:before {
    position: relative;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
  }
}

.table {
  margin-bottom: 0;
}

.pin {
  margin-left: 5px;
  text-align: center;
  vertical-align: middle;
  color: #59b4ab;
  text-decoration: none;
  display: none;
  height: 15px;
}

@media (max-width: 991px) {
  .pin {
    border-radius: .25rem;
    height: auto;
  }
  .pin:after {
    content: "置頂";
    color: #59b4ab;
    position: relative;
    top: -5px;
    padding-right: 5px;
  }
  .pin:hover {
    background-color: #59b4ab;
  }
  .pin:hover:after {
    color: #fff;
  }
  .pin.active {
    display: inline-block;
    background-color: #59b4ab;
    color: #fff;
    fill: currentcolor;
  }
  .pin.active:after {
    color: #fff;
    content: "移除";
  }
}

.pin svg {
  width: 20px;
  height: 20px;
  line-height: 15px;
  fill: currentcolor;
}

.border-top-solid {
  border-top: 1px solid #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
  padding-top: .5rem;
  padding-right: 30px;
}

.bootstrap-select.show-tick .dropdown-menu li a span.text {
  font-size: 13px;
}

.pagination {
  display: inline-block;
  padding: 0 15px;
}

.navpage {
  padding: 2rem 0 0;
}

@media (min-width: 767px) {
  .navpage {
    text-align: center;
  }
}

.navpage p {
  color: #313131;
  padding-right: 15px;
  padding-left: 15px;
  display: inline-block;
}

.page-link {
  border: 1px solid #EFEFEF;
  border-radius: 50px;
  color: #9B9B9B;
  font-size: 15px;
  line-height: 18px;
  position: relative;
}

.page-link span {
  border-radius: 20px;
  background-color: #EFEFEF;
  vertical-align: middle;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin: 0 3px;
  display: block;
  color: #9B9B9B;
}

.page-link span svg {
  height: 20px;
  width: 20px;
}

.page-link:hover, .page-link:active, .page-link:focus {
  color: #fff;
  text-decoration: none;
  background-color: #59b4ab;
  border-color: #59b4ab;
  outline: 0;
}

.page-link:hover span, .page-link:active span, .page-link:focus span {
  color: #59b4ab;
}

.arrow_left span, .arrow_right span {
  position: absolute;
  display: block;
  top: 8px;
}

.arrow_left {
  padding-left: 40px;
}

.arrow_left span {
  left: 5px;
}

.arrow_right {
  padding-right: 40px;
}

.arrow_right span {
  right: 5px;
}

.page-item {
  padding: 5px 0;
  display: inline-block;
}

.page-item:first-child .page-link {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.page-item:last-child .page-link {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.page-item.active .page-link {
  background-color: #59b4ab;
  color: #fff;
}

.page-item.disabled .page-link {
  background-color: #59b4ab;
  color: #fff;
}

.breadcrumb {
  background-color: transparent;
  margin: 0px;
  padding: 0;
}
.breadcrumb li:last-child {
  width: 100%;
  display: block;
}

@media (min-width: 767px) {
  .breadcrumb {
    display: block;
    font-size: .9rem;
    padding: 0;
    margin-left: 15px;
    margin-bottom: 15px;
    border-radius: 0;
  }
  .breadcrumb li:last-child {
    width: auto;
    display: inline-block;
  }
}

@media (min-width: 992px) {
  .breadcrumb {
    margin-left: -15px;
  }
}

.breadcrumb-item {
  display: inline;
  padding: 10px 0 5px;
  font-size: .8rem;
}

@media (min-width: 767px) {
  .breadcrumb-item {
     padding: 0;
  }
}

.breadcrumb-item a {
  color: #59b4ab;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

.breadcrumb-item.active {
  color: #4A4A4A;
}

/*----------------
圖片上傳
----------------*/
.ui-sortable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ui-sortable.video_list .ui-state-default {
  margin: 0 auto;
  width: calc(320px);
}

.ui-state-default {
  margin: 10px;
  width: calc(100% / 3 - 20px);
  cursor: pointer;
  position: relative;
}

.ui-state-default img {
  border-radius: 6px;
  display: block;
  max-width: 100%;
  height: auto;
}

.ui-state-default .delete {
  position: absolute;
  top: 0px;
  right: 0px;
  display: none;
}

.ui-state-default .delete svg {
  width: 20px;
  height: 20px;
  color: #59b4ab;
}

.ui-state-default:hover .delete {
  display: block;
}

.cursor_p .qq-upload-button {
  background-color: #fff;
}

/*----------------
連結上傳
-----------------*/
#link_list .ui-state-default {
  width: 100%;
}

#link_list .delete {
  position: relative;
  display: block;
  border: 1px solid #59b4ab;
  border-radius: 5px;
  width: 66px;
  height: 32px;
  line-height: 36px;
  padding: 0 5px;
  margin-top: 3px;
}

#link_list .delete:after {
  content: "刪除";
  position: absolute;
  left: 26px;
  top: -3px;
  color: #59b4ab;
  font-size: 14px;
  font-weight: bold;
}

.media {
  border: 1px solid #EFEFEF;
  border-bottom: 0px;
  padding: 30px;
  background-color: #fff;
}

.media [class^="type_"] {
  margin-bottom: 10px;
}

.media:last-child {
  border-bottom: 1px solid #EFEFEF;
}

.media-head {
  text-align: left;
}

.media-head h5 {
  text-align: left;
}

.media-head .justify-content-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
}

@media (min-width: 767px) {
  .media-head .justify-content-between {
    display: block;
  }
}

.media-head p {
  margin: 0 0 5px;
  font-size: 0.7rem;
  font-weight: 300;
  color: #9B9B9B;
  line-height: 1.5em;
  letter-spacing: .05rem;
}

.media-munber {
  font-size: 0.7rem;
  font-weight: 300;
  color: #9B9B9B;
  line-height: 1.5em;
  margin-bottom: 10px;
}

.media_tagifon {
  background-color: #EFEFEF;
  border-radius: 10px;
  border: 1px dashed #ddd;
  padding: 15px;
  font-size: 0.7rem;
  font-weight: 300;
  color: #9B9B9B;
  line-height: 1.5em;
}

.media_ifon {
  font-size: 0.9rem;
  font-weight: 300;
  color: #4A4A4A;
  line-height: 1.5em;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #ddd;
}

.media-body h3 {
  text-align: left;
  line-height: 2rem;
}

/* --------------------------------------------------
3 - HELPERS
-------------------------------------------------- */
/* --------------------------------
From Layout
-------------------------------- */
.form-control {
  border: 1px solid #EFEFEF;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #9B9B9B;
  background-color: #fff;
  background: transparent;
  height: auto;
  -webkit-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  padding: 0.675rem 1.2rem;
  border-radius: 4rem;
  background-color: #fff;
  margin-bottom: 0.5vh;
  font-weight: normal;
}

.form-control:focus {
  background: transparent;
  outline: 0 !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #ddd;
}

.form-control:focus:-moz-placeholder, .form-control:focus:-ms-input-placeholder, .form-control:focus:-webkit-input-placeholder {
  color: #757575;
}

.form-control::-webkit-input-placeholder {
  color: #757575;
}

.form-control[disabled], .form-control[readonly] {
  background: #f8f8f8;
  color: rgba(98, 98, 98, 0.23);
}

.form-control-border {
  border: 1px solid #dadada;
  border-radius: 0.25rem;
}

.form-control-border .form-control {
  border-width: 0;
}

label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #59b4ab;
  line-height: 1.5em;
  letter-spacing: .1rem;
  line-height: 1.8rem;
  padding-left: 1.2rem;
}

.form-check-inline {
  position: relative;
  margin-right: .3rem;
}

.form-check-inline .form-check-input {
  left: .5rem;
  position: absolute;
  opacity: 0;
}

.form-check-inline .form-check-input:checked ~ .form-check-label {
  background: #59b4ab;
  color: #fff;
  border: 2px solid #59b4ab;
}

.form-check-label {
  cursor: pointer;
  background: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4rem;
  border: 2px solid #313131;
  margin: 0.5rem 0 0;
  color: #313131;
  min-width: 100px;
  text-align: center;
  padding: 0.675rem 1.5rem;
  font-size: .9rem;
}

.form-check-label:hover, .form-check-label:focus {
  border: 2px solid #3c857d;
  background: #3c857d;
  color: #fff;
}

select {
  background: #fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDIiPjxkZWZzPjxzdHlsZT4uYXtmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT7kuIvovIk8L3RpdGxlPjxwYXRoIGNsYXNzPSJhIiBkPSJNMiwzLjgxbC0yLTJINFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEuODEpIi8+PC9zdmc+") no-repeat right 0.75rem center !important;
  background-size: 8px 10px !important;
}

select.form-control:not([size]):not([multiple]) {
  height: auto;
}

.form-trandparent {
  background: transparent;
  border: 0;
  max-width: 120px;
  padding: 10px 0;
}

fieldset[disabled] .form-control {
  background: #f8f8f8;
  color: rgba(98, 98, 98, 0.23);
}

.input-group-addon {
  background-color: transparent;
  border: 0px;
  padding: 6px 18px;
  cursor: pointer;
  position: absolute;
  right: 0;
}

.input-group-addon svg {
  color: #000;
}

button,
.btn {
  cursor: pointer;
  border-radius: 4rem;
}

.custom-select-lg {
  padding: 10px 15px;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #59b4ab;
}

/* --------------------------------
Form Flat
-------------------------------- */
.form-flat > * {
  padding: 0.55rem 1.25rem;
}

.form-flat input,
.form-flat .form-control {
  border-width: 0;
}

/* --------------------------------
Nice Select
-------------------------------- */
.swal-overlay {
  background-color: rgba(204, 204, 204, 0.45);
}

.swal-button.swal-button--confirm {
  background: #59b4ab;
  padding: 0.675rem 1.2rem;
  border-radius: 4rem;
  -webkit-box-shadow: 0 0 0 #fff;
  box-shadow: 0 0 0 #fff;
}

.swal-title {
  font-size: 1.5rem;
}

.swal-footer {
  text-align: center;
}

/*
@import "helpers/owl";
@import "helpers/lightbox";
@import "helpers/formatter.scss";
@import "helpers/niceselect";
@import "helpers/drilldown.scss";
*/
.slinky-menu {
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.slinky-menu > ul {
  left: 0;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.slinky-menu ul,
.slinky-menu li {
  list-style: none;
  margin: 0;
}

.slinky-menu ul {
  width: 100%;
  padding: 0;
}

.slinky-menu a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.slinky-menu a span {
  padding-left: 40px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: 1.4;
  color: #fff;
  font-size: 1rem;
  letter-spacing: .1rem;
}

.slinky-menu li ul {
  display: none;
  left: 100%;
  position: absolute;
  top: 0;
}

.slinky-menu .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.slinky-menu .header .title {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: 1.4;
  margin: 0;
}

.slinky-theme-default .title {
  color: #333;
  padding: 1em;
}

.slinky-theme-default li {
  line-height: 1;
}

.slinky-theme-default a:not(.back) {
  color: #333;
  padding: 1em;
}

.slinky-theme-default a:not(.back):hover {
  background: #40c5c6;
}

.slinky-theme-default a:not(.back):active {
  background: #36b5b6;
}

.slinky-theme-default .next::after,
.slinky-theme-default .back::before {
  background: url(../svg/arrow-right3.svg) center no-repeat;
  background-size: 1em;
  content: '';
  height: 1em;
  opacity: 1;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
  width: 1em;
  color: #fff;
}

.slinky-theme-default .next::after {
  margin-left: 1em;
}

.slinky-theme-default .back::before {
  padding: 1em;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.slinky-theme-default .next:hover::after,
.slinky-theme-default .back:hover::before {
  opacity: 0.75;
}

.slinky-theme-default .next:active::after,
.slinky-theme-default .back:active::before {
  opacity: 1;
}

/*!
*  - v1.3
* Homepage: http://bqworks.com/slider-pro/
* Author: bqworks
* Author URL: http://bqworks.com/
*/
/* Core
--------------------------------------------------*/
.slider-pro {
  position: relative;
  margin: 0 auto;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.sp-slides-container {
  position: relative;
}

.sp-mask {
  position: relative;
  overflow: hidden;
}

.sp-slides {
  position: relative;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

.sp-slide {
  position: absolute;
}

.sp-image-container {
  overflow: hidden;
}

.sp-image {
  position: relative;
  display: block;
  border: none;
}

.sp-no-js {
  overflow: hidden;
  max-width: 100%;
}

/* Thumbnails
--------------------------------------------------*/
.sp-thumbnails-container {
  position: relative;
  overflow: hidden;
  direction: ltr;
}

.sp-top-thumbnails,
.sp-bottom-thumbnails {
  left: 0;
  margin: 0 auto;
}

.sp-top-thumbnails {
  position: absolute;
  top: 0;
  margin-bottom: 4px;
}

.sp-bottom-thumbnails {
  margin-top: 4px;
}

.sp-left-thumbnails,
.sp-right-thumbnails {
  position: absolute;
  top: 0;
}

.sp-right-thumbnails {
  right: 0;
  margin-left: 4px;
}

.sp-left-thumbnails {
  left: 0;
  margin-right: 4px;
}

.sp-thumbnails {
  position: relative;
}

.sp-thumbnail {
  border: none;
}

.sp-thumbnail-container {
  position: relative;
  display: block;
  overflow: hidden;
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sp-rtl .sp-thumbnail-container {
  float: right;
}

/* Horizontal thumbnails
------------------------*/
.sp-top-thumbnails .sp-thumbnail-container,
.sp-bottom-thumbnails .sp-thumbnail-container {
  margin-left: 2px;
  margin-right: 2px;
}

.sp-top-thumbnails .sp-thumbnail-container:first-child,
.sp-bottom-thumbnails .sp-thumbnail-container:first-child {
  margin-left: 0;
}

.sp-top-thumbnails .sp-thumbnail-container:last-child,
.sp-bottom-thumbnails .sp-thumbnail-container:last-child {
  margin-right: 0;
}

/* Vertical thumbnails
----------------------*/
.sp-left-thumbnails .sp-thumbnail-container,
.sp-right-thumbnails .sp-thumbnail-container {
  margin-top: 2px;
  margin-bottom: 2px;
}

.sp-left-thumbnails .sp-thumbnail-container:first-child,
.sp-right-thumbnails .sp-thumbnail-container:first-child {
  margin-top: 0;
}

.sp-left-thumbnails .sp-thumbnail-container:last-child,
.sp-right-thumbnails .sp-thumbnail-container:last-child {
  margin-bottom: 0;
}

/* Right thumbnails with pointer
--------------------------------*/
.sp-right-thumbnails.sp-has-pointer {
  margin-left: -13px;
}

.sp-right-thumbnails.sp-has-pointer .sp-thumbnail {
  position: absolute;
  left: 18px;
  margin-left: 0 !important;
}

.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  content: '';
  position: absolute;
  height: 100%;
  border-left: 5px solid #F00;
  left: 0;
  top: 0;
  margin-left: 13px;
}

.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  top: 50%;
  margin-top: -8px;
  border-right: 13px solid #F00;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Left thumbnails with pointer
-------------------------------*/
.sp-left-thumbnails.sp-has-pointer {
  margin-right: -13px;
}

.sp-left-thumbnails.sp-has-pointer .sp-thumbnail {
  position: absolute;
  right: 18px;
}

.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  content: '';
  position: absolute;
  height: 100%;
  border-left: 5px solid #F00;
  right: 0;
  top: 0;
  margin-right: 13px;
}

.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: 0;
  top: 50%;
  margin-top: -8px;
  border-left: 13px solid #F00;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Bottom thumbnails with pointer
---------------------------------*/
.sp-bottom-thumbnails.sp-has-pointer {
  margin-top: -13px;
}

.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail {
  position: absolute;
  top: 18px;
  margin-top: 0 !important;
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  content: '';
  position: absolute;
  width: 100%;
  border-bottom: 5px solid #F00;
  top: 0;
  margin-top: 13px;
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 0;
  margin-left: -8px;
  border-bottom: 13px solid #F00;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

/* Top thumbnails with pointer
------------------------------*/
.sp-top-thumbnails.sp-has-pointer {
  margin-bottom: -13px;
}

.sp-top-thumbnails.sp-has-pointer .sp-thumbnail {
  position: absolute;
  bottom: 18px;
}

.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  content: '';
  position: absolute;
  width: 100%;
  border-bottom: 5px solid #F00;
  bottom: 0;
  margin-bottom: 13px;
}

.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0;
  margin-left: -8px;
  border-top: 13px solid #F00;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

/* Layers
--------------------------------------------------*/
.sp-layer {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-backface-visibility: hidden;
}

.sp-black {
  color: #FFF;
  background: black;
  background: rgba(0, 0, 0, 0.7);
}

.sp-white {
  color: #000;
  background: white;
  background: rgba(255, 255, 255, 0.7);
}

.sp-rounded {
  border-radius: 10px;
}

.sp-padding {
  padding: 10px;
}

/* Touch Swipe
--------------------------------------------------*/
.sp-grab {
  cursor: url(images/openhand.cur), move;
}

.sp-grabbing {
  cursor: url(images/closedhand.cur), move;
}

.sp-selectable {
  cursor: default;
}

/* Caption
--------------------------------------------------*/
.sp-caption-container {
  text-align: center;
  margin-top: 10px;
}

/* Full Screen
--------------------------------------------------*/
.sp-full-screen {
  margin: 0 !important;
  background-color: #000;
}

.sp-full-screen-button {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sp-full-screen-button:before {
  content: '\2195';
}

.sp-fade-full-screen {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.slider-pro:hover .sp-fade-full-screen {
  opacity: 1;
}

/* Buttons
--------------------------------------------------*/
.sp-buttons {
  position: relative;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  bottom: 140px;
}

@media (min-width: 767px) {
  .sp-buttons {
    bottom: 140px;
  }
}

.about .sp-buttons {
  position: relative;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  bottom: 9px;
}

@media (min-width: 767px) {
  .about .sp-buttons {
    bottom: 0px;
  }
}

.sp-rtl .sp-buttons {
  direction: rtl;
}

.sp-full-screen .sp-buttons {
  display: none;
}

.sp-button {
  width: 50px;
  height: 3px;
  margin: 4px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  background-color: #EFEFEF;
}

.sp-selected-button {
  background-color: #2ea7e0;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .sp-button {
    width: 50px;
    height: 3px;
  }
}

@media only screen and (min-width: 568px) and (max-width: 768px) {
  .sp-button {
    width: 50px;
    height: 3px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 568px) {
  .sp-button {
    width: 50px;
    height: 3px;
  }
}

/* Arrows
--------------------------------------------------*/
.sp-arrows {
  position: absolute;
}

.sp-fade-arrows {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.sp-slides-container:hover .sp-fade-arrows {
  opacity: 1;
}

.sp-horizontal .sp-arrows {
  width: 100%;
  left: 0;
  top: 50%;
  margin-top: -15px;
}

.sp-vertical .sp-arrows {
  height: 100%;
  left: 50%;
  top: 0;
  margin-left: -10px;
}

.sp-arrow {
  position: absolute;
  display: block;
  width: 100px;
  height: 30px;
  cursor: pointer;
}

.sp-vertical .sp-arrow {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sp-horizontal .sp-previous-arrow {
  left: 20px;
  right: auto;
  background: url(../svg/left.svg) no-repeat right center;
}

.sp-horizontal.sp-rtl .sp-previous-arrow {
  right: 20px;
  left: auto;
}

.sp-horizontal .sp-next-arrow {
  right: 20px;
  left: auto;
  background: url(../svg/right.svg) no-repeat right center;
}

.sp-horizontal.sp-rtl .sp-next-arrow {
  left: 20px;
  right: auto;
}

.sp-vertical .sp-previous-arrow {
  top: 20px;
}

.sp-vertical .sp-next-arrow {
  bottom: 20px;
  /*
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  */
}

.sp-previous-arrow:before,
.sp-previous-arrow:after,
.sp-next-arrow:before,
.sp-next-arrow:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  /*
  background-color: #FFF;
  */
}

.sp-arrow:before {
  left: 30%;
  top: 0;
  /*
  -webkit-transform: skew(145deg, 0deg);
  -ms-transform: skew(145deg, 0deg);
  transform: skew(145deg, 0deg);*/
}

.sp-arrow:after {
  left: 30%;
  top: 50%;
  /*
  -webkit-transform: skew(-145deg, 0deg);
  -ms-transform: skew(-145deg, 0deg);
  transform: skew(-145deg, 0deg);
  */
}

.sp-next-arrow {
  background: url(../svg/right.svg) no-repeat left center;
  /*
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
   */
}

.sp-horizontal.sp-rtl .sp-previous-arrow {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sp-horizontal.sp-rtl .sp-next-arrow {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.ie8 .sp-arrow,
.ie7 .sp-arrow {
  width: 0;
  height: 0;
}

.ie8 .sp-arrow:before,
.ie8 .sp-arrow:after,
.ie7 .sp-arrow:before,
.ie7 .sp-arrow:after {
  content: none;
}

.ie8.sp-horizontal .sp-previous-arrow,
.ie7.sp-horizontal .sp-previous-arrow {
  border-right: 20px solid #FFF;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.ie8.sp-horizontal .sp-next-arrow,
.ie7.sp-horizontal .sp-next-arrow {
  border-left: 20px solid #FFF;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.ie8.sp-vertical .sp-previous-arrow,
.ie7.sp-vertical .sp-previous-arrow {
  border-bottom: 20px solid #FFF;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

.ie8.sp-vertical .sp-next-arrow,
.ie7.sp-vertical .sp-next-arrow {
  border-top: 20px solid #FFF;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

/* Thumbnail Arrows
--------------------------------------------------*/
.sp-thumbnail-arrows {
  position: absolute;
}

.sp-fade-thumbnail-arrows {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.sp-thumbnails-container:hover .sp-fade-thumbnail-arrows {
  opacity: 1;
}

.sp-top-thumbnails .sp-thumbnail-arrows,
.sp-bottom-thumbnails .sp-thumbnail-arrows {
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -12px;
}

.sp-left-thumbnails .sp-thumbnail-arrows,
.sp-right-thumbnails .sp-thumbnail-arrows {
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -7px;
}

.sp-thumbnail-arrow {
  position: absolute;
  display: block;
  width: 15px;
  height: 25px;
  cursor: pointer;
}

.sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow,
.sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sp-top-thumbnails .sp-previous-thumbnail-arrow,
.sp-bottom-thumbnails .sp-previous-thumbnail-arrow {
  left: 0px;
}

.sp-top-thumbnails .sp-next-thumbnail-arrow,
.sp-bottom-thumbnails .sp-next-thumbnail-arrow {
  right: 0px;
}

.sp-left-thumbnails .sp-previous-thumbnail-arrow,
.sp-right-thumbnails .sp-previous-thumbnail-arrow {
  top: 0px;
}

.sp-left-thumbnails .sp-next-thumbnail-arrow,
.sp-right-thumbnails .sp-next-thumbnail-arrow {
  bottom: 0px;
}

.sp-previous-thumbnail-arrow:before,
.sp-previous-thumbnail-arrow:after,
.sp-next-thumbnail-arrow:before,
.sp-next-thumbnail-arrow:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #FFF;
}

.sp-previous-thumbnail-arrow:before {
  left: 30%;
  top: 0;
  -webkit-transform: skew(145deg, 0deg);
  -ms-transform: skew(145deg, 0deg);
  transform: skew(145deg, 0deg);
}

.sp-previous-thumbnail-arrow:after {
  left: 30%;
  top: 50%;
  -webkit-transform: skew(-145deg, 0deg);
  -ms-transform: skew(-145deg, 0deg);
  transform: skew(-145deg, 0deg);
}

.sp-next-thumbnail-arrow:before {
  right: 30%;
  top: 0;
  -webkit-transform: skew(35deg, 0deg);
  -ms-transform: skew(35deg, 0deg);
  transform: skew(35deg, 0deg);
}

.sp-next-thumbnail-arrow:after {
  right: 30%;
  top: 50%;
  -webkit-transform: skew(-35deg, 0deg);
  -ms-transform: skew(-35deg, 0deg);
  transform: skew(-35deg, 0deg);
}

.ie8 .sp-thumbnail-arrow,
.ie7 .sp-thumbnail-arrow {
  width: 0;
  height: 0;
}

.ie8 .sp-thumbnail-arrow:before,
.ie8 .sp-thumbnail-arrow:after,
.ie7 .sp-thumbnail-arrow:before,
.ie7 .sp-thumbnail-arrow:after {
  content: none;
}

.ie8 .sp-top-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-top-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow {
  border-right: 12px solid #FFF;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.ie8 .sp-top-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-bottom-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-top-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-bottom-thumbnails .sp-next-thumbnail-arrow {
  border-left: 12px solid #FFF;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.ie8 .sp-left-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-right-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-left-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-right-thumbnails .sp-previous-thumbnail-arrow {
  border-bottom: 12px solid #FFF;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

.ie8 .sp-left-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-right-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-left-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-right-thumbnails .sp-next-thumbnail-arrow {
  border-top: 12px solid #FFF;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

/* Video
--------------------------------------------------*/
a.sp-video {
  text-decoration: none;
}

a.sp-video img {
  -webkit-backface-visibility: hidden;
  border: none;
}

a.sp-video:after {
  content: '\25B6';
  position: absolute;
  width: 45px;
  padding-left: 5px;
  height: 50px;
  border: 2px solid #FFF;
  text-align: center;
  font-size: 30px;
  border-radius: 30px;
  top: 0;
  color: #FFF;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.2);
  margin: auto;
  line-height: 52px;
}

/* CSS for preventing styling issues in WordPress
--------------------------------------------------*/
.slider-pro img.sp-image,
.slider-pro img.sp-thumbnail {
  max-width: none;
  max-height: none;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  -webkit-box-shadow: none !important;
  -mox-box-shadow: none !important;
  box-shadow: none !important;
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: none;
}

.slider-pro a {
  position: static;
  transition: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -o-transition: none !important;
}

.slider-pro iframe,
.slider-pro object,
.slider-pro video,
.slider-pro embed,
.slider-pro canvas {
  max-width: none;
  max-height: none;
}

.slider-pro p.sp-layer {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

.slider-pro h1.sp-layer {
  font-size: 32px;
  line-height: 1.4;
  margin: 0;
}

.slider-pro h2.sp-layer {
  font-size: 24px;
  line-height: 1.4;
  margin: 0;
}

.slider-pro h3.sp-layer {
  font-size: 19px;
  line-height: 1.4;
  margin: 0;
}

.slider-pro h4.sp-layer {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

.slider-pro h5.sp-layer {
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.slider-pro h6.sp-layer {
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
}

.slider-pro img.sp-layer {
  border: none;
}

.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
  float: none;
  display: inline-block;
  margin-left: 0;
}

.form-group-lg .bootstrap-select.form-control .dropdown-toggle, .form-group-sm .bootstrap-select.form-control .dropdown-toggle {
  height: 100%;
  font-size: inherit;
  line-height: inherit;
  border-radius: inherit;
}

.bootstrap-select.form-control-sm .dropdown-toggle, .bootstrap-select.form-control-lg .dropdown-toggle {
  font-size: inherit;
  line-height: inherit;
  border-radius: inherit;
}

select.bs-select-hidden {
  display: none !important;
}

select.selectpicker {
  display: none !important;
}

.bootstrap-select {
  width: 220px \0;
}

.bootstrap-select > select {
  position: absolute !important;
  bottom: 0;
  left: 50%;
  display: block !important;
  width: 0.5px !important;
  height: 100% !important;
  padding: 0 !important;
  opacity: 0 !important;
  border: none;
}

.bootstrap-select > select.bs-select-hidden {
  display: none !important;
}

.bootstrap-select > select.mobile-device {
  top: 0;
  left: 0;
  display: block !important;
  width: 100% !important;
  z-index: 2;
}

.bootstrap-select > .dropdown-toggle {
  padding: 0.5rem 0.7rem;
  position: relative;
  width: 100%;
  z-index: 1;
  text-align: right;
  white-space: nowrap;
  font-size: 13px;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder {
  color: #313131;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
  color: #313131;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder:focus {
  color: #313131;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  color: #fff;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:hover {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:focus {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:active {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:hover {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:focus {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:active {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:hover {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:focus {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:active {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:hover {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:focus {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:active {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:hover {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:focus {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:active {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:hover {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:focus {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:active {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > .disabled {
  cursor: not-allowed;
}

.bootstrap-select > .disabled:focus {
  outline: none !important;
}

.bootstrap-select.fit-width {
  width: auto !important;
}

.bootstrap-select.fit-width .dropdown-toggle .filter-option {
  position: static;
  display: inline;
  padding: 0;
}

.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner {
  display: inline;
}

.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner {
  display: inline;
}

.bootstrap-select.fit-width .dropdown-toggle .caret {
  position: static;
  top: auto;
  margin-top: -1px;
}

.bootstrap-select .dropdown-toggle:focus {
  outline: thin dotted #333333 !important;
  outline-offset: -2px;
}

.bootstrap-select .dropdown-toggle:before {
  content: '';
  display: inline-block;
}

.bootstrap-select .dropdown-toggle .filter-option {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: inherit;
  padding-right: inherit;
  padding-bottom: inherit;
  padding-left: inherit;
  height: 100%;
  width: 100%;
  text-align: left;
}

.bootstrap-select .dropdown-toggle .filter-option-inner {
  padding-right: inherit;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  overflow: hidden;
}

.bootstrap-select .dropdown-toggle .caret {
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -2px;
  vertical-align: middle;
}

.bootstrap-select.form-control {
  margin-bottom: 0;
  padding: 0;
  border: none;
}

.bootstrap-select.form-control.input-group-btn {
  z-index: auto;
}

.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

.bootstrap-select.dropdown-menu-right {
  float: right;
}

.bootstrap-select.disabled {
  cursor: not-allowed;
}

.bootstrap-select.disabled:focus {
  outline: none !important;
}

.bootstrap-select.bs-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 0 !important;
  padding: 0 !important;
}

.bootstrap-select.bs-container .dropdown-menu {
  z-index: 1060;
}

.bootstrap-select .dropdown-menu {
  min-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bootstrap-select .dropdown-menu.inner {
  position: static;
  float: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.bootstrap-select .dropdown-menu li {
  position: relative;
}

.bootstrap-select .dropdown-menu li a {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bootstrap-select .dropdown-menu li a.opt {
  position: relative;
  padding-left: 2.25em;
}

.bootstrap-select .dropdown-menu li a span.check-mark {
  display: none;
}

.bootstrap-select .dropdown-menu li a span.text {
  display: inline-block;
}

.bootstrap-select .dropdown-menu li small {
  padding-left: 0.5em;
}

.bootstrap-select .dropdown-menu li.active small {
  color: #fff;
}

.bootstrap-select .dropdown-menu li.disabled a {
  cursor: not-allowed;
}

.bootstrap-select .dropdown-menu .notify {
  position: absolute;
  bottom: 5px;
  width: 96%;
  margin: 0 2%;
  min-height: 26px;
  padding: 3px 5px;
  background: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  opacity: 0.9;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bootstrap-select .dropdown-menu > .inner:focus {
  outline: none !important;
}

.bootstrap-select .no-results {
  padding: 3px;
  background: #f5f5f5;
  margin: 0 5px;
  white-space: nowrap;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle {
  z-index: 1061;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:before {
  display: block;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:after {
  display: block;
}

.bootstrap-select.show-menu-arrow.show > .dropdown-toggle {
  z-index: 1061;
}

.bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:before {
  display: block;
}

.bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:after {
  display: block;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before {
  content: '';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(204, 204, 204, 0.2);
  position: absolute;
  bottom: -4px;
  left: 9px;
  display: none;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after {
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -4px;
  left: 10px;
  display: none;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before {
  bottom: auto;
  top: -4px;
  border-top: 7px solid rgba(204, 204, 204, 0.2);
  border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after {
  bottom: auto;
  top: -4px;
  border-top: 6px solid #fff;
  border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before {
  right: 12px;
  left: auto;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after {
  right: 13px;
  left: auto;
}

.bootstrap-select.is-invalid .dropdown-toggle {
  border-color: #b94a48;
}

.bootstrap-select.is-valid .dropdown-toggle {
  border-color: #28a745;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  min-width: 140px;
}

.bootstrap-select.form-control-sm .dropdown-toggle {
  padding: 0.25rem 0.5rem;
}

.bootstrap-select.form-control-lg .dropdown-toggle {
  padding: 0.5rem 1rem;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  position: absolute;
  display: inline-block;
  right: 15px;
  top: 5px;
}

.bootstrap-select.show-tick .dropdown-menu li a span.text {
  margin-right: 34px;
}

.bootstrap-select .bs-ok-default:after {
  content: '';
  display: block;
  width: 0.5em;
  height: 1em;
  border-style: solid;
  border-width: 0 0.26em 0.26em 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.bootstrap-select[class*="col-"].dropdown-menu-right {
  float: right;
}

.bootstrap-select[class*="col-"] .dropdown-toggle {
  width: 100%;
}

.bs-searchbox {
  padding: 4px 8px;
}

.bs-searchbox .form-control {
  margin-bottom: 0;
  width: 100%;
  float: none;
}

.bs-searchbox + .bs-actionsbox {
  padding: 0 8px 4px;
}

.bs-actionsbox {
  padding: 4px 8px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bs-actionsbox .btn-group button {
  width: 50%;
}

.bs-donebutton {
  padding: 4px 8px;
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bs-donebutton .btn-group button {
  width: 100%;
}

.has-error .bootstrap-select .dropdown-toggle {
  border-color: #b94a48;
}

.error .bootstrap-select .dropdown-toggle {
  border-color: #b94a48;
}

.was-validated .bootstrap-select .selectpicker:invalid + .dropdown-toggle {
  border-color: #b94a48;
}

.was-validated .bootstrap-select .selectpicker:valid + .dropdown-toggle {
  border-color: #28a745;
}

:not(.input-group) > .bootstrap-select.form-control:not([class*="col-"]) {
  width: 100%;
}

.row .bootstrap-select[class*="col-"].dropdown-menu-right {
  float: right;
}

.form-inline .bootstrap-select {
  margin-bottom: 0;
}

.form-inline .bootstrap-select .form-control {
  width: 100%;
}

.form-horizontal .bootstrap-select {
  margin-bottom: 0;
}

.form-group .bootstrap-select {
  margin-bottom: 0;
}

.form-group-lg .bootstrap-select.form-control {
  padding: 0;
}

.form-group-sm .bootstrap-select.form-control {
  padding: 0;
}

.input-group .bootstrap-select.form-control .dropdown-toggle {
  border-radius: inherit;
}

.select-sm:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: auto;
}

.select-sm .btn {
  min-width: 80px;
  width: auto;
  padding: 5px 15px;
}

.formbox .form-group small {
  display: block;
  font-size: 0.5rem;
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

/* --------------------------------------------------
4 - LAYOUT
-------------------------------------------------- */
/* --------------------------------
loader
-------------------------------- */
.loader-wrap {
  display: table;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #fff;
  opacity: 1;
}

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loader-inner {
  width: 150px;
  height: 150px;
}

.loader-inner img {
  width: 100%;
}

/* --------------------------------
Header and Menu
-------------------------------- */
header {
  overflow: hidden;
  clear: both;
  padding: 15px;
  position: fixed;
  z-index: 2;
  width: 100%;
  background-color: #fff;
  -webkit-box-shadow: 2px 0px 5px #EFEFEF;
  box-shadow: 2px 0px 5px #EFEFEF;
}

header .logo {
  display: inline-block;
  float: left;
  font-size: 1.5rem;
}

header .logo img {
  height: 70px;
  margin-top: -40px;
}

@media (max-width: 991px) {
  header .logo img {
    max-height: 45px;
    margin-top: -10px;
  }
}

header .right-btn {
  margin-top: 10px;
  float: right;
  cursor: pointer;
  width: 70px;
  height: 20px;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  line-height: 1.5em;
}

header .right-btn svg {
  width: 30px;
  height: 15px;
}

header .menulist {
  display: none;
}

@media (min-width: 992px) {
  header {
    position: static;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  header .logo {
    font-size: 3rem;
  }
  header .right-btn {
    display: none;
  }
  header .menulist {
    display: block;
    float: right;
  }
  header .menulist li {
    float: left;
    margin: 0 10px;
    padding-bottom: 30px;
    list-style: none;
  }
  header .menulist li:hover ul, header .menulist li:focus ul {
    display: block;
  }
  header .menulist li a {
    display: block;
    text-align: center;
    border-top: 6px solid #fff;
    padding-top: 20px;
    letter-spacing: .2rem;
    font-size: 1rem;
    font-weight: normal;
    color: #313131;
    line-height: 1.5em;
  }
  header .menulist li a:hover, header .menulist li a:focus {
    border-top: 6px solid #59b4ab;
  }
  header .menulist li ul {
    display: none;
    padding: 0;
    margin-top: 15px;
    position: fixed;
    z-index: 1;
  }
  header .menulist li ul li {
    float: none;
    text-align: center;
    border-top: 1px solid #fff;
    margin: 0;
    padding: 12px;
    background-color: #59b4ab;
  }
  header .menulist li ul li:hover, header .menulist li ul li:focus {
    background: #3c857d;
  }
  header .menulist li ul li a {
    min-width: 110px;
    border: 0px;
    padding-top: 0px;
    font-size: 0.8em;
    font-weight: normal;
    color: #fff;
    line-height: 1.5em;
  }
  header .menulist li ul li a:hover, header .menulist li ul li a:focus {
    border-top: 0;
  }
  header .menulist .active {
    border-top: 6px solid #59b4ab;
  }
}

/* --------------------------------
mobile Menu
-------------------------------- */
.icon_close {
  text-align: right;
  padding: 20px;
  color: #59b4ab;
  cursor: pointer;
  width: 100%;
  font-size: 1.5rem;
}

.menubox {
  background-color: #313131;
  height: 100vh;
  width: 250px;
  position: fixed;
  right: -260px;
  top: 0;
  z-index: 9999;
  -webkit-box-shadow: -2px 0 10px #666;
  box-shadow: -2px 0 10px #666;
}

@media (min-width: 992px) {
  .menubox {
    display: none;
  }
}

.right0 {
  right: 0;
  -webkit-transition: all 0.4s cubic-bezier(0, 0.795, 0, 1);
  -o-transition: all 0.4s cubic-bezier(0, 0.795, 0, 1);
  transition: all 0.4s cubic-bezier(0, 0.795, 0, 1);
}

.menu {
  height: 100vh;
}

/* --------------------------------
Go-to-top
-------------------------------- */
/* --------------------------------
Footer
-------------------------------- */
footer {
  padding: 15px;
  background-color: #59b4ab;
  position: relative;
}

footer .go-to-top {
  width: 40px;
  height: 40px;
  background-color: #59b4ab;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  position: absolute;
  top: -8vh;
  right: 5vw;
  -webkit-box-shadow: 0 3px 10px #eee;
  box-shadow: 0 3px 10px #eee;
  line-height: 40px;
  color: #fff;
}

footer .go-to-top svg {
  width: 100%;
  height: 15px;
  fill: currentColor;
}

footer .go-to-top:hover, footer .go-to-top:focus {
  background-color: #2ea7e0;
}

footer .logo {
  font-size: 2rem;
  color: #fff;
}

footer .col-12 {
  padding-top: 5px;
}

@media (max-width: 991px) {
  footer .col-12 {
    padding-top: 20px;
  }
}

footer .footer_logo {
  text-align: left;
  font-size: 1rem;
  letter-spacing: .03rem;
  color: #fff;
  margin-bottom: 0;
}

footer .footer_logo img {
  width: 70px;
  padding-right: 15px;
  vertical-align: text-bottom;
}

footer ul li {
  list-style: none;
  margin: 0;
  float: left;
  width: calc(100% / 2);
  padding: 0 15px 10px 0;
  letter-spacing: 0;
}

@media (max-width: 991px) {
  footer ul li {
    padding: 0 15px 0 0;
  }
}

footer ul li ul {
  display: none;
  float: none;
}

footer ul li ul li {
  color: #fff;
  float: none;
  width: 100%;
  padding: 0 0 0 20px;
  background: url(../svg/arrow-right3.svg) no-repeat left center;
  background-size: 15px;
}

footer ul li ul.sbmenu {
  display: block;
}

footer ul li a {
  color: #fff;
  font-size: .8rem;
  letter-spacing: 0;
}

footer ul li a:hover, footer ul li a:focus {
  color: #000;
}

@media (min-width: 579px) {
  footer ul li {
    width: calc(100% / 3);
  }
}

@media (min-width: 767px) {
  footer ul li {
    width: auto;
  }
}

footer [class^="icon-"] {
  color: #fff;
  font-size: 1.2rem;
}

@media (min-width: 767px) {
  footer .footer-icon {
    text-align: left;
  }
}

footer span.icon-bilibili_2 {
  font-size: 1.5rem;
}

/* --------------------------------------------------
5 - PAGES
-------------------------------------------------- */
.btn-facebook {
  position: relative;
}

.iconradio {
  position: absolute;
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
  width: 2rem;
  height: 2rem;
  color: #3766AB;
  line-height: 2rem;
  right: .6rem;
  top: 0.337rem;
}

.iconradio svg {
  fill: currentColor;
  width: 100%;
  height: 1.2rem;
  padding-top: 4%;
}

/* --------------------------------
Btn Groud
-------------------------------- */
.btn-groud {
  margin-bottom: 5vh;
  text-align: left;
}

@media (min-width: 992px) {
  .btn-groud {
    text-align: center;
  }
}

.btn-groud .btn,
.btn-groud [class^="btn-"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: calc(100% / 2 - 10px);
  font-size: 13px;
}

@media (min-width: 992px) {
  .btn-groud .btn,
  .btn-groud [class^="btn-"] {
    min-width: 140px;
    width: auto;
  }
}

.btn-groud .btn:first-child,
.btn-groud [class^="btn-"]:first-child {
  margin-left: 0;
}

.btn-groud .btn:hover, .btn-groud .btn:focus {
  background-color: #2ea7e0;
  border: 2px solid #2ea7e0;
}

@media (min-width: 992px) {
  .btn-groud .col-10 {
    text-align: center;
    max-width: 100%;
  }
}

/* --------------------------------
List-Group
-------------------------------- */
.list-group {
  margin-bottom: 5vh;
}

.list-group-item {
  background-color: transparent;
  border: 0px;
  padding-left: 0;
  padding-bottom: 0;
}

.list-group-item span {
  font-weight: 500;
  color: #000;
}

.list-group-item a {
  text-decoration: underline;
  color: #9B9B9B;
}

.list-group-item a:hover, .list-group-item a:focus {
  color: #2ea7e0;
}

/* --------------------------------
member_form
-------------------------------- */
.list-group-flush {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.order_from {
  font-size: .9rem;
  /*max-width: 360px;*/
  margin: 0 auto 1rem;
}

/*@media (min-width: 992px) {*/
/*  .order_from {*/
/*    width: 640px;*/
/*  }*/
/*}*/

.order_from .font-b {
  float: left;
  width: 30%;
  margin-bottom: 10px;
}

.order_from .col {
  padding-left: 0;
  padding-right: 0;
}

.order_from li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (min-width: 992px) {
  .member_form {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-bottom: 0;
    max-width: 100%;
  }
  .member_form li {
    float: left;
    min-width: calc(100% / 7);
    padding-bottom: 10px;
    word-wrap: break-word;
    padding: 0 10px 10px 0;
    font-size: .8rem;
  }
  .member_form li:nth-child(7n+4),
  .member_form li:nth-child(7n+5),
  .member_form li:nth-child(7n+6),
  .member_form li:nth-child(7n) {
    text-align: center;
  }
  .member_form li:first-child {
    white-space: nowrap;
  }
  .member_form .font-b {
    display: none;
    padding-bottom: 18px;
  }
}

@media (min-width: 992px) {
  .member_form.order_from li {
    display: block;
  }
  .member_form.order_from .font-b {
    float: none;
    width: 100%;
  }
}

@media (min-width: 992px) {
  .member_form:first-of-type .font-b {
    display: block;
  }
}

@media (min-width: 992px) {
  .max-100 .btn {
    width: auto;
  }
}

.checkout {
  min-height: 300px;
  background-image: url("../image/temp_img/checkoutbg.png");
  background-size: cover;
  background-position: top center;
  background-repeat: repeat-x;
  text-align: center;
  padding: 5vh 0;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
  .checkout {
    background-image: url("../image/temp_img/checkoutbg@2x.png");
  }
}

.checkout p {
  padding: 0 20px;
  max-width: 460px;
  display: inline-block;
}

.checkout_form {
  padding: 5vh 0;
  line-height: 1.5rem;
}

.checkout_form .row {
  padding-top: 3vh;
  border-top: 1px dashed #EFEFEF;
  margin-bottom: 3vh;
}

.checkout_form > .row:first-child {
  border: 0;
}

.price {
  font-size: 1.2rem;
  color: #EA3324;
  font-weight: 500;
}

.price[data-price]:not([data-price=""])::after {
  content: attr(data-price);
  padding-left: 5px;
  display: inline-block;
  text-decoration: none;
  font-size: 0.6em;
  font-weight: bold;
  color: #000;
  line-height: 1.5em;
}

.checkout_login {
  display: none;
}

.checkout_login a:hover, .checkout_login a:focus {
  font-weight: bold;
}

.checkout_login .btn {
  width: calc(100% / 2 - 5px);
  margin-right: 5px;
  float: left;
}

@media (max-width: 766px) {
  .checkout_login .btn {
    width: 100%;
  }
}

.checkout_join .btn {
  width: 100%;
  max-width: 350px;
  margin-right: 5px;
}

.checkout_join .btn:focus {
  border: 3px solid #3c857d;
}

.line_logn, .line_join {
  display: inline-block;
  border-bottom: 2px solid #000;
  cursor: pointer;
}

.line_logn:hover, .line_join:hover {
  color: #EA3324;
  border-color: #EA3324;
}

.alertbox span {
  background-color: #EFEFEF;
  color: #000;
  font-weight: bold;
  text-align: left;
  border-radius: 10px;
  display: inline-block;
  width: 100%;
  padding: 40px 20px;
}

.pt_15 {
  padding-top: 15px;
}

.hide {
  display: none;
}

.class_video {
  padding-left: 0;
  padding-right: 0;
}

.class_deatil {
  padding: 5vh 15px;
  background-image: url("../image/temp_img/class_detail_bg.png");
  background-size: cover;
  background-position: top center;
  background-repeat: repeat-x;
}

.class_deatil .w-100 {
  padding: 0 15px;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
  .class_deatil {
    background-image: url("../image/temp_img/class_detail_bg@2x.png");
  }
}

@media (min-width: 992px) {
  .class_deatil {
    padding: 5vh 2vh;
  }
  .class_deatil .w-100 {
    max-width: 560px;
    padding: 0;
  }
}

@media (min-width: 1440px) {
  .class_deatil {
    padding-top: 10vh;
  }
}

.class_deatil .col-4 {
  padding-left: 0;
  padding-right: 0;
  font-weight: normal;
  color: #313131;
  font-size: .8rem;
  letter-spacing: 0;
  line-height: 2.4rem;
}

.class_deatil .col-4 .icon_heart, .class_deatil .col-4 .icon_ytu, .class_deatil .col-4 .icon_fb {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  margin-top: 10px;
}

.class_deatil .col-4 .icon_heart span, .class_deatil .col-4 .icon_ytu span, .class_deatil .col-4 .icon_fb span {
  padding-left: 0;
  line-height: 50px;
  font-size: 1.2rem;
}

.class_deatil .col-4 .icon_heart ~ strong,
.class_deatil .col-4 .icon_ytu ~ strong,
.class_deatil .col-4 .icon_fb ~ strong {
  left: 60px;
  bottom: -7px;
}

.class_deatil .col-4 .icon_heart {
  display: inline-block;
  border: 1px solid #59b4ab;
}

.class_deatil .col-4 .icon_heart span {
  color: #59b4ab;
}

.class_deatil .col-4 .icon_fb {
  border: 1px solid #3766AB;
}

.class_deatil .col-4 .icon_fb span {
  color: #3766AB;
}

.class_deatil .col-4 .icon_fb:hover, .class_deatil .col-4 .icon_fb:focus {
  background: #3766AB;
}

.class_deatil .col-4 .icon_fb:hover span, .class_deatil .col-4 .icon_fb:focus span {
  color: #fff;
}

.class_deatil .col-4 .icon_ytu {
  border: 1px solid #EA3324;
}

.class_deatil .col-4 .icon_ytu span {
  color: #EA3324;
  padding-left: 0px;
}

.class_deatil .col-4 .icon_ytu:hover, .class_deatil .col-4 .icon_ytu:focus {
  background: #EA3324;
}

.class_deatil .col-4 .icon_ytu:hover span, .class_deatil .col-4 .icon_ytu:focus span {
  color: #fff;
}

.class_deatil .col-4 span {
  color: #fff;
  padding-left: 10px;
  font-size: .6rem;
  letter-spacing: 0;
}

.class_deatil .col-4 strong {
  color: #9B9B9B;
  font-size: .6rem;
  font-weight: normal;
  display: block;
  position: absolute;
}

.class_deatil .type_h4 {
  margin-bottom: 2vh;
}

.class_deatil .icon_email {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #000;
  margin-right: 10px;
}

.class_deatil .icon_email span {
  padding-left: 3px;
  line-height: 50px;
  font-size: 1.2rem;
  color: #000;
}

.class_deatil p {
  padding-top: 2rem;
  color: #313131;
}

.class_deatil .float-right {
  color: #59b4ab;
  display: none;
}

@media (min-width: 1300px) {
  .class_deatil .float-right {
    display: block;
  }
}

@media (min-width: 992px) and (max-width: 1100px) {
  .class_deatil p {
    font-size: .8rem;
    padding-top: 10px;
    margin-bottom: 0;
  }
}

@media (min-width: 0px) and (max-width: 600px) {
  .class_deatil .col-4 {
    font-size: .6rem;
    line-height: 1.4rem;
  }
  .class_deatil .col-4 .icon_heart, .class_deatil .col-4 .icon_ytu, .class_deatil .col-4 .icon_fb {
    width: 20px;
    height: 20px;
    margin-right: 0px;
    margin-top: 10px;
  }
  .class_deatil .col-4 .icon_heart span, .class_deatil .col-4 .icon_ytu span, .class_deatil .col-4 .icon_fb span {
    line-height: 20px;
    font-size: .6rem;
    vertical-align: text-bottom;
  }
  .class_deatil .col-4 .icon_ytu ~ strong,
  .class_deatil .col-4 .icon_fb ~ strong,
  .class_deatil .col-4 .icon_heart ~ strong {
    left: 22px;
  }
  .class_deatil .col-4 span {
    padding-left: 3px;
  }
  .class_deatil .icon_email {
    width: 20px;
    height: 20px;
  }
  .class_deatil .icon_email span {
    line-height: 20px;
    font-size: .6rem;
    vertical-align: text-bottom;
  }
}

@media (min-width: 0px) and (max-width: 480px) {
  .class_deatil .col-4 {
    width: 100%;
  }
}

.class_list {
  padding-top: 5vh;
  text-align: center;
}

.class_list .title {
  margin-bottom: 5vh;
}

.class_list .row {
  padding-bottom: 8vh;
}

@media (min-width: 992px) {
  .class_list {
    padding-top: 7vh;
  }
  .class_list .title {
    margin-bottom: 10vh;
  }
  .class_list .row {
    margin-bottom: 5vh;
  }
}

.class_list .row:nth-child(4n+1), .class_list .row:nth-child(4n+3) {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.class_list .row:nth-child(4n+1) .list_title, .class_list .row:nth-child(4n+3) .list_title {
  text-align: left;
}

.class_list .row:nth-child(4n+1) .list_title .type_h2, .class_list .row:nth-child(4n+3) .list_title .type_h2 {
  text-align: left;
}

.class_list .row:nth-child(4n+2)::before {
  content: "";
  position: absolute;
  width: 70vw;
  height: 50vw;
  right: 0;
  background-color: #59b4ab;
  opacity: .4;
}

.class_list .row:nth-child(4n+4)::before {
  content: "";
  position: absolute;
  width: 70vw;
  height: 50vw;
  left: 0;
  background-color: #2ea7e0;
  opacity: .4;
}

@media (min-width: 1440px) {
  .class_list .row:nth-child(4n+2)::before,
  .class_list .row:nth-child(4n+4)::before {
    width: 65vw;
    height: 620px;
  }
  .class_list .row:nth-child(4n+4)::before {
    height: 560px;
  }
}

@media (max-width: 1178px) {
  .class_list .row:nth-child(4n+2) {
    position: relative;
  }
  .class_list .row:nth-child(4n+2)::before {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .class_list .row:nth-child(4n+4) {
    position: relative;
  }
  .class_list .row:nth-child(4n+4)::before {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.class_list .list_title {
  text-align: right;
  padding-top: 50px;
}

.class_list .list_title span {
  display: inline-block;
  font-size: 3rem;
  font-weight: 500;
  color: #000;
  line-height: 1.5em;
  line-height: 2.8rem;
  font-family: "Ubuntu Condensed", "Lato" , "Noto Sans Kannada", "微軟正黑體", "Open Sans", Helvetica, Arial, sans-serif;
  border-bottom: 3px solid #000;
}

.class_list .list_title .type_h2 {
  text-align: right;
  padding-top: 2vh;
}

.class_list .class_img img {
  width: 100%;
}

@media (min-width: 992px) {
  .class_list .class_img {
    margin-top: 50px;
  }
}

.class_list .class_word {
  padding-right: 10vw;
  padding-left: 10vw;
}

.class_list .list_ps p {
  color: #3766AB;
}

@media (min-width: 767px) {
  .class_list .class_word {
    text-align: left;
    padding-right: 3vw;
    padding-left: 3vw;
  }
  .class_list .class_img {
    margin-top: 180px;
  }
  .class_list .list-p {
    margin-top: 3vh;
  }
  .class_list .list-p p {
    font-size: 1rem;
  }
}

.class_list .btn:hover, .class_list .btn:focus {
  border: 2px solid #2ea7e0;
  background: #2ea7e0;
  color: #fff;
}

/* --------------------------------
Product-List
-------------------------------- */
main.prod_list {
  padding-bottom: 0;
}

@media (min-width: 767px) {
  .prod_list .class_list .class_img {
    margin-top: 100px;
  }
  .prod_list .class_list .class_img img {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .prod_list .class_list {
    padding-top: 8vh;
  }
  .prod_list .class_list .title {
    margin-bottom: 0vh;
  }
  .prod_list .class_list .class_img img {
    width: 76%;
  }
}

.prod_list .class_list .list_title {
  padding-top: 30px;
}

.prod_list .class_list .list_title .type_h2 {
  text-align: left;
}

.prod_list .class_list .list-p {
  text-align: left;
  margin-top: 1vh;
  font-size: 0.9rem;
  font-weight: normal;
  color: #9B9B9B;
  line-height: 1.5em;
}

.prod_list .class_list .list-p p {
  margin-bottom: 5px;
}

.prod_list .class_list a {
  display: inline-block;
  text-align: center;
  width: calc(100% / 2 - 10px);
}

.prod_list .class_list .row:nth-child(4n+2)::before {
  width: 100%;
  height: 550px;
}

.prod_list .class_list .row:nth-child(4n+4)::before {
  width: 100%;
  height: 570px;
}

@media (min-width: 1440px) {
  .prod_list .class_list .row:nth-child(4n+2)::before,
  .prod_list .class_list .row:nth-child(4n+4)::before {
    margin-top: 4rem;
    width: 90vw;
    height: 450px;
  }
}

@media (max-width: 1178px) {
  .prod_list .class_list .row:nth-child(4n+2)::before {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .prod_list .class_list .row:nth-child(4n+4)::before {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.prod_list .list_click {
  font-size: 0.9em;
  font-weight: normal;
  color: #000;
  line-height: 1.5em;
  text-align: left;
}

.prod_list .list_click[data-click]:not([data-click=""])::after {
  content: attr(data-click);
  padding-left: 5px;
  display: inline-block;
  text-decoration: none;
  font-size: 0.7em;
  font-weight: normal;
  color: #9B9B9B;
  line-height: 1.5em;
}

.prod_list .price {
  text-align: left;
  margin: 2vh 0;
  font-size: 1.3rem;
  font-weight: bold;
  color: #EA3324;
  line-height: 1.5em;
  line-height: 1.2rem;
}

@media (min-width: 992px) {
  .prod_list .price {
    margin: 20px 0;
  }
}

.prod_list .price[data-pricent]:not([data-pricent=""])::before {
  content: attr(data-pricent);
  padding-right: 5px;
  display: inline-block;
  text-decoration: none;
  font-size: 1em;
  font-weight: normal;
  color: #4A4A4A;
  line-height: 1.5em;
}

.prod_list .price[data-pricetag]:not([data-pricetag=""])::after {
  content: attr(data-pricetag);
  padding-left: 5px;
  display: inline-block;
  text-decoration: none;
  font-size: 1em;
  font-weight: normal;
  color: #4A4A4A;
  line-height: 1.5em;
}

/* --------------------------------
訂閱流程
-------------------------------- */
.sop {
  padding-top: 5vh;
}

.sop .sop_item {
  padding-bottom: 20px;
  position: relative;
  margin-bottom: 40px;
}

.sop .sop_item::before {
  content: "";
  position: absolute;
  right: calc(50% - 15px);
  width: 30px;
  height: 100%;
  background: url(../svg/arrow-bottom4.svg) no-repeat bottom center;
  background-size: 30px;
}

@media (min-width: 767px) {
  .sop .sop_item::before {
    width: 30px;
    right: 0;
    background: url(../svg/arrow-right4.svg) no-repeat right;
    background-position: 0 30%;
  }
}

@media (min-width: 767px) {
  .sop .sop_item:nth-child(3)::before {
    bottom: -30px;
    right: calc(50% - 18px);
    background: url(../svg/arrow-bottom4.svg) no-repeat bottom center;
  }
}

.sop .sop_item:nth-child(4) {
  margin: 0;
  padding: 0;
}

.sop .sop_item:nth-child(4)::before {
  background: transparent;
}

.sop .sop_box {
  padding: 20px 0;
}

.sop .sop_box p {
  text-align: center;
}

.sop .sop-icom {
  display: inline-block;
  margin-bottom: 40px;
  width: 156px;
  height: 156px;
  border-radius: calc(50% - 10px) 50%;
  border: 3px solid #59b4ab;
  border-radius: 50%;
  position: relative;
}

.sop .sop-icom::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: calc(50% - 10px);
  border-color: #59b4ab transparent transparent transparent;
  border-style: solid solid solid solid;
  border-width: 20px 10px 20px 10px;
  height: 0px;
  width: 0px;
}

.sop .sop-icom svg {
  width: 60px;
}

.sop .step_red .sop_item::before {
  background: transparent;
}

.sop .step_red .sop-icom {
  border: 3px solid #2ea7e0;
  color: #2ea7e0;
  fill: currentcolor;
}

.sop .step_red .sop-icom::after {
  border-color: #2ea7e0 transparent transparent transparent;
}

@media (min-width: 992px) {
  padding-top: 10vh;
}

.index {
  text-align: center;
}

.index .type_h2, .index p {
  text-align: center;
}

.index .type_h2 {
  font-size: 1.5rem;
  margin-top: 50px;
}

.index p {
  font-size: 1rem;
  font-weight: normal;
  color: #9B9B9B;
  line-height: 1.5em;
  letter-spacing: .1rem;
}

@media (max-width: 991px) {
  .index p {
    letter-spacing: 0;
    font-size: .7rem;
  }
}

main.index {
  border-top: 0;
}

/* --------------------------------
  About
-------------------------------- */
.about {
  background-image: url("../image/temp_img/aboutbg.png");
  background-size: cover;
  background-position: top center;
  background-repeat: repeat-x;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
  .about {
    background-image: url("../image/temp_img/aboutbg@2x.png");
  }
}

.about .sp-button {
  background-color: #fff;
}

.about .sp-selected-button {
  background-color: #2ea7e0;
}

.about .d-flex {
  padding-bottom: 2rem;
}

.about .class_deatil {
  background: transparent;
  padding-top: 0;
  padding-bottom: 0;
}

.about .class_deatil p {
  padding-top: 0;
}

@media (min-width: 992px) {
  .about {
    padding: 10vh 0 0;
  }
}

/* --------------------------------
  About 合作對象
-------------------------------- */
.about_video {
  padding: 5vh 0;
}

.about_video .title {
  margin-bottom: 5vh;
}

.about_video .video_list {
  padding: 0 10%;
  clear: both;
  overflow: hidden;
}

.about_video .video_list li {
  float: left;
  width: 100%;
  margin: 0 10px;
  padding-bottom: 3vh;
}

.about_video .video_list li .type_p {
  text-align: left;
  padding-top: .8rem;
  font-size: 1rem;
  height: 30px;
}

.about_video .video_list li:first-child {
  padding-left: 0;
}

.about_video .video_list li:last-child {
  padding-right: 0;
}

@media (min-width: 767px) {
  .about_video .video_list li {
    width: calc(100% / 2 - 20px);
  }
  .about_video .video_list li .type_p {
    height: 60px;
  }
}

@media (min-width: 992px) {
  .about_video {
    padding: 10vh 0;
  }
  .about_video .video_list {
    padding: 0;
  }
  .about_video .video_list li {
    width: calc(100% / 3 - 20px);
  }
}

/* --------------------------------------------------
尚無資訊提示字
-------------------------------------------------- */
.no_information {
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-family: "Cormorant Garamond","Lato", "Noto Sans Kannada", "微軟正黑體", "Open Sans", Helvetica, Arial, sans-serif;
  letter-spacing: .3rem;
}

/* --------------------------------------------------
error
-------------------------------------------------- */
.error {
  padding: 10vh 30px 0;
}

@media (min-width: 992px) {
  .error {
    padding: 10vh 0;
  }
}

.error-wrapper {
  max-width: 470px;
  margin: 0 auto;
}

.error-header {
  text-align: right;
}

.error-header .title {
  font-size: 10rem;
  border-bottom: 0;
  font-family: "Cormorant Garamond","Lato", "Noto Sans Kannada", "微軟正黑體", "Open Sans", Helvetica, Arial, sans-serif;
  letter-spacing: 2rem;
  line-height: 7rem;
}

@media (min-width: 767px) {
  .error-header .title {
    font-size: 13rem;
  }
}

@media (min-width: 992px) {
  .error-header .title {
    font-size: 16rem;
  }
}

.error-header .subtitle {
  font-size: 2.5rem;
  font-weight: bold;
  color: #9B9B9B;
  line-height: 1.5em;
  margin-top: 4rem;
  text-align: right;
}

.content {
  margin-top: 20px;
  text-align: right;
}

.content p {
  font-size: 1rem;
  font-weight: normal;
  color: #9B9B9B;
  line-height: 1.5em;
  text-align: right;
}

.content .caption {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: normal;
  color: #000;
  line-height: 1.5em;
}

.error_word {
  max-width: 470px;
  text-align: center;
  margin: 3rem auto 0;
}

@media (min-width: 767px) {
  .error_word {
    padding-left: 30px;
  }
}

@media (min-width: 992px) {
  .error_word {
    text-align: left;
    margin: 0;
  }
}

.error_word a {
  display: block;
  text-align: left;
}

.error_word img {
  width: 100%;
  max-width: 460px;
}

.error_word .list_title {
  margin-top: 20px;
}

/* --------------------------------------------------
account
-------------------------------------------------- */
.error.account {
  position: relative;
  margin: 0 auto;
  padding: 40vh 0;
  background: url(../image/temp_img/account_img.jpg) no-repeat right center;
  background-size: 100%;
}

@media (min-width: 767px) {
  .error.account {
    background-size: 75%;
  }
}

@media (min-width: 992px) {
  .error.account {
    background-size: 68%;
  }
}

.error.account .error-header .title {
  text-align: right;
  font-size: 3rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  line-height: 3rem;
}

@media (min-width: 767px) {
  .error.account .error-header .title {
    font-size: 6rem;
    line-height: 5rem;
  }
}

.error.account .error-header .subtitle {
  font-size: 2.5rem;
  font-weight: bold;
  color: #9B9B9B;
  line-height: 1.5em;
  margin-top: 4rem;
  text-align: right;
}

.error.account .content .caption {
  text-align: right;
  margin-top: 0;
  font-size: 1rem;
  font-weight: normal;
  color: #000;
  line-height: 1.5em;
}

.error.account .error-wrapper {
  max-width: 620px;
  position: absolute;
  left: 10vw;
  top: -8vh;
  text-shadow: 0 1px 1px #76d0ce;
}

@media (min-width: 992px) {
  .error.account .error-wrapper {
    left: 0vw;
  }
}

.error.noaccess .error-wrapper {
  max-width: 700px;
}

.error.noaccess .error-header .title {
  text-align: right;
  font-size: 5rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  line-height: 5rem;
  margin-bottom: 0;
}

@media (min-width: 767px) {
  .error.noaccess .error-header .title {
    font-size: 10rem;
    line-height: 12rem;
    margin-top: 5vh;
  }
}

@media (min-width: 992px) {
  .error.noaccess .error-header .title {
    font-size: 12rem;
    line-height: 15rem;
  }
}

.vip_head {
  margin: 60px 0 0;
}

.vip_head .title {
  margin-bottom: 30px;
}

.vip_body .btn-groud {
  padding: 20px 30px 10px;
  border-top: 1px solid #EFEFEF;
  margin-bottom: 0;
}

@media (min-width: 767px) {
  .vip_body .btn-groud {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
  }
}

@media (min-width: 579px) {
  .vip_body .btn-groud .btn,
  .vip_body .btn-groud [class="btn-"] {
    width: auto;
    min-width: 140px;
  }
}

.vip_body .html_info {
  padding: 40px;
  border-top: 1px solid #EFEFEF;
}

@media (min-width: 767px) {
  .vip_body .html_info {
    padding: 70px;
  }
}

.vip_head .type_h5,
.vip_body .type_h5 {
  margin-right: auto;
  margin-left: auto;
  color: #59b4ab;
  padding: 0;
}

@media (min-width: 767px) {
  .vip_head {
    margin: 20vh 0 0;
  }
  .vip_head .title {
    margin-bottom: 50px;
  }
}

@media (min-width: 992px) {
  .vip_head {
    margin: 13vh 0 0;
  }
  .vip_head .title {
    margin-bottom: 80px;
  }
  .vip_body {
    -webkit-box-shadow: 0 0 15px #EFEFEF;
    box-shadow: 0 0 15px #EFEFEF;
  }
  .vip_body .btn-groud {
    padding: 30px 15px 20px;
  }
}

@media (min-width: 767px) {
  .no-padding {
    padding-left: 0;
    padding-right: 0;
  }
}

.html_info {
  font-size: 13px;
  color: #000;
  font-weight: normal;
}

.html_info ul > li,
.html_info ol > li,
.html_info p {
  text-align: left;
  padding: 10px 0;
  font-size: 13px;
}

.html_info ul > li {
  list-style: decimal;
}

.html_info ol > li {
  list-style: decimal-leading-zero;
  color: #4A4A4A;
}

.html_info a {
  display: inline;
  border-bottom: 1px solid #3766AB;
  color: #3766AB;
}

.vip_ps .type_h5 {
  margin-bottom: 10px;
}

@media (min-width: 767px) {
  .vip_ps .type_h5 {
    font-size: 1.2rem;
    text-align: center;
  }
}

.vip_ps ul {
  padding-bottom: 40px;
}

.vip_ps ul li {
  text-align: left;
  padding: 10px 5px 10px 20px;
  margin-left: 10px;
  list-style: none;
  position: relative;
  font-size: 13px;
  font-weight: bold;
  color: #313131;
  line-height: 1.5em;
}

.vip_ps ul li:before {
  content: "*";
  color: #EA3324;
  font-size: 20px;
  position: absolute;
  padding-right: 10px;
  top: 14px;
  left: 0;
}

@media (min-width: 992px) {
  .vip_ps ul li {
    padding-top: 10px;
  }
}

.post-user {
  background-color: #EDF9FF;
}

@media (min-width: 767px) {
  .post-user {
    margin-bottom: 50px;
    -webkit-box-shadow: 0 10px 20px #EFEFEF;
    box-shadow: 0 10px 20px #EFEFEF;
  }
}

.spl-select {
  color: #4A4A4A;
}

.spl-select .btn {
  border: 1px solid #EFEFEF;
  padding: 0.675rem 1.2rem;
  background-color: #fff;
  color: #4A4A4A;
}

.spl-select .btn:hover {
  color: #4A4A4A;
}

.spl-select .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 100%;
  max-width: 100%;
}

/* --------------------------------
	講座樣式
-------------------------------- */
.seminar-img-box {
  position: relative;
}

.seminar-img-box .seminar-img {
  width: 100%;
  display: block;
}

.seminar-img-overlay {
  position: absolute;
  top: 0;
  background-color: #1d243a;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  opacity: 0.8;
}

@media (min-width: 992px) {
  .seminar-img-overlay {
    padding: 15px;
  }
}

.seminar-img-overlay .seminar-year {
  font-size: .6rem;
  position: relative;
  padding-left: 35px;
  padding-top: 20px;
  vertical-align: bottom;
  letter-spacing: 0;
}

.seminar-img-overlay .seminar-year:before {
  content: attr(data-title);
  position: absolute;
  top: 0;
  left: 0;
  color: #59b4ab;
  font-size: 14px;
  width: 30px;
  line-height: 18px;
  font-weight: 500;
}

@media (min-width: 992px) {
  .seminar-img-overlay .seminar-year {
    padding-left: 46px;
    padding-top: 30px;
    font-size: 12px;
    letter-spacing: .1rem;
  }
  .seminar-img-overlay .seminar-year:before {
    font-size: 18px;
    line-height: 22px;
    width: 42px;
    letter-spacing: .1rem;
  }
}

.seminar-img-overlay .seminar-day {
  font-size: 24px;
}

@media (min-width: 992px) {
  .seminar-img-overlay .seminar-day {
    font-size: 28px;
    line-height: 28px;
  }
}

.seminar-info {
  margin: 30px 0;
  text-align: left;
  position: relative;
}

.seminar-info .type_h5 {
  color: #59b4ab;
  margin-bottom: 0px;
}

.seminar-info .type_h3 {
  text-align: left;
  margin-bottom: 20px;
}

.seminar-info .seminar-word {
  font-size: 15px;
  font-weight: normal;
  color: #4A4A4A;
  line-height: 1.5em;
  text-align: left;
  padding-bottom: 30px;
}

.seminar-info .seminar-word p {
  margin-bottom: 10px;
}

@media (min-width: 992px) {
  .seminar-info {
    padding: 50px 100px 0;
  }
}

@media (min-width: 767px) {
  .seminar-info {
    padding: 0px 50px 0;
  }
}

.seminar {
  padding: 0 30px 0;
}

.seminar .seminar-img-overlay {
  top: -30px;
}

@media (min-width: 767px) {
  .seminar .seminar-img-overlay {
    left: 0px;
  }
}

@media (min-width: 992px) {
  .seminar .seminar-info {
    padding: 0px 80px 0;
  }
}

.seminar .seminar-info .type_h5 {
  margin-bottom: 30px;
}

.seminar .seminar-info .type_h3 {
  margin-bottom: 0px;
}

button.btn-googlemap {
  border: 1px solid #ddd;
  border-radius: 30px;
  width: 50px;
  height: 50px;
  text-align: center;
  display: block;
  position: relative;
}

button.btn-googlemap:hover, button.btn-googlemap:focus {
  background-color: #EFEFEF;
  outline: 0;
}

button.btn-googlemap img {
  width: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.back {
  padding-top: 30px;
  float: left;
  width: 100%;
  text-align: right;
}

@media (min-width: 767px) {
  .back {
    border-top: 1px solid #ddd;
  }
}

.btn-map {
  overflow: hidden;
  clear: both;
}

@media (min-width: 767px) {
  .btn-map {
    margin-bottom: 30px;
  }
}

.btn-map p {
  width: 50px;
  font-size: 0.5rem;
  font-weight: normal;
  color: #9B9B9B;
  line-height: 1.5em;
  letter-spacing: 0;
  line-height: 1.5rem;
}

.modal-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #000;
  line-height: 1.5em;
}

.modal-body {
  width: 100%;
  overflow: hidden;
}

.modal-body iframe {
  width: 100%;
}

/* --------------------------------
	講座樣式 清單
-------------------------------- */
.seminar-list {
  padding: 0 30px 0;
}

@media (min-width: 992px) {
  .seminar-list {
    padding: 0 30px;
  }
}

.seminar-list .seminar-item:nth-child(2n) .seminar-img-box,
.seminar-list .seminar-item:nth-child(2n) .seminar-info {
  float: right;
}

.seminar-list .seminar-item:nth-child(2n) .seminar-img-overlay {
  background-color: #59b4ab;
}

@media (min-width: 767px) {
  .seminar-list .seminar-item:nth-child(2n) .seminar-img-overlay {
    right: 0;
  }
}

.seminar-list .seminar-item:nth-child(2n) .seminar-year:before {
  color: #1d243a;
}

.seminar-item,
.seminar {
  display: block;
  overflow: hidden;
  margin: 0 0 30px;
}

@media (min-width: 767px) {
  .seminar-item,
  .seminar {
    margin: 0 0 30px;
  }
}

@media (min-width: 992px) {
  .seminar-item,
  .seminar {
    margin: 0 0 80px;
  }
}

.seminar-item .seminar-img-box,
.seminar-item .seminar-info,
.seminar .seminar-img-box,
.seminar .seminar-info {
  width: 100%;
}

@media (min-width: 767px) {
  .seminar-item .seminar-img-box,
  .seminar-item .seminar-info,
  .seminar .seminar-img-box,
  .seminar .seminar-info {
    width: 50%;
    float: left;
  }
}

.seminar-item .seminar-img-box .btn,
.seminar-item .seminar-info .btn,
.seminar .seminar-img-box .btn,
.seminar .seminar-info .btn {
  font-size: 13px;
  font-weight: 600;
}

.no-shadow {
  -webkit-box-shadow: 0 0 0 #EFEFEF;
  box-shadow: 0 0 0 #EFEFEF;
}

.privacy,
.privacy > li{
  list-style: decimal;
  color: #333333;
  margin-top: 10px;
  font-weight: normal;
  font-size: 0.9rem;
}

.privacy-in,
.privacy-in > li{
  list-style: circle;
  color: #333333;
  margin-top: 10px;
  margin-left: 15px;
}

.privacy-in-box {
  background-color: #efefef;
  border-radius: 10px;
  padding: 2rem;
  margin-top: 1.5rem;
}

.privacy >span {
  font-size: 0.7rem;
  color: #59b4ab;
  display: block;
}

/*@import "pages/article";*/
/*@import "pages/about";*/
/*@import "pages/contact";*/
/*@import "pages/pages";*/