@charset "UTF-8";
body {
  overflow-x: hidden; }

/* Bootstrap Carousel */
div#extension-carousel ol.carousel-indicators li {
  border: 1px solid #ccc !important;
  background: #ECECEC; }

div#extension-carousel ol.carousel-indicators li.active {
  border: 1px solid #999 !important;
  background: #FFF;
  width: 14px;
  height: 14px; }

div.carousel-inner div.CarouselImg {
  width: 1193px;
  height: 299px; }

div.logo_container {
  width: 500px;
  height: 55px;
  border: none;
  position: relative;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  margin-bottom: 10px; }

/* 覆蓋 vnstyle*/
.form-inline {
  margin-bottom: 10px; }

.wrapper {
  padding-bottom: 3%;
  min-height: 100%;
  height: auto !important;
  margin: 0 auto -62px;
  position: relative; }

.clearpadding {
  padding: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px; }

span.span-icon-text i {
  font-size: 1.2em;
  color: #666; }

/*--------------------- PageTitle ---------------------*/
div.PageTitle {
  font-weight: 500;
  border-bottom: solid 2px #99c23f;
  margin-bottom: 2%; }
  div.PageTitle h3 {
    font-size: 1.625em;
    font-weight: 500; }
    div.PageTitle h3 i {
      margin-right: 10px;
      font-size: 0.8125em;
      color: #666; }

/*--------------------- Footer ----------------------*/
div.footer {
  margin-top: 100px;
  font-size: 0.83em;
  font-weight: normal; }

/*------------------ 編輯表單 ------------------*/
table.EditForm {
  width: 95%; }

table.EditForm th.Title,
table.EditForm td.Title {
  width: 16%;
  text-align: right;
  vertical-align: top;
  font-weight: bold;
  padding-right: 10px; }
  table.EditForm th.Title label,
  table.EditForm td.Title label {
    font-weight: bold !important; }

table.EditForm th,
table.EditForm td {
  padding: 10px 0 15px 0; }
  table.EditForm th span.Icon-Text,
  table.EditForm td span.Icon-Text {
    margin-top: 5px; }

/*--------------------- 會員專區 ---------------------*/
div.AccountNotActivateMsg {
  margin-bottom: 20px;
  padding: 15px 20px 20px 20px;
  background: #1fa67a;
  color: #FFF;
  font-size: 1.25em;
  text-align: center; }
  div.AccountNotActivateMsg h1 {
    font-size: 1.8em;
    font-weight: 500; }
    div.AccountNotActivateMsg h1 i {
      margin-right: 3px; }
  div.AccountNotActivateMsg span a {
    display: inline-block;
    padding: 5px 10px;
    margin-left: 5px;
    background: #a5d8c7;
    font-weight: bold; }
    div.AccountNotActivateMsg span a:hover {
      background: #FFF;
      color: #1fa67a; }

.mag {
  background-color: #f7f7f7; }

/*--------------------- 文章頁面 ---------------------*/
div.Topic {
  margin-top: 30px;
  font-size: 1.125em;
  line-height: 150%; }
  div.Topic div.Caption {
    margin: 0 0 30px 0; }
    div.Topic div.Caption h1 {
      padding: 0;
      margin: 0;
      font-weight: 700;
      font-size: 2em;
      line-height: 125%; }
    div.Topic div.Caption ul, div.Topic div.Caption li {
      margin: 0;
      padding: 0;
      display: inline-block; }
    div.Topic div.Caption li {
      font-size: 0.9375em;
      padding-right: 10px; }
  div.Topic p {
    margin-bottom: 30px; }
  div.Topic img {
    max-width: 100%;
    height: auto; }
  div.Topic div.attach {
    background: #ECECEC;
    padding: 15px 10px; }
    div.Topic div.attach span.Icon-Text24 {
      font-size: 1.5em;
      margin-bottom: 15px; }
    div.Topic div.attach a {
      text-decoration: none; }
      div.Topic div.attach a:hover {
        color: #333;
        text-decoration: underline; }
  div.Topic ul, div.Topic li {
    display: inline-block;
    padding: 0;
    margin: 0; }

/*--------------------- 課程資訊表格 ---------------------*/
table.CourseDetailTable,
table.CourseAbstract {
  width: 100%;
  font-size: 1.125em;
  line-height: 150%; }
  table.CourseDetailTable th, table.CourseDetailTable td,
  table.CourseAbstract th,
  table.CourseAbstract td {
    padding: 10px;
    vertical-align: top; }
  table.CourseDetailTable th.Title,
  table.CourseAbstract th.Title {
    width: 15%; }

table.CourseAbstract {
  font-size: 1em;
  border: none; }
  table.CourseAbstract th, table.CourseAbstract td {
    border-bottom: 1px solid #ECECEC; }

/*--------------------- 繳費資訊確認表單 ---------------------*/
div#PayDetailTable {
  font-size: 1.125em;
  margin-bottom: 20px; }
  div#PayDetailTable table {
    width: 100%;
    border: none; }
    div#PayDetailTable table th, div#PayDetailTable table td {
      background: #ECECEC;
      padding: 8px;
      vertical-align: top;
      border-bottom: 1px solid #CCC; }
    div#PayDetailTable table th.Title {
      width: 35%;
      text-align: right; }
      div#PayDetailTable table th.Title span.discount_name {
        display: block;
        font-weight: normal;
        font-size: 0.85em;
        padding-right: 20px; }
    div#PayDetailTable table td span.minus {
      color: #fb0000; }
      div#PayDetailTable table td span.minus:before {
        content: '-'; }

#PayMethod {
  margin-top: 40px; }
  #PayMethod h1 {
    font-size: 1.5em;
    font-weight: 500;
    margin-bottom: 20px; }
  #PayMethod table.table_PayMethod td, #PayMethod table.table_PayMethod th {
    padding: 15px;
    font-size: 1.725em;
    line-height: 130%; }
  #PayMethod table.table_PayMethod td label {
    padding-left: 250px; }
  #PayMethod table.table_PayMethod td span.charge_fee {
    display: block;
    font-size: 18px; }
  #PayMethod table.table_PayMethod td.PayMethod_CS {
    height: 146px;
    background: url(/Images/u39.png) 10px center no-repeat; }
    #PayMethod table.table_PayMethod td.PayMethod_CS.PayDisabled {
      -webkit-filter: grayscale(1);
      /* Old WebKit */
      filter: grayscale(1); }
  #PayMethod table.table_PayMethod td.PayMethod_WebATM {
    height: 146px;
    background: url(/Images/u35.png) 10px center no-repeat; }
    #PayMethod table.table_PayMethod td.PayMethod_WebATM.PayDisabled {
      -webkit-filter: grayscale(1);
      /* Old WebKit */
      filter: grayscale(1); }
  #PayMethod table.table_PayMethod td.PayMethod_Cash {
    height: 146px;
    background: url(/Images/u41.png) 10px center no-repeat; }
    #PayMethod table.table_PayMethod td.PayMethod_Cash.PayDisabled {
      -webkit-filter: grayscale(1);
      /* Old WebKit */
      filter: grayscale(1); }

/*--------------------- 繳費資訊確認表單 (Popup Confirm) ---------------------*/
table.table_PayDetailConfirmPopup {
  margin-top: 10px; }

table.table_PayDetailConfirmPopup td, table.table_PayDetailConfirmPopup th {
  padding: 8px;
  border-bottom: 1px solid #CCC;
  text-align: right;
  vertical-align: top;
  font-weight: 500; }

table.table_PayDetailConfirmPopup td span.minus {
  color: #fb0000 !important; }

table.table_PayDetailConfirmPopup th span.discount_name {
  display: block;
  padding-right: 18px;
  font-weight: normal;
  font-size: 0.8125em; }

table.table_PayDetailConfirmPopup span.AmountDue {
  font-weight: bold;
  font-size: 1.125em; }

/*------------------ Accordian Style ------------------*/
div.Accordian {
  margin: 15px 0 15px; }

div.Accordian div.AccordianContent {
  margin-bottom: 40px; }

div.AccordianTitle {
  font-weight: bold;
  padding: 8px 35px;
  margin-bottom: 10px !important;
  border-radius: 3px;
  cursor: pointer;
  color: #333; }

div.AccordianTitle, div.AccordianTitle.Collapse {
  background: #CCC url("Icons/SVG/right-arrow-angle.svg") 10px center no-repeat;
  background-size: 16px 16px; }

div.AccordianTitle:hover, div.AccordianTitle.Collapse:hover {
  color: #FFF;
  background: #114781 url("Icons/SVG/right-arrow-angle.svg") 10px center no-repeat;
  background-size: 16px 16px; }

div.AccordianTitle.Expand {
  color: #FFF;
  background: #0060c8 url("Icons/SVG/down-arrow-of-angle.svg") 10px center no-repeat;
  background-size: 16px 16px; }

div.AccordianTitle.Expand:hover {
  color: #FFF;
  background: #114781 url("Icons/SVG/down-arrow-of-angle.svg") 10px center no-repeat;
  background-size: 16px 16px; }

/*--------------------- 篩選區塊 ---------------------*/
div.QueryFilter {
  border-bottom: 1px solid #ECECEC;
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 10px 0; }
  div.QueryFilter table {
    width: 90%; }
    div.QueryFilter table th, div.QueryFilter table td {
      padding: 5px; }
    div.QueryFilter table th.Title {
      width: 12%;
      padding-right: 20px; }

/*--------------------- 分頁 ---------------------*/
table#ListView {
  border: none; }
  table#ListView th, table#ListView td {
    font-size: 1.125em;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #ECECEC; }
  table#ListView td {
    background: none; }

div.PagerContainer div.selector {
  text-align: right;
  padding-top: 20px; }
  div.PagerContainer div.selector select {
    font-size: 0.875em;
    border-radius: 5px;
    padding: 6px; }

/* -------------- 檔案下載 ----------- */
div#FileDownload ul, div#FileDownload li {
  margin: 0;
  padding: 0;
  display: block; }

div#FileDownload li {
  margin-bottom: 22px; }
  div#FileDownload li a {
    font-size: 1.375em; }

/* -------------- Document Viewer ----------- */
/*iframe {
    width: 100%;
    height: 1080px;
    border: 1px solid #999;
    margin-top: 30px;
    margin-bottom: 50px;
}

.Viewer {
    border: 1px solid #CCC;
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 80px;
}

.Viewer.Pdf {
    background: #333;
    padding-bottom: 10px;
    border-right: none;
    height: 1090px;
}

.Viewer.Img img {
    display: block;
    width: 100%;
    height: auto;
}*/
/*--------------------- Error Msg ----------------------*/
span.field-validation-error {
  display: block;
  color: #00bf48;
  margin: 2px 0;
  margin-left: 10px;
  margin-bottom: 8px;
  font-size: 0.875em; }

input.input-validation-error,
input.input-validation-error:focus {
  border: 1px solid #00bf48;
  box-shadow: #00bf48 0px 0px 5px;
  -moz-box-shadow: #00bf48 0px 0px 5px;
  -webkit-box-shadow: #00bf48 0px 0px 5px;
  -ms-box-shadow: #00bf48 0px 0px 5px;
  -o-box-shadow: #00bf48 0px 0px 5px;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }

div.validation-summary-errors {
  border: 1px solid #00bf48;
  background: #ECECEC;
  padding: 15px 25px;
  color: #00bf48;
  font-weight: bold;
  font-size: 1.25em;
  padding-left: 35%;
  margin-bottom: 25px;
  border-radius: 2px; }

div.validation-summary-errors ul,
div.validation-summary-errors ul li {
  display: block;
  padding: 0;
  margin: 0; }

/*--------------------- Other ----------------------*/
img.ValidateCode {
  display: inline-block;
  border: 1px solid #ECECEC;
  margin-left: 10px; }

span.TxtNull {
  color: #999;
  font-style: italic; }

span.TxtMore {
  font-size: 0.7em; }

div.Tip,
span.Tip {
  font-size: 90%;
  color: #888; }
  div.Tip.Block,
  span.Tip.Block {
    display: block; }
  div.Tip i.fa,
  span.Tip i.fa {
    margin-right: 5px !important;
    font-weight: bold;
    color: #333; }

span.PlaceHolder, span.PlaceHolder.show {
  display: block; }

span.PlaceHolder.inline, span.PlaceHolder.inline.show {
  display: inline !important; }

span.PlaceHolder.hidden {
  display: none; }

span.alias {
  font-size: 0.875em;
  color: #666; }

/* Loading Icon*/
div.DataLoading {
  font-size: 1.25em;
  position: relative;
  padding-left: 27px; }

div.DataLoading::before {
  content: '';
  display: inline-block;
  height: 22px;
  width: 22px;
  animation: rotate 1.2s infinite linear;
  border: 4px dotted #0060c8;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 0; }

/* Block UI */
.BlockUI_Title {
  /*background: url(../Images/ajaxLoading.gif) 0px center no-repeat;
    background-size: 24px 24px;*/
  padding-left: 33px;
  font-size: 1.375em;
  display: inline-block;
  position: relative; }

.BlockUI_Title::before {
  content: '';
  display: inline-block;
  height: 24px;
  width: 24px;
  animation: rotate 1.2s infinite linear;
  border: 4px dotted #0060c8;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0; }

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

.BlockUI_Content {
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 0.8125em; }