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

/* Google Fonts - Inter & Noto Sans TC */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+TC:wght@100..900&display=swap');

/* 針對滑鼠點擊等非鍵盤操作，移除預設的外框 */
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* 針對鍵盤導覽（Tab 鍵）操作，顯示自定義的高對比外框 */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* Css 無障礙 focus 控制
   - 滑鼠點擊不顯示外框
   - 鍵盤操作（Tab）才顯示 focus 樣式(可自定樣式)
*/
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* 為了避免 Bootstrap 設置的全局盒模型所帶來的影響，可以重置單個頁面元素或覆蓋整個區域的盒模型。 */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
a:focus, a:hover { color: #323333; text-decoration: none;}
html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
}
body {
  line-height: 26px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif, 'Noto Sans TC';
  overflow-x: hidden;
}
.noData,
.systemInfo {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0 15%;
  color: #070506;
}
.noData .fa{
  font-size: 1.5em;
  display: inline-block;
  color: #b4d2b7;
  margin-right: 10px;
}
.ulSet,
.ulSet > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 延遲載入loader */
.imgload span { width: 32px; height: 32px; background: url(../images/ajax-loader.gif) no-repeat 0 0; position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
/* 文字編輯器 */
.edit{ font-size: 14px; line-height: 2em; padding: 20px 0; margin-bottom: 50px;}
/*.edit h1 { font-size: 1.5rem; color: #db8989;}
.edit h2 { font-size: 1.2rem; color: #e2b669;}
.edit h3 { font-size: 1rem; color: #a6cfd0;}
.edit h4 { font-size: .9375rem; color: #b4d2b7;}*/
.edit .picBox{ width: calc(100%/2 - 14px); padding: 7px; float: left;}
.edit .picBox img{ width: 100%; max-width: 100%; height: auto!important;}
@media (max-width: 480px){
  .edit .picBox{ width: calc(100% - 14px);}
}
/* 共用容器 */
.pContent{
  width: 1300px;
}
.pContent .list {
  margin:0 0 10px;
}
@media (max-width: 1360px){
  .pContent{ width: 100%
  }
}

.reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container-fluid {
  max-width:1330px;
}
.gform input,
.gform select {
  height:34px;
  line-height: 34px;
}
.gform input,
.gform select,
.gform textarea {
  width:100%;
  padding:0 5px;
  outline:none;
  border:1px solid #a9a9a9;
  font-size: 1rem;
  border-radius: 0;
}
.gform ::-webkit-input-placeholder {
  color: #222;
}
.gform ::-moz-placeholder {
  color: #222;
}
.gform :-ms-input-placeholder {
  color: #222;
}
.gform :-moz-placeholder {
  color: #222;
}
.gform .form-name {
  width:90px;
  float:left;
  height:34px;
  line-height: 34px;
  font-size:1rem;
  color:#444;
}
.gform .form-content {
  width:calc(100% - 90px);
  float:left;
  font-size:1rem;
  color:#999;
}
.gform .form-name.w170 {
  width:170px;
}
.gform .form-content.w170 {
  width:calc(100% - 170px);
}
.btn {
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  padding:0 15px;
  padding:0;
  margin:0;
  height:34px;
  line-height: 34px;
}
@media screen and (max-width:991px) {
  .g-wrap {
    margin-top:65px !important;
  }
}
/*@header*/
.h1 {
  font-size: 0;
}
#header {
  text-align: center;
  padding: 30px 0 24px;
  z-index: 999;
  background:#fff;
  position:relative;
  font-size: 0;
}
#header .container-fluid {
  position:relative;
  z-index: 2;
  max-width: 1440px;
}
#header.scroll .container-fluid {
  height: 65px;
}
@media screen and (max-width:1199px)  {
  #header {
    padding: 0;
  }
  #header .container-fluid {
    z-index: auto;
    height: 65px;
  }
}
#header a {
  display:block;
  text-decoration: none;
}
#header .logo {
  margin: 64px 0 79px;
  display:inline-block;
  font-size: 0;
}
#header .logo .icon {
  background:url(../images/header_logo_icon.png) center center no-repeat;
  background-size: 100% auto;
  width:33px;
  height:43.5px;
  margin:0 auto 12px;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
#header .logo .text {
  width:152px;
  height:18px;
  margin:0 auto;
  font-size: 0;
}
#header .logo .text span {
  display:inline-block;
  height:18px;
  background:url(../images/header_logo_text.png);
  background-size:auto  100%;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
#header .logo .text span:nth-child(1) {
  width:17px;
  margin-right:6px;
  background-position:0 center;
  animation-delay: 0.2s;
}
#header .logo .text span:nth-child(2) {
  width:6px;
  margin-right:4px;
  background-position:-23px center;
  animation-delay: 0.3s;
}
#header .logo .text span:nth-child(3) {
  width:11px;
  margin-right:4px;
  background-position:-33px center;
  animation-delay: 0.4s;
}
#header .logo .text span:nth-child(4) {
  width:14px;
  margin-right:5px;
  background-position:-48px center;
  animation-delay: 0.5s;
}
#header .logo .text span:nth-child(5) {
  width:13px;
  margin-right:6px;
  background-position:-67px center;
  animation-delay: 0.6s;
}
#header .logo .text span:nth-child(6) {
  width:14px;
  margin-right:4px;
  background-position:-86px center;
  animation-delay: 0.7s;
}
#header .logo .text span:nth-child(7) {
  width:15px;
  margin-right:2px;
  background-position:-104px center;
  animation-delay: 0.8s;
}
#header .logo .text span:nth-child(8) {
  width:14px;
  margin-right:4px;
  background-position:-121px center;
  animation-delay: 0.9s;
}
#header .logo .text span:nth-child(9) {
  width:13px;
  background-position:-139px center;
  animation-delay: 1s;
}
#header .lev1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  line-height: 0;
  padding: 10px max(180px, 3.2vw) 0 0;
}
#header .lev1 > li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
#header .lev1 > li:hover > a {
  color:#323333;
  font-weight: bold;
}
#header .lev1 > li:hover > a span {
  /*border-bottom: #232323 solid 1px;*/
}
/* #header .lev1 > li:last-child {
  display:none;
} */
#header .lev1 > li .num {
  font-size:0.9375rem;
  width:auto;
}

#header .lev1 > li > a {
  color:#323333;
  position:relative;
  padding:0 15px 16px;
  font-size: 0.9375rem;
  letter-spacing: 3px;
  line-height: 26px;
  transition: color .35s;
}
#header .lev1 > li > a span {
  padding-bottom: 3px;
}
#header .lev1 > li > a:hover {
  color:#323333;
  font-weight: bold;
}
#header .lev1 > li > a:hover span {
  /*border-bottom: #232323 solid 1px;*/
}
#header .lev1 > li:hover > .submenu > li > a {
  color: #666;
}
#header .lev1 > li:hover > .submenu > li > a:hover {
  color: #323333;
  font-weight: 500;
}
#header .lev1 > li > a:before {
  /*content:'';*/
  background:url(../images/header_icon.png) no-repeat;
  background-size:auto 100%;
  width:30px;
  height:30px;
  display:inline-block;
  vertical-align: middle;
  position:absolute;
  top:50%;
  left:0;
  transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
}
#header .lev1 > li:nth-child(1) > a:before {
  background-position: 0 center;
}
#header .lev1 > li:nth-child(2) > a:before {
  background-position: -30px center;
}
#header .lev1 > li:nth-child(3) > a:before {
  background-position: -60px center;
}
#header .lev1 > li:nth-child(4) > a:before {
  background-position: -90px center;
}
#header .lev1 > li:nth-child(5) > a:before {
  background-position: -120px center;
}
#header .lev1 > li:nth-child(6) > a:before {
  background-position: -150px center;
}
#header .lev1 > li:nth-child(7) > a:before {
  background-position: -180px center;
}
#header .border {
  font-size: 0;
  line-height: 0;
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
}
#header .border i {
  display:inline-block;
}
#header .border i {
  width:calc(100%/8);
  height:5px;
}
#header .border i:first-child,
#header .border i:last-child {
  width:calc(100%/8/2);
}
#header .border i:first-child {
  background:#fbbebd;
}
#header .border i:nth-child(2) {
  background:#fce7a3;
}
#header .border i:nth-child(3) {
  background:#d1f0e2;
}
#header .border i:nth-child(4) {
  background:#b0e4e8;
}
#header .border i:nth-child(5) {
  background:#85bcdc;
}
#header .border i:nth-child(6) {
  background:#dbcbea;
}
#header .border i:nth-child(7) {
  background:#efd4be;
}
#header .border i:nth-child(8) {
  background:#cfd9b4;
}
#header .border i:nth-child(9) {
  background:#cfd9b4;
}
#header .border i:last-child {
  background:#eacbe4;
}
#header .search.btn {
  display:none;
}
#header .searchbar {
  position:absolute;
  top:40px;
  right:15px;
  font-size: 0;
}
#header .searchbar .word {
  display: inline-block;
  width: 250px;
  height: 48px;
  overflow: hidden;
  font-size: .875rem;
  margin-right: 5px;
}
#header .searchbar .word a {
  display: inline-block;
  color: #323333;
  padding: 5px 3px;
}
#header .searchbar .word a:hover {
  color: #db7b2e;
}
#header .searchbar form {
  position:relative;
  display: inline-block;
  vertical-align: top;
}
#header .searchbar input {
  background:#dfe3e6;
  max-width: 150px;
  border-radius: 35px;
  border-color:transparent;
  font-size: 0.875rem;
  padding:0 30px 0 15px;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  vertical-align: middle;
  color:#fff;
}
#header .searchbar .btn {
  width:30px;
  height:34px;
  background:url(../images/search_icon1.png) right center no-repeat;
  background-size: 24.5px 16.5px;
  position:absolute;
  top:0;
  right:0;
  outline:none;
  border-radius: 0;
}
#header .searchbar ::-webkit-input-placeholder {
  color: #fff !important;
}
#header .searchbar ::-moz-placeholder {
  color: #fff !important;
}
#header .searchbar :-ms-input-placeholder {
  color: #fff !important;
}
#header .searchbar :-moz-placeholder {
  color: #fff !important;
}
#header .searchbar input:focus {
  max-width: 210px;
  background-color:#A1A1A6;
}
#header.scroll {
  position:fixed;
  width:100%;
  top:0;
  left:0;
  padding: 0;
  height:65px;
}
#header.scroll .logo {
  vertical-align: middle;
  position:absolute;
  top: 50%;
  left:15px;
  margin:0;
  transform: translateY(-50%);
}
#header.scroll .logo .icon {
  margin:0 15px 0 0;
  display:inline-block;
  vertical-align: middle;
  width: 20px;
}
#header.scroll .logo .text {
  display:inline-block;
  vertical-align: middle;
}
#header.scroll .lev1 {
  display:flex;
  gap: 0;
  padding: 21px 0 0;
  vertical-align: middle;
  float: left;
  gap: 0 10px;
  margin-left: max(180px,14vw);
}
#header.scroll .lev1 > li {
  /* 無間距，統一由 gap 控制 */
}
#header.scroll .border i {
  height:2px;
}
#header.scroll .searchbar {
  top: 50%;
  transform: translateY(-50%);
}
#header.scroll .searchbar input,
#header.scroll .searchbar input:focus  {
  max-width:150px;
}
#header .hamburger {
  position:absolute;
  top:-4px;
  right:15px;
  width:34px;
  height:34px;
  padding:9px 0;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  z-index: 2;
  display:none;
}
#header .hamburger span {
  width:25px;
  height:2px;
  background:#000;
  margin:0 auto 5px;
  display:block;
}
#header .hamburger span:last-child {
  margin:0 auto;
}

@media screen and (max-width:1680px) {
  #header.scroll .lev1 {
    margin-left: max(180px, 19.5vw);
  }
}
@media screen and (max-width:1440px) {
  #header.scroll .lev1 {
    gap: 0;
    margin-left: max(180px, 17.5vw);
  }
}
@media screen and (max-width:1299px) {
  #header .lev1 {
    gap: 0 max(30px, 3.2vw);
  }
  #header.scroll .lev1 {
    margin-left: max(170px,14.5vw);
  }
  #header.scroll .lev1 > li {
    gap: 25px !important;
  }
}

/*lang*/
#header .lang {
  position: absolute;
  right: 24px;
  top: 170px;
  line-height: 19px; text-align: left;
  font-size: .9375rem; color: #222;
  padding: 0 20px;
  cursor: pointer; z-index: 15;
  font-weight: bold;
}
#header .lang .lang-toggle { position: relative; }
#header .lang .lang-toggle:after {
  /*content: ''; position: absolute; border-width: 6px 4px 7px 4px; border-color: #5d6883 transparent transparent transparent; border-style: solid; top: 7px; right: -11px;*/
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  top: 2px; right: -10px;
  border-bottom: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg);
}
#header .lang .lang-toggle img { vertical-align: text-bottom; float: left; width: 28px; padding: 2px; }
#header .lang .nowLang {
  float: left;
  width: 70px;
  text-align: center;
}
#header .lang ul { display: none; background: #fff; width: 130px; position: absolute; top:30px; left: 7%; margin-left: -1px; }
#header .lang ul> li { border-top: 1px solid #e7e7e7; padding: 0 10px; }
#header .lang ul> li> a { position: relative; color: #a0a0a0; line-height: 1rem; display: block; line-height: 2.5rem; }
#header .lang ul> li> a img {
  vertical-align: text-bottom;
  float: left;
  width: 24px;
  margin: 14px 3px;
}
#header.scroll .lang {
  top: 50%;
  right: 175px;
  transform: translateY(-50%);
}

.inquiry-btn {
  position: relative;
}
.inquiry-btn > a i {
  display: inline-block;
  margin: -5px 2px 0 0;
  width: 18px;
  height: 18px;
  font-size: 0;
  vertical-align: middle;
  background: url(../images/icon_bag.svg) no-repeat 0 0;
  background-size: cover;
}
.inquiry-btn .inquiry-wrap {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 280px;
  background: rgba(247, 247, 247, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: -2px 2px 10px rgba(0,0,0,0.15);
  transform: translateX(-50%);
}

.inquiry-btn .box-wrap {
  margin-bottom: 15px;
  padding: 0 15px;
  max-height: 200px;
  overflow-y: auto;
  background: transparent;
}

.inquiry-btn .box {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 0;
  border-bottom: 1px solid #d0d0d0;
  position: relative;
  background: transparent;
}

.inquiry-btn .left {
  width: 65px;
  height: 65px;
}

.inquiry-btn .right {
  flex: 1;
  padding: 0 16px 0 10px;
  font-size: 14px;
  color: #666;
  text-align: left;
  text-decoration: none;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.inquiry-btn .box:hover .right {
  color: #323333;
}

.inquiry-btn .close.btn {
  position: absolute;
  width: 15px;
  height: 15px;
  top: 10px;
  right: 0;
  opacity: 1;
  cursor: pointer;
  z-index: 10;
}

.inquiry-btn .close.btn:before,
.inquiry-btn .close.btn:after {
  content: '';
  width: 15px;
  height: 2px;
  background: #bbb;
  position: absolute;
  top: 50%;
  left: 0;
}

.inquiry-btn .close.btn:before {
  transform: rotate(45deg);
}

.inquiry-btn .close.btn:after {
  transform: rotate(-45deg);
}

.inquiry-btn .inquiry.btn {
  background: #323333;
  color: #fff;
  border-radius: 20px;
  margin: 0 auto 20px;
  display: block;
  max-width: 160px;
  text-align: center;
  font-size: 14px;
  /* letter-spacing: 3px; */
  padding: 0 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  bottom: 0;
}

.inquiry-btn .inquiry.btn:before {
  display: none;
}

.inquiry-btn .inquiry.btn:hover {
  background: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

@media screen and (min-width:1200px) {
  .inquiry-btn:hover .inquiry-wrap {
    display: flex;
  }
}

@media screen and (max-width:1199px) {
  #header .lang,
  #header.scroll .lang {
    top: 50%;
    right: 80px;
    transform: translateY(-50%);
  }

  .inquiry-btn .inquiry-wrap {
    display: none;
  }
}

/* @media screen and (min-width:992px) {
  #header .lev1 {
    animation-name: fadeInDown;
    animation-delay: 1.1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
} */
/* @media screen and (max-width:1099px) {
  #header.scroll .lev1 > li {
    margin:0 10px;
  }
} */
@media screen and (max-width:1199px) {
  #header .hamburger {
    display:block;
    top: 50%;
    transform: translateY(-50%);
  }
  #header {
    position:fixed;
    width:100%;
    top:0;
    left:0;
    height:65px;
    text-align: left;
  }
  #header:before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    background:#fff;
    width:100%;
    height:100%;
  }
  #header .logo {
    vertical-align: middle;
    position:absolute;
    top:50%;
    left:15px;
    margin:0;
    transform: translateY(-50%);
  }
  #header .logo .icon,
  #header.scroll .logo .icon {
    display:inline-block;
    margin:0 10px 0 0;
    vertical-align: middle;
  }
  #header .logo .text {
    display:inline-block;
    vertical-align: middle;
  }
  #header .lev1,
  #header.scroll .lev1 {
    position:fixed;
    top:65px;
    right:0;
    width:100%;
    height:auto;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    padding:35px 0;
    pointer-events: none;
    background:#fff;
    display:none;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
  }
  #header .lev1 > li {
    display:block;
    padding:0 35px 0 25px;
    margin:0;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  /* #header .lev1 > li:last-child {
    border:none;
  } */
  #header .lev1 > li:nth-child(2) {
    animation-delay: 0.1s;
  }
  #header .lev1 > li:nth-child(3) {
    animation-delay: 0.2s;
  }
  #header .lev1 > li:nth-child(4) {
    animation-delay: 0.3s;
  }
  #header .lev1 > li:nth-child(5) {
    animation-delay: 0.4s;
  }
  #header .lev1 > li:nth-child(6) {
    animation-delay: 0.5s;
  }
  #header .lev1 > li:nth-child(7) {
    animation-delay: 0.6s;
  }
  #header .lev1 > li > a {
    line-height: 55px;
    padding:0;
    font-size: 1rem;
    font-weight: normal;
  }
  #header .lev1 > li > a:before {
    position:static;
    transform: translate(0,0);
    -ms-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -webkit-transform: translate(0,0);
    margin:0 10px 0 0;
  }
  #header.opend .lev1,
  #header.opend.scroll .lev1 {
    pointer-events: auto;
    animation-name: fadeIn;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display:block;
  }
  #header .search.btn {
    display:block;
    width:34px;
    height:34px;
    position:absolute;
    top:50%;
    right:55px;
    border-radius: 50%;
    transform: translateY(-50%);
  }
  #header .search.btn:before {
    content: '';
    width: 1px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    /*background: #000;*/
  }
  #header .search.btn:after {
    content:"\f002";
    font-family : FontAwesome;
    color:#000;
    font-size:1.125rem;
    font-weight: 300;
  }
  #header .searchbar .word {
    height: auto;
    line-height: 18px;
  }
  #header .searchbar .word a {
    padding: 8px 3px;
  }
  #header .searchbar,
  #header.scroll .searchbar {
    top:65px;
    right:0;
    text-align: right;
    background:#fff;
    padding:15px;
    -webkit-transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -ms-transform:translateY(-100%);
    -o-transform:translateY(-100%);
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    z-index: -1;
    width:100%;
    line-height: 16px;
  }
  #header .searchbar input,
  #header .searchbar input:focus,
  #header.scroll .searchbar input,
  #header.scroll .searchbar input:focus {
    max-width:100%;
    border-radius: 0;
    background-color: #A1A1A6;
  }
  #header .searchbar.opend,
  #header.scroll .searchbar.opend {
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
  }
  #header.opend .hamburger {
    transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) rotate(90deg);
  }
}
@media screen and (max-width:480px) {
  #header .logo .icon {
    width:23px;
    height:31px;
  }
  #header .logo .text {
    width:132px;
    height:16px;
  }
  #header .logo .text span {
    height:16px;
  }
  #header .logo .text span:nth-child(1) {
    width:14px;
    margin-right:5px;
    background-position:0 center;
  }
  #header .logo .text span:nth-child(2) {
    width:6px;
    margin-right:3px;
    background-position:-19px center;
  }
  #header .logo .text span:nth-child(3) {
    width:12px;
    margin-right:4px;
    background-position:-28px center;
  }
  #header .logo .text span:nth-child(4) {
    width:13px;
    margin-right:3px;
    background-position:-43px center;
  }
  #header .logo .text span:nth-child(5) {
    width:12px;
    margin-right:5px;
    background-position:-59px center;
  }
  #header .logo .text span:nth-child(6) {
    width:12px;
    margin-right:3px;
    background-position:-76px center;
  }
  #header .logo .text span:nth-child(7) {
    width:13px;
    margin-right:2px;
    background-position:-92px center;
  }
  #header .logo .text span:nth-child(8) {
    width:12px;
    margin-right:2px;
    background-position:-107px center;
  }
  #header .logo .text span:nth-child(9) {
    width:11px;
    background-position:-124px center;
  }
  #header .lev1,
  #header.scroll .lev1 {
    height:100vh;
  }
  #header .lev1 > li:last-child {
    display:block;
  }
}

#sidebar {
  position:fixed;
  top:260px;
  right:0;
  z-index: 998;
  right: -278px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-size: 0;
}

.mCSB_inside>.mCSB_container {
  margin-right:25px;
}
.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #5da8ad;
}
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
}
.inquiry.btn {
  background:#323333;
  color:#fff;
  border-radius: 35px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  margin:0 auto;
  display:block;
  max-width: 140px;
}
.inquiry.btn:before {
  content:'';
  width:18px;
  height:17.5px;
  background:url(../images/inquiry_icon.png) center center no-repeat transparent;
  background-size:100% auto;
  display:inline-block;
  vertical-align: middle;
  margin:0 10px 0 0;
}
.inquiry.btn:hover {
  background: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

@media screen and (min-width: 992px) {
  #sidebar:hover {
    right: 0;
  }
}

@media screen and (max-width: 991px) {
  #sidebar {
    right: -280px;
  }
  #sidebar.opend {
    right: 0;
  }
}

@media screen and (max-width: 480px) {
  #sidebar {
    top: 120px;
    right: -260px;
  }
  #sidebar .click.btn {
    left: -50px;
    width: 50px;
    height: 50px;
  }
  #sidebar .click.btn:before {
    width: 24px;
    height: 24px;
  }
  #sidebar .wrap {
    width: 260px;
  }
  #sidebar .box-wrap {
    max-height: 200px;
  }
}

@media screen and (max-width:1199px) {
  #sidebar {
    top: 120px;
    right: -280px;
  }
  #sidebar .click.btn {
    left: -50px;
    width: 50px;
    height: 50px;
  }
  #sidebar .click.btn:before {
    width: 24px;
    height: 24px;
  }
  #sidebar .wrap {
    width: 280px;
  }
  #sidebar .box-wrap {
    max-height: 257px;
  }
  #sidebar .right {
    padding: 0 20px 0 10px;
  }
}
/*@footer*/
#footer {
  background:#323333;
  font-size: 0;
  color:#dfe3e6;
  padding:18px 0;
}
#footer .container-fluid.line {
  border-top: 1px solid #a1a1a6;
  padding-top: 15px;
}
#footer .container-fluid.line a {
  color:#dfe3e6;
}
#footer .container-fluid > span {
  display:inline-block;
  margin:0 20px 0 0;
  padding:0 20px 0 0;
  position:relative;
  font-size: 0.875rem;
  vertical-align: middle;
}
#footer .container-fluid > span:before {
  content:'';
  position:absolute;
  width:1px;
  height:9px;
  background:#bce5e8;
  right:0;
  top:50%;
  transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
}
#footer .goods-list a {
  display:inline-block;
  font-size: 0.875rem;
  margin:0 10px 0 -10px;
  vertical-align: middle;
}
#footer .item {
  float: left;
  width: 14.285%;
  text-align: left;
  margin-bottom: 15px;
}
#footer .goods-list .title a {
  color: #dcdddd;
}
#footer .goods-list .title a:hover {
  color: #666;
  text-decoration: none;
}
#footer .goods-list li a {
  position: relative;
  color: #dfe3e6;
  padding-left: 15px;
  text-decoration: none;
}
#footer .goods-list li.title a {
  padding-left: 0;
}
#footer .goods-list li a:before {
  content:'';
  position:absolute;
  width: 3px;
  height: 3px;
  top: 8px;
  left: 5px;
  background: url(../images/icon_footer.png) no-repeat;
}
#footer .goods-list li.title a:before {
  background: none;
}
#footer .goods-list li a:hover {
  color: #fff;
}
#footer .list {
  display:inline-block;
  font-size: 0.875rem;
  margin:0 10px 0 -10px;
  vertical-align: middle;
}
#footer .list li {
  display: inline-flex;
  align-items: flex-start;
  margin:0 10px;
  position:relative;
}
#footer .list li:before {
  content:'';
  width:20px;
  height:20px;
  background:url(../images/footer_icon.png)no-repeat;
  background-size: auto 100%;
  display:inline-block;
  vertical-align: middle;
  margin:3px 5px 0 0;
  flex-shrink: 0;
}
#footer .list li:nth-child(1):before {
  background-position:0 center;
}
#footer .list li:nth-child(2):before {
  background-position:-20px center;
}
#footer .list li:nth-child(3):before {
  background-position:-40px center;
}
#footer .list li:nth-child(4):before {
  background-position:-60px center;
}
#footer .list li:nth-child(5):before {
  display:none;
}
#footer .list li a {
  display:inline-block;
  border-radius: 4px;
  vertical-align: middle;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
#footer .list li.w32 a {
  width:32px;
  height:32px;
  margin-left:20px;
}
#footer .list li .line {
  background:url(../images/line_icon.png) center 6px no-repeat #01c302;
  background-size:20px 46px;
}
#footer .list li .line:hover { background-color:#02a102;}
#footer .list li .qrcode{ position: absolute; display: none; right: 0; bottom: 40px; width: 200px; height: 200px;}
#footer .list li .qrcode>img{width: 100%;}
#footer .list li .line:hover+ .qrcode{  display: block; }
#footer .list li .site {
  background:url(../images/sitemap_icon.png) center center no-repeat #A1A1A6;
  background-size:20px 18px;
}
#footer .list li .site:hover {
  background-color:#666;
}
#footer .grnet {
  font-size: 0.815rem;
  display:inline-block;
  color:#b6e2e3;
  text-decoration: none;
  float:right;
}
#footer .grnet:hover {
  color:#277176;
}
#footer .grnet:hover .line {
  background:#277176;
}
#footer .grnet .line {
  width:1px;
  height:9px;
  background:#fff;
  display:inline-block;
  margin:0 7px;
}

@media screen and (max-width:1330px) {
  #footer {
    text-align: center;
  }
  #footer .list {
    margin:0 10px 0 -5px;
  }
  #footer .list li {
    margin:0 5px;
  }
  #footer .list li a {
    margin-left: 10px;
  }
  #footer .grnet {
    float:none;
    display:block;
  }
}
@media screen and (max-width:1199px) {
  #footer {
    padding:15px 0;
  }
  #footer .container-fluid > span {
    display:block;
    margin:0;
    padding:0;
  }
  #footer .container-fluid > span:before {
    display:none;
  }
  #footer .item {
    display: none;
  }
  #footer .container-fluid.line {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
}
@media screen and (max-width:767px) {
  #footer {
    line-height: 30px;
    text-align: left;
  }
  #footer .list li .qrcode{ display: none; }
}

.socialmedia {
  position: fixed;
  z-index: 998;
  right: 20px;
  bottom: 30px;
  mix-blend-mode: difference;
}
.socialmedia .list li {
  padding-bottom: 2px;
}
.socialmedia .list li:not(:last-child) {
  display: none;
}
.socialmedia a {
  display: block;
  position: relative;
  width: 39px;
  height: 39px;
  font-size: 0;
  border-radius: 100%;
  background-color: #050505;
  transition: background-color .35s;
}
.socialmedia i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 37px;
  height: 37px;
  mix-blend-mode: difference;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  transform: translate(-50%, -50%);
}
.socialmedia .gotop {
  padding-bottom: 2px;
}
.socialmedia .gotop i {
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='80px' height='80px' viewBox='0 0 80 80' enable-background='new 0 0 80 80' xml:space='preserve'%3E%3Cg opacity='0.79'%3E%3Cg%3E%3Cdefs%3E%3Crect id='SVGID_1_' x='10.881' y='22.001' width='58.619' height='38.896'/%3E%3C/defs%3E%3CclipPath id='SVGID_2_'%3E%3Cuse xlink:href='%23SVGID_1_' overflow='visible'/%3E%3C/clipPath%3E%3Cpolygon clip-path='url(%23SVGID_2_)' fill='%23ffffff' points='14.552,60.616 10.88,56.302 40.062,22.002 43.734,26.316 '/%3E%3Cpolygon clip-path='url(%23SVGID_2_)' fill='%23ffffff' points='65.827,60.897 37.524,27.629 41.194,23.313 69.5,56.583 '/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.socialmedia .mail i {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='圖層_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='80px' height='80px' viewBox='0 0 80 80' enable-background='new 0 0 80 80' xml:space='preserve'%3E%3Cg opacity='0.79'%3E%3Cg%3E%3Cdefs%3E%3Crect id='SVGID_1_' x='10.204' y='18' width='59.593' height='46.246'/%3E%3C/defs%3E%3CclipPath id='SVGID_2_'%3E%3Cuse xlink:href='%23SVGID_1_' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23SVGID_2_)' fill='%23ffffff' d='M68.131,22.308l0.13-0.096l-1.249-1.275C65.158,19.043,62.688,18,60.054,18 H19.947c-0.294,0-0.59,0.013-0.881,0.04c-2.047,0.188-3.991,1.023-5.549,2.397c-0.001,0.001-0.001,0.001-0.001,0.001L12.1,21.686 l0.146,0.11c-1.312,1.695-2.042,3.782-2.042,5.947v26.762c0,2.195,0.721,4.274,2.088,6.014c1.869,2.371,4.66,3.728,7.655,3.728 h40.107c2.447,0,4.789-0.918,6.599-2.587c2-1.842,3.146-4.45,3.146-7.154V27.743C69.799,25.784,69.214,23.907,68.131,22.308 M66.693,27.743v26.762c0,1.277-0.379,2.526-1.068,3.593L48.326,36.914l17.305-12.761C66.322,25.216,66.693,26.455,66.693,27.743 M60.054,21.104c0.135,0,0.266,0.004,0.396,0.012c0.039,0.003,0.078,0.006,0.118,0.009c0.094,0.007,0.188,0.016,0.283,0.028 c0.041,0.004,0.082,0.009,0.123,0.015c0.108,0.016,0.218,0.033,0.324,0.054c0.021,0.003,0.041,0.006,0.062,0.01 c0.126,0.025,0.252,0.054,0.374,0.087c0.037,0.009,0.07,0.02,0.105,0.03c0.091,0.026,0.183,0.053,0.275,0.083 c0.038,0.013,0.077,0.027,0.116,0.04c0.096,0.033,0.19,0.069,0.282,0.106c0.028,0.011,0.056,0.021,0.084,0.031 c0.116,0.05,0.233,0.104,0.351,0.161c0.026,0.012,0.053,0.026,0.077,0.04c0.09,0.044,0.18,0.093,0.268,0.142 c0.018,0.01,0.034,0.02,0.05,0.029l-19.98,14.736c-1.968,1.45-4.699,1.425-6.639-0.063L17.218,21.699 c0.017-0.007,0.033-0.016,0.049-0.023c0.064-0.029,0.13-0.056,0.198-0.083c0.035-0.015,0.071-0.03,0.106-0.043 c0.079-0.031,0.159-0.06,0.239-0.086c0.022-0.008,0.045-0.017,0.068-0.024c0.104-0.035,0.208-0.066,0.313-0.096 c0.028-0.007,0.055-0.014,0.082-0.021c0.08-0.021,0.157-0.04,0.237-0.059c0.038-0.007,0.076-0.015,0.116-0.024 c0.068-0.013,0.137-0.026,0.208-0.039c0.041-0.007,0.083-0.013,0.124-0.019c0.069-0.011,0.138-0.021,0.207-0.029 c0.04-0.004,0.083-0.011,0.123-0.015c0.075-0.007,0.148-0.012,0.223-0.018c0.036-0.001,0.072-0.005,0.106-0.008 c0.111-0.004,0.22-0.007,0.331-0.007H60.054z M31.5,36.561L13.76,56.908c-0.298-0.758-0.453-1.567-0.453-2.403V27.743 c0-1.477,0.5-2.902,1.4-4.058L31.5,36.561z M19.947,61.145c-1.614,0-3.142-0.585-4.341-1.629l18.363-21.063l0.865,0.667 c1.54,1.178,3.394,1.769,5.252,1.769c1.8,0,3.604-0.557,5.119-1.673l0.62-0.459l17.548,21.487c-1.003,0.585-2.144,0.9-3.318,0.9 H19.947z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.socialmedia .tel i {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='圖層_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='80px' height='80px' viewBox='0 0 80 80' enable-background='new 0 0 80 80' xml:space='preserve'%3E%3Cg opacity='0.79'%3E%3Cg%3E%3Cdefs%3E%3Crect id='SVGID_1_' x='12.235' y='13' width='55.529' height='54'/%3E%3C/defs%3E%3CclipPath id='SVGID_2_'%3E%3Cuse xlink:href='%23SVGID_1_' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23SVGID_2_)' fill='%23ffffff' d='M50.481,67c-2.639,0-5.196-0.452-7.757-1.356 c-2.913-1.029-5.703-2.557-8.782-4.805c-2.027-1.481-4.054-3.188-6.204-5.224c-4.303-4.078-7.813-8.161-10.718-12.473 c-1.823-2.701-3.111-5.229-3.941-7.73c-1.18-3.55-1.122-7.381,0.17-11.076c1.284-3.659,3.688-6.92,6.959-9.429 c2.754-2.113,4.915-2.093,6.246-1.704c1.49,0.441,2.424,1.514,2.925,2.088c2.599,2.973,4.824,6.209,6.613,9.618 c0.346,0.654,1.064,2.02,0.517,3.561c-0.489,1.388-1.72,2.167-2.862,2.746c-1.077,0.548-2.189,1.06-3.313,1.525 c-0.478,0.196-1.07,0.441-1.201,0.597c-0.044,0.081-0.011,0.432,0.183,0.818c0.628,1.228,1.471,2.574,2.5,3.997 c2.174,2.999,4.785,5.875,7.757,8.545c1.948,1.756,3.705,3.092,5.366,4.089c0.439,0.266,0.929,0.37,1.093,0.304 c0.159-0.065,0.458-0.38,0.675-0.609l2.174-2.295c0.741-0.783,2.122-2.236,4.212-2.381c1.618-0.114,2.862,0.575,3.97,1.339 c3.158,2.169,6.116,4.591,8.796,7.2c0.817,0.794,1.357,1.573,1.654,2.378c0.567,1.57,0.168,3.208-1.12,4.607 c-0.819,0.894-1.798,1.529-2.562,1.979c-1.068,0.738-2.451,1.387-4.038,1.88c-0.984,0.382-3.084,1.125-5.073,1.439l-0.264,0.044 C53.107,66.89,51.785,67,50.481,67 M53.769,62.599l0.222,1.262l-0.209-1.262l0.012-0.002c1.246-0.166,2.846-0.619,4.542-1.275 c1.603-0.5,2.545-1.038,3.08-1.408c0.68-0.406,1.289-0.799,1.729-1.276c0.318-0.346,0.283-0.451,0.262-0.507 c-0.045-0.12-0.193-0.405-0.671-0.87c-2.504-2.434-5.276-4.708-8.25-6.75c-0.211-0.146-0.852-0.583-1.127-0.583H53.34 c-0.325,0.021-1.024,0.758-1.256,1.001l-2.173,2.295c-0.502,0.528-1.168,1.23-2.205,1.654c-1.543,0.642-3.459,0.418-5.128-0.586 c-1.875-1.125-3.843-2.616-6.01-4.564c-3.19-2.864-5.995-5.955-8.337-9.191c-1.145-1.578-2.094-3.101-2.822-4.522 c-0.965-1.897-0.826-3.859,0.371-5.254c0.821-0.955,1.915-1.406,2.792-1.767c1.098-0.453,2.103-0.918,3.077-1.41 c0.378-0.192,0.584-0.323,0.696-0.404c-0.064-0.028-0.135-0.179-0.238-0.375c-1.65-3.138-3.696-6.113-6.08-8.835 c-0.223-0.259-0.632-0.729-0.923-0.816c-0.305-0.088-1.077,0.095-2.202,0.956c-5.241,4.019-7.525,10.453-5.682,16.002 c0.71,2.145,1.844,4.354,3.461,6.755c2.742,4.07,6.061,7.926,10.143,11.795c2.021,1.915,3.917,3.513,5.793,4.88 c2.73,1.997,5.171,3.339,7.68,4.229C47.394,62.864,50.494,63.134,53.769,62.599'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.socialmedia .line i {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='圖層_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='80px' height='80px' viewBox='0 0 80 80' enable-background='new 0 0 80 80' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23ffffff' d='M39.999,11.444c-16.477,0-29.881,11.028-29.881,24.583c0,12.141,10.533,22.344,24.902,24.233 c0.84,0.182,1.232,0.418,1.214,0.316c0.007,0.014,0.153,0.396-0.01,1.609l-0.406,2.44c-0.113,0.634-0.414,2.321,0.881,3.354 c0.541,0.431,1.161,0.576,1.753,0.576c0.953,0,1.839-0.373,2.23-0.54c3.303-1.39,16.736-9.881,22.709-16.761 c4.367-4.785,6.491-9.769,6.491-15.229C69.883,22.472,56.479,11.444,39.999,11.444z M60.758,48.91 c-5.536,6.378-18.264,14.482-21.386,15.833l0.336-2.039c0.204-1.494,0.139-2.581-0.199-3.439c-0.482-1.191-1.743-2.014-3.884-2.476 c-12.738-1.681-21.982-10.413-21.982-20.763c0-11.612,11.824-21.057,26.355-21.057c14.533,0,26.357,9.445,26.357,21.057 C66.356,40.629,64.587,44.712,60.758,48.91z'/%3E%3Cpath fill='%23ffffff' d='M34.083,30.443h-1.972c-0.303,0-0.549,0.246-0.549,0.548v12.25c0,0.303,0.246,0.548,0.549,0.548h1.972 c0.302,0,0.547-0.245,0.547-0.548v-12.25C34.631,30.688,34.385,30.443,34.083,30.443z'/%3E%3Cpath fill='%23ffffff' d='M47.66,30.443h-1.973c-0.303,0-0.547,0.246-0.547,0.548v7.278l-5.616-7.583 c-0.014-0.019-0.028-0.038-0.043-0.055c-0.001-0.001-0.002-0.002-0.004-0.004c-0.01-0.012-0.021-0.022-0.032-0.033 c-0.004-0.004-0.006-0.007-0.01-0.01c-0.01-0.009-0.019-0.017-0.029-0.025c-0.005-0.004-0.01-0.006-0.015-0.01 c-0.009-0.007-0.019-0.013-0.028-0.019c-0.005-0.004-0.01-0.006-0.016-0.01c-0.01-0.005-0.02-0.011-0.029-0.017 c-0.005-0.002-0.012-0.005-0.017-0.008c-0.011-0.005-0.02-0.009-0.032-0.013c-0.006-0.003-0.011-0.006-0.018-0.007 c-0.011-0.004-0.021-0.008-0.032-0.01c-0.006-0.001-0.014-0.003-0.02-0.005c-0.01-0.002-0.02-0.004-0.031-0.006 c-0.008-0.002-0.016-0.003-0.022-0.003c-0.009-0.002-0.021-0.002-0.03-0.004c-0.009-0.001-0.019-0.001-0.028-0.001 c-0.006,0-0.013-0.001-0.02-0.001h-1.972c-0.302,0-0.547,0.246-0.547,0.548v12.25c0,0.303,0.246,0.548,0.547,0.548h1.972 c0.303,0,0.549-0.245,0.549-0.548v-7.276l5.622,7.592c0.039,0.055,0.085,0.101,0.14,0.136c0,0.001,0.003,0.003,0.005,0.005 c0.011,0.007,0.022,0.014,0.034,0.021c0.006,0.002,0.011,0.005,0.016,0.008c0.008,0.002,0.018,0.008,0.026,0.013 c0.008,0.003,0.019,0.005,0.026,0.011c0.005,0.002,0.012,0.004,0.017,0.006c0.012,0.004,0.024,0.008,0.038,0.012 c0.002,0,0.005,0.002,0.008,0.002c0.044,0.012,0.091,0.02,0.14,0.02h1.973c0.302,0,0.547-0.245,0.547-0.548v-12.25 C48.207,30.688,47.962,30.443,47.66,30.443z'/%3E%3Cpath fill='%23ffffff' d='M29.329,40.72H23.97v-9.729c0-0.304-0.246-0.547-0.547-0.547h-1.974c-0.301,0-0.547,0.244-0.547,0.547 v12.25c0,0.146,0.059,0.28,0.153,0.378c0.001,0.003,0.004,0.007,0.006,0.01c0.003,0.002,0.006,0.005,0.009,0.008 c0.098,0.092,0.232,0.152,0.378,0.152h7.88c0.302,0,0.547-0.245,0.547-0.548v-1.974C29.876,40.966,29.631,40.72,29.329,40.72z'/%3E%3Cpath fill='%23ffffff' d='M58.552,30.443h-7.88c-0.149,0-0.282,0.059-0.381,0.155c0,0.001-0.003,0.004-0.007,0.005 c-0.003,0.004-0.005,0.006-0.008,0.009c-0.093,0.099-0.152,0.231-0.152,0.378v12.25c0,0.148,0.06,0.281,0.153,0.378 c0.002,0.003,0.004,0.006,0.007,0.008c0.004,0.003,0.007,0.006,0.009,0.01c0.099,0.092,0.232,0.152,0.379,0.152h7.88 c0.303,0,0.548-0.246,0.548-0.548v-1.973c0-0.303-0.245-0.549-0.548-0.549h-5.358v-2.07h5.358c0.303,0,0.548-0.245,0.548-0.548 V36.13c0-0.302-0.245-0.549-0.548-0.549h-5.358V33.51h5.358c0.303,0,0.548-0.245,0.548-0.546v-1.973 C59.1,30.688,58.854,30.443,58.552,30.443z'/%3E%3C/g%3E%3C/svg%3E");
}
.socialmedia .wat i {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='圖層_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='80px' height='80px' viewBox='0 0 80 80' enable-background='new 0 0 80 80' xml:space='preserve'%3E%3Cg%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23ffffff' d='M60.647,19.259c-5.378-5.383-12.538-8.352-20.158-8.354 c-15.704,0-28.487,12.778-28.496,28.484c0,4.75,1.187,9.429,3.437,13.579l-4.417,16.128l16.49-4.326 c3.996,2.046,8.464,3.125,12.992,3.13c15.705,0,28.487-12.779,28.491-28.49C68.987,31.8,66.028,24.643,60.647,19.259z M40.479,64.296c-4.152-0.001-8.264-1.05-11.893-3.024l-0.626-0.346l-11.828,3.105l3.162-11.549l-0.375-0.651 c-2.174-3.765-3.323-8.066-3.323-12.442c0.007-13.723,11.173-24.884,24.893-24.884c6.658,0.003,12.915,2.596,17.612,7.301 c4.697,4.701,7.286,10.954,7.282,17.604C65.382,53.133,54.216,64.296,40.479,64.296z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23ffffff' d='M54.101,45.64c-0.751-0.374-4.444-2.191-5.135-2.443 c-0.688-0.25-1.188-0.374-1.691,0.378c-0.501,0.751-1.938,2.44-2.377,2.942c-0.439,0.503-0.88,0.566-1.63,0.189 c-0.751-0.377-3.172-1.17-6.042-3.73c-2.235-1.991-3.743-4.451-4.181-5.203c-0.439-0.752-0.048-1.159,0.33-1.533 c0.336-0.337,0.75-0.877,1.126-1.317c0.377-0.436,0.502-0.75,0.752-1.252s0.125-0.94-0.062-1.315 c-0.188-0.377-1.691-4.075-2.317-5.58c-0.611-1.462-1.229-1.266-1.69-1.289c-0.438-0.022-0.94-0.026-1.441-0.026 c-0.5,0-1.314,0.189-2.003,0.941c-0.688,0.751-2.629,2.57-2.629,6.266c0,3.698,2.691,7.272,3.067,7.771 c0.376,0.502,5.298,8.091,12.839,11.347c1.791,0.771,3.191,1.232,4.282,1.58c1.799,0.57,3.439,0.491,4.732,0.298 c1.443-0.216,4.443-1.816,5.072-3.57c0.627-1.758,0.627-3.262,0.438-3.575C55.354,46.204,54.852,46.015,54.101,45.64z'/%3E%3C/g%3E%3C/svg%3E");
}
.socialmedia .collection i {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='圖層_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='80px' height='80px' viewBox='0 0 80 80' enable-background='new 0 0 80 80' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-miterlimit='10' d='M50.032,17.127H30.455 c-11.573,0-20.986,9.416-20.986,20.99c0,8.74,5.291,16.41,13.318,19.542l-2.802,5.748c-0.256,0.525-0.144,1.15,0.279,1.553 c0.257,0.246,0.589,0.373,0.927,0.373c0.219,0,0.438-0.053,0.636-0.166l11.189-6.061h17.016c11.573,0,20.988-9.416,20.988-20.99 C71.021,26.543,61.605,17.127,50.032,17.127z M26.49,42.275c-1.79,0-3.242-1.451-3.242-3.241s1.452-3.242,3.242-3.242 s3.242,1.452,3.242,3.242S28.28,42.275,26.49,42.275z M40.244,42.275c-1.791,0-3.242-1.451-3.242-3.241s1.451-3.242,3.242-3.242 c1.79,0,3.242,1.452,3.242,3.242S42.034,42.275,40.244,42.275z M53.997,42.275c-1.79,0-3.242-1.451-3.242-3.241 s1.452-3.242,3.242-3.242s3.242,1.452,3.242,3.242S55.787,42.275,53.997,42.275z'/%3E%3C/svg%3E");
}

.socialmedia.is-on a {
  background-color: #393332;
}
.socialmedia.is-on i {
  filter: brightness(0) invert(1);
}

@media (max-width: 1199px) {
  .socialmedia {
    right: 10px;
    bottom: 10px;
  }
  .socialmedia a {
    width: 42px;
    height: 42px;
  }
  .socialmedia i {
    width: 32px;
    height: 32px;
  }
  .socialmedia .gotop i,
  .socialmedia .collection i {
    width: 28px;
    height: 28px;
  }
}

/*page*/
.breadcrumb {
  text-align: right;
  background:none;
  margin:10px 0 0;
  padding:15px 0;
}
.breadcrumb>li+li:before {
  content:"\f105";
  font-family : FontAwesome;
  color:#A1A1A6;
}
.breadcrumb a {
  font-size: 0.8125rem;
  color:#A1A1A6;
  text-decoration: none;
}

/*index*/
#index .edit-box {
  padding-bottom: max(20px, 1.6vw);
}
@media screen and (max-width:991px) {
  #index .edit-box {
    display: none;
  }
}

.iban {
  position:relative;
}
.iban a {
  display:block;
}
.iban img {
  width:100%;
  height:auto;
}
.iban .slick-arrow  {
  opacity:0;
}
.iban:hover .slick-arrow {
  opacity:1;
}
.iban .idesk {
  display:block;
}
.iban .imobile {
  display:none;
}
@media screen and (max-width:991px) {
  .iban {
    margin-bottom: max(40px, 2.5vw);
  }
}
@media screen and (max-width:767px) {
  .iban .idesk {
    display:none;
  }
  .iban .imobile {
    display:block;
  }
}
#index .news {
  background:#f9f9f9;
  padding:20px 0;
  margin:0 0 40px;
}
#index .news .left div:nth-child(1) {
  font-size:1.375rem;
  color:#614850;
}
#index .news .left div:nth-child(2) {
  font-size:1.25rem;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
  color:#614850;
  margin:0 0 0 20px;
}
#index .news .left span {
  font-size: 2.5rem;
  color:#e8e3e4;
  display:inline-block;
}
#index .news .container-fluid {
  font-size: 0;
}
#index .news .left {
  width:220px;
  display:inline-block;
  vertical-align: middle;
  padding:0 0 0 40px;
}
#index .news .right {
  width:calc(100% - 220px);
  display:inline-block;
  vertical-align: middle;
}
#index .news .right > div {
  font-size: 0;
}
#index .news .date {
  width:130px;
  display:inline-block;
  font-size: 0.9375rem;
  vertical-align: middle;
  text-align: center;
  color:#b4527c;
}
#index .news .content {
  width:calc(100% - 130px);
  display:inline-block;
  font-size: 0.9375rem;
  color:#444444;
  text-decoration: none;
  vertical-align: middle;
  height:26px;
  overflow: hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
}
.ih2 {
  text-align: center;
  position:relative;
  margin: max(40px, 3vw) 0 max(30px, 2.5vw);
  color: #666;
}
.ih2:before {
  /*content:'';*/
  width:100%;
  height:4px;
  background:url(../images/border1.jpg)left bottom repeat-x;
  position:absolute;
  left:0;
  bottom:9px;
  z-index: -1;
}
.ih2 > div {
  background:#fff;
  display:inline-block;
  padding:0 10px;
}
.ih2 span {
  display:block;
}
.ih2 span.en {
  font-size: 1.375rem;
  margin:0 0 10px;
}
.ih2 span.cn {
  font-size: 1rem;
  letter-spacing: 16px;
  /* 核心修正：抵銷最後一個字的右間距 */
  margin-right: -16px;
  color:#666666;
}
.ih2.slogan span.cn {
  letter-spacing: 15px;
  margin-right: -15px;
}

.ih2.red span.en {
  color:#a1a1a6;
}
.ih2.red span.cn {
  color:#a1a1a6;
}
.ih2.brown span.en {
  color:#e8af65;
}
.ih2.brown span.cn {
  color:#833f08;
}

/*@goods共用*/
.ggoods {
  text-align: center;
  margin:0 -25px 55px;
  font-size: 0;
}
.ggoods .box {
  display:inline-block;
  text-decoration: none;
  margin:0 25px 25px;
  outline:none;
  vertical-align: top;
}
.ggoods .image-link {
  position: relative;
  display: block;
}
.ggoods .image-link .bag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.ggoods .image-link .bag .add {
  width: 30px;
  height: 30px;
  background: url('../images/bag_add.svg') center center no-repeat;
  background-size: cover;
}
.ggoods .image-link .bag .noadd {
  display: block;
  width: 30px;
  height: 30px;
  background: url('../images/bag_noadd.svg') center center no-repeat;
  background-size: cover;
}
.ggoods .image-link .bag .noadd.is-tracked {
  background: url('../images/bag_add.svg') center center no-repeat;
  background-size: cover;
}
.ggoods .detail-link {
  display: block;
  text-decoration: none;
  outline:none;
  position: relative;
  z-index: 1;
}
.ggoods .action-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 15px;
  opacity: 0;
  transition: all 300ms;
  z-index: 2;
  pointer-events: none;
}
.ggoods .image-link:hover .action-icons {
  opacity: 1;
}
.ggoods .action-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  text-decoration: none;
  transition: all 300ms;
  pointer-events: auto;
}
.ggoods .action-icons a:hover {
  background: #fff;
  transform: scale(1.1);
}
.ggoods .action-icons .icon-zoom {
  position: relative;
  background: rgba(0,0,0,0.2);
}
.ggoods .action-icons .icon-zoom:before {
  content: '';
  width: 30px;
  height: 30px;
  background: url('../images/icon_zoom.png') center center no-repeat;
  background-size: contain;
  transition: opacity 300ms;
}
.ggoods .action-icons .icon-zoom:hover {
  background: #c2d7da;
}
.ggoods .action-icons .icon-zoom:hover:before {
  color: #fff;
}
.ggoods .action-icons .icon-plus {
  position: relative;
  background: rgba(0,0,0,0.2);
}
.ggoods .action-icons .icon-plus:before {
  content: '';
  width: 30px;
  height: 30px;
  background: url('../images/icon_plus2.png') center center no-repeat;
  background-size: contain;
  transition: opacity 300ms;
}
.ggoods .action-icons .icon-plus:hover {
  background: rgba(0, 0, 0, 0.5);
}
.ggoods .action-icons .icon-plus:hover:before {
  opacity: 0.8;
}
.ggoods .image {
  position:relative;
  margin-bottom: 10px;
}
.ggoods .image img {
  max-width:100%;
  height:auto;
  width: 75%;
  margin: auto;
}
.ggoods .title {
  color:#444;
  font-size: 16px;
  margin:0 0 5px !important;
  padding:0 15px;
  max-height: 52px;
  overflow: hidden;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
.ggoods .num {
  color:#A1A1A6;
  font-size: 14px;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
}
.ggoods.wrap .box {
  width:calc(25% - 50px);
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  position: relative;
}
.ggoods.wrap .box .bag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.ggoods.wrap .box .bag .add {
  width: 19px;
  height: 19px;
  background: url('../images/bag_add.svg') center center no-repeat;
  background-size: cover;
}
.ggoods.wrap .box .bag .noadd {
  display: block;
  width: 19px;
  height: 19px;
  background: url('../images/bag_noadd.svg') center center no-repeat;
  background-size: cover;
}
.ggoods.wrap .box .bag .noadd.is-tracked {
  background: url('../images/bag_add.svg') center center no-repeat;
  background-size: cover;
}
@media screen and (max-width:580px) {
  .ggoods .box .image:after {
    width:60px;
    height:60px;
  }
  .ih2.slogan span.cn {
    letter-spacing: 5px;
    margin-right: -5px;
  }
  .ggoods.wrap .box .bag {
    display: none;
  }
}
.i-recom-outer {
  overflow: hidden;
}
.i-recom-wrap {
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.i-recom-slider {
  margin-bottom: 20px;
  white-space: nowrap;
}

.i-recom-slider .image{
  max-width: 100%;
  padding: 0 10px; 
  text-align: center;
}
.i-recom-slider .image img{
  display: inline-block;
}
.i-recom-slider .box {
  display: block;
}
.i-recom-slider .box .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.i-recom-slider .item {
  max-width: calc((100vw - 40px) / 5);
}
@media (max-width:1199px){
  .i-recom-slider .item {
    max-width: calc((100vw - 40px) / 4);
  }
}
@media (max-width:991px){
  .i-recom-slider .item {
    max-width: calc((100vw - 40px) / 3);
  }
}
@media (max-width:639px){
  .i-recom-slider .item {
    max-width: calc((100vw - 40px)/ 2);
  }
}
@media (max-width:549px){
  .i-recom-slider .item {
    max-width: calc((100vw - 40px) / 1.5);
  }
}

/*@index*/
#index .board {
  margin-bottom: 40px;
}
#index .board .box {
  width: 100%;
}
#index .board img {
  width: 100% !important;
  height: auto !important;
}

#index .board .box .title {
  padding-top: 10px;
  text-align: center;
  margin: 0;
}
#index .board .box .title .tw {
  color:#444;
  font-size: 16px;
  line-height: 26px;
}
#index .board .box .title .en {
  color: #A1A1A6;
  font-size: 14px;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
}
#index .news {
  margin:0 -17.5px 40px;
}
#index .news .box {
  padding:0 17.5px;
  display:table;
  width:100%;
}

#index .i-activity {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#index .i-activity .box {
  width: calc(50% - (20px / 2));
}
#index .i-activity .box img {
  width: 100%;
}
@media screen and (max-width:991px) {
  #index .news .left {
    float:none;
    width:100%;
    padding:0;
    line-height: 0;
  }
  #index .news .left div {
    display:inline-block;
  }
  #index .news .left div:nth-child(2) {
    margin:0;
  }
  #index .news .left span {
    font-size: 1.875rem;
    margin:0 7.5px;
  }
  #index .news .right {
    float:none;
    width:100%;
  }
  #index .news .date {
    text-align: left;
    width:90px;
    vertical-align: top;
  }
  #index .news .content {
    width: calc(100% - 90px);
    height:auto;
    white-space:normal;
    vertical-align: top;
    max-height: 52px;
  }
  .ggoods.wrap .box {
    width:calc(33.3333% - 50px);
  }
}
@media screen and (max-width:767px) {
  .ggoods {
    margin:0 -2.5px 25px;
  }
  .ggoods.slider {
    margin:0 auto 25px;
  }
  .ggoods .box {
    margin:0 2.5px 10px;
  }
  .ggoods.wrap .box {
    width:calc(50% - 15px) !important;
  }
  #index .board {
    margin:0 -7.5px 40px;
  }
  #index .board .box {
    margin:0 7.5px;
  }

  #index .i-activity {
    margin: 0;
  }
  #index .i-activity .box {
    width: 100%;
  }
}
@media screen and (max-width:480px) {
  .ih2 {
    margin:0 0 15px;
  }
  #index .news {
    margin:0 0 10px;
    padding:15px 0;
  }
  #index .news .date,
  #index .news .content {
    display:block;
    width:100%;
  }
  #index .board .box {
    width:calc(100% - 15px);
    margin:0 7.5px 15px;
  }
}
/*價位搜尋/商品介紹/企業案例*/
.listWrap { position: relative; margin-bottom: 50px;}
.leftMenu{ width: 230px; float: left; margin-top: -30px; padding-top: 20px; position: relative; z-index: 10;}
.leftMenu .leftTi{ line-height: 34px; font-size: 24px; font-family: 'Inter', sans-serif, 'Noto Sans HK'; }
.leftMenu .leftTi:after{ content: ''; display: block; width: 45px; height: 1px; background: #323333; margin-top: 9px;}
.rightList{ float: right; width: calc(100% - 280px); }
.rightList.full {
  float: none; width: 100%;
}
.rightList .ggoods.wrap .box{ width: 25%; margin: 0 0px 20px; }
.rightList.full .ggoods.wrap .box { width: 20%; }
.rightList.full .ggoods.wrap .box .inquiry,
.rightList .ggoods.wrap .box .inquiry {
  max-width: 150px;
  margin: auto;
  vertical-align: middle;
}
.rightList.full .ggoods.wrap .box .inquiry a,
.rightList .ggoods.wrap .box .inquiry a {
  display: block;
  border-radius: 35px;
  padding: 5px;
  background: #f28753;
  color: #fff;
  font-size: .875rem;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
.rightList.full .ggoods.wrap .box .inquiry:hover a,
.rightList .ggoods.wrap .box .inquiry:hover a {
  text-decoration: underline;
}
.rightList h1.h1 {
  font-size: 15px;
  color: #666666;
  padding-top: 5px;
}
@media (max-width: 991px) {
  .rightList.full .ggoods.wrap .box {
    width: calc(25% - 30px);
  }
}
@media (max-width: 767px) {
  .rightList .ggoods.wrap .box {
    margin: 0 7.5px 10px;
  }
}
#proView .title{ display: block; color: #323333; font-weight: 500;}
#proView .num{ display: block; color: #A1A1A6;}
#proView .picBox { max-width: 620px; margin: 10px auto; padding: 8px; }
#proView .picBox img{ width: 100%;}
#proView .btnAdd,
#proView .btnAhare,
#proView .btnLine { display: inline-block;  border-radius: 21px; font-size: 15px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); color: #fff;}
#proView .btnAdd{ background: url('../images/icon_inqiery_o.png') rgba(255, 255, 255, 0.85) 25px center no-repeat; padding: 9px 30px 10px 50px; border: #f28753 solid 1px; color: #f28753; }
#proView .btnAhare{ background: #6b89ca; padding: 9px 30px 10px 30px;}
#proView .btnLine{ background: url('../images/icon_line_g.png') rgba(255, 255, 255, 0.85) 25px center no-repeat; padding: 9px 30px 10px 50px; border: #06c755 solid 1px; color: #06c755; }
#proView .btnAhare .fa{ margin-right: 10px; font-size: 16px }
#proView .btnAdd:hover,
#proView .btnAhare:hover,
#proView .btnLine:hover { box-shadow: 2px 2px 5px rgba(0,0,0,0.5);}

@media (min-width: 992px){
  .leftMenu{  }
  .leftMenu .ti { color: #323333; font-size: 1.4em; padding-bottom: 15px; font-weight: 500; margin-bottom: 0; margin-top: 0; padding-top: 10px; }
  .leftMenu.scroll-view{ z-index: 10; position: fixed;}
  .leftMenu .dropdown{ margin-top: 5px; position: initial;}
  .leftMenu .dropdown .btn{ display: none;}
  .leftMenu .dropdown .dropdown-menu{ display: block !important; float: none; position: static; min-width: initial; border: none; background: none; box-shadow: none !important; top: auto; left: auto; margin: 0;
    padding: 0;}
  .leftMenu .dropdown .dropdown-menu > li{ line-height: 26px; font-size: 17px;}
  .leftMenu .dropdown .dropdown-menu > li > h2.cat-name{ margin: 0; padding: 0; border: none; font-size: inherit; font-weight: normal; line-height: inherit;}
  .leftMenu .dropdown .dropdown-menu > li > h2.cat-name > a{ display: block; line-height: 26px; padding: 9px; white-space: normal; font-size: 15px; color: #a1a1a6;}
  .leftMenu .dropdown .dropdown-menu > li > h2.cat-name > a:hover{ color: #323333; font-weight: 500; text-decoration: none;}
  .leftMenu .dropdown .dropdown-menu > li.has-sub:hover > h2.cat-name > a { color: #323333; font-weight: 500; text-decoration: none; background: url(../images/icon_minus.png) 95% center no-repeat;}
  .leftMenu .dropdown .dropdown-menu > li.has-sub > h2.cat-name > a{ background: url('../images/icon_plus.png') 95% center no-repeat;}
  .leftMenu .dropdown .dropdown-menu > li.has-sub > h2.cat-name > a:hover{ background: url('../images/icon_minus.png') 95% center no-repeat;}
  .leftMenu .dropdown .dropdown-menu > li > a{ display: block; line-height: 26px; padding: 9px; white-space: normal; border-bottom: 1px solid #eee; font-size: 15px;}
  .leftMenu .dropdown .dropdown-menu > li > a:hover{ color: #000;}
  .leftMenu .dropdown .dropdown-menu > li:hover{ background: #F9F8F8;}
  .leftMenu .dropdown .dropdown-menu > li.current > a{ color: #db7b2e;}
  .leftMenu .dropdown .dropdown-menu > li.current > a:hover{ color: #de0010;}
  .leftMenu .dropdown .dropdown-menu > li > .dropdown-sub{
    display: block; position: absolute; left: 100%; top: 0; height: calc(100vh - 123px);
    background: rgba(247, 247, 247, 0.8);
    backdrop-filter: blur(8px);
    pointer-events: none; padding: 10px 20px; z-index: 2; transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease; list-style: none; opacity: 0; }
  .leftMenu .dropdown .dropdown-menu > li:hover > .dropdown-sub{ opacity: 1; pointer-events: auto;}
  .leftMenu .dropdown .dropdown-sub > li{ position: relative; line-height: 26px;}

  .leftMenu .dropdown .dropdown-sub > li > a{ display: block; line-height: 30px; font-family: 'Inter', sans-serif, 'Noto Sans HK'; color: #666666; padding: 9px; white-space: normal; font-size: 0.9em; width: 230px; padding-left: 28px; background: url('../images/icon_aw_left.png') no-repeat 11px 21px;}
  .leftMenu .dropdown .dropdown-sub > li > a:hover{ color: #000;}
  .leftMenu .dropdown .dropdown-sub > li.current > a{ }
  .leftMenu .dropdown .dropdown-grand{ margin-top: 5px; display: none;}
  .leftMenu .dropdown .dropdown-sub > li.open > .dropdown-grand{ display: block;}
  .leftMenu .dropdown .dropdown-grand > li{ line-height: 26px; font-size: 15px; padding: 5px 0;}
  .leftMenu .dropdown .dropdown-grand > li > a:hover{ color: #000;}
  .leftMenu .dropdown .dropdown-grand > li.current > a{color: #aacd06;  }
  .leftMenu .dropdown .dropdown-grand > li > a, .leftMenu .dropdown .dropdown-grand > lit > a{ padding-left: 20px; position: relative; color: #999; font-size: 0.9em;}
  .leftMenu .dropdown .dropdown-grand > li > a:before, .leftMenu .dropdown .dropdown-grand > lit > a:before{ content: ''; display: block; position: absolute; width: 8px; height: 1px; background: #ccc; top: 13px; left: 2px;}
  .leftMenu .dropdown .dropdown-grand > li > a:before:hover,
  .leftMenu .dropdown .dropdown-grand > li.current > a:before{background: #aacd06;  }
  .rightList .ggoods.wrap .box:nth-child(3n){ margin-right: 0 }
}

@media (max-width: 991px){
  .leftMenu .h2{ display: none;}
  .leftMenu{ float: none; width: 100%; margin: 0; padding: 0; top:0 !important;}
  .leftMenu .leftTi{ display: none;}
  .leftMenu .dropdown{ margin: 10px 0;}
  .leftMenu .dropdown .btn{
    display: block;
    position: relative;
    height: 45px;
    font-size: 20px;
    line-height: 47px;
    color: #A1A1A6;
    border: none;
    background: #dfe3e6;
    border-radius: 100px;
    box-shadow: none !important;
    outline: none;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 30px;
    width: 100%;
  }
  .leftMenu .dropdown.open{ }
  .leftMenu .dropdown.open .btn{
    background: #A1A1A6;
    color: #dfe3e6;
  }
  .leftMenu .dropdown .btn:before{
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: #fff transparent transparent transparent;
    top: 20px;
    right: 20px;
  }
  .leftMenu .dropdown .dropdown-menu{ width: 100%; border-radius: 0; padding: 10px 30px; box-shadow: none; border: none; background-color: rgba(255,255,255,.8); backdrop-filter: blur(8px);}
  .leftMenu .dropdown .dropdown-menu > li{ border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
  .leftMenu .dropdown .dropdown-menu > li:last-child{ border-bottom: none;}
  .leftMenu .dropdown .dropdown-menu > li > a{ line-height: 26px; padding: 10px 15px; border-bottom: 1px solid #eee;}
  .leftMenu .dropdown .dropdown-menu > li.open > a{ background: url('../images/icon_minus.png') 95% center no-repeat #fff;}
  .leftMenu .dropdown .dropdown-sub{ display: none;}
  .leftMenu .dropdown .dropdown-menu > li.open > .dropdown-sub{display: block;}
  .leftMenu .dropdown .dropdown-sub > li{ background: #f7f7f7;}
  .leftMenu .dropdown .dropdown-sub > li > a{ display: block; position: relative; line-height: 32px; padding: 5px 15px 5px 23px;   border: 1px solid rgba(255,255,255,0.5);}
  .leftMenu .dropdown .dropdown-sub > li > a:before{ position: absolute; background: #666; top: 15px;}
  .leftMenu .dropdown .dropdown-sub > li.current{  background: url(../images/icon_plus.png) 95% center no-repeat #fff;}
  .leftMenu .dropdown .dropdown-sub > li.current > a:before{ background: #f1751b;}
  .leftMenu .dropdown .dropdown-sub > li.open > a{ background: #f7f7f7; color: #a1a1a6;}
  .leftMenu .dropdown .dropdown-sub > li.open > a:before{border-left-color: #e60012;}
  .leftMenu .dropdown .dropdown-grand{ display: none;}
  .leftMenu .dropdown .dropdown-sub > li.open > .dropdown-grand{ display: block;}
  .leftMenu .dropdown .dropdown-grand > li > a{ position: relative; display: block; line-height: 26px; font-size: 14px; padding: 4px 15px 4px 40px;}
  .leftMenu .dropdown .dropdown-grand > li > a:before{content: ''; display: block; position: absolute; width: 8px; height: 1px; background: #ccc; top: 18px; left: 26px;}
  .leftMenu .dropdown .dropdown-grand > li.current > a{ color: #aacd06;}
  .leftMenu .dropdown .dropdown-grand > li.current > a:before{ background: #aacd06;}
  .rightList{ float: none; width: 100%; margin-top: 0;}

  .leftMenu .dropdown .cat-name {
    margin: 14px 0;
    font-size: 20px;
    font-weight: normal;
  }
  .leftMenu .dropdown .cat-name a {
    display: block;
    color: #a1a1a6;
  }
  .leftMenu .dropdown .cat-name a:hover {
    color: #666;
  }
}
/*@news*/
.pban {
  overflow: hidden;
  position:relative;
}
.pban img {
  width:100%;
  height:auto;
}
.pban .h2 {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  text-align: center;
  color:#fff;
}
.pban .h2 span {
  display:block;
}
.pban .h2 .en {
  font-size: 1.5625rem;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
  margin:0 0 10px;
  text-transform: uppercase;
}
.pban .h2 .cn {
  font-size: 1.125rem;
}
@media screen and (max-width:1199px) {
  .pban {
    padding-top: 65px;
  }
}
@media screen and (max-width:991px) {
  .pban {
    height:155px;
  }
  .pban img {
    width:992px;
    height:155px;
    position:absolute;
    top:0;
    left:50%;
    margin:0 0 0 -496px;
  }
}
#news .box {
  display:block;
  font-size: 0;
  text-decoration: none;
  border-bottom:1px solid #f3f3f3;
  padding:5px 0 20px;
  margin:0 0 20px;
}
#news .box .image {
  width:calc(40% - 60px);
  display:inline-block;
  vertical-align: middle;
  margin:0 60px 0 0;
  position:relative;
  overflow: hidden;
}
#news .box .image:before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url(../images/news_hover.png) center center no-repeat rgba(0,0,0,0.4);
  background-size:100% auto;
  opacity:0;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  -o-transform:scale(1.2);
  -ms-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -webkit-transform:scale(1.2);
}
#news .box .image:after {
  content:'Read more';
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
  font-size: 0.9375rem;
  color:#fff;
  position:absolute;
  top:50%;
  left:0;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  opacity:0;
  margin:20px 0 0;
  width:100%;
  text-align: center;
}
#news .box:hover .image:before {
  opacity:1;
  margin:0;
  -o-transform:scale(1);
  -ms-transform:scale(1);
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
}
#news .box:hover .image:after {
  opacity:1;
  margin:0;
}
#news .box .image img {
  width:100%;
  height:auto;
}
#news .box .content {
  width:60%;
  display:inline-block;
  padding:0 25px 0 0;
  vertical-align: middle;
}
#news .box .date {
  font-size: 0.8125rem;
  color:#444;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
  margin:0 0 5px;
}
#news .box .title {
  color:#444;
  font-weight: bold;
  margin:0 0 10px;
  font-size: 1rem;
}
#news .box:hover .title {
  color:#444;
}
#news .box .text {
  color:#444;
  font-size: 0.875rem;
  max-height: 78px;
  overflow: hidden;
}
@media screen and (max-width:991px) {
  #news .box .image {
    width: calc(40% - 35px);
    margin: 0 35px 0 0;
  }
  #news .box .content {
    padding:0 15px 0 0;
  }
}
@media screen and (max-width:767px) {
  #news .box {
    padding: 15px 0 15px;
  }
  #news .box .image {
    width:100%;
    display:block;
    margin: 0 0 10px;
  }
  #news .box .content {
    width:100%;
    display:block;
    padding:0;
  }
}
#news_vw .h2 {
  font-size:1.5rem;
  position:relative;
  line-height: 34px;
}
#news_vw .h2:before {
  content:'';
  width:100%;
  height:1px;
  background:#f3f3f3;
  position:absolute;
  bottom:-21px;
  left:0;
  z-index: -1;
}
.gshare {
  text-align: right;
}
.gshare .list {
  font-size: 0;
  background:#fff;
  display:inline-block;
}
.gshare .list li {
  display:inline-block;
  vertical-align: middle;
  margin:0 17.5px;
}
.gshare .list li a {
  display:block;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
}
.gshare .list li:hover a {
  opacity:0.8;
}
.gshare .list li:nth-child(1) {
  color:#666666;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
}
.gshare .list li:nth-child(2) a {
  width:32px;
  height:32px;
  background:url(../images/line_icon.png) center -20px no-repeat;
  background-size:20px 46px;
}
.gshare .list li:nth-child(3) a {
  width:9.5px;
  height:18px;
  background:url(../images/fb_icon.png) center center no-repeat;
  background-size:100% auto;
}
.gshare .list li:nth-child(4) a {
  background:url(../images/like_icon.png) left center no-repeat;
  background-size:15.5px 14px;
  padding:0 0 0 20.5px;
  color:#aaa;
}
#news_vw .date {
  font-size:0.9375rem;
  margin:0 0 25px;
}
#news_vw .edit-box {
  padding:0 40px 65px;
  margin:0 0 15px;
  border-bottom:1px solid #f3f3f3;
}
.edit-box img {
  max-width: 100%;
  height:auto !important;
}
.edit-box table {
  width: 100% !important;
  height: auto;
}
#news_vw .btn-wrap {
  padding:0 0 15px;
  border-bottom:1px solid #f3f3f3;
  margin:0 0 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#news_vw .btn {
  color:#444;
  display: inline-flex;
  align-items: center;
  width: 40%;
  text-decoration: none;
}
#news_vw .btn span.none-480 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
#news_vw .btn.aw-left span {
  text-align: left;
}
#news_vw .btn.aw-right span {
  text-align: right;
}
#news_vw .aw-left:before,
#news_vw .aw-right:after {
  content:'';
  width:40px;
  height:40px;
  line-height: 40px;
  font-family:FontAwesome;
  color:#fff;
  font-size:1.25rem;
  display:inline-block;
  border-radius: 50%;
  text-align: center;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
#news_vw .aw-left {
  display: flex;
  align-items: center;
  width: 40%;
  margin: 0;
  text-align: left;
}
#news_vw .aw-left:before {
  content:"\f104";
  background:#ccc;
  margin:0 15px 0 0;
  flex-shrink: 0;
}
#news_vw .aw-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 40%;
  margin: 0 0 0 auto;
  text-align: right;
}
#news_vw .aw-right:after {
  content:"\f105";
  background:#ccc;
  margin:0 0 0 15px;
  flex-shrink: 0;
}
#news_vw .btn span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
#news_vw .aw-left:hover {
  color:#949494;
}
#news_vw .aw-left:hover:before {
  background:#949494;
}
#news_vw .aw-right:hover {
  color:#949494;
}
#news_vw .aw-right:hover:after {
  background:#949494;
}
@media screen and (max-width:991px) {
  .gshare {
    text-align: left;
    margin:0;
  }
  .gshare .list {
    margin:0 -12.5px;
  }
  .gshare .list li {
    margin:0 12.5px;
  }
  #news_vw .edit-box {
    padding: 0 25px 45px;
  }
}
@media screen and (max-width:767px) {
  #news_vw .edit-box {
    padding: 0 0 35px;
  }
  #news_vw .aw-left {
    margin: 0;
  }
  #news_vw .aw-right {
    margin: 0 0 0 auto;
  }
  #news_vw .aw-left:before,
  #news_vw .aw-right:after {
    width:25px;
    height:25px;
    line-height: 25px;
  }
}
@media screen and (max-width:480px) {
  .none-480 {
    display:none;
  }
}
/*@contact*/
[data-name="inquiry"] .socialmedia, [data-name="contact"] .socialmedia {
  display: none;
}

#contact {
  background:url(../images/contact_bg.png) center center repeat;
}
#contact .h3 {
  color:#444444;
  font-size:1.25rem;
  text-align: center;
  margin:0 0 15px;
}
#contact .note {
  text-align:center;
  color:#888;
  font-size: 0.9375rem;
  max-width: 1000px;
  margin:0 auto 35px;
}
#contact .list {
  font-size: 0;
  max-width: 1000px;
  margin:0 auto 15px;
}
#contact .list li {
  position:relative;
  display:inline-block;
  vertical-align: top;
  font-size: 0;
  padding:0 0 0 40px;
  margin:0 0 25px;
  width:30%;
}
#contact .list li:before {
  content:'';
  width:30px;
  height:30px;
  position:absolute;
  background:url(../images/contact_icon.png) no-repeat;
  background-size: 100% auto;
  top:-2px;
  left:0;
}
#contact .list li:nth-child(1),
#contact .list li:nth-child(4) {
  width:40%;
}
#contact .list li:nth-child(1):before {
  content:'';
  background-position:0 0;
}
#contact .list li:nth-child(2):before {
  content:'';
  background-position:0 -30px;
}
#contact .list li:nth-child(3):before {
  content:'';
  background-position:0 -60px;
}
#contact .list li:nth-child(4):before {
  content:'';
  background-position:0 -90px;
}
#contact .list li:nth-child(5):before {
  content:'';
  background-position:0 -120px;
}
#contact .list .name {
  color:#000;
  font-size:0.9375rem;
  display:inline-block;
  margin-right: 10px;
  vertical-align: top;
}
#contact .list .content {
  color:#444444;
  font-size:0.9375rem;
  display:inline-block;
}
#contact .list .content a {
  color:#323333;
}

#contact .list li.wat {
  padding-left: 0;
}
#contact .list li.wat::before {
  display: none;
}
#contact .list li.wat .name a {
  display: block;
  color: #323333;
}
#contact .list li.wat .name i {
  display: inline-block;
  margin: -2px 10px 0 0;
  width:30px;
  height:30px;
  vertical-align: middle;
  background: url(../images/icon_wat.svg) no-repeat 0 0;
  background-size: cover;
}

.hr {
  background:url(../images/border2.jpg) left center repeat-x;
  border:none;
  display:block;
  width:100%;
  height:2px;
  margin:0 0 30px;
}
#contact .title {
  text-align: center;
  margin:0 0 30px;
}
#contact .title span {
  display:block;
}
#contact .title .en {
  color:#444;
  font-size:1.375rem;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
}
#contact .title .cn {
  color:#444;
}
#contact .ggoods {
  padding:0 15px;
}
#contact .ggoods .box {
  background:#fff;
  padding:5px;
  position:relative;
  margin:0 2.5px;
}
#contact .ggoods .box:before {
  content:'';
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  border:1px solid #ccc;
  position:absolute;
  top:5px;
  left:5px;
  z-index: 1;
}
#contact .ggoods .title {
  color:#323333;
  height:52px;
  padding:0 15px;
  margin:0 0 5px;
}
#contact .ggoods .num {
  color:#A1A1A6;
  margin:0 0 5px;
}
#contact .ggoods .btn.close {
  position:relative;
  width:25px;
  height:25px;
  opacity:1;
  z-index: 1;
  border:none;
  top:10px;
  right:10px;
}
#contact .ggoods .btn.close:before,
#contact .ggoods .btn.close:after {
  content:'';
  width:25px;
  height:1px;
  background:#666;
  position:absolute;
  top:50%;
  left:0;
  transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
}
#contact .ggoods .btn.close:before {
  transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
}
#contact .ggoods .btn.close:after {
  transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
}
#contact .slick-slide {
  outline:none;
}
#contact .wrap {
  background:#fff;
  padding:45px 80px;
  margin:0 0 65px;
}
#contact .wrap .box {
  margin:0 15px 15px;
  width:calc(50% - 30px);
  float:left;
}
#contact .wrap .form-group {
  border-bottom:1px solid #a9a9a9;
}
#contact .wrap select,
#contact .wrap input,
#contact .wrap textarea {
  border:none;
}
#contact .wrap .row:last-child .box:nth-child(1) {
  width:calc(70% - 30px);
}
#contact .wrap .row:last-child .box:nth-child(2) {
  width:calc(30% - 30px);
}
.code .box {
  margin:0 !important;
  padding:0 !important;
}
.code .box:nth-child(1) {
  width:calc(100% - 188px) !important;
  float:left;
}
.code .box:nth-child(2) {
  width:188px !important;
  max-width: 188px;
  float:left;
}
.code .box img {
  width:100%;
  height:auto;
}
.submit.btn {
  color:#fff;
  font-size: 0.9375rem;
  background:#323232;
  border-radius: 35px;
  width:100%;
  max-width: 170px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.submit.btn:hover {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
#contact .btn-wrap {
  border:none !important;
}
@media screen and (max-width:991px) {
  #contact .list li {
    width:50% !important;
    margin: 0 0 10px;
  }
  #contact .wrap {
    padding:45px;
  }
}
@media screen and (max-width:767px) {
  #contact .list li {
    width:100% !important;
    margin:0 0 5px;
  }
  #contact .wrap {
    padding: 25px;
  }
  #contact .wrap .box,
  #contact .wrap .row:last-child .box:nth-child(1),
  #contact .wrap .row:last-child .box:nth-child(2) {
    width:calc(100% - 30px);
  }
}
@media screen and (max-width:480px) {
  #contact .note {
    margin:0 auto 15px;
  }
  #contact .title {
    margin: 0 0 15px;
  }
  #contact .list li {
    padding:0 0 0 35px;
  }
  #contact .list li:before {
    width:25px;
    height:25px;
    top:-0.5px;
  }
  #contact .list li:nth-child(1):before {
    content:'';
    background-position:0 0;
  }
  #contact .list li:nth-child(2):before {
    content:'';
    background-position:0 -25px;
  }
  #contact .list li:nth-child(3):before {
    content:'';
    background-position:0 -50px;
  }
  #contact .list li:nth-child(4):before {
    content:'';
    background-position:0 -75px;
  }
  #contact .list li:nth-child(5):before {
    content:'';
    background-position:0 -100px;
  }
  #contact .list li.wat .name i {
    width:25px;
    height:25px;
  }

  .hr {
    margin:0 0 15px;
  }
  #contact .wrap {
    padding: 15px;
  }
  #contact .ggoods .title {
    height:auto;
  }
  #contact .wrap .form-name,
  #contact .wrap .form-content {
    float:none;
    width:100%;
  }
  #contact .btn-wrap {
    text-align: center;
  }
}
/*@sitemap*/
#sitemap {
  margin-bottom: 50px;
  font-size: 0;
  position: relative;
}
#sitemap .pContent{ padding-top: 50px;}
#sitemap:after{ content: ''; background: url('../images/site_bg.png') right bottom no-repeat; position: absolute; bottom: -50px; width: 550px; height: 330px; right: 0; background-size: contain; z-index: -1;}
#sitemap .h2 .en{ font-size: 1.4em; margin-bottom: 5px; display: block; font-weight: lighter; letter-spacing: 3px;}
#sitemap .item { margin: 0 20px; display: inline-block; vertical-align: top; width: calc(100%/5 - 47px); position: relative;}
/* #sitemap .item:after{ content: ''; width: 1px; height: 360px; display: block; background: #ececec; position: absolute; right: 0; top: 0;} */
#sitemap .item:last-child:after{ display: none;}
.pink{ color: #fbbebd }
.orang{ color: #e2b669;}
.blue{ color: #a6cfd0 }
.green { color: #b4d2b7 }
.purple{ color: #a587ba }

#sitemap .item .ti {
  display: block;
  font-size: 1rem;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1.2em;
  padding: 0 0 10px 0;
  height: 62px;
  color:#333;
}
#sitemap .item .ti img{ display: inline-block; margin-right: 17px; vertical-align: middle; }
#sitemap .item .ti .en{ display: block; font-weight: 100; margin-bottom: 2px;}
#sitemap .item .ti .en +div{ color: #333;}
#sitemap .item .ti:hover a {
  color: #000;
}
#sitemap .item .ti.bottom {
  margin-bottom: 45px;
}
#sitemap .item .ti i,
#sitemap .item a.title i {
  padding-right: 8px;
}
#sitemap .item ul,
#sitemap .item li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#sitemap .item li a {
  position: relative;
  display: block;
  color: #323333;
  padding: 10px 20px 10px 48px;
  font-size: 15px;
}
#sitemap .item li a:before {
  display: none;
  /* content: ''; */
  position: absolute;
  width: 5px;
  height: 5px;
  left: 14px;
  top: 18px;
  background: #444;
  border-radius: 50%;
}
/* #sitemap .item.pink li a:before{ background: #fbbebd }
#sitemap .item.orang li a:before{ background: #e2b669 }
#sitemap .item.blue li a:before{ background: #a6cfd0 }
#sitemap .item.green li a:before{ background: #b4d2b7 } */
#sitemap .item li a:hover { color: #666;}

#sitemap .item.orang{ width: calc(40% - 44px); max-height: 400px;}
#sitemap .item.orang li{ width: 46%; display: inline-block }
.br680{ display: none;}

@media only screen and (max-width: 1199px) {
  #sitemap .item li a:before{}
  #sitemap .item li a{ padding-left: 15px; padding: 7px 0 8px 33px;}
}
@media only screen and (max-width:991px) {
  #sitemap .item{ width: calc(100%/3 - 24px); margin: 0 20px 40px;}
  #sitemap .item:nth-child(2):after{ display: none;}
  #sitemap .item.orang{ width: calc(65% - 44px);}
}
@media only screen and (max-width:767px) {
  #sitemap .item{ width: calc(100%/3 - 14px); margin: 0 5px 40px;}
  #sitemap .item:after{ display: none; }
  #sitemap .item.orang{ max-height: none;}

}


@media only screen and (max-width: 680px) {
  #sitemap:after{ width: 80%;}
  #sitemap .item .ti img{}
  #sitemap .item li a:before{}
  #sitemap .item li a{ padding-left: 30px; padding: 7px 0 8px 33px;}
  .br680{ display: block;}
  #sitemap .item{ width: calc(100%/2 - 24px);}
  #sitemap .item.orang{ max-height: none; width: calc(100%/2 - 24px);}
  #sitemap .item.orang li{  width: 100%}

}
@media only screen and (max-width: 480px) {
   #sitemap .item{ width: 100%;}
   #sitemap .item.orang{ width:100%;}
   #sitemap .item:after{ display: none;}
  }
/*@system*/
#error .wrap {
  text-align: center;
  margin:0 0 35px;
}
#error .btn-wrap {
  text-align: center;
  margin:0 0 65px;
}
@media screen and (min-width: 992px) {
  #error .wrap {
    min-height: 250px;
  }
}
/* 頁碼 */
.pPager{
  text-align: center;
  font-size: 0;
  margin: 50px 0;
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
  clear: both;
}
.pPager.noLine{
  border-top: none;
}
.pPager a{
  display: inline-block;
  height: 34px;
  line-height: 34px;
  color: #b5b5b5;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
}
.pPager a.prev,
.pPager a.next{
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
  margin: 0 32px;
}
.pPager a.prev .fa,
.pPager a.next .fa{ width: 34px; height: 34px; line-height: 34px; border-radius: 34px; font-size: 15px; background: #dfe3e6; color: #fff;}
.pPager a.next .fa{}
.pPager a.num{
  position: relative;
  margin: 0 13px 0; border-radius: 0;
  width: 17px;
}
.pPager a.num:hover,
.pPager a.num:active{
  color: #000;
}
.pPager a.num.current{
  position: relative;
  color: #000;
  font-size: 16px;
}
.pPager a.disable{
  cursor: not-allowed;
  background: transparent;
}
.pPager a.back{
  background: #000;
  color: #fff;
  padding: 0 25px;
  text-decoration: none;
}
@media (max-width: 680px){
  .pPager a.num{
    position: relative;
    margin: 0 7px 0;
  }
  .pPager a.prev,
  .pPager a.next{
    padding: 0;
    margin: 0;
  }
  .pPager a.prev .hide,
  .pPager a.next .hide{
    display: none;
  }
  .pPager a.prev .fa,
  .pPager a.next .fa{
    margin: 0 3px
  }
}

/* 20170810 */
#mbShare {
  display: none;
  position: fixed;
  z-index: 998;
  right: 25px;
  bottom: 76px;
}
#mbShare .switch {
  display: block;
  width: 46px;
  height: 46px;
  font-size: 0;
  background: url('../images/mbshare_switch.png') center no-repeat;
  background-size: 46px 46px;
  border-radius: 100%;
}
#mbShare .list {
  position: absolute;
  width: 46px;
  left: 0;
  bottom: 46px;
  transform: scale(0);
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transition: transform 0s .4s;
  -moz-transition: -moz-transform 0s .4s;
  -webkit-transition: -webkit-transform 0s .4s;
}
#mbShare.open .list {
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transition: transform 0s;
  -moz-transition: -moz-transform 0s;
  -webkit-transition: -webkit-transform 0s;
}
#mbShare .list li {
  padding-bottom: 5px;
  opacity: 0;
  transform: translateY(20px);
  -moz-transform: translateY(20px);
  -webkit-transform: translateY(20px);
}
#mbShare.open .list li {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}
#mbShare .list li:nth-child(1) {
  transition: opacity .3s, transform .3s;
  -moz-transition: opacity .3s, -moz-transform .3s;
  -webkit-transition: opacity .3s, -webkit-transform .3s;
}
#mbShare.open .list li:nth-child(1) {
  transition: opacity .3s .1s, transform .3s .1s;
  -moz-transition: opacity .3s .1s, -moz-transform .3s .1s;
  -webkit-transition: opacity .3s .1s, -webkit-transform .3s .1s;
}
#mbShare .list li:nth-child(2) {
  transition: opacity .3s .05s, transform .3s .05s;
  -moz-transition: opacity .3s .05s, -moz-transform .3s .05s;
  -webkit-transition: opacity .3s .05s, -webkit-transform .3s .05s;
}
#mbShare.open .list li:nth-child(2) {
  transition: opacity .3s .05s, transform .3s .05s;
  -moz-transition: opacity .3s .05s, -moz-transform .3s .05s;
  -webkit-transition: opacity .3s .05s, -webkit-transform .3s .05s;
}
#mbShare .list li:nth-child(3) {
  transition: opacity .3s .1s, transform .3s .1s;
  -moz-transition: opacity .3s .1s, -moz-transform .3s .1s;
  -webkit-transition: opacity .3s .1s, -webkit-transform .3s .1s;
}
#mbShare.open .list li:nth-child(3) {
  transition: opacity .3s, transform .3s;
  -moz-transition: opacity .3s, -moz-transform .3s;
  -webkit-transition: opacity .3s, -webkit-transform .3s;
}
#mbShare .list li a {
  display: block;
  width: 46px;
  height: 46px;
  font-size: 0;
  background-size: 46px 46px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 100%;
}
#mbShare .list li a.mail {
  /* background-color: #d967ea; */
  background-image: url('../images/mbshare_mail.png');
}
#mbShare .list li a.tel {
  /* background-color: #f99051; */
  background-image: url('../images/mbshare_tel.png');
}
#mbShare .list li a.line {
  /* background-color: #00b900; */
  background-image: url('../images/mbshare_line.png');
}
@media (min-width: 992px) {
  #mbShare {
    right: 50px;
    bottom: 116px;
  }
}

/*

/* 2021.01.13 新增首頁快速分類 */
.category-wrap{
  position: relative;
  margin: 35px auto;
  padding: 0 20px;
  max-width: 1440px;
}
.category-wrap::after{
  content: '';
  display: block;
  width: 100%;
  clear: both;
}
.category-wrap .ih2{
  width: 146px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.category-wrap .ih2:before{
  display: none;
}
.category-wrap .quick {
  width: 146px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.category-wrap .quick:before{
  display: none;
}
.category-wrap .category-slick-mb{
  display: none !important;
}
.category-wrap .category-slick{
  font-size: 0;
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 73px);
}
.category-wrap .category-slick .box .icon img{
  max-width: 100%;
  margin: auto;
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: -webkit-transform .3s ease-in-out;
  -o-transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.category-wrap .category-slick .box p{
  text-align: center;
  font-size: 16px;
  color: #444;
  line-height: 1.4;
  white-space:nowrap;
  text-decoration: none;
  margin-top: 15px;
  margin-bottom: 0;
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
}
.category-wrap .category-slick .item{
  display: inline-block;
  vertical-align: top;
  width: 20%;
  padding: 0 10px;
  text-decoration: none;
  outline: none;
}
.category-wrap .category-slick-left{
  float: left;
}
.category-wrap .category-slick-right{
  float: right;
}
.category-wrap .arrow-box{
  width: 146px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.category-wrap a.category-prev,
.category-wrap a.category-next{
  width: 40px;
  height: 40px;
  border: 2px solid #e4e4e5;
  border-radius: 100%;
  background: #fff;
  outline: none;
  transition: background .25s cubic-bezier(0,.4,.4,1);
  -ms-transition: background .25s cubic-bezier(0,.4,.4,1);
  -moz-transition: background .25s cubic-bezier(0,.4,.4,1);
  -webkit-transition: background .25s cubic-bezier(0,.4,.4,1);
  display: inline-block !important;
  vertical-align: middle;
  position: relative;
  top: unset !important;
  -webkit-transform: unset !important;
      -ms-transform: unset !important;
          transform: unset !important;
}
.category-wrap a.category-next:after{
  content: '';
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: 3px solid #818385;
  border-right: 3px solid #818385;
  top: 14px;
  right: 15px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.category-wrap a.category-prev:after{
  content: '';
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-left: 3px solid #818385;
  border-bottom: 3px solid #818385;
  top: 14px;
  left: 15px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

@media (min-width: 992px){
  .category-wrap .category-slick .box:hover .icon img{
    -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
          transform: scale(1.03);
  }
  .category-wrap .category-slick .box:hover p{
    opacity: 1;
  }
  .category-wrap a.category-prev:hover,
  .category-wrap a.category-next:hover{
    background: #eee;
  }
}

@media (max-width: 991px){
  .category-wrap {
    display: none;
  }
}

@media (max-width: 1440px){
  .category-wrap .category-slick .item{
    padding: 0 2px;
  }
  .category-wrap .category-slick .box p{
    font-size: 15px;
    margin-top: 10px;
  }
}
@media (max-width: 1199px){
  .category-wrap .arrow-box{
    /* top: 60%; */
  }
  .category-wrap .ih2{
    /* padding-top: 1%; */
  }
}
@media (max-width: 991px){
  .category-wrap .category-slick .item{
    margin-bottom: 15px;
    padding: 0 8px;
  }
  .category-wrap .category-slick-left,
  .category-wrap .category-slick-right{
    display: none;
    width: 100%;
  }
  .category-wrap .category-slick-mb{
    display: block !important;
    width: 100%;
  }
  .category-wrap .category-slick .box p{
    opacity: 1;
    white-space: unset;
  }
  .category-wrap .ih2{
    width: 100%;
    margin-bottom: 25px;
  }
  .category-wrap .arrow-box{
    width: 100%;
    position: relative;
    top: unset;
    left: unset;
    -webkit-transform: unset;
      -ms-transform: unset;
          transform: unset;
  }
  .category-wrap .arrow-box{
    margin: 10px 0 35px;
  }
  .category-wrap .ih2{
    padding-top: 0;
    position: relative;
    top: unset;
    left: unset;
    -webkit-transform: unset;
      -ms-transform: unset;
          transform: unset;
  }
}
@media (max-width: 767px) {
  .category-wrap .category-slick-mb{
    display: none !important;
  }
  .category-wrap .ih2.xs-hide{
    display: none;
  }
}
@media (max-width: 649px) {
  .category-wrap .category-slick .item{
    width: 50%;
    text-align: center;
  }
}
ul.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
ul.tags.mb50 {
  margin-bottom: 50px;
}
ul.tags li {
  display: inline-block;
  /* border: 1px solid #e0dedf; */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

ul.tags li a {
  padding: 2px 16px;
  border-radius: 50px;
  color: rgb(110, 110, 110);
  background-color: rgb(247, 247, 247);
  display: block;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.3s ease;
}

ul.tags li:hover a,
ul.tags li.current a {
  text-decoration: none;
  background-color: rgb(240, 240, 240);
}

ul.tags li:hover,
ul.tags li.current {
  /* border-color: #77b9bb; */
  /* transform: translateY(-2px); */
  /* box-shadow: 0 4px 8px rgba(0,0,0,0.15); */
}

/* Product view: sticky action header */
#proView .rightList > .sticky {
  position: sticky;
  top: 80px;
  z-index: 50;
  display: flex;
  flex-direction: row-reverse;
}

#proView .rightList > .sticky .toheader {
  position: static;
}
#proView .sticky .toheader .bag .add {
  width: 22px;
  height: 22px;
  font-size: 0;
  background: url('../images/bag_add.svg') center center no-repeat;
  background-size: cover;
}
#proView .sticky .toheader .bag .noadd {
  display: block;
  width: 22px;
  height: 22px;
  font-size: 0;
  background: url('../images/bag_noadd.svg') center center no-repeat;
  background-size: cover;
}
#proView .sticky .toheader .bag .noadd.is-tracked {
  background: url('../images/bag_add.svg') center center no-repeat;
  background-size: cover;
}

#header .lev1 .dropdown {
  position: relative;
}
#header .lev1 .dropdown .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  z-index: 100;
  padding: 10px 0;
  border-radius: 0 0 6px 6px;
  text-align: center;
  /* overflow: hidden; */
  background: rgba(247, 247, 247, 0.8);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#header .lev1 .dropdown:hover .submenu,
#header .lev1 .dropdown:focus-within .submenu {
  display: block;
}
#header .lev1 .dropdown .submenu li {
  width: 100%;
}
#header .lev1 .dropdown .submenu a {
  padding: 10px 24px;
  color: #666666;
  display: block;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1rem;
  transition: background 0.2s, color 0.2s;
  background: transparent;
}
#header .lev1 .dropdown .submenu a:hover {
  color: #323333;
}
@media screen and (max-width:1199px) {
  #header .lev1 .dropdown .submenu {
    position: static;
    left: 0;
    transform: none;
    display: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    text-align: center;
    z-index: 100;
    /* 移除動畫過渡與 opacity、height */
    overflow: hidden;
  }
  #header .lev1 .dropdown.open .submenu {
    /* 不設 display:block，讓 JS 控制 */
  }
  /* 移除 hover 展開，避免手機點擊時同時觸發 hover */
  #header .lev1 .dropdown:hover .submenu,
  #header .lev1 .dropdown:focus-within .submenu {
    display: none;
  }
  #header .lev1 .dropdown .submenu a {
    padding: 12px 0 12px 0;
    background: transparent;
  }
}

/* About Us 美化與動畫 */
.about-header {
  background: linear-gradient(120deg, #77b9bb 0%, #e3e3e3 100%);
  color: #fff;
  padding: 48px 0 32px 0;
  text-align: center;
  animation: fadeInDown 1s;
  border-radius: 0 0 32px 32px;
  margin-bottom: 24px;
}
.about-header h1 {
  font-size: 2.5rem;
  margin: 0 0 12px 0;
  letter-spacing: 2px;
  font-weight: bold;
}
.about-header p {
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.9;
}
.about-content {
  max-width: 700px;
  margin: 40px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(119,185,187,0.08);
  padding: 40px 32px;
  animation: fadeIn 1.2s;
}
.about-content p {
  /* font-size: 1.1rem; */
  line-height: 2;
  margin: 0 0 18px 0;
  letter-spacing: 1px;
}
.about-highlight {
  color: #323333;
  font-weight: bold;
  font-size: 1.15rem;
  margin: 24px 0 12px 0;
  display: block;
  animation: slideInLeft 1.2s;
}
.about-divider {
  border: none;
  border-top: 2px solid #77b9bb;
  margin: 32px 0;
  width: 100%;
  opacity: 0.5;
  animation: fadeIn 2s;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px);}
  to { opacity: 1; transform: translateY(0);}
}
@keyframes fadeIn {
  from { opacity: 0;}
  to { opacity: 1;}
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px);}
  to { opacity: 1; transform: translateX(0);}
}
@media (max-width: 600px) {
  .about-content { padding: 20px 8px; }
  .about-header { padding: 32px 0 18px 0; }
}
.process-steps {
  margin: 40px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  animation: fadeIn 1.2s;
}
.process-step-number {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, #77b9bb 60%, #e3e3e3 100%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(119,185,187,0.15);
  margin-top: 4px;
  letter-spacing: 1px;
}
.process-step-content {
  flex: 1;
}
.process-step-title {
  font-size: 1.15rem;
  font-weight: bold;
  color: #77b9bb;
  margin-bottom: 6px;
}
.process-step-desc {
  font-size: 1.05rem;
  color: #333;
  line-height: 1.8;
}
@media (max-width: 600px) {
  .process-step { gap: 12px; }
  .process-step-number { width: 38px; height: 38px; font-size: 1.1rem; }
}
.about-divider-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0;
}
.about-divider-icon {
  color: #77b9bb;
  font-size: 1.3rem;
  margin-right: 10px;
}
.about-divider-text {
  color: #77b9bb;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 1.1rem;
  border-bottom: 2px dashed #77b9bb;
  padding-bottom: 2px;
}
h3.ti {
  text-align: center;
  color: #77b9bb;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 1.5rem;
  border-bottom: 2px dashed #77b9bb;
  padding-bottom: 10px;
}

.about-divider-icon {
  font-size: 1.6rem;
  margin-right: 12px;
  color: #77b9bb;
}
.qc-section {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 10px 20px 24px 20px;
  margin: 0 0 32px 0;
  box-shadow: 0 2px 12px rgba(119,185,187,0.08);
  animation: fadeIn 1.2s;
}
.qc-title {
  color: #77b9bb;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 16px;
}
.qc-list {
  margin: 0 0 18px 18px;
  padding: 0;
  /* list-style: disc; */
  color: #333;
  font-size: 1.05rem;
}
.qc-list li {
  margin-bottom: 6px;
  line-height: 1.7;
}
.qc-conclusion {
  margin-top: 18px;
  color: #333;
  font-size: 1.08rem;
  line-height: 1.8;
}
/* ====== 關於我們 兩區塊版型 ====== */
.about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 48px 0;
  gap: 40px;
}
.about-img {
  flex: 1 1 0%;
  min-width: 0;
  max-width: none;
  text-align: center;
}
.about-img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
    .about-img img {
        width: 100%;
    }
}

@media (max-width: 991px) {
  .about-section {
    flex-direction: column !important;
    gap: 0px;
    margin: 32px 0;
  }
  .about-img, .about-content {
    max-width: 100%;
    min-width: 0;
    padding: 0;
    box-shadow: none;
  }
  .about-content {
    padding: 0px 8px;
    border-radius: 12px;
  }
  .about-img img {
    max-width: 90vw;
    border-radius: 12px;
  }
}
/* ====== END 關於我們 兩區塊版型 ====== */
/* 20250602 横幅 */
.edit-box .title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: bold;
  color: #db8989;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.edit-box .title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #db8989;
}
.hero {
  height: 60vh;
  display: flex;
  align-items: center;
  position: relative;
  background-color: rgba(156, 44, 44, 0.05);
  border-radius: 50px;
}

.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.3;
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: bold;
  color: #db8989;
  line-height: 1.2;
  margin-bottom: 30px;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(51, 51, 51, 0.8);
  margin-bottom: 40px;
}

.hero-decoration {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  height: 50%;
  /* border: 20px solid rgba(156, 44, 44, 0.1); */
  border-radius: 20px;
}

/* .hero-watermark {
  position: absolute;
  left: 11%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(8rem, 25vw, 20rem);
  color: rgba(156, 44, 44, 0.05);
  font-weight: bold;
  white-space: nowrap;
  z-index: 0;
} */
/* 品牌理念 */
.philosophy {
  background-color: white;
  position: relative;
}

.ornament-top-right {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 80px;
  height: 80px;
  border-top: 3px solid #db8989;
  border-right: 3px solid #db8989;
}

.ornament-bottom-left {
  position: absolute;
  bottom: 0;
  left: 40px;
  width: 80px;
  height: 80px;
  border-bottom: 3px solid #db8989;
  border-left: 3px solid #db8989;
}

.philosophy-content {
  max-width: 80%;
  margin: 0 auto;
}

.philosophy-item {
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.philosophy-item:nth-child(odd) {
  background-color: rgba(247, 240, 228, 0.3);
}

.philosophy-item:nth-child(even) {
  background-color: rgba(156, 44, 44, 0.05);
}

.philosophy-item::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 20px;
  width: 24px;
  height: 24px;
  background-image: url('../images/icon_gift.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
}

.philosophy-text {
  padding-left: 40px;
  line-height: 1.8;
  color: rgba(51, 51, 51, 0.8);
}

/* 20260210 新增h1 */
.h1-wrap .ih1 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #db8989;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.h1-wrap .ih1::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #db8989;
}

/* 20260210 首頁最新消息輪播 */
.carousel-wrapper {
  margin: 20px 0 40px;
}

.article-carousel {
  margin: 0 -10px;
}

.article-carousel .slick-slide {
  padding: 0 10px;
}

.article-card {
  /* position: relative; */
  background: #fff;
  overflow: hidden;
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); */
  height: 100%;
  display: flex !important;
  flex-direction: column;
  text-decoration: none;
  color: #444;
}
.article-card .article-image {
  position: relative;
}
.article-card .article-image::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/news_hover2.png) center center no-repeat rgba(0,0,0,0.4);
  background-size: 100% auto;
  opacity: 0;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
.article-card .article-image::after {
  content:'Read more';
  font-family: 'Inter', sans-serif, 'Noto Sans HK';
  font-size: 0.9375rem;
  color:#fff;
  position:absolute;
  top:50%;
  left:0;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  opacity:0;
  margin:20px 0 0;
  width:100%;
  text-align: center;
}
.article-card:hover .article-image::before,
.article-card:hover .article-image::after {
  opacity: 1;
  margin: 0;
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
}

.article-image img {
  width: 100%;
  display: block;
}

.article-content {
  padding: 14px 16px 16px;
}

.article-category {
  display: inline-block;
  font-size: 1rem;
  color: #323333;
  margin-bottom: 4px;
}

.article-title {
  font-size: 1rem;
  font-weight: bold;
  color: #444;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-description {
  font-size: .875rem;
  color: #666;
  line-height: 1.6;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-link {
  font-size: .875rem;
  color: #666;
  text-decoration: none;
}

a.article-card:hover {
  text-decoration: none;
}
a.article-card:hover .article-title {
  color: #323333;
}

@media (max-width: 1024px) {
  .carousel-wrapper {
    margin: 15px 0 30px;
  }
}

@media (max-width: 768px) {
  .article-carousel {
    margin: 0 -5px;
  }

  .article-carousel .slick-slide {
    padding: 0 5px;
  }
}
/* .slick-dots {
  text-align: center;
} */
.slick-dots {
  bottom: -60px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.slick-dots li {
  margin: 0;
  width: auto;
  height: auto;
}

.slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: #E8E8E6;
  transition: all 0.4s ease;
}

.slick-dots li button:before {
  display: none;
}

.slick-dots li.slick-active button {
  width: 32px;
  border-radius: 4px;
  background: #323333;
}
.edit-box p {
  font-size: 15px;
}
.edit-box h1 { font-size: 18pt; color: #696969; font-weight: bold; }
.edit-box h2 { font-size: 16pt; color: #696969; font-weight: bold; }
.edit-box h3 { font-size: 14pt; color: #696969; font-weight: bold; }
.edit-box h4 { font-size: 12pt; color: #696969; font-weight: bold; }

.border1 {
    text-align: center;
    position: relative;
    margin: 0 0 25px;
}
.border1:before {
    content: '';
    width: 100%;
    height: 4px;
    background: url(../images/border1.jpg) left bottom repeat-x;
    position: absolute;
    left: 0;
    bottom: 9px;
    z-index: -1;
}