@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap');
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,form,img {
	margin: 0px;
	padding: 0px;
	border: 0px; }
body {
  overflow-x: hidden;
  font-size: 12px;
  color: #0e0b0e; }

::-moz-selection {
  background: #1a88cd;
  color: #fff; }

::selection {
  background: #1a88cd;
  color: #fff; }

a {
  color: #2ca5dc;
  transition: 0.5s;
}

a:hover,
a:active,
a:focus {
  color: #004a97;
  outline: none;
  text-decoration: none;
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  color: #000;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  margin: 0px 0px 20px 0px;
  padding: 0px;
}
h5,
.h5 {
  font-size: 16px;
}
h6,
.h6 {
  font-size: 15px;
}

p {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  margin: 0px 0px 30px 0px;
  padding: 0px;
}
li {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  margin: 0px 0px 2px 0px;
  padding: 0px;
}
span {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
}
b, strong, .strong {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-weight: bold; }
small, .small {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  color: #939a9e;
  font-size: 13px; }

a > img, div > img {
    width: 100%;
    /*height: auto;*/
    /*max-width: 100%;*/
    max-height: 100%;
}
img {
  margin: 0px;
  padding: 0px;
  border: 0px; }
img.pic-color-gray {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); }
button {
  margin: 0px;
  padding: 0px;
  border: 0px; }
button:focus {
  outline: none; }
time {
  color: #000;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 13px; }
  
  
.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-center {
  text-align: center !important; }

.text-black {
  color: #000 !important; }
.text-white {
  color: #fff; }
.text-gray {
  color: #dcdcdc; }
.text-deepgray {
  color: #8c8c8c; }
.text-main {
  color: #2ca5dc; }
.text-navyblue {
  color: #004a97; }
.text-deepblue {
  color: #24598e; }
.text-deepcol-1 {
  color: #687480; }
.text-dirtyblue {
  color: #586880; }
.text-red {
  color: #e6281c; }
.text-orange {
  color: #f89800; }
.text-yellow {
  color: #f8d800; }
.text-ylw-og {
  background: -webkit-gradient(linear,left top,right top,from(#ffdf08),to(#f89e00));
  background: linear-gradient(to right,#ffdf08,#f89e00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
  font-weight: bold; }
.text-sm {
  font-size: 15px;
  letter-spacing: 0px; }

.bg-main {
  background: #2ca5dc; }
.bg-navyblue {
  background: #004a97; }
.bg-black {
  background: #000; }
.bg-White {
  background: #ffffff; }
.bg-green {
  background: #75c05e; }
.bg-yellow {
  background: #f7d30a; }
.bg-lightblue {
  background: #80c0e2; }
  
.icon-star {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  display: inline-block;
  position: relative;
  top: 2px;
  margin-left: 2px;
  background-image: url("../img/icon-star.svg");
  background-blend-mode: screen !important;
  background-size: cover; }
.icon-linksborder {
  width: 70px;
  height: 28px;
  font-size: 100%;
  line-height: 28px;
  display: inline-block;
  position: relative;
  background-image: linear-gradient(#86bcdb, #86bcdb), url("../img/icon-linksborder.svg");
  background-blend-mode: screen !important;
  background-size: cover; }

.d-none {
  display: none !important; }

.d-inline {
  display: inline !important; }

.d-inline-block {
  display: inline-block !important; }

.d-block {
  display: block !important; }

.d-table {
  display: table !important; }

.d-table-row {
  display: table-row !important; }

.d-table-cell {
  display: table-cell !important; }

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; }

.d-flex.d-justify {
  align-items: center;
  justify-content: space-between; }

.d-inline-flex {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; }

.mt-1 {
  margin-top: 20px;
}
.mt-2 {
  margin-top: 30px;
}
.mt-sm-1 {
  margin-top: 5px;
}
.mt-sm-2 {
  margin-top: 10px;
}
.mb-1 {
  margin-bottom: 20px;
}
.mb-2 {
  margin-bottom: 30px;
}
.mb-sm-1  {
  margin-bottom: 5px;
}
.mb-sm-2  {
  margin-bottom: 10px;
}
.m-0 {
  margin: 0px;
}
.mlr-0 {
  margin-right: 0px;
  margin-left: 0px;
}
.mlr-1 {
  margin-right: 5px;
  margin-left: 5px;
}
.mlr-2 {
  margin-right: 10px;
  margin-left: 10px;
}
.ml-1 {
  margin-left: 5px;
}
.mr-1 {
  margin-right: 5px;
}
.ml-2 {
  margin-left: 10px;
}
.mr-2 {
  margin-right: 10px;
}
.pt-1 {
  padding-top: 10px;
}
.pt-2 {
  padding-top: 20px;
}
.pb-1 {
  padding-bottom: 10px;
}
.p-0 {
  padding: 0px;
}
.plr-0 {
  padding-right: 0px;
  padding-left: 0px;
}
.plr-1 {
  padding-right: 5px;
  padding-left: 5px;
}
.plr-2 {
  padding-right: 10px;
  padding-left: 10px;
}
.plr-3 {
  padding-right: 16px;
  padding-left: 16px;
}
.bor-radius-1 {
  border-radius: 10px;
}
.bor-radius-2 {
  border-radius: 20px;
}
.bor-radius-3 {
  border-radius: 30px;
}


/* Page nav */
.pagination {
  border-radius: 0px;
}
.pagination > li > a,
.pagination > li > span {
  background-color: #fff;
  border: 0px solid #ddd;
  padding: 8px 13px;
  line-height: 16px;
  font-size: 15px;
  border-radius: 26px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #004a97;
  background-color: #fff;
  padding: 8px 13px;
  line-height: 16px;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  font-weight: bold;
  background-color: #2ca5dc;
  border-color: #2ca5dc;
}
/* Pagination_nav */
.pagination_nav {
  position: relative;
  background-color: #fafafa;
  border-top: #eff4f4 solid 1px;
  padding: 40px 30px 35px;
}
.pagination_nav .form-control {
  color: #8a909d;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px 9px;
  width: 70px;
}
.pagination_nav nav {
  display: inline-flex;
  width: auto;
  margin-left: -50px;
  margin-right: -50px;
}
.pagination_nav > nav > a.active,
.pagination_nav > nav > span.active,
.pagination_nav > nav > a.active:hover,
.pagination_nav > nav > span.active:hover,
.pagination_nav > nav > a.active:focus,
.pagination_nav > nav > span.active:focus {
  color: #fff;
  font-weight: bold;
  background-color: #2ca5dc;
  border-color: #2ca5dc;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 7px;
  padding: 3px 6px 3px 7px;
}
.pagination_nav > nav > a.active:hover,
.pagination_nav > nav > span.active:hover,
.pagination_nav > nav > a.active:focus,
.pagination_nav > nav > span.active:focus {
  background-color: #1e88c6;
  border-color: #1e88c6;
}
.pagination_nav > nav > a.disabled,
.pagination_nav > nav > a.disabled:hover,
.pagination_nav > nav > a.disabled:focus,
.pagination_nav > nav > span.disabled {
  color: #fff;
  font-weight: bold;
  background-color: #ededed;
  border-color: #ededed;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 7px;
  padding: 3px 6px 3px 7px;
  cursor: default;
}
.pagination_nav nav span.page-number {
  font-size: 15px;
  color: #a7b8c8;
  width: auto;
  margin: 2px 0px;
  padding: 5px 7px;
}
/* pBar-Paginationv 上課紀錄 */
#pBar.pagination_nav {
  position: relative;
  background-color: transparent;
  border-top: #eff4f4 solid 1px;
  margin: 0px auto;
  padding: 15px 30px 25px;
}
#pBar.pagination_nav > a {
  color: #a7b8c8;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 15px;
  font-weight: normal;
  background-color: transparent;
  border: transparent solid 1px;
  border-radius: 4px;
  margin: 5px 5px 7px;
  padding: 3px 6px 3px 7px; display: inline-block;
}
#pBar.pagination_nav > a:hover,
#pBar.pagination_nav > a:focus {
  color: #7c92a8;
}
#pBar.pagination_nav > a#pfrist.disabled, #pBar.pagination_nav > a#plast.disabled {
  color: #ededed;
  font-size: 15px;
  font-weight: normal;
  background-color: transparent;
  border: transparent solid 1px;
  cursor: default;
}
#pBar.pagination_nav > a.active,
#pBar.pagination_nav > span.active,
#pBar.pagination_nav > a.active:hover,

#pBar.pagination_nav > span.active:hover,
#pBar.pagination_nav > a.active:focus,
#pBar.pagination_nav > span.active:focus {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  background-color: #2ca5dc;
  border-color: #2ca5dc;
}
#pBar.pagination_nav > a.disabled,
#pBar.pagination_nav > a.disabled:hover,
#pBar.pagination_nav > a.disabled:focus,
#pBar.pagination_nav > span.disabled {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  background-color: #ededed;
  border-color: #ededed;
  cursor: default;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  background: linear-gradient(45deg, #2ca5dc, #004a97);
  color: #fff;
  padding: 2px 20px 8px 20px;
  font-size: 16px;
  border-radius: 4px 4px 0px 0px;
  right: 15px;
  bottom: 0;
  transition: none;
  z-index: 997;
}

.back-to-top:focus {
  background: linear-gradient(45deg, #2ca5dc, #004a97);
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #004a97;
  color: #fff;
}

/* ==========================================
   Header
   ========================================== */
#header {
  padding: 30px 0px;
  height: 92px;
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  transition: all 0.5s;
  z-index: 997;
}

#header #logo {
  float: left;
  margin-top: -30px;
  margin-left: -24px;
}

#header #logo h1 {
  font-size: 21px;
  margin: -0px 0px 0px 0px;
  padding: 0px;
  line-height: 1;
  display: inline-block;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  position: relative;
}
#header #logo h1 img {
  margin-left: 0px;
  padding: 10px 4px 4px 0px;
  background-color: #fff;

}

#header #logo h1 span {
  margin-left: -800px;
  position: absolute;
}

#header #logo h1 a,
#header #logo h1 a:hover {
  color: #fff;
}

#header #logo img {
  margin: 0px;
  padding: 0px;
}

#header #telDiv {
	width: auto;
	position: absolute;
	margin: -6px 0px 0px 158px;
	padding: 0px;
}
#header #telDiv .telblock {
	margin: auto; padding: 0px 10px;
}
#header #telDiv .telDiv {
	width: 320px; margin-right: 55px; float: right;
}
#header #telDiv .tel li {
	color: rgb(255, 255, 255); line-height: 48px; font-size: 28px;
}
#header #telDiv .tel li strong a {
	color: rgb(255, 255, 255);
}
#header #telDiv .tel .glyphicon {
	margin-left: -4px;
	margin-right: 3px;
}
#header #telDiv .tel .website {
	font-size: 0.8em;
	line-height: 48px;
	font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
}

#header.header-fixed {
  background: transparent;/*background: linear-gradient(45deg, #2ca5dc, #004a97);*/
  padding: 20px 0px;
  height: 72px;
  transition: all 0.5s, background 5s linear;
}
#header.header-fixed::after{
    content: " ";
    width: 100%;
    height: 144px;
    -webkit-box-shadow: 1px 2px 15px -2px rgba(0,0,0,0.3);
            box-shadow: 1px 2px 15px -2px rgba(0,0,0,0.3);
    background: linear-gradient(45deg, #2ca5dc, #004a97);
    position: inherit;
    margin-top: -144px;
    z-index: -5;
}

  @media (max-width: 1199.98px) {
  #header #logo h1 img {
	padding: 10px 0px 4px; }
  #header #telDiv {
	left: 2px; }}
  @media (max-width: 991.98px) {
  #header #logo {
    margin-left: -22px;
  }
  #header #logo h1 {
    font-size: 28px;
    margin-top: 0px;
  }
  #header #logo img {
    max-height: 82px;
  }
  #header #logo h1 img {
    padding: 20px 0px 14px;
  }
  #header #telDiv {
	margin-left: 112px;
  }
  #header #telDiv .telDiv {
	width: 220px;
  }}

/* ==========================================
   AI_a-mi
   ========================================== */
  #AI_a-mi {
      position: fixed;
      left: calc(100% - 88px);
      right: 10px;
      top: calc(100% - 130px);
      bottom: 52px;
      margin: 0;
      padding: 0;
      z-index: 997;
  }
    #AI_a-mi a.a-mi-icon {
      width: 78px;
      height: 78px;
      display: flex;
      margin-bottom: 0;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      /*border: 1px solid transparent;*/
      padding: 10px;
      line-height: 1.5;
      border-radius: 0 0 50% 50%;
      position: relative;
      overflow: hidden;
  }
    #AI_a-mi a.a-mi-icon::after {
      position: absolute;
      content: "";
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background-color: #e6edf7;
      margin: 0 -4px 0;
      z-index: -1;
  }
    #AI_a-mi i.a-mi {
      width: 78px;
      height: 78px;
      position: absolute;
      top: 0px;
      left: calc(100% - 78px);
      background: url("../img/icon-A-MI_play.png") left center;
      background-size: cover;
      -webkit-animation: A-MI_play .8s steps(5) infinite;
      animation: A-MI_play .8s steps(5) infinite;
  }
@-webkit-keyframes A-MI_play {
  100% { background-position: -780px; }
}
@keyframes A-MI_play {
  100% { background-position: -780px; }
}


/* The ModalChat */
  #ModalChat.modal .modal-content .cancelbtn, #ModalChat.modal .modal-content .greybtn {
    float: left;
    width: 88px;
    margin-left: 2px;
    margin-right: 2px;
  }
  #ModalChat.modal .modal-content .cancelbtn {
    background-color: #2ca5dc;
    color: #000;
  }
  #ModalChat.modal .modal-content .greybtn {
    background-color: #ccc;
  }

  #ModalChat.modal .modal-content .container {
    margin: 0;
    padding: 16px;
    text-align: center;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    height: calc(530px - 0px);/*height: calc(460px - 0px);*/
    display: block;
    overflow: hidden;
  }
  #ModalChat.modal .modal-content .container h3 {
    margin: 0px auto;
    height: 36px; /*border-bottom: #5869aa solid 1px;*/
  }
  #ModalChat.modal .modal-content .container p {
    margin: 0;
    padding: 0px 0px 5px;
    line-height: 1.25;
  }
  #ModalChat iframe.form_iframe {
    position: relative;
    width: 100%;
    height: 447px !important;/*height: 330px377;*/
    margin: 0 auto 0;
    padding: 0px;
    display: flex;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

/* The ModalChat */
  #ModalChat.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.0);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;
  }

/* Modal Content/Box */
  #ModalChat.modal .modal-content {
    background-color: #fefefe;
    border: 0px solid #888;
    border-radius: 15px;
    position: fixed;
    left: 42%;
    right: 0;
    bottom: 42px;
    width: auto;/*width: calc(100% - 1%);*/
    height: 530px;/*height: 460px;*/
    margin: 0px 0.5%;
    display: block;
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 0px 10px rgba(0,0,0,.15);
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
  }

@media (min-width: 992px) and (max-width: 1199.98px) {
  #ModalChat.modal .modal-content {
    left: 35%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #ModalChat.modal .modal-content {
    left: 15%;
  }
}
@media screen and (max-width: 767.98px) {
  #ModalChat.modal .modal-content {
    padding: 20px;
    left: 0;
    width: calc(100% - 1%);
  }
}

  #ModalChat.modal .modal-footer {
    max-width: 328px;
    margin: calc(100% - 282px) -17px -17px;
    padding: 7px 16px 10px;
    border-top: 0;
    background-color: rgba(0,0,0,0.03);
    border-radius: 0 0 15px 15px;
    text-align: center; display: none;
  }
  #ModalChat.modal .modal-footer ul {
    margin: 0 auto;
    padding: 0px;
  }
  #ModalChat.modal .modal-footer ul.col-md-4 {
    width: 33.33333333%;
  }

@media screen and (max-width: 991.98px) {
  #ModalChat.modal .modal-footer ul.col-md-4 {
    width: 33.33333333%;
    display: inline-block;
    margin: 0 -2px;
  }
}
@media screen and (max-width: 767.98px) {
  #ModalChat.modal .modal-content {
    padding: 0px;/*padding: 20px;*/
    width: calc(100% - 4%);
    margin: 0px 2%;
  }
}
  #ModalChat.modal .modal-footer ul li.strong {
    font-size: 16px;
    line-height: 1.5;
    margin: 3px auto;
  }
  #ModalChat.modal .modal-footer ul li {
    font-size: 13px;
    text-align: center;
  }

  #ModalChat.modal hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
  }
 
  #ModalChat.modal .close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 36px;
    font-weight: bold;
    color: #004a97;/*color: #f1f1f1;*/
    text-shadow: 0 0 rgba(0,0,0,0.0), 0 1px rgba(0,0,0,0.25), 1px 0 rgba(0,0,0,0.25), 0 0 rgba(0,0,0,0.0);
    filter: alpha(opacity=80);
    opacity: .8;
  }
  #ModalChat.modal .close:hover,
  #ModalChat.modal .close:focus {
    color: #2ca5dc;
    cursor: pointer;
  }

  #ModalChat.modal .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -420px; opacity: 0} 
  to {bottom: 42px; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -420px; opacity: 0}
  to {bottom: 42px; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}


/* ==========================================
   Intro Section
   ========================================== */	
#intro {
  width: 100%;
  min-height: 400px;
  height: calc(42vh - 30px);
  background: linear-gradient(60deg, rgba(44, 165, 220, 1.0), rgba(0, 74, 151, 1.0)), url("../img/intro-bg.jpg") center top no-repeat;
  position: relative;
}
#intro .intro-advanced, #intro .intro-theme, #intro .intro-curric, #intro .intro-lecture, #intro .intro-sales, #intro .intro-cloud, #intro .intro-SPrequest, #intro .intro-service, #intro .intro-main {
  width: 100%;
  min-height: 320px;
  height: calc(42vh - 30px);
  position: relative;
  margin-top: -30px;
}
#intro .intro-advanced {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-advanced.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-theme {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-theme.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-curric {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-curric.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-lecture {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-lecture.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-sales {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-sales.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-cloud {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-cloud.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-SPrequest {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-SPrequest.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-service {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-service.jpg") center top no-repeat;
  background-size: cover;
}
/* 學員服務 & 其他 */
#intro .intro-main {
  background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-main.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-main > .creditcard, #intro .intro-main > .memberprofile {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  right: 0;/*right: calc(100%/2 + 100px)*/
  bottom: 0;
  margin-top: 20px;
  padding: 1% 55% 0% 5%;
}
  @media (min-width: 992px) and (max-width: 1199.98px) {
  #intro .intro-main > .creditcard, #intro .intro-main > .memberprofile {
	right: calc(100%/2);
	padding: 2% 0% 0% 10%; }}
  @media (min-width: 768px) and (max-width: 991.98px) {
  #intro .intro-main > .creditcard, #intro .intro-main > .memberprofile {
	right: calc(100%/5 - 114px);
	padding: 5% 5% 0% 5%; }}
  @media (min-width: 480px) and (max-width: 767.98px) {
  #intro .intro-main > .creditcard, #intro .intro-main > .memberprofile {
	right: 0;
	bottom: calc(100%/5 + 5px);
	padding: 20% 10% 0% 10%; }}
  @media screen and (max-width: 479.98px) {
  #intro .intro-main > .creditcard, #intro .intro-main > .memberprofile {
	right: 0;
	bottom: calc(100%/5 + 5px);
	padding: 0% 0% 0% 0%; }}
  
  @media (min-width: 1200px) {
  #intro {
    background-attachment: fixed;
  }}
  @media (max-width: 1199.98px) {
  #intro {
    width: 100%;
    min-height: 320px;
    height: calc(42vh - 60px); }
  #intro .intro-advanced, #intro .intro-theme, #intro .intro-curric, #intro .intro-lecture, #intro .intro-sales, #intro .intro-cloud, #intro .intro-SPrequest, #intro .intro-service, #intro .intro-main {
    width: 100%;
    min-height: 320px;
    height: calc(42vh - 60px);
    background-size: cover;
    position: relative;
    margin-top: 0px; }}
  @media (max-width: 991.98px) {
  #intro {
    width: 100%;
    min-height: 420px;
    height: calc(42vh - 30px);
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-bg.jpg") center top no-repeat;
    background-size: cover;
    position: relative; }
  #intro .intro-advanced, #intro .intro-theme, #intro .intro-curric, #intro .intro-lecture, #intro .intro-sales, #intro .intro-cloud, #intro .intro-SPrequest, #intro .intro-service, #intro .intro-main {
    width: 100%;
    min-height: 420px;
    height: calc(42vh - 30px);
    position: relative;
    margin-top: -30px; }
  #intro .intro-main {
    height: calc(42vh - 30px);
	margin-top: -175px; }
  #intro .intro-main.in-page {
	margin-top: -142px; }
  #intro .intro-advanced {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-advanced-md.jpg") center top no-repeat;
    background-size: cover; }
  #intro .intro-theme {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-theme-md.jpg") center top no-repeat;
    background-size: cover; }
  #intro .intro-curric {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-curric-md.jpg") center top no-repeat;
    background-size: cover; } 
  #intro .intro-lecture {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-lecture-md.jpg") center top no-repeat;
    background-size: cover; }
  #intro .intro-sales {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-sales-md.jpg") center top no-repeat;
    background-size: cover; }
  #intro .intro-cloud {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-cloud-md.jpg") center top no-repeat;
    background-size: cover; }
  #intro .intro-SPrequest {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-SPrequest-md.jpg") center top no-repeat;
    background-size: cover; }
  #intro .intro-service {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-service-md.jpg") center top no-repeat;
    background-size: cover; }
  #intro .intro-main {
    background: linear-gradient(60deg, rgba(44, 165, 220, 0.01), rgba(0, 74, 151, 0.01)), url("../img/intro-main-md.jpg") center top no-repeat;
    background-size: cover;
    height: calc(42vh - 0px);
	margin-top: -30px; }}
  @media screen and (max-width: 767.98px) {
  #intro {
    width: 100%;
    min-height: 420px; }
  #intro .intro-advanced, #intro .intro-theme, #intro .intro-curric, #intro .intro-lecture, #intro .intro-sales, #intro .intro-cloud, #intro .intro-SPrequest, #intro .intro-service, #intro .intro-main {
    width: 100%;
    min-height: 420px;
    height: calc(42vh - 0px);
    background-size: cover;
    position: relative;
    margin-top: 0px; }
  #intro .intro-main {
    height: calc(42vh - 0px);
	margin-top: -50px; }
  #intro .intro-main.in-page {
	margin-top: -130px; }}

.intro-text {
  position: absolute;
  left: 0px;
  top: 60px;
  right: 0px;
  height: calc(100% - 60px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.intro-text h2 {
  position: relative;
  margin: 30px 0px 10px 0px;
  /*padding: 0px 15px;*/
  font-size: 48px;
  line-height: 56px;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 0 0.1em #1468a0, 0 0 0.1em #004a97;
}
/* 學員服務 & 其他 */
.intro-text h2.main-core, #intro .intro-main.in-page .intro-text h2.main-core {
  margin: -38px 0px 2px;
}
  @media (min-width: 992px) and (max-width: 1199.98px) {
  .intro-text h2.main-core, #intro .intro-main.in-page .intro-text h2.main-core {
    margin: -69px 0px 2px; }}
  @media (min-width: 768px) and (max-width: 991.98px) {
  .intro-text h2.main-core {
    margin: 38px 0px 2px; }
  #intro .intro-main.in-page .intro-text h2.main-core {
    margin: 69px 0px 2px;
    font-size: 36px;
    line-height: 36px; }}
  @media screen and (max-width: 767.98px) {
  .intro-text h2.main-core, #intro .intro-main.in-page .intro-text h2.main-core {
    margin: 58px 0px 2px; }}


.intro-text p {
  color: #fff;
  margin-bottom: 20px;
  padding: 0px 15px;
  font-size: 21px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 0 0.1em #1468a0, 0 0 0.2em #004a97;
  display: inline-table;
}

.intro-text p span.type {
  margin-top: 3px;
  margin-left: 3px;
  margin-right: 3px;
  padding: 3px 12px 0px;
  font-size: 20px;
  /*color: #1c7bb2;*/
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  display: inline-block;
  text-shadow: 0 0 0em #fff, 0 0 0em #fff;
}

  @media (max-width: 991.98px) {
  #intro .intro-theme .intro-text h2 {
	padding-top: 85px; }
  #intro .intro-curric .intro-text h2, #intro .intro-sales .intro-text h2, #intro .intro-cloud .intro-text h2, #intro .intro-SPrequest .intro-text h2, #intro .intro-service .intro-text h2 {
	padding-top: 85px; }
  .intro-text h2 {
    font-size: 28px;
    line-height: 36px; }
  .intro-text p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 20px; }
  .intro-text h2.b-color {
    margin: 15% 0px 0px 0px; }
  .intro-text h2.b-color, .intro-text p.b-color {
    color: #0a5898;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0 0.1em #fff, 0 0 0.1em #fff; } }
  @media screen and (max-width: 767.98px) {
  #intro .intro-service .intro-text h2 {
	padding-top: 10px; }
  .intro-text h2 {
    font-size: 28px;
    line-height: 36px; }
  .intro-text p {
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 20px; }
  .intro-text h2.b-color {
    margin: 3% 0px 0px 0px; }
  .intro-text h2.black, .intro-text p.black {
    color: #1a1922;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0 0.1em #fff, 0 0 0.1em #fff; } }

#intro .btn-get-started {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#intro .btn-get-started:hover {
  color: #004a97;
  background: #fff;
}

#intro .product-screens {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  text-align: center;
  width: 100%;
  height: 50%;
}

#intro .product-screens img {
  box-shadow: 0px -2px 19px 4px rgba(0, 0, 0, 0.29);
}

#intro .product-screens .product-screen-1 {
  position: absolute;
  z-index: 30;
  left: calc(50% + 54px);
  bottom: 0;
  top: 30px;
}

#intro .product-screens .product-screen-2 {
  position: absolute;
  z-index: 20;
  left: calc(50% - 154px);
  bottom: 0;
  top: 90px;
}

#intro .product-screens .product-screen-3 {
  position: absolute;
  z-index: 10;
  left: calc(50% - 374px);
  bottom: 0;
  top: 150px;
}
  @media (max-width: 767.98px) {
  #intro .product-screens .product-screen-1 {
    position: static;
    padding-top: 30px;
  }

  #intro .product-screens .product-screen-2,
  #intro .product-screens .product-screen-3 {
    display: none; }}


/* ==========================================
   Navigation Menu
   ========================================== */
.nav-menu,
.nav-menu * {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.nav-menu li {
  position: relative;
  white-space: nowrap;
}

.nav-menu > li {
  float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
  display: block;
}

.nav-menu ul ul {
  top: 0;
  left: 100%;
}

.nav-menu ul li {
  min-width: 140px;
}

/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
  padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
  content: "\e114";
  position: absolute;
  right: 5px;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
}

.sf-arrows ul .sf-with-ul:after {
  content: "\e080";
}

/*--------------- Nav Meu Container ---------------*/
#nav-menu-container {
  float: right;
  margin: 2px auto 0px;
}
  @media (max-width: 991.98px) {
  #nav-menu-container {
    display: none;
  }}

/* Nav Meu Styling */
.nav-menu a {
  padding: 6px 2px 6px 2px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 18px;
  outline: none;
}

.nav-menu > li {
  margin-left: 5px;
}

.nav-menu ul {
  margin: 4px 0px 0px 0px;
  padding: 10px;
  box-shadow: 0px 0px 8px rgba(127, 137, 161, 0.25);
  background: #fff;
}

.nav-menu ul li {
  transition: 0.3s;
}

.nav-menu ul li a {
  padding: 6px;
  color: #181818;
  /*transition: 0.3s;*/
  display: block;
  font-size: 15px;
  text-transform: none;
}
  .nav-menu li a:before {
    content: " ";
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(2px);
    background: #fff;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

.nav-menu li a:hover {
  /*border-bottom: #fff solid 2px;*/
  transition: border-bottom 0.4s;
}
  .nav-menu li a:hover:before {
    opacity: 1;
    transform: translateY(0);
  }

.nav-menu li.menu-has-children a:hover {
  border-bottom: none;
}
  .nav-menu li.menu-has-children a:before {
    opacity: 0;
  }

.nav-menu ul li:hover > a {
  color: #004a97;
}

.nav-menu ul ul {
  margin: 0px;
}

/* Nav User Account */
.nav-menu li.user-menu {
  font-size: 24px;
  line-height: 24px;
  color: #fff;
  margin: -32px -15px 0px 20px;
  padding: 27px 19px 21px 19px;
  border: #fff solid 0px;
  background-color: #2ca5dc;
  position: relative;
  cursor: pointer;
}
.nav-menu li.user-menu:hover, .nav-menu li.user-menu:focus, .nav-menu li.user-menu:active {
  content: "\e114";
  position: relative !important;
  font-family: "Glyphicons Halflings";
  font-size: 24px;
  line-height: 24px;
  top: 0;
  right: 0;
  display: table;
  background-color: #2ca5dc;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.nav-menu li.user-menu:hover:after, .nav-menu li.user-menu:focus:after, .nav-menu li.user-menu:active:after {
  content: "\e114";
  position: absolute;
  font-family: "Glyphicons Halflings";
  font-size: 24px;
  line-height: 24px;
  top: calc(100%/2 - 41px);
  right: calc(100%/2 - 36px);
  display: table;
  padding: 31px 23px 26px 26px;
  background-color: #2ca5dc;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.nav-menu li.user-menu-down {
  margin: -32px -15px 0px 60px;
  padding: 27px 19px 21px 19px;
}
.nav-menu li.user-menu-down:hover:after, .nav-menu li.user-menu-down:focus:after, .nav-menu li.user-menu-down:active:after {
  content: "\e114";
  position: absolute;
  font-family: "Glyphicons Halflings";
  font-size: 24px;
  line-height: 24px;
  top: calc(100%/2 - 41px);
  right: calc(100%/2 - 36px);
  display: table;
  padding: 31px 23px 26px 26px;
  background-color: #2ca5dc;
}
.nav-menu li.user-menu a {
  margin: 0px auto;
  padding: 0px;
}
.nav-menu li.user-menu ul li a {
  margin: 0px auto;
  padding: 8px 6px 11px;
  border-top: 1px solid #dee2e6;
}
.nav-menu li.user-menu i.glyphicon-user {
  font-size: 25px;
  line-height: 33px;
  padding: 0px 5px;
}
.nav-menu li.user-menu ul li a i {
  position: absolute;
  top: 6px;
  left: -3px;
  line-height: 33px;
  display: inline;
}
.nav-menu li.user-menu a:hover i, .nav-menu li.user-menu a:focus i, .nav-menu li.user-menu a:active i {
  color: #004a97;
}
.nav-menu li.user-menu i.menu-has-icon, .nav-menu li.user-menu i.mdi-announce, .nav-menu li.user-menu i.mdi-email, .nav-menu li.user-menu i.mdi-payment, .nav-menu li.user-menu i.mdi-settings, .nav-menu li.user-menu i.mdi-teach, .nav-menu li.user-menu i.mdi-download {
  position: relative;
  font-size: 24px;
  line-height: 0.5;
  /*color: #181818;*/
  color: #88909a;
  padding: 0px 5px;
}
.nav-menu li.user-menu i.menu-has-icon, .nav-menu li.user-menu i.mdi-announce {
  font-size: 22px;
  line-height: 14px;
  padding-left: 6px;
}
.nav-menu li.user-menu i.mdi-settings {
  font-size: 22px;
  font-weight: bold;
  line-height: 14px;
  padding: 0px 6px 0px 5px;
}
.nav-menu li.user-menu i.mdi-download {
  font-size: 22px;
  line-height: 14px;
  padding-left: 7px;
}
.nav-menu li.user-menu i.mdi-payment {
  position: relative;
  display: inline-block;
  margin: 0px 3px 0px 6px;
  width: 24px;
  height: 17px;
}
.nav-menu li.user-menu i.mdi-payment:before {
  content: " ";
  position: absolute;
  top: calc(100%/2 - 15px);
  left: calc(100%/2 - 13px);
  width: 24px;
  height: 24px;
  background-color: #88909a;
  border-radius: 24px;
}
.nav-menu li.user-menu i.mdi-payment:after {
  content: "\e148";
  position: absolute;
  top: calc(100% - 13px);
  left: calc(100% - 21px);
  font-size: 15px;
  color: #fff;
}
.nav-menu li.user-menu a:hover i.mdi-payment:before, .nav-menu li.user-menu a:focus i.mdi-payment:before, .nav-menu li.user-menu a:active i.mdi-payment:before {
  background-color: #004a97;
}
.nav-menu li.user-menu a:hover i.mdi-payment:after {
  color: #f5f5f5;
}

.nav-link {
  display: block;
  padding: 20px; }
  .nav-link:hover, .nav-link:focus {
    text-decoration: none; }
  .nav-link.disabled {
    color: #6c757d; }

/* Dropdown Menu */
.nav-menu .dropdown-menu {
  border: 0px solid #e5e9f2;
  border-radius: 0px; }
.nav-menu .dropdown-menu-right {
  right: -1px;
  left: auto;
  margin-top: 0px;
  visibility: visible !important;
  opacity: 1;
  top: 100%;
}
.nav-menu .dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  content: "";
  border: 0; }

.nav-menu .dropdown-menu li.dropdown-header {
  display: block;
  margin: 0px 0px 5px 5px;
  padding: 0px;
  font-size: 13px;
  color: #6c757d;
  line-height: 18px;
  white-space: normal;
}

.nav-menu .dropdown-menu p.menu-account, .nav-menu .dropdown-menu p.menu-money {
  font-size: 13px;
  display: inline-block;
}

.nav-menu .dropdown-menu p.menu-account span, .nav-menu .dropdown-menu p.menu-money span {
  font-size: 15px;
}
/* mail-account*/
li.dropdown-header p.menu-account span {
  max-width: 100%;
  width: 380px;
  word-wrap: break-word;
  display: block;
  margin: -19px 0% 0% 0%;
  padding-left: 40px;
}
.nav-menu .dropdown-menu p.menu-money {
  line-height: 30px;
}

.nav-menu .dropdown-menu i.icon-money, #mobile-nav i.icon-money {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px;
  display: inline;
  line-height: 30px;
}

.nav-menu .dropdown-menu i.icon-money img, #mobile-nav i.icon-money img {
  width: 20px;
  height: 20px;
  margin-top: -5px;
}
  @media (max-width: 1199.98px) {
  /* Nav Menu Arrows */
  .sf-arrows .sf-with-ul:after {
	right: 9px; }
  .nav-menu a {
	font-size: 16px; }
  .nav-menu > li {
	margin-left: 6px; }
  .nav-menu li.user-menu {
	margin-left: 12px;
	line-height: 24px; }}

  @media (max-width: 991.98px) {
  #mobile-nav li.user-menu {
	background-color: #2ca5dc;
	width: 100%;
	max-height: 54px;
  }
  #mobile-nav li.menu-has-children i.glyphicon-user {
	position: relative;
	font-size: 25px;
	cursor: default;
	/*padding-top: 5px;
	padding-bottom: 3px;*/
  }
  #mobile-nav li.user-menu i.glyphicon-user:after {
	content: "\e008";
	position: absolute;
	font-family: "Glyphicons Halflings";
	top: 5px;
	left: 15px;
	color: #fff;
	background-color: #2ca5dc;
  }
  #mobile-nav li.user-menu i.glyphicon-user.glyphicon-chevron-up:after, #mobile-nav li.user-menu i.glyphicon-user.glyphicon-chevron-down:after {
	top: 4px;
  }
  #mobile-nav li.user-menu i.glyphicon-user::before, #mobile-nav li.user-menu i.glyphicon-user.glyphicon-chevron-up::before, #mobile-nav li.user-menu i.glyphicon-user.glyphicon-chevron-down::before {
	display: none;
  }
  /*#mobile-nav li.menu-has-children i {
	position: relative;
	font-size: 25px;
	cursor: default;
  }*/
  #mobile-nav li.menu-has-children i.menu-has-icon, #mobile-nav li.menu-has-children i.mdi-announce, #mobile-nav li.menu-has-children i.mdi-email, #mobile-nav li.menu-has-children i.mdi-payment, #mobile-nav li.menu-has-children i.mdi-settings, #mobile-nav li.menu-has-children i.mdi-teach, #mobile-nav li.menu-has-children i.mdi-download {
	font-size: 16px;
	padding: 0px 5px 0px 2px;
  }
  #mobile-nav li.menu-has-children i.menu-has-icon {
	position: relative !important;
	margin: 0;
	padding: 0;
	width: 23px;
	height: 16px;
  }
  #mobile-nav li.menu-has-children i.menu-has-icon:after {
	content: "\e008";
	position: absolute;
	font-family: "Glyphicons Halflings";
	top: 0px;
	left: 0px;
	padding: 1px 2px 3px;
	color: #fff;
	background-color: transparent !important;
  }
  #mobile-nav li i.glyphicon-chevron-down, #mobile-nav li i.glyphicon-chevron-up {
	-webkit-transition: background-color, color 0.4s ease-out;
	-o-transition: background-color, color 0.4s ease-out;
	transition: background-color, color 0.4s ease-out;
  }
  #mobile-nav li.user-menu.menu-has-children i.glyphicon-chevron-down, #mobile-nav li.user-menu.menu-has-children i.glyphicon-chevron-up {
	-webkit-transition: top 0.2s ease-out;
	-o-transition: top 0.2s ease-out;
	transition: top 0.2s ease-out;
  }
  #mobile-nav li.user-menu.menu-has-children i.glyphicon-chevron-down {
	top: 0px;
	margin-top: 0px;
	padding: 17px 26px;
  }
  #mobile-nav li.user-menu.menu-has-children i.glyphicon-chevron-up {
	top: 2px;
	margin-top: 0px;
	color: #fff;
	padding: 17px 26px;
  }
  #mobile-nav li.user-menu a.dropdown-toggle {
	color: #2ca5dc !important;
	top: 0px;
	padding-left: 10px;
	padding-right: 10px;
  }
  #mobile-nav li.user-menu ul.dropdown-menu {
	border: 0px solid #e5e9f2;
	border-radius: 0px;
	background-color: rgba(0, 0, 0, 0.0);
	-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .175);
 	        box-shadow: 0 0px 0px rgba(0, 0, 0, .175);
	width: 100%;
	overflow-x: hidden;
  }
  #mobile-nav li.user-menu ul.dropdown-menu li, #mobile-nav li.user-menu ul.dropdown-menu li.w-percent {
	margin: 0px -1px;
	padding: 0 2px;
	display: inline-block; /*display: inline-table;*/
	width: calc(100%/2 - 1px) !important; /*width: 100%;*/
	border-bottom: #292f34 solid 1px;
  }
  #mobile-nav li.user-menu ul.dropdown-menu li.dropdown-header, #mobile-nav li.user-menu ul.dropdown-menu li.w-percent {
	width: 100% !important;
  }
  #mobile-nav li.user-menu ul.dropdown-menu li.dropdown-footer {
	/*position: fixed;
	top: calc(100%/2 + 52px);
	left: 6px;*/
	margin: 0px;
	padding: 0px;
	border-bottom: 0px;
	width: 100% !important; /*width: auto !important;*/
	display: inline-table;
  }
  #mobile-nav li.user-menu ul.dropdown-menu li.dropdown-footer a {
	font-size: 18px;
	line-height: 22px;
  }
  #mobile-nav li.user-menu ul.dropdown-menu li a {
	color: #fff;
	margin: 0px;
  }
  #mobile-nav li.user-menu ul.dropdown-menu li a:hover,
  #mobile-nav li.user-menu ul.dropdown-menu li a:focus {
	color: #2ca5dc;
	background-color: rgba(0, 0, 0, 0.0);
  }
  #mobile-nav li.user-menu ul.dropdown-menu li.dropdown-header {
	background-color: rgba(255, 255, 255, 0.95);
	display: block;
	white-space: normal;
  }
  #mobile-nav li.dropdown-header p.menu-account, #mobile-nav li.dropdown-header p.menu-money {
	width: calc(100vw - 42.8%);
	margin: 0px 11px 0px;
	display: inline-block;
	/*color: #181818;*/
  }
  #mobile-nav li.dropdown-header p.menu-account {
	padding-top: 6px;
  }
  /* mail-account*/
  #mobile-nav li.dropdown-header p.menu-account span {
	display: inline-block;
	margin: 2px 0px 0px;
	padding-left: 0px;
	line-height: 1.1;
  }
  #mobile-nav li.dropdown-header p.menu-money {
	padding-bottom: 4px;
  }
  #mobile-nav li.dropdown-header p.menu-money i.glyphicon {
	display: inline;
	position: relative;
	padding: 0px;
	line-height: 25px;
  }}


/*--------------- Mobile Nav Toggle ---------------*/
#mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  margin: 22px 7px 0px 0px;
  border: 0;
  background: none;
  font-size: 24px;
  display: none;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;
}
  @media (max-width: 991.98px) {
  #mobile-nav-toggle {
    display: inline;
  }}

#mobile-nav-toggle i {
  color: #fff;
  padding: 5px;

}

/* Mobile Nav Styling */
#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 998;
  background: rgba(52, 59, 64, 0.9);
  left: -75%;
  width: 75%;
  overflow-y: auto;
  transition: 0.4s;
}

#mobile-nav ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

#mobile-nav ul li {
  position: relative;
  margin: 0px;
}

#mobile-nav ul li a {
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  padding: 9px 22px 9px 15px;
  position: relative;
  text-decoration: none;
  width: 100%;
  display: block;
  outline: none;
}

#mobile-nav ul li a:hover {
  color: #2ca5dc;
}

#mobile-nav ul .menu-has-children i {
  position: absolute;
  font-family: "Glyphicons Halflings";
  right: 0;
  z-index: 99;
  padding: 15px;
  cursor: pointer;
  color: #fff;
}
#mobile-nav ul .menu-has-children i.mdi-announce, #mobile-nav ul .menu-has-children i.mdi-email, #mobile-nav ul .menu-has-children i.mdi-payment, #mobile-nav ul .menu-has-children i.mdi-settings, #mobile-nav ul .menu-has-children i.mdi-teach, #mobile-nav ul .menu-has-children i.mdi-download {
  position: relative !important;
}

#mobile-nav ul .menu-has-children i.glyphicon-chevron-down, #mobile-nav ul .menu-has-children i.glyphicon-chevron-up {
  padding: 15px 26px;
}
#mobile-nav ul .menu-has-children i.glyphicon-chevron-up {
  color: #2ca5dc;
}
#mobile-nav ul .menu-item-active {
  color: #2ca5dc;
}

#mobile-body-overly {
  width: 100%;
  height: 100%;
  z-index: 997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(52, 59, 64, 0.9);
  display: none;
}
  @media (min-width: 992px) {
  #mobile-body-overly {
    background: rgba(52, 59, 64, 0.0);
  }
  #mobile-nav {
    display: none !important;
  }}

/* Mobile Nav body classes */
body.mobile-nav-active {
  overflow: hidden;
}

body.mobile-nav-active #mobile-nav {
  left: 0;
}

body.mobile-nav-active #mobile-nav-toggle {
  color: #fff;
}

/* ==========================================
   Sections Header
   ========================================== */
.section-header {
  margin: 20px auto 0px;
}

.section-header .section-title {
  font-size: 28px;
  color: #111;
  text-align: center;
  font-weight: 400;
}
.section-header .section-title.ml-neg1 {
  margin-left: -122px;
}
  @media (min-width: 768px) {
    .section-header .section-title {
		font-size: 32px; }
    .section-header .section-title.ml-neg1 {
		margin-left: auto; }}

.section-header .section-description {
  text-align: center;
  padding-bottom: 40px;
  color: #777;
  font-style: italic;
}

.section-header .section-divider {
  display: block;
  width: 100px;
  height: 3px;
  background: #004a97;
  background: linear-gradient(0deg, #004a97 0%, #2ca5dc 100%);
  margin: -5px auto 0px;
  margin-bottom: 25px;
}

/*--------------- Section with background ---------------*/
.section-bg {
  background: #eff5f5;
}
.section-lightbg {
  background-color: rgba(201, 210, 218, 0.15);
}

/*--------------- Box-img-Big ---------------*/
.thumb {
  overflow: hidden;
  position: relative; }
  .thumb img {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  .thumb:hover img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05); }

/* ==========================================
   Button
   ========================================== */
button.btn, input.btn, a.btn {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
}
button.btn.spacing-words, input.btn.spacing-words, a.btn.spacing-words {
  letter-spacing: -1px;
}
button.btn.spacing-words.cta-btn, input.btn.spacing-words.cta-btn, a.btn.spacing-words.cta-btn, button.btn.spacing-words.cta-btn-outline, input.btn.spacing-words.cta-btn-outline, a.btn.spacing-words.cta-btn-outline {
  padding: 10px 15px 8px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: none;
}
/* 禁用 */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  filter: alpha(opacity=100);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: 1;
}
/* 換行 */
.btn.w-space {
  white-space: pre-wrap;
}
/*--------------- icon-full 額滿 / icon-sale 限時優惠 ---------------*/
#full, #sale {
  position: relative;
}
.btn i#icon-full, .btn i#icon-sale {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
html input[type="i.b-full"],
input[type="i.b-full-b"],
input[type="i.b-round"] {
  color: #fff;
  font-size: 13px;
}
i.b-full, i.b-full-b ,i.b-round {
  position: relative;
  margin: 0px;
  padding: 0px;
  flex: 1;
  font-size: 13px;
  color: #fff;
  font-weight: bold;
  font-style: normal;
}
i.b-full:after {
  content: "額滿";
  position: absolute;
  text-align: right;
  top: 2px;
  bottom: 0px;
  left: 0px;
  right: 4px;
}
i.b-full:before {
  content: " ";
  position: absolute;
  width: 0px;
  height: 0px;
  padding: 0px;
  color: #fff;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  /*background-color: #eb2349;*/
  border: #eb2349 solid;
  border-width: 18px 33px 14px 42px;
  border-color: #eb2349  #eb2349 transparent  transparent; 
  border-radius: 0 4px 0 0;
  margin: 0px;
  top: -1px;
  bottom: 0px;
  left: calc(100% - 74px);
  right: 0px;
}
i.b-full-b:after {
  content: "額滿";
  position: absolute;
  text-align: right;
  top: calc(100% - 19px);
  bottom: 0px;
  left: 0px;
  right: 4px;
}
i.b-full-b:before {
  content: " ";
  position: absolute;
  width: 0px;
  height: 0px;
  padding: 0px;
  color: #fff;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: #eb2349 solid;
  border-width: 14px 33px 20px 42px;
  border-color: transparent #eb2349  #eb2349 transparent; 
  border-radius: 0 0 4px 0;
  margin: 0px;
  top: calc(100% - 33px);
  bottom: 0;
  left: calc(100% - 74px);
  right: 0px;
}
i.b-round:after, .btn-xs i.b-round:after {
  content: " ";
  position: absolute;
  border-width: 4px;
  border-style:solid;
  border-color:transparent #eb2349 transparent  transparent;
  display: table;
  top: calc(50% - 2px);
  bottom: calc(50% - 2px);
  left: calc(100% - 48px);
  right: 0px;
}
i.b-round:before, .btn-xs i.b-round:before {
  content: "額滿";
  position: absolute;
  width: auto;
  height: 24px;
  padding: 3px 4px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #eb2349;
  border-radius: 4px;
  display: table;
  margin: 0px;
  top: calc(50% - 12px);
  bottom: calc(50% - 12px);
  left: calc(100% - 40px);
  right: 0px;
}
html input[type="i.b-sale"] {
  color: #fff;
  font-size: 13px;
}
i.b-sale {
  position: relative;
  margin: 0px;
  padding: 0px;
  flex: 1;
  font-size: 13px;
  color: #fff;
  font-weight: bold;
  font-style: normal;
}
i.b-sale:after {
  content: " ";
  position: absolute;
  text-align: right;
  top: calc(-100% + 22px);
  bottom: 0px;
  left: calc(100% - 22px);
  right: 0px;
  width: 20px;
  background: url("../img/icon-flashSale.svg") 50% 50% no-repeat; 
  background-size: 100%;
  -webkit-animation: jumping 0.8s infinite;
          animation: jumping 0.8s infinite;
}
i.b-sale:before {
  content: " ";
  position: absolute;
  width: 0px;
  height: 0px;
  padding: 0px;
  color: #fff;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: #eb2349 solid;
  border-width: 18px 33px 14px 42px;
  border-color: #eb2349  #eb2349 transparent  transparent; 
  border-radius: 0 4px 0 0;
  margin: 0px;
  top: -1px;
  bottom: 0px;
  left: calc(100% - 74px);
  right: 0px;
}
@-webkit-keyframes jumping {
  0% {
    transform: rotate(0deg); }
  10% {
    transform: rotate(10deg); }
  50% {
    top: calc(-100% + 21px);
    transform: rotate(-3deg); }
  90% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(0deg); }}

/* 金幣 */
a.btn-box {
  margin: 2px auto;
  padding: 0px;
  display: block;
  width: 22px;
  height: 24px;
}
.btn-box i#icon-gold-coin {
  margin: 0px auto 0;
  padding: 0px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: flex-start;
  position: relative;
}
i.gold-coin, i.gold-coin-gray {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}
i.gold-coin:after {
  content: " ";
  position: absolute;
  top: calc(-20px + 22px);
  bottom: 0px;
  left: auto;
  right: auto;
  width: 20px; height: 20px;
  background: url("../img/icon-gold-coin.svg") 50% 50% no-repeat; 
  background-size: 100%;
  -webkit-animation: coin_jumping 0.8s infinite;
          animation: coin_jumping 0.8s infinite;
}
i.gold-coin:before {
  content: " ";
  position: absolute;
  width: 22px;
  height: 22px;
  padding: 0px;
  color: #fff;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background: linear-gradient(120deg, rgba(255, 223, 8, 1.0), rgba(248, 136, 0, 1.0));
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
          box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
  border-radius: 22px;
  margin: 0px;
  top: 1px;
  bottom: 0px;
  left: -1px;
  right: 0;
  -webkit-animation: coinbg_jumping 0.8s infinite;
          animation: coinbg_jumping 0.8s infinite;
}
@-webkit-keyframes coin_jumping {
  0% {
    transform: rotate(0deg); }
  10% {
    transform: rotate(10deg); }
  50% {
    top: calc(-20px + 21px);
    transform: rotate(-10deg); }
  90% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(0deg); }}

@-webkit-keyframes coinbg_jumping {
  0% {
    top: 2px;
    transform: rotate(0deg); }
  10% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(0deg); }
  90% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(0deg); }}

.btn-box-gold {
  position: relative;
  margin: 0px;
  padding: 0px 6px 0px 22px;
  border-radius: 8px;
  border: 1px solid #f1f0ec;
  background: #f0f0f0 linear-gradient(0deg, rgba(240, 240, 240, 1.0), rgba(255, 255, 255, 1.0));
}
.btn-box-gold:after {
    width: 18px;
    height: 18px;
    content: " ";
    position: absolute;left: 4px;top: 6px;
    background: url(../img/icon-coin-xs.png) center center;
    background-size: cover;
}
.btn-box-gold:focus,
.btn-box-gold:active,
.btn-box-gold.active,
.open > .dropdown-toggle.btn-box-gold {
  background: #f0f0f0 linear-gradient(0deg, rgba(240, 240, 240, 1.0), rgba(255, 255, 255, 1.0));
}
.btn-box-gold:hover,
.btn-box-gold:active,
.btn-box-gold.active,
.open > .dropdown-toggle.btn-box-gold {
  height: 30px;
  background: #fff208 linear-gradient(0deg, rgba(255, 242, 98, 1.0), rgba(255, 255, 255, 1.0));
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05);
}

button.btn span.btnword, a.btn span.btnword {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 15px;
  line-height: 17px;
  display: block;
}
.cta-btn, .cta-btn-outline {
  display: inline-block;
  margin: 0px 3px 0px;
  padding: 10px 30px 8px;
  -webkit-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
  background: #2ca5dc;
  width: auto;
  border: 1px solid transparent;
  color: #fff;
}
.cta-btn-outline {
  background: #fff;
  border: 1px solid #86bcdb;
  color: #687480;
}
.cta-btn:hover, .cta-btn-outline:hover {
  background: #004a97;
  border: 1px solid transparent;
  color: #fff;
}
.cta-btn:hover,
.cta-btn:focus,
.cta-btn:active,
.cta-btn.active,
.open > .dropdown-toggle.cta-btn,
.cta-btn-outline:hover,
.cta-btn-outline:focus,
.cta-btn-outline:active,
.cta-btn-outline.active,
.open > .dropdown-toggle.cta-btn-outline {
  background: #004a97;
  border: 1px solid transparent;
  color: #fff;
}
.cta-btn:active,
.cta-btn.active,
.open > .dropdown-toggle.cta-btn,
.cta-btn-outline:active,
.cta-btn-outline.active,
.open > .dropdown-toggle.cta-btn-outline {
  background-image: none;
}
.cta-btn.w-percent, .cta-btn-outline.w-percent, .cta-btn-outline-org.w-percent, .gry-btn.w-percent, .org-btn.w-percent {
  margin: 0px 5% 20px;
  width: 90%;
}
.cta-btn.min-w, .cta-btn-outline.min-w, .cta-btn-outline-org.min-w, .gry-btn.min-w, .org-btn.min-w {
  min-width: 280px;
}
.cta-btn.min-w135, .cta-btn-outline.min-w135, .cta-btn-outline-org.min-w135, .gry-btn.min-w135, .org-btn.min-w135 {
  min-width: 135px;
}
.cta-btn.w-half, .cta-btn-outline.w-half, .cta-btn-outline-org.w-half, .gry-btn.w-half, .org-btn.w-half {
  width: 48%;
  margin-top: 4px;
  margin-left: 1px;
  margin-right: 2px;
}
/* 指定老師 */
.btn.cta-btn-outline.bg-color {
  background: #fff;
}
.btn.cta-btn-outline.bg-color:hover {
  background: #f0f8ff;
  border: 1px solid #86bcdb;
  color: #3f4954; /*color: #687480;*/
}
.btn.cta-btn-outline.bg-color:hover,
.btn.cta-btn-outline.bg-color:focus,
.btn.cta-btn-outline.bg-color:active,
.btn.cta-btn-outline.bg-color.active,
.open > .dropdown-toggle.cta-btn-outline.bg-color {
  background: #f0f8ff;
  border: 1px solid #86bcdb;
  color: #3f4954;
}
.btn.cta-btn-outline.bg-color:active,
.btn.cta-btn-outline.bg-color.active,
.open > .dropdown-toggle.cta-btn-outline.bg-color {
  background-image: none;
}
.btn.cta-btn-outline > .pic-box {
  position: relative !important;
  margin: 20px 0px 0px;
  padding: 0;
  display: inline-flex;
}
.btn.cta-btn-outline > .pic-box > img.pic-teacher {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0px 0px;
  position: absolute;
  border-radius: 50%;
  clip-path: circle(38% at center);
}
.btn.cta-btn-outline > .pic-box > .card-pic {
  margin: 0px auto;
  position: absolute;
  top: -10px;
  left: 0;
  width: 84px;
  height: 84px;
  background-color: #e6edf7;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.btn.cta-btn-outline > .pic-box > .card-pic > img.pic-teacher {
  position: absolute;
  margin: -3% auto auto;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  max-width: calc(100% + 42px);
  max-height: calc(100% + 20px);
}
.btn.cta-btn-outline > .pic-box > .card-pic > img.pic-teacher:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.btn.cta-btn-outline > .pic-box > span.text-name {
  margin: 16px 0px 24px calc(100%/3 + 10px);
  width: 250px;
  height: 42px;
  font-size: 19px;
  text-align: left;
  line-height: 120%;
}

.cta-btn-outline-org {
  background: #fff;
  border: 1px solid #86bcdb;
  color: #687480;
}
.cta-btn-outline-org:hover {
  background: #f07700;
  border: 1px solid transparent;
  color: #fff;
}
.cta-btn-outline-org:hover,
.cta-btn-outline-org:focus,
.cta-btn-outline-org:active,
.cta-btn-outline-org.active,
.open > .dropdown-toggle.cta-btn-outline-org {
  background: #f07700;
  border: 1px solid transparent;
  color: #fff;
}
.cta-btn-outline-org:active,
.cta-btn-outline-org.active,
.open > .dropdown-toggle.cta-btn-outline-org {
  background-image: none;
}

.gry-btn {
  display: inline-block;
  margin: 0px 3px 0px;
  padding: 10px 30px 8px;
  -webkit-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
  background: #b8c3c8;
  width: auto;
  border: 1px solid #b8c3c8;
  color: #fff;
}

.gry-btn:hover {
  background: #b8c3c8;
  border: 1px solid #b8c3c8;
  color: #fff;
  /*cursor: context-menu;*/
}
.gry-btn:hover,
.gry-btn:focus,
.gry-btn:active,
.gry-btn.active,
.open > .dropdown-toggle.gry-btn {
  background: #b8c3c8;
  border: 1px solid #b8c3c8;
  color: #fff;
}
.gry-btn:active,
.gry-btn.active,
.open > .dropdown-toggle.gry-btn {
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.org-btn {
  display: inline-block;
  margin: 0px 3px 0px;
  padding: 10px 30px 8px;
  -webkit-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
  background: #b8c3c8;
  width: auto;
  border: 0px solid #fff;
  color: #fff;
}

.org-btn:hover {
  background: #f07700;
  border: 0px solid #f07700;
  color: #fff;
}
.org-btn:hover,
.org-btn:focus,
.org-btn:active,
.org-btn.active,
.open > .dropdown-toggle.org-btn {
  background: #ff7e00;
  border: 0px solid #ff7e00;
  color: #fff;
}
.org-btn:active,
.org-btn.active,
.open > .dropdown-toggle.org-btn {
  background-image: none;
}
.get-btn {
  background: #515e61;
  display: inline-block;
  margin: 0px 3px 0px;
  padding: 8px 30px 6px;
  border-radius: 20px;
  color: #fff;
  transition: none;
}
.content .btn {
  margin-bottom: 15px;
}

.btn-right {
  position: relative;
  margin: 0px 132px 0px 0px;
  padding: 0px;
  float: right;
  text-align: right;
}

.btn.columns-btn {
  display: inline;
  padding: 6px 7px;
  transition: 0.5s;
  background: linear-gradient(35deg,#2ca5dc,#004998);
  width: auto;
  border: 0px solid #a7b8c8;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 16px;
  color: #fff;
  position: absolute;
  bottom: -55px;
}
.btn.columns-btn:hover, .btn.columns-btn:active {
  background: linear-gradient(35deg,#2ca5dc,#004998);
  border: 0px solid #7c92a8;
  color: #fff;
}
.btn-right button.btn.columns-btn:after {
  font-family: "Glyphicons Halflings";
  content: "\e113";
  position: relative !important;
  color: #fff;
  top: 2px;
  font-weight: normal;
  margin-left: 3px;
  margin-right: -5px;
}
.btn-right button.btn.columns-btn.collapsed:after {
  content: "\e114";
}

/* 切頁 */
.main-but {
  position: absolute;
  top: 108px;
  right: 0px;
}
.main-but > .but-main-right {
  background-color: #fff;
  border-radius: 24px 0 0 24px;
  padding: 6px 4px 4px 16px;
  font-size: 15px;
  line-height: 16px;
  color: #004a97;
  white-space: pre-wrap;
  width: 104px;
}
.main-but > .but-main-right:hover,
.main-but > .but-main-right:focus,
.main-but > .but-main-right:active,
.main-but > .but-main-right:active {
  color: #2ca5dc;
}
	  @media screen and (max-width: 991.98px) {
	  .main-but { top: 68px; z-index: 997; }
	  .main-but > .but-main-right { 
          font-size: 13px;
          line-height: 14px;
          padding: 4px 3px 3px 12px;
          width: 92px; }}


/* ==========================================
   Search Form
   ========================================== */
.search-form {
  position: relative;
  margin: 30px auto;
  width: 100%;
  padding: 0px;
  padding-right: 75px; }
  .search-form button {
	outline: 0; }
  .search-form button:focus {
    webkit-box-shadow: none;
    box-shadow: none;
	outline: 0; }
  .search-form button.btn-search {
	padding-left: 10px;
	padding-right: 9px;
    border-radius: 4px 0px 0px 4px;
	cursor: default; }

  .search-form .btn {
    background: #2ca5dc;
    color: #ffffff;
    font-size: 18px;
	letter-spacing: -0.02em; }
  .search-form .btn:focus {
    border-color: transparent;
    webkit-box-shadow: none;
    box-shadow: none;
	outline: none; }
/*input {
  color: #0F0;
}*/
	
/* input藍色邊  */
  input.form-control {
    border-color: #ccc;
	border-right: #ccc solid 1px; }
  input.form-control:focus {
    border-color: #ccc;
	border-right: #ccc solid 1px;
	webkit-box-shadow: none;
	box-shadow: none; }
  input.form-control::-moz-placeholder {
	color: #8a909d; }
  input.form-control:-ms-input-placeholder {
	color: #8a909d; }
  input.form-control::-webkit-input-placeholder {
	color: #8a909d; }
  input.form-control.left {
    border-color: #ccc;
	border-left: #ccc solid 1px; }
  input.form-control.left:focus {
    border-color: #ccc;
	border-left: #ccc solid 1px;
	webkit-box-shadow: none;
	box-shadow: none; }
  .input-group {
    position: relative;
    background-color: #fff;
    box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.3);
    border: #a7b8c8 solid 1px;
    border-radius: 8px; }
  .input-group > .form-control,
  .input-group > .form-control.left,
  .input-group > .custom-select {
    font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
    font-size: 16px;
    letter-spacing: -0.01em; }
  .input-group > .form-control.left {
    font-size: 18px;
	border: 0px;
	border-radius: 0px; }
  .input-group > input {
    line-height: 1;
    margin-top: 5px;
    margin-bottom: 4px;
	border-radius: 8px;
    border-color: transparent;
    webkit-box-shadow: none;
    box-shadow: none; }
  .input-group > input:focus {
    border-color: #ffffff;
    webkit-box-shadow: none;
    box-shadow: none; }
  .input-group > .input-group-addon {
    font-size: 22px;
    border: 0px solid #ccc;
	border-radius: 7px 0 0 7px;
	padding: 10px 16px 8px; }
  .control-label {
    font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
    font-size: 16px;
	font-weight: normal;
	color: #687480; }

/*--------------- Search Form input-group ---------------*/
  #searchForm .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%; }
  #searchForm .input-group > span.custom-select-line {
    border-left: #a7b8c8 solid 1px;
    margin-top: 5px;
    margin-bottom: 5px; }
    #searchForm .input-group > .form-control,
	#searchForm .input-group > .form-control.sm,
	#searchForm .input-group > .form-control.lg,
    #searchForm .input-group > .custom-select,
	#searchForm .input-group > .custom-select-sm,
	#searchForm .input-group > .custom-select-lg {
      position: relative;
      color: #8a909d;
      flex: 1 1 auto;
      width: auto;
      margin-bottom: 0; }
    #searchForm .input-group > .form-control.sm, #searchForm .input-group > .custom-select-sm {
      flex: 1;
	  width: 33%;
	  display: inline-block; }
    #searchForm .input-group > .form-control.lg, #searchForm .input-group > .custom-select-lg {
      flex: 3;
	  display: inline-block; }
	  #searchForm .input-group > input {
		box-shadow: none; }
	  #searchForm .input-group >  input.form-control {
		border-right: #a7b8c8 solid 1px; }
	  #searchForm .input-group >  input.form-control:focus {
        border-color: #ffffff;
		border-right: #a7b8c8 solid 1px;
	    webkit-box-shadow: none;
		box-shadow: none; }
	  #searchForm .input-group >  input.form-control.left {
		border-left: #a7b8c8 solid 1px;
		border-right: #a7b8c8 solid 0px; }
	  #searchForm .input-group >  input.form-control.left:focus {
        border-color: #ffffff;
		border-left: #a7b8c8 solid 1px;
		border-right: #a7b8c8 solid 0px;
	    webkit-box-shadow: none;
		box-shadow: none; }
	  #searchForm .input-group > .custom-select,
	  #searchForm .input-group > .custom-select-sm,
	  #searchForm .input-group > .custom-select-lg {
        border: none;
		margin-left: 5px;
		white-space: nowrap; }
	  #searchForm .input-group > .custom-select .btn,
	  #searchForm .input-group > .custom-select-sm .btn,
	  #searchForm .input-group > .custom-select-lg .btn {
        background: #ffffff;
        color: #8a909d;
        font-size: 18px; display: block;
		letter-spacing: -0.015em;
        padding: 10px 25px 8px 5px;
		border: none; }
	  #searchForm .input-group > .custom-select btn:focus,
	  #searchForm .input-group > .custom-select-sm btn:focus,
	  #searchForm .input-group > .custom-select-lg btn:focus {
        border-color: #2ca5dc;
        webkit-box-shadow: none;
        box-shadow: none;
        outline: none; }
	  #searchForm .input-group > .custom-select .dropdown-menu,
	  #searchForm .input-group > .custom-select-sm .dropdown-menu,
	  #searchForm .input-group > .custom-select-lg .dropdown-menu {
        font-size: 15px;
		padding: 1px;
		max-width: 350px !important; }
	  #searchForm .input-group > .custom-select .dropdown-menu > li > a,
	  #searchForm .input-group > .custom-select-sm .dropdown-menu > li > a,
	  #searchForm .input-group > .custom-select-lg .dropdown-menu > li > a {
		color: #8a909d;
		white-space: nowrap;
		/*text-overflow: ellipsis;*/
		overflow-x: hidden !important; }
	  #searchForm .input-group > .custom-select .dropdown-menu > li > a:hover,
	  #searchForm .input-group > .custom-select .dropdown-menu > li > a:focus,
	  #searchForm .input-group > .custom-select-sm .dropdown-menu > li > a:hover,
	  #searchForm .input-group > .custom-select-sm .dropdown-menu > li > a:focus,
	  #searchForm .input-group > .custom-select-lg .dropdown-menu > li > a:hover,
	  #searchForm .input-group > .custom-select-lg .dropdown-menu > li > a:focus {
		color: #6a707f;
		text-decoration: none;
		background-color: rgba(0, 0, 0, 0.04); }
	  /* show-tick */
	  #searchForm .input-group > .custom-select .dropdown-menu > li.selected a,
	  #searchForm .input-group > .custom-select-sm .dropdown-menu > li.selected a,
	  #searchForm .input-group > .custom-select-lg .dropdown-menu > li.selected a {
		background-color: rgba(0, 0, 0, 0.04); }
	  #searchForm .input-group > .custom-select .dropdown-menu > li.selected .check-mark,
	  #searchForm .input-group > .custom-select-sm .dropdown-menu > li.selected .check-mark,
	  #searchForm .input-group > .custom-select-lg .dropdown-menu > li.selected .check-mark {
		color: #6a707f; }
	  /* actions-box */
	  #searchForm .input-group > .custom-select .bs-actionsbox .btn-group button,
	  #searchForm .input-group > .custom-select-sm .bs-actionsbox .btn-group button,
	  #searchForm .input-group > .custom-select-lg .bs-actionsbox .btn-group button {
		margin: 0px 0.5%;
		padding: 4px 8px 0px;
		width: 49%;
		color: #687480;
		border-radius: 6px;
		border: #a7b8c8 solid 1px; }
	  #searchForm .input-group > .custom-select .bs-actionsbox .btn-group button:hover,
	  #searchForm .input-group > .custom-select .bs-actionsbox .btn-group button:focus,
	  #searchForm .input-group > .custom-select-sm .bs-actionsbox .btn-group button:hover,
	  #searchForm .input-group > .custom-select-sm .bs-actionsbox .btn-group button:focus,
	  #searchForm .input-group > .custom-select-lg .bs-actionsbox .btn-group button:hover,
	  #searchForm .input-group > .custom-select-lg .bs-actionsbox .btn-group button:focus {
		border: #fff solid 1px;
		color: #fff;
		-webkit-transition: background 0.4s;
		-o-transition: background 0.4s;
		transition: background 0.4s;
		background: #004a97; }
	  /* option-style */
	  .comboBox-l, .comboBox-r {
		position: relative;
		float: left;
		margin: 0%;
		padding: 0px;
		width: 100%;
		border-right: #a7b8c8 solid 0px;
	  }
  @media (min-width: 1200px) {
	  .comboBox-l {
		display: inline-block;
		margin: 0% 50% 0% 0%;
		padding: 0px;
		width: 50%;
		border-right: #a7b8c8 solid 1px;
	  }
	  .comboBox-r {
		display: inline-block;
		margin: -29px 0% 0% 50%;
		padding: 0px;
		width: 50%;
	  }
	  #searchForm .input-group > .custom-select.btn-group .dropdown-toggle .filter-option {
		max-width: 462px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	  } }
	  
	  /* select-button-title 選擇課程主題 */
	  #searchForm .input-group > .custom-select-lg.btn-group .dropdown-toggle .filter-option {
		width: calc(100% - 20px);
		position: absolute !important;
		left: 6px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden; }

	  @media screen and (max-width: 1199.98px) {
	  #searchForm .input-group > .custom-select .btn,
	  #searchForm .input-group > .custom-select-sm .btn,
	  #searchForm .input-group > .custom-select-lg .btn {
        font-size: 16px; }
	  #searchForm .input-group > .custom-select.btn-group .dropdown-toggle .filter-option {
		width: calc(100% - 25px);
		position: absolute !important;
		left: 5px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden; } }
	  @media (min-width: 992px) and (max-width: 1199.98px) {
	  #searchForm .input-group > .custom-select {
		flex: 34%; } }
	  @media (min-width: 768px) and (max-width: 991.98px) {
	  #searchForm .input-group > .custom-select {
		flex: 14%; } }
	  @media (min-width: 480px) and (max-width: 767.98px) {
	  #searchForm .input-group > .custom-select {
		flex: 1; } }
	  @media screen and (max-width: 479.98px) {
	  #searchForm .input-group > .custom-select {
		flex: 3;
		display: block; } }


  .custom-link {
    position: relative;
	margin-top: -62px;
	margin-right: -10px;
	float: right; }
  .custom-list {
    position: relative;
	margin-top: -49px;
	margin-right: 5px;
	float: right; }
  .custom-link a, .custom-list a {
	font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
	font-size: 14px;
	color: #98abbd;
	width: 68px;
	padding: 8px 6px;
	border: #a7b8c8 solid 1px;
	border-radius: 5px;
	background-color: #fff; }
  .custom-list a {
	font-size: 15px; }
  .custom-link a:hover, .custom-list a:hover {
	color: #6d859d;
	border: #7c92a8 solid 1px; }
	
  .form-control-feedback {
	position: absolute;
	top: 25px;
	right: 0;
	z-index: 2;
	display: block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
  }

  @media (max-width: 1199.98px) {
  .search-form {
	padding-right: 50px; }
  #searchForm .input-group {
	margin-left: -15px; }
  .custom-link {
	margin-right: -12px; } }
  @media (max-width: 991.98px) {
  #searchForm .input-group {
	margin-left: -15px; }
    #searchForm .input-group > .form-control {
      width: 1%; }
    #searchForm .input-group > .custom-select {
      width: 0%; }
    #searchForm .input-group > .custom-select .btn {
      font-size: 16px; } }
  @media (max-width: 767.98px) {
  .search-form {
	padding-right: 0px; }
  #searchForm .input-group {
	margin-left: -5px;
	width: 101.5%; }
    #searchForm .input-group > .form-control {
      width: 1%; }
    #searchForm .input-group > .custom-select {
      width: 0%; }
  .custom-link {
	margin-top: -12px;
	margin-right: auto;
	margin-bottom: 18px;
	text-align: center;
	float: none;
	display: block; } }
  @media (max-width: 479.98px) {
  #searchForm .input-group {
	margin-left: -5px;
	width: 104%; } }


.btn-outline-select {
  color: #8a909d;
  background-color: #fff;
  border-color: #ccc;
}
.btn-outline-select:hover,
.btn-outline-select:focus,
.btn-outline-select:active,
.btn-outline-select.active,
.open > .dropdown-toggle.btn-outline-select {
  color: #7a808e;
  background-color: transparent;
  border-color: transparent;
  webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}
.btn-outline-select:active,
.btn-outline-select.active,
.open > .dropdown-toggle.btn-outline-select {
  background-image: none;
}
.btn-outline-select.disabled,
.btn-outline-select[disabled],
fieldset[disabled] .btn-outline-select,
.btn-outline-select.disabled:hover,
.btn-outline-select[disabled]:hover,
fieldset[disabled] .btn-outline-select:hover,
.btn-outline-select.disabled:focus,
.btn-outline-select[disabled]:focus,
fieldset[disabled] .btn-outline-select:focus,
.btn-outline-select.disabled:active,
.btn-outline-select[disabled]:active,
fieldset[disabled] .btn-outline-select:active,
.btn-outline-select.disabled.active,
.btn-outline-select[disabled].active,
fieldset[disabled] .btn-outline-select.active {
  background-color: #fff;
  border-color: #ccc;
}
.btn-outline-select .badge {
  color: #fff;
  background-color: #8a909d;
}
.bootstrap-select .dropdown-toggle:focus {
	outline:none !important;
}


.btn-outline-search {
  color: #8a909d;
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  border-radius: 0px 4px 4px 0px;
  -webkit-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s; }
  .btn-outline-search:hover {
    color: #ffffff;
    background-color: #004a97; }
  .btn-outline-search:focus, .btn-outline-search.focus {
	border-color: #2ca5dc;
    box-shadow: 0 0 0 0.2rem rgba(138, 144, 157, 0.0); }
  .btn-outline-search.disabled, .btn-outline-search:disabled {
    color: #8a909d;
    background-color: transparent; }
  .btn-outline-search:not(:disabled):not(.disabled):active, .btn-outline-search:not(:disabled):not(.disabled).active,
  .show > .btn-outline-search.dropdown-toggle {
    color: #ffffff;
    background-color: #004a97;
    border-color: #2ca5dc; }
    .btn-outline-search:not(:disabled):not(.disabled):active:focus, .btn-outline-search:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-search.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(138, 144, 157, 0.0);
	  border-color: #004a97; }

/* ==========================================
   Table
   ========================================== */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #fafbfc;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* ==========================================
   Modal Content
   ========================================== */
body.modal-open{ overflow: hidden; position: fixed; width:100%; }
.close {
  color: #fff;
  font-size: 32px;
  font-weight: normal;
  text-shadow: -1px 0 #2ca5dc, 0 1px rgba(0,0,0,0.25), 1px 0 rgba(0,0,0,0.25), 0 -1px #2ca5dc;
  filter: alpha(opacity=80);
  opacity: .8;
  -webkit-transition: .15s all ease;
  -o-transition: .15s all ease;
  transition: .15s all ease;
}
.close:hover,
.close:focus {
  color: #fff;
  filter: alpha(opacity=100);
  opacity: 1.0;
  text-decoration: none;
  /*margin-top: -2px;*/
  outline: none;
}
.modal-dialog .close {
  position: fixed;
  top: -2px;
  right: 0px;
  padding: 20px;
}
  @media screen and (max-width: 767.98px) {
  /*全版一樣*/
  .modal-dialog {
	margin-top: 30px;
	margin-bottom: 30px;}
  .modal-footer .btn.cta-btn, .modal-footer .btn.cta-btn-outline {
	margin-bottom: 10px; }}
.modal-content {
  border: 0px solid #999;
  border: 0px solid rgba(0, 0, 0, .2);
  border-radius: 3px;
}
.modal-content p, .modal-content ul, .modal-content ol {
  font-size: 16px;/*add*/
}
.modal-header {
  border-bottom: 0px solid #e5e5e5;
  margin-bottom: 25px;
  border-radius: 3px 3px 0px 0px;
}
.modal-header.btm-no {
  margin-bottom: 0px;
}
.modal-title {
  color: #ffffff;
  text-align: center;
  padding-top: 5px;
}
.modal-footer {
  border-top: 1px solid #e5e5e5;
  /*margin-top: 20px;*/
  padding: 1em;
}
/*--------------- Modal 會員服務&隱私權條款、人才招募 ---------------*/
#Privacyservice .modal-content > .modal-header, #employee .modal-content > .modal-header {
  border-bottom: 0px solid #e5e5e5;
  margin-bottom: 25px;
  border-radius: 3px 3px 0px 0px;
  background: #2ca5dc;
}
#Privacyservice .modal-body > .modal-header > h2.modal-title, #employee .modal-body > .modal-header > h2.modal-title {
  color: #687480;
  border-bottom: 1px solid #e5e5e5;
  margin-top: 25px;
  margin-bottom: -15px;
  padding-bottom: 8px;
}
#Privacyservice .modal-body > h2.modal-title, #Privacyservice .modal-footer, #employee .modal-body > h2.modal-title, #employee .modal-footer {
  text-align: center;
}
#Privacyservice .modal-footer button.btn-default, #employee .modal-footer button.btn-default {
  display: inline-block;
  margin: 0px 3px 0px;
  padding: 10px 30px 8px;
  -webkit-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
  background: #2ca5dc;
  width: auto;
  border: 1px solid transparent;
  color: #fff;
}
#Privacyservice .modal-footer button.btn-default:hover, #employee .modal-footer button.btn-default:hover {
  background: #004a97;
  border: 1px solid transparent;
  color: #fff;
}
#Privacyservice .modal-footer button.btn-default:hover,
#Privacyservice .modal-footer button.btn-default:focus,
#Privacyservice .modal-footer button.btn-default:active,
#Privacyservice .modal-footer button.btn-default.active,
#employee .modal-footer button.btn-default:hover,
#employee .modal-footer button.btn-default:focus,
#employee .modal-footer button.btn-default:active,
#employee .modal-footer button.btn-default.active {
  background: #004a97;
  border: 1px solid transparent;
  color: #fff;
}
#Privacyservice .modal-footer button.btn-default:active,
#Privacyservice .modal-footer button.btn-default.active,
#employee .modal-footer button.btn-default:active,
#employee .modal-footer button.btn-default.active {
  background-image: none;
}
/*employee*/
.modal-body.employee {
    margin-bottom: -20px;
	padding-top: 5px;
    background-image: none;
}
.employeeBox {
	padding: 10px;
	margin-bottom: 20px;
	border-radius: 10px;
	color: #FFFFFF;
	text-align: center;
}
.employeeBoxBody{
	padding-left:0%;
	font-size: 1.2em;
}
.employeeBoxBody h3{
	font-size: 1.4em;
	font-weight: bold;
	color: #2ca5dc;
	margin-top: 20px;
	margin-bottom: 5px;
}
.employeeBoxBody h4 {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 5px;
}
.employeeBoxBody p.tag_tip {
	background: #004f97;
	color: #FFF;
	font-size: 1.2em;
	text-align: center;
	border-radius: 10px;
	padding: 5px;
	margin-top: 0px;
    width: inherit;
}
.employeeBoxBody p.tag_tip:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(79, 129, 189, 0);
	border-left-color: #004f97;
	border-width: 8px;
	margin-top: -8px;
}
  @media (min-width: 992px) {
  .modal-body.employee {
	background: url(../img/employee_bg.png) no-repeat left bottom;
  }
  .employeeBoxBody p.tag_tip {
    float:right;
    margin-top: 10px;
  }}
.employeeBox#al_form {
	background-color: #f7f9fb;
	border: #b4bcc8 1px solid;
	border-radius: 20px;
}
.employeeBox h4 {
	color: #2ca5dc;
	font-size: 1.5em;
	margin-bottom: 10px;
	margin-top: 5px;
}
.employeeBox .file-group {
	margin: 0;
	line-height: 0;
}
.employeeBox button.btn-primary {
  background-color: #086db9;
}
.employeeBox button.btn-primary:hover,
.employeeBox button.btn-primary:focus,
.employeeBox button.btn-primary.focus,
.employeeBox button.btn-primary:active,
.employeeBox button.btn-primary.active {
  color: #fff;
  background-color: #004f97;
  border-color: #204d74;
}
.employeeBox td {
	width: 100%;
	padding: 4px 5px;
	color: #9dabb4;
	font-size: 15px;
	font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
	text-align: left;
	line-height: 1.45;
	border-bottom: #c9d1df solid 0.5px;
}

/*--------------- Modal 公告&隱私權條款、新手教學webcam ---------------*/
#bulletin .modal-dialog .close, #bulletin_modal .modal-dialog .close, #provision .modal-header .close, #ModalWebcam .modal-header .close {
  position: relative;
  /*top: -2px;
  right: 0px;*/
  padding: 20px;
  color: #fff;
  font-size: 32px;
  font-weight: normal;
  text-shadow: -1px 0 #2ca5dc, 0 1px rgba(0,0,0,0.25), 1px 0 rgba(0,0,0,0.25), 0 -1px #2ca5dc;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
#bulletin .modal-dialog .close:hover, #bulletin .modal-dialog .close:focus, #bulletin_modal .modal-dialog .close:hover, #bulletin_modal .modal-dialog .close:focus, #provision .modal-header .close:hover, #provision .modal-header .close:focus, #ModalWebcam .modal-header .close:hover, #ModalWebcam .modal-header .close:focus {
  color: #fff;
  filter: alpha(opacity=100);
  opacity: 1.0;
  text-decoration: none;
  outline: none;
}
#bulletin .modal-header, #bulletin_modal .modal-header, #provision .modal-header, #ModalWebcam .modal-header {
  border-bottom: 0px solid #e5e5e5;
  margin-bottom: 25px;
  border-radius: 3px 3px 0px 0px;
  background-color: #2ca5dc;
}
#bulletin .modal-footer, #bulletin_modal .modal-footer, #provision .modal-footer, #ModalWebcam .modal-footer {
  text-align: center;
}
#bulletin .modal-footer a.btn-default, #bulletin_modal .modal-footer a.btn-default, #provision .modal-footer button.btn-default, #ModalWebcam .modal-footer button.btn-default {
  display: inline-block;
  margin: 0px 3px 0px;
  padding: 10px 30px 8px;
  -webkit-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
  background: #2ca5dc;
  width: auto;
  border: 1px solid transparent;
  color: #fff;
}
#bulletin .modal-dialog .close, #bulletin_modal .modal-dialog .close {
  margin-top: -4px;
  z-index: 1 !important;
}
#bulletin .modal-footer, #bulletin_modal .modal-footer {
  top: calc(100% - 116px);
  bottom: auto;
  max-height: 420px;
  position: absolute !important;
}
#bulletin .modal-content .navbar-fixed-bottom, #bulletin_modal .modal-content .navbar-fixed-bottom {
  display: inline-block;
}
@media (min-width: 992px) {
  #bulletin .modal-lg, #bulletin_modal .modal-lg {
    width: 900px;
  }
}
/*--------------- Modal-Dialog 公告&隱私權條款 ---------------*/
#bulletin h2, #bulletin h3.modal-title, #bulletin_modal h2, #bulletin_modal h3.modal-title {
  padding-top: 20px;
}
#bulletin_modal h3.modal-title {
  line-height: 43px;
}
#bulletin .modal-dialog, #bulletin_modal .modal-dialog {
  height: calc(100% - 60px);
}
#bulletin .modal-content, #bulletin_modal .modal-content {
  background-color: #fff;
  min-height: 420px;
  height: 100%;
}
#bulletin .modal-body, #bulletin_modal .modal-body {
  margin: -25px 0px 0px;
}
#bulletin .modal-body .container, #bulletin_modal .modal-body .container {
  position: relative;
  max-width: 100%;
  height: auto;
  min-height: 225px;
  margin: 0px auto;
  padding: 0px;
}
#bulletin .modal-body .container .col-xs-12, #bulletin_modal .modal-body .container .col-xs-12 {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 258px) !important;
  min-height: 100%;
  padding: 0px 10px;
}
#bulletin .modal-body .container .col-xs-12 {
  min-height: 225px;
}
#bulletin .modal-body .container img, #bulletin_modal .modal-body .container img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
#bulletin .modal-body .container table.announce {
  width: 100%;
  height: auto;
  padding: 0px;
}
#bulletin .modal-body table.table-hover > tbody > tr > td {
  border-top: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 15px 0px;
}
#bulletin .modal-body table.table-hover > tbody > tr:last-child {
  border-bottom: 2px solid #fff;
}
#bulletin .modal-body table.table-hover > tbody > tr > td a {
  font-size: 16px;
  line-height: 1.25;
  color: #2ca5dc;
}
#bulletin .modal-body table.table-hover > tbody > tr > td a:active,
#bulletin .modal-body table.table-hover > tbody > tr > td a:focus {
  color: #424242;
  text-decoration: none;
}
#bulletin .modal-body table.table-hover > tbody > tr > td.text-visit a {
  color: #424242;
  text-decoration: none;
}
#bulletin .modal-body table.table-hover > tbody > tr > td.text-visit:hover a {
  color: #424242;
}
/*#provision .modal-body.privacy {
	width: 100%;
	height: 100%;border:#C3C solid 1px;
	padding-top: 25px;
}*/
#provision .modal-body.privacy p, #provision .modal-body.privacy ol {
  max-width: 100%;
  margin-left: 12px;
  padding: 0px 0px;
  text-align: justify;
}
#provision .modal-body.privacy ol {
  list-style-type: decimal;
}
#provision .modal-body.privacy ol li {
  margin-bottom: 10px;
}
@media (max-width: 767.98px) {

  #bulletin .modal-body .container {
      width: 100%;
      max-width: 100%;
      margin: 0px auto;
  }
  #bulletin .modal-body .container table.announce {
      width: calc(100% + 20px);
      max-width: calc(100% + 20px);
      margin: 0px -10px;
  }
  #bulletin .modal-content .navbar-fixed-bottom {
      margin: 0px 20px;
  }
}
@media (min-width: 992px) {
  #provision .modal-body.privacy p, #provision .modal-body.privacy ol {
      max-width: calc(900px - 105px);
      margin-left: 35px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #provision .modal-body.privacy p, #provision .modal-body.privacy ol {
      max-width: calc(100% - 27.5%);
      margin-left: 25px;
  }
}

.modal-body h3.detime {
  font-size: 23px;
}
.modal-body p {
  margin: 0px auto 5px;
}
.modal-body strong {
  font-size: 18px;
}
.modal-body .text-red {
  color: #e6281c;
}
.modal-body ul li {
  margin: 5px 20px 20px;
  padding: 0px;
}
.modal-body ul li h4 {
  margin: 0px 0px 5px;
  padding: 0px;
}
.modal-body ul il p {
  margin: 0px;
  padding: 0px;
}
.modal-body .content img, .modal-body .content-large img {
  margin-top: 0px;
  margin-bottom: 5px;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.modal-body .content .btn {
  margin: 8px 3px;
}
.modal-body .content-large .btn {
  margin: 8px 3px 0px;
}
.modal-body iframe.videoBox {
  margin: 0px auto 0px;
  padding: 5px 5px;
}
.modal-body .container {
  margin: 0px 20px 0px;
  padding: 0px;
  width: auto;
}
.modal-body .container p {
  margin-bottom: 5px;
}
.modal-body .container ol > li, .modal-body .container ul > li {
  list-style-type: auto; 
  margin: 2px 0px 2px 20px;
  padding: 0px;
}
.modal-body .container ol > ol > li, .modal-body .container ul > ul > li {
  margin-left: 40px;
}
.modal-body .container ol > ol > li {
  list-style-type: upper-alpha; 
  margin-left: 40px;
}
.modal-body .container > .divider {
  border-bottom: 1px dotted #D2D9DC;
  margin-top: 10px;
  margin-bottom: 20px;
}

.modal-content ul.explanbox {
  margin: 10px 0px -20px 0px;
  padding: 20px 42px 5px;
  border-radius: 4px;
}

.modal-content ul.explanbox h4 {
  margin: 0px 0px 10px -23px;
  padding-top: 5px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 21px;
  color: #004a97;
}

.modal-content ul.explanbox li {
  list-style-type: square;
  margin: 0px 0px 15px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 16px;
  color: #333;
}

.modal-content ul.explanbox li p {
  margin: 3px 0px 5px;
  padding: 0px;
  font-size: 15px;
  line-height: 18px;
  color: #777;
}

.modal-content ul.explanbox li b.text-red {
  font-size: 21px;
  line-height: 24px;
  color: #e6281c;
}

.modal-content ul.explanbox li ol {
  margin: 2px 0px 0px 18px;
}
.modal-content ul.explanbox li ol li {
  margin: 0px 0px 3px;
  padding: 0px;
  font-size: 15px;
  line-height: 18px;
  color: #777;
  list-style-type: decimal;
}
/*--------------- Modal-Body New ---------------*/
/*---- bulletin-body ----*/
.bulletin-body {
  margin: 0px;
}
.bulletin-body small.text-muted {
  position: absolute;
  margin: 0px;
  top: -25px;
}
.bulletin-body hr {
  margin-top: 5px;
  margin-bottom: 15px;
}
/*--------------- Modal-Body title-content ---------------*/
#unitInfoModal .title-content, #unitInfo .title-content {
  margin: -20px 1% 10px;
  padding: 0px;
  width: 98%;
  height: auto;
  text-align: left;
  display: inline-block;
  border-bottom: 1px dashed #ececec;
  float: left;
}
/*.modal-body hr.line {
  margin-top: 0px;
  border-top: 1px dashed #ececec;
}*/
#unitInfoModal .title-content time, #unitInfo .title-content time {
  font-size: 18px;
  line-height: 28px;
  color: #585858;
  margin-left: 50px;
}
#unitInfoModal .title-content time:before, #unitInfo .title-content time:before {
  content: "日期";
  position: absolute;
  left: 10px;
  font-size: 16px;
  line-height: 18px;
  color: #fff;
  padding: 4px 6px 2px;
  background-color: #2ca5dc; 
  border-radius: 4px;
}
#unitInfoModal .title-content ul, #unitInfo .title-content ul {
  margin: 0px;
  padding: 5px 0px 0px 22px;
}
#unitInfoModal .title-content ul span, #unitInfo .title-content ul span {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 18px;
  color: #585858;
  margin-left: -22px;
}
#unitInfoModal .title-content ul li, #unitInfo .title-content ul li {
  margin: 0px 0px 5px;
  padding: 0px;
  font-size: 16px;
  color: #687480;
  list-style: square;
}
#unitInfoModal .title-content div.left, #unitInfo .title-content div.left {
  float: left;
  width: 100%;
  padding: 0px 0px 10px 10px;
  display: block;
  position: relative;
}
#unitInfoModal .title-content div.right, #unitInfo .title-content div.right {
  float: right;
  width: 100%;
  padding: 5px 0px 20px 20px;
  display: block;
  position: relative;
}
  @media (min-width: 580px) {
  #unitInfoModal .title-content div.left, #unitInfo .title-content div.left {
	width: 60%; }
  #unitInfoModal .title-content div.right, #unitInfo .title-content div.right {
	width: 40%; } }
#unitInfoModal .title-content img, #unitInfo .title-content img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
/*--------------- Modal-Body 雲端影音-多益 ---------------*/
#more-features .modal-body {
  margin: -25px auto -20px;
  padding: 30px 3% 5px;
}

/*--------------- Modal-Body 新手教學webcam ---------------*/
.modal-body .webcam {
  margin: 0px auto;
  padding: 0px;
  width: 100%;
}
#ModalWebcam .modal-dialog .close {
  margin: -18px -15px;
}
#ModalWebcam .modal-body {
  padding: 0px;
}
#ModalWebcam .modal-footer {
  margin-top: 0px;
}
#ModalWebcam .carousel-inner > .item > img, #ModalWebcam .carousel-inner > .item > a > img, #ModalWebcam .carousel-caption img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 5px solid rgba(201, 210, 218, 0.15);
  margin: 10px auto 25px;
}
#ModalWebcam .carousel-caption {
  position: relative;
  text-shadow: none;
  margin: 0px 42px 0;
  padding: 0;
  top: 12px;
  left: 0;
  border-top: #f7f8f9 solid 3px;
}
#ModalWebcam .carousel-caption * {
  color: #0e0b0e;
  text-align: left;
}
#ModalWebcam .carousel-caption img {
  width: calc(100% + 42px);
  margin: 12px -42px 25px;
}
#ModalWebcam .carousel-caption h3 {
  color: #687480;
  margin-top: 10px;
}
#ModalWebcam .carousel-caption h3 span {
  color: #2ca5dc;
  font-size: 95%;
  display: block;
  margin: 0px 6px 8px 0px;
}
#ModalWebcam .carousel-caption h3 span.d-inline {
  display: inline;
}
#ModalWebcam .carousel-caption h3 span.bold {
  font-size: 110%;
  font-weight: bold;
  line-height: 1.5;
}
#ModalWebcam .carousel-caption h3 .count {
  color: #2ca5dc;
  font-size: 150%;
  font-weight: bold;
  display: inline;
  margin-left: 3px;
}
#ModalWebcam .carousel-caption h3 .countbadge {
  color: #fff;
  font-size: 120%;
  font-weight: bold;
  display: inline;
  border-radius: 20px;
  background-color: #2ca5dc;
  padding: 0px 10px;
}
#ModalWebcam .carousel-caption p {
  font-size: 1.5em;
  line-height: 1.25;
}
#ModalWebcam .carousel-caption a.under-line {
  color: #2ca5dc;
  font-weight: bold;
  text-decoration: underline;
}
#ModalWebcam .carousel-caption a.under-line:hover {
  color: #004a97;
}
#ModalWebcam .carousel-caption small {
  font-size: 15px;
}
#ModalWebcam .carousel-caption strong {
  font-size: 105%;
}
#ModalWebcam .carousel-caption strong.text-main {
  color: #2ca5dc;
}
#ModalWebcam .carousel-caption .glyphicon {
  font-size: 90%;
  margin-left: 2px;
  margin-right: 3px;
}
#ModalWebcam .carousel-caption .text-red, #ModalWebcam .carousel-caption li.text-red {
  color: #c30d23;/*color: #e6281c;*/
}
#ModalWebcam .carousel-caption .text-orange, #ModalWebcam .carousel-caption li.text-orange {
  color: #f89800;
}
#ModalWebcam .carousel-caption .text-h3, #ModalWebcam .carousel-caption li.text-h3 {
  color: #687480;
}
#ModalWebcam .carousel-caption ul.explanbox {
  width: calc(100% + 84px);
  margin: -10px -42px 0px;
  padding: 25px 35px 25px;
}
#ModalWebcam .carousel-caption ul.explanbox li {
  list-style-type: none;
  margin: 0px 0px 6px 1.34em;
  font-size: 1.34em;
  line-height: 1.25;
}
#ModalWebcam .carousel-caption ul.explanbox li::before {
  position: absolute;
  content: "※";
  margin-left: -1.34em;
}
#ModalWebcam .carousel-caption ul.explanbox li p {
  font-size: 100%;
}
#ModalWebcam .carousel-control {
  background-image: none;
  color: #687480;
  text-shadow: none;
  opacity: 0.3;
}
#ModalWebcam .carousel-control.left {
  margin-left: 3%;
}
#ModalWebcam .carousel-control.right {
  margin-right: 3%;
}
#ModalWebcam .carousel-indicators {
  bottom: calc(100% + 8px);
}

#ModalWebcam .carousel-indicators .active {
  background-color: #BCC7D1;
  width: 12px;
  height: 12px;
  margin: 0;
}
#ModalWebcam .carousel-indicators li {
  border: 1px solid #BCC7D1;
  width: 10px;
  height: 10px;
  margin: 1px;
}
#ModalWebcam .carousel-indicators-numbers {
  width: 94%;border: #4543AD solid 0px;
  margin: -10px calc(-100%/2 + 3%) 0;
  height: auto;
  position: relative;
  line-height: 1.5;
}
#ModalWebcam .carousel-indicators-numbers .active, #ModalWebcam .carousel-indicators-numbers li.active {
  margin: 0px 1px;
  padding: 9px 29px 6px 11px;
  width: auto;
  height: auto;
  border: none;
  border-radius: 18px;
  line-height: 1;
  font-size: 1em;
  background-color: #2ca5dc;
}
#ModalWebcam .carousel-indicators-numbers li:hover.active, #ModalWebcam .carousel-indicators-numbers li:focus.active {
  line-height: 1;
  font-size: 1em;
  background-color: #2ca5dc;
}
#ModalWebcam .carousel-indicators-numbers li {
  position: relative;
  text-indent: 0;
  display: inline-flex;
  margin: 3px 0px 3px;
  padding: 3px 24px 3px 9px;
  width: auto;
  height: auto;
  border: none;
  border-radius: 12px;
  line-height: 1.5;
  font-size: 12px;
  font-weight: bolder;
  color: #fff;
  background-color: #bcc7d1;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
#ModalWebcam .carousel-indicators-numbers li:hover, #ModalWebcam .carousel-indicators-numbers li:focus {
  line-height: 1.5;
  background-color: #828e98;
}
#ModalWebcam .carousel-indicators-numbers li span {
  position: absolute;
  content: "";
  line-height: 1;
  font-size: 2em;
  top: calc(100%/4 - 0.25em);
  right: 8px;
}
#ModalWebcam .carousel-indicators-numbers .active.double, #ModalWebcam .carousel-indicators-numbers .double li.active {
  padding-right: 42px;
}
#ModalWebcam .carousel-indicators-numbers .double {
  letter-spacing: -0.05em;
  padding-right: 35px;
}
#ModalWebcam .carousel-control .glyphicon-chevron-left, #ModalWebcam .carousel-control .glyphicon-chevron-right, #ModalWebcam .carousel-control .icon-prev, #ModalWebcam .carousel-control .icon-next {
  top: calc(100%/2 + 56px);
}
#ModalWebcam .carousel-control .glyphicon-chevron-left, #ModalWebcam .carousel-control .icon-prev {
  left: 0px;
}
#ModalWebcam .carousel-control .glyphicon-chevron-right, #ModalWebcam .carousel-control .icon-next {
  right: 0px;
}

  @media screen and (max-width: 479.98px) {
  #ModalWebcam .carousel-indicators-numbers .active, #ModalWebcam .carousel-indicators-numbers li.active {
	padding-right: 27px; }
  #ModalWebcam .carousel-indicators-numbers li {
	padding-right: 22px; }
  #ModalWebcam .carousel-indicators-numbers .active, #ModalWebcam .carousel-indicators-numbers li.active, #ModalWebcam .carousel-indicators-numbers li:hover.active, #ModalWebcam .carousel-indicators-numbers li:focus.active {
	line-height: 0.85;
	font-size: 0.85em;}
  #ModalWebcam .carousel-indicators-numbers .active.double, #ModalWebcam .carousel-indicators-numbers .double li.active {
	padding-right: 37px; }}
	
/* ==========================================
   ctl00_ContentPlaceHolder Modal Content 預約課程視窗
   ========================================== */
#main .dxpcModalBackLite_Office2010Black,
#main .dxdpModalBackLite_Office2010Black {
	background-color: Black;
	opacity: 0.5;
	filter: progid:DXImageTransform.Microsoft.Alpha(Style=0, Opacity=50);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	visibility: hidden;
}
#main .dxpcLite_Office2010Black {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 0px solid #999;
  border: 0px solid rgba(0, 0, 0, .2);
  border-radius: 3px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  margin: 0px auto;
}
#main .dxpcLite_Office2010Black.dxpc-mainDiv .modal-body {
  overflow-x: hidden;
  overflow-y: auto;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 258px) !important;
  min-width: 100%;
  min-height: 320px;
  height: auto;
  margin: 0px;
}
  /* 指定一對一 */
#ctl00_ContentPlaceHolder1_popCourseResere_PWC-1 .modal-body .content {
  min-height: 380px;
}
  /* SP課程 */
#ctl00_ContentPlaceHolder1_popSPCourseResere_PWC-1 .modal-body .content {
  min-height: 428px;
  margin-top: -5px;
}
#main .dxpcLite_Office2010Black > .dxpc-header {
  border-radius: 3px 3px 0px 0px;
  background-color: #2ca5dc;
  background-image: none;
  border-color: #2ca5dc;
  padding: 17px 14px 16px;
  text-align: center;
}
#main .dxpcLite_Office2010Black > .dxpc-header > .dxpc-closeBtn {
  color: #fff;
  position: relative;
  margin: -12px -14px 0px 0px;
  padding: 20px;
  /*max-width: 20px;
  max-height: 20px;*/
  text-shadow: -1px 0 #2ca5dc, 0 1px rgba(0,0,0,0.25), 1px 0 rgba(0,0,0,0.25), 0 -1px #2ca5dc;
  font-weight: normal;
  filter: alpha(opacity=80);
  opacity: .8;
  -webkit-transition: .15s all ease;
  -o-transition: .15s all ease;
  transition: .15s all ease;
  display: block;
}
#main .dxpcLite_Office2010Black > .dxpc-header > .dxpc-closeBtn img.dxWeb_pcCloseButton_Office2010Black {
  background-image: none;
  background-color: transparent;
  margin: -3px 0px 0px calc(100% - 14px);
  padding: 10px;
}
#main .dxpcLite_Office2010Black > .dxpc-header > .dxpc-closeBtn:before {
  content: "×";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
  line-height: 1;
  position: absolute;
  top: 10px;
  right: 20px;
}
#main .dxpcLite_Office2010Black > .dxpc-header > .dxpc-closeBtn:hover,
#main .dxpcLite_Office2010Black > .dxpc-header > .dxpc-closeBtn:focus {
  color: #fff;
  filter: alpha(opacity=100);
  opacity: 1.0;
  text-decoration: none;
  outline: none;
}
#main .dxpcLite_Office2010Black > .dxpc-header span.dxpc-headerText {
  color: #ffffff;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 30px;
  padding-top: 5px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper {
  margin: 0px;
  padding: 0px;
  position: relative;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 16px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content h3.detime {
  font-size: 23px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content p {
  font-size: 16px;/*add*/
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content span.form-lab {
  margin-top: 20px;
  margin-left: -15px;
  padding: 0px;
  color: #687480;
  font-size: 16px;
  text-align: right;
  line-height: 48px;
  height: 68px;
  display: inline-block;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .form-icon {
  position: relative;
  margin: 20px 0px 0px;
  padding: 0px 25px 0px 10px;
  display: inline-block;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .form-icon span.glyphicon {
  padding: 0px;
  font-size: 22px;
  color: #687480;
  position: absolute;
  left: 30px;
  top: 13px;
  z-index: 3;
}	
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control {
  position: relative;
  margin: 0px 0px 20px;
  padding: 0px;
  height: 100%;
  border-radius: 8px;
  box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.3);
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control:before {
  position: absolute;
  content: " ";
  width: 55px;
  height: 100%;
  background-color: #eee;
  font-size: 22px;
  border: 0px solid #ccc;
  border-radius: 7px 0 0 7px;
  padding: 8px 16px 8px;
  left: 0px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0px rgba(102, 175, 233, .0);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0px rgba(102, 175, 233, .0);
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control .dxeButtonEditButton {
  border: 1px solid #e6e6e6;
  border-top-width: 0px;
  border-bottom-width: 2px;
  background-color: #e6e6e6;
  border-radius: 0px 5px 5px 0px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control .dxeButtonEditButton:after {
  content: " ";
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #687480;
  top: calc(100% - 25px);
  left: calc(100% - 27px);
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 8px 6px 0px 6px;
  border-color: #687480 transparent transparent transparent;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control img.dxEditors_edtDropDown {
  background-image: none;
  border: 0px solid #e6e6e6;
  border-radius: 5px;
  padding-left: 18px;
  padding-right: 18px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control .dxeEditArea {
  width: calc(100% - 56px);
  height: 44px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 16px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  float: right;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control input.dxeEditArea:focus {
  outline-color: #eee;

}
  @media screen and (max-width: 767.98px) {
  #main .dxpcLite_Office2010Black {
	position: fixed;
	top: auto;
	bottom: auto;
  }
  #main .dxpcLite_Office2010Black.dxpc-mainDiv .modal-body {
	max-height: calc(100vh - 550px) !important;
	min-height: 220px;
  }
  /* 指定一對一 */
  #ctl00_ContentPlaceHolder1_popCourseResere_PWC-1 .modal-body .content {
	min-height: 200px;
  }
  /* SP課程 */
  #ctl00_ContentPlaceHolder1_popSPCourseResere_PWC-1 .modal-body .content {
	min-height: inherit;
	margin-top: -22px;
  }}
/*----------------------- CalendarHeader 日曆左右選單 -----------------------*/
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxeCalendarHeader {
  position: relative;
  margin: 0px;
  display: block;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxeCalendarHeader img.dxEditors_edtCalendarPrevYear,
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxeCalendarHeader img.dxEditors_edtCalendarNextYear,
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxe img.dxEditors_edtCalendarPrevMonth,
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxe img.dxEditors_edtCalendarNextMonth {
  position: absolute;
  top: 31px;
  max-width: 16px;
  height: 15px;
  cursor: pointer;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxeCalendarHeader img.dxEditors_edtCalendarPrevYear {
  left: 7px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxeCalendarHeader img.dxEditors_edtCalendarNextYear {
  right: 3px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxe img.dxEditors_edtCalendarPrevMonth {
  max-width: 12px;
  left: 18px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content td.dxe img.dxEditors_edtCalendarNextMonth {
  max-width: 12px;
  right: 18px;
}
  @media (min-width: 480px) and (max-width: 767.98px) {
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content span.form-lab {
	width: 29%;
	margin-left: -0px;
	display: block;
	float: left; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .form-icon {
	width: 65%;
	padding: 0px 0px 0px 10px;
	display: block;
	float: left; }}
  @media screen and (max-width: 479.98px) {
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content span.form-lab {
	width: 96%;
	text-align: left;
	line-height: 32px;
	height: auto;
	display: block;
	float: left;
	margin-top: 5px;
	margin-left: 0px;
	padding: 0px 13px 0px 15px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .form-icon {
	width: 96%;
	margin: 0px 0px 0px;
	padding: 0px 0px 0px 13px;
	display: block;
	float: left; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content table.form-control .dxeEditArea {
	padding: 2px 6px;
	font-size: 15px; /*日期*/ }}

#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button, #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-teach-button {
  margin: 10px auto 0px;
  position: relative;
  text-align: left; /*靠左*/
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label {
  margin: 0px auto 0px;
  padding: 0px;
  text-align: center;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.btn {
  font-size: 18px;
  letter-spacing: 1px;
  margin: 0px auto 0px;
  padding: 10px 8px 8px 8px;
  width: 96%;
  display: inline-table;
}
/* 指定老師 label.btn */
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-teach-button label.btn, .modal-body .radio-teach-button label.btn {
  margin: 0px 5px 0px;
  padding: 0px;
  width: calc(280px - 10px);
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn.min-w,
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline.min-w,
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline-org.min-w,
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.gry-btn.min-w,
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.org-btn.min-w {
  min-width: 186px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button input, #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-teach-button input, .modal-body .radio-teach-button input {
  visibility: hidden !important;
  margin-left: -13px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .content img,
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button img {
  margin-top: -25px;
  margin-right: 20px;
  margin-bottom: 20px;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-teach-button img {
  max-width: calc(100% + 42px);
  max-height: calc(100% + 20px);
}

#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-dialog {
  position: relative;
  width: 100%;
  margin: 20px auto 0px;
  padding: 0px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-content {
  position: relative;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .0);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .0); 
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body {
  padding: 1em;
}
  @media (min-width: 992px) {
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-footer {
	margin-top: 0px; }}

#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-footer input#ctl00_ContentPlaceHolder1_popToeicReserve_txtSelectID {
  display: inline;
  width: 0px;
}

/*----------------------- ctl00_ContentPlaceHolder fileUpload 上傳教材 -----------------------*/
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .form-inline {
  margin: 0px auto;
  padding: 0px;
  position: relative;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .input-group {
  margin: 5px auto 25px;/*margin: 20px auto;*/
  padding: 0px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .input-group .cta-btn {
  margin: 0px -1px;
  padding: 15px 15px 13px;
  border-radius: 0px 6px 6px 0px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .input-group .cta-btn-up {
  margin: -10px 10px -10px 0px;
  padding: 10px 20px;
  border: 0;
  border-radius: 6px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .input-group .cta-btn-upload {
  margin: 0px;
  padding: 10px 20px;
  border-right-color: #a7b8c8;
  border-radius: 6px 0px 0px 6px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .input-group a.cta-btn-upload {
  color: #687480;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .fileUpload {
  position: relative;
  /*overflow: hidden;*/
  margin: 0px;
  padding: 0px 0px 0px 10px;
  display: inline-block;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .fileUpload input.upload {
  position: absolute;
  top: -34px;
  left: -100px;
  font-size: 16px;
  cursor: pointer;
  width: auto;
  height: 55px;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  background-color: transparent;
  color: transparent;
  z-index: 2;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .fileUpload input.upload:focus {
  outline: 0;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .input-group span#fileUpload-info {
  margin: 2px 8px 2px;
  padding: 0px;
  position: relative;
  width: 100%;
  color: #687480;
  line-height: 2;
  text-align: left;
  vertical-align: middle;
}
/*#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .input-group span#fileUpload-info label.control-label {
  padding-top: 3px;
}*/
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content span.control-label-upload {
  position: absolute;
  top: 0;
  left: 113px;
  margin: 0px;
  padding: 0px 4px 0px 8px;
  width: 188px;
  background: #fff;
  border-radius: 0px 4px 4px 0px;
  border: 0px;
  font-size: 18px;
  font-weight: normal;
  line-height: 42px;
  color: #687480;
  text-align: left;
  vertical-align: middle;
  display: inline-block !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 3;
}

/* 指定老師 上傳2025 */
div.input-group.d-flex.d-justify > .Upload {
  width: auto;
}
div.input-group.d-flex.d-justify table#UploadFile2 {
  width: auto;
  max-width: 100%;
  align-items: start;
}
div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs {
  margin-left: 5px;
}
div.input-group.d-flex.d-justify table#UploadFile2,
div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs,
div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs input[type="text"].dxucEditArea {
  font: 16px sans-serif;
  width: 610px;
  border: 1px solid transparent;
}
div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucBrowseButton, div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucBrowseButton a {
  border: 1px solid transparent;
  background: #d7f3ff;
  line-height: 1.4;
  border-radius: 20px;
  outline: none;
  text-decoration: none;
  padding-left: 0px;
  padding-right: 0px;
  display: flex;
  align-items: center;
  margin-left: 11px;
  margin-right: 11px;
}
div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucTextBox {
  border: 1px solid transparent;
  border: 1px solid #ddd;
}
div.input-group.d-flex.d-justify input.btn-default {
  border: 1px solid #aaa;
  margin: 8px 20px 8px 8px;
  line-height: 1.4;
  font-size: 16px;
}
input#UploadFile2_TextBox0_FakeInput {
  border: 1px solid transparent;
}
span#lblUploadMsg {
  position: absolute;
  top: auto;
  bottom: auto;
  left: 20px;
}
  @media (min-width: 768px) and (max-width: 991.98px) {
  div.input-group.d-flex.d-justify table#UploadFile2,
  div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs,
  div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs input[type="text"].dxucEditArea {
  width: 480px;}
  div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucBrowseButton, div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucBrowseButton a {
  margin-left: 5px;
  margin-right: 5px;}}
  @media (min-width: 480px) and (max-width: 767.98px) {
  div.input-group.d-flex.d-justify table#UploadFile2,
  div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs,
  div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs input[type="text"].dxucEditArea {
  width: auto;}
  div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucBrowseButton, div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucBrowseButton a {
  margin-left: 5px;
  margin-right: 5px;}}
  @media screen and (max-width: 479.98px) {
  div.input-group.d-flex.d-justify { display: block !important; }
  div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucBrowseButton, div.input-group.d-flex.d-justify table#UploadFile2_UploadInputs td.dxucBrowseButton a {
  margin-left: 5px;
  margin-right: 5px;}}


/*----------------------- ctl00_ContentPlaceHolder RWD 預約課程視窗 -----------------------*/
  @media (min-width: 992px) {
  #main .dxpcLite_Office2010Black > .dxpc-header {
	width: calc(100% - 900px);
	min-width: 900px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline-org.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.gry-btn.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.org-btn.min-w135 {
    min-width: 112px; }}
  @media (min-width: 768px) and (max-width: 991.98px) {
  #main .dxpcLite_Office2010Black > .dxpc-header {
	/*width: calc(100% - 680px);*/
	min-width: 680px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .content,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button {
    width: 680px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline-org.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.gry-btn.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.org-btn.min-w {
    min-width: 268px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline-org.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.gry-btn.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.org-btn.min-w135 {
    min-width: 85px; }}
  @media (min-width: 480px) and (max-width: 767.98px) {
  #main .dxpcLite_Office2010Black > .dxpc-header {
	/*width: calc(100% - 430px);*/
	min-width: 430px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .content,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button {
    width: 430px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.btn {
    margin: 0px auto -5px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline-org.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.gry-btn.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.org-btn.min-w {
    min-width: 180px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline-org.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.gry-btn.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.org-btn.min-w135 {
    min-width: 180px; }}
  @media screen and (max-width: 479.98px) {
  #main .dxpcLite_Office2010Black > .dxpc-header {
	width: calc(100% - 340px);
	min-width: 340px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .content,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button {
	text-align: center; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.btn {
    margin: 0px auto -5px; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline-org.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.gry-btn.min-w,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.org-btn.min-w {
    min-width: none; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.cta-btn-outline-org.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.gry-btn.min-w135,
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper > .dxpc-content .modal-body .radio-button label.org-btn.min-w135 {
    min-width: none; }}


/* ==========================================
   Modal Content 上方大講堂錄影檔推撥
   ========================================== */
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body .title-content {
  margin: -20px 1% 10px;
  padding: 0px;
  width: 98%;
  height: auto;
  text-align: left;
  display: inline-block;
  border-bottom: 1px dashed #ececec;
  float: left;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body time {
  font-size: 18px;
  line-height: 28px;
  color: #585858;
  margin-left: 50px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body time:before {
  content: "日期";
  position: absolute;
  left: 10px;
  font-size: 16px;
  line-height: 18px;
  color: #fff;
  padding: 4px 6px 2px;
  background-color: #2ca5dc; 
  border-radius: 4px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body ul {
  padding: 0px 10px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body ul span {
  font-size: 18px;
  /*color: #585858;*/
  margin-left: -12px;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body ul li {
  margin: 5px 0px 5px;
  padding: 0px;
  font-size: 16px;
  color: #687480;
  list-style: square;
}
/* 下拉選單指定老師 禁用 */
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body ul li.disabled a {
  cursor: auto;
  background: rgba(255,255,255,0);
}

#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body div.left {
  float: left;
  width: 100%;
  padding: 0px 0px 10px 10px;
  display: block;
  position: relative;
}
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body div.right {
  float: right;
  width: 100%;
  padding: 5px 0px 20px 20px;
  display: block;
  position: relative;
}
  @media (min-width: 580px) {
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body div.left {
	width: 60%; }
  #main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body div.right {
	width: 40%; } }
#main .dxpcLite_Office2010Black > .dxpc-contentWrapper .modal-body img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}


/* ==========================================
   Advanced 找課程 SP課程 學員服務 其他
   ========================================== */
#advanced-features {
  overflow: hidden;
}

#advanced-features .features-row {
  padding: 60px 0px 30px 0px;
}
#advanced-features .features-row img {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

#advanced-features h2, #advanced-features h2.cloud {
  font-size: 26px;
  line-height: 1.2;
  font-family: "Noto Sans TC","微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-weight: 300;
  color: #0f0f0f;
  letter-spacing: 1px;
}
#advanced-features h2.en, #advanced-features h2.clouden {
  font-size: 23px;
  line-height: 1.1;
  color: #282828;
  margin-left: 0.05em;
  font-family: Arial, Helvetica, simhei, sans-serif;
  letter-spacing: normal;
}
#advanced-features h2.cloud {
  font-size: 26px;
  margin-bottom: 5px;
}
#advanced-features h2.clouden {
  font-size: 23px;
  color: #282828;
  margin-left: 0.05em;
  margin-bottom: 5px;
}
#advanced-features .features-row.betterpage {
  padding: 40px 0px 0px 0px;
}

#advanced-features h3 {
  font-size: 18px;
  line-height: 26px;
  /*font-style: italic;*/
  color: #999;
}

#advanced-features h4 {
  font-size: 16px;
  line-height: 24px;
  color: #888;
}

#advanced-features p, #advanced-features .features-row p {
  font-size: 16px;/*add*/
}

#advanced-features time {
  font-size: 16px;
  margin-left: 9px;
}
  #advanced-features time span {
    color: #686868;
	margin-left: 5px;
  }
  
  /*@media (max-width: 767.98px) {
  #advanced-features .features-row img {
	margin: 0 20% 5px 5px;
	max-width: 80%;
  	border: #C93 solid 1px; }
  #advanced-features time {
	margin-left: -11px; } }*/
  @media (max-width: 767.98px) {
  #advanced-features h2, #advanced-features h2.cloud {
	font-size: 24px;
	margin-top: 20px; }
  #advanced-features h2.en, #advanced-features h2.clouden {
	font-size: 21px;
	margin-top: -10px;
	margin-bottom: 8px; }
  #advanced-features .features-row {
	padding: 60px 0px 0px 0px; }
  #advanced-features .features-row.betterpage {
	padding: 10px 0px 0px 0px; }}
  @media (min-width: 992px) and (max-width: 1199.98px) {
  #advanced-features .features-row .col-lg-4, #advanced-features .features-row .col-lg-5 {
	width: 50%; min-width: 50%; display: inline-block; float: left; }
  #advanced-features .features-row .col-lg-3 {
	width: 100%; display: inline-block; }}
  @media (min-width: 768px) and (max-width: 991.98px) {
  #advanced-features .features-row .col-lg-4, #advanced-features .features-row .col-lg-5 {
	width: 50%; min-width: 50%; display: inline-block; float: left; }
  #advanced-features .features-row .col-lg-3 {
	width: 100%; max-width: 100%; float: left; }}
  @media (min-width: 480px) and (max-width: 767.98px) {
  #advanced-features .features .container, #advanced-features .features-row .col-lg-4, #advanced-features .features-row .col-lg-5 {
	margin-left: 5%;
	margin-right: 5%; }
  #advanced-features .features-row img {
	margin: 0 15% 5px;
	max-width: 70%;
	max-height: 70%; }
  #advanced-features time {
	margin-left: -11px; }}
  @media screen and (max-width: 479.98px) {
  #advanced-features .features .container, #advanced-features .features-row .col-lg-4, #advanced-features .features-row .col-lg-5 {
	margin-left: auto;
	margin-right: auto; }
  #advanced-features .features-row img {
	margin: 0 15% 5px;
	max-width: 70%;
	max-height: 70%; }
  #advanced-features time {
	margin-left: -11px; }}
  

#advanced-features .features {
  padding: 20px 20px 18px;
}
  @media (min-width: 768px) {
  #advanced-features .features {
	padding: 20px 0px 18px; }}

#advanced-features .learnsign {
  font-size: 16px;
  line-height: 24px;
  /*font-style: italic;*/
  color: #585858;
  width: auto;
  margin: -56px 0px 10px -1px;
  padding: 0px;
  /*border: #d2e2e2 solid 1px;*/
  border-top: 0;
  border-left: #e0ebeb solid 1px;
  display: table;
  position: relative;
  z-index: 1;
}
  #advanced-features .learnsign h3 {
	font-size: 15px;
	color: #88a4af;
	width: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 0px 10px;
  }
  #advanced-features .learnsign h4 {
	font-size: 16px;
	color: #585858;
	width: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 0px 10px;
  }
  
#advanced-features .glyphicon.glyphicon-star {
  margin-left: 4px;
}

/*#advanced-features .glyphicon.glyphicon-bookmark {
  font-size: 16px;
  color: #888;
  margin-left: -16px;
  margin-right: 4px;
}*/

#advanced-features .af-content {
  margin-top: 10px;
  margin-right: 25px;
}
#advanced-features .af-content-page {
  padding: 25px 10% 230px;
  /*max-height: 330px;*/
  background: rgba(255, 255, 255, 0) url(../img/af-content-page-bg.png) no-repeat center bottom;
}

#advanced-features .cv-content {
  margin-top: 10px;
  margin-right: 0px;
}

#advanced-features p {
  line-height: 22px;
  color: #424242;
  margin-bottom: 30px;
  text-align: justify;
}

#advanced-features small {
  line-height: 18px;
  margin-bottom: 30px;
}

#advanced-features ul {
  margin: 0px 0px 0px 22px;
  padding: 0px;
}
#advanced-features ul li {
  margin: 0px 0px;
  padding: 0px;
  font-size: 16px;
  color: #687480; /*color: #424242;*/
  list-style: square;
}

#advanced-features img {
  border: #eee solid 0px;
  margin: 0px 0px 10px;
  padding: 0px;
}

#advanced-features .btnbox {
  margin: 0px auto 0px;
  padding: 0px;
  text-align: center;
  line-height: 280px;
  border: #2ca5dc solid 0px;
}
#advanced-features .btnbox-mt {
  margin: 42px auto 0px;
  padding: 0px;
}
  #advanced-features .box {
	margin-top: -98px;
    border-top: #eff5f5 solid 0px;
  }
  #advanced-features .box .content {
    display: inline-block;
    height: auto;
    line-height:1;
    vertical-align: middle;
	padding-top: 20px;
	padding-bottom: 20px;
  }
  #advanced-features .btnbox .btn {
    margin-top: 15px;
    margin-bottom: 3px;
  }
  #advanced-features .btnbox p {
    margin: 0px 0px 0px;
  }
  #advanced-features .btnbox p.class {
    margin: 0px auto 0px;
	font-size: 18px;
  }
  /*#advanced-features .btnbox p.class {
    position: relative;
    margin: -5px 0px 0px;
	font-size: 18px;
    line-height: 30px;
  }
  #advanced-features .btnbox p.class:after {
    position: absolute;
    content: " ";
    width: 25%;
    height: 1px;
	background: #d2e2e2;
    top: 13px;
    left: 5%;
  }
  #advanced-features .btnbox p.class:before {
    position: absolute;
    content: " ";
    width: 25%;
    height: 1px;
	background: #d2e2e2;
    top: 13px;
    right: 5%;
  }*/
  #advanced-features .btnbox .salebox {
	max-width: 320px;
	display: inline-block;
  }
  #advanced-features .btnbox p.sale {
	font-size: 13px;
	color: #000;
    margin: 0px 0px 0px;
	display: inline-block;
  }
  #advanced-features .btnbox p.sale strong {
	font-size: 18px;
	color: #e6281c;
    margin: 0px 0px 0px 2px;
  }
  @media (max-width: 1199.98px) {
  #advanced-features .af-content {
	margin-right: 0px; }
  #advanced-features p {
	display: inline-block !important; }
  #advanced-features small {
	display: inline-block !important; }
  #advanced-features .btnbox {
	line-height: 100px; }
  #advanced-features .btnbox-mt {
	margin: 0px auto 0px; }
  #advanced-features .box {
	margin-top: 25px;
	margin-bottom: 5px;
	border: #dee8e8 solid 1px; }
  #advanced-features .box .content {
	padding-top: 5px;
	padding-bottom: 25px; }
  #advanced-features .btnbox p.class {
	margin-top: -10px;
	background-color: #fff;
	display: table !important; }}
  @media (max-width: 991.98px) {
  #advanced-features .af-content {
	margin-right: 0px; }
  #advanced-features p {
	display: inline-block !important;
	line-height: 19px;
	margin-bottom: 8px; }
  #advanced-features small {
	margin-bottom: 10px !important; }
  #advanced-features .box {
	margin-top: 15px;
	margin-bottom: 0px; }
  #advanced-features .box .content {
	padding-top: 5px;
	padding-bottom: 15px; }
  #advanced-features .btnbox .btn {
	margin-top: 5px; }}



#advanced-features .advanced-feature-img-right {
  max-width: 100%;
  float: right;
  padding: 0px 0px 30px 30px;
}

#advanced-features .advanced-feature-img-left {
  max-width: 100%;
  float: left;
  padding: 0px 30px 30px 0px;
}
  @media (max-width: 991.98px) {
  #advanced-features .advanced-feature-img-right,
  #advanced-features .advanced-feature-img-left {
    max-width: 50%; }}

  @media (max-width: 767.98px) {
  #advanced-features .advanced-feature-img-right,
  #advanced-features .advanced-feature-img-left {
    max-width: 100%;
    float: none;
    padding: 0px 0px 30px 0px; }}

/*--------------- Advanced SP課程 ---------------*/
#advanced-features h2.sp {
  font-size: 29px;
  display: inline-block;
}
#advanced-features h2.spen {
  font-size: 26px;
  display: inline-block;
}
  @media (min-width: 992px) {
  #advanced-features h2.sp {
	font-size: 35px; }
  #advanced-features h2.spen {
	font-size: 30px; }}
#advanced-features .sp-classes-bg, #advanced-features .sp-classes-bg-wt {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
#advanced-features .sp-classes-bg {
  background: linear-gradient(rgba(149, 210, 237, 0.65), rgba(242, 242, 242, 0.65)), url(../img/SP-feature-bg.jpg) no-repeat center center;
  background-size: cover;
}
#advanced-features .sp-classes-bg-wt {
  background: linear-gradient(rgba(225, 232, 238, 0.75), rgba(250, 250, 250, 0.90)), url(../img/SP-feature-bg-write.jpg) no-repeat center center;
  background-size: cover;
}
#advanced-features .features-sp {
  padding: 60px 20px 50px;
}
#advanced-features .sp-content {
  margin-top: 10px;
  margin-right: 25px;
}
  @media (min-width: 992px) {
  #advanced-features .sp-content {
	margin-top: 50px; }}

/*--------------- Advanced 客服中心 ---------------*/
#advanced-features .service-classes-bg {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
#advanced-features .service-classes-bg {
  background: linear-gradient(rgba(149, 210, 237, 0.65), rgba(242, 242, 242, 0.65)), url(../img/service-feature-bg.jpg) no-repeat center center;
  background-size: cover;
}
#advanced-features .features-se {
  padding: 50px 20px 50px;
}
#advanced-features .features-se h3 {
  margin: 9px;
  font-size: 24px;
  color: #181818;
}

/*--------------- 學員服務 & 其他(契約 課後評鑑 Demo報告) ---------------*/
#advanced-features.main-box {
  margin-top: -90px;
}
  @media (min-width: 992px) and (max-width: 1199.98px) {
  #advanced-features.main-box {
    margin-top: -120px; }}
  @media (min-width: 768px) and (max-width: 991.98px) {
  #advanced-features.main-box {
    margin-top: -85px; }}
  @media (min-width: 480px) and (max-width: 767.98px) {
  #advanced-features.main-box {
    margin-top: -110px; }}
  @media screen and (max-width: 479.98px) {
  #advanced-features.main-box {
    margin-top: -90px; }}
/*--------------- 契約 課後評鑑 Demo報告 (上方無圖片) ---------------*/
#advanced-features.main-box-inForm {
  margin-top: -170px !important;
}
  @media (min-width: 480px) and (max-width: 991.98px) {
  #advanced-features.main-box-inForm .main-content {
    margin-top: 30px; }}
  @media screen and (max-width: 479.98px) {
  #advanced-features.main-box-inForm .main-content {
	margin: 30px -30px -18px;
	width: calc(100% + 60px); }}

#advanced-features .main-content {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  margin: 0px -50px -18px;
  padding: 30px 58px;
  width: calc(100% + 100px);
}
#advanced-features .main-content .btn-prev {
  margin: 0px -5px 10px;
  text-align: right;
}
#advanced-features .main-content .btn-prev a.cta-btn-outline {
  padding: 10px 20px 8px;
}
  @media (min-width: 992px) {
  #advanced-features .main-content {
	margin: 0px auto 50px;
	padding: 30px 83px;
	width: 100%; }
  #advanced-features .main-content .btn-prev {
	margin: 8px 0px -10px; }}
  @media (min-width: 768px) and (max-width: 991.98px) {
  #advanced-features .main-content {
	margin: 0px auto 50px;
	padding: 30px 58px;
	width: 100%; }}
  @media screen and (max-width: 479.98px) {
  #advanced-features .main-content {
	margin: -20px -50px -18px;
	padding: 30px 58px;
	width: calc(100% + 100px); }}
#advanced-features .main-content h3 {
  font-size: 26px;
  color: #111;
  font-weight: 400;
  margin: 10px auto;
  padding: 0px;
}
#advanced-features .main-content h4.f-md {
  font-size: 21px;
  color: #5188B8;
  line-height: 110%;
  padding: 8px 0px 0px;
}
#advanced-features .main-content h4 span.glyphicon {
  top: 3px;
  margin-right: 3px;
}
#advanced-features .main-content h4.box-gray {
  color: #fff;
  background-color: #b8c3c8;
  border-radius: 5px;
  padding: 5px 10px;
}
#advanced-features .main-content .left {
  float: left;
}
#advanced-features .main-content .right {
  float: right;
}
#advanced-features .main-content p {
  color: #424242; /*color: #798F99;*/
  margin-bottom: 10px;
}
#advanced-features .main-content ol {
  margin: 0px 0px 25px 28px;
  padding: 0px;
  list-style: decimal;
}
#advanced-features .main-content ol li {
  color: #424242; /*color: #798F99;*/
  font-size: 16px;
}
#advanced-features .main-content .line-top {
  border-top: #9fa0a0 solid 1px;
  /*margin-top: 10px;*/
  padding-top: 5px;
  display: table;
  width: 100%;
}
#advanced-features .main-content .bg-g-round {
  margin: 15px auto;
  padding: 15px 15px 5px;
  background-color: #f1f1f1;
  border-radius: 10px;
}

/*--------------- 軟體下載 ---------------*/
#advanced-features .main-content .btn-dw {
  margin: 0px auto 20px;
  padding: 15px;
  text-align: center;
}
#advanced-features .main-content .btn-dw img {
  margin: 0px auto 5px;
  width: auto;
  height: 60px;
  text-align: center;
  display: block;
}
#advanced-features .main-content .btn-dw:hover, #advanced-features .main-content input.card_pay:hover {
  background-color: transparent;
  -webkit-box-shadow:0 0 6px #CFCFCF;
  box-shadow:0 0 6px #CFCFCF;
  border-radius: 10px;
  -webkit-transition: box-shadow 0.4s;
  -o-transition: box-shadow 0.4s;
  transition: box-shadow 0.4s;
}
#advanced-features .main-content .btn-dw:hover span {
  color: #004a97;
}
#advanced-features .main-content .btn-dw p {
  margin-bottom: 0px;
  text-align: center;
}
#advanced-features .main-content .btn-dw span {
  display: block;
}
#advanced-features .main-content .btn-pic {
  margin: 0px auto 5%;
  padding: 3px;
  text-align: center;
}
#advanced-features .main-content .btn-pic img {
  max-height: 100px;
}
/*--------------- 表單下載 ---------------*/
#advanced-features .main-content input.btn {
  font-size: 15px;
  margin-bottom: 15px;
}
  @media (min-width: 480px) and (max-width: 575.98px) {
  #advanced-features .main-content input.btn {
	width: 88%;
	margin-left: 6%;
	margin-right: 6%; }
  #advanced-features .main-content input.btn.right {
	float: none;
	display: inline-block;
	margin-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px; }}
  @media screen and (max-width: 479.98px) {
  #advanced-features .main-content input.btn {
	width: 88%;
	margin-left: 6%;
	margin-right: 6%; }
  #advanced-features .main-content input.btn.right {
	float: none;
	display: inline-block;
	margin-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px; }}
#advanced-features .main-content input.card_pay {
  margin: 10px auto 5%;
  padding-top: 40px;
  padding-bottom: 15px;
  position: relative;
  text-align: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -webkit-box-shadow:0 0 2px #CFCFCF;
  box-shadow:0 0 2px #CFCFCF;
  border-radius: 10px;
}
#advanced-features .main-content h3.card_title {
  margin-top: 25px;
  margin-bottom: -65px;
  padding-top: 35px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  max-width: 182px;
}
#advanced-features .main-content span.click-text {
  margin: 20px auto 0px;
  position: absolute;
  font-size: 16px;
  color: #b8c3c8;
  left: calc(100%/2 - 64px);
}

#advanced-features .box-navyblue {
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 15px rgba(73, 78, 92, 0.15);
  background: #fff;
  transition: background 0.4s linear;
  display: inline-block;
}
#advanced-features .box-navyblue h3 {
  padding: 6px 0px 15px;
}
#advanced-features .box-navyblue:hover {
  background: #004a97;
  transition: background 0.4s;
}
#advanced-features .box-navyblue:hover img {
  filter: alpha(opacity=90);
  opacity: .9;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
#advanced-features .box-navyblue:hover h3, #advanced-features .box-navyblue:hover p {
  color: #fff;
}
  @media screen and (max-width: 991.98px) {
	#advanced-features .box-navyblue {
	  margin-top: 20px; margin-bottom: 20px; }}

#advanced-features a.box-navyblue {
  color: #181818;
}

#advanced-features .box-mbr {
  margin: 0px 2px;
  padding: 15px;
  min-height: 298px;
  box-shadow: 0px 0px 15px rgba(73, 78, 92, 0.15);
  background: #fff;
  transition: background 0.4s linear;
}
  @media screen and (max-width: 991.98px) {
	#advanced-features .box-mbr {
	  margin: 0px 0px 10px;
	  min-height: inherit; }}

/*--------------- 契約 課後評鑑 ---------------*/
#advanced-features .tab-pane {
	margin-left: -25px;
	margin-right: -25px;
	padding: 0px 0px;
	width: calc(100% + 50px);
	min-height: 400px;
}
#advanced-features .tab-pane ,#advanced-features .main-content .tab-score { /*#advanced-features .tab-pane * ,#advanced-features .main-content .tab-score * {*/
	font-size: 15px;
    color: #536A74;
}
#advanced-features .main-content .tab-score {
	margin: 0px auto;
}
#advanced-features .tab-pane input, #advanced-features .main-content .tab-score input {
    margin: 4px 3px 0px;
}
#advanced-features .tab-pane .cta-btn, #advanced-features .main-content .tab-score .cta-btn { /*#advanced-features .tab-pane .cta-btn *, #advanced-features .main-content .tab-score .cta-btn * {*/
  color: #fff;
}
#advanced-features .tab-content .tab-pane {
	margin-top: -15px;
	margin-left: -10px;
	margin-right: -10px;
	width: calc(100% + 20px);
	min-height: inherit;
}
#advanced-features .tab-pane .box-mbr ul {
	margin: 0px 25px;
}
#advanced-features .tab-pane .box-mbr span {
    padding-top: 0px;
    padding-bottom: 0px;
}
/*--------------- 契約 ---------------*/
#advanced-features .main-content h3.productName {
    font-size: 22px;
    line-height: 1.3;
    font-weight: normal;
	margin: 0px -25px 15px;
	padding: 0px 0px 5px;
	width: calc(100% + 50px);
}
#advanced-features .main-content h3.productName.bt-line {
	border-bottom: #f2f2f2 solid 1px;
}
#advanced-features .tab-pane h4.list-title {
	font-size: 19px;
    color: #424242;
    padding-top: 8px;
    padding-bottom: 8px;
}
#advanced-features .tab-pane p {
    color: #424242;
    text-align: inherit;
    margin-bottom: 5px;
}
#advanced-features .tab-pane span {
	display: inline-block;
    padding-top: 3px;
    padding-bottom: 6px;
}
#advanced-features .tab-pane strong {
	display: inline-block;
	color: #38ACE1;
	font-size: 1.2em;
	font-weight: normal;
	margin: 0px;
}
#advanced-features .tab-pane font.buy-product {
	display: inline-block;
	color: #38ACE1;
	margin-bottom: 15px;
}
#advanced-features .tab-pane .content1 {
	margin-bottom: 20px;
	padding: 10px 0px;
    border: #f9f9f9 solid 5px;
	background-color: #f9f9f9;/*fafafa*/
}
#advanced-features .tab-pane .content1 { /*#advanced-features .tab-pane .content1 * {*/
	font-size: 15px;
	margin-top: 5px;
}
#advanced-features .tab-pane .content2 p, #advanced-features .tab-pane .content2 ol li {
	font-size: 15px;
    color: #424242;
}
#advanced-features .tab-pane .content2 ol li p strong {
	font-size: 15px;
}
#advanced-features .tab-pane .content2 ol {
	margin-bottom: 15px;
}
#advanced-features .tab-pane .content2 ol li {
    margin-left: 8px;
}
/*#advanced-features .tab-pane table {
	width: 100%;
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}
#advanced-features .tab-pane table > thead > tr > th,
#advanced-features .tab-pane table > tbody > tr > th,
#advanced-features .tab-pane table > tfoot > tr > th,
#advanced-features .tab-pane table > thead > tr > td,
#advanced-features .tab-pane table > tbody > tr > td,
#advanced-features .tab-pane table > tfoot > tr > td {
  padding: 8px 8px 0px;
}*/
#advanced-features .tab-pane blockquote {
	border: none;
	margin-bottom: 20px;
}
#advanced-features .tab-pane blockquote .row, #advanced-features .tab-pane blockquote .col-sm-4, #advanced-features .tab-pane blockquote .col-sm-8 {
	margin: 0px;
	padding: 0px;
}
#advanced-features .tab-pane blockquote .row {
    margin-top: 5px;
}
#advanced-features .tab-pane blockquote .row .col-xs-4.alignRight, #advanced-features .tab-pane blockquote .row .col-xs-4.alignLeft,
#advanced-features .tab-pane blockquote .row .col-xs-8.alignRight, #advanced-features .tab-pane blockquote .row .col-xs-8.alignLeft {
	width: auto;
	margin-right: -20px;
}
#advanced-features .tab-pane blockquote .row .alignRight {
	text-align: left;
}
#advanced-features .tab-pane blockquote .row .alignLeft {
	text-align: left;
	word-wrap: break-word;
}
#advanced-features .tab-pane .salesman span {
	display: block;
}

  @media (min-width: 1200px) {
  #advanced-features .main-content h3.productName {
    font-size: 33px;}}
  @media (min-width: 992px) and (max-width: 1199.98px) {
  #advanced-features .main-content h3.productName {
    font-size: 28px; }}
  @media (min-width:768px) and (max-width: 991.98px) {
  #advanced-features .main-content h3.productName {
    font-size: 25px; }}
  @media (min-width:768px) {
	#advanced-features .tab-pane ,#advanced-features .main-content .tab-score { /*#advanced-features .tab-pane * ,#advanced-features .main-content .tab-score * {*/
	  font-size: 16px; }
	#advanced-features .main-content h3.productName {
	  margin: 10px -25px 15px;
	  padding: 0px 0px 15px; }
	#advanced-features .tab-pane h4.list-title {
	  font-size: 21px; }
	#advanced-features .tab-pane .content1 {
	  padding: 20px; }
	#advanced-features .tab-pane .content1 { /*#advanced-features .tab-pane .content1 * {*/
	  font-size: 16px; }
	#advanced-features .tab-pane blockquote {
	  padding: 10px; }
	#advanced-features .tab-pane .salesman span {
	  padding-left: 20px;
	  display: inline-block;}
	#advanced-features .tab-pane blockquote .row .col-xs-4.alignRight, #advanced-features .tab-pane blockquote .row .col-xs-4.alignLeft {
	  width: 33.33333333%;}
	#advanced-features .tab-pane blockquote .row .col-xs-8.alignRight, #advanced-features .tab-pane blockquote .row .col-xs-8.alignLeft {
	  width: 66.66666667%;}
	#advanced-features .tab-pane blockquote .row .alignRight {
	  text-align: right;}
	#advanced-features .tab-pane blockquote .row .alignLeft {
	  text-align: left;}}

/*--------------- 課後評鑑 ---------------*/
#advanced-features .main-content .tab-score {
	width: calc(100% + 60px);
	margin: 0px -30px 80px;
	padding: 0px 0px;
}
#advanced-features .main-content .tab-score .row {
	margin-right: -0px;
	margin-left: -0px;
}
#advanced-features .main-content .tab-score .row .question, #advanced-features .main-content .tab-score .row .answer {
	margin: 0px;
	padding: 0px 0px;
}
#advanced-features .main-content .tab-score table {
	margin: 0px;
	padding: 0px;
	border: 0;
}
#advanced-features .main-content .tab-score table > thead > tr > th,
#advanced-features .main-content .tab-score table > tbody > tr > th,
#advanced-features .main-content .tab-score table > tfoot > tr > th,
#advanced-features .main-content .tab-score table > thead > tr > td,
#advanced-features .main-content .tab-score table > tbody > tr > td,
#advanced-features .main-content .tab-score table > tfoot > tr > td {
	padding: 0px;
}
#advanced-features .main-content .tab-score table > tbody > tr > td img.dxWeb_rpHeaderTopLeftCorner_Office2010Silver,
#advanced-features .main-content .tab-score table > tbody > tr > td img.dxWeb_rpHeaderTopRightCorner_Office2010Silver,
#advanced-features .main-content .tab-score table > tbody > tr > td img.dxWeb_rpHeaderTopRightCorner_Office2010Silver,
#advanced-features .main-content .tab-score table > tbody > tr > td img.dxWeb_rpBottomLeftCorner_Office2010Silver,
#advanced-features .main-content .tab-score table > tbody > tr > td img.dxWeb_rpBottomRightCorner_Office2010Silver,
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpHLE,
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpTE,
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpHRE,
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpLE,
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpRE,
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpBE {
    display: none;
}
/*table-標題*/
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpHeader_Office2010Silver {
    text-align: center;
    border-bottom: 0;
    background-image: none;
    background-color: transparent;
}
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpHeader_Office2010Silver span.dx-vam {
    font-size: 33px; /*標題*/
    color: #111;
	margin-top: 0px;
}
#advanced-features .main-content .tab-score table > tbody > tr > td.dxrpcontent {
	margin: 0px;
	padding: 0px;
	background-color: #f9f9f9;
}
#advanced-features .main-content .tab-score .row .question {
	margin: 2px 0px 5px;
	padding-top: 2px;
    text-align: right;
    font-weight: bold;
}
#advanced-features .main-content .tab-score .row .answer {
	margin: 2px 0px 5px;
}
#advanced-features .main-content .tab-score .row .answer { /*#advanced-features .main-content .tab-score .row .answer * {*/
	padding: 5px 8px 5px 2px;
}
#advanced-features .main-content .tab-score .row .answer td, #advanced-features .main-content .tab-score .row .answer span, #advanced-features .main-content .tab-score .row .answer lable {
	display: inline-block;
	padding: 0px;
}
#advanced-features .main-content .tab-score h4 {
	margin: -8px -10px 10px -9px;
	padding: 8px 10px 5px;
	width: calc(100% + 20px);
	font-size: 18px;
	color: #424242;
}
#advanced-features .main-content .tab-score .row .answer .form-control {
	margin-bottom: 20px;
}
#advanced-features .main-content .tab-score .dxbButton {
	margin-top: 50px;
	margin-bottom: -70px;
}
#advanced-features .main-content .tab-score input[type="radio"], #advanced-features .main-content .tab-score input[type="checkbox"] {
    width: 17px;
    height: 17px;
}
#advanced-features .main-content .tab-score input[type="text"] {
	margin-top: -3px;
	margin-bottom: 10px;
	width: calc(100% - 5px);
}
  @media (min-width:768px) {
	#advanced-features .main-content .tab-score .col-md-2 {
	  width: 24%; }
	#advanced-features .main-content .tab-score .col-md-10 {
	  width: 76%; }
	#advanced-features .main-content .tab-score h4 {
	  font-size: 21px; }}

/*--------------- Demo報告 ---------------*/
#intro.canvas-inForm, #intro.canvas-inForm .intro-main {
  height: 359px;/*高度要固定*/
}
  @media (min-width: 992px) and (max-width: 1199.98px) {
  #intro.canvas-inForm, #intro.canvas-inForm .intro-main {
    height: 329px; }}
#advanced-features .main-content.bg-ChartGray {
	padding: 30px 58px;
	background-color: #f9f9f9;
}
  @media screen and (max-width: 991.98px) {
  #advanced-features .main-content.bg-ChartGray { padding: 30px 22px; }}


#ReadReport {
  margin: 0px auto;
  padding: 182px 0px 0px;
  background: #eff5f5 url("../img/intro-main.jpg") center -20.85% no-repeat;
  block-size: cover;
}
#ReadReport .container {
  padding: 35px 30px 10px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}
#ReadReport .row {
  margin-right: -0px;
  margin-left: -0px;
}
#ReadReport h2.margin_name {
  font-size: 2.92em;
  font-weight: bold;
  color: #004a97;
  line-height: 1.15;
  margin: 0px auto 35px;
  padding: 0px 25px;
  height: 68px;
  border-bottom: #fff solid 3px;
}
#ReadReport h2.margin_name strong {
  color: #2ca5dc;
  display: inline-block;
}
.membergrade_chart {
  margin: 0px auto 15px;
  padding: 0px;
  width: 100%;
  max-width: 550px;
  border-radius: 50%;
  position: relative;
  min-height: 1px;
  background-color: #fff;
}
.membergrade_chart:before,
.membergrade_chart:after {
  display: table;
  content: " ";
}
.membergrade_chart:after {
  clear: both;
}

canvas {
  position: absolute;
  top: calc(580px/4 + 160px);
  left: calc(100%/2 - 290px);
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 580px;
  max-height: 580px;
  min-height: 580px;
  margin: 0px 0px;
  padding: 0px;
  border-radius: 50%;
  border: 1px solid transparent;
  background-color: rgba(200, 200, 200, 0.0);
  display: block;
}

#radarChart {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-color: #e3e3e3;
  background-color: rgba(200, 200, 200, 0.1);
  display: block;
}
  #radarChart.line-circle {
      position: relative;
      text-align: center;
      margin: 100px 100px;
      padding: 0px;
      width: calc(100% - 200px);
      min-height: 350px;
      display: table !important;
      box-shadow: 0px 0px 0px rgba(150, 150, 150, 0.0);
  }
  .thumbnail {
      position: absolute;
      left: 0;
      bottom: -10px;
      display: inline-table;
      z-index: 5;
      padding: 4px;
      margin: 0px 15px 20px;
      line-height: 1.1;
      background-color: #004a97;
      border-color: #004a97;
      border-radius: 10px;
  }
  .thumbnail p.text-level {
      font-size: 180%;
      font-weight: bold;
      color: #fff;
  }
  .thumbnail p.text-level strong {
      font-size: 3em;
  }
#ReadReport .bar-container {
  margin: 15px 0px;
  padding: 10px 15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0px 0px 8px rgba(150, 150, 150, 0.25);
}
  .progress {
      height: 20px;
      margin-top: -20px;
      margin-bottom: 9px;
      padding: 0px;
      border-radius: 10px;
  }
  .progress > .p-bar-number {
      font-size: 18px;
      font-weight: bold;
      margin-top: -1px;
      padding: 0px 8px;
      display: inline-block;
  }
  .caption-bar {
      margin: 0px 5px;
      padding: 0px;
  }
  .caption-bar p {
      font-size: 16px;
      font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
      color: #585858;
      margin-left: 5px;
      margin-bottom: 25px;
  }
  .caption-bar p.bar-title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin-top: 8px;
  }
  .caption-bar p.d-inline-block {
      display: inline-block !important;
  }
  .caption-bar span.badge {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      line-height: 20px;
      min-width: 26px;
      /*padding: 3px 7px;*/
      border-radius: 15px;
      background-color: transparent;
      color: #777;
      float: right;
      margin-right: 5px;
  }
  .caption-bar span.bg-blue, .caption-bar span.bg-lightblue, .caption-bar span.bg-green, .caption-bar span.bg-orange, .caption-bar span.bg-red, .caption-bar span.bg-pink, .caption-bar span.bg-purple, .caption-bar span.bg-bluepurple, .caption-bar span.bg-bluegreen {
      color: #fff;
  }
  .progress-bar-blue, .caption-bar span.bg-blue {
      background-color: #6580d7;
  }
  .progress-bar-lightblue, .caption-bar span.bg-lightblue {
      background-color: #a4e2fc;
  }
  .progress-bar-green, .caption-bar span.bg-green {
      background-color: #91d554;
  }
  .progress-bar-orange, .caption-bar span.bg-orange {
      background-color: #fdce06;
  }
  .progress-bar-red, .caption-bar span.bg-red {
      background-color: #e6574f;
  }
  .progress-bar-pink, .caption-bar span.bg-pink {
      background-color: #ec57b3;
  }
  .progress-bar-purple, .caption-bar span.bg-purple {
      background-color: #9769bd;
  }
  .progress-bar-bluepurple, .caption-bar span.bg-bluepurple {
      background-color: #808acc;
  }
  .progress-bar-bluegreen, .caption-bar span.bg-bluegreen {
      background-color: #6fcfd4;
  }

#ReadReport .table-container {
  margin: 25px 0px;
  padding: 12px 0px 15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0px 0px 8px rgba(150, 150, 150, 0.25);
}
#ReadReport .table-container .col-md-3 {
  margin: 0px -11px 0px 10px;
  padding: 0px;
  width: calc(100%/4 - 5px);
}
#ReadReport .table-container .col-md-3.kidslist {
  margin: 0px -11px 0px 10px;
  padding: 0px;
  width: calc(100%/3 - 38px);
}
#ReadReport .table-container .col-sm-1.kidslist {
  width: 99px;
}
#ReadReport .table {
  background-color: #ebf0f3;
  margin: 0px;
}
#ReadReport .table > thead > tr > th,
#ReadReport .table > tbody > tr > th,
#ReadReport .table > tfoot > tr > th,
#ReadReport .table > thead > tr > td,
#ReadReport .table > tbody > tr > td,
#ReadReport .table > tfoot > tr > td {
  padding: 0px;
  font-size: 15px;
  line-height: 1.15;
  vertical-align: middle;
  border-top: 2px solid #fff;
  text-align: center;
}
#ReadReport .table > thead > tr > th {
  vertical-align: middle;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  color: #fff;
  background-color: #3e639d;
}
#ReadReport .table > thead > tr > th.col-lightblue {
  background-color: #3e639d;
}
 #ReadReport .table > thead > tr > th.level-light-bg {
  background-color: #ebf0f3;
}
#ReadReport .table > thead > tr > th.level-bg {
  background-color: #dae6f3;
}
#ReadReport .table > thead > tr > th.line-r-white, #ReadReport .table > tbody > tr > th.line-r-white {
  border-right: 2px solid #fff;
}
#ReadReport .table > tbody > tr > th {
  border-left: 2px solid #fff;
}
#ReadReport .table > tbody > tr > th.col-blue {
  color: #fff;
  background-color: #2e62a2;
}
#ReadReport .table > tbody > tr > th, #ReadReport .table > tbody > tr > td {
  color: #798F99;
}
#ReadReport .table > tbody > tr > td {
  border-left: 2px solid #fff;
  height: 48px;
  word-wrap: break-word;
  word-break: break-all;
}
#ReadReport .table-condensed > thead > tr > th,
#ReadReport .table-condensed > tbody > tr > th,
#ReadReport .table-condensed > tfoot > tr > th,
#ReadReport .table-condensed > thead > tr > td,
#ReadReport .table-condensed > tbody > tr > td,
#ReadReport .table-condensed > tfoot > tr > td {
  padding: 5px 1px;
}
#ReadReport .table > tbody > tr > th {
  font-size: 100%;
}
#ReadReport .table > thead > tr > th.col-level,
#ReadReport .table > tbody > tr > th.col-level {
  display: none;
}
#ReadReport .table > thead > tr > th.big, #ReadReport .table > tbody > tr > th.big {
  font-size: 150%;
  color: #2e62a2;
  font-weight: bold;
  background-color: #f8f8f8;
}
#ReadReport .table > thead > tr > th.height-48, #ReadReport .table > tbody > tr > th.height-48 {
  height: 48px;
}
#ReadReport .table > tbody > tr.level-light-bg {
  background-color: #ebf0f3;
}
#ReadReport .table > tbody > tr.level-bg, #ReadReport .table > tbody > tr > th.level-bg {
  background-color: #dae6f3;
}
#ReadReport .teach-container {
  margin: 15px 0px;
  padding: 0px 15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0px 0px 8px rgba(150, 150, 150, 0.25);
}
#ReadReport .teach-container img {
  margin: 15px auto;
  width: 135px;
  height: 135px;
  max-width: 100%;
  max-height: 100%;
}
#ReadReport .teach-container .teacherName {
  color: #004a97;
  margin-top: 10px;
  margin-right: 5px;
  border-radius: 3px;
  font-size: 23px;
  font-weight: bold;
}
#ReadReport .teach-container .Summary {
  font-size: 16px;
  line-height: 1.25em;
}


  @media (min-width: 480px) and (max-width: 991.98px) {
  #ReadReport .teach-container .col-sm-4 {
      width: 160px;
      float: left; }
  #ReadReport .teach-container .col-sm-8 {
      width: calc(100% - 160px);
      display: inline-block; }
  }
        
  @media (min-width: 768px) and (max-width: 991.98px) {
  #ReadReport h2.margin_name { 
      font-size: 250%;
      padding: 0px 25px;
      height: 68px; }
  #ReadReport .thumbnail {
      bottom: -115px; }
  #ReadReport .bar-container {
      margin-top: 100px; }
  canvas {
      top: calc(580px/4 + 160px); }}

  @media (min-width: 480px) and (max-width: 767.98px) {
  #ReadReport {
      padding-top: 168px;/*手機版上方高度*/
      background-position: center top; }
  #ReadReport .container {
      padding: 23px 10px 10px; }
  .membergrade_chart {
      margin: 0px calc(100%/2 - 215px) 15px;
      max-width: 430px;
      min-width: 430px; }
  canvas {
      left: calc(100%/2 - 224px);
      top: calc(448px/4 + 195px);
      max-width: 448px;
      max-height: 448px;
      min-height: 448px; }

  #radarChart.line-circle {
      margin: 80px 80px;
      width: calc(100% - 160px);
      min-height: 270px; }}

  @media screen and (max-width: 767.98px) {
  #ReadReport h2.margin_name {
      font-size: 230%;
      padding: 0px 25px;
      height: 90px; }
  #ReadReport h2.margin_name strong {
      display: block;
      margin-bottom: -5px; }
  #ReadReport .thumbnail {
      bottom: -115px; }
  #ReadReport .bar-container {
      margin-top: 100px; }
  #ReadReport .caption-bar {
      margin: 0px 0px; }
  #ReadReport .caption-bar p.bar-title {
      font-size: 18px; }
  #ReadReport .table-container .col-sm-1.kidslist {
      display: none; }
  #ReadReport .table-container .col-sm-5, #ReadReport .table-container .col-sm-7 {
      margin: 0px -18px 0px 10px;
      display: inline-block; }
  #ReadReport .table-container .col-sm-5 {
      width: calc(33.333% - 10px); }
  #ReadReport .table-container .col-sm-7 {
      width: calc(67.667% - 12px); }
  #ReadReport .table-container .col-sm-12, #ReadReport .table-container .col-sm-12.kidslist {
      margin: -5px 0px -5px 10px;
      width: calc(100% - 20px); }
  #ReadReport .table > tbody > tr > th {
      width: 58px; }
  #ReadReport .table > thead > tr > th.col-level,
  #ReadReport .table > tbody > tr > th.col-level {
      display: table-cell;
      width: 58px; }
  #ReadReport .table > tbody > tr > th.left-kidslist {
      display: table-cell;
      width: 72px; }}

  @media screen and (max-width: 479.98px) {
  #ReadReport {
      padding-top: 168px;/*手機版上方高度*/
      background-position: center top; }
  #ReadReport .container {
      padding: 23px 10px 10px; } 
  #ReadReport h2.margin_name {
      font-size: 210%;
      line-height: 1.35;
      padding: 0px 25px;
      height: 90px; }
  .membergrade_chart {
      margin-top: 15px;
      max-width: 330px; }
  canvas {
      left: calc(100%/2 - 180px);
      top: calc(360px/4 + 213px);
      max-width: 360px;
      max-height: 360px;
      min-height: 360px; }
  #radarChart.line-circle {
      margin: 56px 56px;
      width: calc(100% - 112px);
      min-height: 220px; }
  #ReadReport .table-container .col-sm-5 {
      width: calc(38% - 15px); }
  #ReadReport .table-container .col-sm-7 {
      width: calc(62% - 0px); }
  #ReadReport .teach-container .col-sm-4 {
      width: 100%; }
  #ReadReport .teach-container .col-sm-8 {
      width: 100%; }}


/*--------------- 預約連線品質測試 ---------------*/
#advanced-features .member {
  margin: 0px auto;
  color: #536A74;
}
#advanced-features .test {
  position: relative;
  margin: 0px;
  padding: 0px;
}
#advanced-features .test.container {
  width: 100% !important;
  margin: 10px 0px 25px;
}
#advanced-features .member .test .note {
  position: relative;
}
#advanced-features .member .test .note::after {
	clear: both;
	content: "";
	display: block;
}
#advanced-features .member .test p {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: #111; /*color: #424242;*/
  padding: 15px 0px;
  display: inline-block;
}
#advanced-features .member .test ul {
  margin: 0px 1px 0px;
  padding: 0;
  text-align: right;
  position: absolute;
  top: -6px;
  right: 0;
}
#advanced-features .member .test ul li {
  display: inline-block;
  border: 1px solid #B3C5CD; 
  margin: 5px 0px 5px 5px;
  padding: 0 10px !important;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 18px;
  line-height: 2.8;
  color: #333;
  /*background-color: white;*/
}
/*#advanced-features .member .test ul li:last-child {
  margin: 0;
}*/
#advanced-features .member .test ul li.active {
  background-color: #2ca5dc !important;
  border-color: #2ca5dc;
  color: #fff;
}
	  
#advanced-features .member .test .row {
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}
#advanced-features .member .test .day {
  color: black;
  line-height: 101px;
}
#advanced-features .member .test .contractdays {
  border: 1px solid #87C6DD !important;
  background-color: #D5F0FA;
}
#advanced-features .member .test .contractdays span.dxeBase {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
}
#advanced-features .member .test .contracttime {
  border: 1px solid #87C6DD !important;
}
#advanced-features .member .test .colTime {
  padding: 0;
  width: calc(100%/12*9);
  margin: 0px 0px 0px 1px;
  pointer-events: initial;
}
#advanced-features .member .test .colTime.disable {
  pointer-events: none;
}
#advanced-features .member .test .colTime.col-xs-12, #advanced-features .member .test .colTime.col-md-9, #advanced-features .member .test .day.col-xs-12, .member .test .day.col-md-3 {
  margin: 0px -1px -1px 0px;
  padding: 0px;
}
#advanced-features .member .test .colTime input, #advanced-features .member .test .unavailable {
  margin: 0px -1px -1px 0px;
}
#advanced-features .member .test .time {
  text-align: center;
  padding: 10px;
  border: 1px solid #B3C5CD;
  border-radius: 0;
  line-height: 20px;
  font-size: 16px;
  display: table-cell;
}
#advanced-features .member .test .col-1-7 {
  width: calc(100%/7 + 0.06em);
  padding: 15px 0px;
}
#advanced-features .member .test .btn-default:hover {
  background-color: #ECF6FA;
}
#advanced-features .member .test .active {
  background-color: #0097E0;
  border-color: #0097E0;
  color: #FFF;
}
#advanced-features .member .test .unavailable {
  background-color: #F7F6F6;
  color: #ADBDC3;
}
#advanced-features .member .test .hidden-sm {
    display: none; border: #F33 solid 1px;
}
  @media (min-width: 480px) and (max-width: 991.98px) {
	#advanced-features .member .test .time {
	  font-size: 15px; }}
  @media screen and (max-width: 479.98px) {
	#advanced-features .member .test .time {
	  font-size: 14px; }}
  @media screen and (max-width: 991.98px) {
	#advanced-features .test.container {
	  width: calc(100% + 30px) !important;
	  margin: 10px -15px 25px; }
	#advanced-features .member .test .day {
	  line-height: 58px; }
	#advanced-features .member .test .colTime {
	  width: calc(100%/12*12);
	  margin: 0px; }
	#advanced-features .member .test .colTime input, #advanced-features .member .test .unavailable {
	  margin: 0px -1px -1px 0px;}
	#advanced-features .member .test .time {
	  padding: 10px 2px;
	  width: calc(100%/7 + 0.06em) !important; }}
  @media (max-width: 1199.98px) {
	#advanced-features .member .test p {
	  padding: 0px 0px; }
	#advanced-features .member .test ul {
	  position: relative; }
	#advanced-features .member .test ul li {
	  line-height: 2.2; } }

/* ==========================================
   Slide Show Section
   ========================================== */
#slide-show {
  overflow: hidden;
  background: linear-gradient(rgba(44, 165, 220, 0.65), rgba(142, 224, 242, 0.65)), url(../img/slide-show-bg.jpg) no-repeat center center;
  background-size: cover;
  padding: 80px 0px;
}

#slide-show-all {
  overflow: hidden;
  background: linear-gradient(rgba(224, 235, 242, 0.45), rgba(255, 255, 255, 0.95)), url(../img/slide-show-all.jpg) no-repeat center center;
  background-size: cover;
  padding: 22px 0px;
}
  @media screen and (max-width: 1399.98px) {
	#slide-show-all {
	  padding: 22px 0px 5px; } }

#slide-show.cloud-bg {
  background: linear-gradient(rgba(44, 165, 220, 0.65), rgba(142, 224, 242, 0.65)), url(../img/slide-show-cloud-bg.jpg) no-repeat center center;
  background-size: cover;
  padding: 60px 0px;
}

#slide-show.section-bg {
  background: #eff5f5;
  padding: 60px 0px 40px;
}

#slide-show.section-bg-w {
  background: #fff;
  padding: 60px 0px 40px;
}

#slide-show .cta-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

#slide-show .cta-text {
  color: #fff;
}

#slide-show h3.tc-title {
  font-size: 32px;
  color: #000;
  margin: 30px 0px 30px 0px;
}
#slide-show h3 span.ch {
  font-size: 35px;
}

/*#slide-show .cta-btn {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 25px;
  transition: background 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#slide-show .cta-btn:hover {
  background: #004a97;
  border: 2px solid #004a97;
}*/

/* ==========================================
   More Features 指定1對1
   ========================================== */
#more-features {
  overflow: hidden;
}

/*--------------- theme-classes 主題課程 ---------------*/
#more-features section.theme-classes {
  margin: 0px;
  padding: 60px 0px 50px 0px;
}
#more-features section.theme-classes-bg {
  overflow: hidden;
  background: linear-gradient(rgba(44, 165, 220, 0.65), rgba(142, 224, 242, 0.65)), url(../img/advanced-feature-1.jpg) no-repeat center center;
  background-size: cover;
  margin: 0px;
  padding: 60px 0px 50px 0px;
}
#more-features section.theme-classes h3.tc-title {
  font-size: 32px;
  color: #000;
  margin: 30px 0px 30px 0px;
}
#more-features section.theme-classes h3 span.ch {
  font-size: 35px;
}

#more-features h3 {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 26px;
  color: #004a97;
}

#more-features h4 {
  font-size: 21px;
  color: #004a97;
}

#more-features p {
  font-size: 16px;
  text-align: justify;
  line-height: 23px;
  margin-left: 20px;
  margin-right: 20px;
}

#more-features p span.type {
  font-size: 18px;
  text-align: center;
  line-height: 100%;
  color: #004a97;
}

#more-features p.theme {
  margin-bottom: 42px;
}
  @media (max-width: 1199.98px) {
  #more-features p.min-h100 {
	min-height: 100px; } }
  @media (max-width: 991.98px) {
  #more-features p.min-h100 {
	min-height: inherit; } }
	
#more-features p.theme-min-h {
  min-height: 100px;
}
  @media (max-width: 767.98px) {
  #more-features p.theme-min-h {
	min-height: inherit;
  }
  }


#more-features .box {
  padding: 0px;
  margin-bottom: 30px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 15px rgba(73, 78, 92, 0.15);
  background: #fff;
  display: inline-block;
}
  #more-features .box i.tag-class-top {
	position: absolute;
	float: right;
    font-size: 15px;
	line-height: 18px;
    text-align: center;
	font-style: normal;
	color: #004a97;
	top: 0px;
	right: 15px;
	padding: 5px 7px;
	 }
  #more-features .box i.tag-class-top span {
    font-size: 16px;
	font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
	line-height: 1.17;
    text-align: center;
	color: #fff;
	 }
  #more-features .box i.tag-class-top:before {
	content: " ";
	position: absolute;
	width: 0px;
	height: 0px;
	padding: 0px;
	color: #fff;
	line-height: 0;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border: #eb2349 solid;
	border-width: 42px 60px 42px 60px;
	border-color: rgba(0, 74, 151, 0.75) rgba(0, 74, 151, 0.75) transparent transparent; 
	/*border-radius: 0 4px 0 0;*/
	margin: 0px;
	top: 0px;
	bottom: 0px;
	left: calc(100% - 120px);
	right: 0px; }

#more-features .box:hover h3 {
  color: #fff;
  margin-top: 0px;
  margin-bottom: 5px;
  padding-top: 15px;
  padding-bottom: 8px;
  background: #004a97;
  transition: background 0.4s;
}

#more-features .box:hover h4 {
  color: #fff;
  margin-top: -5px;
  margin-bottom: 10px;
  padding-bottom: 15px;
  background: #004a97;
  transition: background 0.4s;
}
  @media (max-width: 767.98px) {
  #more-features .box {
    margin-bottom: 20px;
  }}

#more-features .box-navyblue, #more-features .box-navygry {
  padding: 0px;
  margin-bottom: 20px; /*margin-bottom: 0px;*/
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 15px rgba(73, 78, 92, 0.15);
  background: #fff;
  transition: background 0.4s linear;
  display: inline-block;
}
#more-features .box-navyblue:hover {
  background: #004a97;
  transition: background 0.4s;
}
#more-features .box-navyblue:hover h3, #more-features .box-navyblue:hover p {
  color: #fff;
}
#more-features .box-navygry, #more-features .box-navygry:hover {
  background: #fff;
  cursor: default;
}
#more-features .box-navygry h3, #more-features .box-navygry p, #more-features .box-navygry:hover h3, #more-features .box-navygry:hover p {
  color: #b8c3c8;
}
#more-features .box-navygry img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); }

#more-features .box-navyblue h3.text-block {
  margin-top: 8px;
}
#more-features .box-navyblue h3.text-block span {
  font-size: 21px;
  line-height: 29px;
  display: block;
}
#more-features .box-navyblue p.mb-narrow {
  margin-top: -2px;
  margin-bottom: 15px;
}
  @media (max-width: 1199.98px) {
  #more-features .box-navyblue {
	margin-bottom: 30px; }}
  @media (max-width: 991.98px) {
  #more-features .box-navyblue {
	margin-bottom: 30px; }}

#more-features a.box, #more-features a.box-navyblue {
  color: #181818;
}

#more-features .box .content {
  margin-bottom: 20px;
  padding-top: 10px;
}

/* ==========================================
   More Features 指定老師下拉選單2025
   ========================================== */
/*------ list-time時間選項 ------*/
.box-listTime {
  margin: 0;
  padding: 0;
}
.btnListTime {
  position: relative;
  margin: 10px auto 0;
  width: 100%;
  padding-right: 22px;
  /*background: #f1fbff;*/
}
.btnListTime tbody tr, .btnListTime tbody tr td {
  margin: 0px 0px;
  padding: 0px;
  display: block;
}
.btnListTime tbody tr td label {
  padding: 10px 20px 8px;
  background: #fff;
  border: 1px solid #2fa6dd;
  color: #687480;
  border-radius: 14px;
}
.btnListTime tbody tr td input[type="radio"] {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  outline: none;
}
.btnListTime tbody tr td input[type="radio"] {
  display: none;
}
.btnListTime tbody tr td label {
  position: relative;
  color: #687480;
  font-size: 15px;
  font-weight: normal;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  border: 1px solid #2fa6dd;
  margin: 5px 2px;
  border-radius: 14px;
  width: calc(100%/2 - 4px);
  float: left;
}
  @media (min-width: 768px) {
  .btnListTime tbody tr td label {
	width: calc(100%/3 - 4px); }}

.btnListTime tbody tr td input[type="radio"]:checked + label {
  border: 1px solid #2866df;
  background-image: radial-gradient(circle 248px at center, #306bec 0%, #004a97 100%);
  color: #ffffff;
}

/*------ TeacherCalendar calendar日曆 ------*/

#TeacherCalendar.calender > div.datepicker.datepicker-inline {
  position: relative;
  width: auto;
  font-size: 18px;
  font-weight: normal;
}
#TeacherCalendar.calender > div.datepicker {
  margin: 0 5% 0;
}
#TeacherCalendar table.table-condensed {
  width: 100%;
  border-collapse: separate; /* 確保邊框是分離的 */
  border-spacing: 10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

#TeacherCalendar table.table-condensed td.day {
  margin: 0;
  padding: 5px 0px; 
}
#TeacherCalendar.calender > div.datepicker td,
#TeacherCalendar.calender > div.datepicker th {
  text-align: center;
  width: calc(100%/7);
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  border: none;
}
#TeacherCalendar.calender > div.datepicker table tr td.day:hover,
#TeacherCalendar.calender > div.datepicker table tr td.day.focused {
  background: rgba(121, 217, 255, 0.25);
}

#TeacherCalendar.calender > div.datepicker table tr td.active,
#TeacherCalendar.calender > div.datepicker table tr td.active:hover,
#TeacherCalendar.calender > div.datepicker table tr td.active.disabled,
#TeacherCalendar.calender > div.datepicker table tr td.active.disabled:hover {
  background-color: #79D9FF;
  background-image: none;
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79D9FF', endColorstr='#79D9FF', GradientType=0);
  border-color: #79D9FF;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: none;
}

/*------ select-down 指定老師下拉選單 ------*/
#ddl_Teacherlist .bootstrap-select {
   height: 68px;
   margin: 0px auto 0px;
   position: relative;
   text-align: left;
}
#ddl_Teacherlist > div.btn-group.bootstrap-select .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
   width:100%;
}
#ddl_Teacherlist option {
    height: 68px;
}
.selectpicker {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
}
.selectpicker.teach-select .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100%;
}
.selectpicker.teach-select .bootstrap-select.btn-group .dropdown-menu li {
  position:relative;
  margin: 0px;
  padding: 0px;
  color: #8a909d;
  width: calc(100%/2);
  display: inline-flex;
}
.selectpicker.teach-select .bootstrap-select.btn-group .dropdown-menu > li > a:hover,
.selectpicker.teach-select .bootstrap-select.btn-group .dropdown-menu > li > a:focus {
  background-color: rgba(0, 0, 0, 0.04);
}
.selectpicker.teach-select .bootstrap-select.btn-group .dropdown-menu > li.selected,
.selectpicker.teach-select .bootstrap-select.btn-group .dropdown-menu > li.selected > a:focus{
  background-color: #f1fbff;
}
.selectpicker.teach-select .bootstrap-select.btn-group .dropdown-menu > li > a {
  color: #8a909d;
  width: 100%;
}
.selectpicker.teach-select .bootstrap-select.btn-group .dropdown-menu > li > a > span.text {
  padding: 6px 0;
  margin-left: -6px;
}
.selectpicker.teach-select .bootstrap-select.btn-group .dropdown-menu > li > a > span.check-mark {
  margin-top:12px
}

/*------ teach-box 指定老師照片 ------*/
.select-teach-box {
  position: relative;
  margin: 0px;
}
.btn-teach.cta-btn-outline {
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  margin: 15px 0 0px;
  padding-right: 22px;
  background: #f1fbff;
  border: 1px solid #86bcdb;
  color: #3f4954;
  width: 100%;
}
.teach-pic-box {
  position: relative !important;
  margin: 0px 0px 0px;
  padding: 0;
  display: inline-flex;
}
.teach-pic-box  {
  position: relative !important;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
}
.teach-pic-box > img.pic-teacher {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0px 0px;
  position: absolute;
  border-radius: 50%;
  clip-path: circle(38% at center);
}
.teach-pic-box > .card-pic {
  margin: 0px auto;
  position: absolute;
  top: 0;
  left: -15px;
  width: 82px;
  height: 82px;
  background-color: #e6edf7;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.teach-pic-box > .card-pic > img.pic-teacher {
  margin: auto;
  min-width: 82px;
  min-height: 62px;
}
.teach-pic-box > span.text-name {
  margin: 13px 15px 13px 80px;
  height: auto;
  font-size: 19px;
  text-align: left;
  line-height: 3;
  width: 100%;
}
.teach-pic-box > span.glyphicon {
  align-items: flex-end;
}
.selectpicker.teach-select .btn {
  margin: -15px 0px 0px;
}
.selectpicker.teach-select .btn-group.open .dropdown-toggle {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.selectpicker.teach-select .btn-default {
  color: #8a909d;
  background-color: #fff;
  border-color: #ccc;
}


/* ==========================================
   More Features 指定1對1
   ========================================== */

  #more-features .box i.tag-class-top:before {
	content: " ";
	position: absolute;
	width: 0px;
	height: 0px;
	padding: 0px;
	color: #fff;
	line-height: 0;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border: solid #c1a46b;
	border-width: 42px 60px 42px 60px;
	border-color: #c1a46b #c1a46b transparent transparent;
	margin: 0px;
	top: 0px;
	bottom: 0px;
	left: calc(100% - 120px);
	right: 0px;
}
#teachButton .modal-body .radio-teach-button label.btn {
      margin: 0px 5px 0px;
    padding: 0px;
    width: calc(100% - 20px)!important;
}

.radio-teach-button {
    box-shadow: none;
}
.radio-teach-button .btn-outline-select:hover,
.radio-teach-button .btn-outline-select:focus,
.radio-teach-button .btn-outline-select:active,
.radio-teach-button .btn-outline-select.active,
.radio-teach-button .open > .radio-teach-button .dropdown-toggle.btn-outline-select {
  color: #7a808e;
  background-color: transparent;
  border-color: #ccc;
  webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}
.radio-teach-button .btn.cta-btn-outline.bg-color:hover, .radio-teach-button .btn.cta-btn-outline.bg-color:focus, .radio-teach-button .btn.cta-btn-outline.bg-color:active, .radio-teach-button .btn.cta-btn-outline.bg-color.active, .radio-teach-button .open > .dropdown-toggle.cta-btn-outline.bg-color {
    background: #7ee4f1;
    border: #7ee4f1;
    color: #3f4954;
}
.radio-teach-button .dropdown-toggle {
  margin-bottom: -3px;
}
.radio-teach-button .dropdown-menu>li>a:hover, .radio-teach-button .dropdown-menu>li>a:focus {
    background-color: transparent;
}
.radio-teach-button .dropdown-menu ul li a label {
  width: 100%;
}
.radio-teach-button .dropdown-menu ul li a label label {
  width:100%;
  height: 45px;
}
.radio-teach-button .dropdown-menu ul li a label label .pic-box {
  margin: 0px 0px 0px;
}
.radio-teach-button .dropdown-menu ul li a label label .pic-box .card-pic {
      top: 1px;
    width: 40px;
    height: 40px;
}
.radio-teach-button .text-name {
  margin:8px 0px 8px calc(100%/3 + 10px);
  white-space:nowrap;
  width: 250px;
  height: 42px;
  font-size: 19px;
  text-align: left;
  line-height: 120%;
}
.box-scroll {
  height: 310px;
  max-height: 310px;
  overflow: hidden;
  overflow-y: scroll;
}



/*------ 時間選項 ------*/
#teachButton  .radio-button {
  width: 100%;
   margin: 10px auto 0px;
    position: relative;
    text-align: left;
}

#teachButton .radio-button .cta-btn.min-w, #teachButton .radio-button .cta-btn-outline.min-w, #teachButton .radio-button .cta-btn-outline-org.min-w, #teachButton .radio-button .gry-btn.min-w, #teachButton .radio-button .org-btn.min-w,
#teachButton .cta-btn.min-w, #teachButton .cta-btn-outline.min-w, #teachButton .cta-btn-outline-org.min-w, #teachButton .gry-btn.min-w, #teachButton .org-btn.min-w {
  width: 30%!important;
      min-width: 30%!important;
      margin-bottom: 20px;
}
/* ============== More Features 指定老師下拉選單 End ============= */


/* ==========================================
   Restore the Exams 重新參加考試
   ========================================== */
#restore-the-exams {
  overflow: hidden;
  background: linear-gradient(rgba(44, 165, 220, 0.65), rgba(142, 224, 242, 0.65)), url(../img/slide-restore-bg.jpg) no-repeat center center;
  background-size: cover;
  padding: 80px 0px;
}

/*--------------- Clients Section ---------------*/
#clients {
  padding: 30px 0px;
  background: #fff;
  overflow: hidden;
}

#clients img {
  max-width: 100%;
  opacity: 0.5;
  transition: 0.3s;
  padding: 15px 0px;
}

#clients img:hover {
  opacity: 1;
}

/*--------------- Pricing Section ---------------*/
#pricing {
  padding: 60px 0px;
  overflow: hidden;
}

#pricing .box {
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 30px rgba(73, 78, 92, 0.15);
  background: #fff;
  text-align: center;
}

#pricing h3 {
  font-weight: 400;
  margin-bottom: 15px;
  font-size: 28px;
}

#pricing h4 {
  font-size: 46px;
  color: #004a97;
  font-weight: 300;
}

#pricing h4 sup {
  font-size: 20px;
  top: -20px;
}

#pricing h4 span {
  color: #bababa;
  font-size: 20px;
}

#pricing ul {
  padding: 0px;
  list-style: none;
  color: #999;
  text-align: left;
  line-height: 20px;
}

#pricing ul li {
  padding-bottom: 12px;
}

#pricing ul i {
  color: #004a97;
  font-size: 18px;
  padding-right: 4px;
}

#pricing .get-started-btn {
  background: #515e61;
  display: inline-block;
  padding: 6px 30px;
  border-radius: 20px;
  color: #fff;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}

#pricing .featured {
  border: 2px solid #004a97;
}

#pricing .featured .get-started-btn {
  background: linear-gradient(45deg, #2ca5dc, #004a97);
}

/* ==========================================
   Study Curriculum 我的課程表
   ========================================== */
#msc {
  padding: 0px 0px 0px;
  overflow: hidden;
}

#msc #msc-list {
  margin-bottom: 12px;
  padding: 0px;
  list-style: none;
}

#msc #msc-list li {
  border-bottom: 1px solid #ddd;
}

#msc #msc-list a {
  padding: 18px 0px;
  display: block;
  position: relative;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  padding-right: 20px;
}

#msc #msc-list i {
  font-size: 21px;
  font-family: "Glyphicons Halflings";
  position: absolute;
  right: 0;
  top: 16px;
}

/*#msc #msc-list p {
  margin-bottom: 20px;
}*/

#msc #msc-list a.collapse {
  color: #004a97;
}

#msc #msc-list a.collapsed {
  color: #000;
}

#msc #msc-list a i {
  color: #c8c8c8;
}

#msc #msc-list a.collapsed i::before {
  content: "\e259" !important;
  color: #000;
}
  #msc #msc-list a h3, #msc #msc-list a.collapsed h3 {
	font-size: 16px;
	color: #2ca5dc;
	display: block;
	padding: 0px;
  }
  #msc #msc-list a h3 time, #msc #msc-list a.collapsed h3 time {
	font-size: 17px;
  }
  #msc #msc-list a h3 time span, #msc #msc-list a.collapsed h3 time span {
	font-size: 15px;
	color: #686868;
	margin-left: 5px;
	margin-right: 5px;
  }

#msc #msc-list ul.listbox {
  margin: 0px 0px 20px;
  padding: 0px;
  display: table;
}

#msc #msc-list ul.listbox li {
  list-style-type: square;
  float: left;
  margin: 5px 20px 5px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 16px;
  color: #333;
  border-bottom: 0px;
}
  @media (max-width: 991.98px) {
  #msc #msc-list a {
    font-size: 18px;
  }
  #msc #msc-list i {
    top: 13px;
  }}

#msc .container {
  position: relative;
  margin: 0px auto;
  padding-right: 15px;
  padding-left: 15px;
}


#msc ul.explanbox {
  margin: 25px 0px 30px 30px;
  padding: 0px;
}

#msc ul.explanbox h4 {
  margin: 0px 0px 10px -23px;
  padding-top: 5px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 21px;
  color: #004a97;
}

#msc ul.explanbox li {
  list-style-type: square;
  margin: 0px 0px 15px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 16px;
  color: #333;
}

#msc ul.explanbox li p {
  margin: 3px 0px 5px;
  padding: 0px;
  font-size: 15px;
  line-height: 18px;
  color: #777;
}

#msc ul.explanbox li b.text-red {
  font-size: 21px;
  line-height: 24px;
  color: #e6281c;
}

#msc ul.explanbox li ol {
  margin: 2px 0px 0px 18px;
}
#msc ul.explanbox li ol li {
  margin: 0px 0px 3px;
  padding: 0px;
  font-size: 15px;
  line-height: 18px;
  color: #777;
  list-style-type: decimal;
}


/* ==========================================
   Signin Signin_forgetpw Signin_forget Signin_register
   ========================================== */
/* regForm */
.regForm hr.colorgraph {
  border-top: 2px dotted #90c7e5;
}
.regForm hr.height-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.regForm.login input[type="text"], .regForm.login input[type="password"], .regForm.login input[type="email"], .regForm.forget input[type="text"], .regForm.forget input[type="password"], .regForm.forget input[type="email"] {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  font-size: 19px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  border-radius: 2.65rem;
  background-image: none;
  background-repeat: no-repeat;
  border-color: transparent;
  text-transform: none;
  border: 2px solid #61bce5;
  width: 100%;
  background-color: rgba(255,255,255,0.75);
  outline: none;
}
.regForm.login input[type="submit"], .regForm.forget input[type="submit"] {
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  outline: none;
  border: 0;
  font-size: 20px;
  box-shadow: 0px 4px 25px -8px rgba(32,102,142,0.5);
}
.regForm.login input[type="submit"]:hover, .regForm.login input[type="submit"]:focus,
.regForm.forget input[type="submit"]:hover, .regForm.forget input[type="submit"]:focus {
  border: 0px solid #2ca5dc;
  background: linear-gradient(60deg, rgba(44, 165, 220, 1.0), rgba(0, 74, 151, 1.0));
}
.regForm.login input[type="submit"]:visited, .regForm.login input[type="submit"]:active,
.regForm.forget input[type="submit"]:visited, .regForm.forget input[type="submit"]:active {
  border: 0px solid #2ca5dc;
  background: linear-gradient(60deg, rgba(44, 165, 220, 1.0), rgba(0, 74, 151, 1.0));
}
.regForm.forget .col-md-12, .regForm.forget .col-md-6 {
  padding: 0px 0px;
}
.regForm.forget a.cta-btn-outline {
  display: inline-block;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.regForm .submit .agree {
  margin-left: 8px;
  padding-bottom: 20px;
}
.regForm .submit .agree input {
  margin-top: 2px;
}
.regForm .submit .agree a {
  color: #2ca5dc;
  transition: 0.5s;
}
.regForm .submit .agree a:hover,
.regForm .submit .agree a:active,
.regForm .submit .agree a:focus {
  color: #004a97;
  outline: none;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .regForm.forget a.cta-btn-outline {
      display: inline-block;
      margin-left: 1%;
      margin-right: 1%; }
}
.regForm.forget .col-xs-4 {
  padding-left: 4px;
  padding-right: 0px;
}
.regForm.forget .col-md-12 p {
  margin-left: 4px;
}

.form-label-group {
  position: relative;
  margin-top: 0rem;
  margin-bottom: 1.6rem;
}
.form-label-group input,
.form-label-group label {
  height: 5.3rem;
  padding: 16px 18px;
  /*border-radius: 2rem;*/
  box-shadow: none;
}
.form-label-group,
.form-label-group input,
.form-label-group label {
  font-size: 19px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  text-align: left;
}
.form-label-group label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.2;
  color: #495057;
  pointer-events: none;
  cursor: text; /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: .5rem;
  transition: all .1s ease-in-out;
}
.form-label-group.text-light label {
  color: #8e959a;
}
.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}
.form-label-group input::-moz-placeholder {
  color: transparent;
}
.form-label-group input:-ms-input-placeholder {
  color: transparent;
}
.form-label-group input::-ms-input-placeholder {
  color: transparent;
}
.form-label-group input::placeholder {
  color: transparent;
}
.form-label-group input:not(:-moz-placeholder-shown) {
  padding-top: 1.65rem;
  padding-bottom: .2rem;
}
.form-label-group input:not(:-ms-input-placeholder) {
  padding-top: 1.65rem;
  padding-bottom: .2rem;
}
.form-label-group input:not(:placeholder-shown) {
  padding-top: 1.65rem;
  padding-bottom: .2rem;
}
.form-label-group input:not(:-moz-placeholder-shown) ~ label {
  padding-top: .75rem;
  padding-bottom: .15rem;
  font-size: 12px;
  color: #999;
}
.form-label-group input:not(:-ms-input-placeholder) ~ label {
  padding-top: .75rem;
  padding-bottom: .15rem;
  font-size: 12px;
  color: #999;
}
.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: .75rem;
  padding-bottom: .15rem;
  font-size: 12px;
  color: #999;
}
.form-label-group input:-webkit-autofill ~ label {
  padding-top: .75rem;
  padding-bottom: .15rem;
  font-size: 12px;
  color: #999;
}
.form-label-group select.form-control {
  height: 5.1rem;
  padding: 5px 10px 5px 12px;
  border-radius: 2.5rem;
  box-shadow: none;
  background-image: none;
  background-repeat: no-repeat;
  border-color: transparent;
  text-transform: none;
  border: 2px solid #61bce5;
  background-color: rgba(255,255,255,0.75);
  outline: none;
  margin-left: -6px;
}
.form-label-group select,
.form-label-group option {
  font-size: 16px;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  padding-right: 0px;
}
/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .form-label-group label {
    position: static;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #999;
  }
}

/* Button btn */
.start-btn {
  padding: 12px 28px 10px;
  border-radius: 50px;
  transition: 0.25s ease-in-out all;
  margin: 10px;
  /*font-size: 20px;*/
  font-weight: bold;
  color: #fff;
  line-height: 1.8;
  border: 2px solid #2ca5dc;
  background-color: #2ca5dc;
}
.start-btn:focus,
.start-btn:active:focus,
.start-btn.active:focus,
.start-btn.focus,
.start-btn:active.focus,
.start-btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.start-btn:hover,
.start-btn:focus,
.start-btn.focus {
  color: #fff;
  text-decoration: none;
  border: 2px solid #2ca5dc;
}
.start-btn:active,
.start-btn.active {
  background-image: none;
  outline: 0;
  border: 2px solid #2ca5dc;
  -webkit-box-shadow: none;
          box-shadow: none;
}
/* btn-forgot */
a.btn-forgot {
    font-size: 15px;
    line-height: 1.25;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    transition: 0.25s ease-in-out all;
    margin-top: -10px;
    margin-right: 5px;
    padding: 0 0 2px;
}
a.btn-forgot:focus,
a.btn-forgot:active:focus,
a.btn-forgot.active:focus,
a.btn-forgot.focus,
a.btn-forgot:active.focus,
a.btn-forgot.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a.btn-forgot:hover,
a.btn-forgot:focus,
a.btn-forgot.focus {
  color: #2ca5dc;
  text-decoration: none;
  border-bottom: 1px solid #56b7e3;
}
a.btn-forgot:active,
a.btn-forgot.active {
  background-image: none;
  outline: 0;
  border-bottom: 1px solid #56b7e3;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* 驗證碼 */
.regForm.forget .verify #ASPxCaptcha1 table {
  position: relative !important;
  margin: 0;
  padding: 0;
  width: 100%;
}
.regForm.forget .verify #ASPxCaptcha1 table > tbody > tr {
  display: inline;
}
.regForm.forget .verify #ASPxCaptcha1 table > tbody > tr > td {
  position: relative !important;
  display: block;
}
.regForm.forget .verify #ASPxCaptcha1 table > tbody > tr > td.dxcaTextBoxCellNoIndent_Office2010Silver {
  position: absolute !important;
  width: calc(100% - 142px);
}
/* 驗證碼輸入 */
.regForm.forget .verify #ASPxCaptcha1 table > tbody > tr > td > label {
  position: absolute;
  top: 7px;
  left: 18px;
  font-size: 13px;
  font-weight: normal;
  color: #2ca5dc;
  z-index: 2;
}
.regForm.forget .verify #ASPxCaptcha1_TB {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  font-size: 16px;
  padding: 20px 15px 17px;
  height: 5rem;
  border-radius: 2.5rem;
  background-image: none;
  background-repeat: no-repeat;
  border-color: transparent;
  text-transform: none;
  border: 2px solid #61bce5;
  background-color: rgba(255,255,255,0.75);
  outline: none;
}
.regForm.forget .verify #ASPxCaptcha1 table > tbody > tr > td.dxic {
  padding: 12px 0 0;
}
.regForm.forget .verify #ASPxCaptcha1 input.dxeEditAreaSys {
  padding: 20px 15px 17px;
  font-size: 16px;
  border-radius: 2.5rem;
  background-image: none;
  background-repeat: no-repeat;
  border-color: transparent;
  text-transform: none;
  border: 2px solid #61bce5;
  background-color: transparent;
  outline: none;
}
td.dxcaTextBoxCellNoIndent_Office2010Silver, td.dxcaRefreshButtonCell_Office2010Silver {
  display: block;
}
td.dxcaTextBoxCellNoIndent_Office2010Silver {
  float: left;
  margin-top: -4px;
}
td.dxcaRefreshButtonCell_Office2010Silver {
  float: right;
  margin-top: 55px;
  width: 186px;
}
.verify div.dxca-imageDiv {
  position: absolute !important;
  margin: 0px;
  padding: 0px 0px;
  top: 0px;
  right: 0;
}
.dxca-imageDiv, .dxca-imageDiv img {  
  width: 180px!important;
  height: 50px!important;
}
#ASPxCaptcha1_IMGD.dxca-imageDiv {  
  width: 180px!important;  
  height: 50px!important;
  background-color: transparent;
  border-color: #AEC8D7;
}
a.dxcaRefreshButton_Office2010Silver {
  color: #218ecb;
}
a.dxcaRefreshButton_Office2010Silver:hover {
  color: #004a97;
}
.regForm.forget .verify {
  margin-bottom: 10px;
  padding: 0px;
}
.regForm.forget .verify #ASPxCaptcha1_TB_EC {
  padding: 5px 16px;
}

/* Checkbox */
.type_checkbox {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    padding-right: 10px;
    margin-bottom: 3px;
    cursor: pointer;
    color: #5c5f6b;
    font-size: 15px;
    font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.type_checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Checkbox mark */
.checkmark {
    position: absolute;
    top: 1px;
    left: 2px;
    height: 19px;
    width: 19px;
    background-color: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 5px;
}
/* Checkbox color */
.type_checkbox:hover input ~ .checkmark {
    background-color: #ddd;
    border: 2px solid #ddd;
}
.type_checkbox input:checked ~ .checkmark {
    background-color: #2ca5dc;
    border: 2px solid #2ca5dc;
    border-radius: 5px;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.type_checkbox input:checked ~ .checkmark:after {
    display: block;
}
.type_checkbox .checkmark:after {
    left: 5px;
    top: 0px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.regForm .checkboxTitle {
	color: #494e5b;
	background-color: #c7e9ff;
	border-radius: 5px;
	display: inline-table;
	padding: 5px 10px 2px;
}
/* #GenderM & #GenderF Input radio */
 input.radio-input {
 	opacity: 0;
 	width: 0;
 	height: 0;
	}
 .radio-label {
 	width: 34px;
 	height: 34px;
 	line-height: 34px;
 	border: 2px solid #e8e8e8;
 	background-color: #fff;
 	border-radius: 50%;
 	font-size: 16px;
 	font-weight: bold;
 	color: #1677b9;
 	text-align: center;
 	cursor: pointer;
 	position: absolute;
 	display: block;
 	top: 0;
	}
 .GenderM.radio-button, .GenderF.radio-button {
 	position: absolute;
 	width: 34px;
 	height: 34px;
 	line-height: 34px;
 	top: 1px;
 	left: 1px;
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
}
 .GenderM.radio-button::after, .GenderF.radio-button::after {
 	content: "";
 	display: block;
 	width: 30px;
 	height: 30px;
 	border-radius: 50%;
 	position: absolute;
 	top:-1px;
 	left: -1px;
 	line-height: 30px;
 	background-color: #1677b9;
 	opacity: 0;
 	transition: opacity 0.2s;
}
 .radio-input:checked ~ .radio-label .GenderM.radio-button::after, .radio-input:checked ~ .radio-label .GenderF.radio-button::after {
 	opacity: 1;
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
}
 .radio-input:checked ~ .radio-label .GenderM.radio-button::after {
      content: "男";
      color: #fff;
      font-weight: bold;
      background-color: #1677b9;
      }
 .radio-input:checked ~ .radio-label .GenderF.radio-button::after {
      content: "女";
      color: #fff;
      font-weight: bold;
      background-color: #1677b9;
      }
/* end input[type=radio] #GenderM & #GenderF */


/* Signin */
#signin.signin-bg, #signin_forgetpw.signin-bg, #signin_forget.signin-bg, #signin_register.signin-bg  {
    position: relative;
    margin: 0;
    padding: 0;
    background: #bfe8fc url(../img/main-signin-bg.jpg) center bottom no-repeat;
    background-size: 100%;
    width: 100%;
    height: auto;
}
#signin_register.signin-bg  {
    background: #bfe8fc url(../img/main-signin-reg-bg.jpg) center bottom no-repeat;
}
#signin > .member, #signin_forgetpw > .member, #signin_forget > .member, #signin_register > .member {
    position: relative;
    overflow-x: hidden;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
    padding: 0;
    max-width: inherit;
    padding-top: 142px;
}
#signin_register > .member {
    padding-top: 142px;
}
#signin > .member > .regForm.login, #signin_forgetpw > .member > .regForm.forget, #signin_forget > .member > .regForm.forget, #signin_register > .member > .regForm.forget {
    padding: 10px 60px 30px;
    background-color: rgba(255,255,255,0.75);
    box-shadow: 0px 0px 30px -4px rgba(32,102,142,0.55);
    border: #bfe8fc solid 0px;
    border-radius: 0px;
}
#signin > .member > .row.text-center, #signin_forgetpw > .member > .row.text-center, #signin_forget > .member > .row.text-center, #signin_register > .member > .row.text-center {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
}
#signin .regForm.login > .text-center > h3, #signin_forgetpw .regForm.forget > .text-center > h3, #signin_forget .regForm.forget > .text-center > h3, #signin_register .regForm.forget > .text-center > h3 {
    font-size: 32px;
    color: #218ecb;
    text-align: center !important;
    margin-top: 20px;
    margin-bottom: 10px;
}
#signin .regForm.login p, #signin_forgetpw .regForm.forget p, #signin_forget .regForm.forget p, #signin_register .regForm.forget p {
    font-size: 15px;
    /*color: #fff;*/
    line-height: 1.25;
    margin: 3px auto;
    padding-left: 10px;
    padding-right: 10px;
}
#signin .regForm.login p.just, #signin_forgetpw .regForm.forget p.just, #signin_forget .regForm.forget p.just, #signin_register .regForm.forget p.just {
    text-align: justify !important;
}
#signin .regForm.login span.glyphicon, #signin_forgetpw .regForm.forget span.glyphicon, #signin_forget .regForm.forget span.glyphicon, #signin_register .regForm.forget span.glyphicon {
    font-size: 42px;
    color: #fff;
    margin-top: -42px;
    background: linear-gradient(60deg, rgba(44, 165, 220, 1), rgba(0, 74, 151, 1));
    width: 100px;
    height: 100px;
    border-radius: 50px;
    padding-top: 25px
}
#signin_register .regForm.forget .form-label-group {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
#signin_register .regForm.forget .reduce-col {
  margin: 0 0 1.5% -1%;
  padding: 0;
  width: calc(100% + 1%);
  display: inline-block;
}
#signin_register .regForm.forget .reduce-col > .col-md-6 {
  margin-left: 1%;
  max-width: calc(100% - 1%);
}
#signin_register .regForm.forget .reduce-col > .col-name, #signin_register .regForm.forget .reduce-col > .col-gender {
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
}
#signin_register .regForm.forget .reduce-col > .col-name {
  width: calc(100% - 118px);
}

#signin_register .regForm.forget .reduce-col > .col-name > .form-label-group {
  margin: 0 0 1% 1%;
  max-width: calc(100% - 1%);
  float: left;
}
#signin_register .regForm.forget .reduce-col > .col-gender {
  width: 118px;
  float: right;
  margin-top: 19px;
  padding-left: 8px;
}
#signin_register .regForm.forget .reduce-col > .col-gender > span.radio-group {
  display: inline-block;
  float: left;
  height: 32px;
}
#signin_register .regForm.forget .reduce-col > .col-gender > .col-md-1 {
  margin: -11px 0 0 -13px;
  width: 50px;
  min-height: 50px;
}
#signin_register .regForm.forget span.requireicon, #signin_register .regForm.forget span.require {
    position: relative;
    top: 0px;
    display: inline-block;
    font-family: Arial, Helvetica, simhei, sans-serif;
    font-style: 15px;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 3px;
}
#signin_register .regForm.forget .requireicon-asterisk:before {
    content: "✱";
}
#signin_register .regForm.forget p.row-top {
    margin-top: -19px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 15px;
    font-weight: bold;
}
#signin_register .regForm.forget span.require {
    position: absolute;
    top: 18px;
    left: 8px;
}
#signin_register .regForm.forget span.require:before {
    content: "*";
}
#signin_register .regForm.forget .form-label-group a, #signin_register .regForm.forget span.text-xs {
    padding-left: 0px;
    padding-right: 0px;
}
#signin_register .regForm.forget .form-label-group a {
    /*font-size: 16px;*/
    display: inline-block;
    margin-top: 6px;
    margin-left: 8px;
}
#signin_register .regForm.forget span.text-xs {
    font-size: 11px;
    color: #98a3af;
    margin-left: 8px;
}
#signin_register .regForm.forget .checkboxTXT input[type="text"] {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
  font-size: 15px;
  border-radius: 0.75rem;
  background-image: none;
  background-repeat: no-repeat;
  border-color: transparent;
  text-transform: none;
  border: 2px solid #eee;
  width: 100%;
  height: auto;
  margin-top: 1px;
  margin-bottom: -8px;
  padding: 4px 10px;
  outline: none;
}

@media (min-width: 992px) {
  #signin.signin-bg, #signin_forgetpw.signin-bg, #signin_forget.signin-bg, #signin_register.signin-bg {
      padding: 0;
      background-size: cover;
      height: 90vh;
  }
  #signin_register.signin-bg {
      height: 1200px;background-size: cover;
  }
  #signin > .member, #signin_forgetpw > .member, #signin_forget > .member, #signin_register > .member {
      position: absolute !important;
      left: calc(100%/2 - 82px);
      display: table;
      padding-top: 0px;
  }
  #signin > .member {
      top: calc(100%/2 - 242px);
  }
  #signin_forgetpw > .member, #signin_register > .member {
      top: 68px;
  }
  #signin_forget > .member {
      top: calc(100%/2 - 242px);
  }
  #signin_register > .member {
      top: 68px;
      left: calc(100%/2 - 82px);
  }
  #signin > .member > .regForm.login, #signin_forgetpw > .member > .regForm.forget, #signin_forget > .member > .regForm.forget, #signin_register > .member > .regForm.forget {
      max-width: 520px;
      border-radius: 20px;
  }
  #signin_register .regForm.forget span.glyphicon { display: none; }
}
@media (min-width: 768px) {
  #signin > .member > .container, #signin_forgetpw > .member > .container, #signin_forget > .member > .container {
      width: 520px;
  }
  #signin_register > .member > .container {
      width: 520px;
  }
  #signin_register .regForm.forget .reduce-col > .col-md-6 {
      margin-left: 1%;
      max-width: calc(100%/2 - 1%);
  }
  #signin_register .regForm.forget .reduce-col > .col-name > .form-label-group {
      margin: 0 0 0 1%;
      max-width: calc(100%/2 - 1%);
      display: inline-block;
      float: left;
  }
}
@media (min-width: 480px) and (max-width: 991.98px) {
  #signin.signin-bg, #signin_forgetpw.signin-bg, #signin_forget.signin-bg, #signin_register.signin-bg {
      padding: 0 0 60px;
      background-size: auto;
      height: auto; }
  #signin > .member, #signin_forgetpw > .member, #signin_forget > .member, #signin_register > .member {
      position: relative;
      display: table;
      margin-left: auto;
      margin-right: auto;
      max-width: 420px;
      padding-top: 142px;
      top: auto;
  }
  #signin > .member > .regForm.login, #signin_forgetpw > .member > .regForm.forget, #signin_forget > .member > .regForm.forget, #signin_register > .member > .regForm.forget {
      margin-left: auto;
      margin-right: auto;
      border-radius: 20px;
  }
  #signin_register .regForm.forget span.glyphicon { display: none; }

  input[type=submit].start-btn.btn-block {
      width: 85%; }
}
@media screen and (max-width: 479.98px) {
  #signin.signin-bg, #signin_forgetpw.signin-bg, #signin_forget.signin-bg, #signin_register.signin-bg {
      padding: 0;
      background: linear-gradient(rgba(44, 165, 220, 1.0)0%, rgba(191, 232, 252, 1.0)33%) }
  #signin > .member, #signin_forgetpw > .member, #signin_forget > .member, #signin_register > .member {
      position: relative;
      margin-bottom: -5px;
      max-width: inherit;
      width: 100%; }
  #signin > .member > .regForm.login, #signin_forgetpw > .member > .regForm.forget, #signin_forget > .member > .regForm.forget, #signin_register > .member > .regForm.forget {
      padding: 10px 35px 42px; }
    
  input[type=submit].start-btn.btn-block {
      width: 85%; }
  .regForm.forget .verify #ASPxCaptcha1 table > tbody > tr > td.dxcaTextBoxCellNoIndent_Office2010Silver {
      width: calc(100% - 142px) !important; }
}


/* ==========================================
   Footer
   ========================================== */
#footer {
  background: #fff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  margin: 0px auto;
  padding: 0px 0px 20px;
  color: #333;
  font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
  font-size: 15px;
}

#footer .copyright {
  margin: 0px 0px 0px -98px;
  padding: 0px;
  display: inline-block;
  width: 460px;
}

#footer .copyright h4 {
  margin-top: 46px;
  display: table;
}

#footer .copyright small {
  margin: -20px 0px 0px 80px;
  padding: 0px;
  line-height: 2;
  display: table;
}
 
#footer .credits {
  font-size: 13px;
  color: #888;
}

/* Footer Links */
#footer .footer-link {
  border-bottom: #e8e8e8 solid 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}
#footer .footer-link a {
  color: #fff;
  text-decoration: none;
  margin: 10px 5px;
  word-break: break-all;
  display: inline-block;
}
#footer .footer-link a:hover {
  color: #004a97;
}
#footer .footer-link .link-span {
  margin-left: 20px;
}
  @media (max-width: 767.98px) {
  #footer .footer-link .link-span {
	margin-left: 0px;
	margin-top: -10px; }}

/*#footer .footer-link #link-span #Privacy,#footer .footer-link #link-span #Recruit {
  display: block;
}*/
#footer a.url-amc {
	display: inline-block;
	padding: 3px 7px;
	background-color: #4F5962;
	border-radius: 5px;
	color: #ffffff;
}
#footer a.url-amc:hover,#footer a.url-mail:hover {
  background-color: #004a97;
  border-color: #004a97;
  color: #ffffff;
}
#footer a.url-mail {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
}

#footer .icon-fb {
  margin: 0px;
  padding: 0px;
  display: inline-block;
}
#footer #footer-logo, #footer #logo-fb, #footer #logo-ig, #footer #logo-yt {
  float: left;
  display: inline-block;
}
#footer #footer-logo {
  margin-right: 6px;
  padding-bottom: 6px;
}
#footer #footer-logo img {
  width: 75px;
  height: 85px;
}
#footer #logo-fb, #footer #logo-ig, #footer #logo-yt {
  border: #fff solid 0px;
  border-radius: 8px;
  padding-left: 3px;
  padding-right: 3px;
}
#logo-fb img, #logo-ig img, #logo-yt img {
  border-radius: 8px;
  background-color: #93cee8;
  width: 36px;
  height: 36px;
  margin-top: 8px;
  margin-bottom: 5px;
  transition: background 0.4s;
}
#logo-fb img:hover, #logo-ig img:hover, #logo-yt img:hover {
  background: #004a97;
  transition: background 0.4s;
}
#footer .footerTXT h4 {
  font-size: 1.2em;
}

  @media (max-width: 767.98px) {
  #footer .footer-link a {
	margin: 10px 5px 3px; }
  #footer .copyright {

	margin: 0px;
	padding-top: 10px;
	text-align: center;
	width: auto;
	display: block; }
  #footer .copyright h4, #footer .copyright small {
	margin: 4px auto 0px;
	text-align: center;
	display: block; }
  #footer #footer-logo, #footer {
	margin: 0px auto;
	text-align: center;
	display: block;
	float: none; }
  #logo-fb, #logo-ig, #logo-yt {
	margin: 0px auto;
	text-align: center;
	display: inline-block;
	float: none; }}