﻿html, body{ font-family: Tahoma,'Microsoft Yahei','Simsun'; font-size:24px; color:#f1eaea;}
body{ background-color: #e9ddd1;}
h1,h2,h3,h4,h5,h6{ color:#ca5f13; font-family:  Tahoma,'Microsoft Yahei','Simsun'; font-size:26px;}
a, a:visited{ color:#306b6e; transition: all 0.5s ease 0.3s;}
a:hover{ color: #c4a072;}
.breadcrumbs li{ font-size: 20px;}
table { margin-bottom: 0rem; background-color: transparent}
table thead{ background: transparent;}
table tfoot{ background: transparent;}
table tr, table tr td{ background-color: transparent; padding:0; margin:0;}
table thead, table tbody, table tfoot {border: none; background-color: transparent;}
table tbody tr:nth-child(even) { border-bottom: 0; background-color: transparent;}

/* --------------------------------------------------------------------
   Layout
-----------------------------------------------------------------------*/
header{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0b7a1+0,752201+0,752201+4,8c3310+48,bf6e4e+100 */
background: rgb(240,183,161); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(240,183,161) 0%, rgb(117,34,1) 0%, rgb(117,34,1) 4%, rgb(140,51,16) 48%, rgb(191,110,78) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgb(240,183,161) 0%,rgb(117,34,1) 0%,rgb(117,34,1) 4%,rgb(140,51,16) 48%,rgb(191,110,78) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgb(240,183,161) 0%,rgb(117,34,1) 0%,rgb(117,34,1) 4%,rgb(140,51,16) 48%,rgb(191,110,78) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */

padding:20px 0;}
@media screen and (max-width: 47em){ header{ padding: 10px 0;}}
footer{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,666666+0,595959+12,474747+39,2c2c2c+70,2b2b2b+76,1c1c1c+88,000000+96,000000+97,131313+99,111111+100,111111+100 */
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(76,76,76) 0%, rgb(102,102,102) 0%, rgb(89,89,89) 12%, rgb(71,71,71) 39%, rgb(44,44,44) 70%, rgb(43,43,43) 76%, rgb(28,28,28) 88%, rgb(0,0,0) 96%, rgb(0,0,0) 97%, rgb(19,19,19) 99%, rgb(17,17,17) 100%, rgb(17,17,17) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgb(76,76,76) 0%,rgb(102,102,102) 0%,rgb(89,89,89) 12%,rgb(71,71,71) 39%,rgb(44,44,44) 70%,rgb(43,43,43) 76%,rgb(28,28,28) 88%,rgb(0,0,0) 96%,rgb(0,0,0) 97%,rgb(19,19,19) 99%,rgb(17,17,17) 100%,rgb(17,17,17) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgb(76,76,76) 0%,rgb(102,102,102) 0%,rgb(89,89,89) 12%,rgb(71,71,71) 39%,rgb(44,44,44) 70%,rgb(43,43,43) 76%,rgb(28,28,28) 88%,rgb(0,0,0) 96%,rgb(0,0,0) 97%,rgb(19,19,19) 99%,rgb(17,17,17) 100%,rgb(17,17,17) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#111111',GradientType=0 ); /* IE6-9 */

padding: 2em 0;}
footer a.tel{ color: #fff;}
footer a:hover.tel{ color: #fff;}
footer .fooBtm{ color: #fff;}
.contentwrapper{ padding: 0 0 15px 0;}


/* mainmenu, logo*/
.top-bar{ padding:0;}
.top-bar, .top-bar ul{ background-color:transparent;}
.menu{ margin-top:1.6em;}
.menu .menu{ margin-top:0; background: #4a90cc;}
.menu > li > a{ padding: 0.7rem 1.6rem; font-size: 20px; color: #fff;}
.menu > li > a:hover{ color: #f52a09;}
/*.dropdown.menu > li.is-dropdown-submenu-parent > a{ padding-right: 1.2rem;}
.dropdown.menu > li.is-dropdown-submenu-parent > a::after{ border: inset 4px; border-color: #fff transparent transparent;}
.is-dropdown-submenu{ background: #fff; z-index:1000}
ul.is-dropdown-submenu li{ border-bottom:1px solid #0872ce; background-color:#fff;}
ul.is-dropdown-submenu li:last-child{ border-bottom:none;}
ul.is-dropdown-submenu li a:hover{ background-color:#fb3d50; color:#fff;}*/
.off-canvas{ background:#9e8f87;}
.off-canvas button.close-button{ color:#fff;}
.hamburger .line{ width: 20px; height: 2px; background-color: #333; display: block; margin: 3px auto; transition: all 0.3s ease-in-out;}
.hamburger .line:last-child{ margin-bottom: 0;}
a.logo{ clear: both; display: block; width: 400px; height: 99px; margin: 0 2.5em 0 0; background: url(http://www.g-po.tw/hd/image/logo.png) no-repeat left top;}
@media screen and (max-width: 47em){ a.logo{ width:280px; height: 69px; margin-right:0; background:url(http://www.g-po.tw/hd/image/logo_small.png) no-repeat left top;}}

a.line{ display:block; width:42px; height:41px; margin-right:5px; background:url(http://www.g-po.tw/hd/image/line.png) no-repeat left top;}
.accordion-menu{ margin-top:20px;}
.accordion-menu li a{ color:#fff; border-bottom: 1px solid #599cd7; padding: 15px}
.theme-header-mobile {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0.1rem 1.25rem;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.theme-header-mobile-left,
.theme-header-mobile-right,
.theme-header-mobile-center {
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0;
          flex: 1 0 0;
}
.theme-header-mobile-left {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
          flex-grow:1;
}
.theme-header-mobile-center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.theme-header-mobile-right {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end; 
}
.theme-header-mobile a.logo{ }
.theme-header-mobile a:hover.logo{ }
.theme-header-mobile .hamburger .line{ background-color:#fff;}
.theme-header-mobile .button{ margin-top:1em; background-color: #ecaa32; border:1px solid #fff;}
@media screen and ( max-width: 63.9375em){ }
@media screen and (max-width: 64em) { .theme-header-mobile {padding: 0.1rem 0rem;}}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
   諮詢專線
---------------------------------------------------------------------------------------------------------------------------------------------  */
.hotline{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffbb84+0,ffbb84+0,ff7400+70,ff7400+100,ff7400+100 */
background: rgb(255,187,132); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(255,187,132) 0%, rgb(255,187,132) 0%, rgb(255,116,0) 70%, rgb(255,116,0) 100%, rgb(255,116,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgb(255,187,132) 0%,rgb(255,187,132) 0%,rgb(255,116,0) 70%,rgb(255,116,0) 100%,rgb(255,116,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgb(255,187,132) 0%,rgb(255,187,132) 0%,rgb(255,116,0) 70%,rgb(255,116,0) 100%,rgb(255,116,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb84', endColorstr='#ff7400',GradientType=0 ); /* IE6-9 */
}
.hotline .hotlineInner{ padding: 15px 0 10px;}
.hotline h3 a{ color: #fff;}
.hotline h3 a:hover{ color: #f52a09;}
@media screen and (max-width: 23.4375em) { .hotline h3, .copyright-ifno h3{font-size:20px;}}
@media screen and (max-width: 23em) { .copyright-ifno h3{font-size:18px;}}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
   服務項目
---------------------------------------------------------------------------------------------------------------------------------------------  */
.service{ padding: 2em 0 3em 0;}
@media screen and (max-width: 47em){ .service{ padding: 2em 0 1em 0;}}
.service h1.title{ font-size:32px; display:inline-block; color:#070707; padding-bottom:10px;}
.service h2{ font-size: 26px; letter-spacing: 5px; padding: 0px 0 10px; margin-bottom:0.1em;}
/*.service a h2{ transition: all 0.5s ease 0.3s;}
.service a:hover h2{ color:#FC6;}*/
.service .columns:hover h2, .service .columns:hover{ color: #c4a072; transition: all 0.5s ease 0.3s;}
/*.service img{ box-shadow:3px 3px 12px #000; padding:1px;}
.service a:hover img{ border:4px solid #c4a072;}*/

/* ---------------------------------------------------------------------------------------------------------------------------------------------
   服務項目
---------------------------------------------------------------------------------------------------------------------------------------------  */
.themeItem{ padding: 30px 0; height: 160px;}
.themeItem:before { content: ""; height: 100%; display: inline-block;vertical-align: middle;}
.themeItem .centered{ display: inline-block; vertical-align: middle; height: auto;}
.themeItem h2.title{ color:#fff; letter-spacing: 3px;}
.themeItem ul.breadcrumbs{ margin: 0 auto; display:table;}
.themeItem ul.breadcrumbs li{ color:#cdbd82; letter-spacing: 1px;}
.themeItem ul.breadcrumbs li a{ color: #fff; text-decoration:underline;}
.themeItem ul.breadcrumbs li a:hover{ text-decoration:none;}
.themeItem ul.breadcrumbs li .fa-map-marker{ margin-right: 8px;}
/* ƒÈ?˜Ëî}±³¾°ˆD sec01êPì¶¼ÎºÌ¡¢sec02×îÐÂÏûÏ¢¡¢sec03ÙISÙY?¡¢
sec04ÙuˆöÙY?¡¢sec05??ÙY?¡¢sec06¼ÎºÌÝ¼Ó¢¡¢sec07?ÉÏ?Ëã±í¡¢sec08ÕÐÄ¼Ý¼Ó¢¡¢sec09·þ„Õ“þüc */
.sec01{background: url(http://www.g-po.tw/hd/image/sec_01.jpg) top center no-repeat;} 
.sec02{background: url(http://www.g-po.tw/hd/image/sec_02.jpg) top center no-repeat;}
.sec03{background: url(http://www.g-po.tw/hd/image/sec_03.jpg) top center no-repeat;}
.sec04{background: url(http://www.g-po.tw/hd/image/sec_04.jpg) top center no-repeat;}


/* ---------------------------------------------------------------------------------------------------------------------------------------------
   Scrolltop   
---------------------------------------------------------------------------------------------------------------------------------------------  */
.scroll-top-wrapper {
  position: fixed;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  text-align: center;
  z-index: 99999999;
  background: #ff6a00 url("http://www.g-po.tw/hd/image/arrow.png") no-repeat center 18px;
  color: #fff;
  width: 45px;
  height: 45px;
  line-height: 35px;
  right: 30px;
  bottom: 0px;
  padding-top: 2px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  -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-color: #cca776;}
.scroll-top-wrapper.show{ visibility:visible; cursor:pointer; opacity: 1.0;}
.scroll-top-wrapper i.fa{ line-height: inherit;}
.scroll-top-wrapper .fa-3x{ font-size:30px;}


/* Small only */
@media screen and (max-width: 39.9375em) {
  .news h1.title,.search-object h1.title{ font-size:21px;} 
  .serviceInfo .topic{ text-align: center;}
  .serviceInfo .cogroup{ text-align: center;}
  .fooMid{ text-align: center;}
  
}

/* Medium and up */
@media screen and (min-width: 40em) { }

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .news h1.title,.search-object h1.title{ font-size:24px;} 
  .serviceInfo .cogroup{ text-align: center;}
  .themeItem{ }
}

/* Large and up */
@media screen and (min-width: 64em) {
  .themeItem{ }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
  
}


