@charset "utf-8";
/*  ===== 基本覆寫 ===== */
*{font-family:Verdana,微軟正黑體, Microsoft JhengHei, Arial, Helvetica, sans-serif;}
html,body{height:100%; margin:0; padding:0; overflow-x: hidden;}
body{font-size: 1em;overflow-x: hidden;}

/*  ===== ochi flex框架 ===== */
/* mobile menu  */
.ochisidebar{width:100%;display: none;}
#sidebarmenu{width:100%;}
.switchsidebarbox{text-align:center; border-top: 1px solid #c5c5c5;border-bottom: 1px solid #c5c5c5;}
.switchsidebarbox a{color:#292929; font-size: 2.5em;}

.deskmenubar{
    height:3em;background-color: #f0f0f0; font-size:1.2em;
}

/*  ===== 系統使用第三方套件 ===== */
/* superfish menu */
.superfishmenu ul > li > a{
    padding: 0.6em 1em;
    text-decoration: none;
    color:var(--ochi-primary);
    font-weight: bold;
}
.superfishmenu  ul  li:hover a,.superfishmenu  ul  li.sfHover a{
    background: #dfdfdf;transition: all ease-in-out 0.2s;
}
.superfishmenu  ul > li:hover a,.superfishmenu  ul > li.sfHover a{
    background-color: var(--ochi-primary);
    color: #fff;
    border-radius: 5px;
}
.superfishmenu  ul  li  ul  li{
    background: #dfdfdf;
    border-bottom:1px solid #c5c5c5;
}
.superfishmenu  ul  li  ul  li:last-child{border-bottom:0;}

.superfishmenu  ul  li  ul  li a:hover,
.superfishmenu  ul  li  ul  li.sfHover a:hover,
.superfishmenu ul li ul li ul li,
.superfishmenu ul li ul li.sfHover ul li a{
    background: #cecece;
}
.superfishmenu ul li ul li.sfHover ul li a:hover{
    background: #cecece;
}
.superfishmenu > ul li.activemenu {
    background: #c5c5c5;
}
/* metisMenu custom */
ul.metismenu{margin:0 0 0 -40px; border-top: 1px solid #c5c5c5;}
ul.metismenu ul{margin:0 0 0 -40px;}
ul.metismenu li{list-style: none; margin: 0;}
ul.metismenu li a{text-decoration:none;border-bottom: 1px solid #c5c5c5; padding: 7px 15px; display: block; background: #f4f4f4;color:#000;}
ul.metismenu li ul li a{padding-left: 30px;background: #e8e8e8;}
ul.metismenu li ul li ul li a{padding-left: 45px;background: #d9d9d9;}

/* Magnific Popup */
.magpopup{
    position: relative;
    background: #FFF;
    padding: 0px;
    width: auto;
    margin: 20px auto;
    border-radius:10px;
}
.magSizeS{max-width: 600px;}
.magSizeM{max-width: 900px;}
.magSizeL{max-width: 1300px;}

.magpopupTitle{padding:10px; border-radius:10px 10px 0 0; font-size:1.1em;
    border-bottom:1px solid #c8c8c8; background-color:#f1f1f1;
    background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #ededed 60%, #dedede 100%);
    background-image: -moz-linear-gradient(top, #f1f1f1 0%, #ededed 60%, #dedede 100%);
    background-image: -ms-linear-gradient(top, #f1f1f1 0%, #ededed 60%, #dedede 100%);
    background-image: -o-linear-gradient(top, #f1f1f1 0%, #ededed 60%, #dedede 100%);
    background-image: linear-gradient(to bottom, #f1f1f1 0%, #ededed 60%, #dedede 100%);
}


/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.5;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}
/*  ===== 套件覆寫用CSS ===== */
/* 覆寫bootstrap初始設定 */
.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0px;
    padding-right: 0px;
}
/* 修正datepicker年月寬度 */
.xdsoft_datetimepicker .xdsoft_month {
    width: 80px;
}
.xdsoft_datetimepicker .xdsoft_year{
    width: 68px;
}
/* 修正superfish */
.superfishmenu > ul{margin-bottom: 0;}


/*  ===== RWD處理:系統自訂 ===== */
/* 小於576px的螢幕:手機直 */
@media (max-width: 767px) {
    /* LOGO info */
    .syslogobox{text-align: center;}
    .sysinfobox{text-align: right;}
    /* desktop menu */
    .deskmenubar{display: none;}
    #servicewrapper{width: 100%;}
    .hasmore,.nomore{display: none;}
    .cardstyleV2{max-height: inherit; }
    .cardstyleV2:hover{max-height:inherit; }
    .price3colbox{width: 90%; margin: 0 auto;}
}
/* 介於768~992px的螢幕:平板橫 */
@media (min-width: 768px) {
    /* mobile menu switch button */
    .switchsidebarbox{display: inherit;}
    /* desktop menu */
    .deskmenubar{display: none;}
    #servicewrapper{width: 100%;}
    .hasmore,.nomore{display: none;}
    .cardstyleV2{max-height: inherit; }
    .cardstyleV2:hover{max-height:inherit; }
    .price3colbox{width: 90%; margin: 0 auto;}
}
/* 大於992px的螢幕 */
@media (min-width: 992px) {
    /* mobile menu switch button */
    .switchsidebarbox{display: none;}
    /* desktop menu */
    .deskmenubar{display: inherit;}
    #servicewrapper{width: 100%;}
    .hasmore,.nomore{display: inherit;}
    .cardstyleV2{max-height: 241px; overflow-y: hidden;transition: max-height 0.5s ease-in-out,box-shadow 0.2s ease-in-out;box-shadow: 0px 3px 6px 0px rgba(61,89,199, 0.15);}
    .cardstyleV2:hover{max-height:510px; box-shadow: 0 14px 28px rgba(61,89,199,0.25), 0 10px 10px rgba(61,89,199,0.22);}
    .price3colbox{width: 85%; margin: 0 auto;}
}
@media (min-width: 1400px) {
    #servicewrapper{width: 1320px;}
    .price3colbox{width: 75%; margin: 0 auto;}
}
/* Wrapkit Lite修正 */
body{color: #161616;font-weight: normal;}
.form-control{padding: 0.375rem 0.75rem;}
.btn{padding:0.375rem 0.75rem;}
.table td,.table th{color: #161616!important;}
.btn-outline-dark{color:#263238;transition: all ease-in-out 0.2s;}
.d-flexOchi{display: flex;}
.breadcrumb{padding-left: 0; padding-right: 0;}
/* 本系統專用 */
#backToTop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 64px;
    height: 64px;
    z-index: 999;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
/* 顏色尺寸 */
:root {
    --ochi-primary: #4148b3;
    --ochi-primary-dark: #131976;
    --ochi-gray:#f4f4f4;
    --ochi-black:#373737;
    --ochi-Dblue:#3d59c7;
}
.logoword a{color:var(--ochi-primary); font-size:2rem; font-weight:bold;text-decoration: none;border-bottom: 0;transition: all ease-in-out 0.2s;}
.logoword a:hover{color:var(--ochi-primary-dark);}
#switchsidebarmenu img{height: 2rem;}
.bxlinkbox .bx-wrapper{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    background: -moz-mac-accentregularshadow;
}
.bxlinkbox ul,.bxlinkbox ul li{margin-left: 0; padding-left: 0;}
.indexadsliderbox{max-width: 1920px; margin-left: auto; margin-right: auto;}
.graybg{background-color:var(--ochi-gray); }
.fontBlack{color:var(--ochi-black);}
.footerbg{background-color:var(--ochi-Dblue);}
.cardstyle{box-shadow: 0px 0px 10px -1px rgba(61,89,199,0.75);}
#nodingbox{width:40px;}
.titlellipsis{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.conForThreeLine{overflow: hidden; text-overflow: ellipsis; white-space: normal;word-wrap: break-word;-webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;}

/* indexV2 */
.indexv2morebtn{animation: color-change 1s infinite; font-size: 1rem; font-weight: bold;}
@keyframes color-change {
    0% { color: #ffa200; }
    50% { color: #ff4d00; }
    100% { color: #ffa200; }
}
.bounceicon{
    display: inline-block;
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    padding-right: 5px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}
/* page */
.headerboxSTY{box-shadow: 0px 0px 15px rgba(0,0,0,.1);}
.filetitle{border-bottom:2px solid var(--ochi-primary); padding-bottom:5px;  display:inline-block; margin-bottom:-6px;}
.filetitlewrapper{border-bottom:1px solid #bababa; padding:5px 0;}
.filetitlewrapper .itemright{float: right; padding-top: 15px;}
.filetitlewrapper .btnright{float: right; padding-top: 5px;}
.icosA{font-size: 4rem; padding: 10px 0;}
#myTab > li > button.active{
    border-color: #b6b6b6;
    border-bottom-color: transparent;
    background: var(--ochi-gray);
}
.nav-tabs {
    border-bottom: 1px solid #b6b6b6;
}
/* tooltip custom */
.tooltipTypeA{
    --bs-tooltip-bg:#fffcd8;
    --bs-tooltip-color: #2c2c2c;
    --bs-tooltip-max-width: 650px;
    --bs-tooltip-opacity:1;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}
.tooltipTypeA .tooltip-inner{text-align: left;}
.icosA2{font-size: 6rem;}
.dm-uploader {
    border: 0.25rem dashed #A5A5C7;
    text-align: center;
}