body {
    background-image: url('../images/back.jpg');
    background-repeat: repeat;
    background-attachment: fixed;
    /*background-attachment: scroll;*/
}

/*div {
    border:1px dashed pink;
}*/

ul {
    vertical-align: middle;
}

    ul.mylist {
        list-style-type: circle;
    }

li {
    margin: auto;
    /*margin-right:20px;*/
}

.nav-link:hover, .nav-link:focus {
    color: white;
    text-decoration: none;
}

.dropdown-item:hover, .dropdown-item:focus {
    /*background-color: #b4fb8e;*/
    background-color: #46bbf7;
    color: white;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.5s;
}

/*menu 按鈕*/
.WebBtn {
    background-color: white;
    /*border: 1px solid #17a2b8;
       color: #17a2b8;*/
    /* 2019.11.01 - 改色 */
    /*border: 1px solid #46bbf7; 
       color: #46bbf7;*/
    /* 2021.02.23 - 顏色加深 */
    border: 1px solid #0072E2;
    color: #0072E2;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    padding: 15px 15px;
    /*margin: 4px 2px;*/
    margin: 5px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.5s;
    cursor: pointer;
    /*pointer-events: auto;*/
}

    .WebBtn:hover {
        color: white;
        /*background-color: #138496;
           background-color: #46bbf7;*/
        /*border-color: #117a8b;
           border-color: #46bbf7;*/
        background-color: #0072E2;
        border-color: #0072E2;
        text-decoration: none;
    }
    /*.Mybtn:disabled,*/
    .WebBtn.disabled {
        /*opacity: 0.65;*/
        /*pointer-events: none;*/
        color: white;
        /*background-color: #46bbf7;
        border-color: #46bbf7;*/
        background-color: #005AB5;
        border-color: #005AB5;
        text-decoration: none;
        cursor: default;
    }

/*menu 紅色按鈕*/
.WebProbtn {
    background-color: #FF7878;
    border: 1px solid #FFDEDE;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    padding: 15px 15px;
    /*margin: 4px 2px;*/
    margin: auto;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.5s;
    cursor: pointer;
}

    .WebProbtn:hover {
        color: #FF7878;
        background-color: #fff;
        border-color: #FF7878;
        text-decoration: none;
    }



div#Chyiou_marquee {
    position: relative;
    overflow: hidden; /* 超出範圍的部份要隱藏 */
    width: 375px;
    height: 25px;
    border: 1px solid #ccc;
}

    div#Chyiou_marquee ul, div#aChyiou_marquee li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    div#Chyiou_marquee ul {
        position: absolute;
    }

        div#Chyiou_marquee ul li a {
            display: block;
            overflow: hidden; /* 超出範圍的部份要隱藏 */
            font-size: 12px;
            height: 25px;
            line-height: 25px;
            text-decoration: none;
        }


/*產品下載 - 廣播 - 按鈕*/
.ECLinkbtn {
    background-color: white;
    border: 1px solid #ff8000;
    color: #ff8000;
    text-align: center;
    border-radius: 4px;
    margin: auto;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    cursor: pointer;
    padding: 15px 15px;
    font-size: 1.2rem;
    text-decoration: none;
}

    .ECLinkbtn:hover {
        color: white;
        border-color: #F9D87B;
        text-decoration: none;
        box-shadow: 3px 3px 8px #DE7B23;
        /*向右移動動畫*/
        /*-webkit-transform: translate(30px, 0px);
        transform: translate(30px, 0px);*/
        background: -webkit-linear-gradient(left, #F0C654, #ff8000);
        background: linear-gradient(to right, #F0C654, #ff8000);
        #F0C654
    }

/*產品下載 - CPRWin11 - 按鈕*/
.CPRW11Linkbtn {
    background-color: white;
    border: 1px solid #0072e3;
    color: #0072e3;
    text-align: center;
    border-radius: 4px;
    margin: auto;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    cursor: pointer;
    padding: 15px 15px;
    font-size: 1.2rem;
    text-decoration: none;
}

    .CPRW11Linkbtn:hover {
        color: white;
        border-color: #80CCFF;
        text-decoration: none;
        box-shadow: 3px 3px 8px #80CCFF;
        background: -webkit-linear-gradient(left, #46a3ff, #80CCFF);
        background: linear-gradient(to right, #46a3ff, #80CCFF);
    }

/*產品下載 - 還原 - 按鈕*/
.CPRLinkbtn {
    background-color: white;
    border: 1px solid #0072e3;
    color: #0072e3;
    text-align: center;
    border-radius: 4px;
    margin: auto;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    cursor: pointer;
    padding: 15px 15px;
    font-size: 1.2rem;
    text-decoration: none;
}

    .CPRLinkbtn:hover {
        color: white;
        /*background-color: #0072e3;*/
        border-color: #97cbff;
        text-decoration: none;
        box-shadow: 3px 3px 8px #97cbff;
        background: -webkit-linear-gradient(left, #46a3ff, #0072e3);
        background: linear-gradient(to right, #46a3ff, #0072e3);
    }

/*產品下載 - 還原單機版 - 按鈕*/
.CPROneLinkbtn {
    background-color: white;
    border: 1px solid #7d7dff;
    color: #7d7dff;
    text-align: center;
    border-radius: 4px;
    margin: auto;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    cursor: pointer;
    padding: 15px 15px;
    font-size: 1.2rem;
    text-decoration: none;
}

    .CPROneLinkbtn:hover {
        color: white;
        border-color: #6f00d2;
        text-decoration: none;
        box-shadow: 3px 3px 8px #6f00d2;
        background: -webkit-linear-gradient(left, #be77ff, #8600ff);
        background: linear-gradient(to right, #be77ff, #8600ff);
    }

/*產品下載 - 試用申請 - 按鈕*/
.TryLinkbtn {
    background-color: white;
    color: #0066cc;
    border: 1px solid #0066cc;
    border-radius: 4px;
    margin: auto;
    cursor: pointer;
    padding: 20px 20px;
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

    .TryLinkbtn:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-decoration: none;
        background: #61B0FF;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .TryLinkbtn:hover, .TryLinkbtn:focus, .TryLinkbtn:active {
        color: white;
        border-color: #005ab5;
        text-decoration: none;
        box-shadow: 3px 3px 8px #005ab5;
    }

        .TryLinkbtn:hover:before, .TryLinkbtn:focus:before, .TryLinkbtn:active:before {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
            text-decoration: none;
            border-color: #005ab5;
            box-shadow: 3px 3px 8px #005ab5;
            background: -webkit-linear-gradient(left, #61b0ff, #0066cc);
            background: linear-gradient(to right, #61b0ff, #0066cc);
        }


/*.TryLinkbtn {
    background-color: white;
    color: #0066cc;
    border: 1px solid #0066cc;
    border-radius: 4px;
    margin: auto;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    cursor: pointer;
    padding: 20px 20px;
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
}

    .TryLinkbtn:hover {
        color: white;
        border-color: #005ab5;
        text-decoration: none;
        box-shadow: 3px 3px 8px #005ab5;
        background: -webkit-linear-gradient(left, #0080ff, #0066cc);
        background: linear-gradient(to right, #0080ff, #0066cc);
    }*/

/*按鈕基本樣式*/
.MyLinkbtnDiv {
    /*height: 100px;*/
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

/*技術通報 圖示基本設定*/
.WebIcon {
    width: 70px;
    height: 70px;
    text-align: right;
}

/*技術通報 大圖示設定*/
.WebBgIcon {
    width: 50px;
    height: 50px;
    text-align: right;
}

/*banner 設定*/
.sTop {
    height: 150px;
    padding-right: 0;
    padding-left: 0;
}

/*網頁基本字型設定*/
.WebFont {
    font-size: 1.2rem;
    color: black;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

    .WebFont a:hover {
        text-decoration: none;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        background-color: #46bbf7;
        color: white;
    }

/*網頁重點字型設定 - 反白紅底*/
.WebImpFont {
    font-size: 1.2rem;
    color: red;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

    .WebImpFont a:hover {
        text-decoration: none;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        background-color: #ff5151;
        color: white;
    }

    /*網路喚醒 - tooltip解說*/
.wol-tootip {
    position: relative;
    display: inline-block;    
    cursor: help;
}

    .wol-tootip .wol-tootiptext {
        display: inline-block;
        border-bottom: 1px dotted #0000c6;
        visibility: hidden;
        background-color: #0072e3;
        color: #ffffff;
        width: 180px;
        border-radius: 3px;
        padding: 3px;
        box-shadow: 3px 3px 8px #2894ff;
                                               /*#46bbf7;*/
        /*tooltip 顯示位置*/
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: 60%;
    }
    .wol-tootip:hover .wol-tootiptext {
        visibility: visible;
    }

/*舊版軟體 - 廣播 - 設定*/
/*.DLChyiouBannerStyle {
    font-size: 1.2rem;
    color: white;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;  
    background: -webkit-linear-gradient(left, #ff8000, #fff);
    background: linear-gradient(to right, #ff8000, #fff);
}

.DLChyiouStyle {
    font-size: 1.2rem;
    text-align: center;
    background-color: #ff8000;
    color: #fff;
}

    .DLChyiouStyle button {
        background-color: #ea7500;
        border: 1px solid #fff;
        color: white;
        text-align: center;
        border-radius: 4px;
        margin: auto;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        cursor: pointer;
        padding: 10px 15px;
        font-size: 1.2rem;
        text-decoration: none;       
    }

        .DLChyiouStyle button:hover {
            color: #ea7500;
            border-color: #ea7500;
            text-decoration: none;
            background-color: snow;
        }

        .DLChyiouStyle button i {
            display: none;
        }

        .DLChyiouStyle button:hover i {
            display: inline-block;
        }*/

/*舊版軟體 - 還原 - 設定*/
/*.DLCPRBannerStyle {
    font-size: 1.2rem;
    color: white;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(left, #004b97, #fff);
    background: linear-gradient(to right, #004b97, #fff);
}

.DLCPRStyle {
    font-size: 1.2rem;
    text-align: center;
    background-color: #004b97;
    color: #fff;
}

    .DLCPRStyle button {
        background-color: #004b97;
        border: 1px solid #fff;
        color: white;
        text-align: center;
        border-radius: 4px;
        margin: auto;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        cursor: pointer;
        padding: 10px 15px;
        font-size: 1.2rem;
        text-decoration: none;
    }

        .DLCPRStyle button:hover {
            color: #004b97;
            border-color: #004b97;
            text-decoration: none;
            background-color: snow;
        }

        .DLCPRStyle button i {
            display: none;
        }

        .DLCPRStyle button:hover i {
            display: inline-block;
        }*/

/*軟體供應契約 - 表格*/
.WebTable {
    width: 100%;
    margin-bottom: 1rem;    
    border-top: 2px dotted #ddddff;
}
     /*表格 - 主表格抬頭設定*/
    .WebTable tr:nth-of-type(2) {
        background-color: #66B3FF;
    }

    .WebTable th, .WebTable td {
        padding: 0.75rem;
    }

    .WebTable thead td, .WebTable thead th {
        border-bottom-width: 2px;
    }

    .WebTable tbody tr:nth-of-type(odd) {
        background-color: #ffffff;
    }

    .WebTable tbody tr:nth-of-type(even) {
        background-color: #d2e9ff;
    }

    .WebTable td {
        text-align: center;
    }

    .WebTable tbody tr:hover {
        color: #212529;
        background-color: #fff7ff;
    }

/*我們的客戶 - 表格*/
.MyCusTable {
    /*border: 1px solid #d2e9ff;*/
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

    .MyCusTable th {
        padding-bottom: 0.75rem;
        border-bottom: 1px dotted #00bb00;
    }

    .MyCusTable td {
        padding: 0.75rem;
        width: 50%;
        border-bottom: 1px dotted #00bb00;
    }


    .MyCusTable tbody tr:hover {
        background-color: #dfffdf;
    }

/*我們的客戶 - 國中小使用 - 表格*/
.MyCusSTable {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

    .MyCusSTable th {
        padding-bottom: 0.75rem;
        border-bottom: 1px dotted #00bb00;
    }

    .MyCusSTable td {
        padding: 0.75rem;
        width: 33%;
        border-bottom: 1px dotted #00bb00;
    }

    .MyCusSTable tbody tr:hover {
        background-color: #dfffdf;
    }

/*test*/
.sidenav {
    width: auto;
    height: auto;
    margin-left: 0px;
}

    .sidenav a {
        text-decoration: none;
    }

    .sidenav li {
        text-align: justify;
        padding: .5rem;
        padding-left: 1rem;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
        background-color: #000;
        border: 1px solid #333;
    }

        .sidenav li a {
            color: #fff;
        }

            .sidenav li a:active {
                border-color: #02d3f5;
            }

        .sidenav li:hover {
            /*border-radius: 0 .5rem .5rem 0;*/
            border-color: #02d3f5;
            -webkit-transform: translate(30px, 0px);
            transform: translate(30px, 0px);
            background: -webkit-linear-gradient(left, #006a7b, #002340);
            background: linear-gradient(to right, #006a7b, #002340);
        }

        .sidenav li:active {
            border-color: #02d3f5;
        }