ul { list-style: none; }
.pageh1 {position: relative;font-size: 1.875rem;margin: 0 auto;margin-top: 150px;margin-bottom: 50px;text-align: center;color: #0072ba !important;display: flex;flex-direction: column;align-items: center;width: 90%;}
.pageh1:before { content: ""; width: 9px; position: absolute; aspect-ratio: 1/1; background: #0072c7; bottom: -16px; z-index: 1; border-radius: 666px; }
.pageh1:after { content: ""; position: absolute; width: 20vw; height: 2px; background: #82c1e4; bottom: -13px; z-index: 0; }
#sub-banner { margin-top: 20px; position: relative }
#sub-banner a { position: relative; display: block }
#sub-banner img { width: 100%; position: relative; display: none; }
#w-particles { overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; top: 0 }
#w-particles canvas { width: 100%; height: 100% }
#w-particles #layouy-particles { height: 100%; background: rgba(8,51,81,0.43) }
#side-nav { background: #f6f6f6; position: relative; z-index: 20 }
#side-nav .workframe { overflow: visible }
#content { background-image: url(/images/14/inner_bg.png); background-size: contain; background-position: 50%; background-repeat: no-repeat; }
.content-wrraper { width: min(1440px,95%); margin: 0 auto; }
#side-nav .outside-set .Cate >li .h3,#side-nav .outside-set .Cate >li .subUL li .subULHead,#category-nav .Cate >li >.h3,#category-nav .Cate .subUL >li .subULHead { overflow: hidden; position: relative; border-bottom: 1px solid #efefef }
#side-nav .outside-set .Cate >li .h3,#side-nav .outside-set .Cate >li .subUL li .subULHead p,#category-nav .Cate >li >.h3,#category-nav .Cate .subUL >li .subULHead { width: calc(100% - 25px) }
#side-nav .outside-set .Cate >li > .h3,#category-nav .Cate >li >.h3,#category-nav .Cate .subUL >li .subULHead { width: 100% }
#side-nav .outside-set .Cate >li .h3 span,#category-nav .Cate >li >.h3 a span { color: #c4c4c4; margin-right: 8px; vertical-align: bottom; font-weight: 700; font-size: 20px }
#side-nav .outside-set .Cate >li .h3 b,#side-nav .outside-set .Cate >li .subUL li .subULHead b,#category-nav .Cate >li >.h3 b,#category-nav .Cate .subUL >li .subULHead b { color: #73bff8; font-weight: 700; font-size: 18px; position: absolute; right: 0; top: calc(50% - 13px); cursor: pointer; width: 50px; text-align: center; height: 56px; top: 0; line-height: 56px }
#side-nav .outside-set .Cate >li .h3 a,#side-nav .outside-set .Cate >li .subUL li .subULHead p a,#side-nav .outside-set .Cate >li .subUL li .sub2UL li .sub2ULHead p a,#category-nav .Cate >li >.h3 a,#category-nav .Cate .subUL >li .subULHead p a,#category-nav .Cate .subUL >li .sub2UL li .sub2ULHead p a { padding: 15px 0 }
#side-nav .outside-set .Cate li a,#category-nav .Cate li a { font-size: 15px; display: block; color: #fff; transition: all linear .2s }
#side-nav .outside-set .Cate li a:hover,#side-nav .outside-set .Cate li.action a { color: #026fbf }
#category-nav .Cate >li ul { overflow: hidden }
#category-nav .Cate li ul { display: none }
#category-nav .Cate li.action >ul { display: block }
#side-nav .outside-set .Cate >li .subUL li .subULHead p a,#category-nav .Cate .subUL >li .subULHead p a { padding-left: 20px; color: #f9f9f9 }
#side-nav .outside-set .Cate >li .subUL li .subULHead b,#category-nav .Cate .subUL >li .subULHead b { color: #d3d3d3 }
#side-nav .outside-set .Cate >li .subUL li .sub2UL li .sub2ULHead p a,#category-nav .Cate .subUL >li .sub2UL li .sub2ULHead p a { padding-left: 35px; border-bottom: 1px solid #efefef; color: #f5f5f5 }
#side-nav .outside-set .Cate >li .subUL li .sub2UL li.action .sub2ULHead p a { background: #f1f8fe }
/* 手機版選單開關 (純 CSS 實現) */
#coome-catalog .menu-toggle-checkbox { display: none; }
#coome-catalog .menu-toggle-label {display: none;background: #006bb3;color: white;padding: 14px 24px;border-radius: 10px;cursor: pointer;font-weight: 600;font-size: 16px;align-items: center;justify-content: center;gap: 10px;box-shadow: 0 4px 15px rgba(0,107,179,0.3);transition: background 0.3s;}
#coome-catalog .menu-toggle-label:active { transform: scale(0.98); }


.waylink { margin: 10px 0 }
.waylink #product_order { padding: 5px 10px; border: 1px #cdcdcd solid; border-radius: .2rem; font-size: 16px; color: #444; }
.waylink .search_box { margin-top: 1em; }
.waylink .product_search { display: flex; flex-wrap: wrap; align-items: center; }
.waylink .product_search span { position: relative; display: inline-block; }
.waylink .product_search span input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; z-index: 99; cursor: pointer; }
.waylink .product_search span label { margin: .2em; padding: .2em .5em; min-width: 3em; display: inline-block; text-align: center; border: 1px #ccc solid; border-radius: 1em; line-height: 1.2 }
.waylink .product_search span input:checked + label { background: #404040; border-color: #404040; color: #fff; }
.waylink .product_search a#product_s { margin-left: 1em; width: 5em; background: #2a91c9; border-radius: 5px; text-shadow: 0 0 1px #031f2e; text-align: center; font-size: 15px; color: #fff; cursor: pointer; }
.waylink ol { margin: 0; padding: 0; text-align: right }
.waylink ol li { display: inline-block; font-size: 12px; color: #939393; padding-left: 10px; position: relative }
.waylink ol li:before { content: '/'; position: absolute; left: 0; top: 0 }
.waylink ol li:first-child:before { display: none }
.waylink ol li a { color: #939393 }
.main-article { position: relative; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.main-article:after { position: absolute; width: 100%; min-height: 450px; top: 0; content: ''; left: 0; z-index: 1; height: 40%; }
.main-article .workframe { position: relative; z-index: 2; width: 100%; }
.main-article .pagetitle { text-align: center; font-size: 32px; line-height: 120%; margin: 60px 0; color: #323232 }
.main-article #describe { margin-bottom: 80px; width: 100%; position: relative; }
#coonactboox.main-article #describe { margin-bottom: 0; }
.main-article #article img { height: auto!important }
#community { margin: 50px 0 }
#community li { float: left; line-height: 0; margin: 5px 5px 5px 0 }
#side-other { position: relative; z-index: 2 }
#sideSet { background: #0583c9 }
#sideSet #contact-nav { float: left; color: #fff; width: 400px; padding: 70px }
#sideSet #category-nav { color: #fff; float: left; width: 350px; padding: 70px 0 }
#sideSet .efv { float: right; width: calc(100% - 540px - 350px); padding: 70px 0 }
#sideSet #contact-nav .h3,#sideSet #category-nav >.h3 { font-size: 30px; line-height: 110%; margin-bottom: 20px }
#sideSet #contact-nav ul { background: #176693; padding: 0 20px }
#sideSet #contact-nav ul li { margin: 15px 0 }
#sideSet #contact-nav ul li a { color: #fff; font-size: 17px }
#sideSet #contact-nav ul li a i { display: inline-block; width: 35px; height: 35px; border-radius: 10px; line-height: 35px; text-align: center; background: #f1f1f1; color: #0583c9; margin-right: 10px }
#sideSet #fb-wrap { margin: 30px 0 0; text-align: center }
#sideSet #g-map { width: 100% }
#sideSet #g-map iframe { width: 100%; height: 400px }
#sideSet #youtube { width: 100%; margin: 0 0 30px }
#sideSet #youtube .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden }
#sideSet #youtube iframe,#sideSet #youtube object,#sideSet #youtube embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
@media screen and (max-width:1280px) {
  #sub-banner { margin-top: 163px }
}
@media screen and (min-width:1025px) {
  #side-nav .outside-set >ul { text-align: center }
  #side-nav .outside-set >ul.sthOver { overflow: visible }
  #side-nav .outside-set .Cate >li { display: inline-block; vertical-align: top; position: relative }
  #side-nav .outside-set .Cate >li .h3 a { display: block; font-weight: 400; font-size: 16px; padding: 15px 20px; color: #6b6b6b }
  #side-nav .outside-set .Cate >li.action .h3 a { background: #dbdbdb; color: #373535 }
  #side-nav .outside-set .Cate >li .h3 b,#side-nav .outside-set .Cate >li .subUL li .subULHead b { display: none }
  #side-nav .outside-set .Cate >li >ul,#side-nav .outside-set .Cate >li >ul .sub2UL { transition: all linear .3s; position: absolute; width: 180px; top: 100%; left: 0; transform: translateX(50%); z-index: -1; opacity: 0 }
  #side-nav .outside-set .Cate >li >ul .sub2UL { top: 0; left: 100% }
  #side-nav .outside-set .Cate >li.p-boxOver >ul,#side-nav .outside-set .Cate >li.p-boxOver >ul li:hover .sub2UL { transform: translateX(0); z-index: 2; opacity: 1; overflow: visible }
  #side-nav .outside-set .Cate >li >ul >li { background: #2a91c9 }
  #side-nav .outside-set .Cate >li >ul >li.action,#side-nav .outside-set .Cate >li >ul >li:hover { background: #285e7b }
  #side-nav .outside-set .Cate >li .subUL li .sub2UL li .sub2ULHead p a { background: #1a455d }
  #side-nav .outside-set .Cate >li .subUL li .sub2UL li .sub2ULHead p a:hover,#side-nav .outside-set .Cate >li .subUL li .sub2UL li.action .sub2ULHead p a { background: #000 }
}
@media screen and (max-width:1024px) {
  #sub-banner { margin-top: 127px }
  #sideSet #contact-nav { width: 100%; padding: 0 }
  #sideSet #category-nav { width: 100% }
  #sideSet .efv { width: 100% }
  .content-wrraper { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap }
  .content-wrraper >div,.content-wrraper aside { width: 100%; order: 1 }
  #coome-catalog #side-nav {width: 260px;flex-shrink: 0;background: #ffffff;border-radius: 0;box-shadow: 0 10px 30px rgba(0,0,0,0.04);padding: 10px 0;position: sticky;top: 70px;z-index: 10;border: 1px solid rgba(0,0,0,0.03);}
  #side-nav { width: 100%; position: static; display: none; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
  
  #coome-catalog #side-nav .Cate li {border-bottom: 1px solid #f0f4f8;width: 100%;}
#coome-catalog #side-nav .Cate li:last-child { border-bottom: none; }
#coome-catalog #side-nav .nav-item-title { display: block; }
#coome-catalog #side-nav .nav-item-title a { display: block; padding: 15px 25px; color: #5a6c7d; font-size: 15px; font-weight: 500; position: relative; overflow: hidden; }
#coome-catalog #side-nav .nav-item-title a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #006bb3; transform: scaleY(0); transition: transform 0.3s ease; transform-origin: center; }
#coome-catalog #side-nav .nav-item-title a:hover { color: #006bb3; background: #f8fbff; padding-left: 32px; }
#coome-catalog #side-nav .nav-item-title a:hover::before { transform: scaleY(1); }
#coome-catalog #side-nav .action .nav-item-title a { color: #006bb3; background: #f0f7ff; padding-left: 32px; font-weight: 700; }
#coome-catalog #side-nav .action .nav-item-title a::before { transform: scaleY(1); }

  #coome-catalog .menu-toggle-label {display: flex;position: relative;z-index: 999;}
  #coome-catalog .menu-toggle-checkbox:checked ~ #side-nav {display: block;animation: slideDownfade 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;position: absolute;height: 500px;overflow-y: scroll;width: 90%;max-height: 80vh;margin-top: 20px;}

  }
@media screen and (max-width:640px) {
  .pageh1 {font-size: 1.75rem;width: 95%;margin: 140px auto 15px;}
  #sub-banner {margin-top: 20px;}
  #sideSet #g-map iframe { height: 300px }
  .main-article .pagetitle { font-size: 26px; margin: 40px 0 }
}