@charset "utf-8";

/* CSS Document */
/*有加字尾_dm表自己客製的*/
/*手機版*/
body {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    /*padding-top: 106px;*/
    font-size: 14px;
    color:#222222;
}
a{
   outline: none;
   text-decoration: none;
}
:root {
    --rcvc-blue: #17458f;
}
/*文字強制不斷行*/
.nowrap_dm{
   white-space:nowrap; 
   display: inline-block;
}

/* 導覽列微調 */
.navbar-brand {
    font-weight: 800;
    color: var(--rcvc-blue) !important;
    font-size: 1.5rem;
    margin-right: 0px !important;
}
/*項目標籤*/
/*實心圓形*/
ul.disc_dm{
    list-style-type: disc;
}
/*數字*/
ul.decimal_dm{
    list-style-type: decimal;
}
/*回頂端*/
#gotop_dm {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 10px 15px;
    font-size: 20px;
    background-color: rgba(23, 69, 143, 0.5);
    border-radius: 100%;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

#gotop_dm:hover {
    background-color: rgb(17 43 84 / 90%);
}
.logo_outer_dm{
    width:260px;
}
.logo_dm {
    height: 40px;
}

/*menu*/


/*標準色號連結1*/
.textcolor_dm {
    color: #17458f;
}

.textcolor_dm:hover {
    color: #0f2b54;
}
/*文字顏色*/
.color_unified_md{
    color:#17458f;
}
.color_2_md{
    color:#222222;
}
/*標準色號按鈕*/
.buttoncolor_dm {
    background-color: #17458f;
    color: #ffffff;
    padding-top: 3px;
    cursor: pointer;
}

.buttoncolor_dm:hover,
.buttoncolor_dm:active {
    background-color: #0f2b54 !important;
    color: #ffffff !important;
}

/*標準色號連結*/
.acolor_dm {
    color: #17458f;
    text-decoration: none;
}

.acolor_dm:hover {
    color: #0f2b54;
}
.acolor_dm2 {
    color: #222222;
    text-decoration: none;
    cursor: pointer;
}
.acolor_dm2:hover {
    color: #17458f;
}
/*表格設連結*/
tr.acolor_dm2 td{
    color: #222222;   
}
tr.acolor_dm2:hover td{
    color: #17458f;
    cursor: pointer;
}


/*背景色*/
.bgcolor_dm {
    background: #17458f;
    color: #ffffff;
    padding: 4px 12px;
    margin-top: 7px;
}

/*文字大小*/
.fs-20_md {
    font-size: 20px;
}

.fs-19_md {
    font-size: 19px;
}

.fs-18_md {
    font-size: 18px;
}

.fs-17_md {
    font-size: 17px;
}

.fs-16_md {
    font-size: 16px;
}

.fs-15_md {
    font-size: 15px;
}

.fs-14_md {
    font-size: 14px;
}

.fs-13_md {
    font-size: 13px;
}
.fs-12_md {
    font-size: 12px;
}
/*上下距css*/
.mb30_dm{
    margin-bottom: 30px;
}
.mt10_dm{
    margin-top: 10px;
}
.ml5_dm{
    margin-left: 5px;
}
/*超過第二行...*/
.text-line-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* 設定要在第幾行截斷 */
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 讓下拉選單的內容（文字+箭頭）垂直置中 */
.nav-link.dropdown-toggle {
    display: flex !important;
    align-items: center;
}

/* 修正箭頭的位置，讓它垂直居中在兩行文字旁邊 */
.nav-link.dropdown-toggle::after {
    margin-left: 5px;
    vertical-align: middle;
    margin-top: 0;
    /* 移除預設偏移 */
}

/* 統一設定導覽列文字顏色 */
.nav-link .d-flex span {
    /*transition: color 0.3s;*/
}

.nav-link:hover .d-flex span {
    color: #17458f !important;
}

/*menu*/
/*製作menu第三層下拉*/
/* 隱藏第三層選單 */
/* 讓第三層選單在電腦版也是垂直展開，不擋住其他選項 */
.inner-submenu {
    width: 100%;
    position: static !important;
    /* 取消彈出效果 */
    padding: 0;
    margin: 0;
    display: none; 
    background-color: #f8f9fa;
}

/* 展開時的狀態 */
.inner-submenu.show {
    display: block !important;
}

/* 調整選單項目的 Hover 顏色，讓藍色區塊不會太突兀 */
.custom-submenu-trigger.active {
    background-color: #17458f !important;
    color: white !important;
}

/* 箭頭旋轉 */
.custom-submenu-trigger.active .submenu-arrow {
    transform: rotate(180deg);
}
.collapse_dm .nav-link .flex-column>span,
.collapse_dm .nav-link .flex-column>small,
.navbar-nav .nav-link.active, 
.navbar-nav .nav-link.show {
    color: #444444 !important;
}
.collapse_dm .nav-link:hover .flex-column>span,
.collapse_dm .nav-link:hover .flex-column>small {
    color: #17458f !important;
}
header {
/*    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: #ffffff;*/
}

header .sticky-top {
    width: 100%;
}

.navbar a.dropdown-item.py-2.ps-4 {
    color: #212529;
    background: #efefef;
    font-size: 16px !important;
}

.navbar a.dropdown-item.py-2.ps-4:hover {
    background: #dbdbdb;
}

/*menu end*/
/*header_top*/
.header_top {
    background-color: #17458f;
    padding-bottom: 5px;
    padding-top: 2px;
}

.header_top {
    text-align: right;
}

.header_top .search-bar {
    max-width: 142px;
    vertical-align: middle;
    display: inline-block;
}

.header_top .search-bar input [type=search] {
    width: 100%;
    height: auto;
}

.header_top .search-bar .input-group-addon {
    padding: 5px 5px;
}

.header_top .search-bar {
    padding: 0;
    position: relative;
    border-radius: 4px;
    box-shadow: none;
    background: 0 0;
}

.header_top .search-bar input[type=search].search-string {
    float: right;
    width: calc(100% - 25px);
    min-height: 24px;
    padding-right: 25px;
    position: relative;
    top: 0;
    color: #17458f;
    font-family: 'Open Sans Condensed', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    opacity: 1;
    z-index: 10;
}

.header_top .search-bar input[type=search].search-string::-moz-placeholder {
    color: #555;
    opacity: 1;
}

.header_top .search-bar input[type=search].search-string:-ms-input-placeholder {
    color: #555;
}

.header_top .search-bar input[type=search].search-string::-webkit-input-placeholder {
    color: #555;
}

.header_top .search-bar input[type=search].search-string:-moz-placeholder {
    color: #555;
}

.header_top .search-bar input[type=search].search-string::-webkit-input-placeholder {
    color: #555;
}

.header_top .search-bar input[type=search].search-string::-moz-placeholder {
    color: #555;
}

.header_top .search-bar input[type=search].search-string:-ms-input-placeholder {
    color: #555;
}

.header_top .search-bar input[type=search].search-string.active {
    -webkit-transition: width .6s ease, border-radius .6s ease;
    -moz-transition: width .6s ease, border-radius .6s ease;
    -ms-transition: width .6s ease, border-radius .6s ease;
    -o-transition: width .6s ease, border-radius .6s ease;
    transition: width .6s ease, border-radius .6s ease;
    -webkit-animation: slide-close .6s 1ms normal ease both;
    -moz-animation: slide-close .6s 1ms normal ease both;
    -ms-animation: slide-close 600ms 1ms normal ease both;
    animation: slide-close .6s 1ms normal ease both;
}

.header_top .search-bar input[type=search].search-string.active:hover+.input-group-addon {
    color: #17458f;
    background: #17458f;
}

.header_top .search-bar input[type=search].search-string.active:focus {
    width: calc(100% - 25px);
    padding-right: 25px;
    color: #17458f;
    box-shadow: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, .5);
    opacity: 1;
    -webkit-transition: width .6s, border-radius .6s ease;
    -moz-transition: width .6s, border-radius .6s ease;
    -ms-transition: width .6s, border-radius .6s ease;
    -o-transition: width .6s, border-radius .6s ease;
    transition: width .6s, border-radius .6s ease;
    -webkit-animation: slide-open .6s 1ms normal ease both;
    -moz-animation: slide-open .6s 1ms normal ease both;
    -ms-animation: slide-open 600ms 1ms normal ease both;
    animation: slide-open .6s 1ms normal ease both;
    cursor: text;
}

.header_top .search-bar input[type=search].search-string.active:focus::-moz-placeholder {
    color: #555;
    opacity: 1;
}

.header_top .search-bar input[type=search].search-string.active:focus:-ms-input-placeholder {
    color: #555;
}

.header_top .search-bar input[type=search].search-string.active~.input-group-addon {
    -webkit-animation: icon-hide .6s 1ms normal ease both;
    -moz-animation: icon-hide .6s 1ms normal ease both;
    -ms-animation: icon-hide 600ms 1ms normal ease both;
    animation: icon-hide .6s 1ms normal ease both;
}

.header_top .search-bar .input-group-addon {
    float: right;
    width: 25px;
    min-height: 24px;
    height: 100%;
    position: absolute;
    top: -5px;
    right: 0;
    color: #17458f;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    background: 0 0;
    cursor: pointer;
    z-index: 40;
}

.header_top .search-bar .input-group-addon.focus a {
    color: #17458f;
}

.header_top .search-bar .input-group-addon a {
    color: #555;
}

.header_top .search-bar .input-group-addon a:hover {
    color: #17458f;
}

.header_top .line_btn {
    width: 24px;
    margin-left: 3px;
    margin-right: 7px;
}

.header_top .mail_btn {
    font-size: 1.9rem;
    display: block;
    float: right;
    margin-top: -9px;
}
/*article*/
article{
    padding-top: 20px;
    padding-bottom: 50px;
}
article .card_dm {
    border-color: #dee2e6;
}

article .card_dm>.card-header {
    background-color: #ececec;
    color: #17458f;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    font-weight: bold;
}
/*上框底黃色*/
article .card_dm>.card-header.color2_dm{
    background: #f7a81b;
    color:#ffffff;
}
/*上框底標準色*/
article .card_dm>.card-header.color3_dm{
    background: #17458f;
    color:#ffffff;
}
article .card_dm>.card-header h4,
article .card_dm>.card-header small {
    display: inline-block
}

article .card_dm>.card-body {
    color: #222222;
    text-align: left;
}

article .card_dm>.card-header>h4,
article .card_dm>.card-header>small {
    display: inline-block;
}

article .card_dm>.card-header>small {
    padding-left: 5px;
}

article .card_dm .con_dm {
    width: 90%;
    margin: auto;
    margin-top: 25px;
    max-width: 300px;
    text-align: center;
}

article .card_dm .w-100 {
    cursor: pointer;
}

article .card_dm .align-items-center {
    margin: 30px auto;

}

article .card_dm .align-items-center .col-auto>.img-fluid {
    cursor: pointer;
}
article .card_dm {
    border-color: #dee2e6;
}

article .card_dm>.card-header {
    background-color: #ececec;
    color: #17458f;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    font-weight: bold;
}

article .card_dm>.card-header h4,
article .card_dm>.card-header small {
    display: inline-block
}

article .card_dm>.card-body {
    color: #222222;
    text-align: left;
}

article .card_dm>.card-header>h4,
article .card_dm>.card-header>small {
    display: inline-block;
}

article .card_dm>.card-header>small {
    padding-left: 5px;
}

article .card_dm .con_dm {
    width: 90%;
    margin: auto;
    margin-top: 25px;
    max-width: 300px;
    text-align: center;
}

article .card_dm .w-100 {
    cursor: pointer;
}

article .card_dm .align-items-center {
    margin: 30px auto;

}

article .card_dm .align-items-center .col-auto>.img-fluid {
    cursor: pointer;
}


/*footer*/
footer {
    background-color: #17458f;
    color:#ffffff;
    /*margin-top: 20px;*/
}
footer .a_footer_dm{
    text-decoration: none;
    color:#ffffff;
}

footer .a_footer_dm:hover {
    text-decoration: underline;
}
/*切頁*/
.navigation_dm{
    margin-top: 40px;
}
.navigation_dm .pagination .page-link{
    color: #17458f;
}
.navigation_dm .pagination .page-link:hover,
.navigation_dm .pagination .page-link:active {
    background-color: #0f2b54 !important;
    color: #ffffff !important;
}
.BusinessCard{
    width:100%;
    max-width: 400px;
    margin:auto;
    display: block; 
}  
/*css自訂表格*/
.css_table_dm{
  display:table;
  width: 100%;
}
.css_tr_dm{
  display: table-row;
}
.css_td_dm{
  display: table-cell;
}
/*bg當圖片避免破版*/
.bg_img_dm{
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 1;
    transition: opacity 0.3s ease;
    cursor: pointer;
}
.bg_img_dm:hover{
    opacity: 0.9;
}
@media screen and (min-width: 992px) {

    /*電腦版*/
    /*menu*/
    .collapse_dm{
        margin-left:20px; 
    }
    .collapse_dm .flex-column span {
        text-align: center;
        display: block;
        width: 100%;
    }
    .collapse_dm .flex-column small {
        text-align: center;
        display: block;
        width: 100%;
    }
    /*footer*/
    footer .footer_logo_dm {
        width: 100%;
        max-width: 122px;
        margin-right: 8px;
    }
    footer .footer_outcenter{
        display: inline-block;
        text-align: left;
    }
    footer .footer_incenter{
        text-align: center
    }
    footer .footer_table_dm {
          display:table;
    }
    footer .footer_tr_dm{
          display: table-row;
    }
    footer .footer_td_dm{
        text-align: left;
        display: table-cell;
        vertical-align:middle;    
    }
    .pc_hide_dm{
        display: none;
    }
}

@media screen and (max-width: 991px) {

    /*手機版*/
    /*menu*/
    .collapse_dm .flex-column small {
        text-align: left;
    }

    .collapse_dm>.navbar-nav>.nav-item.px-2,
    .collapse_dm>.navbar-nav>.nav-item.px-3 {
        padding-left: 0px !important;
        margin: 5px 0;
    }
        /*footer*/
    footer .footer_logo_dm {
        width: 100%;
        max-width: 122px;
        margin-bottom: 10px;
    }
    footer .footer_td_dm{
        text-align: center;    
    }
    .phone_hide_dm{
        display: none;
    }
}