@import url("table.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Anton|Roboto:400,500,700,900');
html, body{
    background: #fff;
    color: #495057;
    font-size: 18px;
    font-family: 'Roboto', Gotham, "Helvetica Neue", Helvetica, Arial, "儷黑 Pro", "LiHei Pro", 'Noto Sans SC', "微軟正黑體", "Microsoft JhengHei", sans-serif;
    line-height: 1.75em;
    width: 100%;
    height:auto;
    margin:0;
    padding:0;
    /*overflow:auto*/
}

/*---   Font   ---*/
h1, h2, h3, h4, h5, h6{ color: var(--dark-gray); font-family: 'Noto Sans TC', sans-serif; font-weight: 700; }
h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small{ color:var(--secondary);}
h1, .h1{ font-size: 1.75rem;}
h2, .h2{ font-size: 1.65rem;}
h3, .h3{ font-size: 1.5rem;}
h4, .h4{ font-size: 1.375rem;}
h5, .h5{ font-size: 1.25rem;}
h6, .h6{ font-size: 1rem;}
@media print, screen and (min-width: 40em) {
  h1, .h1{ font-size: 1.875rem; }/*30px*/
  h2, .h2{ font-size: 1.75rem;}/*28px*/
  h3, .h3{ font-size: 1.625rem;}/*26px*/
  h4, .h4{ font-size: 1.5rem;}/*24px*/
  h5, .h5{ font-size: 1.25rem;}/*20px*/
  h6, .h6{ font-size: 1rem;}/*16px*/
}
:focus{ outline: 0;} /* remember to define focus styles! */
/*---  Title Underline  ---------------------*/
/*hr{margin: 0.5rem auto;}*/
hr{ margin-top: .5rem; border-bottom: 1px solid #ff5447}
.separator-center::after { border-bottom: 0.2rem solid #ff7f47;}
.divider{ background-color: #ff8f47; border: 3px; display: inline-block; height: 3px; width: 40px;}
.collapse{ padding: 0;}
.marTop{ margin-top: 3rem;}
.marBtm{ margin-bottom: 3rem;}
.text{ padding: 0 20px; margin-bottom:50px}
/*---   paragraph Spacing -------------------*/
.post-content{ padding: 1.5rem 0 3rem; background: #edeadc;}
.post-body{ padding: 2rem 0}
.post-title h1{ padding-bottom: 1rem;}
@media screen and (min-width: 64em){
    .post-content{ padding: 3rem 0 4rem;}
    .post-title h1{ padding-bottom: 2rem;}
	.text{ padding-left: 0; padding-right: 0;}
}
/*.accordion-title{ color: #468bcd; text-decoration:none; font-weight:700;}*/
/*---   Link   ----------------------------------------------------------------------------------------------*/
a{ color: #212529; transition: all 0.5s ease 0.3s;}
a:hover, a:focus{ color: #ff5447; text-decoration: none;}
/*---   Button   --------------------------------------------------------------------------------------------*/
.button { background-color: #ff8f47; color: #fff}
.button:hover { background-color: #d0a22f; color: #fff}
.button.secondary{ background: #495057; color: #fff}
.button.secondary:hover, .button.secondary:focus { background-color: #bababa; color: #0a0a0a;}
.button.hollow.secondary { border: 1px solid #999; color: #999;}
.button.hollow.secondary:hover, .button.hollow.secondary:focus{ border-color: #757575; color: #757575;}
.button.hollow.secondary:hover.disabled, .button.hollow.secondary:hover[disabled], .button.hollow.secondary:focus.disabled, .button.hollow.secondary:focus[disabled] { border: 1px solid #e9e9e9; color: #e9e9e9;}
.button.hollow { border: 1px solid #468bcd; color: #468bcd;}
.button.alert { background-color: #f36497; color: #fff; text-decoration:none;font-weight:700}
.button.alert:hover, .button.alert:focus { background-color: #bb4770; color: #fff;}
/*---   structure   -----------------------------------------------------------------------------------------*/
.wrapper{ }
.wrap-inner{ width:100%; margin:0 auto;}
@media screen and (min-width:1360px){ .wrap-inner { width: 1300px; margin:0 auto;}}
@media screen and (max-width:1359px){ .wrap-inner { width: 98%; margin:0 auto;}}
.contentwrapper{ background: #fff;}
.innertube{padding: 40px 0;}
.reveal-overlay{ background-color: rgba(10, 10, 10, 0.85);}
@media print, screen and (min-width: 40em) {
    .reveal.large {
      width: 100%;
      max-width: 64rem; }
}

/* ----------------------------------------------------------------------------------------------------------
   Header
------------------------------------------------------------------------------------------------------------*/
.top-bar{ background: #fff; border-bottom: 1px solid #dcdcdc; padding: 0;}
.top-bar > .flex_header{ display: flex; justify-content: space-between; margin: 0 auto;}
.top-bar > .flex_header div{ flex: 0 0 auto;}
.top-bar .title{ margin-right: 12px;} 
.top-bar .label.success{ background:#4CAF50;color:#fff;padding:12px 16px;font-size: 16px;}

/* ----------------------------------------------------------------------------------------------------
   Footer
------------------------------------------------------------------------------------------------------*/
footer{ font-size: 16px; line-height: 1.35; background: #eaeaea; border-top: 1px solid #f0f0f0; }
.copyright{ padding: 40px 0;}
.bg-success{ background:#00a072;}
.bg-white{ background: #fff; }

.bg-count{ background: url(../image/bg.jpg) top left; background-attachment: fixed;}
/* --------------------------------------------------------------------------------------------------
   Form
-------------------------------------------------------------------------------------------------  */
label{ font-size: 18px; }
label .title{ width: 90px;}
legend{ color: #000; font-size: 18px;}
.fieldset legend{ padding: 0 1rem;}
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
textarea { margin: 0 0 1rem; padding: 0.75rem 0.75rem; background-color: #fff; border: 1px solid #cacaca; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); }
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus{ outline: none; border: 1px solid #fff; background-color: #fefefe;}
[type="checkbox"], [type="radio"]{ margin-right: 5px;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color: #999;}
input::-moz-placeholder, textarea::-moz-placeholder{ color: #999;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder{ color: #999;}
input::placeholder, textarea::placeholder { color: #999;}
.pop-up .close-button{ color: #7f8c8d; z-index: 100}
[type='checkbox']{ }
.pop-up .close-button:hover, .close-button:focus { color: #bdc3c7;}
.pop-up .button{ background: #1abc9c; color: #fff; border: 1px solid #4ed1b7; border-bottom: 3px solid #16a085;box-shadow: 2px 4px 8px rgba(10, 10, 10, 0.3); margin-top: .3rem}
.require{ color: #f36497; margin-left: 6px;}

.fieldset .flex-col{ display: flex; flex-direction: column;}
.fieldset .flex-row{ display: flex; flex-direction: row; margin-bottom: 10px;}
.traffic{ display: flex; flex-direction: column;}
@media screen and (min-width: 64em){ .traffic{ flex-direction: row;}}

.form-list-row{ display:flex; flex-direction: row;}
.form-list-row .item-col1{ flex: 0 1 20px;}
.form-list-row .item-col2{ flex: 0 1 90%;}

.search-plan .area{ color: #d74c0e; font-weight: bold;}
.search-plan fieldset{ border-bottom: 1px dashed #888; margin-bottom: 10px;}
.search-plan fieldset:last-child{ border-bottom: none;}
.resultBox{ border: 3px dashed #ff5447; }
      .count.card{ border: 3px solid #dcdcdc; padding: 0 21px;}
      .count .data, .count .amount{ line-height: 1.2; font-weight: normal; margin-left: 3rem;}
      .count .data{ /*padding-top: 8px; border-right: 1px solid #aaa;*/ border-right:0;}
      .count .data strong, .data strong, .count .amount strong, .amount strong{ color: #ff5447; font-weight: 700; font-size: 30px;}
      .count .data div, .count .amount div{ font-size: 14px;}
      .count .amount strong, .amount strong{ color: #ff5447; font-weight: 700; font-size: 30px;}


.count-info{ background:#ff5447; color: #fff; border-color:#ff5447; padding: 12px 16px}
.count-info h5{ font-size: 20px;margin-bottom: 0px;}
.count-info h5 img{ margin-bottom: 5px; margin-right: 3px}
.count-info.card, .citybox.card{ margin-bottom: 5px;}
.count-info .amount{ border-radius: 6px; color:#000; font-size: 14px; background:#fcfcfc; padding: 30px 10px; line-height: 1.2}
.count-info .amount .unit{ color: #4CAF50; margin-right: 6px;}
.count-info .amount strong{ color: #4CAF50; font-size: 24px}
.count-info .data strong{ color:#fff;}
.count-info .data span{ font-size: 15px;}
.citybox{ margin: 0 1px 1px 1px;}
.citybox:last-child{ margin: 0 0 1px 1px;}
.citybox h6{ border-bottom: 1px solid #aaa;padding-bottom: 8px;}
.citybox .amount{ line-height: 1.2;color:#ff5447;}
.citybox .amount .unit{ font-size: 10px; margin-right: 5px;}
.citybox .amount strong{ font-size: 24px;}
.citybox .data{ font-size:14px; border-top: 1px solid #aaa; padding-top: 8px; margin-top: 10px; }
.citybox .data strong{color: #000;}
@media screen and (min-width: 64em) { 
   .count-info{}
   .count-info h5{ margin-bottom: 0px; font-size: 18px;}
   .count-info h5 img{ margin-bottom: 5px; margin-right: 5px}
   .count-info .amount{ padding: 10px 20px;}
   .count-info .amount strong{ font-size: 30px}
}


.masonry-css {
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-gap: .5rem;
          column-gap: .5rem;
}

@media screen and (min-width: 25em) { /*400px*/
  .masonry-css {
    -webkit-column-count: 1;
            column-count: 1;
  }
}

@media screen and (min-width: 37.5em) {/*600px*/
  .masonry-css {
    -webkit-column-count: 3;
            column-count: 3;
  }
}

@media screen and (min-width: 50em) {/*800px*/
  .masonry-css {
    -webkit-column-count: 3;
            column-count: 3;
  }
}

@media screen and (min-width: 68.75em) {/*1100px*/
  .masonry-css {
    -webkit-column-count: 5;
            column-count: 5;
  }
}

.masonry-css-item {
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  margin-bottom: .5rem;
}


/*--  login/register  ---------------------------------------------------------------------------------------------------------*/
.form-block{ background: #fff;}
.form-block fieldset{ padding: 2.5rem; border: 1px solid #468bcd;  -webkit-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2);}
.form-block legend{   }
.form-block .input-row input[type=text], .input-row input[type=password] { padding-left: 52px;}
.form-block .input-row { position: relative;}
.form-block .input-icon { position: absolute; left: 0; top: 0; margin:15px}
.form-block .required, .inquery .required{ color: var(--warning); margin-left: 5px;}
.margin-right{ padding-right: 0;}
      @media screen and (min-width: 64em) { .margin-right{ padding-right: 10px;} }

/* --------------------------------------------------------------------------------------------------
   Logo
-------------------------------------------------------------------------------------------------  */
a.logo{ background: url(../image/logo_s.png) no-repeat left top; display: block; width: 45px; height: 49px; margin: 20px 0 10px 0;}
.title{ font-size: 0.8rem; font-weight: bold; line-height: 0.8; margin-top:9px; margin-left:5px;}
.title .subtitle{ font-size: 10px; font-weight: normal;}
@media screen and (min-width: 64em){ 
   a.logo{ background: url(../image/logo.png) no-repeat left top; width: 71px; height: 78px; margin: 30px 0;}
   .title{ font-size: 26px; font-weight: bold;line-height: 0.8;margin-top: 3px; margin-left:8px}
   .title .subtitle{ font-size: 14px; font-weight: normal;}
}

/* --------------------------------------------------------------------------------------------------
   Navigation
-------------------------------------------------------------------------------------------------  */
.navigation{ background: #ff8f47; width:100%;}
.navigation .menu{ background: transparent; padding: 10px}
.navigation .menu > li{ border-right: 1px solid #fff;}
.navigation .menu > li > a{ color: #000; display:inline-block; padding: .8rem 4.5rem .5rem ; margin:0; font-weight: bold; font-size: 20px}
.navigation .menu > li > a:hover{ color: #000; background: rgba(255, 255, 255, .5); text-decoration: none;}
.navigation .menu .is-active > a, .navigation .menu .active > a{ background: rgba(255, 255, 255, .5); color: #000;}
.navigation .menu > li > a span{ margin-left: 5px; font-weight: normal; color: #ff5447}
.navigation .menu > li > a span.success{ background: #fff}
.navigation .dropdown.menu > li.is-dropdown-submenu-parent > a { padding-right: 4.5rem; }
.navigation .dropdown.menu > li.is-dropdown-submenu-parent > a::after{ border: inset 0; border-color: #f2b6d2 transparent transparent;}
.navigation .menu > li > a img{ margin-bottom: 8px;}
.navigation i{ margin-bottom: 12px; }
/*--   SubMenu   --*/
.navigation .is-dropdown-submenu{ background: #fff; border: 5px solid #ff8f47; box-shadow: 1px 2px 5px rgba(10, 10, 10, 0.2); z-index: 999; min-width: 260px}
.navigation .dropdown .is-dropdown-submenu{ padding: 0}
.navigation .dropdown .is-dropdown-submenu a{ color: #000; font-weight: normal; border-bottom: 0 solid #ff8f47; background: #fff; text-align: center; margin: 0; padding: 0.5rem 1.6rem; width: 100%;}
.navigation .dropdown .is-dropdown-submenu a:last-child{ border-bottom: none;}
.navigation .dropdown .is-dropdown-submenu a:hover{ background: #fff; color: #ff5447;}

.info-but .button{ padding-top:2rem; padding-bottom:2rem;}
.info-but .button span{ font-size:36px; font-weight:500; margin-left: 12px; }
.topnav.menu{ background: transparent;}
.topnav.menu > li > a{ font-size:14px }
.topnav.menu > li > a:hover{ background: #eabe00; color:#fff; border-radius: 3px}
@media screen and (min-width: 64em){ 
    .topnav.menu > li > a{  font-size:18px }
}

/* --------------------------------------------------------------------------------------------------
   Mobile :: Header
-------------------------------------------------------------------------------------------------  */
.hamburger{ border: none; padding: 5px 0; transition: all 1s ease;}
.hamburger .menu-icon{ width: 30px;}
/*--   Mobile Navigation   --*/
.off-canvas{ background: #ff8f47;}
.close-button{ color: #fff; z-index: 100}
.close-button:hover, .close-button:focus { color: #fff;}
.accordion-menu{ margin: 0rem 0 2rem 0;}
.accordion-menu li a{ background: #ff8f47; border-bottom: 1px solid #ffd2b5; color:#000; font-size: 18px; font-weight: 400; letter-spacing: .022em; padding: 1.2rem 1.2rem 1rem 1.2rem;}
.accordion-menu li a:hover{ background: rgba(255, 255, 255, .9); color: #ff8f47}
.accordion-menu li a i{ margin-right: 12px;}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after{ border: inset 6px; content: ''; border-color: #000 transparent transparent;}
.accordion-menu .is-accordion-submenu a{ padding: .7rem 1rem .7rem 3.7rem;}
ul.submenu{ padding:0}
ul.submenu li a{ background:rgba(255, 255, 255, 1); color:#000; border-top: 1px solid #ff8f47; line-height: 1.7; }
ul.submenu li a:hover{ background:rgba(255, 255, 255, .9); color: #ff8f47}
/*------------------------------------------------------------------------------------------------------
   INDEX Layout
--------------------------------------------------------------------------------------------------------*/
.slidewrapper{}
.owl-nav{ position: absolute; top: 45%; left: 0; right: 0; width: 100%;}
.owl-next{ float: right;}
.owl-prev{ float: left;}
.owl-dots{ position: absolute; bottom: 0; left: 50%; width: 60%; padding-left: 0; margin-left: -30%; text-align: center;}
@media screen and (min-width: 64em){ .owl-dots{ bottom: 20px; left: 50%;}}

/* --------------------------------------------------------------------------------------------------
   SubTitle
-------------------------------------------------------------------------------------------------  */
.sub-banner{ top: 0; bottom: 0;width: 100%; z-index: 99; background: rgba(255,255,255,.5);}

/* --------------------------------------------------------------------------------------------------
   BreadCrumbs
-------------------------------------------------------------------------------------------------  */
.navbar{ text-align: left; margin: 0 0 20px 0;}
.navbar h1.title-head{ font-size: 26px; margin-bottom: 0;}
.navbar ul{ display: inline-block;}
.navbar .breadcrumbs{ margin-top: 10px; margin-bottom: 0}
.navbar .breadcrumbs li{ font-size: 14px; }
.navbar .breadcrumbs .disabled{ color: #555; font-weight: bold; text-decoration: underline;}
.navbar .breadcrumbs li:not(:last-child)::after{ /*color: var(--success); */color: #ff8f47; content: "/";}
.navbar .breadcrumbs a{ color: #212529}
.navbar .breadcrumbs a:hover{ color: #ff8f47}
.menu .active > a { background: transparent; color: #00a0e9;}

/*--  Sidebar _ Navigation   ----------------------------------------------------------------------------------------------------*/
.side-nav{ width:100%;}
@media screen and (min-width: 64em) { .side-nav{ max-width:280px;}}
.side-nav .accordion-menu{ margin: 0;}
.side-nav .accordion-menu li.item{ margin-bottom: 5px;-webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.side-nav .accordion-menu li:hover.item, .side-nav .accordion-menu li:hover.item a.active{ }
.side-nav .accordion-menu li a{ background: #fff; color: #000; border: 2px solid #eaeaea; font-weight:bold; font-size: 18px; letter-spacing: .5em; padding: 1rem 1.5rem .8rem 1.5rem;}
.side-nav .accordion-menu li a:hover, .side-nav .accordion-menu li a:focus, .side-nav .accordion-menu li a.active{ color: #ff8f47; border: 2px solid #ff8f47}
.side-nav .accordion-menu li a.topic{ color: #fff; background: #ff8f47; border: 2px solid #eaeaea}
.side-nav .accordion-menu li a.topic.active{ color: #fff; background: #4CAF50; border: 2px solid #eaeaea}

.side-nav .submenu-toggle::after { border-color: var(--primary) transparent transparent;}
.side-nav .item:hover .submenu-toggle::after { border-color: var(--success) transparent transparent;}
.side-nav div.m-select{  margin-left: .72rem; margin-right:.72rem;}
.side-nav select { height: auto; padding: 0.7rem 1.5rem 0.7rem 1.2rem; border: 1px solid #eaeaea;color: #000;padding-right: 2.2rem;}
.side-nav select:focus { border: 3px solid #ff8f47;} 
.submenu-toggle { top: 5px;}

/* --------------------------------------------------------------------------------------------------
   NewsList
-------------------------------------------------------------------------------------------------  */
.latest-release .latest-row{ 
                  display: flex;
                  display: -webkit-flex;
                  display: -ms-flex;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
            border-bottom: 1px dotted; #999;
                  padding: .8rem 0;
                  margin-bottom: .5rem;
}
.latest-release .latest-row:last-child{}
.latest-release .latest-row:hover{ background: #fff; cursor: pointer; transition: 1s;}
.latest-row .latest-time{ color: #777; font-weight: bold; font-size: 0.85rem; margin-top: 0; margin-bottom: .5em; }
.latest-row .latest-title a{ font-weight: bold;}
.latest-row .latest-title a:hover{ }
.latest-row .tags.success, .tags.success{ background:#00a072; color: #fff;font-size: 15px; padding: 5px 10px 4px 10px}
@media print, screen and (min-width: 40em) {
   .latest-release .latest-row{ -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;align-items:flex-start;}
   .latest-row .latest-time{ margin-right: 1rem; flex: 0 0 200px;}
}
/* --------------------------------------------------------------------------------------------------
   Pagination
-------------------------------------------------------------------------------------------------  */
.pagination li { margin-right: 0.0625rem; border-radius: 3px; font-size: 1.125rem; display: none; background: #e6e6e6;}
.pagination li:last-child, .pagination li:first-child { display: inline-block; }
@media print, screen and (min-width: 40em) { .pagination li { display: inline-block; } }
.pagination a, .pagination button { display: block; padding: 0.1875rem .8rem; border-radius: 3px; color: #0a0a0a;}
.pagination a:hover, .pagination button:hover { background: #ff8f47;}
.pagination .current { padding: 0.1875rem 0.8rem; background: #ff8f47; color: #fefefe; cursor: default;}

/* --------------------------------------------------------------------------------------------------
   Scrolltop
-------------------------------------------------------------------------------------------------  */
.scroll-top-wrapper { 
  position: fixed;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  text-align: center;
  z-index: 99999999;
  background: #6c757d;;
  color: #000;
  width: 60px;
  height: 60px;
  line-height: 50px;
  right: 15px;
  bottom: 15px;
  padding-top: 2px;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border-bottom-right-radius: 45px;
  border-bottom-left-radius: 45px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover{ background: #ff8f47;}
.scroll-top-wrapper.show{ visibility:visible; cursor:pointer; opacity: 1.0;}
.scroll-top-wrapper i{ filter: invert(100%) sepia(93%) saturate(4129%) hue-rotate(179deg) brightness(122%) contrast(110%);}
.scroll-top-wrapper:hover i{ filter: invert(100%) sepia(93%) saturate(4129%) hue-rotate(179deg) brightness(122%) contrast(110%);}


/* Medium and up   40em = 640px */
@media screen and (min-width: 40em) {}

/* Medium only   63.9375em = 1023px */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up   64em = 1024px */
@media screen and (min-width: 64em) {}

/* Large only     74.9375em = 1190px */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}