@charset "UTF-8";
/**
* Sass CSS triangle mixin, create any kind of triangles with ease

* Use: 
* @include triangle(direction,width,height,color);

* Example:
* $square: 50px;
* $color: red;
* selector {
*	 @include triangle(bottomright,$square,$square,$color);
* }

* Forked from https://github.com/juanbrujo/triangle-mixin.less
*/
/*================================================ reset ===============================================*/
/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain)
*/
@import url(//fonts.googleapis.com/css?family=Lato:400,700);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;/* font: inherit; */vertical-align: baseline;}

sub, sup{
    vertical-align: middle;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after { content: ''; content: none; }

q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

img.responsive-img, video.responsive-video { max-width: 100%; height: auto; }

.container { margin: 0 auto; max-width: 1280px; width: 90%; }

@media only screen and (min-width: 601px) { .container { width: 85%; } }
@media only screen and (min-width: 993px) { .container { width: 70%; } }
.container .row { margin-left: -0.75rem; margin-right: -0.75rem; }

.section { padding-top: 1rem; padding-bottom: 1rem; }
.section.no-pad { padding: 0; }
.section.no-pad-bot { padding-bottom: 0; }
.section.no-pad-top { padding-top: 0; }

.row { margin-left: auto; margin-right: auto; margin-bottom: 20px; }
.row:after { content: ""; display: table; clear: both; }
.row .col { float: left; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0.75rem; min-height: 1px; }
.row .col[class*="push-"], .row .col[class*="pull-"] { position: relative; }
.row .col.s1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; }
.row .col.s2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; }
.row .col.s3 { width: 25%; margin-left: auto; left: auto; right: auto; }
.row .col.s4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; }
.row .col.s5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; }
.row .col.s6 { width: 50%; margin-left: auto; left: auto; right: auto; }
.row .col.s7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; }
.row .col.s8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; }
.row .col.s9 { width: 75%; margin-left: auto; left: auto; right: auto; }
.row .col.s10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; }
.row .col.s11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; }
.row .col.s12 { width: 100%; margin-left: auto; left: auto; right: auto; }
.row .col.offset-s1 { margin-left: 8.33333%; }
.row .col.pull-s1 { right: 8.33333%; }
.row .col.push-s1 { left: 8.33333%; }
.row .col.offset-s2 { margin-left: 16.66667%; }
.row .col.pull-s2 { right: 16.66667%; }
.row .col.push-s2 { left: 16.66667%; }
.row .col.offset-s3 { margin-left: 25%; }
.row .col.pull-s3 { right: 25%; }
.row .col.push-s3 { left: 25%; }
.row .col.offset-s4 { margin-left: 33.33333%; }
.row .col.pull-s4 { right: 33.33333%; }
.row .col.push-s4 { left: 33.33333%; }
.row .col.offset-s5 { margin-left: 41.66667%; }
.row .col.pull-s5 { right: 41.66667%; }
.row .col.push-s5 { left: 41.66667%; }
.row .col.offset-s6 { margin-left: 50%; }
.row .col.pull-s6 { right: 50%; }
.row .col.push-s6 { left: 50%; }
.row .col.offset-s7 { margin-left: 58.33333%; }
.row .col.pull-s7 { right: 58.33333%; }
.row .col.push-s7 { left: 58.33333%; }
.row .col.offset-s8 { margin-left: 66.66667%; }
.row .col.pull-s8 { right: 66.66667%; }
.row .col.push-s8 { left: 66.66667%; }
.row .col.offset-s9 { margin-left: 75%; }
.row .col.pull-s9 { right: 75%; }
.row .col.push-s9 { left: 75%; }
.row .col.offset-s10 { margin-left: 83.33333%; }
.row .col.pull-s10 { right: 83.33333%; }
.row .col.push-s10 { left: 83.33333%; }
.row .col.offset-s11 { margin-left: 91.66667%; }
.row .col.pull-s11 { right: 91.66667%; }
.row .col.push-s11 { left: 91.66667%; }
.row .col.offset-s12 { margin-left: 100%; }
.row .col.pull-s12 { right: 100%; }
.row .col.push-s12 { left: 100%; }
@media only screen and (min-width: 601px) { .row .col.m1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.m2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.m3 { width: 25%; margin-left: auto; left: auto; right: auto; }
  .row .col.m4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.m5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.m6 { width: 50%; margin-left: auto; left: auto; right: auto; }
  .row .col.m7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.m8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.m9 { width: 75%; margin-left: auto; left: auto; right: auto; }
  .row .col.m10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.m11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.m12 { width: 100%; margin-left: auto; left: auto; right: auto; }
  .row .col.offset-m1 { margin-left: 8.33333%; }
  .row .col.pull-m1 { right: 8.33333%; }
  .row .col.push-m1 { left: 8.33333%; }
  .row .col.offset-m2 { margin-left: 16.66667%; }
  .row .col.pull-m2 { right: 16.66667%; }
  .row .col.push-m2 { left: 16.66667%; }
  .row .col.offset-m3 { margin-left: 25%; }
  .row .col.pull-m3 { right: 25%; }
  .row .col.push-m3 { left: 25%; }
  .row .col.offset-m4 { margin-left: 33.33333%; }
  .row .col.pull-m4 { right: 33.33333%; }
  .row .col.push-m4 { left: 33.33333%; }
  .row .col.offset-m5 { margin-left: 41.66667%; }
  .row .col.pull-m5 { right: 41.66667%; }
  .row .col.push-m5 { left: 41.66667%; }
  .row .col.offset-m6 { margin-left: 50%; }
  .row .col.pull-m6 { right: 50%; }
  .row .col.push-m6 { left: 50%; }
  .row .col.offset-m7 { margin-left: 58.33333%; }
  .row .col.pull-m7 { right: 58.33333%; }
  .row .col.push-m7 { left: 58.33333%; }
  .row .col.offset-m8 { margin-left: 66.66667%; }
  .row .col.pull-m8 { right: 66.66667%; }
  .row .col.push-m8 { left: 66.66667%; }
  .row .col.offset-m9 { margin-left: 75%; }
  .row .col.pull-m9 { right: 75%; }
  .row .col.push-m9 { left: 75%; }
  .row .col.offset-m10 { margin-left: 83.33333%; }
  .row .col.pull-m10 { right: 83.33333%; }
  .row .col.push-m10 { left: 83.33333%; }
  .row .col.offset-m11 { margin-left: 91.66667%; }
  .row .col.pull-m11 { right: 91.66667%; }
  .row .col.push-m11 { left: 91.66667%; }
  .row .col.offset-m12 { margin-left: 100%; }
  .row .col.pull-m12 { right: 100%; }
  .row .col.push-m12 { left: 100%; } }
@media only screen and (min-width: 993px) { .row .col.l1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.l2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.l3 { width: 25%; margin-left: auto; left: auto; right: auto; }
  .row .col.l4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.l5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.l6 { width: 50%; margin-left: auto; left: auto; right: auto; }
  .row .col.l7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.l8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.l9 { width: 75%; margin-left: auto; left: auto; right: auto; }
  .row .col.l10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.l11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.l12 { width: 100%; margin-left: auto; left: auto; right: auto; }
  .row .col.offset-l1 { margin-left: 8.33333%; }
  .row .col.pull-l1 { right: 8.33333%; }
  .row .col.push-l1 { left: 8.33333%; }
  .row .col.offset-l2 { margin-left: 16.66667%; }
  .row .col.pull-l2 { right: 16.66667%; }
  .row .col.push-l2 { left: 16.66667%; }
  .row .col.offset-l3 { margin-left: 25%; }
  .row .col.pull-l3 { right: 25%; }
  .row .col.push-l3 { left: 25%; }
  .row .col.offset-l4 { margin-left: 33.33333%; }
  .row .col.pull-l4 { right: 33.33333%; }
  .row .col.push-l4 { left: 33.33333%; }
  .row .col.offset-l5 { margin-left: 41.66667%; }
  .row .col.pull-l5 { right: 41.66667%; }
  .row .col.push-l5 { left: 41.66667%; }
  .row .col.offset-l6 { margin-left: 50%; }
  .row .col.pull-l6 { right: 50%; }
  .row .col.push-l6 { left: 50%; }
  .row .col.offset-l7 { margin-left: 58.33333%; }
  .row .col.pull-l7 { right: 58.33333%; }
  .row .col.push-l7 { left: 58.33333%; }
  .row .col.offset-l8 { margin-left: 66.66667%; }
  .row .col.pull-l8 { right: 66.66667%; }
  .row .col.push-l8 { left: 66.66667%; }
  .row .col.offset-l9 { margin-left: 75%; }
  .row .col.pull-l9 { right: 75%; }
  .row .col.push-l9 { left: 75%; }
  .row .col.offset-l10 { margin-left: 83.33333%; }
  .row .col.pull-l10 { right: 83.33333%; }
  .row .col.push-l10 { left: 83.33333%; }
  .row .col.offset-l11 { margin-left: 91.66667%; }
  .row .col.pull-l11 { right: 91.66667%; }
  .row .col.push-l11 { left: 91.66667%; }
  .row .col.offset-l12 { margin-left: 100%; }
  .row .col.pull-l12 { right: 100%; }
  .row .col.push-l12 { left: 100%; } }
@media only screen and (min-width: 1201px) { .row .col.xl1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl3 { width: 25%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl6 { width: 50%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl9 { width: 75%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.xl12 { width: 100%; margin-left: auto; left: auto; right: auto; }
  .row .col.offset-xl1 { margin-left: 8.33333%; }
  .row .col.pull-xl1 { right: 8.33333%; }
  .row .col.push-xl1 { left: 8.33333%; }
  .row .col.offset-xl2 { margin-left: 16.66667%; }
  .row .col.pull-xl2 { right: 16.66667%; }
  .row .col.push-xl2 { left: 16.66667%; }
  .row .col.offset-xl3 { margin-left: 25%; }
  .row .col.pull-xl3 { right: 25%; }
  .row .col.push-xl3 { left: 25%; }
  .row .col.offset-xl4 { margin-left: 33.33333%; }
  .row .col.pull-xl4 { right: 33.33333%; }
  .row .col.push-xl4 { left: 33.33333%; }
  .row .col.offset-xl5 { margin-left: 41.66667%; }
  .row .col.pull-xl5 { right: 41.66667%; }
  .row .col.push-xl5 { left: 41.66667%; }
  .row .col.offset-xl6 { margin-left: 50%; }
  .row .col.pull-xl6 { right: 50%; }
  .row .col.push-xl6 { left: 50%; }
  .row .col.offset-xl7 { margin-left: 58.33333%; }
  .row .col.pull-xl7 { right: 58.33333%; }
  .row .col.push-xl7 { left: 58.33333%; }
  .row .col.offset-xl8 { margin-left: 66.66667%; }
  .row .col.pull-xl8 { right: 66.66667%; }
  .row .col.push-xl8 { left: 66.66667%; }
  .row .col.offset-xl9 { margin-left: 75%; }
  .row .col.pull-xl9 { right: 75%; }
  .row .col.push-xl9 { left: 75%; }
  .row .col.offset-xl10 { margin-left: 83.33333%; }
  .row .col.pull-xl10 { right: 83.33333%; }
  .row .col.push-xl10 { left: 83.33333%; }
  .row .col.offset-xl11 { margin-left: 91.66667%; }
  .row .col.pull-xl11 { right: 91.66667%; }
  .row .col.push-xl11 { left: 91.66667%; }
  .row .col.offset-xl12 { margin-left: 100%; }
  .row .col.pull-xl12 { right: 100%; }
  .row .col.push-xl12 { left: 100%; } }

/* Lato */
/*================================================ Base ===============================================*/
* { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
*:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body, html { background-color: #F5F5F5; padding: 0; margin: 0; }

body { font-family: 'Lato','微軟正黑體', 'PT Sans', Arial, sans-serif; font-size: 18px; color: #555; position: relative; overflow-y: scroll; }

a { cursor: pointer; color: #555; text-decoration: none; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
a:hover, a:active { text-decoration: none; }

select, input, button { font-family: '微軟正黑體', 'PT Sans', Arial, sans-serif; border: none; height: 40px; line-height: 40px; padding: 0 10px; font-size: 100%; }

select::-ms-expand { display: none; }

input::-webkit-input-placeholder { /* WebKit browsers */ color: #3AB7BD; }
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #3AB7BD; }
input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #3AB7BD; }
input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #3AB7BD; }

button, input[type="reset"], input[type="button"], input[type="submit"] { line-height: normal !important; cursor: pointer; }

strong, .strong { font-weight: 700; }

p { line-height: 1.5em; }

hr { border: 0; height: 1px; background-color: #d4d4d4; }

h1 { font-size: 200%; }

h2 { font-size: 150%; }

h3 { font-size: 120%; }

/*============================================= header =============================================*/
.mainHeader { position: relative; z-index: 100; padding: 30px 15px; }
.mainHeader .logo { display: inline-block; width: 205px; }
.mainHeader .logo img { width: 100%; }
.mainHeader .headerMessageBox { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.mainHeader .headerMessageBox a { font-weight: bold; }

.mobile-searchBox { -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 0; height: 0; margin: 0 15px; }
.mobile-searchBox .m-search-category { width: 64%; }
.mobile-searchBox .m-search-category2 { width: 35%; }
.mobile-searchBox .m-search-input { width: calc(100% - 52px); margin-top: 10px; }
.mobile-searchBox.is-open { opacity: 1; height: 100%; margin: 15px; }

.mobile-sideMenu-area { position: relative; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

.headerFnArea { position: absolute; z-index: 300; right: 0; top: -60px; }

.headerFn__link { font-weight: bold; letter-spacing: 2px; margin-left: 10px; }
.headerFn__link i { margin-right: 5px; }

.login-btn { display: inline-block; width: 100px; padding: 5px 10px; background-color: #3AB7BD; color: #FFF; text-align: center; border-radius: 30px; }
.login-btn .icon-user { vertical-align: text-bottom; font-size: 140%; }

.d-search-btn { vertical-align: middle; }

.memberFn { position: relative; display: inline-block; }

.member-btn { color: #FFF; font-weight: bold; cursor: pointer; }

.memberSelect { display: none; position: absolute; background-color: #787878; border-radius: 5px; padding: 10px; text-align: center; top: 55px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.memberSelect:before { position: absolute; top: -15px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ''; display: block; width: 0; height: 0; border-style: solid; -moz-transform: scale(0.9999); border-width: 0 10px 15px 10px; border-color: transparent transparent #787878 transparent; }
.memberSelect.is-open { display: block; }

.memberSelect__list { *zoom: 1; margin-bottom: 10px; }
.memberSelect__list:after, .memberSelect__list:before { content: ""; display: table; }
.memberSelect__list:after { clear: both; }

.memberSelect__item { letter-spacing: .1em; }
.memberSelect__item a { display: block; width: 140px; margin: 0 auto; padding: 5px 10px; color: #FFF; }
.memberSelect__item a:hover { background-color: rgba(255, 255, 255, 0.1); }
.memberSelect__item i { display: none; }

.subHeader { position: relative; padding-bottom: 20px; }

.subHeader__search { width: calc(100% - 200px); }

.searchTags { display: inline; }
.searchTags p { display: inline-block; }

.search-tag { display: inline-block; border: 1px solid #3AB7BD; padding: 3px 15px; color: #3AB7BD; margin-top: 10px; }
.search-tag:hover { color: #F5F5F5; background-color: #3AB7BD; }

.subHeader__share { position: absolute; right: 0; top: 0; }

.mobile-menu-open, .mobile-search-toggle, .mobile-menu-close { display: none; cursor: pointer; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 150%; color: #787878; }

@media screen and (max-width: 1000px) { header .wrapper { padding: 0; }
  .mainHeader { padding: 10px; }
  .mainHeader .logo { width: 180px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .subHeader { display: none; }
  .mobile-sideMenu-area { position: fixed; top: 0; left: -100%; z-index: 200; width: 100%; overflow: auto; height: 100vh; background-color: #EFEFEF; }
  .mobile-sideMenu-area.active { left: 0; }
  .mobile-menu-close { display: inline-block; position: absolute; z-index: 201; top: 10px; right: 10px; }
  .mobile-menu-open, .mobile-search-toggle { display: inline-block; }
  .mobile-search-toggle { float: right; }
  .headerFnArea { position: static; -webkit-transform: inherit; -ms-transform: inherit; transform: inherit; padding-top: 40px; margin-bottom: 20px; }
  .headerFn__link, .d-search-btn { display: none; }
  .memberFn { width: 100%; text-align: center; }
  .memberSelect { display: block; position: static; -webkit-transform: inherit; -ms-transform: inherit; transform: inherit; background-color: transparent; }
  .memberSelect:before { display: none; }
  .memberSelect__list { margin-bottom: 20px; }
  .memberSelect__item { float: left; width: 25%; }
  .memberSelect__item a { width: 100%; padding: 5px; color: #555; font-size: 85%; }
  .memberSelect__item i { display: block; margin: 10px auto; } }
@media screen and (max-width: 480px) { .mobile-searchBox .m-search-category { margin-bottom: 10px; }
  .mobile-searchBox .m-search-category, .mobile-searchBox .m-search-category2 { width: 100%; } }
/*============================================= Navigation =============================================*/
/*首頁特殊版型+ID*/
#index_header nav { display: none; }

.navMenu { position: relative; height: 120px; *zoom: 1; }
.navMenu:after, .navMenu:before { content: ""; display: table; }
.navMenu:after { clear: both; }

/*----------  第一層  ----------*/
.navMenu-Level1__item { float: left; width: calc( 100% / 4); text-align: center; font-weight: bold; letter-spacing: .1em; -webkit-transition: all 0s; -o-transition: all 0s; transition: all 0s; }
.navMenu-Level1__item > a { background-color: #fff; display: block; width: 100%; padding: 10px; }
.navMenu-Level1__item.active .navMenu-Level2__list { display: block; }
.navMenu-Level1__item.has-arrow:after { position: relative; top: -10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ''; display: block; width: 0; height: 0; border-style: solid; -moz-transform: scale(0.9999); border-width: 0 10px 10px 10px; border-color: transparent transparent #fff transparent; }
.navMenu-Level1__item.has-arrow--red:after { border-color: transparent transparent #FF7087 transparent; }
.navMenu-Level1__item.has-arrow--red .navMenu-Level2__item > a:hover, .navMenu-Level1__item.has-arrow--red .navMenu-Level2__item > a.current { background-color: #ff4c69; }
.navMenu-Level1__item.has-arrow--blue:after { border-color: transparent transparent #73B9EF transparent; }
.navMenu-Level1__item.has-arrow--blue .navMenu-Level2__item > a:hover, .navMenu-Level1__item.has-arrow--blue .navMenu-Level2__item > a.current { background-color: #359cea; }
.navMenu-Level1__item.has-arrow--yellow:after { border-color: transparent transparent #fd9c1e transparent; }
.navMenu-Level1__item.has-arrow--yellow .navMenu-Level2__item > a:hover, .navMenu-Level1__item.has-arrow--yellow .navMenu-Level2__item > a.current { background-color: #ff7300; }

/*----------  第二層  ----------*/
.navMenu-Level2__list { display: none; position: absolute; left: 0; width: 100%; max-width: 1280px; background-color: #fff; }

.navMenu-Level2__item { vertical-align: middle; float: left; }
.navMenu-Level2__item > a { display: block; color: #fff; padding: 20px 35px; }
.navMenu-Level2__item > a:hover, .navMenu-Level2__item > a.current { background-color: rgba(255, 255, 255, 0.1); }

@media screen and (max-width: 1000px) { /*首頁特殊版型+ID*/
  #index_header nav { display: block; }
  .navMenu { height: auto; }
  .navMenu-Level1__item, .navMenu-Level2__item { float: none; width: 100%; }
  .navMenu-Level1__item { text-align: left; }
  .navMenu-Level1__item > a { border-bottom: 1px solid #efefef; }
  .navMenu-Level1__item.has-arrow:after { display: none; }
  .navMenu-Level2__item { position: relative; }
  .navMenu-Level2__list { position: relative; } }
/*----------  表單類  ----------*/
.form__row { *zoom: 1; position: relative; margin-bottom: 25px; }
.form__row:after, .form__row:before { content: ""; display: table; }
.form__row:after { clear: both; }
.form__row.err .input-title { color: #FFF; background-color: #FF7087; }
.form__row.err input { border: 1px solid #FF7087; }

.errmsg { font-size: 80%; color: #FF7087; position: absolute; bottom: -16px; }

.form_text { line-height: 1.7em; font-size: 90%; color: #555; }

.custom-checkbox { position: absolute; width: 0; height: 0; float: none; }
.custom-checkbox + label { position: relative; cursor: pointer; padding: 0; }
.custom-checkbox + label:before { content: ''; display: inline-block; vertical-align: text-top; width: 25px; height: 25px; background: #EBEBEB; }
.custom-checkbox:checked + label:before { background: #3AB7BD; }
.custom-checkbox:checked + label:after { content: ''; position: absolute; top: 4px; left: 9px; width: 8px; height: 13px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border: solid #fff; border-width: 0 2px 2px 0; }

.custom-radioButton { position: absolute; width: 0; height: 0; float: none; }
.custom-radioButton + label { position: relative; cursor: pointer; padding: 0; }
.custom-radioButton + label:before { content: ''; display: inline-block; vertical-align: text-top; width: 25px; height: 25px; border-radius: 50%; background: #EBEBEB; }
.custom-radioButton:checked + label:before { background: #3AB7BD; }
.custom-radioButton:checked + label:after { content: ''; display: inline-block; position: absolute; left: 7px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: #FFF; }

.custom-select { display: inline-block; position: relative; }
.custom-select select { width: 100%; padding-right: 1.5em; background-color: #FFF; appearance: none; -moz-appearance: none; -webkit-appearance: none; }
.custom-select:after { content: ''; position: absolute; pointer-events: none; display: block; top: calc( 50% - 4px); right: 0.5em; border-style: solid; border-width: 8px 5px 0 5px; border-color: #3AB7BD transparent transparent transparent; }
.custom-select--search { position: relative; display: inline-block; max-width: 100%; color: #000; text-align: left; }
.custom-select--search .placeholder { display: block; background-color: #FFF; z-index: 1; padding: .6em; padding-right: 1.5em; cursor: pointer; }
.custom-select--search .placeholder.is-open ~ .select { display: block; }
.custom-select--search .placeholder .option-category { margin-right: 10px; font-weight: bold; }
.custom-select--search .placeholder .option-category--1 { color: #3AB7BD; }
.custom-select--search .placeholder .option-category--2 { color: #FF7087; }
.custom-select--search .placeholder .option-category--3 { color: #73B9EF; }
.custom-select--search .placeholder .option-category--4 { color: #fd9c1e; }
.custom-select--search .select { display: none; position: absolute; z-index: 2; width: 300px; }
.custom-select--search .option { cursor: pointer; background-color: #FFF; color: #555; padding: 1em .6em; font-weight: bold; -webkit-transition: all 0s; -o-transition: all 0s; transition: all 0s; }
.custom-select--search .option:hover { background-color: #3AB7BD; color: #FFF; }
.custom-select--search .option:hover .option-category { color: #FFF; }
.custom-select--search .option .option-category { margin-right: 10px; font-weight: normal; -webkit-transition: all 0s; -o-transition: all 0s; transition: all 0s; }
.custom-select--search .option .option-category--1 { color: #3AB7BD; }
.custom-select--search .option .option-category--2 { color: #FF7087; }
.custom-select--search .option .option-category--3 { color: #73B9EF; }
.custom-select--search .option .option-category--4 { color: #fd9c1e; }
.custom-select--search .option span { display: inline-block; font-weight: bold; min-width: 100px; }

.custom-form a { color: #3AB7BD; }
.custom-form p { font-size: 85%; }
.custom-form input:not([type='submit']), .custom-form select { appearance: none; -moz-appearance: none; -webkit-appearance: none; display: inline-block; background-color: #EDEDED; color: #555; }
.custom-form input:not([type='submit'])::-webkit-input-placeholder, .custom-form select::-webkit-input-placeholder { /* WebKit browsers */ color: #555; }
.custom-form input:not([type='submit']):-moz-placeholder, .custom-form select:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #555; }
.custom-form input:not([type='submit'])::-moz-placeholder, .custom-form select::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #555; }
.custom-form input:not([type='submit']):-ms-input-placeholder, .custom-form select:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #555; }
.custom-form .input-title { float: left; width: 105px; height: 40px; padding: 0 10px; text-align: justify; text-align-last: justify; font-size: 90%; color: #555; font-weight: bold; background-color: #CFCFCF; }
.custom-form .input-title + input, .custom-form .input-title + select, .custom-form .input-title + .custom-select { width: calc(100% - 105px); }
.custom-form .input-icon-title { float: left; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: #CFCFCF; }
.custom-form .input-icon-title i { color: #FFF; }
.custom-form .input-icon-title + input, .custom-form .input-icon-title + select, .custom-form .input-icon-title + .custom-select { width: calc(100% - 40px); }
.custom-form .custom-select { position: static; }
.custom-form .custom-select:after { content: ''; position: absolute; display: block; top: calc( 50% - 4px); right: 1em; border-style: solid; border-width: 8px 5px 0 5px; border-color: #000 transparent transparent transparent; }
.custom-form .icon-label { float: left; width: 40px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; color: #555; background-color: #EDEDED; }
.custom-form input[type="radio"] { position: absolute; width: 0; height: 0; float: none; }
.custom-form input[type="radio"]:checked + .icon-label.icon-check { color: #3AB7BD; }
.custom-form input[type="radio"]:checked + .icon-label.icon-cancel { color: #FF7087; }
.custom-form input[type="radio"]:checked + .icon-label.icon-male { color: #73B9EF; }
.custom-form input[type="radio"]:checked + .icon-label.icon-female { color: #FF7087; }
.custom-form .captchaImg { position: absolute; height: 40px; right: 10px; top: 0; }

main { position: relative; }

.dp-inbk { display: inline-block; }

.bgc-red { background-color: #FF7087 !important; }

.bgc-blue { background-color: #73B9EF !important; }

.bgc-yellow { background-color: #fd9c1e !important; }

.text-red { color: #FF7087 !important; }

.text-blue { color: #73B9EF !important; }

.text-yellow { color: #fd9c1e !important; }

.text-green { color: #3AB7BD !important; }

.text-purple { color: #A68CED !important; }

.text-bold { font-weight: bold !important; }

.textTag { display: inline-block; padding: 5px; margin: 10px 0; color: #FFF; background-color: gray; }
.textTag--blue { background-color: #73B9EF; }
.textTag--red { background-color: #FF7087; }
.textTag--yellow { background-color: #fd9c1e; }
.textTag--green { background-color: #3AB7BD; }
.textTag--purple { background-color: #A68CED; }

.blast-root { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }

.hiddenDom { margin: 0; border: 0; padding: 0; height: 0; width: 0; overflow: hidden; }

.tx-center { text-align: center; }

.big-font { margin: 30px 0; font-size: 300%; color: #3AB7BD; }

.wrapper { max-width: 1280px; margin: 0 auto; *zoom: 1; }
.wrapper:after, .wrapper:before { content: ""; display: table; }
.wrapper:after { clear: both; }

@media screen and (max-width: 1280px) { .wrapper { padding: 0 15px; } }
/*----------  autocomplete   ----------*/
.ui-menu { -webkit-transition: all 0s; -o-transition: all 0s; transition: all 0s; }
.ui-menu .ui-menu-item-wrapper { -webkit-transition: all 0s; -o-transition: all 0s; transition: all 0s; color: #555; font-weight: bold; padding: .6em; }
.ui-menu .ui-menu-item-wrapper:hover { background-color: #3AB7BD; color: #FFF; }

/*=============================================*/
/* Main */
/*=============================================*/
/*----------  icon框底  ----------*/
.mark, .mark-square { display: inline-block; width: 36px; height: 36px; line-height: 36px; margin: 0 auto; border-radius: 50%; background-color: #fff; color: #555; text-align: center; -webkit-transition: all 0s; -o-transition: all 0s; transition: all 0s; }
.mark--red, .mark-square--red { background-color: #FF7087; color: #FFF; }
.mark--green, .mark-square--green { background-color: #3AB7BD; color: #FFF; }
.mark--blue, .mark-square--blue { background-color: #73B9EF; color: #FFF; }
.mark--yellow, .mark-square--yellow { background-color: #fd9c1e; color: #FFF; }
.mark--purple, .mark-square--purple { background-color: #A68CED; color: #FFF; }
.mark--lightgreen, .mark-square--lightgreen { background-color: #68BB83; color: #FFF; }
.mark--brown, .mark-square--brown { background-color: #BB8368; color: #FFF; }
.mark--large, .mark-square--large { width: 80px; height: 80px; line-height: 80px; font-size: 250%; }
.mark--mid, .mark-square--mid { width: 50px; height: 50px; line-height: 50px; font-size: 150%; }

.mark-square { border-radius: 0; vertical-align: middle; font-size: 150%; color: #FFF; }
.mark-square--facebook { background-color: #63769D; }
.mark-square--facebook:hover { background-color: #4267B2; }
.mark-square--google-plus { background-color: #E37066; font-size: 100%; }
.mark-square--google-plus:hover { background-color: #DC4A38; }
.mark-square--twitter { background-color: #73B9EF; font-size: 120%; }
.mark-square--twitter:hover { background-color: #41ABE1; }
.mark-square--plurk { background-color: #FD9368; }
.mark-square--plurk:hover { background-color: #E88D43; }
.mark-square--line { background-color: #64C482; }
.mark-square--line:hover { background-color: #00C300; }
.mark-square--font { background-color: #81CCD1; font-size: 120%; }
.mark-square--print { background-color: #3AB7BD; font-size: 120%; }

/*----------  佈局  ----------*/
.pageSearchArea { margin: 20px 0; }

.pageFnArea { position: relative; margin: 20px 0; }

.pageFn__right { position: absolute; top: 10px; right: 0; }

.textFn-margin { margin: 0 10px; }

.pageAside, .pageArticle { float: left; }

.pageAside { margin-right: 20px; margin-bottom: 20px; width: calc(30% - 20px); }

.pageArticle { width: 70%; }

.pagePanel { color: #555; font-size: 90%; width: 100%; padding: 40px 50px; margin-bottom: 10px; background-color: #fff; border-left: 4px #3AB7BD solid; *zoom: 1; }
.pagePanel:after, .pagePanel:before { content: ""; display: table; }
.pagePanel:after { clear: both; }
.pagePanel p { line-height: 1.7em; margin-bottom: 20px; }
.pagePanel img { max-width: 100%; height: auto; }
.pagePanel a { color: #3AB7BD; }
.pagePanel a:hover { text-decoration: underline; }

/*----------  圖片列表  ----------*/
.gridItem { display: inline-block; width: calc((100% / 3) - 5px); text-align: center; padding: 0 0.75em; margin-bottom: 15px; color: #555; }
.gridItem a { display: block; }

.gridItem__img { display: block; width: 100%; padding-bottom: 70%; background-color: #3AB7BD; background-position: center; background-repeat: no-repeat; background-size: cover; }

.gridItem__name { font-weight: bold; margin: 10px 0; font-size: initial; }

@media screen and (max-width: 1000px) { .gridItem { width: calc((100% / 2) - 5px); } }
@media screen and (max-width: 640px) { .gridItem { width: calc(100%); } }
/*----------  元件  ----------*/
.pageTitle { margin-bottom: 20px; font-weight: bold; font-size: 160%; color: #3AB7BD; }

.pagePanel__title { margin-bottom: 20px; font-weight: bold; font-size: 140%; color: #3AB7BD; line-height:1.4em; }

.pagePanel__subtitle { font-weight: bold; font-size: 120%; margin: 15px 0; }

.pagePanel-Info { position: relative; margin: 20px 0; }

.pagePanel-Info__data { line-height: 1.5em; }
.pagePanel-Info__data dt, .pagePanel-Info__data dd { padding: 5px; }
.pagePanel-Info__data dt { padding-left: 0; width: 85px; float: left; font-weight: bold; color: #1BA4AC; text-align: justify; text-align-last: justify; }
.pagePanel-Info__data dd { margin-left: 85px; }

.pageSearchArea .search-category2 { width: 20%; }
.pageSearchArea .search-input { width: calc(35% - 50px); }

@media screen and (max-width: 1000px) { .pageSearchArea { display: none; } }
@media screen and (max-width: 640px) { .pageTitle { margin-top: 20px; }
  .pageAside, .pageArticle { float: none; width: 100%; } }
@media screen and (max-width: 480px) { .pagePanel { padding: 20px; } }
/*----------  F&Q收合  ----------*/
.accordionPart { margin-bottom: 20px; }

.qa_title, .qa_content { position: relative; padding: 25px; padding-left: 6.5em; }
.qa_title:before, .qa_content:before { position: absolute; content: attr(data-title); left: 20px; font-weight: bold; letter-spacing: .1em; }
.qa_title img, .qa_content img { margin: 10px 0; }

.qa_title { background-color: #ECECEC; border-bottom: 1px solid #C5C5C5; cursor: pointer; }
.qa_title:before { color: #73B9EF; }
.qa_title:after { display: inline-block; background-color: #FFF; content: '看解答'; padding: 10px; position: absolute; left: 20px; bottom: 10px; font-weight: bold; letter-spacing: .1em; color: #FF7087; }

.qa_content { max-height: 0; padding: 0; padding-left: 6.5em; overflow: hidden; background-color: #C5C5C5; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.qa_content:before { color: #FF7087; }
.qa_content.show { max-height: 1000px; padding: 25px; padding-left: 6.5em; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

@media screen and (max-width: 640px) { .qa_title, .qa_content { padding: 10px; }
  .qa_title:before, .qa_content:before { position: static; display: block; font-weight: bold; letter-spacing: .1em; margin-bottom: 10px; }
  .qa_content { padding: 0; }
  .qa_content:before { color: #FF7087; }
  .qa_content.show { padding: 10px; }
  .qa_title:after { left: auto; right: 20px; } }
/*----------  附件表格  ----------*/
.downloadTable { margin: 20px 0; width: 100%; border: 1px solid #3AB7BD; }
.downloadTable th, .downloadTable td { padding: 10px; text-align: center; vertical-align: middle; }
.downloadTable tr > *:nth-child(1) { text-align: left; }
.downloadTable tr > *:nth-child(1):nth-child(even) { background-color: #F1F1F1; }
.downloadTable tr:nth-child(odd) { background-color: #E6E6E6; }
.downloadTable th { background-color: #3AB7BD; color: #FFF; }
.downloadTable th:nth-child(1) { width: 65%; }
.downloadTable th:nth-child(3) { width: 15%; min-width: 3em; }
.downloadTable td:nth-child(3) img { width: 40px; }

@media screen and (max-width: 768px) { .downloadTable tr > *:nth-child(2) { display: none; }
  .downloadTable td:nth-child(3) { padding: 0; }
  .downloadTable td:nth-child(3) img { width: 100%; } }
/*----------  麵包屑  ----------*/
.breadCrumb { padding: 20px 0; }
.breadCrumb li { display: inline; line-height: 1.5em; font-weight: bold; font-size: 90%; }
.breadCrumb li:after { content: '>'; color: #3AB7BD; display: inline-block; margin: 0 5px; }
.breadCrumb li:last-child:after { content: ''; }

/*----------  按鈕類  ----------*/
.btn { display: block; min-width: 200px; padding: 5px; background-color: #3AB7BD; color: #FFF; }
.btn--yellow { background-color: #FFDE13; color: #555; }
.btn--block { width: 100%; }

.block-btn { background-color: #3AB7BD; display: block; text-align: center; padding: 15px 10px; line-height: 1.3em; margin-bottom: 15px; color: #FFF; letter-spacing: .1em; font-weight: bold; background-repeat: no-repeat; background-position: center; background-size: cover; }
.block-btn span, .block-btn i { position: relative; z-index: 2; }
.block-btn .mark { display: block; margin-bottom: 10px; }
.block-btn--green { position: relative; background-color: #68BB83; }
.block-btn--green i { color: #68BB83; }
.block-btn--green:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(65, 170, 100, 0.3); -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.block-btn--green:hover { background-color: #41aa64; }
.block-btn--green:hover:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(65, 170, 100, 0.6); }
.block-btn--purple { background-color: #A68CED; }
.block-btn--purple .mark i { color: #A68CED; }

.index-ishow-btn { position: relative; background-image: url("../../assets/images/index/ishowbg.jpg"); background-size: cover; background-position: top center; }
.index-ishow-btn:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: rgba(110, 55, 255, 0.4); }
.index-ishow-btn i { font-size: 350%; display: block; margin: 20px auto; }
.index-ishow-btn:hover:after { background-color: rgba(110, 55, 255, 0.5); }

.searchBar__btn { vertical-align: middle; background-color: #3AB7BD; color: #fff; font-size: 120%; }

input.searchBar__btn { min-width: 40px; font-family: 'icomoon' !important; }

/*----------  收合選單  ----------*/
.sideMenu { font-weight: bold; }
.sideMenu * { -webkit-transition: 0s; -o-transition: 0s; transition: 0s; }
.sideMenu .sideMenu__title { position: relative; padding: 15px 10px; font-size: 110%; background-color: #3AB7BD; color: #FFF; }
.sideMenu .sideMenu__title .m-toggleBtn { display: none; position: absolute; right: 0; top: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; }
.sideMenu .sideMenu__item { border-bottom: 1px solid #EEE; }
.sideMenu .sideMenu__item .status { color: #3AB7BD; margin-right: 5px; font-size: 70%; }
.sideMenu .sideMenu__item .icon { color: #3AB7BD; font-size: 140%; margin-left: -10px; vertical-align: sub; }
.sideMenu .sideMenu__item, .sideMenu .sideMenu-sub__item { background-color: #E6E6E6; }
.sideMenu .sideMenu__item a, .sideMenu .sideMenu-sub__item a { display: block; padding: 15px 15px; }
.sideMenu .sideMenu-sub__item { background-color: #FFF; }
.sideMenu .sideMenu-sub__list { display: none; }
.sideMenu .sideMenu-sub__list a { font-size: 90%; padding-left: 25px; }
.sideMenu .sideMenu-sub__list a:hover { background-color: #F7F7F7; }

@media screen and (max-width: 640px) { .sideMenu .sideMenu__title .m-toggleBtn { display: block; cursor: pointer; }
  .sideMenu .sideMenu__list { display: none; } }
/*----------  分頁項目 ----------*/
.pagePanel .pagination .pagination__link.mark-square { border: 1px solid gainsboro; }
.pagePanel .pagination .custom-select select { border: 1px solid gainsboro; }

.pagination { text-align: center; margin: 25px 0; }

.pagination__select { margin: 0 10px; }

.pagination__total { display: inline-block; margin: 0 20px; }

.pagination__link { margin: 10px 0; }
.pagination__link i { -webkit-transition: 0s; -o-transition: 0s; transition: 0s; color: #3AB7BD; }
.pagination__link.current.mark-square { color: #3AB7BD; }
.pagination__link.mark-square { width: 40px; height: 40px; line-height: 40px; font-weight: bold; font-size: 100%; color: #555; }
.pagination__link:hover { color: #FFF; background-color: #3AB7BD; }
.pagination__link:hover i { color: #FFF; }
.pagination__link:hover.current.mark-square { color: #FFF; }

.qComlete { display: block; min-width: 200px; margin: 0 auto; background-color: #FFDE13; color: #555; }

@media screen and (max-width: 1000px) { .pageFn__right { position: static; margin-bottom: 20px; } }
@media screen and (max-width: 640px) { .pageFnArea { display: none; } }
/*=============================================*/
/* Footer */
/*=============================================*/
footer { padding: 35px 0; *zoom: 1; }
footer:after, footer:before { content: ""; display: table; }
footer:after { clear: both; }
footer .wrapper { max-width: 960px; }

.footer__left, .footer__right { float: left; }

.footer__left { width: 30%; padding: 50px 0; text-align: center; }
.footer__left img { max-width: 250px; }

.footer__right { width: 70%; }

.footerLinks { font-size: 95%; margin: 10px 0; }
.footerLinks a { display: inline-block; margin-right: 20px; line-height: 1.7em; }

.footerInfo { font-size: 80%; }

@media screen and (max-width: 768px) { .footer__left, .footer__right { float: none; width: 100%; }
  .footer__left { padding: 0; } }
/*=============================================*/
/* 首頁 */
/*=============================================*/
.mainBar, .sideBar { float: left; *zoom: 1; }
.mainBar:after, .mainBar:before, .sideBar:after, .sideBar:before { content: ""; display: table; }
.mainBar:after, .sideBar:after { clear: both; }

.mainBar { width: 75%; }

.sideBar { width: 25%; }

/*----------  卡片式選單  ----------*/
.navCard { float: left; width: calc( (100% / 3) - 15px); overflow: hidden; margin-right: 15px; background-color: #fff; cursor: pointer; }
.navCard--red .navCard__background:after { background-color: rgba(255, 112, 135, 0.5); }
.navCard--red.active .navCard__background:after { background-color: rgba(255, 112, 135, 0.9); }
.navCard--red .navCardMenu__item a:hover { background-color: rgba(255, 112, 135, 0.2); }
.navCard--blue .navCard__background:after { background-color: rgba(115, 185, 239, 0.5); }
.navCard--blue.active .navCard__background:after { background-color: rgba(115, 185, 239, 0.9); }
.navCard--blue .navCardMenu__item a:hover { background-color: rgba(115, 185, 239, 0.2); }
.navCard--yellow .navCard__background:after { background-color: rgba(253, 156, 30, 0.5); }
.navCard--yellow.active .navCard__background:after { background-color: rgba(253, 156, 30, 0.9); }
.navCard--yellow .navCardMenu__item a:hover { background-color: rgba(253, 156, 30, 0.2); }
.navCard.active .navCard__background { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.navCard.active .navCardInfo { top: 0; }
.navCard.active .navCardMunu { bottom: 0; }
.navCard.active .navCardTitle { bottom: -100%; }

.navCard__container { position: relative; height: 580px; }

.navCard__background { position: absolute; width: 100%; height: 100%; background-image: url("../images/index/navcard1.jpg"); background-position: center; background-size: cover; }
.navCard__background:after { content: ''; position: absolute; display: block; top: 0; width: 100%; height: 100%; }

.navCardInfo, .navCardMunu, .navCardTitle { position: absolute; z-index: 1; }

.navCardTitle { background-color: #fff; color: #3A3A3A; width: 100%; bottom: 0; text-align: center; padding: 15px 0; font-weight: bold; }

.navCardInfo { color: #FFF; padding: 20px; top: -100%; }

.navCardInfo__title { font-size: 160%; padding: 15px 0; border-bottom: 1px solid #FFF; letter-spacing: 2px; }
.navCardInfo__title [class^=icon-] { margin-right: 5px; }

.navCardInfo__description { font-size: 85%; margin: 10px 0; color: #FFF; }

.navCardMunu { width: 100%; background-color: #FFF; text-align: center; bottom: -100%; }

.navCardMenu__item a { display: block; font-weight: bold; padding: 15px 0; }

/*----------  熱門排行列表  ----------*/
.ranking__title { color: #585657; font-size: 120%; font-weight: bold; letter-spacing: .3em; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #d4d4d4; }

ol.ranking__list { counter-reset: li-num; margin: 10px 0; padding:10px; }

li.ranking__item { margin-bottom: 15px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; }
li.ranking__item:before { counter-increment: li-num; content: counter(li-num); background-color: #3AB7BD; color: #FFF; display: inline-block; vertical-align: text-bottom; font-size: 80%; height: 25px; width: 25px; line-height: 25px; margin-right: 5px; border-radius: 50%; text-align: center; }
li.ranking__item:hover:before { background-color: #3bccd3; }
li.ranking__item:hover a { color: #000; }

@media screen and (max-width: 1000px) { .mainBar, .sideBar { width: 100%; }
  .sideBar { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .sideBar .block-btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 49.5%; }
  .sideBar .index-ishow-btn i { font-size: 200%; margin: 10px auto; }
  .sideBar ol.ranking__list { width: 100%; }
  .navCard { width: calc(100%); margin-bottom: 15px; }
  .navCard__container { height: 400px; } }
@media screen and (max-width: 720px) { .navCard__container { height: 250px; }
  .navCardInfo__description { display: none; }
  .navCardInfo { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 0; width: 85%; } }
/*=============================================*/
/* 會員中心 */
/*=============================================*/
/*----------  上方導覽選單  ----------*/
.mumberNav__item { display: inline-block; margin: 20px 15px; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; }
.mumberNav__item .mark { margin-bottom: 10px; }
.mumberNav__item:hover, .mumberNav__item.active { color: #3AB7BD; }
.mumberNav__item:hover .mark, .mumberNav__item.active .mark { color: #3AB7BD; }

/*----------  時間軸區塊  ----------*/
.mumberTitle { display: inline-block; margin: 20px 0; padding-top: 10px; font-size: 180%; font-weight: bold; color: #3AB7BD; border-top: 1px solid #000; }

.timeLineSection { position: relative; margin: 20px 0; }

.timeLineSection__calendar { position: relative; display: inline-block; width: 15%; text-align: center; color: #555; font-size: 90%; font-weight: bold; }
.timeLineSection__calendar .day { margin: 10px 0; color: #FF7087; font-size: 120%; }
.timeLineSection__calendar .time { color: #C5C5C5; }

.timeLineSection__card { position: relative; display: inline-block; width: 84%; background-color: #fff; padding: 20px; }
.timeLineSection__card .title { font-weight: bold; margin-top: 10px; font-size: 120%; color: #3AB7BD; }
.timeLineSection__card:before, .timeLineSection__card:after { content: ''; position: absolute; top: 0; background-color: #555; }
.timeLineSection__card:before { left: -20px; width: 1px; height: 136%; }
.timeLineSection__card:after { left: -24px; top: calc(50% - 9px/2); width: 9px; height: 9px; border-radius: 50%; }

.timeLineSection__close { position: absolute; top: 15px; right: 20px; cursor: pointer; }
.timeLineSection__close.mark { width: 30px; height: 30px; line-height: 30px; border: 1px solid #555; }

@media screen and (max-width: 768px) { .timeLineSection__calendar { width: 14%; }
  .timeLineSection__card:before { width: 1px; height: 130%; }
  .timeLineSection__card:after { left: -24px; width: 10px; height: 10px; } }
@media screen and (max-width: 680px) { .timeLineSection__card:before, .timeLineSection__card:after { display: none; } }
@media screen and (max-width: 480px) { .timeLineSection__calendar { width: 100%; }
  .timeLineSection__calendar > * { display: inline-block; }
  .timeLineSection__card { width: 100%; }
  .timeLineSection__close { position: absolute; top: 40px; right: 10px; } }
/*=============================================*/
/* 會員登入 */
/*=============================================*/
.loginTitle { margin: 20px 0; color: #555; }

.loginmember { position: relative; margin: 20px 0; width: 145px; height: 145px; border-radius: 50%; overflow: hidden; }

.loginForm { position: relative; max-width: 360px; padding: 20px; margin: 0 auto; text-align: center; background-color: #FFF; }
.loginForm:before { position: absolute; top: -10px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ''; display: block; width: 0; height: 0; border-style: solid; -moz-transform: scale(0.9999); border-width: 0 10px 10px 10px; border-color: transparent transparent #FFF transparent; }

.loginThirdParty { *zoom: 1; max-width: 360px; padding: 20px; margin: 0 auto; text-align: center; background-color: #EDEDED; }
.loginThirdParty:after, .loginThirdParty:before { content: ""; display: table; }
.loginThirdParty:after { clear: both; }
.loginThirdParty a { float: left; width: calc(50% - 5px); font-size: 80%; padding: 10px; color: #FFF; }
.loginThirdParty a i { margin-right: 10px; }
.loginThirdParty a:first-child { background-color: #DC4335; margin-right: 5px; }
.loginThirdParty a:last-child { background-color: #314B7E; margin-left: 5px; }
.loginThirdParty p { font-size: 85%; }

.thirdPartyBtns { margin: 20px 0; }

/*=============================================*/
/* 會員註冊、帳戶資料、密碼修改 */
/*=============================================*/
.clauseArea { clear: both; text-align: center; padding: 20px 0; }

.white-popup-block { background: #FFF; text-align: left; max-width: 768px; margin: 40px auto; position: relative; }

.registeredSubmitBtn { clear: both; margin: 0 auto; }

.memberForm { max-width: 720px; margin: 50px auto; }
.memberForm .form__row { float: left; width: 50%; padding: 0 10px; }
.memberForm .custom-checkbox + label:before { background-color: #CFCFCF; }
.memberForm .custom-checkbox:checked + label:before { background-color: #3AB7BD; }

.passwordForm { max-width: 360px; margin: 50px auto; }

.qq { position: relative; top: -25px; left: 40px; margin: -45px auto 0 auto; height: 45px; width: 45px; line-height: 45px; border-radius: 50%; font-size: 150%; color: #FFF; background: #000; }

@media screen and (max-width: 768px) { .memberForm .form__row { width: 100%; } }
@media screen and (max-width: 480px) { .registeredSubmitBtn { width: 100%; } }
/*=============================================*/
/* 搜尋結果頁 */
/*=============================================*/
.searchResults { margin: 20px 0; }
.searchResults .results-val { margin: 0 10px; color: #3AB7BD; }

.search-mark { background-color: #FFFC01; }

.searchPage-searchBar { margin: 30px 0; }


@media screen and (max-width: 480px) { .searchPage-searchBar .search-category { margin-bottom: 10px; }
  .searchPage-searchBar .search-category, .searchPage-searchBar .search-category2 { width: 100%; }
  .searchPage-searchBar .search-input { width: calc(100% - 52px); margin-top: 10px; } }
/*=============================================*/
/* 影音資源 */
/*=============================================*/
/*----------  專題列表  ----------*/
.videoItem__panel { margin: 40px 0; }

.videoItem__link, .videoItem__info { display: inline-block; vertical-align: middle; }

.videoItem__link { width: 30%; text-align: center; }
.videoItem__link a { display: block; }

.videoItem__info { width: 69%; }

.videoItem__name { display: block; margin: 10px auto; font-weight: bold; font-size: 130%; color: #3AB7BD; line-height: 1.5em; }

.videoItem__img { display: block; width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.videoItem__img--rectangle { border-radius: 0; width: 100%; background-size: contain; }

@media screen and (max-width: 1000px) { .videoItem__link, .videoItem__info { width: 100%; }
  .videoItem__name { text-align: center; } }
/*----------  專題列表內頁  ----------*/
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.videoInfo__qrcode { position: absolute; top: 0; right: 0; }
.videoInfo__qrcode .item { display: inline-block; width: 100px; margin-left: 15px; -webkit-box-shadow: 0px 0px 10px #999; box-shadow: 0px 0px 10px #999; }
.videoInfo__qrcode .item .devicetype { background-color: #3AB7BD; text-align: center; padding: 5px; color: #fff; }
.videoInfo__qrcode .item img { width: 100%; }

@media screen and (max-width: 1000px) { .videoInfo__qrcode { position: static; }
  .videoInfo__qrcode .item { margin-left: 0; margin-right: 15px; } }
/*=============================================*/
/* 科展群傑廳 */
/*=============================================*/
.exhibitionSort { margin-bottom: 20px; }

.countArea { margin-top: 20px; text-align: right; }
.countArea--topstyle { margin-top: 0; margin-bottom: 20px; text-align: left; border-bottom: 1px solid #000; padding-bottom: 10px; }

.count__item { display: inline-block; vertical-align: middle; margin-right: 20px; margin-bottom: 10px; color: #555; }
.count__item i { margin-right: 5px; }
.count__item .icon-heart, .count__item .icon-heart-o { color: #D7594A; }
.count__item .addFav-btn { border: 1px solid #555; border-radius: 10px; padding: 5px 10px; }

@media screen and (max-width: 1000px) { .countArea { text-align: left; }
  .countArea--topstyle .count__item { display: inline-block; }
  .count__item { display: block; } }
/*=============================================*/
/* 自我評量 */
/*=============================================*/
ol.quitAnswer__list { counter-reset: li-num; margin: 10px 0; }

li.quitAnswer__item { margin: 15px 0; }
li.quitAnswer__item:before { counter-increment: li-num; content: counter(li-num,upper-alpha); color: #3AB7BD; font-size: 120%; font-weight: bold; display: inline-block; width: 1em; }
li.quitAnswer__item .custom-checkbox + label:before { margin-right: 10px; }

.quitAnswerBtn { margin: 30px 0; }

.quitAnswer__result { font-size: 140%; font-weight: bold; margin: 30px 0; color: #3AB7BD; }
.quitAnswer__result i { font-size: 150%; margin-right: 10px; vertical-align: sub; }
.quitAnswer__result--wrong { color: #FF7087; }

.quitResult__item { font-size: 120%; line-height: 1.5em; margin: 15px 0; }
.quitResult__item:before { font-family: 'icomoon' !important; font-size: 150%; margin-right: 10px; vertical-align: sub; }
.quitResult__item--wrong { color: #FF7087; }
.quitResult__item--wrong a { color: #FF7087; }
.quitResult__item--wrong:before { content: "\e91c"; }
.quitResult__item--right { color: #73B9EF; }
.quitResult__item--right a { color: #73B9EF; }
.quitResult__item--right:before { content: "\f10c"; }

.quitComment__item { margin-bottom: 15px; }
.quitComment__item .mark { font-size: 120%; width: 56px; height: 56px; line-height: 56px; margin-right: 10px; margin-bottom: 10px; font-weight: bold; }

@media screen and (max-width: 480px) { .quitAnswerBtn { width: 100%; } }
/*=============================================*/
/* 網站導覽 */
/*=============================================*/
.sitemapCards { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; }

.sitemapCard { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -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; margin: 20px 0; width: 50%; }

.sitemapCard__img { margin: 0 30px 0 0; }
.sitemapCard__img .mark { width: 120px; height: 120px; line-height: 120px; font-size: 350%; }

.sitemapCard__linkList { width: 60%; text-align: left; font-size: 120%; }
.sitemapCard__linkList li { line-height: 1.7em; }

@media screen and (max-width: 768px) { .sitemapCard { width: 100%; } }
@media screen and (max-width: 480px) { .sitemapCard__img { margin: 0 20px 0 0; }
  .sitemapCard__img .mark { width: 80px; height: 80px; line-height: 80px; font-size: 150%; } }
@media screen and (max-width: 320px) { .sitemapCard__img { margin: 20px 10px; }
  .sitemapCard__linkList { width: 100%; text-align: center; } }
/*=============================================*/
/* 註冊成功頁 */
/*=============================================*/
.statusBox { text-align: center; width: 100%; margin: 100px auto; }
.statusBox img { width: 100%; max-width: 400px; }
.statusBox .statusBox__mainMsg { margin: 20px 0; }
.statusBox .statusBox__subMsg p { margin-bottom: 5px; }
.statusBox .btn { display: inline-block; min-width: auto; margin: 5px; }

/*=============================================*/
/* 貼文 */
/*=============================================*/
.subject { color: #3AB7BD; font-size: 120%; }

/*----------  註冊條款  ----------*/
#clause { overflow: hidden; }
#clause .decorateImg { position: absolute; width: 250px; top: 40%; right: -6%; z-index: 1; }
#clause .container { position: relative; z-index: 2; padding: 10px 30px; }
#clause .container a { word-break: break-all; }
#clause b { display: block; padding: 10px 0; font-weight: bold; }
#clause ul > li { display: block; margin: 20px 0; }
#clause ol { list-style: decimal; padding-left: 1em; }
#clause ol li { line-height: 1.5em; }
#clause img { width: 100%; margin-bottom: -2px; }

@media screen and (max-width: 768px) { #clause .decorateImg { display: none; } }
/*----------  國外參考網站  ----------*/
table.linkListTable a { color: #3AB7BD; }
table.linkListTable a:hover { text-decoration: underline; }
table.linkListTable td, table.linkListTable th { padding: 20px; }
table.linkListTable th { color: #FFF; background-color: #2BACB2; }
table.linkListTable td { border: 1px solid #DEE0E1; }
table.linkListTable tr { background-color: #F5F5F5; }
table.linkListTable tr:nth-of-type(even) { background-color: #FFF; }

@media screen and (max-width: 640px) { table.linkListTable tr, table.linkListTable td { display: block; }
  table.linkListTable th { display: none; }
  table.linkListTable tr { margin-bottom: 5px; padding: 0; background-color: #FFF; }
  table.linkListTable td { position: relative; padding-left: 5em; }
  table.linkListTable td:nth-of-type(even) { background-color: #F5F5F5; }
  table.linkListTable td:before { position: absolute; font-weight: bold; display: inline-block; margin-left: -4.5em; }
  table.linkListTable td:nth-child(1):before { content: attr(data-label); }
  table.linkListTable td:nth-child(2):before { content: attr(data-label); }
  table.linkListTable td:nth-child(3):before { content: attr(data-label); } }
/*----------  優質教案  ----------*/
.TeachingContent1 table.form1 { line-height: 1.7em; }
.TeachingContent1 table.form1 td, .TeachingContent1 table.form1 th { padding: 20px; }
.TeachingContent1 table.form1 th { color: #FFF; background-color: #2BACB2; border-bottom: 1px solid #d2d2d2; }
.TeachingContent1 table.form1 td { border: 1px solid #d2d2d2; }
.TeachingContent1 ul.te .th { color: #3AB7BD; }

@media screen and (max-width: 640px) { .TeachingContent1 table.form1 td, .TeachingContent1 table.form1 th { display: block; width: 100%; padding: 10px; }
  .TeachingContent1 table.form1 th { border-bottom: none; } }
/*----------  生活科學補給站  ----------*/
.LifeContent1 { line-height: 1.7em; }

.LifeContent1_1 { font-size: 85%; color: #36C; margin: 0; list-style: none; line-height: 1.5; }

.LifeContent1_title1 { font-size: 120%; color: #93C; margin: 0; list-style: none; line-height: 1.5; font-weight: bold; }

.LifeContent1_title2 { font-size: 100%; color: #F69; margin: 0; list-style: none; line-height: 1.5; font-weight: bold; }

.form2 { width: 100%; }
.form2 tr, .form2 td { border: 1px solid #DEE0E1; padding: 10px; }
.form2 th { color: #FFF; background-color: #2BACB2; }