@charset "utf-8";
/*
 * CSS Document 
 * ==========================================================================
 * 版權所有 2014 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: 又綺/瑀倫 $
 * $Date: 2014-09-18 (四) $
*/

/* ---- 重置樣式 ---- */
body {margin: 0; padding: 0; font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, PMingLiU; font-size: 13px; color: #222; background-color: #004489; overscroll-behavior: none; scroll-behavior: auto;}
img { border: 0; text-decoration: none; vertical-align: top;}
a { text-decoration: none;}
form, input, textarea, select, label { margin: 0; padding: 0;}
input, textarea, select, label { font-family: '微軟正黑體', Microsoft JhengHei,Verdana, PMingLiU; font-size: 13px; color: #000; font-weight: bold;}
input { outline: none;}
textarea { resize: none; outline: none;}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* ---- 共用主架構 ---- */
.pBg { width: 100%; max-width: 100dvw; overflow: hidden; background: url(../images/p_bg.gif) no-repeat center top #efefef;}
#pContentWrap { margin: 0 auto; width: 1000px; max-width: 100%; overflow: hidden; display: flex; flex-wrap: wrap;}
#pRWrap { flex: 0 0 20%; overflow: hidden;}
#pLWrap { flex: 0 0 80%; overflow: hidden; }
#pLWrap .bg { padding: 30px; box-sizing: border-box; margin-bottom: 20px; background: rgb(255,255,255);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 81%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 81%, rgba(255,255,255,0) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 81%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);}
#pLWrap .pBoxWrap { clear: both; margin: 0 auto; min-height: 300px;}

@media (max-width: 991px) {
  #pRWrap { 
    flex: 0 0 100%; 
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  #pLWrap {
    flex: 0 0 100%; 
    width: 100%;
    overflow: hidden;
  }
  #pLWrap .bg{
    padding-top: 30px;
  }
  
}
@media (max-width: 767px) {
  #pLWrap .bg{
    padding: 10px 20px 20px;
  }
}
/* 公司簡介 & 聯絡我們 共用(黑色背景) */
#black.pBgB { width: 100%;  overflow: hidden;background: url(../images/about_bg.jpg) no-repeat center top #252424; }
#black .bg { margin-bottom: 20px; min-height: 690px; background: url(../images/about_bg.png) no-repeat 0 0; background-size: 97%;}

/* ---- 內頁Header ---- */
#pHeaderWrap { width: 100%; background: url(../images/p_header_bg.png) repeat-x top;}
#pHeaderWrap .box {position: relative; display: flex; gap: 20px; justify-content: space-between; align-items: center; margin: 0 auto; width: 1000px; max-width: 100%; }
@media (max-width: 1199px) {
  #pHeaderWrap .box {width: 100%; padding: 0 20px;}
}
@media (max-width: 991px) {
  #pHeaderWrap .box {
    padding: 10px;
    gap: 10px;
    box-sizing: border-box;
  }
  #pHeaderWrap .mainMenu{margin: 0 0 0 auto;}
}
/* logo */
#pHeaderWrap h1 { margin: 0; width: 200px; height: 120px; overflow: hidden;}
#pHeaderWrap h1 a { display: block; position: relative; width: 200px; height: 120px; text-indent: -9999px; overflow: hidden;}
#pHeaderWrap h1 a span { display: inline-block; position: absolute; top: 0; left: 0; width: 200px;  height: 120px; background-image: url(../images/p_logo.png); background-repeat: no-repeat; overflow: hidden; background-size: 100%;}
#pHeaderWrap h1 a span.logo1 { background-position: 0 0;}
#pHeaderWrap h1 a span.logo2 { background-position: 0 -120px;}
@media (max-width: 991px) {
  #pHeaderWrap h1 {  width: 100px; height: 60px; }
  #pHeaderWrap h1 a{  width: 100px; height: 60px; }
  #pHeaderWrap h1 a span{ width: 100px; height: 60px;}
  #pHeaderWrap h1 a span.logo2 { background-position: 0 -60px;}

}
/* 語系 */
#pHeaderWrap .lang { position: relative; width: 185px; height: 30px; margin: 0 0 0 auto; font-weight: bold; z-index: 100;}
#pHeaderWrap .lang #panel { display: none; position: absolute; z-index: 10; top: 30px; right: 0; width: 183px; border: #e5e4e4 solid 1px; border-top: 0; background-color: #fff;}
#pHeaderWrap .lang #panel a { display: block; padding: 3px 0 3px 10px; line-height: 22px; color: #666;}
#pHeaderWrap .lang #panel a:hover { color: #000; background: #f0f0f0;}
#pHeaderWrap .lang #panel a span { display: inline-block; margin: 1px 8px 0 0; width: 18px; height: 12px; overflow: hidden;}
#pHeaderWrap .lang #panel a.spain span { background: url(../images/lang_spain.gif) no-repeat 0 0;}
#pHeaderWrap .lang #panel a.en span { background: url(../images/lang_en.gif) no-repeat 0 0;}
#pHeaderWrap .lang #panel a.tw span { background: url(../images/lang_tw.gif) no-repeat 0 0;}
#pHeaderWrap .lang a#flip { display: block; padding-left: 10px; width: 185px; height: 30px; text-indent: -9999px; background: url(../images/lang.gif) no-repeat 0 0; overflow: hidden;}
@media (max-width: 991px) {
  #pHeaderWrap .lang.is-open #panel{
    display: block;
  }
}
/* 主選單 */
#menuBox { padding: 20px 0 0 0; overflow: hidden;}
#menuBox ul { position: relative; margin: 0; padding: 0; display: flex; list-style: none;}
#menuBox ul li { width: 110px; height: 35px;  overflow: hidden;}
#menuBox ul li.current{ 
  border-radius: 6px;
  background-color: #eaeaea;
  background-image: -webkit-linear-gradient(bottom, #0067aa, #0e7fbc);
  background-image: -moz-linear-gradient(bottom, #0067aa, #0e7fbc);
  background-image: -o-linear-gradient(bottom, #0067aa, #0e7fbc);
  background-image: -ms-linear-gradient(bottom, #0067aa, #0e7fbc);
  background-image: linear-gradient(to top, #0067aa, #0e7fbc);
}
#menuBox ul li a { display: block; position: relative; z-index: 5; margin-top: 7px; width: 110px; height: 20px; text-indent: -9999px; background-repeat: no-repeat; background-position: 0 0; overflow: hidden;}
#menuBox ul li a.nav1 { background-image: url(../images/nav1.png);}
#menuBox ul li a.nav2 { background-image: url(../images/nav2.png);}
#menuBox ul li a.nav3 { background-image: url(../images/nav3.png);}
#menuBox ul li a.nav4 { background-image: url(../images/nav4.png);}
#menuBox ul li a.nav5 { background-image: url(../images/nav5.png);}
#menuBox ul li.current a { background-position: 0 -20px;}
@media (max-width: 991px) {
  #menuBox{
    padding: 20px;
    position: absolute;
    background: rgb(255 255 255 / 100%);
    height: 100vh;
    z-index: 99;
    width: 300px;
    right: -300px;
    opacity: 0;
    transition: right 0.3s ease-in-out, opacity 0.3s 0.1s;
    &::after{
      content: '';
      height: 100dvh;
      width: 100dvw;
      top: 0;
      right: -100dvw;
      opacity: 0;
      position: fixed;
      background: rgb(0 0 0 / 50%);
      transition: opacity 0.3s 0.3s
    }
    ul{
      flex-wrap: wrap;
      li{
        flex: 0 0 100%;
        height: 45px;
        width: 100%;
        a{
          margin: 13px 0;
          width: 100%;
          background-position: 0 0;
        }
        &.current a{
          background-position: 0 -20px;
        }
        
      }
    } 
  }
  #pHeaderWrap.is-open{
    #menuBox{
      opacity: 1;
      right: 0;
      &::after{
        opacity: 1;
        right: 300px;
      }
    }
  }
}
@media (min-width: 992px) {
  #pHeaderWrap .switch{
    display: none;
  }
}
@media (max-width: 991px) {
#pHeaderWrap .switch {
  cursor: pointer;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  padding: 0;
  margin-right: 10px;
  z-index: 99;
  background: #0d43a5;
  -webkit-transition: ease 0.3s;
  transition: ease 0.3s;
}
#pHeaderWrap .switch .icon {
  position: relative;
  display: block;
  text-align: right;
  padding: 6px 11px;
  line-height: 5px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}
#pHeaderWrap .switch .icon i {
  display: inline-block;
  height: 2px;
  background: #fff;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
#pHeaderWrap .switch .icon i:first-child {
  width: 100%;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
#pHeaderWrap .switch .icon i:nth-child(2) {
  width: 80%;
}
#pHeaderWrap .switch .icon i:last-child {
  width: 100%;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
#pHeaderWrap .switch:hover .icon div {
  -webkit-transition: width 0.5s ease, -webkit-transform 0.5s ease;
  transition: width 0.5s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, width 0.5s ease;
  transition: transform 0.5s ease, width 0.5s ease, -webkit-transform 0.5s ease;
}
#pHeaderWrap .switch:hover .icon div:first-child {
  width: 80%;
}
#pHeaderWrap .switch:hover .icon div:nth-child(2) {
  width: 60%;
}
#pHeaderWrap .switch:hover .icon div:last-child {
  width: 100%;
}
#pHeaderWrap .switch.is-active .icon {
  line-height: 0;
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
#pHeaderWrap .switch.is-active .icon i:first-child {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  background: var(--switch);
  margin: 0 0 -4px 0;
}
#pHeaderWrap .switch.is-active .icon i:nth-child(2) {
  position: absolute;
  left: 48.5%;
  width: 4px;
  height: 4px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 52%;
  z-index: 2;
  background-color: #35998b;
}
#pHeaderWrap .switch.is-active .icon i:last-child {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  background: var(--switch);
}
}

/* ---- footer ---- */
#footerWrap { clear: both; margin: 0 auto; padding: 15px 15px 10px; max-width: 100%; font-family: Arial, Helvetica, sans-serif, 新細明體, Pmingliu; font-size: 12px; overflow: hidden; }
#footerWrap table { margin: 0 auto;}
#footerWrap table td { text-align: center;}
#footerWrap ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; padding: 0; list-style: none;}
#footerWrap ul li { padding: 0 7px; background: url(../images/line6.gif) no-repeat right 1px;}
#footerWrap ul li.noLine { background: none;}
#footerWrap ul li a { color: #fff;}
#footerWrap ul li a:hover { text-decoration: underline;}
#footerWrap p { clear: both; margin: 0; padding-top: 8px; color: #b3c8d1; text-align: center;}
#footerWrap p a { padding-left: 3px; color: #b3c8d1;}
#footerWrap p a:hover { text-decoration: underline;}

.iFooter { margin: 0 auto; padding-top: 20px; max-width: 100%; width: 1000px; max-width: 100%; background: url(../images/i_shadow.png) no-repeat center top; overflow: hidden;}
.iFooter #footerWrap ul li { background: url(../images/line9.gif) no-repeat right 1px;}
.iFooter #footerWrap ul li.noLine { background: none;}
.iFooter #footerWrap ul li a { color: #191918;}
.iFooter #footerWrap p { color: #666;}
.iFooter #footerWrap p a { color: #666;}

/* ---- 首頁 ---- */
#iWrap { position: relative; width: 100%; min-height: 100dvh; overflow: hidden;}
#iWrap .contentWrap { position: relative; margin: 0 auto; width: 100%; max-width: 1365px; width: 100%;}
@media (min-width: 992px) {
  #footerWrap br{
    display: none;
  }
}
@media (max-width: 1366px) {
  #iWrap .contentWrap {
    width: 100%;
  }
  .iFooter{
    width: 100%;
  }
}

/* slogan */
.iSloganWrap { position: absolute; top: 45px; right: 50px; width: 365px; height: 95px;}
.iSloganWrap div { display: block; position: absolute;}
.iSloganWrap div.tw { left: 0; top: 0; width: 296px; height: 27px; background: url(../images/slogan_tw.png) no-repeat 0 0; overflow: hidden;}
.iSloganWrap div.en { left: 20px; top: 45px; width: 342px; height: 40px; background: url(../images/slogan_en.png) no-repeat 0 0; overflow: hidden;}

/* top-header */
#iWrap .wrap #headerBox { position: relative; width: 21.25%; height: 100%; float: left; overflow: hidden;}
#iWrap #headerBox h1 { position: absolute; top: 40px; left: 50%; margin-left: -75px; width: 150px; overflow: hidden;}
#iWrap #headerBox h1 a { display: block; position: relative; width: 150px; height: 105px; text-indent: -9999px; overflow: hidden;}
#iWrap #headerBox h1 a span { display: inline-block; position: absolute; top: 0; left: 0; width: 150px; height: 105px; background-image: url(../images/i_logo.png); background-repeat: no-repeat; overflow: hidden;}
#iWrap #headerBox h1 a span.logo1 { background-position: 0 0;}
#iWrap #headerBox h1 a span.logo2 { background-position: 0 -105px;}
#iWrap #headerBox .lang { position: absolute; top: 215px; left: 50%; margin-left: -65px; width: 130px; height: 165px; font-weight: bold; overflow: hidden;}
#iWrap #headerBox .lang .ti { padding-bottom: 45px; color: #fff; text-align: center;}
#iWrap #headerBox .lang ul { margin: 0; padding: 0; list-style: none;}
#iWrap #headerBox .lang ul li { margin-bottom: 20px;}
#iWrap #headerBox .lang ul li a { display: block; width: 130px; color: #3a7fd4; text-align: center;}
#iWrap #headerBox .lang ul li a:hover { color: #fff;}
#iWrap #headerBox .lang ul li a span { display: block; position: relative; margin: 0 auto 5px; width: 18px; height: 12px; overflow: hidden;}
#iWrap #headerBox .lang ul li a.spain span { background: url(../images/lang_spain.gif) no-repeat 0 0;}
#iWrap #headerBox .lang ul li a.en span { background: url(../images/lang_en.gif) no-repeat 0 0;}
#iWrap #headerBox .lang ul li a.tw span { background: url(../images/lang_tw.gif) no-repeat 0 0;}

#iWrap img { display: block; width: 100%; height: auto;}
#iWrap h2.largeTi { margin: 0 0 20px 0; padding-bottom: 22px; font-size: 16px; color: #201f1d; font-weight: bold;}
#iWrap h2.largeTi.lineA { background: url(../images/line1.gif) no-repeat left bottom;}
#iWrap h2.largeTi.lineB { color: #fff; background: url(../images/line2.gif) no-repeat left bottom;}
#iWrap h2 a { display: block; width: 100%; color: #201f1d;}
#iWrap a.btnView { display: block; position: absolute; z-index: 10; top: 0; left: 0; width: 100%;}
#iWrap .layer { position: absolute; left: 30px;}
#iWrap .wrap{ display: flex;}
#iWrap .wrap .layer { top: 50px;}
#iWrap .wrapB{ display: flex;}
#iWrap .wrapB .layer { top: 30px;}
#iWrap .btnDetail { display: block; padding: 3px 10px; width: 83px; font-size: 12px; overflow: hidden;}
#iWrap .btnDetail.white { color: #f3f3f3; border: #cacaca solid 1px;}
#iWrap .btnDetail.black { color: #1a1a1a; border: #6b7379 solid 1px;}
#iWrap .btnDetail span { display: inline-block; position: relative; margin-left: 8px; width: 5px; height: 6px; overflow: hidden;}
#iWrap .btnDetail.white span { background: url(../images/aw.png) no-repeat 0 0;}
#iWrap .btnDetail.black span { background: url(../images/aw2.png) no-repeat 0 0;}
#iWrap p.txt { margin: 0 0 30px 0; padding-right: 20%; color: #fff; line-height: 22px;}

/* top-最新消息 */
#iWrap .wrap #newsBox { position: relative; margin-top: 11.35%; width: 21.25%; height: 62.6%; float: left; overflow: hidden;}
#iWrap #newsBox .item { padding-bottom: 20px; font-weight: bold;}
#iWrap #newsBox .item .date { padding-bottom: 2px; font-size: 12px; color: #666;}
#iWrap #newsBox .item .ti a { display: block; width: 220px; color: #151513; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
#iWrap #newsBox .item:hover .date, #iWrap #newsBox .item:hover .ti a { color: #0093d0;}

/* top-商品廣告 */
#iWrap .wrap #adBox { position: relative; margin-top: 11.35%; width: 21.25%; height: 62.6%; float: left; background-color: #333; overflow: hidden;}

/* top-公司簡介 */
#iWrap .wrap #aboutBox { position: relative; margin-top: 11.35%; width: 34.8%; height: 62.6%; float: left; }

/* down-商品廣告 */
#iWrap .wrapB #adBox { position: relative; width: 21.25%; height: 100%; float: left; }

/* down-商品廣告2 */
#iWrap .wrapB #adBoxB { position: relative; width: 56.05%; height: 100%; float: left; overflow: hidden;}

/* top-聯絡我們 */
#iWrap .wrapB #contactBox { position: relative; width: 21.24%; height: 100%; float: left; overflow: hidden;}

#iBgRight { position: absolute; bottom: 0; left: 100%; width: 500px; height: 100%; background: url(../images/i_content_bg.png) repeat-x; z-index: -1;}
#iBgLeft { position: absolute; bottom: 0; right: 100%; width: 500px; height: 100%; background: url(../images/i_content_bg.png) repeat-x;z-index: -1;}

@media screen and (max-width: 1600px) {
	#iBgRight, #iBgLeft { display: none;} 
}
@media screen and (max-width: 1282px) {
	.iSloganWrap { top: 30px; right: 50px;}
	#iWrap #headerBox .lang { top: 190px;}
  #iWrap p.txt { margin-bottom: 30px;}
  #iWrap .wrap .layer { top: 20px; top: 20px;
    right: 20px;
    left: 20px;
    overflow: hidden;
  }
}
@media screen and (max-width: 1140px) {
	#iWrap #headerBox .lang { top: 165px;}
	#iWrap #headerBox .lang .ti { padding-bottom: 20px;}
  #iWrap p.txt { margin-bottom: 15px; padding-right: 10%;}
}

@media screen and (max-width: 1024px) {
	.iSloganWrap { top: 15px; }
	.iSloganWrap .en { top: 40px;}
  #iWrap #headerBox img{
    height: 400px;
  }
  #iWrap .wrap #headerBox,
  #iWrap .wrap #newsBox,
  #iWrap .wrap #adBox,
  #iWrap .wrap #aboutBox{
    align-self: baseline;
    margin: 0;
    height: 100%;
  }
	#iWrap #headerBox .lang { top: 165px;}
	#iWrap #headerBox .lang .ti { padding-bottom: 20px;}
	#iWrap .layer { left: 30px;}
	
	#iWrap .wrapB .layer { top: 20px;}
  #iWrap p.txt { margin-bottom: 10px; padding-right: 10%; line-height: 18px;}
	#iWrap #newsBox .item .ti a { width: 170px;}
}

@media screen and (max-width: 991px) {
  #iWrap #headerBox{
    width: 50%;
  }
  #iWrap .wrap,
  #iWrap .wrapB{
    flex-wrap: wrap;
  }
  #iWrap .wrap #headerBox,
  #iWrap .wrap #newsBox,
  #iWrap .wrap #adBox{
    flex: 0 0 calc(100%/3);
    float: none;
    overflow: hidden;
  }
  #iWrap .wrap #headerBox{
    align-content: center;
    height: 400px;
    >img{
      height: 100%; 
    }
  }
  #iWrap .wrap #aboutBox{
    flex: 0 0 100%;
    margin: 0;
    overflow: hidden;
    height: 20dvh;
  }
  #iWrap .wrapB #adBox,
  #iWrap .wrapB #adBoxB,
  #iWrap .wrapB #contactBox{
    float: none;
    flex: 0 0 calc(100%/3);
    width: calc(100%/3);
    overflow: hidden;
    height: 22vh;
    >img{
      object-position: center center;
      object-fit: cover;
      max-width: unset;
    }
  }
  #iWrap .wrapB #adBoxB{
    flex: 0 0 calc((100%/3)*2);
    width: calc((100%/3)*2);
    >img{
      max-width: unset;
      height: 100%;
      width: unset;
    }
  }
  #iWrap .wrapB #contactBox{
    flex: 0 0 100%;
    width: 100%;
    height: 20dvh;
  }
}
@media screen and (max-width: 767px) {
  #iWrap h2.largeTi{
    margin: 0 0 15px;
    padding-bottom: 15px;
  }
  #iWrap .wrap,
  #iWrap .wrapB{
    flex-wrap: wrap;
  }
  #iWrap .wrap #headerBox{
    flex: 0 0 100%;
    height: 325px;
  }
  #iWrap .wrap #aboutBox{
    height: auto;
  }
  #iWrap .wrapB #contactBox{
    height: 30dvh;
  }
  #iWrap .wrap #newsBox,
  #iWrap .wrap #adBox,
  #iWrap .wrapB #adBox,
  #iWrap .wrapB #adBoxB  { 
    width: 50%;
    flex: 0 0 50%;
    aspect-ratio: 1;
    height: unset;
    >img{
      height: 100%;
    }
  }
}


/* ---- 內頁共用樣式 ----*/
h2.hidden { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);}
.lh22 { line-height: 22px;}
.displayNone { display: none;}
.clearBoth { clear: both; margin: 0; padding: 0; font-size: 0; overflow: hidden;}
.alignC { padding-top: 30px; text-align: center;}
.noData { padding: 30px 0; width: 100%; font-size: 14px; color: #999; font-weight: bold; text-align: center; overflow: hidden;}

/* table重置 */
.tb { border: 0; border-collapse: collapse; border-spacing: 0;}
.tb th, .tb td { padding: 0;}

/* 當前路徑 */
#pathWrap {flex: 0 0 100%; padding: 15px 15px 15px 18px; font-family: Arial, Helvetica, sans-serif, 新細明體, Pmingliu; font-size: 12px; color: #666;}
#pathWrap span { padding-left: 5px; color: #666;}
#pathWrap a { padding: 0 5px; color: #666;}
#pathWrap a:hover { color: #009beb;}
#pathWrap a.home { display: inline-block; margin-top: -2px; padding-right: 0; width: 11px; height: 11px; text-indent: -9999px; vertical-align: middle; background: url(../images/btn_home.png) no-repeat 0 0;}
#pathWrap a.home:hover { background-position: 0 -11px;}
@media screen and (max-width: 767px) {
  #pathWrap {
    padding: 5px 5px 5px 18px;
  }
}
/* 大標 */
h2#pMenuTi { margin: 0; padding: 30px 0 20px 15px; width: 200px; font-size: 18px; color: #fff; font-weight: normal; background: url(../images/p_menu_ti-bg.gif) no-repeat 0 0; overflow: hidden;}
h2#pMenuTi span { display: block; margin-top: 17px; padding-top: 10px; font-size: 12px; background: url(../images/line3.gif) no-repeat 0 0;}
@media screen and (max-width: 991px) {
  h2#pMenuTi {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 15px 0;
    text-align: center;
    background-size: cover;
    span{
      background: url(../images/line3.gif) no-repeat center 0;
    }
    &.news{
      padding: 30px 0;
      background: none;
    }
  }
}
/* 次選單 */
ul#pMenuBox { margin: 0; padding: 0; width: 200px; font-size: 14px; font-weight: bold; list-style: none; overflow: hidden;}
ul#pMenuBox > li { overflow: hidden;}
ul#pMenuBox > li h3 { display: block; margin: 0;  font-size: 14px; background: url(../images/line4.gif) repeat-x bottom; overflow: hidden;}
ul#pMenuBox > li h3 a { display: block; padding-left: 27px; color: #0f316b; font-weight: bold; line-height: 18px; background: url(../images/p_menu_out.png) no-repeat 15px 7px; overflow: hidden;}
ul#pMenuBox > li:last-child h3{background: none}
ul#pMenuBox ul.subNav { margin: 2px 0 10px 0; padding: 0 0 0 27px; list-style: none; overflow: hidden;}
ul#pMenuBox ul.subNav li { padding: 2px 0 2px 12px; color: #959595; background: url(../images/p_menu_sub-out.png) no-repeat 0 10px; overflow: hidden;}
ul#pMenuBox > li:hover h3, ul#pMenuBox > li.current h3 { background: none; background-color: #86c5e0;}
ul#pMenuBox > li:hover h3 a, ul#pMenuBox > li.current h3 a { color: #fff; background: url(../images/p_menu_over.png) no-repeat 15px 7px;}
@media (min-width: 992px) {
  .toggle {
    display: none;
  }
  ul#pMenuBox > li {
    width: 200px;
    position: relative;
  }
  ul#pMenuBox > li h3 {padding: 7px 0;}
}
@media (max-width: 991px) {
  .aside-nav {
    border-top: none;
    width: 90%;
    margin: 2rem auto 0;
    padding: 0;
  }
  .toggle {
    height: 40px;
    line-height: 40px;
    padding: 0 2rem;
    margin: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    position: relative;
    background: #000;
  }
  .toggle:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    border-bottom: #fff solid 2px;
    border-right: #fff solid 2px;
    position: absolute;
    color: #fff;
    right: 1.5rem;
    top: 15px;
    z-index: 1;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }

  .toggle.on:after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  ul#pMenuBox {
    width: 100%;
    display: none;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  ul#pMenuBox > li h3 a {
    padding: 10px 2rem;
    background: url(../images/p_menu_out.png) no-repeat 15px 15px;
  }
}

/* 內頁slogan */
.pSloganWrap { position: relative; margin: 0 10px 25px 0; width: 425px; height: 67px; float: right;}
.pSloganWrap div { display: block; position: absolute;}
.pSloganWrap div.tw { left: 0; top: 0; width: 225px; height: 20px; background: url(../images/p_slogan_txt1.png) no-repeat 0 0; overflow: hidden;}
.pSloganWrap div.en { left: 15px; bottom: 0; width: 310px; height: 40px; background: url(../images/p_slogan_txt2.png) no-repeat 0 0; overflow: hidden;}
.pSloganWrap div.twBlack { left: 0; top: 0; width: 225px; height: 20px; background: url(../images/p_slogan_txt1_black.png) no-repeat 0 0; overflow: hidden;}
@media screen and (max-width: 991px) {
  .pSloganWrap{
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .pSloganWrap{
    float: none;
    margin: 20px;
    width: calc(100% - 40px);
  }
}


/* ---- 公司簡介---- */
#aboutWrap{ color: #CCC; margin-top: 80px; padding: 20px; line-height: 2em; overflow: hidden;}
#aboutWrap .imgL{ float: left; width: 45%;}
#aboutWrap .imgL img{width: 100%;}
#aboutWrap .imgR{ float: right; width: 35%;}
#aboutWrap .imgR img{width: 100%;}
#aboutWrap .txtBoxR{ float: right; width: 50%;}
#aboutWrap .txtBoxL{ float: left; width: 60%;}
@media screen and (max-width: 767px) {
  #aboutWrap{
    margin: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    .imgL,
    .imgR,
    .txtBoxR,
    .txtBoxL{ 
      float: none;
      width: 100%;
      margin: 5px 0;
    }
    .imgL,
    .imgR{
      img{
        width: 90%;
        margin: 0 auto;
      }
    }
  }
}


/* ---- 機械產品 ---- */

/* 列表 */
#pGoodsList { width: 100%; overflow: hidden;display: flex; flex-wrap: wrap; gap: 20px; padding: 30px; box-sizing: border-box;}
#pGoodsList .wrap { flex: 0 0 calc((100% - 20px)/2); overflow: hidden;}
#pGoodsList .wrap .box {  border: #c7c7c7 solid 1px; overflow: hidden;}
#pGoodsList .wrap::after{
  content: '';
  width: 100%;
  height: 9px;
  display: block;
  background: url(../images/p_goods_pic-bg2.gif) no-repeat center center; overflow: hidden;
}
#pGoodsList .box .pic {  overflow: hidden;}
#pGoodsList .box .pic img{ width: 100%;}
#pGoodsList .box .pic a { display: block; overflow: hidden;}
#pGoodsList .box .ti { font-size: 15px; color: #150e16; font-weight: bold; text-align: center; line-height: 1.5; padding: 20px;}
#pGoodsList .box:hover { border: #777 solid 1px;}
#pGoodsList .box:hover .ti { color: #004489;}


@media screen and (max-width: 767px) {
  #pGoodsList{
    gap: 15px;
    padding: 20px;
  }
  #pGoodsList .wrap { flex: 0 0 100%;}

}
/* 詳細頁 */
#pGoodsView { position: relative; padding-bottom: 20px; min-height: 395px; width: 1000px; box-sizing: border-box; margin-bottom: 20px; background: rgb(255,255,255);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 81%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 81%, rgba(255,255,255,0) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 81%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);overflow: hidden;}
#pGoodsView .topBox { padding: 0 5% 10%; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; overflow: hidden; box-sizing: border-box;}
#pGoodsView .topBox h3 {flex: 0 0 20%;margin-left: 2%; width: 180px; font-size: 24px; color: #150e16; font-weight: normal; overflow: hidden;}
#pGoodsView .topBox h3 span { display: block; padding-bottom: 3px; font-size: 18px; color: #333; font-weight: normal;}
#pGoodsView .topBox .pic { flex: 0 0 78%;aspect-ratio: 700/285;background: url(../images/p_goods_pic-bg.png) no-repeat 0 0; overflow: hidden;}
#pGoodsView .topBox .btn {padding: 0; border-radius: 0; position: absolute; z-index: 20; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; overflow: hidden;}
#pGoodsView .topBox .btnPrev { left: 0;}
#pGoodsView .topBox .btnNext { right: 0;}
#pGoodsView .topBox .btn a, #pGoodsView .topBox .btn span { display: block; width: 35px; height: 35px; text-indent: -9999px; background: url(../images/btn_page.gif) no-repeat 0 0; overflow: hidden;}
#pGoodsView .topBox .btnPrev a { background-position: 0 0;}
#pGoodsView .topBox .btnPrev a:hover { background-position: 0 -35px;}
#pGoodsView .topBox .btnPrev span { background-position: 0 -70px;}
#pGoodsView .topBox .btnNext a { background-position: -35px 0;}
#pGoodsView .topBox .btnNext a:hover { background-position: -35px -35px;}
#pGoodsView .topBox .btnNext span { background-position: -35px -70px;}
#pGoodsView .txt { margin: 0 auto;  overflow: hidden;}
@media screen and (max-width: 991px) {
  #pGoodsView .topBox { 
    padding: 5%;
    flex-wrap: wrap;
  }
  #pGoodsView .topBox h3 {
    flex: 0 0 100%;
    margin-left: 0;
  }
  #pGoodsView .topBox .pic{
    flex: 0 0 100%;
  }
}
/* ---- 夾鏈產品 ---- */

/* 列表 */
#pGoodsBList { width: 100%; overflow: hidden;display: flex; flex-wrap: wrap; gap: 20px; padding: 30px;box-sizing: border-box; }
#pGoodsBList .wrap { flex: 0 0 calc((100% - 20px)/2); overflow: hidden;}
#pGoodsBList .wrap .box { padding: 5px; border: #c7c7c7 solid 1px; overflow: hidden;}
#pGoodsBList .wrap::after{
  content: '';
  width: 100%;
  height: 9px;
  display: block;
  background: url(../images/p_goods_pic-bg2.gif) no-repeat center center; overflow: hidden;
}
#pGoodsBList .box .pic { position: relative;  background-color: #000; overflow: hidden;}
#pGoodsBList .box .pic img{ width: 100%;}
#pGoodsBList .box .ti { position: absolute; z-index: 2; bottom: 0; left: 0; padding: 6px 10px; width: 100%; background: url(../images/p_goods2_ti-bg.png) repeat; overflow: hidden;}
#pGoodsBList .box .ti span { display: block; width: 100%; font-size: 15px; color: #fff; font-weight: bold; background: url(../images/icon.png) no-repeat right 3px; overflow: hidden;}
#pGoodsBList .box a { display: block;  overflow: hidden;}
#pGoodsBList .box:hover { border: #777 solid 1px;}
#pGoodsBList .box:hover img { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
@media screen and (max-width: 767px) {
  #pGoodsBList{
    gap: 15px;
    padding: 0 20px 20px;
  }
  #pGoodsBList .wrap { flex: 0 0 100%;}
}
/* 詳細頁 */
#pGoodsBView { overflow: hidden;}
#pGoodsBView .box { display: flex; overflow: hidden; gap: 20px;}
#pGoodsBView .box .img {flex: 0 0 35%; overflow: hidden;}
#pGoodsBView .box .img .lineout { flex: 0 0 250px; height: 60px; overflow: hidden;}
#pGoodsBView .box .img .lineout img{ width: 100%;}
#pGoodsBView .box .img .pic { position: relative; padding-bottom: 40px; width: 100%; aspect-ratio: 250/150; background: url(../images/p_goods2_pic-bg.gif) no-repeat bottom; overflow: hidden;}
#pGoodsBView .box .img .pic img{ width: 100%;height: 100%; }
#pGoodsBView .box .img .pic a { display: block; position: absolute; right: 0; bottom: 40px; width: 33px; height: 33px; text-indent: -9999px; background: url(../images/btn_zoom.gif) no-repeat 0 0; overflow: hidden;}
#pGoodsBView .box .info { flex: 0 0 calc(65% - 20px); display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; overflow: hidden;}
#pGoodsBView .box .info h4 { margin: 0; font-size: 18px; color: #000; line-height: 25px;}
#pGoodsBView .box .info a.btnCertifi { display: block; width: 65px; height: 25px;text-indent: -9999px; background: url(../images/btn_certifi.png) no-repeat 0 0; overflow: hidden;}
#pGoodsBView .box .info a.btnCertifi:hover { background-position: 0 -25px;}
#pGoodsBView .box .info .txt { flex-wrap: 0 0 100%; padding-top: 15px; width: 480px; overflow: hidden;}
#pGoodsBView .box:hover .img .pic a { background-position: 0 -33px;}
#pGoodsBView .box:hover .info h4 { color: #0093d0; text-decoration: underline;}
@media screen and (max-width: 767px) {
  #pGoodsBView .box{ flex-wrap: wrap; gap: 5px; margin-bottom: 40px;}
  #pGoodsBView .box .img .lineout{display: none;}
  #pGoodsBView .box .img .pic {padding-bottom: 10px; background-size: 100% 10px;}
  #pGoodsBView .box .img .pic a{ bottom: 10px;}
  #pGoodsBView .box .img {flex: 0 0 100%;}
  #pGoodsBView .box .info {flex: 0 0 100%; gap: 5px;}
}
/* 圖片彈出視窗 */
.mfp-close{color: #fff!important;background: #004489!important;opacity: 1!important;}
.mfp-ajax-holder .mfp-content{width: 770px!important; margin: 0 auto; max-width: 100%;}
#picWrap .flex-box { background-color: #fff; padding: 30px; position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 15px;  max-width: 100%; overflow: hidden;}
#picWrap .largeTi { width: 100%; font-size: 20px; color: #000; font-weight: bold; line-height: 18px; overflow: hidden;}
#picWrap .largeTi span { display: block; padding-top: 4px; font-size: 13px;} 
#picWrap .swiper-slide img{width: 100%;height: 100%;}
#picWrap .main-slider{ 
  flex: 0 0 calc(100% - 135px - 15px); width: calc(100% - 135px - 15px);
  .swiper-button-next,
  .swiper-button-prev{
    &::after{
      color: #fff;
      font-size: 20px;
    }
  }
  .name{
    position: absolute; bottom: 0; left: 0; padding: 7px 10px; width: 100%; font-size: 15px; color: #fff; background: url(../images/p_goods2_ti-bg.png) repeat; overflow: hidden;
  }
}
#picWrap .thumb-slider{
  flex: 0 0 135px; width: 135px; height: 370px;
  .swiper-slide{
    opacity: 0.6;
    &.swiper-slide-thumb-active{
      opacity: 1;
    }
  }
}
@media screen and (max-width: 991px) {
  #picWrap .largeTi{
    position: relative;
    left: 0;
    top: 0;
  }
  #picWrap .flex-box{
    width: 100%;
    gap: 10px;
  }
  #picWrap .main-slider{ 
    flex: 0 0 100%;
    width: 100%;
  }

  #picWrap .thumb-slider{
    flex: 0 0 100%;
    width: 100%;
    height: auto;
  }
}

/* ---- 最新消息 ---- */
.newsImg{ width: 200px; padding-bottom: 60px; background: #023466; box-shadow: 0 0 50px rgba(0,0,0,0.5);}
#newsList{ overflow: hidden;box-sizing: border-box;}
#newsList table.list{ width: 100%; padding: 0; border: 0; border-spacing: 0; border-collapse: collapse; margin: 20px auto; line-height: 1.6em;}
#newsList table.list tr{ border-bottom: 1px solid #efefef; transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease;}
#newsList table.list td{ height: 45px; overflow: hidden;}
#newsList table.list td.date{ padding-left: 20px; width: 15%; color: #0093d0; font-weight: bold; background: url(../images/news_aw.gif) 0 center no-repeat; overflow: hidden;}
#newsList table.list td.ti{ width: calc(100% - 15% - 40px); padding: 0 10px; }
#newsList table.list td.ti a{ color: #666; width: 100%; font-weight: bold; }
#newsList table.list td.btn{ width:40px; height: 40px; box-sizing: border-box; display: unset; padding: 0;}
#newsList table.list td.btn a.btnMore{ float: right; display: block; width: 40px; height: 40px; background: url(../images/btn_more.jpg) 0 0; overflow: hidden; text-indent: -9999px; border: 1px #efefef solid; transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease;}
#newsList table.list tr:hover { background: #fafbfc;}
#newsList table.list tr:hover td.date { background-position: 5px center;}
#newsList table.list tr:hover td.ti a { color: #000;}
#newsList table.list tr:hover a.btnMore,
#newsList table.list td.btn a.btnMore:hover{ background-position: 0 -40px;}
@media screen and (max-width: 991px) {
  .newsImg{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 0;
    background: url(../images/p_menu_ti-bg.gif) no-repeat 0 0;
    background-size: cover;
  }
}

@media screen and (max-width: 767px) {
  #newsList table.list td.date{padding-left: 15px; width: 90px;}
  #newsList table.list td.ti{ width: calc(100% - 90px);}
  #newsList table.list td.btn{display: none;}
  .newsImg{
    img{
      margin-left: -60px;
    }
  }
}
#newsView{ padding-bottom: 20px;}
#newsView table.list{ padding: 0; border: 0; border-spacing: 0; border-collapse: collapse; width: 100%; margin: 20px auto; line-height: 1.6em;}
#newsView table.list td{ vertical-align: top}
#newsView table.list td.date{ width: 95px; padding-right: 10px; font-size: 1.1em; font-weight: bold;}
#newsView table.list td.ti{ font-size: 1.3em; color: #0067aa;}
#newsView table.list td.btn{ width:40px; box-sizing: border-box; display: unset; padding: 0;}
#newsView a.btnBack{ float: right; display: block; width: 40px; height: 40px; margin: 0; background: url(../images/btn_back.jpg) 0 0; overflow: hidden; text-indent: -9999px; box-sizing: border-box; text-indent: -9999px; border: 1px #efefef solid; transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease;}
#newsView a.btnBack:hover{ background-position: 0 -40px;}
@media screen and (max-width: 767px) {
  #newsView table.list td.btn{display: none;}
}
/* ---- 聯絡我們 ---- */
.contacInfo img{ width: 100%; height: unset;};
#contactWrap { clear: both; color: #CCC; margin: 80px 0 25px; line-height: 2em; overflow: hidden} 
.contacInfo { width: 200px; padding-bottom: 40px; background: #023466; color: #999; box-shadow: 0 0 50px rgba(0,0,0,0.5);}
.contacInfo .ti { padding: 50px 10px 0; font-size: 1.2em; color: #CCC}
.contacInfo .enTi { padding: 0 10px; font-size: 12px; color: #666; line-height: 1.2em; font-style: italic;}
.contacInfo .info {padding: 10px; font-size: 0.9em; line-height: 20px; margin-bottom: 20px;}
.contacInfo .info .map { display: inline-block; width: 20px; height: 20px; margin-left: 5px; background: url(../images/icon_map.png) no-repeat; text-indent: -9999px;}
.contacInfo a.email { padding: 25px 10px 0; color: #7ecef4; background: url(../images/icon_mail.png) 10px 10px no-repeat;}
.contacInfo a.email:hover { text-decoration: underline;}
@media screen and (max-width: 991px) {
  #contactWrap{
    margin-top: 30px;
  }
  .contacInfo{
    width: 100%;
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 20px 20px 33%;
    .contactImg{
      position: absolute;
      flex: 0 0 20%;
      top: 0;
      left: 0;
      padding: 0;
      box-shadow: none;
      z-index: 10;
      overflow: hidden;
    }
    .ti ,
    .enTi{
      flex: 0 0 50%;
      margin: 0;
      padding: 0;
    }
    .info{
      flex: 0 0 50%;
      margin: 0;
      padding: 0;
    }
    a.email{
      padding:0 0 0 50px;
      background: url(../images/icon_mail.png) 0 4px no-repeat;
    }
    /* position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 0;
    background: url(../images/p_menu_ti-bg.gif) no-repeat 0 0;
    background-size: cover; */
  }
}
@media screen and (max-width: 767px) {
  #pMenuTi.contact{
    background: transparent;
  }
  #contactWrap{
    margin-top: 15px;
  }
  
  .contacInfo{
    position: relative;
    overflow: hidden;
    padding: 20px 10px 20px 45%;
    a.email,.info,.ti ,
    .enTi{
      flex: 0 0 100%;
      position: relative;
      z-index: 1;
    }
    .contactImg{
      width: 40%;
      bottom: 0;
      img{
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
/* Form Set. */
span.require { padding: 0 3px; color: #308fd2;}
p.mail { margin: 0 0 15px 53px; line-height: 30px; color: #b3c8d1;}
table.form { width: 100%; margin: 0 auto}
table.form th { color: #CCC;width: 16%; padding: 3px 5px;vertical-align: top; text-align: right; }
table.form td { width: 84%; padding: 3px 5px;}
table.form .inputBg { width: 100%}
table.form .inputBg.w60 { width: 62%;}
table.form .inputBg.w20 { width: 20%}
table.form textarea { width: 100%;}
table.form .img { margin-left: 5px; vertical-align: middle;}
table.form .btnReset,
table.form .btnSubmit { float: left; padding: 5px 10px; margin-right: 10px; margin-top: 20px; width: 100px; color: #fff; border: #898989 solid 1px; background: #333; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; overflow: hidden;}
table.form .btnReset:hover,
table.form .btnSubmit:hover { background-color: #004489; color: #fff;}

@media screen and (max-width: 767px) {
  table.form th { width: 24%;}
  table.form td { width: 76%;}
  p.mail {
    margin: 0 0 15px;
  }
}
/* ---- 系統資訊 ---- */
#errorWrap { margin-bottom: 20px; padding: 0 20px 20px; width: 960px; min-height: 225px; background: url(../images/p_content_bg3.gif) no-repeat left top #fff;}
a.btnHome { display: block; margin: 0 auto 20px; padding: 0 10px 0 35px; width: 50px; height: 25px; font-size: 15px; color: #004489; font-weight: bold; line-height: 25px; border: #004489 solid 1px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: url(../images/icon_home.png) no-repeat 15px 7px; overflow: hidden;}
a.btnHome:hover { color: #fff; background: url(../images/icon_home2.png) no-repeat 15px 7px #004489;}

/* 頁碼 */
#pageWrap { clear: both; padding-bottom: 20px; width: 800px; font-family: Arial, Helvetica, sans-serif, 新細明體, Pmingliu; font-size: 12px; overflow: hidden;}
#pageWrap .numbers { float: right; line-height: 22px;}
#pageWrap .numbers a { display: inline-block; margin-left: 1px; padding: 0 8px; font-size: 12px; color: #666; border: #d6d6d6 solid 1px; background-color: #efefef; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
#pageWrap .numbers a:hover, #pageWrap .numbers a.current { color: #fff; border: #898989 solid 1px; background-color: #898989;}

#pageWrap .btn { margin-right: 10px; width: 73px; float: left; line-height: 22px; overflow: hidden; padding: 0;}
#pageWrap .btnPrev a, #pageWrap .btnNext a, #pageWrap .noPrev, #pageWrap .noNext { font-size: 13px; display: block; padding: 0; width: 100%; color: #666; border: #898989 solid 1px; background-color: #efefef; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; overflow: hidden;}
#pageWrap .btn a:hover { color: #fff; border: #004489 solid 1px; background-color: #004489;}
#pageWrap .btn div { color: #ccc; border: #ccc solid 1px; background-color: #efefef;}

#pageWrap .btn span { display: inline-block; width: 5px; height: 9px; background: url(../images/p_page_aw.png) no-repeat 0 0; overflow: hidden;}
#pageWrap .btnPrev span { margin-right: 10px;}
#pageWrap .btnNext span { margin-left: 10px;}
#pageWrap .btnPrev a span { background-position: 0 0;}
#pageWrap .btnNext a span { background-position: -5px 0;}
#pageWrap .btnPrev a:hover span { background-position: 0 -9px;}
#pageWrap .btnNext a:hover span { background-position: -5px -9px;}
#pageWrap .noPrev span { background-position: 0 -18px;}
#pageWrap .noNext span { background-position: -5px -18px;}

a.btnBack { display: block; margin: 20px auto; padding-bottom: 2px; width: 62px; font-size: 15px; color: #141414; font-weight: bold; text-align: center; background: url(../images/line7.gif) repeat-x bottom; overflow: hidden;}
a.btnBack:hover { color: #0093d0; background: url(../images/line7-2.gif) repeat-x bottom;}
@media screen and (max-width: 767px) {
  #pageWrap {
    padding: 0 20px 20px;
  }
}

/* ---- 空白間格 ---- */
.space15, .space20, .space30 { clear: both; font-size: 0; overflow: hidden;}
.space15 { height: 15px;}
.space20 { height: 20px;}
.space30 { height: 30px;}

/*  ---- 表單 ---- */
.inputBg { padding: 0 5px; height: 24px; line-height: 24px; border: none; background-color: #b6b7b7;}
.textarea { padding: 5px; height: 100px; border: none; background-color: #b6b7b7;}
.dialog_title{ height: 32px;}
/* 防木馬