@import "/inc/css/all.css";
@import "/inc/css/btn.css";

body {
    background: #bdbdbd;
}

/*---- 最外層包裝 ----*/
#wrapper {
    width: 100%;
    margin: 0 auto;
    background: #fff url("/certificate/images/header_bg.png") repeat-x top center;
    position: relative;
}

#header {
    width: 1000px;
    height: 100px;
    margin: 0 auto;
    color: #fff;
    position: relative;
}

#navbar {
    width: 1000px;
    margin: 0 auto;
    color: #333;
}

.logo {
    padding: 10px 0 0 5px;
    height: 90px;
}

.text {
    padding: 25px 5px 0 0;
    font: 14px/1.5 微軟正黑體,Arial;
    text-align: right;
}

.link_web {
    color: #fff;
    text-decoration: none;
    padding: 0 5px;
}

    .link_web:hover {
        color: #fff;
        text-decoration: underline;
    }


#content {
    width: 100%;
    background: url("/certificate/images/content_bg3.png?ver=12") no-repeat center 0px;
    margin: 0 auto;
    z-index:3;
}

.index {
    width: 1100px;
    margin: 0 auto;
}

.index_menu {
    position: relative;
    top: -40px;
    left: 260px;
    background: #cc0000;
}

    .index_menu li {
        float: left;
        margin-right: 35px;
        list-style-type: none;
    }

.index_Features a {
    display: block;
    width: 126px;
    height: 125px;
    background: url("/certificate/images/index_menu.png") no-repeat 0 0;
}

    .index_Features a:hover {
        display: block;
        width: 126px;
        height: 125px;
        background: url("/certificate/images/index_menu.png") no-repeat -126px 0;
    }

.index_Study a {
    display: block;
    width: 126px;
    height: 125px;
    background: url("/certificate/images/index_menu.png") no-repeat 0 -125px;
}

    .index_Study a:hover {
        display: block;
        width: 126px;
        height: 125px;
        background: url("/certificate/images/index_menu.png") no-repeat -126px -125px;
    }

.index_QA a {
    display: block;
    width: 126px;
    height: 125px;
    background: url("/certificate/images/index_menu.png") no-repeat 0 -250px;
}

    .index_QA a:hover {
        display: block;
        width: 126px;
        height: 125px;
        background: url("/certificate/images/index_menu.png") no-repeat -126px -250px;
    }

.index_Download a {
    display: block;
    width: 126px;
    height: 125px;
    background: url("/certificate/images/index_menu.png") no-repeat 0 -375px;
}

    .index_Download a:hover {
        display: block;
        width: 126px;
        height: 125px;
        background: url("/certificate/images/index_menu.png") no-repeat -126px -375px;
    }

.index img {
    padding: 40px 0 60px 0;
}
/*.index img{
 padding:30px 0 80px 0;
}*/

.index2 {
    width: 1000px;
    margin: 0 auto;
}

.Point {
    width: 900px;
    padding-bottom: 20px;
    height: 5px;
    margin: 0 auto;
    background: url("/certificate/images/point_001.png") repeat-x;
}

#Box_bg {
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 30px;
    background: url("/certificate/images/Box_bg.png") no-repeat;
    z-index: 1;
    position: relative;
}

#Box {
    width: 920px;
    margin: 0 auto;
    padding: 30px 0;
}

    #Box h1 {
        font: 25px/1.5 微軟正黑體,Arial;
        background: url("/certificate/images/icon_title001.png") no-repeat 5px 18px;
        color: #333;
        padding: 10px 0 10px 40px;
    }

    #Box h2 {
        font: 20px/1.5 微軟正黑體,Arial;
        background: url("/certificate/images/icon_title002.png") no-repeat 0px 17px;
        color: #333;
        padding: 10px 0 10px 20px;
    }


.bar {
    background: #c5c5c5;
    height: 1px;
    border-bottom: 5px solid #e4e4e4;
    margin: 0 0 20px 0;
}

#Box h3 {
    font: 15px/1.5 微軟正黑體,Arial;
    color: #cc0000;
}
#Box h5 {
    font-size: 24px;
    color: #cc0000;
    font-weight:900;
}

#Box_all {
    width: 830px;
    margin: 0 auto;
}

#Box_left {
    width: 200px;
    float: left;
}

#detail_left ul {
    list-style-type: none;
}

    #detail_left ul li {
        text-align: left;
        text-decoration: none;
    }

        #detail_left ul li a {
            text-align: left;
            text-decoration: none;
        }

.menu_on {
    display: block;
    margin: 5px;
    color: #ffffff;
    padding: 5px 0 5px 10px;
    text-decoration: none;
    background: #c6000f;
    border-radius: 2px;
    behavior: url(/inc/css/PIE.htc);
}

.menu a {
    display: block;
    margin: 5px;
    color: #333333;
    text-decoration: none;
    padding: 5px 0 5px 10px;
    background: #fff;
}

    .menu a:hover {
        display: block;
        margin: 5px;
        color: #333333;
        background: #ccc;
        text-decoration: none;
        padding: 5px 0 5px 10px;
        background: #d1d1d1;
        border-radius: 2px;
        behavior: url(/inc/css/PIE.htc);
    }

.menusub_on {
    display: block;
    margin: 5px 0 5px 25px;
    padding: 5px 0 5px 20px;
    color: #cc0000;
    text-decoration: none;
    background: url(/images/menu_icon.png) no-repeat 0 -100px;
}

.menusub a {
    display: block;
    margin: 5px 0 5px 25px;
    padding: 5px 0 5px 20px;
    color: #333333;
    text-decoration: none;
    background: url(/images/menu_icon.png) no-repeat 0 0;
}

    .menusub a:hover {
        display: block;
        margin: 5px 0 5px 25px;
        padding: 5px 0 5px 20px;
        color: #cc0000;
        text-decoration: none;
        background: url(/images/menu_icon.png) no-repeat 0 -100px;
    }

#Box_right {
    width: 700px;
    float: right;
}


/*下載專區*/
.certificate {
 
    display:inline-block;
    vertical-align:top;
}
.certificate_info {
    color:#8c6239;
    font-size:1.2em;
   text-decoration:none;
}
.download_btn {
    position: relative;
    z-index: 0;
}

    .download_btn ul {
        margin-bottom: 30px;
    }

    .download_btn li {
        float: left;
        padding-left: 60px;
        list-style-type: none;
    }

.download_btn01 a {
    display: block;
    width: 255px;
    height: 202px;
    background: url("/certificate/download/images/download_btn001.png") no-repeat 0 0;
}

    .download_btn01 a:hover {
        display: block;
        width: 255px;
        height: 202px;
        background: url("/certificate/download/images/download_btn001.png") no-repeat -255px 0;
    }

.download_btn02 a {
    display: block;
    width: 255px;
    height: 202px;
    background: url("/certificate/download/images/download_btn001.png") no-repeat 0 -202px;
}

    .download_btn02 a:hover {
        display: block;
        width: 255px;
        height: 202px;
        background: url("/certificate/download/images/download_btn001.png") no-repeat -255px -202px;
    }


.download_attention {
    font-size: 12px;
    margin: 5px auto;
    text-align: center;
    position: absolute;
    top: 95px;
    left: 80px;
    color: #fff;
    z-index: 1;
}

    .download_attention span {
        font-size: 20px;
        font-weight: bold;
    }



.download2 {
    display: block;
    margin: 10px 20px;
}

    .download2 li {
        float: left;
        display: block;
        list-style-type: none;
    }

.download_btn2 a {
    display: block;
    width: 81px;
    height: 81px;
    margin-right: 20px;
    background: url("/certificate/download/images/download_btn002.png") no-repeat;
}

    .download_btn2 a:hover {
        background: url("/certificate/download/images/download_btn002.png") no-repeat -81px 0;
    }

.download_title2 {
    color: #cc0000;
    width: 555px;
    padding: 5px 0;
    border-bottom: 1px dotted #333;
}

.download_text2 {
    width: 550px;
    padding: 5px 0;
}

.title2 {
    font-size: 1.5em;
    font-weight: 700;
}
.list-info {
    margin:1.5em auto;
    font-size: 1.2em;
    font-weight: 700;
    list-style: none;
  
}
    .list-info li {
        margin-bottom:.8em;
    }
    .list-info li:before {
        content: "★";
        margin-right: .5em;    
    }
    .list-info>li:first-child
    {
        color:#cc0000;
    }
.attention {
    font-size: 1.3em;
    font-weight: 700;
    color: #cc0000;
    text-align: center;
    margin-top:1em;
}
/*操作說明，安裝說明*/
.operate {
    display: block;
    width: 100%;
    padding: 20px 0;
    background: #ffddde url(/certificate/images/bg_001.png);
    margin-bottom: 20px;
    list-style-type: none;
}

    .operate:hover {
    }

.step {
    width: 100%;
}

    .step li {
        list-style-type: none;
    }

.step_text {
    font: 15px/1.5 微軟正黑體,Arial;
    margin: 0 20px;
    padding: 10px 0;
}

.step_text_title {
    font: 30px/1.5 微軟正黑體,Arial;
    color: #cc0000;
    border-bottom: 2px dotted #cc0000;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.step_text_title2 {
    font: 12px/1.5 微軟正黑體,Arial;
    color: #cc0000;
    padding-top: 10px;
}

.step_text span {
    color: #197b30;
    padding: 0 5px;
}

.step_img {
    padding: 10px;
    margin: 0 20px;
    background: #FFF;
    border: 1px solid #bbb;
}

    .step_img img {
        border: 1px solid #5a5a5a;
        /*width:672px; */
        width: 635px;
    }
/*功能介紹*/
.intro {
    display: block;
    width: 100%;
    padding: 30px 0;
    background: #ffddde;
    margin-bottom: 20px;
    list-style-type: none;
}

    .intro:hover {
        border: 2px solid #f26d7d;
    }


    .intro li {
        list-style-type: none;
    }

.intro_text {
    width: 300px;
    margin: 0 20px;
    padding: 60px 0;
    float: left;
}

.intro_text_title {
    font: 20px/1.5 微軟正黑體,Arial;
    color: #cc0000;
    border-bottom: 2px dotted #cc0000;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.intro_text span {
    color: #197b30;
    padding: 0 5px;
}

.intro_img {
    float: right;
    padding: 10px;
    margin-right: 20px;
    background: #FFF;
    border: 1px solid #bbb;
}

    .intro_img img {
        border: 1px solid #5a5a5a;
    }





#divShow {
    background: #ffddde url("/certificate/images/icon_001.png") 20px 8px no-repeat;
    padding: 10px 0 10px 60px;
    border: 1px solid #ffc9cb;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.List_icon {
    display: block;
    width: 50px;
}

#footer {
    width: 100%;
    background: #4d4d4d;
    color: #fff;
    padding: 20px 0;
}

#company {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    font: 12px/1.5 Arial,微軟正黑體;
}

#account, #email {
    width: 350px;
}

.atable {
    margin: 50px 0 20px 0;
    position: relative;
}

.atable_top {
    height: 10px;
    width: 700px;
    background: url(/images/atable_001.png) no-repeat;
}

.atable_middle {
    width: 700px;
    background: url(/images/atable_002.png) repeat-y;
}

.atable_bottom {
    height: 10px;
    width: 700px;
    background: url(/images/atable_003.png) no-repeat;
}

.atable_title {
    font: 20px/1.5 Arial,微軟正黑體;
    background: url(/images/atable_title.png) no-repeat;
    position: absolute;
    width: 84px;
    height: 111px;
    color: #fff;
    left: 30px;
    padding-left: 20px;
    padding-top: 15px;
}

.atable_text {
    width: 80%;
    margin-left: 110px;
}

    .atable_text li {
        list-style-type: none;
        padding: 5px 0 5px 30px;
        font-weight: bold;
    }

        .atable_text li p {
            color: #333;
            font-weight: 100;
            font: 12px/1.5 Arial,微軟正黑體;
        }

    .atable_text h4 {
        color: #9d770b;
        font: 20px/1.5 Arial,微軟正黑體;
        border-bottom: 1px dotted #333;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }


/*QA*/

#qa_btn {
    z-index: 2;
    position: relative;
    float: right;
}

ul.accordionPart {
    margin: 10px 10px 50px 0;
}

    ul.accordionPart li {
        border-bottom: solid 1px #e3e3e3;
        padding-bottom: 12px;
        margin-top: 12px;
        list-style-type: none;
    }

.accordionPart .qa_title {
    padding-left: 28px;
    font: 15px/1.5 微軟正黑體,Arial;
    color: #cc0000;
    cursor: pointer;
    background: url(/images/icon_qa.png) no-repeat 0 2px;
}

.qa_title_on {
    color: #cc0000;
    text-decoration: underline;
}

.qa_content {
    margin: 6px 0 0;
    padding-left: 28px;
}

ul.accordionPart li a {
    color: #333;
    padding: 0 5px;
}

    ul.accordionPart li a:hover {
        color: #cc0000;
    }

.qa_content span {
    color: #8c6239;
}

.qa_content img {
    width: 630px;
    margin: 5px 0;
    border: 1px solid #333;
}

.qa_content ul div ol img {
    width: 590px;
    margin: 5px 0;
    border: 1px solid #333;
}

.qa_content ol li {
    border-bottom: 0;
    padding-bottom: 0;
    padding-bottom: 0;
    list-style-type: decimal;
}

.qa_content ol img {
    width: 590px;
    margin: 5px 0;
    border: 1px solid #333;
}

#qa_btn {
    z-index: 2;
    position: relative;
    float: right;
}

/*聯絡客服*/
#ContactUs {
    width: 100%;
    margin: 0 auto;
    background: url("images/header_bg.png") repeat-x top center;
    position: relative;
    font: 15px/1.5 微軟正黑體,Arial;
}

#header {
    width: 1000px;
    height: 100px;
    margin: 0 auto;
    color: #fff;
}

.ContactUs_logo {
    padding: 10px 0 0 5px;
}

.ContactUs_text {
    padding: 25px 5px 0 0;
    font: 12px/1.5 微軟正黑體,Arial;
    text-align: right;
}


.ContactUsStep {
    width: 900px;
    margin: 0 auto;
}

.ContactUsStep2 {
    width: 900px;
    margin: 0 auto;
}

    .ContactUsStep2 img {
        padding: 150px 0;
    }

.ContactUsPoint {
    width: 900px;
    padding-bottom: 20px;
    height: 5px;
    margin: 0 auto;
    background: url("images/point_001.png") repeat-x;
}

#ContactUsBox {
    width: 800px;
    margin: 0 auto;
    padding-bottom: 1em;
}

    #ContactUsBox label {
        float: left;
        width: 150px;
    }

    #ContactUsBox p {
        clear: both;
        padding: 8px 0;
    }

        #ContactUsBox p input {
        }

    #ContactUsBox label span {
        color: #f00;
    }

.ContactUs_btn {
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}

    .ContactUs_btn img {
        padding: 0 5px;
    }

#divShow {
    background: #ffddde url("images/icon_001.png") 20px 8px no-repeat;
    padding: 10px 0 10px 60px;
    border: 1px solid #ffc9cb;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.List_icon {
    display: block;
    width: 50px;
}

#footer {
    width: 100%;
    background: #4d4d4d;
    color: #fff;
    padding: 20px 0;
}

#company {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    font: 12px/1.5 Arial,微軟正黑體;
}

#account, #email {
    width: 350px;
}

#ContactUs a {
    color: #cc0000;
    padding: 0 5px;
    text-decoration: none;
}

    #ContactUs a:hover {
        color: #cc0000;
        text-decoration: underline;
    }

#ContactUs h3 {
    font: 15px/1.5 微軟正黑體,Arial;
    background: url("/certificate/images/icon_title003.png") no-repeat 0px 17px;
    color: #555;
    padding: 12px 0 10px 20px;
}

#ContactUs span {
    color: #8c6239;
}

#ContactUs h4 {
    font: 18px/1.5 微軟正黑體,Arial;
    color: #FF0000;
}

/*新手首次登入*/
.first {
    background: url(/trade/images/first_step02.png) no-repeat;
    margin: 20px 0;
    width: 100%;
}
/*.first:hover {border-top:2px solid #fc9ea2;
              border-bottom:2px solid #fc9ea2;
              background:#ffddde;
             }
.first:hover .first_step:before{ content:'Step';color:#CC0000; font:18px/1.2 Arial; vertical-align:middle; margin-top:5px;
             }
.first:hover .first_title{color:#CC0000;}
.first:hover .first_step{color:#CC0000;}*/

.first_step {
    float: left;
    width: 130px;
    height: 115px;
    color: #FFF;
    font: 100px/1.2 Arial;
    text-align: center;
}

.first_text {
    float: left;
    padding-left: 20px;
    width: 615px;
    font: 15px/1.5 微軟正黑體,Arial;
}

.first_title {
    color: #a67c52;
    font-size: 20px;
    margin: 10px;
}

#Box_all {
    width: 830px;
    margin: 0 auto;
}

    #Box_all span {
        color: #0284c3;
    }

    
/* ---------------------------------------------------------
            debug: user用手機瀏覽放大畫面時 header的右方被切斷了
            原因是 position: fixed, 且width=100%
            所以要排除這兩種
---------------------------------------------------------*/

@media screen and (max-width: 1000px) {
    #navigation {
        position: absolute;
    }

    #wrapper, #menu_div, #navigation, #content_index, #footer {
        width: 1200px;
    }
}

@media screen and (min-width: 1001px) {
    #navigation {
        position: fixed;
    }

    #wrapper, #menu_div, #navigation, #content_index, #footer {
        width: 100%;
    }
}

/*202205新增網頁憑證*/

.webApply {
    text-align: center;
    display: flex;
    margin: 0 1em 1em 1em;
}

.webApplyTitle {
    color: #005998;
    font-size: 1.5em;
    line-height: 2em;
    font-weight: bold;
}
.webApplyTitle2 {
    color: #e0333f;
    font-size: 1.5em;
    line-height: 2em;
    font-weight: bold;
}
.webApply p {
    color: #000;
    font-size: 1em;
    line-height: 1.6em;
}

.webApply div {
    width: 48%;
    margin: 1em;
    padding: 2em;
    background-color: #f6f6f6;
}
.bBlue {
    background: #056fac;
    border: 1px solid #005998;
    box-shadow: 0 1px 2px #e2e2e2, 0 1px 1px #999;
    -webkit-box-shadow: 0 1px 2px #e2e2e2, 0 1px 1px #999;
    -moz-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;
    color: #fff;
    behavior: url(/inc/css/PIE.htc);
    padding: .8em 3em !important;
    font-size: 1.2em !important;
    text-align: center;
    margin-top:1.3em !important;
}
    .bBlue:hover {
        background: #178ccf;
        border: 1px solid #005998;
        box-shadow: 0 1px 2px #e2e2e2, 0 1px 1px #999;
        -webkit-box-shadow: 0 1px 2px #e2e2e2, 0 1px 1px #999;
        -moz-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;
        color: #fff;
        behavior: url(/inc/css/PIE.htc);
    }
    .bBlue span {
        font-size:1.4em;
        font-weight:bold;
        margin-bottom:.2em;
    }
.bPink {
    background: #e0333f;
    border: 1px solid #c3000e;
    box-shadow: 0 1px 2px #e2e2e2, 0 1px 1px #999;
    -webkit-box-shadow: 0 1px 2px #e2e2e2, 0 1px 1px #999;
    -moz-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;
    color: #fff;
    behavior: url(/inc/css/PIE.htc);
    padding: .8em 3em !important;
    font-size: 1.2em !important;
    text-align: center;
    margin-top: 1.3em !important;
}

    .bPink:hover {
        background: #f64552;
        border: 1px solid #c3000e;
        box-shadow: 0 1px 2px #e2e2e2, 0 1px 1px #999;
        -webkit-box-shadow: 0 1px 2px #e2e2e2, 0 1px 1px #999;
        -moz-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;
        color: #fff;
        behavior: url(/inc/css/PIE.htc);
    }

    .bPink span {
        font-size: 1.4em;
        font-weight: bold;
        margin-bottom: .2em;
    }
.bYellow {
    padding: 1em 1.2em !important;
    font-size: 1.4em !important;
    text-align: center;
    font-weight: bold !important;
    margin: 2em;
}


    .bYellow span {
        font-size: 1.4em;
        font-weight: bold;
        margin-bottom: .2em;
    }