@charset "UTF-8";
/* CSS Document */
/*div{ border: 1px solid red; }*/
/* Menu fonts */
@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
body {
  padding-right: 0 !important;
}

* {
  /*font-size: 15px;*/
}

ul,
ol,
p {
  margin: 0;
  padding: 0;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: inherit;
}

/* zone add css start */
.courseTitleDifference {
  mix-blend-mode: exclusion;
}

.cartboxList {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 23px;
  top: 18px;
  z-index: 9999;
}

.cartboxList .loginbox {
  background: #fff;
  padding: 2px 10px;
  border-radius: 5px;
  margin-right: 10px;
  border: 1px solid #e3e2e2;
}

.loginbox .guestbtn {
  color: #72c02c;
}

.cartboxList .cartnumberbox {
  margin-left: 0px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #ccc;
  width: 25px;
  height: 25px;
  text-align: center;
}

.cart_total_money {
  text-align: right;
  font-size: 20px;
}

.person_check {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cartboxListFixed {
  position: fixed !important;
}

.activebutton a {
  color: #ff8e8e;
  font-weight: bold;
}

.swal2-container {
  z-index: 9999999 !important;
}

.classselectdiv {
  cursor: pointer;
}

.aaa {
  font-weight: bold;
  font-weight: normal;
}

.divcartb {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.divcartb i {
  margin-left: 3px;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.divcartb .cartnumberbox {
  position: absolute;
  top: -10px;
  right: -15px;
  background: #ff4444;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
}

.divcart {
  mix-blend-mode: difference;
  /*position: absolute; margin-left: 10px;*/
  width: 20px;
}

.divcart i {
  /*position: absolute;*/
  margin-left: 3px;
  /*color: #fff; font-size: 15px;*/
  zoom: 1.2;
  color: #8b8b8b;
}

.loveboxDisplay {
  display: none;
}

.loveboxInput {
  width: 100%;
  border: 3px solid #9f7a58;
  border-radius: 8px;
  padding: 1px 2px;
}

.loveboxInput span {
  margin-top: 5px;
}

.loveboxInput input {
  border: none;
  font-size: 14px;
}

/* zone add css end*/
.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

.bg-cover.cover-rectangle {
  padding-bottom: 64%;
}

.bg-cover.cover-square {
  padding-bottom: 100%;
}

.x-bg {
  display: block;
  background-color: #003580;
}

.x-bg-light,
.x-bg-heavy {
  position: relative;
}

.x-bg-light > *,
.x-bg-heavy > * {
  position: relative;
  z-index: 3;
}

.x-bg-light::before,
.x-bg-heavy::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.x-bg-light::before {
  background-color: rgba(255, 255, 255, 0.2);
}

.x-bg-heavy::before {
  background-color: rgba(0, 0, 0, 0.2);
}

/*----------------------
--- Header Nav Setting
----------------------*/
#header_wrap .content {
  background: url(../../images/bg/header_bg_v1.jpg) center top no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 30px;
  min-height: 13.5vw;
}

#header_wrap .content #Toggle {
  display: none;
}

#header_wrap .content .brand_logo {
  flex: 0 0 100%;
  text-align: center;
}

#header_wrap .content .brand_logo a {
  display: inline-block;
  margin-bottom: 20px;
}

#header_wrap .content .brand_logo a img {
  max-width: 100%;
}

#header_wrap .content .nav {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 1000px;
  margin-top: 20px;
}

#header_wrap .content .nav ul.navbar {
  list-style: none;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

#header_wrap .content .nav ul.navbar li.nav-item a.nav-link {
  font-size: 18px;
  /*font-weight: 600;*/
}

#header_wrap .content .nav ul.navbar li.nav-item a.nav-link:first-child {
  padding-left: 0px;
}

#header_wrap .content .nav ul.navbar li.nav-item a.nav-link:last-child {
  padding-right: 0px;
}

/* #Nav-menu .content #Toggle span {
    display: block;
    width: 30px;
    border-top: 1px solid #000;
    position: relative;
    height: 20px;
}

#Nav-menu .content #Toggle span:before,
#Nav-menu .content #Toggle span:after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    border-top: 1px solid #000;
    width: 100%;
}

#Nav-menu .content #Toggle span,
#Nav-menu .content #Toggle span:before,
#Nav-menu .content #Toggle span:after {
    border-color: #999;
    border-width: 2px;
}

#Nav-menu .content #Toggle span:before {
    top: calc( 50% - 2px);
}

#Nav-menu .content #Toggle span:after {
    bottom: 0px;
} */
#Nav-menu #Toggle {
  width: 40px;
  height: 40px;
  padding: 3px;
}

#Nav-menu #Toggle span.btn_span_a {
  position: absolute;
  width: 70%;
  height: 2px;
  /*border-top: 2px solid #000;*/
  margin-top: -15px;
  transition: ease-in 0.2s;
}

#Nav-menu #Toggle span.btn_span_b {
  position: absolute;
  width: 70%;
  height: 2px;
  /*border-top: 2px solid #000;*/
  margin-top: 0px;
  transition: ease-in 0.2s;
  font-size: 13px;
  margin-top:-15px;
  color: #fff;
  font-weight:800;
}

#Nav-menu #Toggle span.btn_span_c {
  position: absolute;
  width: 70%;
  height: 2px;
  /*border-top: 2px solid #000;*/
  margin-top: 15px;
  transition: ease-in 0.2s;
}

#Nav-menu.show #Toggle span.btn_span_a {
  position: absolute;
  width: 70%;
  height: 2px;
  border-top: 2px solid rgb(49, 49, 49);
  margin-top: 0px;
  transform: rotate(45deg);
}

#Nav-menu.show #Toggle span.btn_span_b {
  position: absolute;
  width: 70%;
  height: 2px;
  border-top: 2px solid rgb(49, 49, 49);
  margin-top: 0px;
  opacity: 0;
}

#Nav-menu.show #Toggle span.btn_span_c {
  position: absolute;
  width: 70%;
  height: 2px;
  border-top: 2px solid rgb(49, 49, 49);
  margin-top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 991px) {
  #Nav-menu {
    position: absolute;
    width: 100%;
    left: calc(-40px - 100vw);
    top: 0px;
    transition: all 0.3s;
  }
  #Nav-menu:after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0px;
    left: 0px;
    z-index: 5;
  }
  #Nav-menu .content {
    background: url(../../images/bg/header_bg_v1_sp.jpg) center top no-repeat;
    background-size: contain;
    background-color: #fff;
    margin: 10px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: calc(100vh - 40px);
    align-items: center;
    padding-bottom: 40px;
    flex-wrap: nowrap;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    z-index: 10;
    position: relative;
  }
  #Nav-menu .content .brand_logo {
    flex: inherit;
    max-width: 180px;
    margin-bottom: 0px;
    margin-top: 50px;
  }
  #Nav-menu .content .brand_logo a {
    margin-bottom: 0px;
  }
  #Nav-menu .content #Toggle {
    position: fixed;
    display: flex;
    top: 12px;
    left: 10px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: rgba(124, 177, 0, 0.8);
    border-radius: 12px;
    border: 1px solid #eee;
  }
  #Nav-menu .content .nav {
    flex: inherit;
  }
  #Nav-menu .content .nav ul.navbar {
    flex-direction: column;
    width: inherit;
    justify-content: flex-start;
  }
  /**/
  #Nav-menu.show {
    position: fixed;
    left: 0px;
    z-index: 1001;
  }
  #Nav-menu.show .content #Toggle {
    top: 12px;
    left: 10px;
  }
}
/*----------------------
--- kv banner setting
----------------------*/
.kv-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
  /*margin-top: -40px;*/
  /*z-index: -1;*/
}

.kv-banner:before,
.kv-banner:after {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 35px;
  width: 100%;
  background-image: url(../../images/bg/kv_boder.png);
  background-repeat: no-repeat;
  background-position: center -5px;
  background-size: cover;
  z-index: 1;
}

.kv-banner:before {
  top: 0px;
}

.kv-banner:after {
  bottom: -1px;
  transform: scaleY(-1);
}

.kv-banner.kv-bg-v1 {
  background-image: url(../../images/bg/kv_bg_v1.jpg);
}

.kv-banner .content {
  text-align: center;
  color: #fff;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

.kv-banner .content h4 {
  font-size: 30px;
  font-weight: 600;
}

.kv-banner .content p {
  font-size: 16px;
  margin-bottom: 30px;
}

.kv-banner .content a {
  font-size: 20px;
  color: #333;
  display: inline-block;
  padding: 10px 15px;
  min-width: 200px;
  background-color: #fff;
  border-radius: 8px;
  border: 2px solid #e0af66;
  text-shadow: none;
}

@media (max-width: 991px) {
  .kv-banner:before,
  .kv-banner:after {
    display: none;
  }
}
/*----------------------
--- Home layout
----------------------*/
#Welcom {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../../images/ribbons_01.png), url(../../images/ribbons_02.png);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top right;
  background-size: 20vw;
}

.welcom_wrap {
  width: 100%;
  background-image: url(../../images/welcom_bg_center.png), url(../../images/welcom_bg_center_bg.png);
  background-size: 15vw, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center 220px, center;
  min-height: 35.6vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.welcom_wrap .ind_group {
  display: flex;
  justify-content: space-between;
  max-width: 960px;
  width: 100%;
}

.welcom_wrap .ind_group .item .cover a {
  display: block;
  max-width: 360px;
  border-radius: 100%;
  overflow: hidden;
  border: 2px solid #ffe0d4;
}

.welcom_wrap .ind_group .item .content {
  text-align: center;
}

.welcom_wrap .ind_group .item .content h1 a {
  font-size: 2.4rem;
  color: #9c0550;
}

.welcom_wrap .ind_group .item .content p {
  font-size: 1rem;
  color: #999;
}

@media (max-width: 991px) {
  .welcom_wrap .ind_group {
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  #Welcom {
    background-image: url(../../images/bg/header_bg_v1_sp.jpg);
    background-size: contain;
  }
  .welcom_wrap {
    background-position: center calc(100% - 20px), bottom center;
    height: 100%;
    background-size: 20vw, contain;
    align-items: center;
  }
  .welcom_wrap .ind_group {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 50px;
    height: 80vh;
  }
  .welcom_wrap .ind_group .item {
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 20px 0;
  }
  .welcom_wrap .ind_group .item .cover a {
    /* border-radius:0; */
    max-width: 270px;
  }
  .welcom_wrap .ind_group .item .content {
    z-index: 5;
    padding: 10px;
    margin-top: -50px;
  }
  .welcom_wrap .ind_group .item .content h1 a {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
    background-color: #f32882;
    padding: 6px 20px;
    border-radius: 16px;
    color: #fff;
  }
  .welcom_wrap .ind_group .item .content p {
    font-size: 14px;
    display: none;
  }
}
/*----------------------
--- Course listing
----------------------*/
.course_nav {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 25px;
  display: flex;
}

.course_nav .search {
  flex: 0 0 120px;
  text-align: center;
  padding-left: 20px;
}

.course_nav .search a {
  display: block;
  background-color: #b3cd54;
  color: #fff;
  padding: 4px;
  font-size: 20px;
  border-radius: 8px;
}

.course_nav .searchinput {
  flex: 0 0 250px;
  text-align: center;
  padding-left: 20px;
}

.course_nav .searchinput a {
  display: block;
  background-color: #b3cd54;
  color: #fff;
  padding: 4px;
  font-size: 20px;
  border-radius: 8px;
}

.searchinput label {
  width: 100%;
  position: relative;
}

.searchinput .btn {
  position: absolute;
  right: 2px;
  top: 3px;
  color: #9f7a58;
}

.course_nav .guest {
  flex: 0 0 160px;
  text-align: center;
  padding-left: 20px;
}

.course_nav .guest a {
  display: block;
  background-color: #b3cd54;
  color: #fff;
  padding: 4px;
  font-size: 20px;
  border-radius: 8px;
}

.course_nav .nav_filter {
  display: flex;
  flex: 1 1 100%;
  justify-content: space-between;
}

.course_nav .nav_filter .nav_item {
  flex: 0 1 calc(33% - 10px);
}

@media (min-width: 768px) {
  .course_nav .nav_filter .lovebox {
    /*flex: 0 1 calc( 25% - 10px)!important;*/
  }
}
.nav_select {
  width: 100%;
  padding: 5px 10px;
  color: #666;
  border: 3px solid #9f7a58;
  border-radius: 8px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  position: relative;
  background-image: url(../../images/icon/nav_arrow.jpg);
  background-size: 27px 27px;
  background-repeat: no-repeat;
  background-position: calc(100% - 2px) center;
}

.nav_select:focus {
  outline: none;
}

.nav_select_for_input {
  width: 100%;
  padding: 5px 10px;
  color: #666;
  border: 3px solid #9f7a58;
  border-radius: 8px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  position: relative;
  background-size: 27px 27px;
  background-repeat: no-repeat;
  background-position: calc(100% - 2px) center;
  position: relative;
}

.nav_select_for_input::after {
  /*content: url('assets/img/closeinput.svg');*/
  position: absolute;
}

/*listing*/
#Courses.listing {
  max-width: 1400px;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#Courses.listing .course_wrap {
  flex: 0 0 33.3%;
  padding: 0px 15px;
  margin-bottom: 30px;
}

#Courses.listing .course_wrap .course {
  height: 100%;
  width: 100%;
  border-radius: 24px;
  border: 1px dashed #6a3906;
  padding: 15px;
}

#Courses.listing .course_wrap .course a.cover {
  display: block;
  padding-bottom: 100%;
}

#Courses.listing .course_wrap .course .content {
  margin: 20px 0;
}

#Courses.listing .course_wrap .course .content h3 {
  text-align: center;
}

#Courses.listing .course_wrap .course .content h3 a {
  color: #80b7a0;
  font-size: 20px;
}

#Courses.listing .course_wrap .course .content p {
  font-size: 12px;
  color: #999;
}

@media (max-width: 767px) {
  .course_nav,
  .course_nav .nav_filter {
    flex-wrap: wrap;
    padding: 0 20px;
    justify-content: center;
  }
  .course_nav .nav_filter .nav_item {
    margin-bottom: 10px;
    flex: 0 0 100%;
  }
  #Courses.listing .course_wrap {
    flex: 0 0 100%;
  }
  #Courses.listing .course_wrap .course {
    display: flex;
    flex-direction: column;
  }
  #Courses.listing .course_wrap .course a.cover {
    flex: 0 0 250px;
    height: 250px;
    padding-bottom: inherit;
  }
  #Courses.listing .course_wrap .course .content {
    flex: 1 1 100%;
    margin: inherit;
    padding: 0 20px;
  }
  #Courses.listing .course_wrap .course .content h3 {
    text-align: left;
  }
}
/* course main page*/
.kv-banner.kv-slider {
  padding: 0;
}

.kv-banner.kv-slider .kv_slider_wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.kv-banner.kv-slider .kv_slider_wrap .js-slide {
  height: 700px !important;
  background-position: center;
}

@media (max-width: 767px) {
  #Page_kv.pc {
    display: none !important;
  }
  #Page_kv.sp {
    display: block !important;
  }
  .course_nav .searchinput {
    flex: 0 0 100% !important;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }
  .course_nav .searchinput a {
    display: block;
    background-color: #b3cd54;
    color: #fff;
    padding: 4px;
    font-size: 20px;
    border-radius: 8px;
  }
  .xs_order_button_course {
    position: fixed;
    bottom: 0px;
    width: calc(100% - 30px);
    z-index: 100;
  }
}
#Page_kv_nav {
  position: absolute;
  top: calc(50% - 150px);
  left: 50px;
  z-index: 10;
  height: 400px;
}

#Page_kv_nav .slick-list {
  height: 400px !important;
  overflow: inherit;
}

#Page_kv_nav .slick-track {
  width: 80px;
  height: 400px !important;
}

#Page_kv_nav .slick-track .js-slide {
  height: 80px !important;
  width: 80px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

#Page_kv_nav .slick-track .js-slide img {
  width: auto !important;
  height: 100%;
  opacity: 0.8;
  transition: all 0.3s;
}

#Page_kv_nav .slick-track .js-slide.slick-current img {
  opacity: 1;
}

@media (max-width: 767px) {
  #Page_kv_nav {
    display: none;
  }
  #Page_kv.sp .js-slide {
    height: 350px !important;
  }
}
ol.site-page {
  font-size: 0.8rem;
  position: absolute;
  top: 80px;
  left: 40px;
  z-index: 10;
}

ol.site-page a {
  color: #fff;
}

ol.site-page a:hover {
  color: #eee;
}

ol.site-page li:nth-child(n+2) {
  position: relative;
}

ol.site-page li:nth-child(n+2):before {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f105";
  color: #fff;
  margin-right: 10px;
}

ol.site-page li.active a {
  font-weight: 400;
  color: #eee;
  padding-bottom: 2px;
  border-bottom: 1px dashed #ccc;
}

#Bread ol.site-page {
  position: relative;
  z-index: inherit;
  top: inherit;
  left: inherit;
}

#Bread ol.site-page a {
  color: #999;
}

#Bread ol.site-page li:nth-child(n+2):before {
  color: #aaa;
}

@media (max-width: 767px) {
  ol.site-page {
    display: none;
  }
}
/* course content */
.course_wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.course_wrap .main {
  flex: 0 0 100%;
}

.course_wrap .sidebar {
  flex: 0 0 100%;
}

.course_wrap .main h1.title {
  font-size: 30px;
  color: #b3cd54;
  margin-bottom: 40px;
}

.course_block {
  margin-bottom: 40px;
}

.course_wrap h4.title {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  color: #6a3906;
  margin-bottom: 20px;
}

.course_tip {
  display: flex;
  flex-wrap: wrap;
}

.course_tip .tip {
  flex: 0 0 50%;
  margin-bottom: 20px;
}

.course_tip .tip h4.title {
  margin-bottom: 0px;
}

@media (max-width: 767px) {
  .course_tip .tip {
    flex: 0 0 100%;
    text-align: center;
  }
  .course_tip .tip h4.title {
    font-size: 18px;
  }
  .course_tip .tip p {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  .course_wrap .main {
    flex: 0 0 calc(75% - 40px);
  }
  .course_wrap .sidebar {
    flex: 0 0 25%;
  }
}
#Album.listing {
  display: flex;
  flex-wrap: wrap;
}

#Album.listing .album {
  flex: 0 0 33.3333333333%;
  padding: 10px;
}

#Album.listing .album a {
  display: block;
  padding-bottom: 100%;
}

/* 影片專用樣式 */
#Album.listing .album.video-album a {
  position: relative;
  overflow: hidden;
}

#Album.listing .album.video-album video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#Album.listing .album.video-album .video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  pointer-events: none;
}

#Album.listing .album.video-album a:hover .video-play-icon {
  color: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Fancybox 影片顯示樣式 - 確保置中且無空白延伸 */
.fancybox-slide.fancybox-slide--html {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fancybox-slide--html .fancybox-content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.fancybox-slide--html .fancybox-content video {
  max-width: 100vw !important;
  max-height: 90vh !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  #Album.listing .album {
    flex: 0 0 50%;
    padding: 5px;
  }

  #Album.listing .album.video-album .video-play-icon {
    font-size: 36px;
  }

  .fancybox-slide--html .fancybox-content video {
    max-height: 80vh !important;
  }
}
/* article-content */
.article-content p {
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 20px;
}

.article-content img {
  max-width: 100%;
  width: 100%;
}

@media (max-width: 767px) {
  .article-content p {
    font-size: 14px;
    text-align: justify;
  }
}
/* sidebar */
.sidebar #Courses.listing {
  flex-wrap: wrap;
  padding: 0;
}

.sidebar #Courses.listing .course_wrap {
  flex: 0 0 100%;
  padding: 0;
}

.sidebar #Courses.listing .course_wrap .course {
  border-radius: inherit;
  border: none;
  padding: 0;
}

.act-button a.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #b3cd54;
  color: #fff;
  padding: 4px;
  font-size: 24px;
  font-weight: 600;
  border-radius: 8px;
}

.act-button a.btn:hover {
  background-color: #8BC34A;
}

.sidebar .sidebar-block {
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .sidebar #Courses.listing {
    justify-content: space-between;
  }
  .sidebar #Courses.listing .course_wrap {
    flex: 0 0 calc(50% - 10px);
  }
}
@media (max-width: 767px) {
  .sidebar #Courses.listing {
    justify-content: flex-start;
  }
  .sidebar #Courses.listing .course_wrap {
    flex: 0 0 100%;
  }
}
/*----------------------
--- Curriculum setting
----------------------*/
/* curriculum_nav */
#curriculum_nav {
  max-width: 1200px;
  margin: 0 auto 30px auto;
}

.space_wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.space_wrap .space {
  flex: 0 1 100px;
  padding: 0 15px;
  position: relative;
}

.space_wrap .space span {
  display: inline-block;
  position: absolute;
  font-size: 12px;
  border: 1px solid #fcc5c5;
  background-color: #fff;
  width: 50px;
  text-align: center;
  border-radius: 10px;
  color: #dc9f9e;
  bottom: 10px;
  left: calc(50% - 25px);
}

.course_type_nav {
  display: flex;
  justify-content: center;
}

.course_type_nav .course_type {
  padding: 15px;
  flex: 0 0 140px;
}

.course_type_nav .course_type a {
  display: block;
  padding: 4px 10px;
  border: 1px solid #c4a58c;
  color: #c4a58c;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  transition: all 0.3s;
}

.course_type_nav .course_type a:hover,
.course_type_nav .course_type a.active {
  color: #fff;
  background-color: #c4a58c;
}

.date_nav {
  display: flex;
  justify-content: space-between;
  /*width: calc( 100% - 60px);*/
  max-width: 1200px;
  /*margin-left: auto;*/
  margin: 5px auto;
  /*padding: 0 20px;*/
  padding: 0px 0px 0px 20px;
}

.date_nav .date_item a {
  display: block;
  color: #fcc5c5;
  font-size: 20px;
}

.date_nav .date_item.date_prev i {
  margin-right: 5px;
}

.date_nav .date_item.date_next i {
  margin-left: 5px;
}

@media (min-width: 992px) {
  #curriculum_nav .course_nav {
    display: none;
  }
}
@media (max-width: 991px) {
  .course_type_nav {
    display: none;
  }
  #curriculum_nav .course_nav {
    max-width: 300px;
    margin: 0 auto;
  }
  #curriculum_nav .course_nav .nav_filter {
    padding: 0;
  }
  #curriculum_nav .course_nav .nav_filter .nav_item {
    flex: 1 1 100%;
  }
}
@media (max-width: 767px) {
  #curriculum_nav .course_nav {
    max-width: inherit;
  }
  .space_wrap {
    display: none;
  }
  #curriculum_nav {
    margin-bottom: 10px;
  }
  .date_nav {
    width: 100%;
    margin-bottom: 20px;
  }
}
/* curriculum_main */
#curriculum_main {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 0 15px;
}

#curriculum_main.unlogin {
  filter: blur(10px);
}

#curriculum_main .curr_wrap {
  flex: 0 0 50px;
  margin-top: 72px;
}

.curr_loc .times {
  font-size: 12px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: -1px 0 #ce8585, 0 1px #ce8585, 1px 0 #ce8585, 0 -1px #ce8585;
  color: #fff;
}

.curr_loc .loc_wrap {
  display: flex;
  flex-direction: column;
}

.curr_loc .loc_wrap .loc {
  font-size: 12px;
  min-height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}

.curr_loc .loc_wrap .loc:last-child {
  margin-bottom: 15px;
}

#curriculum_main .curr_info_wrap {
  flex: 1 1 100%;
  display: flex;
  border: 1px dashed #ff6840;
  border-radius: 12px;
  position: relative;
  /*overflow: scroll hidden;
  -webkit-overflow: scroll hidden;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;*/
  overflow-x: auto;
}

.curr_day {
  flex: 0 0 16.67%;
  min-width: 170px;
  position: relative;
  padding-top: 70px;
}

.curr_day .date_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #81b9a0;
  padding: 15px;
  position: absolute;
  width: 100%;
  margin-top: -70px;
}

.curr_day .date_wrap .day {
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
}

.curr_day .date_wrap .date {
  color: #fff;
  font-size: 14px;
}

.curr_day .curr_course .time_wrap {
  display: flex;
  background-color: #ffeeeb;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 48px;
  align-items: center;
}

.curr_day .curr_course .time_wrap .time {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.curr_day .curr_course .time_wrap .time span {
  flex: 0 0 100%;
  text-align: center;
  display: block;
  font-size: 12px;
  color: #c6887f;
}

/*下午*/
.curr_day .curr_course .time_wrap_b {
  display: flex;
  background-color: #ffe2bc;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 48px;
  align-items: center;
}

.curr_day .curr_course .time_wrap_b .time {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.curr_day .curr_course .time_wrap_b .time span {
  flex: 0 0 100%;
  text-align: center;
  display: block;
  font-size: 12px;
  color: #c6887f;
}

/*下午*/
/*晚上*/
.curr_day .curr_course .time_wrap_c {
  display: flex;
  background-color: #ede5ff;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 48px;
  align-items: center;
}

.curr_day .curr_course .time_wrap_c .time {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.curr_day .curr_course .time_wrap_c .time span {
  flex: 0 0 100%;
  text-align: center;
  display: block;
  font-size: 12px;
  color: #c6887f;
}

/*晚上*/
.curr_day .curr_course .curr_course_name {
  display: flex;
}

.curr_day .curr_course .curr_course_name .course_name {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.curr_day .curr_course .curr_course_name .course_name.right_set {
  border-left: 1px dashed #ddd;
}

.curr_day .curr_course .curr_course_name .course_name .name {
  flex: 0 0 100%;
  padding: 0px 3px;
  min-height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px dotted #e9e9e9;
}

.curr_day .curr_course .curr_course_name .course_name .name:last-child {
  margin-bottom: 15px;
}

.curr_day .curr_course .curr_course_name .course_name .name span {
  display: block;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 991px) {
  #curriculum_main .curr_info_wrap {
    overflow-x: scroll;
  }
}
/* curr_day table setting */
.curr_day:nth-child(even) .curr_course .time_wrap {
  background-color: #fcc5c5;
}

/*下午*/
.curr_day:nth-child(even) .curr_course .time_wrap_b {
  background-color: #f8ce8a;
}

/*下午*/
/*晚上*/
.curr_day:nth-child(even) .curr_course .time_wrap_c {
  background-color: #e3cbf0;
}

/*晚上*/
.curr_day:not(:first-child) {
  border-left: 1px dashed #ddd;
}

#curriculum_main.unlogin + .get_login {
  position: absolute;
  width: 100%;
  z-index: 2;
  top: 280px;
  animation: fadeInUp 0.5s linear;
}

#curriculum_main.unlogin + .get_login .gl_wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 2px 5px 7px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1200px) {
  #curriculum_main.unlogin + .get_login {
    top: 400px;
  }
}
@media (max-width: 767px) {
  #curriculum_main {
    margin-top: 70px;
  }
  #curriculum_main.unlogin + .get_login {
    padding: 0 30px;
  }
  .curr_loc .times,
  .curr_loc .loc_wrap .loc {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
  }
  #curriculum_main .curr_wrap {
    flex: 0 0 25px !important;
    margin-top: 72px;
  }
}
/*----------------------
--- Footer Layout
----------------------*/
footer {
  padding-bottom: 20px;
}

footer .ft-border-top {
  height: 290px;
  width: 100%;
  background-image: url(../../images/bg/ft_top.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  margin-bottom: 20px;
}

footer .TJft-border-top {
  height: 290px;
  width: 100%;
  background-image: url(../../images/bg/TJft_top.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  margin-bottom: 20px;
}

footer > .content {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  padding: 0 20px;
}

footer > .content .ft_main {
  flex: 0 0 200px;
}

footer > .content .ft_main a.ft_logo {
  display: block;
}

footer > .content .ft_main .introl {
  margin-bottom: 40px;
  margin-top: 40px;
}

footer > .content .ft_main .introl p {
  font-size: 14px;
  font-weight: 600;
}

footer > .content .ft_main .social {
  display: flex;
  justify-content: space-around;
}

footer > .content .ft_main .social a {
  flex: 0 0 50px;
  display: block;
}

footer > .content .ft_nav {
  flex: 0 1 100%;
  display: flex;
  justify-content: space-around;
}

footer > .content .ft_nav .ft_nav_item > h4 {
  font-size: 24px;
}

footer > .content .ft_nav .ft_nav_item > ul.ft_nav_link {
  list-style: none;
  margin-bottom: 25px;
}

footer > .content .ft_nav .ft_nav_item > ul.ft_nav_link li {
  margin-bottom: 5px;
}

footer > .content .ft_nav .ft_nav_item > .ft_nav_link li > a {
  font-size: 16px;
}

footer > .content .ft_nav .ft_nav_item > ul.ft_nav_link.has_icon li {
  display: flex;
  align-items: center;
}

footer > .content .ft_nav .ft_nav_item > ul.ft_nav_link.has_icon li:not(:last-child) {
  margin-bottom: 10px;
}

footer > .content .ft_nav .ft_nav_item > ul.ft_nav_link.has_icon li .icon {
  flex: 0 0 50px;
  padding-right: 10px;
}

@media (max-width: 767px) {
  footer .ft-border-top {
    background-image: url(../../images/bg/ft_top_sp.png);
    background-size: contain;
    height: 35vw;
  }
  footer .TJft-border-top {
    background-image: url(../../images/bg/TJft_top_sp.png);
    background-size: contain;
    height: 35vw;
  }
  footer > .content {
    flex-wrap: wrap;
    justify-content: center;
  }
  footer > .content .ft_main {
    text-align: center;
    margin-bottom: 30px;
  }
  footer > .content .ft_nav {
    flex: 0 0 100%;
  }
}
@media (max-width: 576px) {
  footer > .content .ft_nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  footer > .content .ft_nav .ft_nav_item {
    flex: 0 0 100%;
    text-align: center;
  }
  footer > .content .ft_nav .ft_nav_item > ul.ft_nav_link.has_icon {
    margin: 0 auto;
    margin-bottom: 40px;
  }
  footer > .content .ft_nav .ft_nav_item > ul.ft_nav_link.has_icon li {
    display: inline-flex;
  }
}
/*----------------------
--- Article Setting
----------------------*/
/* Article Listing */
.home-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 15px;
}

@media (min-width: 576px) {
  #Articles.listing {
    display: flex;
    flex-wrap: wrap;
  }
  #Articles.listing .article {
    flex: 0 0 33.33%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 15px;
  }
  #Articles.listing .article .article_wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 10px 15px;
  }
  #Articles.listing .article .article_wrap .cover {
    flex: 0 0 45%;
  }
  #Articles.listing .article .article_wrap .cover a {
    display: block;
    padding-bottom: 80%;
  }
  #Articles.listing .article .article_wrap .content {
    flex: 0 1 50%;
  }
  #Articles.listing .article .article_wrap .content .title h3 {
    margin: 0;
    margin-top: 10px;
  }
  #Articles.listing .article .article_wrap .content .title h3 a {
    font-size: 18px;
    display: inline-block;
  }
  #Articles.listing .article .article_wrap .content .title h3 a.more {
    color: #007bff;
    display: inline-block;
  }
  #Articles.listing .article .article_wrap .content a {
    font-size: 16px;
    display: inline-block;
  }
  #Articles.listing .article .article_wrap .content a.more {
    color: #007bff;
    display: inline-block;
  }
  #Articles.listing .article .article_wrap .date {
    flex: 0 1 5%;
  }
  #Articles.listing .article .article_wrap .date span {
    font-size: 12px;
  }
  #Articles.listing .article_new {
    flex: 0 0 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 15px;
  }
  #Articles.listing .article_new .article_wrap {
    display: flex;
    position: relative;
    padding: 10px 15px;
  }
  #Articles.listing .article_new .article_wrap .cover {
    flex: 0 0 45%;
  }
  #Articles.listing .article_new .article_wrap .cover a {
    display: block;
    padding-bottom: 80%;
  }
  #Articles.listing .article_new .article_wrap .content {
    flex: 0 1 45%;
    padding-left: 30px;
  }
  #Articles.listing .article_new .article_wrap .content .title h3 {
    margin: 0;
    margin-top: 10px;
  }
  #Articles.listing .article_new .article_wrap .content .title h3 a {
    font-size: 18px;
    display: inline-block;
  }
  #Articles.listing .article_new .article_wrap .content .title h3 a .more {
    color: #007bff;
    display: inline-block;
  }
  #Articles.listing .article_new .article_wrap .content a {
    font-size: 16px;
    display: inline-block;
  }
  #Articles.listing .article_new .article_wrap .content a.more {
    color: #007bff;
    display: inline-block;
  }
  #Articles.listing .article_new .article_wrap .date {
    flex: 0 1 10%;
  }
  #Articles.listing .article_new .article_wrap .date span {
    font-size: 12px;
  }
}
@media (max-width: 575px) {
  #Articles.listing {
    display: flex;
    flex-wrap: wrap;
  }
  #Articles.listing .article {
    flex: 0 0 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 15px;
  }
  #Articles.listing .article .article_wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 10px 15px;
  }
  #Articles.listing .article .article_wrap .cover {
    flex: 0 0 100%;
  }
  #Articles.listing .article .article_wrap .cover a {
    display: block;
    padding-bottom: 80%;
  }
  #Articles.listing .article .article_wrap .content {
    flex: 0 1 100%;
  }
  #Articles.listing .article .article_wrap .content .title h3 {
    margin: 0;
    margin-top: 10px;
  }
  #Articles.listing .article .article_wrap .content .title h3 a {
    font-size: 18px;
    display: inline-block;
  }
  #Articles.listing .article .article_wrap .content .title h3 a .more {
    color: #007bff;
    display: inline-block;
  }
  #Articles.listing .article .article_wrap .content a {
    font-size: 16px;
    display: inline-block;
  }
  #Articles.listing .article .article_wrap .content a.more {
    color: #007bff;
    display: inline-block;
  }
  #Articles.listing .article .article_wrap .date {
    flex: 0 1 100%;
  }
  #Articles.listing .article .article_wrap .date span {
    font-size: 12px;
  }
  #Articles.listing .article_new {
    flex: 0 0 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 15px;
  }
  #Articles.listing .article_new .article_wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 10px 15px;
  }
  #Articles.listing .article_new .article_wrap .cover {
    flex: 0 0 100%;
  }
  #Articles.listing .article_new .article_wrap .cover a {
    display: block;
    padding-bottom: 80%;
  }
  #Articles.listing .article_new .article_wrap .content {
    flex: 0 1 100%;
  }
  #Articles.listing .article_new .article_wrap .content .title h3 {
    margin: 0;
    margin-top: 10px;
  }
  #Articles.listing .article_new .article_wrap .content .title h3 a {
    font-size: 16px;
    display: inline-block;
  }
  #Articles.listing .article_new .article_wrap .content .title h3 a.more {
    color: #007bff;
    display: inline-block;
  }
  #Articles.listing .article_new .article_wrap .content a {
    font-size: 16px;
    display: inline-block;
  }
  #Articles.listing .article_new .article_wrap .content a.more {
    color: #007bff;
    display: inline-block;
  }
  #Articles.listing .article_new .article_wrap .date {
    flex: 0 1 100%;
  }
  #Articles.listing .article_new .article_wrap .date span {
    font-size: 12px;
  }
}
/* article page */
article.news-article {
  margin: 0 auto;
  max-width: 720px;
  padding: 0 20px;
}

article header {
  margin-bottom: 50px;
}

.article-content p {
  font-size: 1.2rem;
  text-align: justify;
  line-height: 3rem;
  margin-bottom: 4rem;
}

.article-content.content-mini h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

.article-content.content-mini li,
.article-content.content-mini p {
  font-size: 1.1rem;
  line-height: 2rem;
  text-align: justify;
}

article header h1.article,
article footer h3.article {
  font-size: 2rem;
  padding-bottom: 15px;
  margin-bottom: 5px;
  color: #11b5ca;
  border-bottom: 1px solid #ccc;
}

article footer h3.article {
  font-size: 1.5rem;
  font-weight: normal !important;
  padding: 10px 0;
  border-top: 1px solid #ccc;
  color: #999;
}

ul.article-data {
  text-align: right;
}

article footer ul.article-data {
  text-align: left;
}

ul.article-data li {
  font-size: 1rem;
}

ul.article-data li a {
  font-weight: 600;
  color: #11b5ca;
}

ul.social-btn {
  list-style: none;
  padding-left: unset;
  display: flex;
  display: -webkit-flex;
  align-items: flex-end;
  margin: 20px 0;
}

ul.social-btn li {
  display: inline-block;
}

ul.social-btn li:nth-child(n+2) {
  margin-left: 10px;
}

ul.social-btn li a {
  color: #fff;
  display: block;
}

ul.social-btn li a i.fa {
  width: 40px;
  line-height: 40px;
  text-align: center;
}

ul.social-btn li i.x-icon {
  width: 40px;
  height: 40px;
  display: block;
  position: relative;
  background-color: #333;
}

ul.social-btn li i.x-icon:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.6rem;
}

ul.social-btn li i.x-icon.x-icon-line:after {
  background-color: #72c02c;
  background-image: url(../../images/social/line.png);
}

ul.social-btn li i.x-icon.x-icon-massenger:after {
  background-color: #3398dc;
  background-image: url(../../images/social/messenger.png);
}

ul.social-btn li a {
  border-radius: 8px;
  overflow: hidden;
}

ul.social-btn li a:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  article.news-article {
    margin-top: 20px;
    margin-bottom: 50px;
  }
  article.news-article h1.article,
  article footer h3.article {
    text-align: justify;
  }
  article.news-article .article-content p {
    font-size: 15px;
    line-height: 28px;
    text-align: justify;
    margin-bottom: 2rem;
  }
  article.news-article .article-content h3 {
    font-weight: 600;
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
}
/*----------------------
--- Teams
----------------------*/
.team_wrap {
  max-width: 720px;
  margin: 0 auto;
}

.team_wrap .team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.team_wrap .team .person {
  flex: 0 1 25%;
  padding: 10px;
  text-align: center;
}

.team_wrap .team .person .cover {
  border-radius: 100%;
  padding-bottom: 100%;
  margin: 0 auto;
  position: relative;
  margin-bottom: 10px;
}

.team_wrap .team .person .cover:after {
  content: "";
  width: 100%;
  height: 100%;
  border: 4px solid #999;
  position: absolute;
  border-radius: 100%;
  left: 0px;
  top: 0px;
}

.team_wrap .team .person .name span {
  font-size: 14px;
}

@media (max-width: 767px) {
  .team_wrap .team .person {
    flex: 0 0 50%;
  }
  .team_wrap .team.plural {
    flex-wrap: wrap;
  }
  .team_wrap .team .person .name span {
    font-size: 12px;
  }
}
.person_info .head .cover {
  width: 160px;
  height: 160px;
  border-radius: 100%;
  margin-bottom: 20px;
}

.person_info .head > .name {
  margin-bottom: 20px;
}

.person_info .head > .name > .title {
  font-weight: 600;
  margin-right: 5px;
}

.person_info .head > .name > .name {
  letter-spacing: 4px;
}

.person_info .person_content .con_box {
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.person_info .person_content h4 {
  display: inline-block;
  background: #00bcd4;
  color: #fff;
  font-size: 16px;
  padding: 2px 10px;
}

.person_info .person_content ol.info_list {
  list-style: none;
}

.person_info .person_content ol.info_list li {
  position: relative;
}

.person_info .person_content ol.info_list li:before {
  font-family: "simple-line-icons";
  content: "\e09b";
  margin-right: 5px;
}

.person_info .person_content #Photo.listing {
  display: flex;
  flex-wrap: wrap;
}

.person_info .person_content #Photo.listing .photo {
  flex: 0 0 33%;
  padding: 5px;
}

.person_info .person_content #Photo.listing .photo a {
  padding-bottom: 100%;
  border-radius: 8px;
}

/*----------------------
--- Teams 2 sytle
----------------------*/
.team_wrap2 {
  max-width: 720px;
  margin: 0 auto;
}

.team_wrap2 .team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.team_wrap2 .team .person {
  flex: 0 1 33.33%;
  padding: 10px;
  text-align: center;
}

.team_wrap2 .team .person .cover {
  border-radius: 100%;
  padding-bottom: 100%;
  margin: 0 auto;
  position: relative;
  margin-bottom: 10px;
}

.team_wrap2 .team .person .cover:after {
  content: "";
  width: 100%;
  height: 100%;
  border: 4px solid #999;
  position: absolute;
  border-radius: 100%;
  left: 0px;
  top: 0px;
}

.team_wrap2 .team .person .name span {
  font-size: 14px;
}

@media (max-width: 767px) {
  .team_wrap2 .team .person {
    flex: 0 0 50%;
  }
  .team_wrap2 .team.plural {
    flex-wrap: wrap;
  }
  .team_wrap2 .team .person .name span {
    font-size: 12px;
  }
}
.person_info2 .head .cover {
  width: 160px;
  height: 160px;
  border-radius: 100%;
  margin-bottom: 20px;
}

.person_info2 .head > .name {
  margin-bottom: 20px;
}

.person_info2 .head > .name > .title {
  font-weight: 600;
  margin-right: 5px;
}

.person_info2 .head > .name > .name {
  letter-spacing: 4px;
}

.person_info2 .person_content .con_box {
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.person_info2 .person_content h4 {
  display: inline-block;
  background: #00bcd4;
  color: #fff;
  font-size: 16px;
  padding: 2px 10px;
}

.person_info2 .person_content ol.info_list {
  list-style: none;
}

.person_info2 .person_content ol.info_list li {
  position: relative;
}

.person_info2 .person_content ol.info_list li:before {
  font-family: "simple-line-icons";
  content: "\e09b";
  margin-right: 5px;
}

.person_info2 .person_content #Photo.listing {
  display: flex;
  flex-wrap: wrap;
}

.person_info2 .person_content #Photo.listing .photo {
  flex: 0 0 33%;
  padding: 5px;
}

.person_info2 .person_content #Photo.listing .photo a {
  padding-bottom: 100%;
  border-radius: 8px;
}

/*----------------------
---.content_font_wrap
----------------------*/
.content_font_wrap {
  /*zone modify*/
  max-width: 1000px;
  /*zone modify*/
  margin: 0 auto;
  padding: 0 15px;
}

.content_font_wrap h1.head {
  font-size: 30px;
  font-weight: 600;
  margin-top: 30px;
}

.content_font_wrap h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 30px 0;
}

.content_font_wrap h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0;
}

.content_font_wrap h5 {
  font-size: 14px;
  font-weight: 600;
}

.content_font_wrap p,
.content_font_wrap li {
  font-size: 14px;
  margin-bottom: 10px;
}

.content_font_wrap ol {
  margin-left: 20px;
}

.content_font_wrap ol.ch {
  margin-left: 60px;
  list-style-type: trad-chinese-informal;
}

.content_font_wrap b {
  font-weight: 600;
  color: #e64b3b;
}

.content_font_wrap p.quote {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f9f9f9;
  font-weight: 600;
  margin: 30px 0;
}

/*----------------------
--- Recruit
----------------------*/
#Recruit.listing {
  max-width: 960px;
  margin: 0 auto;
}

#Recruit.listing .recruit .recruit_wrap {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ccc;
}

@media (max-width: 991px) {
  #Recruit.listing .recruit .recruit_wrap {
    flex-direction: column;
  }
}
#Recruit.listing .recruit:last-child .recruit_wrap {
  border-bottom: none;
}

#Recruit.listing .recruit .recruit_wrap .re_list {
  flex: 1 1 100%;
  padding-right: 30px;
}

#Recruit.listing .recruit .name {
  flex: 0 1 250px;
  margin-bottom: 10px;
}

#Recruit.listing .recruit h4.ntitle {
  font-size: 16px;
  font-weight: 600;
}

#Recruit.listing .recruit h4.ntitle span {
  font-size: 16px;
  margin-left: 10px;
  color: #f22883;
}

#Recruit.listing .recruit .workinfo {
  display: flex;
}

#Recruit.listing .recruit .workinfo h4.ntitle {
  flex: 0 0 75px;
}

#Recruit.listing .recruit .workinfo .content {
  flex: 1 1 100%;
  color: #999;
}

#Recruit.listing .recruit .cta {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#Recruit.listing .recruit .cta a.btn {
  display: block;
  background-color: #FFC107;
  color: #fff;
  width: 100%;
  border-radius: 18px;
}

/*----------------------
--- Cart 
----------------------*/
#Cart.listing .cart {
  transition: all 0.3s;
}

#Cart.listing .cart:not(:first-child) {
  border-top: 1px solid #aaa;
}

#Cart.listing .cart:hover {
  background-color: #fafafa;
}

#Cart.listing .cart .item {
  display: flex;
  position: relative;
  padding: 20px;
}

#Cart.listing .cart .item .cover {
  flex: 0 0 180px;
  height: 180px;
}

#Cart.listing .cart .item .content {
  flex: 1 1 80%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#Cart.listing .cart .item .content h3 {
  font-size: 24px;
  font-weight: 600;
}

#Cart.listing .cart .item .content ul.info {
  list-style: none;
}

#Cart.listing .cart .item .content ul.info li span.title {
  font-weight: 600;
  margin-right: 10px;
}

#Cart.listing .cart .item .content ul.info li span.init {
  color: #888;
}

.person_check .form-group.inline-label {
  display: flex;
  flex-wrap: wrap;
}

.person_check .form-group.inline-label > label {
  flex: 0 0 120px;
  margin-bottom: 10px;
}

.person_check .form-group.inline-label {
  flex: 1 1 80%;
  margin-bottom: 0px !important;
  justify-content: flex-start;
}

.person_check .form-group.inline-label label {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.person_check .form-group.inline-label label:not(:first-child) {
  margin-left: 10px;
}

.person_check .form-group label.form-check-inline {
  padding-left: 25px;
}

.person_check .form-group label.form-check-inline input {
  position: absolute;
  top: 0px;
  left: 0px;
}

.person_check .form-group label.form-check-inline .u-check-icon-checkbox-v6 {
  top: 50%;
  left: 0px;
  position: absolute;
  transform: translateY(-50%);
}

.person_check .u-check-icon-checkbox-v6 i,
.person_check .u-check-icon-radio-v6 i {
  border-radius: 100%;
  border: 2px solid #009688;
}

.person_check .u-check input[type=checkbox]:checked + .u-check-icon-checkbox-v6 i {
  background-color: #009688;
  border-color: #009688;
}

#Cart.listing .cart .item .count {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 120px;
}

#Cart.listing .cart .item .count .count_wrap {
  display: flex;
}

#Cart.listing .cart .item .count .count_wrap .count_btn {
  flex: 0 0 30px;
}

#Cart.listing .cart .item .count .count_wrap .count_btn a {
  color: #aaa;
}

#Cart.listing .cart .item .count .count_wrap .count_btn a:hover {
  color: #009688;
}

#Cart.listing .cart .item .count .count_wrap input {
  width: 30px;
  margin: 0 5px;
  text-align: center;
}

#Cart.listing .cart .item a.delete {
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 0;
  color: #ccc;
}

#Cart.listing .cart .item a.delete:hover {
  color: #999;
}

#Cart.listing .cta {
  text-align: center;
  margin: 30px 0;
}

#Cart.listing .cta a {
  display: inline-blockblock;
  margin: 0 auto;
  padding: 15px;
  background-color: #a3dd5f;
  color: #fff;
  min-width: 220px;
  font-size: 18px;
}

#Cart.listing .cta a:hover {
  background-color: #8bc34a;
}

@media (max-width: 991px) {
  .person_check .form-group.inline-label {
    display: flex;
    flex-wrap: wrap;
  }
  .person_check .form-group.inline-label label.form-check-inline {
    flex: 0 0 50%;
    margin: 0;
    margin-bottom: 4px;
  }
}
@media (max-width: 767px) {
  #Cart.listing .cart .item .cover {
    display: none;
  }
  #Cart.listing .cart .item {
    flex-direction: column;
  }
  #Cart.listing .cart .item .count {
    flex: inherit;
    margin: 15px 0 5px auto;
  }
  #Cart.listing .cart .item .content ul.info {
    margin-bottom: 10px;
  }
}
/*---------------------- 
--- Login_wrap 
----------------------*/
.login_wrap label {
  font-size: 12px;
  margin: 0;
}

.login_wrap input {
  margin-bottom: 20px;
  border-radius: 0px !important;
}

.price_wrap {
  margin-bottom: 30px;
}

.price_wrap .price_con {
  display: flex;
  justify-content: space-around;
  padding: 20px 10px 10px 10px;
  background-color: #eee;
}

.price_wrap .price_con .price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.price_wrap .price_con .price span.num {
  padding: 4px 10px;
  background-color: #fff;
  min-width: 120px;
  text-align: center;
  margin-bottom: 5px;
}

.price_wrap .price_con .price span.txt {
  font-size: 12px;
}

@media (max-width: 767px) {
  .price_wrap .price_con .price span.num {
    font-size: 12px;
    min-width: 80px;
    padding: 4px 0;
  }
}
.u-btn-primary {
  background-color: #ff8bb5;
}

.u-btn-primary:hover {
  background-color: #f22883;
  border: 1px solid transparent;
}

#Confirm {
  margin: 0 auto;
  max-width: 500px;
  padding: 20px;
  border: 1px solid #aaa;
  border-radius: 12px;
}

#Confirm .confirm_wrap {
  display: flex;
  flex-wrap: wrap;
}

#Confirm .confirm_wrap .confirm {
  flex: 0 0 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 5px;
}

#Confirm .confirm_wrap .confirm:not(:first-child) {
  border-top: 1px solid #eee;
}

#Confirm .confirm_wrap .confirm .name,
#Confirm .confirm_wrap .confirm .value {
  flex: 0 0 50%;
}

#Confirm .confirm_wrap .confirm .name {
  font-weight: 600;
}

#Confirm .confirm_wrap .confirm span.value {
  text-align: left;
}

#Confirm .confirm_btn {
  padding-top: 15px;
  padding-bottom: 15px;
}

#Confirm .confirm_btn a {
  display: block;
  text-align: center;
  background-color: #ff8bb5;
  color: #fff;
  transition: all 0.3s;
  padding: 15px 5px;
  margin-top: 30px;
  border-radius: 12px;
}

#Confirm .confirm_btn a:hover {
  background-color: #f22883;
}

.login_wrap .form-group .form-selection {
  width: 100%;
  padding: 9px 10px;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  position: relative;
  background-image: url(../../images/icon/nav_arrow.jpg);
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
}

.login_wrap .form-group .form-selection {
  background-image: url(../../images/icon/select_arrow_pink.jpg);
}

.timetable_wrap .btn-group {
  display: flex;
  flex-wrap: wrap;
}

.timetable_wrap.week .btn-group {
  flex-wrap: nowrap;
}

.timetable_wrap .btn-group label {
  flex: 0 0 50%;
}

.timetable_wrap.week .btn-group label {
  flex: 1 1 14.2857142857%;
}

.timetable_wrap .btn-group label input {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
}

.timetable_wrap .btn-group label span {
  color: #555;
  border-radius: 0px;
  border: 1px solid #eee;
  display: block;
  padding: 0.57143rem 1.42857rem;
  text-align: center;
  font-size: 12px;
  transition: all 0.3s;
}

.timetable_wrap .btn-group label input[type=checkbox]:checked + span {
  background-color: #f22883;
  color: #fff;
}

@media (max-width: 767px) {
  .timetable_wrap .btn-group label span {
    padding: 10px 0;
  }
}
/*----------------------
--- Popup Widows
----------------------*/
.popup {
  padding: 20px;
  width: 80%;
  max-width: 570px;
  border-radius: 12px;
}

.popup.popup_read .content_wrap {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.popup .content_wrap {
  padding: 20px;
  overflow-y: auto;
}

.popup .content_wrap .content {
  max-height: 70vh;
}

.popup.popup_read .content_wrap .content_font_wrap p,
.popup.popup_read .content_wrap .content_font_wrap h3,
.popup.popup_read .content_wrap .content_font_wrap li,
.popup.popup_read .content_wrap .content_font_wrap b {
  font-size: 12px;
}

.popup.popup_read .content_wrap .content_font_wrap h2 {
  font-size: 18px;
  margin: 15px 0;
}

.popup.popup_read .content_wrap .content_font_wrap ol {
  margin-left: 30px;
}

/*----------------------
--- Popup Widows
----------------------*/
.popup2 {
  padding: 20px;
  width: 80%;
  max-width: 750px;
  border-radius: 12px;
}

.popup2.popup_read .content_wrap {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.popup2 .content_wrap {
  padding: 20px;
  overflow-y: auto;
}

.popup2 .content_wrap .content {
  max-height: 70vh;
}

.popup2.popup_read .content_wrap .content_font_wrap p,
.popup.popup_read .content_wrap .content_font_wrap h3,
.popup.popup_read .content_wrap .content_font_wrap li,
.popup.popup_read .content_wrap .content_font_wrap b {
  font-size: 12px;
}

.popup2.popup_read .content_wrap .content_font_wrap h2 {
  font-size: 18px;
  margin: 15px 0;
}

.popup2.popup_read .content_wrap .content_font_wrap ol {
  margin-left: 30px;
}

/*-----------------------------
    SPACE
-----------------------------*/
#Space.listing {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#Space.listing .item {
  flex: 0 0 50%;
  padding: 0 25px;
  margin-bottom: 100px;
  position: relative;
}

#Space.listing .item .cover {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

#Space.listing .item:hover .cover:after {
  left: 10%;
  top: 10%;
  opacity: 1;
  letter-spacing: 1px;
}

#Space.listing .item .cover:after {
  content: "more";
  display: -webkit-flex;
  display: flex;
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 100%;
  background-color: rgba(230, 230, 230, 0.2);
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3vw;
  font-family: "Spartan", sans-serif;
  transition: all 0.3s;
  opacity: 0;
  letter-spacing: 50px;
  border-radius: 16px;
}

#Space.listing .item .cover .tag {
  color: #fff;
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 3rem;
  font-family: "Spartan", sans-serif;
  font-weight: 600;
  font-style: italic;
  text-shadow: 0px 0px 5px rgba(255, 226, 0, 0.3);
}

#Space.listing .item .cover:before {
  content: "";
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  background-color: #81ac73;
  transform: skewX(-45deg);
  left: -100px;
  top: -60px;
}

#Space.listing .item .content {
  position: absolute;
  bottom: 20px;
  left: 40px;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#Space.listing .item .content h2,
#Space.listing .item .content p {
  /*background-color: rgba(255,255,255,0.5);*/
  padding: 0 20px 0 0;
}

#Space.listing .item .content h2 {
  margin-bottom: 10px;
  display: inline-block;
}

#Space.listing .item .content h2 a {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 600;
}

@media (min-width: 768px) and (max-width: 991px) {
  #Space.listing .item .content h2 {
    font-size: 1.3rem;
  }
  #Space.listing .item .content p {
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  #Space.listing .item {
    flex: 0 0 100%;
    margin-bottom: 30px;
    padding: 10px;
  }
  #Space.listing .item .content p {
    font-size: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 300px;
  }
  #Space.listing .item .cover:after {
    display: none;
  }
  #Space.listing .item .content h2 {
    max-width: 300px;
    font-size: 1.4rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.img-responsive {
  width: 100% !important;
}

article#Space header {
  width: 100%;
  min-height: 50vh;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

article#Space header h1,
article#Space header p span {
  color: #fff;
}

article#Space header > .content::after {
  /*content: "";
  background:rgba(0,0,0,0.5);
  position: absolute;
  width: 100%;
  height: 100%;*/
}

article#Space header h1 {
  font-size: 3rem;
  font-weight: 800;
  animation: inherit;
  margin-bottom: 10px;
  display: inline-block;
  padding: 0 20px;
  /*background-color: #f22883;*/
}

article#Space header p {
  text-align: center;
}

article#Space header p span {
  padding: 5px;
  /*background-color: #ff8bb5;*/
}

@media (max-width: 767px) {
  article#Space header {
    margin-top: 60px;
    min-height: 30vh;
  }
}
article#Space .space-gallery {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  max-width: 1300px;
  margin: 0 auto;
}

article#Space .space-gallery .item {
  flex: 0 0 20%;
  padding: 5px;
}

article#Space .space-gallery .item a {
  display: block;
}

.x-btn-group {
  text-align: center;
  padding-top: 20px;
}

.x-btn-group a.x-btn {
  display: inline-block;
  padding: 10px 30px;
  background-color: #f22883;
  color: #fff;
  transition: all 0.3s;
  border: 1px solid #ff8bb5;
  text-align: center;
  min-width: 300px;
}

.x-btn-group a.x-btn span {
  font-size: 1.4rem;
}

.x-btn-group a.x-btn.x-btn-o {
  background-color: inherit;
  color: #f22883;
  font-weight: 600;
}

.home-title-v2 {
  margin-bottom: 20px;
}

.home-title-v2 h2 {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #aaa;
  font-size: 1.2rem;
  font-weight: 100;
  letter-spacing: 20px;
  min-width: 45%;
  text-align: center;
}

ul.space-item {
  list-style: none;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
  justify-content: space-between;
}

ul.space-item li {
  list-style: none;
  flex: 0 0 45%;
  font-size: 1.1rem;
  line-height: 2rem;
  border-top: 1px dashed #ccc;
  padding: 5px 0;
}

ul.space-item li:nth-child(-n+2) {
  border-top: none;
}

@media (max-width: 767px) {
  ul.space-item li {
    font-size: 1rem;
  }
}
/*--------------------
    #Contacts
----------------------*/
#Contact .con_wrap {
  width: 100%;
  max-width: 570px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

#Contact .con_wrap .con {
  flex: 0 0 100%;
  display: flex;
}

#Contact .btn-group {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#Contact .btn-group .x-btn {
  width: inherit;
  flex: 0 0 calc(50% - 10px);
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #ff8bb5;
  color: #fff;
}

#Contact .con_wrap .con .formset {
  display: flex;
  align-items: center;
  width: 100%;
}

#Contact .con_wrap .con:not(:last-child) {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px dashed #ddd;
}

#Contact .con_wrap .con .title {
  font-size: 14px;
  margin-bottom: 0;
  align-self: flex-start;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

#Contact .con_wrap .con .title.sp:after {
  content: "*";
  font-size: 14px;
  font-weight: 300;
  color: #f44336;
  margin-left: 5px;
}

#Contact .con_wrap .con .content {
  padding-left: 20px;
  flex: 1 1 80%;
}

#Contact .con_wrap .con .content > input {
  border: 1px solid transparent;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

#Contact .con_wrap .con .content > input:focus-visible {
  outline: none;
}

#Contact .con_wrap .con .content textarea {
  width: 100%;
  outline: none;
  border: 1px solid #ddd;
}

#Contact .con_wrap .con.group .formset {
  flex: 1 1 50%;
}

#Contact .con_wrap .con .formset .content .x-select {
  width: 100%;
  padding: 5px;
}

#Contact .formset.checkbox .content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}

#Contact .checkbox-list-item {
  margin-bottom: 10px;
  flex: 0 1 33.3333333333%;
}

#Contact .checkbox-list-item label {
  display: flex;
  align-items: center;
  margin: 0;
}

#Contact .checkbox-list-item label input {
  flex: 0 0 30px;
  height: 20px;
}

#Contact .checkbox-list-item label span {
  margin: 0;
  font-size: 14px;
}

#Contact .submit_con {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#Contact .submit_con > a {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0e1242;
  color: #fff;
  padding: 10px;
}

#Contact .submit_con > a.delete {
  margin-right: 10px;
  background-color: #fff;
  border: 1px solid #000;
  color: inherit;
}

@media (min-width: 576px) {
  #Contact .con_wrap .con.group .formset:not(:first-of-type) {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #ccc;
  }
}
@media (max-width: 991px) {
  .custombox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: none;
  }
  #Action {
    width: calc(100% - 40px);
    margin: 0 auto;
    max-height: calc(90vh - 20px);
    border-radius: 10px;
    max-width: 570px;
  }
  #Contact .con_wrap .con .formset.checkbox {
    flex-wrap: wrap;
    justify-content: center;
  }
  #Contact .con_wrap .con .formset.checkbox .title {
    flex: 1 1 100%;
    margin-bottom: 15px;
    text-align: center;
    white-space: inherit;
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 575px) {
  #Contact .con_wrap {
    padding: 0;
  }
  #Contact .con_wrap .con.group {
    flex-wrap: wrap;
    border: none;
    margin-bottom: 0;
  }
  #Contact .con_wrap .con.group .formset {
    flex: 0 0 100%;
  }
  #Contact .con_wrap .con.group .formset:first-child {
    padding-bottom: 0;
    margin-bottom: 10px;
    border-bottom: none;
  }
  #Contact .formset.checkbox .content {
    flex-wrap: wrap;
  }
  #Contact .checkbox-list-item {
    margin-bottom: 10px;
    flex: 1 1 50%;
  }
  #Contact .checkbox-list-item label span {
    font-size: 12px;
  }
  #Contact .con_wrap .con .formset .content .x-select {
    font-size: 13px;
    padding: 3px 5px;
  }
  #Contact .x-btn:before {
    display: none;
  }
  #Contact .x-btn {
    padding: 4px 20px;
  }
  #Contact .x-btn span {
    font-size: 13px;
  }
  #Contact .con_wrap .con .title {
    font-size: 12px;
    flex: 1 1 75px;
  }
  #Contact .con_wrap .con .content > input {
    font-size: 13px;
    font-weight: 300;
  }
  #Action .btn-group a {
    flex: 1 1 50%;
  }
  #Action .btn-group a:not(:last-child) {
    margin-right: 5px;
  }
  #Contact .btn-group {
    justify-content: space-between;
  }
  #Contact .btn-group .x-btn {
    margin: 0;
    flex: 0 1 calc(50% - 5px);
  }
  #Contact .btn-group > a.x-btn:first-child {
    flex: 0 1 100px;
    padding: 0 5px;
    text-align: center;
  }
}
.youtubefitcode {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.youtubefitcode iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.memberexpirydate {
  font-size: 12px;
}

.login_error_info {
  color: #f44336;
  font-size: 12px;
}

.hotlinkbox {
  display: flex;
  justify-content: center;
}

.hotlink {
  max-width: 1300px;
  position: relative;
  box-sizing: content-box;
  margin-bottom: 10px;
}

.hotlink::before {
  content: "熱門課程連結: ";
  font-size: 12px;
  /*position: absolute;*/
  top: -20px;
  left: 0px;
  display: flex;
  justify-content: center;
}

.hotlink > a {
  display: inline-block;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  padding: 3px 8px;
  margin-bottom: 5px;
  box-sizing: content-box;
}

@media (max-width: 991px) {
  .hotlink {
    margin: 0px 15px;
  }
}

/*# sourceMappingURL=tongjhen.css.map */