@charset "UTF-8";
@import url(font-awesome.min.css);
@import url(font-line.css);

/*------------------------style css -------------------------------------------------- */



html {font-family: "微軟正黑體","Microsoft JhengHei","Arial", "Helvetica", "sans-serif";
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-size: 1em;
}
button,
select {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled] {
  cursor: default;
}
button,
select{
  font-size: inherit;
  line-height: inherit;
}
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
figure {
  margin: 0;
}
img {
  vertical-align: middle;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.img-circle {
  border-radius: 50%;
}

p {
  margin: 0 0 10px;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.open > a {
  outline: 0;
}
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eee;
  border-color: #337ab7;
}
.nav > li > a > img {
  max-width: none;
}
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}

@media (min-width: 768px) {
  .navbar {
    border-radius: 4px;
  }
  .navbar-header {
    float: left;
  }
}

.container > .navbar-header,
.container-fluid > .navbar-header {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header {
    margin-right: 0;
    margin-left: 0;
  }
}

.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: 0;
}
@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
.navbar-nav {
  margin: 7.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

#loader { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000000; background: url(../images/ajax-loader.gif) no-repeat center center #fff; }

::selection { background: #b3d4fc; text-shadow: none; }
body { font-size: 1em; line-height: 1.4; }
h1, h2, h3, h4, h5, h6 {  font-weight: bold; text-rendering: optimizeLegibility; margin-top: 0px; }
p { font-weight: normal; margin-top: 0px; }
*:focus { outline: none; }
a { color: #167b8d; text-decoration: none; line-height: inherit; }
a:hover { color: #2795b6; text-decoration: none; }
a:focus { color: #167b8d; outline: none; text-decoration: none; }
p a, p a:visited { line-height: inherit; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }
.show-mobile{ display: none!important; }
.hide-mobile{ display: block; }


#container { min-width: 320px; overflow-x: hidden; position: relative; padding-bottom: 0; }
.single #container { position: static; }
/* Header ---------------------- */
#header { position: fixed; width: 100%; left: 0; top: 0; height: 82px; z-index: 901; transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; background: rgba(0,0,0,.5); }

#header.sticky { height: 60px; }
#header .container { width: 100%; z-index: 900; position: relative; }


@media screen and (max-width:960px) {
.nivoSlider img { width: 270% !important; margin-left: -100%; }
}
@media screen and (min-width: 950px) and (max-width: 1920px)  {  .nivoSlider img { width:200% !important; } }
.nivoSlider img { top:0px; left:0px; bottom:0px; right: 0px; object-fit: cover;}



#header .logo { display: none; position: absolute; width: 39px; height: 39px; left: 50%; margin-left: -20px; transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; }

.navbar-default .navbar-toggle {width: 30px;height: 30px;background-color: transparent !important; border: 0; padding: 0 !important;}
.navbar-default { background: none; border: 0; border-radius: 0; padding-top: 25px; transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; -o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s; }
#header.sticky .navbar-default { padding-top: 20px; }
#header.sticky .navbar-default .navbar-toggle { margin-top: 20px; }
#main-navigation ul {  float: none; text-align: center; margin-top:-8px}
#main-navigation ul li { float: none; display: inline-block; margin-right: 43px; height:17px; line-height:17px; overflow:hidden;}

#main-navigation a { float:center; overflow:hidden; color: #ffffff; text-decoration: none;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;-ms-transition: all 0.5s;} 
#main-navigation span { display:block; margin-top:-17px; } 
#main-navigation a:hover { padding-top:17px; display: inline-block;transition: all 0.5s;
-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;-ms-transition: all 0.5s;}

#main-navigation ul li.home { text-indent: -1000000px; height: 39px; width: 39px; position: relative; background: url("../images/logo.png") no-repeat top; top: 0px; text-align: center; position: relative; }
#main-navigation ul li.home-mobile { display: none; }
#main-navigation ul li.home a { display: block; height: 39px; width: 39px; }
#main-navigation ul li:last-child { margin-right: 0; }
#main-navigation ul li a { color: #fff; font-size: 14px; line-height: 1.2; padding: 0; display: block; text-transform: uppercase; text-decoration: none; }


@media screen and (max-width:1330px) {
#main-navigation ul li.home { display: none; }
#header .logo { display: block; position: relative; top: 5px; }
.navbar-default { padding-top: 15px; }
}

@media screen and (max-width:1250px) {
#main-navigation ul li.home { display: none; }
#main-navigation ul li { margin-right: 25px; }
#main-navigation ul li a { font-size: 12px; }
}

@media screen and (max-width:992px) {
#main-navigation ul li a { font-size: 10px; height:17px; line-height:17px;}
#main-navigation ul li { margin-right: 18px; }
}

@media screen and (max-width:767px) {
#content { padding: 15px 0; }
#container { padding-bottom: 0px; }	
.navbar-default .navbar-toggle { right: 20px;}
#main-navigation { border-top: 1px solid #333; margin-top: 21px; padding:8px 0 0 0}
#main-navigation .menu-btn { display: block; }
#main-navigation ul { margin-top: 0px; background: rgba(0,0,0,.5); padding: 20px 0 10px; }
#main-navigation ul li { float: none; display: block; margin: 0 0 15px; padding-left: 20px;}
#main-navigation ul li a { font-size: 14px; padding: 7px 0 7px 0; overflow:hidden; color: #ffffff; text-decoration: none;height:17px; line-height:17px;}
#main-navigation span { display:block; margin-top:-25px; } 
#main-navigation a:hover { padding-top:25px; display: inline-block;transition: all 0.5s;
-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;-ms-transition: all 0.5s;}


#header .container, #header .container-fluid { padding: 0; }	
#header { top: auto; bottom: 0; height: 52px; max-width: 100% !important; z-index: 100005; }
#main-navigation { border: 0; margin-top: 0; }
#header.open .navbar-default .navbar-toggle span { opacity: 0; }
#header.open .navbar-default .navbar-toggle { background: url(../images/arrow6.png) no-repeat center 10px; }
#main-navigation ul { background: none; padding-top: 0; }
#main-navigation ul li { text-align: center; padding: 0; }
#main-navigation ul li.home-mobile { display: inline-block; }
#main-navigation ul li.home-desktop { display: none !important; }
#header .logo { display: none; }
#header.sticky { height: 54px; }
#header.open { height: 350px !important; }
.navbar-default .navbar-toggle { right: 0; float: none !important; width: 100%; text-align: center; color: #fff; text-transform: uppercase; font-size: 14px; margin: 0 !important; font-weight: bold; }
}

@media screen and (max-width:640px) {
#header.sticky .logo { top: 23px; }
#header.sticky .navbar-default .navbar-toggle { margin-top: 8px; }

}



/* 行動版面: 480px 以下。 */
@media only screen and (max-width: 480px) {
/* Banner ---------------------- */
body.home #banner, #banner.banner { width: 100%; }
#banner { height: 180px; background: #000; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.subpage-banner .container { padding-top: 50px; text-align: center; color: #fff; }
.subpage-banner .container img{height:30px;max-width:100%; _width:expression(this.width > 100% ? "100%" : this.width);}
.banner-slide-title { width: 100%;padding-bottom:47px; background-repeat: no-repeat}
.subpage-banner h1 { font-weight: normal; letter-spacing: 10px; font-size: 20px; text-transform: uppercase; padding-top:20px}
	
/*社群*/
.icone-social {float: left;width: 100%;margin:0 0 15px 0; padding:20px 0 20px 0;text-align:center;background-color:#fff; border-top:1px solid #969286}
.icone-social a {display: inline-block;width:30px;height:30px;margin: 0 6px 0 6px;font-size:16px; color:#969286; font-weight:100; line-height:32px;text-align:center;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;border:2px solid #969286;border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px;}
.icone-social a:hover {color:#c8c5bc}

/* footer ---------------------- */
.dnFin{float:left; width:100%; padding:0 0 15px 0; margin:0; background-color:#111111}
.dnname{float:left; width:100%; margin:0;font-size:12px; color: #fff; letter-spacing : 1pt; text-align:center}

/*-- GILEs --*/
.GileLink{float:left; width:100%; margin:10px 0 0 0; padding:0;text-align:center; display: block; }
.GileLink a {font-size: 12px; color: #999;text-decoration: none;}
.GileLink a:hover {font-size: 12px; color: #888;text-decoration: none;}
	
}


/* 表格版面: 481px 到 767px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
/* Banner ---------------------- */
body.home #banner, #banner.banner { width: 100%; }
#banner { height: 320px; background: #000; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.subpage-banner .container { padding-top: 100px; text-align: center; color: #fff; }
.subpage-banner .container img{height:38px;max-width:100%; _width:expression(this.width > 100% ? "100%" : this.width);}
.banner-slide-title { width: 100%;padding-bottom:47px; background-repeat: no-repeat}
.subpage-banner h1 { font-weight: normal; letter-spacing: 10px; font-size: 20px; text-transform: uppercase; padding-top:20px}
	
/*社群*/
.icone-social {float: left;width: 100%;margin:0 0 15px 0; padding:20px 0 20px 0;text-align:center;background-color:#fff; border-top:1px solid #969286}
.icone-social a {display: inline-block;width:30px;height:30px;margin: 0 6px 0 6px;font-size:16px; color:#969286; font-weight:100; line-height:30px;text-align:center;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;border:2px solid #969286;border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px;}
.icone-social a:hover {color:#c8c5bc}

/* footer ---------------------- */
.dnFin{float:left; width:100%; padding:0 0 15px 0; margin:0; background-color:#111111}
.dnname{float:left; width:100%; margin:0;font-size:12px; color: #fff; letter-spacing : 1pt; text-align:center}

/*-- GILEs --*/
.GileLink{float:left; width:100%; margin:10px 0 0 0; padding:0;text-align:center; display: block; }
.GileLink a {font-size: 12px; color: #999;text-decoration: none;}
.GileLink a:hover {font-size: 12px; color: #888;text-decoration: none;}

	
}

/* 表格版面: 768px 到 980px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 768px) {
/* Banner ---------------------- */
body.home #banner, #banner.banner { width: 100%; }
#banner { height: 320px; background: #000; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.subpage-banner .container { padding-top: 165px; text-align: center; color: #fff; }
.subpage-banner .container img{height:38px;max-width:100%; _width:expression(this.width > 100% ? "100%" : this.width);}
.banner-slide-title { width: 100%;padding-bottom:47px; background-repeat: no-repeat}
.subpage-banner h1 { font-weight: normal; letter-spacing: 10px; font-size: 20px; text-transform: uppercase; padding-top:20px}

/*社群*/
.icone-social {float: left;width: 100%;margin:0 0 15px 0; padding:20px 0 20px 0;text-align:center;background-color:#fff; border-top:1px solid #969286}
.icone-social a {display: inline-block;width:30px;height:30px;margin: 0 6px 0 6px;font-size:16px; color:#969286; font-weight:100; line-height:30px;text-align:center;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;border:2px solid #969286;border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px;}
.icone-social a:hover {color:#c8c5bc}

/* footer ---------------------- */
.dnFin{float:left; width:100%; padding:0 0 15px 0; margin:0; background-color:#111111}
.dnname{float:left; width:100%; margin:0;font-size:12px; color: #fff; letter-spacing : 1pt; text-align:center}

/*-- GILEs --*/
.GileLink{float:left; width:100%; margin:10px 0 0 0; padding:0;text-align:center; display: block; }
.GileLink a {font-size: 12px; color: #999;text-decoration: none;}
.GileLink a:hover {font-size: 12px; color: #888;text-decoration: none;}


}

/* 表格版面: 981px 到 1280px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 981px) {
/* Banner ---------------------- */
body.home #banner, #banner.banner { width: 100%; }
#banner { height: 320px; background: #000; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.subpage-banner .container { padding-top: 165px; text-align: center; color: #fff; }
.subpage-banner .container img{height:38px;max-width:100%; _width:expression(this.width > 100% ? "100%" : this.width);}
.banner-slide-title { width: 100%;padding-bottom:47px; background-repeat: no-repeat}
.subpage-banner h1 { font-weight: normal; letter-spacing: 10px; font-size: 20px; text-transform: uppercase; padding-top:20px}

/*社群*/
.icone-social {float: left;width: 100%;margin:0 0 15px 0; padding:20px 0 20px 0;text-align:center;background-color:#fff; border-top:1px solid #969286}
.icone-social a {display: inline-block;width:30px;height:30px;margin: 0 6px 0 6px;font-size:16px; color:#969286; font-weight:100; line-height:30px;text-align:center;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;border:2px solid #969286;border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px;}
.icone-social a:hover {color:#c8c5bc}

/* footer ---------------------- */
.dnFin{float:left; width:100%; padding:0 0 15px 0; margin:0; background-color:#111111}
.dnname{float:left; width:100%; margin:0;font-size:12px; color: #fff; letter-spacing : 1pt; text-align:center}

/*-- GILEs --*/
.GileLink{float:left; width:100%; margin:10px 0 0 0; padding:0;text-align:center; display: block; }
.GileLink a {font-size: 12px; color: #999;text-decoration: none;}
.GileLink a:hover {font-size: 12px; color: #888;text-decoration: none;}


}



/* 桌面版面: 1281px 到最大 1824px。樣式繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1281px) {
/* Banner ---------------------- */
body.home #banner, #banner.banner { width: 100%;}
#banner { height: 420px; background: #000; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.subpage-banner .container { padding-top: 210px; text-align: center; color: #fff; }
.subpage-banner .container img{height:38px;max-width:100%; _width:expression(this.width > 100% ? "100%" : this.width);}
.banner-slide-title { width: 100%;padding-bottom:47px; background-repeat: no-repeat}
.subpage-banner h1 { font-weight: normal; letter-spacing: 10px; font-size: 20px; text-transform: uppercase; padding-top:20px}

/*社群*/
.icone-social {float: left;width: 100%;margin:0 0 15px 0; padding:20px 0 20px 0;text-align:center; background-color:#fff; border-top:1px solid #969286}
.icone-social a {display: inline-block;width:28px;height:28px;margin: 0 6px 0 6px;font-size:14px; color:#969286; font-weight:100; line-height:28px;text-align:center;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;border:2px solid #969286;border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px;}
.icone-social a:hover {color:#c8c5bc}

/* footer ---------------------- */
.dnFin{float:left; width:100%; padding:0 0 15px 0; margin:0; background-color:#111111}
.dnname{float:left; width:100%; margin:0;font-size:12px; color: #fff; letter-spacing : 1pt; text-align:center}

/*-- GILEs --*/
.GileLink{float:left; width:100%; margin:4px 0 0 0; padding:0;text-align:center; display: block; }
.GileLink a {font-size: 12px; color: #999;text-decoration: none;}
.GileLink a:hover {font-size: 12px; color: #888;text-decoration: none;}


}

.clear{ clear:both;}
img {border: 0px}