@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+TC:wght@100..900&display=swap');
#aboutFunc { display: none; }
.waylink { padding: 7px 0; display: flex; margin-top: 87px; background: #f2f2f2; }
.waylink ol {   }
.waylink li:first-child,.waylink li:first-child a { padding: 0 }
.waylink li,.waylink li a { display: inline-flex; vertical-align: top; position: relative; font-size: 12px; color: #7f7f7f; align-items: center; letter-spacing: 0.04em; }
.waylink li:after { content: '/'; font-size: 9pt; color: #7f7f7f; margin: 0 5px 0 8px; }
.waylink li:last-child:after { display: none; }
#content .h1tit { font-size: 20px; }
#content .titbox { border-bottom: 1px solid #e1e1e1; }
#content .titbox >div { position: relative; padding: 15px 0; }
#content .titbox >div:before { content: ''; position: absolute; bottom: 0; width: 40px; height: 1px; background: #555; }
#content .inside { overflow: unset; }
#content .inside.grid_list { display: grid; grid-template-columns: 200px 1fr; gap: 5vw; }
#content .inside.grid_list #side-nav { margin: 5vw 0 }
.inside .main-article { width: 100%; display: flex; flex-direction: column; order: 2; }
#describe { margin: 5vw 0 }
.inside #side-nav { display: flex; width: 100%; flex-direction: column; }
#product-nav { display: flex; align-items: center; gap: 10px; margin: 2vw 0; padding: 0; list-style: none; overflow: unset; justify-content: space-between; }
#product-nav li { margin: 0; padding: 0; width: 100%; }
#product-nav li a { line-height: 110%; transition: all linear .2s; cursor: pointer; padding: 10px 10px; color: #666; text-align: center; font-size: 16px; font-weight: 400; background: #fbf5e9; border: 1px solid rgb(255 181 46/35%); border-radius: 10px; letter-spacing: 0.04em; display: block; }
#product-nav li a:hover,#product-nav li.action a { background: linear-gradient(135deg,#ffb52e 0%,#ff8a1f 55%,#ff7417 100%); border-color: transparent; color: #fff; transform: translateY(-2px); }
.pagetitle { border-left: 3px solid #c6a14d; line-height: 120%; padding: 5px 0; padding-left: 15px; font-size: 16pt; margin-bottom: 25px; color: #3c3839; }
.main-article #describe li b { color: #8d8d8d; font-weight: 300; }
#side-nav .side-title { margin-bottom: 2vw; }
#side-nav .side-title.productB{display:flex;gap: 10px;}
#side-nav .side-title h2 { font-size: 20px; font-weight: 500; letter-spacing: 0.08em; }
.article-info * { font-size: 14px; vertical-align: baseline; font-weight: 500; letter-spacing: 0.04em; font-family: "Arimo",var(--font-family); }
#content .inside.grid_list .outside-set { position: relative; padding: 24px 22px; background: #fff9ef; border: 1px solid #f1dfc5; border-radius: 16px; box-sizing: border-box; }
#content .inside.grid_list .outside-set .side-title { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f1dfc5; }
#content .inside.grid_list .outside-set .side-title h2 { position: relative; margin: 0; padding-left: 14px; color: #292929; font-size: 22px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; }
#content .inside.grid_list .outside-set .side-title h2:before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 22px; border-radius: 999px; background: linear-gradient(180deg,#ffb52e 0%,#ff8a1f 55%,#ff7417 100%); transform: translateY(-50%); }
#content .inside.grid_list .outside-set .Cate { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
#content .inside.grid_list .outside-set .Cate li { margin: 0; padding: 0; }
#content .inside.grid_list .outside-set .Cate li h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
#content .inside.grid_list .outside-set .Cate li h3 a {position: relative;display: flex;align-items: center;justify-content: space-between;padding: 12px 14px;border: 1px solid #f1dfc5;border-radius: 10px;background: #fff;color: #5f5954;text-decoration: none;transition: .3s ease;font-size: 15px;font-weight: 500;}
#content .inside.grid_list .outside-set .Cate li h3 a:after { content: "→"; color: #ff8a1f; font-size: 16px; font-weight: 700; transition: .3s ease; }
#content .inside.grid_list .outside-set .Cate li h3 a:hover { border-color: #ff8a1f; background: #fff3dc; color: #ff8a1f; }
#content .inside.grid_list .outside-set .Cate li h3 a:hover:after { transform: translateX(4px); }
#content .inside.grid_list .outside-set .Cate li.active h3 a,#content .inside.grid_list .outside-set .Cate li.current h3 a,#content .inside.grid_list .outside-set .Cate li.on h3 a { background: linear-gradient(135deg,#ffb52e 0%,#ff8a1f 55%,#ff7417 100%); border-color: transparent; color: #fff; }
#content .inside.grid_list .outside-set .Cate li.active h3 a:after,#content .inside.grid_list .outside-set .Cate li.current h3 a:after,#content .inside.grid_list .outside-set .Cate li.on h3 a:after { color: #fff; }
.side-title.productB>div { position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 30px; border-radius: 18px; box-sizing: border-box; cursor: pointer; overflow: hidden; transition: transform .3s ease,border-color .3s ease,background .3s ease; background: linear-gradient(135deg,#ffb52e 0%,#ff8a1f 55%,#ff7417 100%); border: 0; width: 50%; }
.side-title.productB h2 { position: relative; z-index: 2; margin: 0; font-size: 24px; font-weight: 800; line-height: 1.4; text-align: center; }
.side-title.productB h2 a { display: flex; align-items: center; justify-content: center; gap: 12px; color: white; text-decoration: none; transition: .3s ease; font-weight: 500; letter-spacing: 0.08em; }
.side-title.productB h2 a:after { content: "→"; display: inline-flex; align-items: center; justify-content: center; width: 34px; aspect-ratio: 1; border-radius: 50%; font-size: 18px; font-weight: 700; transition: .3s ease; background: #fff3dc; color: #ff8a1f; }
.side-title.productB>div:hover { transform: translateY(-3px); }
.side-title.productB>div:first-child:hover { border-color: #ff8a1f; }
.side-title.productB>div:hover h2 a:after { transform: translateX(4px); }
#ssbanner-list .bxslider div { margin-bottom: 10px; }
#ssbanner-list .bxslider div a { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-color: #f8f8f8; display: block; transition: all ease-in-out .3s; width: 100%; height: 100% }
#ssbanner-list .bxslider div a img { width: 100% }
#ssbanner-list,#side-nav #fb-wrap,#side-nav #g-map,#side-nav #youtube,#side-nav #contact-nav { margin-top: 20px; text-align: center }
#side-nav #contact-nav { display: none; }
#side-nav #contact-nav ul li a { text-align: left }
#side-nav #contact-nav ul li a img { margin-right: 6px; }
#community { margin: 50px 0 }
#community ul { display: flex; align-items: center; }
#community li { display: flex; flex-direction: column; justify-content: center; margin: 0 0 0px 5px; }
#community li>div { display: flex; }
#community li.com-twi { background: #1a9ed1; border-radius: 3px; }
#sub-banner { margin-top: 0; position: relative; }
#sub-banner a { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; padding: 129px 0; background-position: 50% 50%; background-attachment: fixed; background-size: cover; padding-top: 100px; }
#sub-banner a.subantel { position: absolute; bottom: -80px; left: calc(50% - 137px); color: white; font-size: 22px; }
#sub-banner .info { margin: 0 auto; width: 720px; padding: 15px 0px; background: #1da591b8; display: flex; justify-content: center; border-radius: 60px; position: relative; max-width: 100%; background-image: linear-gradient(315deg,#c7a961 0%,#c6a14d 74%); }
#sub-banner .info:before { content: ""; position: absolute; width: 50px; height: 1px; background: #a7a7a7; bottom: -12px; }
#sub-banner .info h4,#sub-banner .info p { text-align: center; color: #ffffff; font-size: 15pt; line-height: 110%; font-weight: 200; }
#sub-banner .info h4 { display: flex; }
#sub-banner .info p { font-size: 14pt; text-shadow: 0 0 5px rgb(0 0 0/38%); }
#messageList-reply { margin-top: 40px; }
#messageList-reply>h3 { border-bottom: 1px solid #e8e8e8; padding: 10px; }
#messageList-reply .reply-content { margin-top: 20px; }
#messageList-reply .reply-content p { margin: 0 10px 10px; }
#messageList-reply .reply-content textarea {font-size: 12pt;border: 2px solid #dcdcdc;width: 100%;border-radius: 10px;padding: 10px;height: 64px;}
#messageList-reply .reply-content .btn { text-align: right; margin-top: 20px; }
#messageList-reply .reply-content .btn .r-btn { display: inline-block; background: #ffdf57; color: #000; font-size: 12pt; border-radius: 25px; padding: 7px 55px; }
#undergroundBanks-mobile { display: none; }
@media screen and (max-width:1440px) {
.waylink{margin-top: 74px;}
}
@media screen and (max-width:1280px) {
    #product-nav{display:grid;grid-template-columns: repeat(9, 1fr);}
}
@media screen and (max-width:1024px) {
.waylink{margin-top: 62px;}
  .inside .main-article { width: 100%; margin: 0 0 50px; }
  #side-nav { width: 100%; }
  .pagetitle { margin-top: 25px; }
  #sub-banner { margin-top: 0; }
  #undergroundBanks-mobile { display: block; margin-bottom: 20px; }
  .inside #side-nav ul.Cate {margin-top: 3vw;display: grid;grid-template-columns: repeat(9, 1fr);}
  .inside #side-nav[data-action="member_part"] { margin-bottom: 0; }
  .inside #side-nav[data-action="member_part"] ul.Cate { margin-top: 3em; display: flex; }
  .inside #side-nav[data-action="member_part"] ul.Cate >li h3 a { font-weight: 400; font-size: 16px; }
  #undergroundBanks-mobile .slider-nav .list b { display: block; font-size: 16px; line-height: 150%; padding: 10px; background: #f3f3f3; text-align: center; font-weight: 300; }
  #undergroundBanks-mobile .slider-nav .slick-current .list b,#undergroundBanks-mobile .slider-nav .list a.action b { background: #606060; color: #fff; }
  #side-nav .noBnav .Cate>li { width: 33.3%; }
}
@media screen and (max-width:768px) {
    .inside #side-nav{margin-bottom:50px;}
  #side-nav .side-title.productB { display: block; }
    .side-title.productB>div{width:100%;margin: 10px 0;}
  .productB div { width: 100%; }
  #side-nav .side-title h2 { font-size: 20px; }
  .productB img { width: 20%; }
  .waylink { top: 301px; }
    #content .inside.grid_list .outside-set .Cate{display: grid;grid-template-columns: repeat(3, 1fr);}
    #content .inside.grid_list #side-nav{margin-bottom:0}
    #content .inside.grid_list{display: flex;flex-direction: column;gap: 20px;}
  #sub-banner .info h4 { font-size: 16px; display: flex; flex-direction: column; }
  #sub-banner .info { border-radius: 10px; }
  #sub-banner .info p { font-size: 14pt; text-shadow: 0 0 3px rgba(0,0,0,0.71); line-height: 129%; }
  #sub-banner a { padding: 130px 10px; }
  .waylink li a,.waylink li:after,.waylink li { font-size: 8pt; color: #373737; }
  .waylink li:after { top: 0px; }
  .pagetitle { margin: 15px 0; padding: 2px 0 2px 10px; }
  #side-nav .noBnav .Cate>li { width: 50%; }
}
@media screen and (max-width:480px) {
    .inside #side-nav ul.Cate {margin-top: 30px;grid-template-columns: repeat(5, 1fr);gap: 5px;}
  #content .inside.grid_list .outside-set .Cate li h3 a{display:block;}
    #content .inside.grid_list .outside-set .Cate li h3 a:after{display:none;}
  #content .inside.grid_list .outside-set .Cate{gap: 5px;}
    #sub-banner .info h4 { font-size: 11pt; }
  #sub-banner a { padding: 85px 10px; padding-top: 90px; }
  #sub-banner a.subantel { padding: 0 0; bottom: 15px; }
    #content .inside.grid_list #side-nav{margin-top: 40px;}
    #product-nav li a{font-size: 13px;}
}