@import url(../fonts/font-awesome.min.css);
@import url(kyart-ui.css);

/*--------------------------------------------*/

/*index*/

.index section {
    margin-bottom: 50px;
}

.index .nav-toggle {
    display: none;
}

.index-search {
    display: block;
    text-align: center;
    padding: 20px 0 50px 0;
}

    .index-search h1 {
        font-size: 2.8em;
        font-weight: 700;
    }

    .index-search input {
        width: 100%;
        font-size: 1.44em;
        padding: 20px;
        border: 5px solid #EDC2A2;
        margin-bottom: 15px;
        padding-right: 60px;
    }

    .index-search .index-search-input {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 800px;
    }

        .index-search .index-search-input button {
            position: absolute;
            right: 10px;
            top: 20px;
            border: none;
            background-color: transparent;
            padding: 10px;
        }

    .index-search .hot-keywords {
        font-size: 1.33em;
    }

        .index-search .hot-keywords a {
            margin: 5px 10px;
        }

.index .organ-list {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
    font-size: 22px;
    border: 1px solid #777;
}

    .index .organ-list .organ-tr {
        display: table-row;
    }

        .index .organ-list .organ-tr .organ-td {
            display: table-cell;
            background-color: #f6f7fb;
            border: 1px solid #e2e2e2;
            position: relative;
        }

            .index .organ-list .organ-tr .organ-td p {
                display: block;
                margin: 0;
                padding: 12px 0 12px 25px;
            }

            .index .organ-list .organ-tr .organ-td span {
                right: 25px;
                top: 10px;
                position: absolute;
                display: block;
                width: 40px;
                height: 40px;
                font-size: 22px;
                color: #10b4b5;
                text-align: right;
            }

            .index .organ-list .organ-tr .organ-td a {
                display: block;
            }

            .index .organ-list .organ-tr .organ-td:hover {
                background-color: #0cb6b6;
            }

                .index .organ-list .organ-tr .organ-td:hover a, .index .organ-list .organ-tr .organ-td:hover span {
                    color: #fff;
                }

.serv-list {
    display: table;
    width: 100%;
    margin: 20px 0;
}

    .serv-list .serv-item {
        display: inline-block;
        width: 20%;
        float: left;
        padding: 10px;
        position: relative;
    }

        .serv-list .serv-item .sublist {
            position: absolute;
            opacity: 0;
            width: calc(100% - 20px);
            height: 0;
            background-color: #fff;
            z-index: 1;
            top: 54px;
            left: 10px;
            border-radius: 4px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            box-shadow: 0 0 10px #ccc;
            padding: 10px;
            transition: all linear 0.2s;
        }

            .serv-list .serv-item:hover .sublist, .serv-list .serv-item .sublist.open-sublist {
                display: block;
                opacity: 1;
                height: calc(100% - 59px);
            }

            .serv-list .serv-item .sublist ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

                .serv-list .serv-item .sublist ul li a {
                    display: block;
                    text-align: center;
                    padding: 3px 12px;
                    color: #555;
                    font-size: 0.875rem;
                }

                    .serv-list .serv-item .sublist ul li a:hover {
                        background-color: #0fb5b6;
                        color: #fff;
                        border-radius: 4px;
                    }

                .serv-list .serv-item .sublist ul li .serv-moretoggle {
                    border-bottom: 0;
                    text-align: center;
                    cursor: pointer;
                    transition: all linear 0.2s;
                    margin-top: 5px;
                }

                    .serv-list .serv-item .sublist ul li .serv-moretoggle:hover {
                        color: #f20;
                    }

        .serv-list .serv-item .morelink {
            position: absolute;
            top: 0;
            left: 50%;
            width: 0;
            overflow: hidden;
            opacity: 0;
            height: 0;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px #ccc;
            transition: all linear 0.2s
        }

            .serv-list .serv-item .morelink.open {
                display: block;
                left: 0;
                width: 100%;
                height: auto;
                opacity: 1;
                padding: 10px 10px 10px 10px;
                z-index: 3;
            }

            .serv-list .serv-item .morelink .closemore-btn {
                display: block;
                width: 25px;
                height: 25px;
                position: absolute;
                right: 6px;
                top: 16px;
                font-size: 0.8rem;
                line-height: 1.3rem;
                text-align: center;
                color: #fff;
                cursor: pointer;
                background-color: #b9b9b9;
                border-radius: 15px;
            }


            .serv-list .serv-item .morelink h4 {
                border-bottom: 1px solid #ddd;
                font-size: 1.1rem;
                padding-bottom: 10px;
                color: #777;
            }

            .serv-list .serv-item .morelink ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

                .serv-list .serv-item .morelink ul li a {
                    padding: 3px 5px;
                    display: block;
                    color: #0fb5b6;
                    font-size: 0.875rem;
                }

                    .serv-list .serv-item .morelink ul li a:hover {
                        background-color: #0fb5b6;
                        color: #fff;
                        border-radius: 4px;
                    }

        .serv-list .serv-item .si-frame {
            display: block;
            border: 1px solid #7E7E7E;
            border-radius: 4px;
            overflow: hidden;
            transition: all linear 0.2s;
        }

            .serv-list .serv-item .si-frame h3 {
                background-color: #777777;
                color: #fff;
                margin: 0;
                padding: 9px;
                font-weight: 700;
                text-align: center;
            }

            .serv-list .serv-item .si-frame p {
                background-color: #EEEEEE;
                margin: 0;
                padding: 15px 20px;
                font-size: 1em;
                line-height: 30px;
                height: 130px;
                overflow: auto;
            }

            .serv-list .serv-item .si-frame:hover {
                /* transform: scale(1.1); */
            }

.situ-list {
    display: table;
    width: 100%;
    margin: 0;
}

.sectionBox {
    border: 1px solid #7E7E7E;
    margin: 0 0 20px 0;
}

.situ-list .situ-item {
    display: inline-block;
    width: 33.333333%;
    float: left;
    padding: 10px;
}

    .situ-list .situ-item .si-frame {
        display: block;
        border: 0px solid #7E7E7E;
        border-radius: 4px;
        overflow: hidden;
        transition: all linear 0.2s;
    }

        .situ-list .situ-item .si-frame h3 {
            background-color: #00cccc;
            color: #fff;
            margin: 0;
            padding: 9px;
            font-weight: 700;
            text-align: center;
        }

        .situ-list .situ-item .si-frame .text-area {
            background-color: #fff;
            margin: 0;
            padding: 15px 20px;
            line-height: 30px;
            height: 200px;
            text-align: center;
            position: relative;
        }

            .situ-list .situ-item .si-frame .text-area p {
                position: absolute;
                right: 10px;
                top: 50%;
                font-size: 2em;
                margin-top: -10px;
            }

                .situ-list .situ-item .si-frame .text-area p span {
                    display: block;
                    font-size: 0.5em;
                }

        .situ-list .situ-item .si-frame:hover {
            transform: scale(1.1);
        }

.messageslider {
    margin-top: 60px;
    padding-bottom: 100px;
}

    .messageslider .item {
        display: block;
        box-sizing: border-box;
        padding: 10px;
    }

        .messageslider .item a {
            display: block;
            background-color: #f8f7f6;
            padding: 20px 35px;
            height: 180px;
            background-position: 100% 100%;
        }

            .messageslider .item a h4 {
                padding-bottom: 15px;
                position: relative;
                font-size: 16px;
                font-family: "Century Gothic", "Helvetica";
                margin-bottom: 25px;
            }

                .messageslider .item a h4:before {
                    content: "";
                    display: block;
                    height: 0px;
                    width: 40px;
                    border-top: 2px solid #d10811;
                    position: absolute;
                    bottom: 0px;
                    left: 0;
                }

            .messageslider .item a p {
                font-size: 18px;
                font-weight: 700;
                color: #000;
            }

            .messageslider .center .item a, .messageslider .item a:hover {
                background-color: #aa2e38;
                background-repeat: no-repeat;
                background-position: 100% 100%;
                background-size: contain;
            }

            .messageslider .item a:hover {
                /*background-color: #aa2e38;*/
                transform: scale(1.05);
            }

                .messageslider .center .item a h4, .messageslider .item a:hover h4 {
                    color: #fff;
                }

                    .messageslider .center .item a h4:before, .messageslider .item a:hover h4:before {
                        border-color: #fff;
                    }

                .messageslider .center .item a p, .messageslider .item a:hover p {
                    color: #fff;
                }

    .messageslider .owl-dots, .messageslider.owl-theme .owl-nav.disabled + .owl-dots {
        margin-top: 40px;
    }

/*content*/
.content {
    padding: 30px 15px;
    position: relative;
    min-height: 900px;
}

    .content.no-padding {
        padding: 0px;
    }

.pagination > li > a, .pagination > li > span {
    padding: 14px 22px;
}

.pagination > li {
    padding-left: 0px;
}

    .pagination > li:before {
        content: none;
    }

.function-panel {
    display: block;
    text-align: left;
    float: none;
}

    .function-panel .fl-left {
        float: left;
        display: inline-block;
    }

    .function-panel .fl-right {
        float: right;
        text-align: right;
        display: inline-block;
    }

        .function-panel .fl-right .btn {
            display: inline-block;
            margin: 0 0 0 10px;
        }

<<<<<<< HEAD
.function-panel:after {
    content: "";
    height: 10px;
    width: 100%;
    display: block;
    clear: both;
}

@media (max-width:600px) {
    .function-panel * {
        float: none;
    }

    .function-panel .btn {
        margin: 0 0 5px 0 !important;
        width: 100%
    }
}


======= > > > > > > > origin/master
/*news*/
.newslist {
    display: inline-block;
    width: 100%;
}

.newslist ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    width: 100%;
}

    .newslist ul li {
    }

        .newslist ul li[class^="col-"]:nth-child(even) {
            padding-left: 2.5px;
            padding-right: 0px;
        }

        .newslist ul li[class^="col-"]:nth-child(odd) {
            padding-left: 0px;
            padding-right: 2.5px;
        }

        .newslist ul li a {
            background-color: #fff;
            display: inline-block;
            padding: 8px;
            width: 100%;
            position: relative;
        }

            .newslist ul li a .news-img {
                display: inline-block;
                width: 31%;
                float: left;
                height: 125px;
            }

                .newslist ul li a .news-img img {
                    width: 100%;
                }

            .newslist ul li a .news-txt {
                display: inline-block;
                width: 69%;
                float: left;
                padding: 5px 10px;
                position: relative;
            }

                .newslist ul li a .news-txt h5 {
                    color: #999;
                    font-size: 12px;
                    margin-bottom: 20px;
                }

                .newslist ul li a .news-txt p {
                    font-size: 18px;
                }

            .newslist ul li a:before {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
                border: 0px solid #ccc;
                transition: all linear 0.2s;
            }

        .newslist ul li:hover a:before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            border: 3px solid #D72830;
        }

.categorytag {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 2px 5px;
    background-color: #333;
    color: #fff;
}

    .categorytag.orange {
        background-color: #DD510F;
    }

    .categorytag.green {
        background-color: #A5C41B;
    }

    .categorytag.yellow {
        background-color: #F2E625;
        color: #777;
    }

    .categorytag.lorange {
        background-color: #E79524;
    }

.news-content {
    background-color: #fff;
    padding: 15px 25px;
    position: relative;
    display: inline-block;
    width: 100%;
}

h4.news-title {
    font-size: 30px;
    color: #000;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

    h4.news-title span {
        display: block;
        color: #999;
        font-size: 14px;
        margin-bottom: 15px;
    }

.new-txt {
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}

    .new-txt [class^="col-"] img {
        width: 100%;
    }

    .new-txt p {
        padding: 0 15px;
        font-size: 14px;
        line-height: 1.6em;
    }

.dropdown-menu li {
    padding-left: 0px;
}

    .dropdown-menu li:before {
        content: none;
    }

.dropdown .caret {
    margin-left: 5px;
}

/*           Coco             */

/*content 共用樣式*/

.content h2 {
    font-weight: 600;
    color: #333;
}

.dropdown-menu > li > a {
    padding: 10px 20px;
}

    .dropdown-menu > li > a:hover {
        background: #eee;
    }

.dropdown-menu {
    border: none;
}

.bg_gray1 {
    background: #f0efec;
}

/*customer service page*/
.customer-service-banner {
    display: inline-block;
    width: 100%;
    padding: 40px 0px;
    background-image: url('../img/theme/content_bannerbg_02.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

/*Accordion menu plugin*/
.content .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ui-bubble {
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    background: url(../img/sicons.png) 0px 0px no-repeat;
}

.ui-ask {
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    background: url(../img/sicons.png) -34px 0px no-repeat;
}

.accordion-questions {
    width: 100%;
    margin: 20px auto;
    padding-top: 14px;
}

    .accordion-questions li h4 .ui-ask, .accordion-questions li h4 .ui-bubble {
        position: absolute;
        left: 0px;
        top: 9px;
    }

    .accordion-questions .panel-body {
        border-bottom: 5px solid #f0efec;
        font-size: 16px;
        vertical-align: bottom;
        list-style: none;
    }

        .accordion-questions .panel-body h4 {
            height: 40px;
            position: relative;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            line-height: 40px;
            height: 40px;
            overflow: hidden;
            padding: 0 0 0 40px;
        }

    .accordion-questions .panel-default {
        border: none;
        border-radius: 0px;
        padding-left: 0px;
    }

    .accordion-questions .panel-title i {
        margin-right: 10px;
    }

    .accordion-questions .panel-body i {
        margin-right: 10px;
        float: left;
    }

    .accordion-questions .panel-heading {
        padding: 15px 15px;
    }

    .accordion-questions .panel-body p {
        display: inline;
    }

    .accordion-questions .panel-default > .panel-heading {
        background-color: #fff;
        border-color: none;
        color: #d10811;
    }

@media (max-width:1199px) {
    .serv-list .serv-item .si-frame h3 {
        font-size: 20px;
        height: 40px;
        padding: 5px 8px;
    }

    .serv-list .serv-item .sublist {
        top: 51px;
    }
}

@media (max-width:1024px) {

    /* index */
    header .headertop .logolink a .logo-block img {
        width: 40px;
    }

    header .headertop .logolink a .logo-text {
        padding-top: 10px;
    }

        header .headertop .logolink a .logo-text h4 {
            font-size: 14px;
        }

        header .headertop .logolink a .logo-text p {
            font-size: 18px;
            line-height: 18px;
        }

    header .qlink ul li {
        display: inline-block;
        width: 100%;
        float: none;
    }

        header .qlink ul li.font-level {
        }

        header .qlink ul li .idmenu-text {
        }

    .wrapper.index:before {
        content: "";
        opacity: 0;
        transition: all linear 0.2s;
    }

    .open-index .wrapper.index:before {
        content: "";
        display: block;
        width: 100%;
        height: calc(100% - 61px);
        position: fixed;
        background-color: #000;
        z-index: 9999;
        opacity: 0.3;
        top: 61px;
        left: 0;
    }

    body.open-index {
        overflow-y: hidden;
    }

    /* .index-menumask{display: block; width: 100%; height: calc(100% - 61px); position: fixed; background-color: #000; z-index: 9999; opacity: 0.3; top: 61px; left: 0; } */
    .index .nav-toggle {
        display: block;
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .main-nav {
        transition: all linear 0.2s;
        position: fixed;
        right: -200px;
        top: 61px;
        width: 200px;
        height: calc(100% - 61px);
        z-index: 10000;
    }

        .main-nav.active {
            display: block;
            position: fixed;
            top: 61px;
            right: 0;
            background-color: #fff;
            box-shadow: 0 3px 5px #ccc;
        }

            .main-nav.active .qlink {
                float: none;
            }

    .situ-list .situ-item .si-frame .text-area p {
        font-size: 1.5em;
    }
}

@media (max-width:991px) {
    .serv-list .serv-item {
        width: 50%;
    }

    .situ-list .situ-item .si-frame .text-area {
        height: 250px;
    }

        .situ-list .situ-item .si-frame .text-area p {
            position: static;
            margin-top: 10px;
        }
}

@media (max-width:768px) {
}

@media (max-width:767px) {
    .index .organ-list .organ-tr {
        display: block;
    }

        .index .organ-list .organ-tr .organ-td {
            display: block;
        }

            .index .organ-list .organ-tr .organ-td a {
                display: block;
                line-height: 50px;
            }

            .index .organ-list .organ-tr .organ-td p {
                padding: 0 55px 0 15px;
            }

            .index .organ-list .organ-tr .organ-td span {
                top: 0;
            }

    .situ-list .situ-item {
        width: 50%
    }

    .index-search h1 {
        font-size: 2em
    }
}

@media (max-width:540px) {
    .serv-list .serv-item {
        width: 100%;
    }

        .serv-list .serv-item .si-frame p {
            height: 100%;
            min-height: 130px;
        }

    .situ-list .situ-item {
        width: 100%
    }
}

/*----共用樣式----------------------------------------*/

/*共用百葉窗*/

.defaultcollapse {
    clear: both;
}

    .defaultcollapse .panel-title {
        font-size: 1em;
    }

        .defaultcollapse .panel-title a {
            position: relative;
            line-height: 1.5em;
        }

            .defaultcollapse .panel-title a:before {
                content: "";
                margin: 0 10px 0 0;
                position: relative;
                left: 0;
                display: inline-block;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 8px 5px 0 5px;
                border-color: #000000 transparent transparent transparent;
            }

            .defaultcollapse .panel-title a.collapsed:before {
                transform: rotate(-90deg);
            }

/*共用tab樣式*/
.ctsubnav.nav-pills > li a {
    padding: 15px 30px;
    background: #eeeeee;
    border-radius: 0;
    text-align: center;
    font-size: 1.4em;
}

.ctsubnav.nav-pills > li.active > a, .nav-pills.ctsubnav > li.active > a:focus, .nav-pills.ctsubnav > li.active > a:hover {
    background: #0cb5b5;
}

.ctsubnav.nav-pills > li.active {
    position: relative;
}

    .ctsubnav.nav-pills > li.active:after {
        content: "";
        display: block;
        width: 0;
        margin-left: -10px;
        height: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #0cb5b5 transparent transparent transparent;
        position: relative;
        left: 50%;
        bottom: 0;
    }

@media (max-width:768px) {
    .ctsubnav.nav-pills > li {
        display: table-cell;
        width: 1%;
        float: none;
    }

        .ctsubnav.nav-pills > li a {
            padding: 10px 3px;
        }
}

/*----Sitemap 網站地圖----------------------------------------*/

/*Sitemap*/

.sitemap {
}

    .sitemap .thumbnail h3 {
        font-weight: 600;
        margin: 0 0 20px 0;
        font-size: 1.5em;
        line-height: 2em;
        color: #777;
        text-align: center;
        border-bottom: 2px #ccc solid;
    }

    .sitemap .thumbnail {
        padding: 0 20px;
        min-height: 380px;
        display: block;
        border: none;
        background: url("../img/sitemap/sitemap_bg.png") no-repeat right bottom;
    }

/*----Sitemap 網站地圖----------------------------------------*/

/*Sitemap*/

.page-qa .headline {
    padding: 30px 0;
}

    .page-qa .headline h3 {
        padding: 0;
        margin: 0;
        font-size: 1.5em;
    }

        .page-qa .headline h3 img {
            margin: 0 10px 0 0;
            padding: 0;
        }

    .page-qa .headline ul.defaultlist {
        margin: 0 0 0 80px;
    }

@media (max-width:768px) {
    .page-qa .headline ul.defaultlist {
        margin: 5px 0 0 0;
    }
}

/*----------------------------------------------------          
  搜尋成果頁樣式  
----------------------------------------------------*/
#SearchListSet {
    line-height: 1.8em;
    margin-bottom: 30px;
}

    #SearchListSet .HeadTitle:before {
        font-family: 'Glyphicons Halflings';
        content: "\e003";
        display: inline-block;
    }

    #SearchListSet .HeadTitle {
        font-weight: bold;
        margin: 0 0 20px 0;
    }

    #SearchListSet .KeyStyle {
        color: #ff0000;
    }

    #SearchListSet .Title {
    }

        #SearchListSet .Title a {
            font-size: 1.8em;
            color: #0c56a6;
            font-weight: normal;
            text-decoration: none;
        }

            #SearchListSet .Title a:hover {
                border: none;
                border-bottom: #e8190f solid 1px;
                text-decoration: none;
            }

        #SearchListSet .Title .label {
            background: #fff;
            border: 1px solid #ccc;
            color: #777;
            font-size: 1.2em;
            padding: 10px 20px;
            float: right;
        }

        #SearchListSet .Title p {
            color: #0cb5b5;
        }

    #SearchListSet .ct ol {
        line-height: 1.5em;
    }

        #SearchListSet .ct ol li {
            padding: 0;
            background: none !important;
            margin-bottom: 10px;
        }

    #SearchListSet ul {
        border-top: #ccc dotted 1px;
        margin: 0;
        padding: 0;
        line-height: 1.8em;
        list-style: none;
    }

        #SearchListSet ul li {
            color: #555555;
            padding: 30px 15px;
        }

            #SearchListSet ul li:nth-child(even) {
                background: #f9f9f9;
            }

/*----------------------------------------------------          
  跳頁選單樣式  
----------------------------------------------------*/
.pagJumber {
    text-align: center;
}

    .pagJumber ul.pagination {
        margin: 0 auto;
    }

        .pagJumber ul.pagination li.active a {
            border: none;
            background: #0cb5b5;
            color: #ffffff;
        }

@media (max-width:480px) {
    .pagJumber .pagination > li > a, .pagination > li > span {
        padding: 10px 16px;
    }
}

/*----------------------------------------------------          
  搜尋bar樣式  
----------------------------------------------------*/
.searchBar {
    clear: both;
    margin-bottom: 20px;
}

.form-control {
    border: 1px solid #ccc;
    font-size: 1em;
    height: 50px;
    line-height: 40px;
}

.line-red {
    border: 1px solid #ff0000;
    display: block;
}

/*----------------------------------------------------          
  圓角表格樣式  
----------------------------------------------------*/
table.table-radius {
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    border-top: 1px solid #ccc;
    border-radius: 10px;
}

    table.table-radius thead {
    }

        table.table-radius thead th.check-all label {
        }

        table.table-radius thead tr th {
            background: url("../img/table_radius_thead.gif") repeat;
            padding-top: 15px;
            padding-bottom: 15px;
            vertical-align: middle;
            font-size: 1em;
        }

    table.table-radius tr td {
        vertical-align: middle;
        font-size: 1.2em;
    }

    table.table-radius td.td-inline {
        padding: 0;
        width: 1%;
    }

    /*第一欄第一列：左上*/
    table.table-radius thead tr:first-child th:first-child {
        border-top-left-radius: 10px;
    }

    /*第一欄最後列：左下*/
    table.table-radius tbody tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    /*最後欄第一列：右上*/


    table.table-radius thead tr:first-child th:last-child {
    }

    table.table-radius thead tr:first-child th:last-child {
        border-top-right-radius: 10px;
    }

    /*最後欄第一列：右下*/
    table.table-radius tbody tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }

@media screen and (max-width:600px) {
    table.table-radius td.td-inline a.btn {
        font-size: 0.8em;
    }
}

/*----------------------------------------------------          
  rwd表格樣式  
----------------------------------------------------*/
@media screen and (max-width:600px) {
    table.rwdtable {
        border: 0;
        border-collapse: collapse;
    }

        table.rwdtable thead {
            display: none;
        }

        table.rwdtable tr {
            padding: 0;
            border-bottom: 1px solid #000;
            display: block;
            clear: both;
        }

        table.rwdtable thead th:not(.check-all) {
            display: none;
        }

        table.rwdtable thead th.check-all {
            display: block;
        }

        table.rwdtable tr:after {
            content: "";
            display: block;
            clear: both;
        }

    .rwdtable td:before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        margin: 0;
        color: #777;
    }

    table.rwdtable tr td.td-inline {
        display: inline;
    }

    table.rwdtable tr td {
        width: auto;
    }

    table.rwdtable td, table.rwdtable th {
        line-height: 1.5em !important;
        display: block;
        border: none !important;
        padding: 5px 10px !important;
    }

    table.rwdtable tr td {
        border-bottom: 1px #ccc dotted !important;
    }

    /*第一欄第一列：左上*/
    table.rwdtable tr:first-child td:first-child {
        border-top-left-radius: 0px;
    }

    /*第一欄最後列：左下*/
    table.rwdtable tr:last-child td:first-child {
        border-bottom-left-radius: 0px;
    }

    /*最後欄第一列：右上*/
    table.rwdtable tr:first-child td:last-child, table.table-radius tr:first-child td:last-child a.btn {
        border-top-right-radius: 0px;
    }

    /*最後欄第一列：右下*/
    table.rwdtable tr:last-child td:last-child, table.table-radius tr:last-child td:last-child a.btn {
        border-bottom-right-radius: 0px;
    }

    /*第一欄第一列：左上*/
    table.rwdtable tr:first-child th:first-child {
        border-top-left-radius: 0px;
    }

    /*第一欄最後列：左下*/
    table.rwdtable tr:last-child th:first-child {
        border-bottom-left-radius: 0px;
    }

    /*最後欄第一列：右上*/
    table.rwdtable tr:first-child th:last-child {
        border-top-right-radius: 0px;
    }

    /*最後欄第一列：右下*/
    table.rwdtable tr:last-child th:last-child {
        border-bottom-right-radius: 0px;
    }
}

/*----------------------------------------------------          
checkbox表單美化
----------------------------------------------------*/
.checkbox-custom, .radio-custom {
    opacity: 0;
    position: absolute;
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-custom, .radio-custom {
    position: absolute !important;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
    text-indent: 0;
}




.form-inline .checkbox, .form-inline .radio {
    margin: 0;
}


.checkbox-custom + .checkbox-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    padding: 0 4px 0 0;
    margin-right: 10px;
    text-align: right;
}

.radio-custom + .radio-custom-label:before {
    content: '';
    background: #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0 7px 0 0;
    margin-right: 10px;
    text-align: right;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    background: #0cb5b5;
    color: #fff;
    font-size: 18px !important;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f111";
    font-family: 'FontAwesome';
    color: #0cb5b5;
}

.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
    outline: 1px solid #ddd; /* focus style */
}

/*----------------------------------------------------          
       select下拉選擇組件樣式
----------------------------------------------------*/
.selectbar {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 3px;
    background: #f9f9f9;
}

    .selectbar th {
        padding: 0 0 0 10px;
    }

.pretty-select {
    /*移除箭頭樣式*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*改變右邊箭頭樣式*/
    background: url("../img/icon/icon_arrow.png") no-repeat right center transparent;
    border: 0px;
    width: 100%;
    height: 50px;
    padding-left: 10px;
    padding-right: 50px;
    background-color: #0cb5b5;
    color: #ffffff;
}

    /*IE隱藏箭頭樣式*/
    .pretty-select::-ms-expand {
        display: none;
    }

    .pretty-select:focus {
        box-shadow: 0 0 5px 2px #467BF4;
    }


/*----------------------------------------------------          
        Stepbar 步驟進度條
----------------------------------------------------*/
.step {
    padding: 0;
    margin: 0 0 80px 0;
    width: 100%;
    color: #CCC;
}

    .step ul {
        list-style: none;
        padding: 0;
        text-align: center;
        counter-reset: step;
        display: flex;
    }

        .step ul li {
            box-sizing: border-box;
            width: 25%;
            text-align: center;
            position: relative;
            padding-top: 0;
        }

            .step ul li.done {
                color: #000;
            }

            .step ul li:before {
                text-align: center;
                content: counter(step);
                counter-increment: step;
                display: block;
                width: 50px;
                height: 50px;
                border: 0px solid #f9fbfd;
                border-radius: 50%;
                line-height: 50px;
                position: absolute;
                left: 50%;
                top: 60px;
                transform: translateX(-50%);
                background-color: #CCC;
                color: #FFF;
                cursor: pointer;
                font-family: fantasy;
                font-size: 30px;
            }

            .step ul li.done:before {
                background-color: #0cb5b5;
            }

            .step ul li:after {
                content: "";
                display: block;
                width: 100%;
                height: 5px;
                background-color: #CCC;
                top: 82px;
                position: absolute;
                z-index: -1;
                margin-left: -50%;
            }

            .step ul li.done + li:after {
                background-color: #0cb5b5;
            }

            .step ul li:first-child:after {
                content: none;
            }

@media (max-width:767px) {
    .step ul li {
        font-size: 13px;
    }

        .step ul li:before {
            width: 30px;
            height: 30px;
            top: 40px;
            font-size: 18px;
            line-height: 30px;
        }

        .step ul li:after {
            top: 52px;
        }
}

/*----------------------------------------------------          
合約條款顯示範圍
----------------------------------------------------*/
.scrollbar {
    /*float: left;*/
    height: 300px;
    width: 100%;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.force-overflow {
    min-height: 450px;
    margin: 15px;
}

/*
 *  STYLE 8
 */
.scrollbar::-webkit-scrollbar-track {
    border: 1px solid #ccc;
    background-color: #ccc;
}

.scrollbar::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #777777;
}

/*----------------------------------------------------          
頁面大按鈕群組設定
----------------------------------------------------*/
.btn-group {
    text-align: center;
    display: block;
    margin: 30px 0;
}

    .btn-group .btn {
        margin: 5px;
        float: none;
    }

.btn-note {
    min-height: 150px;
    min-width: 300px;
    color: #000;
    padding: 30px 50px 30px 50px !important;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin: 0 !important;
    vertical-align: middle; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0); /* IE6-9 */
}

@media (max-width:768px) {
    .btn-note {
        margin-bottom: 15px !important;
    }
}

@media (max-width:480px) {
    .btn-group .btn {
        width: 100%;
    }

    .btn-note {
        min-height: auto;
    }
}

/*----------------------------------------------------          
頁面大按鈕群組設定
----------------------------------------------------*/
i.icon_important {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff0000;
    position: relative;
    display: block;
    text-align: center;
}

    i.icon_important:before {
        content: "必";
        position: absolute;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        font-style: normal;
        display: block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
    }

/*----------------------------------------------------          
表單表格設定
----------------------------------------------------*/
table.table-form th {
    text-align: right;
    color: #777;
}

table.table-form th, table.table-form td {
    vertical-align: middle !important;
}

    table.table-form th.topicSet {
        width: 40%;
    }

table.table-dotted tr {
    border-top: 2px dotted #ccc;
}

table.table-dotted {
    border-bottom: 2px dotted #ccc;
}

.input-Adder {
    width: 180px;
}

    .input-Adder input.input-number {
        text-align: center;
    }

    .input-Adder .btn-number {
        font-size: 14px !important;
        color: #777;
        background: #fff;
        margin: 0;
        border: 1px solid #ccc;
        width: 50px;
        padding: 0;
        height: 50px;
    }

/*----------------------------------------------------          
驗證方式列表設定
----------------------------------------------------*/
.list-verify div[class*="col-md"] {
    margin: 0;
    padding: 0;
}

.list-verify a.thumbnail {
    color: #000;
    padding: 0 3px;
    margin: 0;
    width: 100%;
    min-height: 100px;
    border: none;
    text-align: center;
    font-size: 0.8em;
    letter-spacing: 0;
    display: table;
}

    .list-verify a.thumbnail:hover {
        border: 2px solid #54caca;
    }

.note-area {
    margin: 30px 0;
    line-height: 1.8em; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,ffffff+100&1+0,0+100 */
    background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#00ffffff', GradientType=0); /* IE6-9 */
}

    .note-area h3 {
        text-align: center;
        font-weight: 600;
    }

    .note-area ol {
        margin: 0;
        padding: 0 0 0 1em;
    }

/*----------------------------------------------------          
進度條樣式設定
----------------------------------------------------*/
.progressSet {
    margin: 30px 0;
}

    .progressSet .progress-bar {
        background-color: #54caca;
    }

    .progressSet .progress-bar-striped, .progressSet .progress-striped .progress-bar {
    }

/*----------------------------------------------------          
付款步驟說明區樣式設定
----------------------------------------------------*/
.paystepSet {
    text-align: center;
    padding: 20px 50px;
    margin: 30px 0;
    background: #cdefef;
    border-radius: 15px;
}

    .paystepSet h3 {
        font-size: 1em;
        text-align: center;
    }

    .paystepSet .caption {
        border-top: 3px dashed #ccc;
    }

    .paystepSet .thumbnail {
        margin: 0 auto;
        position: relative;
    }

    .paystepSet .next:after {
        content: "";
        position: absolute;
        right: calc(-50% + 35px);
        top: 100px;
        display: block;
        width: 35px;
        height: 76px;
        background: url(../img/pay/step_arrow.png) no-repeat right center;
        background-size: 100%;
    }

    .paystepSet h4 {
        text-align: center;
        font-size: 1.2em;
        padding: 30px 0 0 0;
        clear: both;
        display: block;
        width: 100%;
    }

        .paystepSet h4 span {
            background: #cdefef;
            padding: 0 20px;
        }

        .paystepSet h4:before {
            content: " ";
            height: 1px;
            display: block;
            clear: both;
            width: 100%;
        }

        .paystepSet h4:after {
            content: "";
            margin-top: -12px;
            height: 2px;
            width: 100%;
            background: #fff;
            display: block;
        }

    .paystepSet table.table-accountInfo {
        background: #fff;
        border: 2px solid #cdefef;
    }

        .paystepSet table.table-accountInfo th {
            color: #777;
        }

        .paystepSet table.table-accountInfo th, .paystepSet table.table-accountInfo td {
            text-align: center;
            border: 2px solid #cdefef;
        }

@media (min-width:1024px) {
    .paystepSet .thumbnail {
        width: 230px;
    }
}

@media (max-width:1200px) {
    .paystepSet .next:after {
        right: -40px;
        width: 20px;
    }
}

@media (max-width:1024px) {
    .paystepSet .next:after {
        right: -25px;
        width: 20px;
    }
}

@media (max-width:767px) {
    .paystepSet .thumbnail {
        margin: 0 auto 30px auto;
    }

    .paystepSet .next:after {
        transform: rotate(90deg);
        top: inherit;
        bottom: -55px;
        right: 50%;
    }

    .paystepSet table.table-accountInfo th, .paystepSet table.table-accountInfo td {
        text-align: left;
    }
}

@media (max-width:480px) {
    .paystepSet h4 span {
        padding: 0;
    }
}

/*----------------------------------------------------          
智慧平台icon外連設定
----------------------------------------------------*/
.nav-platformIcon {
    margin: 20px 0;
}

    .nav-platformIcon a[target="_blank"] {
        position: relative;
    }

        .nav-platformIcon a[target="_blank"]:after {
            border-radius: 50%;
            line-height: 30px;
            font-size: 15px;
            font-family: 'Glyphicons Halflings';
            background: #fff;
            content: "\e066";
            width: 30px;
            height: 30px;
            display: block;
            position: absolute;
            top: 60px;
            right: calc(50% - 55px);
        }

    .nav-platformIcon a img {
        margin: 0 0 10px 0;
    }

    .nav-platformIcon a {
        color: #000;
        font-size: 1em;
    }

    .nav-platformIcon li a:hover {
        background-color: #fff !important;
    }

/*----------------------------------------------------          
付款明細表格說明樣式設定
----------------------------------------------------*/
.accounterSet {
    background: #f0f0f0;
    padding: 20px;
}

    .accounterSet h4 {
        text-align: center;
    }

    .accounterSet ul.nav li {
        padding: 0 5px;
    }

.table-accounter-bg {
    background: #fff;
    padding: 20px;
}

table.table-accounter {
    background: #fff;
    padding: 30px;
    border-bottom: 3px double #000;
}

    table.table-accounter thead th, table.table-accounter thead td {
        border-bottom: 1px solid #000 !important;
    }

    table.table-accounter th {
        border-top: 0 !important;
        color: #777;
    }

    table.table-accounter td {
        border-top: 0 !important;
    }

    table.table-accounter .footerTotal {
    }

        table.table-accounter .footerTotal td, table.table-accounter .footerTotal th {
            border-top: 1px solid #000 !important;
        }

/*----------------------------------------------------          
結果表格說明樣式設定
----------------------------------------------------*/
table.table-result {
    border-top: 5px solid #ccc;
    border-bottom: 5px solid #ccc;
}

    table.table-result tr td, table.table-result tr th {
        vertical-align: middle;
    }

/*----------------------------------------------------          
簡訊發送設定
----------------------------------------------------*/
.input-group-optSet .input-group-btn {
    font-size: 1em !important;
}

    .input-group-optSet .input-group-btn button {
        padding-left: 5px;
        padding-right: 5px;
    }

        .input-group-optSet .input-group-btn button:hover {
            border-color: transparent;
        }

/*----------------------------------------------------          
提交結果表頭說明設定
----------------------------------------------------*/
.resultAreaSet {
    padding: 30px 0;
    display: block;
    line-height: 1.5em;
}

    .resultAreaSet:after {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        clear: both;
    }

/*----------------------------------------------------          
提交結果備註說明設定
----------------------------------------------------*/
.resultNoteSet {
    background: #eee;
    margin-top: -20px;
    padding: 20px 50px;
}

    .resultNoteSet h4 {
        line-height: 1.5em;
        text-align: center;
    }

    .resultNoteSet p {
        line-height: 1.5em;
        width: 80%;
        margin: 0 auto;
        text-align: center;
        color: #777;
    }

/*----------------------------------------------------          
提交結果備註說明設定
----------------------------------------------------*/
.showpwSet .input-group-addon {
    background: none;
    border: none;
}

.showpwSet input.form-control {
    border: none;
    cursor: stop;
    box-shadow: none;
}

.showpwSet .material-icons {
    font-style: normal;
    font-size: 0;
    display: block;
    position: relative;
}

    .showpwSet .material-icons:before {
        font-size: 18px;
        font-family: 'Glyphicons Halflings';
        color: #777;
        position: absolute;
        top: -10px;
    }

    .showpwSet .material-icons.icon-eye-open:before {
        content: "\e105";
    }

    .showpwSet .material-icons.icon-eye-close:before {
        content: "\e106";
    }

/*----------------------------------------------------          
提交結果備註說明設定
----------------------------------------------------*/
.fancybox-boxSet {
    padding: 0 30px;
}

.msgbox {
    width: 600px;
}

.msgPanel {
    width: 800px;
}

/*情境問卷調查展開面板*/
.msgbox.bg-gray {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100 */
    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0); /* IE6-9 */
}

.msgbox .btn-Qstart {
    color: #fff;
    font-size: 1.5em;
    position: relative;
    padding: 20px 0;
    border-radius: 0;
    width: 80%;
    background: #0cb5b5;
    border: 3px solid #fff;
    box-shadow: 1px 1px 5px #ccc;
}

    .msgbox .btn-Qstart:after {
        position: absolute;
        content: "\e080";
        right: 20px;
        top: 30px;
        font-size: 15px;
        font-family: 'Glyphicons Halflings';
    }

.msgbox .noteArea {
    margin: 20px 0;
    text-align: left;
}

    .msgbox .noteArea em {
        background: #ff0000;
        color: #fff;
        padding: 0 2px;
        font-style: normal;
        display: inline-block;
    }

/*案件查詢*/
.msgCase {
    background: #f9fdfd url("../img/index/msgCase_bg.jpg") no-repeat right 50%;
    border: 2px solid #0cb5b5;
}

    .msgCase table.table-layout {
        text-align: left;
    }

        .msgCase table.table-layout th, .msgbox.msgCase table.table-layout td {
            border-top: none;
            line-height: 2em;
            border-bottom: 3px solid #0cb5b5;
            min-height: 50px;
            padding: 5px 0;
            vertical-align: middle;
        }

    .msgCase .form-control {
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .msgCase a.btn.btn-icon {
        font-size: 24px;
        line-height: 45px;
        border-radius: 0;
        padding: 0;
        margin: 0;
        width: 50px;
        height: 50px;
        color: #0cb5b5;
        border: 2px solid #0cb5b5;
    }

    .msgCase .btn-group {
        margin: 15px 0;
    }

/*列印面板*/
.msgPrint {
}

    .msgPrint table.table-bordered {
        color: #777;
    }

        .msgPrint table.table-bordered caption {
            border: 1px solid #ccc;
            text-align: center;
        }

        .msgPrint table.table-bordered td {
            padding: 10px;
        }

        .msgPrint table.table-bordered p {
            font-size: 0.8em;
        }

    .msgPrint img {
        margin: 15px auto;
    }

    .msgPrint h5 {
        letter-spacing: 30px;
        margin-left: 30px;
    }

    .msgPrint h3 {
        margin: 0;
    }

    .msgPrint em.tag {
        display: inline-block;
        border: 1px solid #ff0000;
        padding: 3px 5px;
        font-style: normal;
    }

@media (max-width:767px) {
    .msgbox, .msgPanel {
        width: 90%;
    }

    .fancybox-boxSet {
        padding: 0;
    }

    .msgPrint img {
        width: 100%;
    }
}

@media (max-width:480px) {
    .msgPrint h1 img {
        width: auto;
    }

    .msgPrint h5 {
        letter-spacing: 10px;
        margin: 0;
    }
}

/*申請書表下載*/
.table-download .btn-down-group {
    text-align: right;
}

@media (max-width:600px) {
    .table-download.rwdtable .btn-down-group {
        text-align: left;
    }
}

/*----------------------------------------------------          
服務據點slider設定
----------------------------------------------------*/
.location-topic {
    background: #ffe107;
    padding: 10px 0;
    margin: 0 !important;
    vertical-align: middle;
    text-align: center;
}

    .location-topic h2 {
        font-size: 2.8em;
    }

    .location-topic a.btn-url {
        float: right;
        line-height: 80px;
        padding: 0 15px;
    }

@media (max-width:1024px) {
    .location-topic a.btn-url {
        float: none;
        line-height: 1em;
    }
}

.location-banner {
    margin: 0 !important;
}

    .location-banner .owl-carousel {
        position: relative;
    }

    .location-banner .owl-theme .owl-nav [class*=owl-] {
        width: 75px;
        height: 75px;
        border-radius: 40px;
        line-height: 60px;
        padding: 0px;
        font-size: 64px;
        vertical-align: middle;
        margin-top: -40px;
    }

        .location-banner .owl-theme .owl-nav [class*=owl-]:hover {
            background-color: #333;
        }

    .location-banner .banner-mask-l, .location-banner .banner-mask-r {
        background: none;
    }

.location-content h4.panel-title a {
    text-align: center;
    font-size: 1.8em;
}

.location-content .year-title.hidden-xs {
    display: none;
}

.location-content .calendar-tip {
}

    .location-content .calendar-tip i {
        height: 15px;
        width: 15px;
        font-style: normal;
        font-size: 0.8em;
        display: inline-block;
        margin: 0 5px 0 0;
    }

        .location-content .calendar-tip i.color-black {
            background: #fff;
            border: 1px solid #000;
        }

        .location-content .calendar-tip i.color-gray {
            border: 1px solid #eee;
            color: #ccc;
        }

        .location-content .calendar-tip i.color-blue {
            background: rgb(44, 143, 201);
        }

        .location-content .calendar-tip i.color-green {
            background: rgb(156, 183, 3);
        }

        .location-content .calendar-tip i.color-gblue {
            background: rgb(69, 165, 151);
        }

        .location-content .calendar-tip i.color-red {
            background: rgb(255, 74, 50);
        }

        .location-content .calendar-tip i.color-purple {
            background: rgb(181, 108, 226);
        }

        .location-content .calendar-tip i.color-yellow {
            background: rgb(245, 187, 0);
        }

/*----------------------------------------------------          
 案件詳細內容設定
----------------------------------------------------*/
.casedetailSet:before {
    content: "";
    height: 5px;
    width: 100%;
    display: block;
    clear: both;
}

.CaseHeadSet {
    text-align: left;
    margin: 0 0 5px 0;
    color: #fff;
    background: url(../img/casedetail/CaseHeadSet_bg.jpg) no-repeat;
    background-size: 100% 100%;
    padding: 0;
    position: relative;
}

    .CaseHeadSet a {
        color: #fff;
    }

        .CaseHeadSet a:hover {
            text-decoration: underline;
        }

    .CaseHeadSet h1 {
        display: block;
        float: none;
        text-align: left;
        font-size: 2em;
        font-weight: 600;
        margin: 20px 0 0 0;
    }

    .CaseHeadSet h2 {
        font-size: 2em;
        color: #fff;
    }

        .CaseHeadSet h2 small {
            display: block;
            color: #00ffff;
            font-size: 0.5em;
            padding: 5px 0;
        }

    .CaseHeadSet:before {
        content: "";
        height: 6px;
        width: 100%;
        display: block;
        background: url(../img/casedetail/CaseHeadSet_line.jpg) repeat;
        position: absolute;
        top: 0;
        left: 0;
    }

    .CaseHeadSet table {
        line-height: 1.5em;
        margin: 10px 0 0 0;
    }

        .CaseHeadSet table th {
            padding: 5px 5px 5px 0;
            white-space: nowrap;
            vertical-align: top;
        }

        .CaseHeadSet table td {
            padding: 5px 0;
        }

    .CaseHeadSet .tag-status {
        position: relative;
        top: 5px;
        text-align: left;
        line-height: 2em;
        font-size: 1.2em;
        padding: 5px 10px;
        background: #ff0000;
    }

        .CaseHeadSet .tag-status:before {
            z-index: -1;
            left: 0px;
            bottom: -5px;
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 5px 5px 0;
            border-color: transparent #000000 transparent transparent;
        }

        .CaseHeadSet .tag-status:after {
            /*content: "";*/
            position: absolute;
            right: -10px;
            top: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px 10px 0 0;
            border-color: #ff0000 transparent transparent transparent;
        }

/*----------------------------------------------------          
 案件歷程內容設定
----------------------------------------------------*/
.historySet * {
    text-align: center;
}

.historySet h4 {
    font-size: 1em;
    background: #eee;
    border: 1px solid #ccc;
    padding: 5px;
    margin: 0;
}

.historySet p {
    color: #777;
}

.historySet small {
    color: #ccc;
}

.historySet .box {
    border: 1px solid #ccc;
    padding: 0;
    position: relative;
    padding-top: 30px;
}

    .historySet .box.start {
        padding-top: 0 !important;
    }

    .historySet .box.end {
        padding-bottom: 20px;
    }

        .historySet .box.end:after {
            content: none;
        }

    .historySet .box:after {
        content: "";
        position: absolute;
        bottom: -30px;
        left: 0;
        width: 100%;
        height: 30px;
        background-size: 100% 30px !important;
        z-index: 1;
        background: url(../img/casedetail/history_arrow.png) no-repeat center bottom;
    }

/*----------------------------------------------------          
 相關搜尋框效果設定
----------------------------------------------------*/
.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

/*.autocomplete input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
.autocomplete input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
.autocomplete input[type=submit] {
background-color: DodgerBlue;
color: #fff;
cursor: pointer;
}*/
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99; /*position the autocomplete items to be the same width as the container:*/
    top: 85px;
    left: 0;
    right: 0;
}

    .autocomplete-items div {
        padding: 10px;
        margin: 0;
        text-align: left;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9;
        }

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}