/*--scrollbar width--*/
body::-webkit-scrollbar { width: 6px;}

/*--sticky footer--*/
.page-wrapper_100 { min-height: 100vh; display: flex; flex-direction: column; }
.page-wrapper { min-height: 50vh; display: flex; flex-direction: column; }
.page-wrapper > footer { margin-top: auto; }

ol, ul { padding-left: 1.5rem;}
li { list-style: none;}
a { text-decoration: none;}
img { width: 100%;}
p { margin-bottom: 0; line-height: 35px;}
h1, h2, h3, h4, h5, h6, p { font-family: Arial, "Noto Sans CJK TC", "Microsoft JhengHei", "Noto Serif JP", "Meiryo UI", sans-serif; margin-bottom: 0px;}

.ContentAllFlex { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center;}

/*--Header--*/
.headerMenu { width: 100%; background: #fff;}
.headerMenuContent { font-size: 1rem;}
.contentBox { padding:70px 0 0 0;}

.topSpaceMenu { display: none; top: 100%; left: 0; z-index: 500; }
.topSpaceMenu a { color: #818181;}
.topSpaceMenu a:hover { color: #000;}
.topSpaceTrigger { background: #DB2019;}
.topSpaceTrigger:hover { background: #801C28;}
.topSpaceTrigger:hover .topSpaceMenu { display: block;}

.redBar { width: 100%; height: 6px; background: #DB2019;}
/*--JPC Menu--*/
.computerMenu { position: fixed; z-index:1000; width: 100%; background: #FFF;}
.computerMenu > .container { width: 100%; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: space-between; align-items: center; font-size: 0.9rem; transition: 0.3s;}
.jpcNavbar { overflow: hidden; width: 100%; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; justify-content: left; align-items: center;}
.jpcNavbar > div {  display: block; text-align: center;}
.jpcNavbar a { color: #000; text-align: center; font-weight: 800;}
.jpcSubnav { overflow: hidden;}
.jpclink { padding: 25px 15px; display: block; cursor: pointer;}
.jpcSubnav .jpcSubnavbtn { border: none; outline: none; background-color: inherit; font-family: inherit; margin: 0;}
.jpcSubnavContent { display: none; position: absolute; left: 0; background-color: #e5e5e5; width: 100%; z-index: 1;}
.jpcSubnavContent a { float: center;}
.jpcSubnav:hover .jpcSubnavContent { display: block;}
.jpcSubnavContent { max-height: 450px; overflow-y: auto; overflow-x: hidden; display: none; position: absolute; left: 0; background-color: #e5e5e5; width: 100%; z-index: 1;}
.jpcMenu { padding: 20px 100px; text-align: left; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: space-between;}
.menuTitle a { color: #DB2019; font-weight: 800;}
.menuTitle_s a { color: #000; font-weight: normal;}
.allMenu { width: 24%; padding: 0;}
.allMenu li { padding: 4px 0; color: #DB2019; font-weight: Bold;}

/*------------language & search------------*/
.searchBox2 { margin: 0 10px;}
.searchBox > form, .searchBox2 > form { display:flex; justify-content: center; margin-bottom: 0px;}
.searchBox > form > input, .searchBox2 > form > input { border-radius: 6px 0 0 6px; border: 1px solid #AFAFAF;}
.searchBox2 > form > input { padding: 0 6px;}
.searchBox > form > input { padding: 8px 6px;}
.searchBox > form > input { width: 60%;}
.searchBox2 > form > input { width: 50%;}
.searchBox > form > input:focus-visible, .searchBox2 > form > input:focus-visible { outline: inherit;}
.searchBox > form > button, .searchBox2 > form > button { border-radius: 0 5px 5px 0; background: #818181; padding: 5px 10px; border: 0px; color:#fff;}
.searchBox a { color: #818181; padding: 2px 4px; font-size: 0.85rem;}
.searchBox > nav > a { border: 1px solid #818181; border-radius: 4px;}
.searchBox > nav > a:hover { border: 1px solid #DB2019; color: #DB2019;}
.jpclink:hover, .languageContent a:hover { color: #DB2019;}
.languageDown { position: relative; display: inline-block; width: 70px; text-align: center;}
.languageBtn { border: 0px; background: #ffffff00; color: #818181;}
.languageContent { display: none; position: absolute; text-align: center; padding: 2px; width: 100%; z-index: 1;}
.languageContent li { background: #fff; margin: 2px 0; box-shadow:0px 0px 3px 0px #cccccc;}
.languageContent a { display: block;  color: #818181;}
.languageContent:hover { display: block;}
.languageDown:hover .languageContent {display: block;}

/*--frame--*/
.webHight { padding: 40px 0;}
.showListStyle { list-style: disc; line-height: 2rem;}
.decimaListStyle { list-style-type: decimal;}

/*--mobile menu--*/
.mobileContent { display: none;}
.mobileTop { padding: 10px 20px; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:space-between;}
.mobileBars { background: #fff; font-size: 1.875rem; border: 0px; color: #818181;}
.mobileSidepanel  { width: 0; position: fixed; z-index: 6; height: 100%; top: 0; left: 0; background-color: #262629; overflow-x: hidden; transition: 0.5s;}
.mobileSidepanel a { color: #fff;}
.mobileSidepanel a:hover { color: #fff;}
.mobileSidepanel .mobileBtn { right: 25px; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: space-between; background: #fff;}
.mobileBtn a { font-size: 40px; padding: 5px 10px;}
.mobileButton { background: none; padding: 20px 40px; color: #fff; border: 0px; width: 100%; text-align: left; font-size: 1.25rem; border-bottom: 1px solid #DB2019; border-top: 1px solid #DB2019;}
.mobileButton:focus(.collapsed) { background: hsl(240, 4%, 15%); color: #fff;}
.mobileBody { background: #262629;}
.mobileBody a { color: #818181;}
.mobileBody ul { padding: 0; margin: 0;}
.mobileBody ul > li { margin: 0 20px; padding: 10px 20px;}
.mobileTitle a { font-weight: 800; color: #FFF;}
.mobileBar{ background: #262629; padding: 4px 20px; display:flex; justify-content: space-between; align-items: center;}
.scrollBar { display: block; overflow: auto;}
.scrollBar::-webkit-scrollbar { width: 6px; background-color: #e5e5e5;}
::-webkit-scrollbar-thumb { background: rgb(193, 193, 193); border-radius: 10px;}
.jpcNavbar a:hover, .jpcSubnav:hover .jpcSubnavbtn, .jpcSubnavContent a:hover, .menuTitle a:hover, .mobileBody a:hover { color: #DB2019;}
.minorMu a { padding: 10px 20px; color:#e5e5e5; border-top: 1px solid #DB2019; margin: 0 20px; display: block;}
.titleFont { color: #9d8269;}

/*--Title--*/
.boxTitle { width: max-content; margin: auto;}
.boxTitle h3 { border-bottom: 2px solid #DB2019; padding: 20px 0 10px 0; width: 100%; text-align: center;}

/*--pdf icon--*/
.hpPdf { font-size: 0.75rem; font-weight: 700; border-radius: 4px; border: 1px #cbcbcb solid;}
.hpPdf a { color: #cbcbcb; display: block; padding: 4px 0; height: 100%;}
.hpPdf a:hover { color: #FFF; border-radius: 4px;}
.hpPdf a span { flex-grow: 1; transition: color 0.3s ease;}
.hpPdf i { font-size: 1.25rem;}


/* 檔案圖示特定顏色 */
.files-section .fa-file-pdf { color: #dc3545 }
.files-section .fa-file-word { color: #2b579a !important; }
.files-section .fa-file-excel { color: #217346 !important; }
.files-section .fa-file-powerpoint { color: #d24726 !important; }
.files-section .fa-file-archive { color: #6f42c1 !important; }
.files-section .fa-file-image { color: #fd7e14 !important; }
.files-section .fa-drafting-compass { color: #20c997 !important; }

/*--footer--*/
/*--1--*/
footer { background: #494752; font-size: 0.8rem; line-height: 30px;}
.footerLogo { width: 100px;}
.accordion-item { border: 0; background-color: #fff0;}
/*--2--*/
.footerLink { color: #AFAFAF;}
.footerLink:hover { color: #DB2019;}
.footerAreaBox { border: 0px;}
.footerAreaBox h6 { margin-bottom: 0px;}
.footerAreaBox h6 > .AreaBoxButton_A { border-bottom: 1px solid #5d5d5d; border-top: 0; border-right: 0; border-left: 0; font-weight: bolder; background: #494752; width: 100%; color: #AFAFAF; text-align: left; font-size: 0.85rem; padding: 8px 4px;}
.footerAreaBox h6 > .AreaBoxButton_B { border-bottom: 1px solid #5d5d5d; border-top: 0; border-right: 0; border-left: 0; background: #494752;}
.AreaBoxButton_B > i { color: #AFAFAF;}
button.AreaBoxButton_B:after { content: '\2212'; color:#AFAFAF; font-weight: bold; float: right; margin-left: 5px;}
button.AreaBoxButton_B.collapsed:after { content: "\002B";}
.AreaBoxBottom { background: #494752; color: #AFAFAF; padding: 0 8px;}
/*--3--*/
.boxs3 { padding: 0 20px; color: #FFF;}
.boxs3 p { color: #AFAFAF;}
/*--4--*/
.footerInvestor p { color: #AFAFAF;}
.footerIcon a { background: #EDEDEF; width: 40px; height: 40px; border-radius: 50px; padding: 12px 0; text-align: center; font-size: 1rem; display: block;}

/*--go to top and mail / Inquiry--*/
.emailBu { bottom: 70px; right: 10px;}
.topBackBu { bottom: 20px; right: 10px; }
.buStyle { z-index: 100; position: fixed; border-radius: 50px; background: rgb(255 255 255 / 48%); width: 40px; height: 40px; padding: 6px 0 0 0; text-align: center; display: block; border: 1px solid #C4C4C4;}
.buStyle img { width: 60%;}
.topBackBu a, .emailBu a { display: block;}
.buStyle:hover { background: rgb(222 222 222 / 48%);}

/*--Button style--*/
.readBu { text-align: center; padding: 0px 0 30px 0;}
.redButton { border: 0px; background: none;}
.redButton a { width: 200px; padding: 16px; display: block; color: #DB2019; border: 1px solid #FF0000; border-radius: 6px; background-color: rgb(255 255 255 / 10%); font-weight: 800;}
.redButton a:hover { background-color: #DB2019; color: #fff;}

/*-----------------cookie-------------------*/
.cookieBar { z-index: 5000; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items: center; position: fixed; width: 100%; padding: 10px 60px; background: rgb(219 32 25 / 70%); color: #fff; bottom: 0; left: 0; }
.cookieBar a { color: #fff1c7;}
.cookieBar a:hover { color: #4c0300;}
.cookieBar p { padding: 0 8px; line-height: 25px;}
.cookieClose { font-size: 2rem; border-left: 1px solid #FFF;}
.cookieClose i { margin: 0 20px;}
.logoSpacing { width: 100px; padding: 13px 0 13px 0px;}
/*-----------------privacy policy-------------------*/
.privacyList { line-height: 2rem; }
.privacyList li { list-style : disc;}

/*-------------------product Frame------------------*/
.productBg { background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);}
.productColor a { color: #818181;}
.productColor a:hover { color: #DB2019}
.cardFull { display: flex; flex-direction: column; height: 100%;}
.cardBody { flex: 1;}
.cardBody > div a { font-size: 0.875rem;}
.cardBody > h6 a { color: #000;}
.cardFull > div > button a { color: #FFF;}
.basdboardBox a { color: #818181; }
.basdboardBox a:hover { color: #DB2019;}




@media (max-width: 1200px) {
        .jpcNavbar { text-align: center;}
        .jpclink { padding: 25px 8px;}
        .computerMenu > .container { font-size: 0.8rem; max-width: 90%;}
}

@media (max-width: 1024px) {
        .computerMenu, .leftMu { display: none;}
        .mobileContent { display: block;}
        .searchBox > form > input { padding: 0px 6px;}
        .searchBox > form > input { width: 200px;}
        .contentBox { padding:0px;}
}

@media (max-width: 768px) {
    .languageBtn { font-size: 1.25rem; background: #262629;}
    .featuresButton { width: auto;}
    .breadCrumbs > .ContentAllFlex { display: block;}
    .ContentAllFlex { padding: 20px 0 0 0;}
    .webHight { padding: 0px 20px;}
}

@media (max-width: 576px) {
    .boxTitle { width: auto;}
    .mobileBar{ padding: 4px 10px;}
    .ContentAllFlex { display: block;}
    .featuresButton { width: 100%; margin: 4px 0;}
    .footerContent { width: 100%; display: block; text-align: center;}
    .footerContent > .ContentAllFlex { display: block;}
    .ContentAllFlex > div > .footerLogo { margin: 10px auto;}
    .cookieBar { padding: 10px;}
    .searchBox a { padding: 0;}
    .boxs3 { padding: 20px;}
}