@charset "UTF-8";
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
    color: #666;
}

body {
    width: 100%;
    font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/*---------- icon ----------*/
.icon {
    /*display: inline-block;*/
}

    .icon:before, .icon:after {
        display: inline-block;
        vertical-align: middle;
        background-repeat: no-repeat;
    }

    .icon:before {
        content: "";
    }

    .icon > span {
        display: inline-block;
        margin-left: 3px;
        vertical-align: middle;
    }

    .icon.icon--a:before {
        content: none;
    }

    .icon.icon--a:after {
        content: "";
    }

    .icon.icon--a > span {
        margin-left: 0;
        margin-right: 3px;
    }

/*---------- icon - bulletin ----------*/
.i-bulletin__speaker:before, .i-bulletin__prev:before, .i-bulletin__next:before, .i-bulletin__speaker:after, .i-bulletin__prev:after, .i-bulletin__next:after {
    width: 30px;
    height: 30px;
    background-image: url(/Images/icon-bulletin.png);
}

.i-bulletin__speaker:before, .i-bulletin__speaker:after {
    background-position: 0 0;
}

.i-bulletin__prev:before, .i-bulletin__prev:after {
    background-position: 0 -30px;
}

.i-bulletin__next:before, .i-bulletin__next:after {
    background-position: 0 -60px;
}

/*---------- icon - form ----------*/
.i-form__id:before, .i-form__lock:before, .i-form__key:before, .i-form__delete:before, .i-form__edit:before, .i-form__view:before, .i-form__nt:before, .i-form__transfer:before, .i-form__repay:before, .i-form__bar:before, .i-form__line:before, .i-form__fc:before, .i-form__id:after, .i-form__lock:after, .i-form__key:after, .i-form__delete:after, .i-form__edit:after, .i-form__view:after, .i-form__nt:after, .i-form__transfer:after, .i-form__repay:after, .i-form__bar:after, .i-form__line:after, .i-form__fc:after {
    width: 25px;
    height: 25px;
    background-image: url(/Images/icon-form.png);
}

.i-form__id:before, .i-form__id:after {
    background-position: 0 0;
}

.i-form__lock:before, .i-form__lock:after {
    background-position: 0 -25px;
}

.i-form__key:before, .i-form__key:after {
    background-position: 0 -50px;
}

.i-form__delete:before, .i-form__delete:after {
    background-position: 0 -75px;
}

.i-form__edit:before, .i-form__edit:after {
    background-position: 0 -100px;
}

.i-form__view:before, .i-form__view:after {
    background-position: 0 -125px;
}

.i-form__nt:before, .i-form__nt:after {
    background-position: 0 -150px;
}

.i-form__transfer:before, .i-form__transfer:after {
    background-position: 0 -175px;
}

.i-form__repay:before, .i-form__repay:after {
    background-position: 0 -200px;
}

.i-form__bar:before, .i-form__bar:after {
    background-position: 0 -225px;
}

.i-form__line:before, .i-form__line:after {
    background-position: 0 -250px;
}

.i-form__fc:before, .i-form__fc:after {
    background-position: 0 -275px;
}

/*---------- icon - my ----------*/
.i-my__nt:before, .i-my__import:before, .i-my__loan:before, .i-my__card:before, .i-my__fund:before, .i-my__gold:before, .i-my__other:before, .i-my__bill:before, .i-my__bond:before, .i-my__nt:after, .i-my__import:after, .i-my__loan:after, .i-my__card:after, .i-my__fund:after, .i-my__gold:after, .i-my__other:after, .i-my__bill:after, .i-my__bond:after {
    width: 62px;
    height: 62px;
    background-image: url(/Images/icon-my-menu.png);
}

.i-my__nt:before, .i-my__nt:after {
    background-position: 0 0;
}

.i-my__import:before, .i-my__import:after {
    background-position: 0 -62px;
}

.i-my__loan:before, .i-my__loan:after {
    background-position: 0 -124px;
}

.i-my__card:before, .i-my__card:after {
    background-position: 0 -186px;
}

.i-my__fund:before, .i-my__fund:after {
    background-position: 0 -248px;
}

.i-my__gold:before, .i-my__gold:after {
    background-position: 0 -310px;
}

.i-my__other:before, .i-my__other:after {
    background-position: 0 -372px;
}

.i-my__bill:before, .i-my__bill:after {
    background-position: 0 -434px;
}

.i-my__bond:before, .i-my__bond:after {
    background-position: 0 -496px;
}

/*---------- icon - sitemap ----------*/
.i-smap__desk:before, .i-smap__nt:before, .i-smap__import:before, .i-smap__loan:before, .i-smap__card:before, .i-smap__fund:before, .i-smap__gold:before, .i-smap__other:before, .i-smap__desk:after, .i-smap__nt:after, .i-smap__import:after, .i-smap__loan:after, .i-smap__card:after, .i-smap__fund:after, .i-smap__gold:after, .i-smap__other:after {
    width: 40px;
    height: 40px;
    background-image: url(/Images/icon-sitemap.png);
}

.i-smap__desk:before, .i-smap__desk:after {
    background-position: 0 0;
}

.i-smap__nt:before, .i-smap__nt:after {
    background-position: 0 -40px;
}

.i-smap__import:before, .i-smap__import:after {
    background-position: 0 -80px;
}

.i-smap__loan:before, .i-smap__loan:after {
    background-position: 0 -120px;
}

.i-smap__card:before, .i-smap__card:after {
    background-position: 0 -160px;
}

.i-smap__fund:before, .i-smap__fund:after {
    background-position: 0 -200px;
}

.i-smap__gold:before, .i-smap__gold:after {
    background-position: 0 -240px;
}

.i-smap__other:before, .i-smap__other:after {
    background-position: 0 -280px;
}

/*---------- icon - news ----------*/
.i-news__prev:before, .i-news__next:before, .i-news__prev:after, .i-news__next:after {
    width: 15px;
    height: 15px;
    background-image: url(/Images/icon-news.png);
}

.i-news__prev:before, .i-news__prev:after {
    background-position: 0 0;
}

.i-news__next:before, .i-news__next:after {
    background-position: 0 -15px;
}

/*---------- icon - link ----------*/
.i-link__apply:before, .i-link__tip:before, .i-link__tip--gn:before, .i-link__tip--gnd:before, .i-link__apply:after, .i-link__tip:after, .i-link__tip--gn:after, .i-link__tip--gnd:after {
    width: 16px;
    height: 16px;
    background-image: url(/Images/icon-link.png);
}

.i-link__apply:before, .i-link__apply:after {
    background-position: 0 0;
}

.i-link__tip:before, .i-link__tip:after {
    background-position: 0 -16px;
}

.i-link__tip--gn:before, .i-link__tip--gn:after {
    background-position: 0 -32px;
}

.i-link__tip--gnd:before, .i-link__tip--gnd:after {
    background-position: 0 -48px;
}

/*---------- icon - useful ----------*/

.i-useful__try:before, .i-useful__faq:before, .i-useful__reg:before, .i-useful__env:before, .i-useful__trend:before, .i-useful__contact:before, .i-useful__cdic:before, .i-useful__taipay:before, .i-useful__try:after, .i-useful__faq:after, .i-useful__reg:after, .i-useful__env:after, .i-useful__trend:after, .i-useful__contact:after, .i-useful__cdic:after, .i-useful__taipay:after {
    width: 60px;
    height: 60px;
    background-image: url(/Images/icon-useful.png);
}

.i-useful__try:before, .i-useful__try:after {
    background-position: 0 0;
}

.i-useful__faq:before, .i-useful__faq:after {
    background-position: 0 -60px;
}

.i-useful__reg:before, .i-useful__reg:after {
    background-position: 0 -120px;
}

.i-useful__env:before, .i-useful__env:after {
    background-position: 0 -180px;
}

.i-useful__trend:before, .i-useful__trend:after {
    background-position: 0 -240px;
}

.i-useful__contact:before, .i-useful__contact:after {
    background-position: 0 -300px;
}

.i-useful__cdic:before, .i-useful__cdic:after {
    background-position: 0 -360px;
}

.i-useful__taipay:before, .i-useful__taipay:after {
    background-position: 0 -420px;
}

/*---------- icon - keyboard ----------*/
.i-keybod:before, .i-keybod:after {
    width: 21px;
    height: 13px;
    background-image: url(/Images/icon-keyboard.png);
    background-position: 0 0;
}

.i-keyboard__close:before, .i-keyboard__caps:before, .i-keyboard__del:before, .i-keyboard__close:after, .i-keyboard__caps:after, .i-keyboard__del:after {
    width: 25px;
    height: 25px;
    background-image: url(/Images/icon-screen-keyboard.png);
}

.i-keyboard__close:before, .i-keyboard__close:after {
    background-position: 0 0;
}

.i-keyboard__caps:before, .i-keyboard__caps:after {
    background-position: 0 -25px;
}

.i-keyboard__del:before, .i-keyboard__del:after {
    background-position: 0 -50px;
}

/*---------- icon - result ----------*/
.i-result__ok:before, .i-result__fail:before, .i-result__ok:after, .i-result__fail:after {
    width: 40px;
    height: 40px;
    background-image: url(/Images/icon-result.png);
}

.i-result__ok:before, .i-result__ok:after {
    background-position: 0 0;
}

.i-result__fail:before, .i-result__fail:after {
    background-position: 0 -40px;
}

/*---------- icon - view type ----------*/
.i-view__grid:before, .i-view__list:before, .i-view__chart:before, .i-view__grid:after, .i-view__list:after, .i-view__chart:after {
    width: 20px;
    height: 20px;
    background-image: url(/Images/icon-view.png);
}

.i-view__grid:before, .i-view__grid:after {
    background-position: 0 0;
}

.i-view__grid.active:before, .i-view__grid.active:after {
    background-position: -20px 0;
}

.i-view__list:before, .i-view__list:after {
    background-position: 0 -20px;
}

.i-view__list.active:before, .i-view__list.active:after {
    background-position: -20px -20px;
}

.i-view__chart:before, .i-view__chart:after {
    background-position: 0 -40px;
}

.i-view__chart.active:before, .i-view__chart.active:after {
    background-position: -20px -40px;
}

/*---------- icon - button ----------*/
.i-btn__favorite:before, .i-btn__search:before, .i-btn__calendar:before, .i-btn__refresh:before, .i-btn__keyboard:before, .i-btn__favorite:after, .i-btn__search:after, .i-btn__calendar:after, .i-btn__refresh:after, .i-btn__keyboard:after {
    width: 30px;
    height: 30px;
    background-image: url(/Images/icon-button.png);
}

.i-btn__favorite:before, .i-btn__favorite:after {
    background-position: 0 0;
}

.i-btn__search:before, .i-btn__search:after {
    background-position: 0 -30px;
}

.i-btn__calendar:before, .i-btn__calendar:after {
    background-position: 0 -60px;
}

.i-btn__refresh:before, .i-btn__refresh:after {
    background-position: 0 -90px;
}

.i-btn__keyboard:before, .i-btn__keyboard:after {
    background-position: 0 -120px;
}

/*---------- icon - 20px ----------*/
.i-20__close:before, .i-20__add:before, .i-20__pen:before, .i-20__time:before, .i-20__close:after, .i-20__add:after, .i-20__pen:after, .i-20__time:after {
    width: 20px;
    height: 20px;
    background-image: url(/Images/icon-20px.png);
}

.i-20__close:before, .i-20__close:after {
    background-position: 0 0;
}

.i-20__add:before, .i-20__add:after {
    background-position: 0 -20px;
}

.i-20__pen:before, .i-20__pen:after {
    background-position: 0 -40px;
}

.i-20__time:before, .i-20__time:after {
    background-position: 0 -60px;
}

/*---------- icon - operate ----------*/
.i-op__01:before, .i-op__02:before, .i-op__03:before, .i-op__04-01:before, .i-op__04-02:before, .i-op__05-01:before, .i-op__05-02:before, .i-op__05-03:before, .i-op__06-01:before, .i-op__06-02:before, .i-op__07-01:before, .i-op__07-02:before, .i-op__07-03:before, .i-op__07-04:before, .i-op__01:after, .i-op__02:after, .i-op__03:after, .i-op__04-01:after, .i-op__04-02:after, .i-op__05-01:after, .i-op__05-02:after, .i-op__05-03:after, .i-op__06-01:after, .i-op__06-02:after, .i-op__07-01:after, .i-op__07-02:after, .i-op__07-03:after, .i-op__07-04:after {
    width: 50px;
    height: 50px;
    background-image: url(/Images/icon-operate.png);
}

.i-op__01:before, .i-op__01:after {
    background-position: 0 0;
}

.i-op__02:before, .i-op__02:after {
    background-position: 0 -50px;
}

.i-op__03:before, .i-op__03:after {
    background-position: 0 -100px;
}

.i-op__04-01:before, .i-op__04-01:after {
    background-position: 0 -150px;
}

.i-op__04-02:before, .i-op__04-02:after {
    background-position: 0 -200px;
}

.i-op__05-01:before, .i-op__05-01:after {
    background-position: 0 -250px;
}

.i-op__05-02:before, .i-op__05-02:after {
    background-position: 0 -300px;
}

.i-op__05-03:before, .i-op__05-03:after {
    background-position: 0 -350px;
}

.i-op__06-01:before, .i-op__06-01:after {
    background-position: 0 -400px;
}

.i-op__06-02:before, .i-op__06-02:after {
    background-position: 0 -450px;
}

.i-op__07-01:before, .i-op__07-01:after {
    background-position: 0 -500px;
}

.i-op__07-02:before, .i-op__07-02:after {
    background-position: 0 -550px;
}

.i-op__07-03:before, .i-op__07-03:after {
    background-position: 0 -600px;
}

.i-op__07-04:before, .i-op__07-04:after {
    background-position: 0 -650px;
}

/*---------- icon - other ----------*/
/*---------- button ----------*/
.btn {
    display: block;
    padding: 10px 10px 11px;
    font-size: 16px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    width: 100%;
    border-style: none;
}

    .btn.btn--s {
        padding: 4px 10px 5px;
        font-size: 14px;
    }

    .btn.btn--gn {
        background-color: #00dd38;
        color: white;
    }

    .btn.disabled {
        color: black;
        background-color: grey;
    }

.btn--gy {
    color: #fff;
    background-color: #999;
}

    .btn--gy:hover {
        background-color: #747474;
    }

.btn--gn-dk {
    color: #fff;
    background-color: #005248;
}

    .btn--gn-dk:hover {
        background-color: #00463d;
    }

.btn--gdn {
    color: #fff;
    background-color: #c6af5c;
}

    .btn--gdn:hover {
        background-color: #a8954e;
    }

/*---------- button - color ----------*/
/*---------- widget ----------*/
.tab {
    padding-top: 5px;
}

    .tab .tab__nav {
        margin: 0;
        padding: 0;
        border-bottom: 2px solid #149a88;
        background-color: #e7eeef;
    }

        .tab .tab__nav > li {
            list-style-type: none;
            float: left;
            margin-top: -5px;
            position: relative;
            border-top: 5px solid transparent;
            vertical-align: bottom;
        }

            .tab .tab__nav > li.active {
                background-color: #149a88;
            }

                .tab .tab__nav > li.active .tab__nav-a {
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                    background-color: #149a88;
                }

    .tab .tab__nav-a {
        display: inline-block;
        padding: 13px 30px;
        font-size: 16px;
        text-decoration: none;
        color: #525252;
        background-color: #e7eeef;
    }

    .tab .tab__panel {
        display: none;
    }

        .tab .tab__panel.active {
            display: block;
        }

    .tab.tab--gn {
        padding-top: 0;
    }

        .tab.tab--gn .tab__nav {
            border-bottom: 0;
            background-color: transparent;
        }

            .tab.tab--gn .tab__nav > li {
                margin-top: 0;
            }

                .tab.tab--gn .tab__nav > li:before {
                    content: "";
                    display: inline-block;
                    width: 1px;
                    height: 20px;
                    position: absolute;
                    left: -1px;
                    bottom: 13px;
                    background-color: #fff;
                }

                .tab.tab--gn .tab__nav > li.active {
                    margin: 0 1px;
                    background-color: #e7eeef;
                }

                    .tab.tab--gn .tab__nav > li.active .tab__nav-a {
                        padding: 11px 13px 12px;
                        color: #149a88;
                        background-color: #e7eeef;
                    }

                .tab.tab--gn .tab__nav > li:first-of-type {
                    margin-left: 0;
                }

                    .tab.tab--gn .tab__nav > li:first-of-type:before {
                        content: none;
                    }

        .tab.tab--gn .tab__nav-a {
            padding: 13px;
            font-size: 14px;
            color: #777;
            background-color: #ddd;
        }

        .tab.tab--gn .tab__panel {
            padding: 20px;
            background-color: #e7eeef;
            min-height: 315px;
        }

    .tab.tab--horizon .tab__nav {
        float: left;
        width: 150px;
    }

        .tab.tab--horizon .tab__nav > li {
            float: none;
            border-top-width: 0;
            margin: 5px 0 0;
        }

            .tab.tab--horizon .tab__nav > li:before {
                content: none;
            }

            .tab.tab--horizon .tab__nav > li.active {
                margin: 5px 0;
            }

                .tab.tab--horizon .tab__nav > li.active .tab__panel {
                    display: block;
                }

                .tab.tab--horizon .tab__nav > li.active .tab__nav-a {
                    padding: 19px 13px;
                    font-size: 17px;
                }

            .tab.tab--horizon .tab__nav > li:first-of-type {
                margin-top: 0;
            }

    .tab.tab--horizon .tab__panel {
        margin-left: 150px;
        padding: 25px;
    }

    .tab.tab--horizon .tab__nav-a {
        display: block;
        padding: 19px 13px;
        font-size: 15px;
        text-align: center;
    }

.keyboard {
    margin: 0 6px;
}

    .keyboard .keyboard__switch {
        display: inline-block;
        text-align: center;
        /*&.active {
  	& + .keyboard__panel {
  		display: block;
  	}
  }*/
    }

        .keyboard .keyboard__switch > i {
            display: block;
            text-align: center;
        }

            .keyboard .keyboard__switch > i:before {
                content: "";
                display: block;
                width: 21px;
                height: 13px;
                margin: 0 auto;
                background: url(/Images/icon-keyboard.png) 0 -13px;
                vertical-align: middle;
            }

    .keyboard .keyboard__panel {
        display: none;
        width: 520px;
        padding: 20px;
        position: absolute;
        right: 0;
        border: 1px solid #dedede;
        background-color: #fff;
        -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
        z-index: 90;
    }

        .keyboard .keyboard__panel.active {
            display: block;
        }

    .keyboard .keyboard__title {
        margin-bottom: 10px;
        padding-bottom: 10px;
        font-size: 16px;
        border-bottom: 1px solid #dedede;
        color: #525252;
        text-align: center;
    }

    .keyboard .keyboard__close {
        position: absolute;
        right: 20px;
    }

    .keyboard .keyboard__btns {
        margin: 0;
        padding: 0;
    }

        .keyboard .keyboard__btns > li {
            float: left;
            display: inline-block;
            width: 40px;
            height: 40px;
            margin: 5px;
            line-height: 40px;
            border: 1px solid green;
            background-color: #fff;
            text-align: center;
            cursor: pointer;
            color: green;
            border-radius: 10px;
            font-weight: bolder;
            font-size: 1.25rem;
        }

            .keyboard .keyboard__btns > li.keyboard__btns-icon {
                background-color: #999;
            }

            .keyboard .keyboard__btns > li.keyboard__btns-ok {
                width: 92px;
                color: #fff;
                background-color: #c6af5c;
            }

.collapse .collapse__item {
    margin-top: -1px;
    border: 1px solid #dedede;
    background-color: #f6f6f6;
}

    .collapse .collapse__item.active .collapse__tab:after {
        background-position: -12px 0;
    }

    .collapse .collapse__item.active .collapse__panel {
        max-height: 4000px;
        padding-bottom: 20px;
    }

    .collapse .collapse__item:first-of-type {
        margin-top: 0;
    }

    .collapse .collapse__item.style {
        position: relative;
        padding: 6px 0;
    }

        .collapse .collapse__item.style .lang {
            right: 0px;
            position: absolute;
            top: 0px;
        }

        .collapse .collapse__item.style form > ul {
            border: 1px solid #009F8B;
        }

.collapse .collapse__tab {
    display: block;
    padding: 13px 20px;
    position: relative;
    color: #666;
    text-decoration: none;
}

    .collapse .collapse__tab:after {
        display: inline-block;
        width: 12px;
        height: 12px;
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -6px;
        background: url(/Images/icon-arrow_12px.png) no-repeat -12px -12px;
    }

.collapse a.collapse__tab:after {
    content: "";
}

.collapse .collapse__panel {
    max-height: 0;
    padding: 0 20px;
    -moz-transition: max-height ease 0.3s, padding ease 0.3s;
    -o-transition: max-height ease 0.3s, padding ease 0.3s;
    -webkit-transition: max-height ease 0.3s, padding ease 0.3s;
    transition: max-height ease 0.3s, padding ease 0.3s;
    overflow: hidden;
}

    .collapse .collapse__panel.collapse__panel--wt {
        background-color: #fff;
    }

.collapse.collapse--noboard .collapse__item {
    border: 0;
    border-top: 1px solid #dedede;
}

    .collapse.collapse--noboard .collapse__item:first-of-type {
        border-top: 0;
    }

.collapse.collapse--noboard .collapse__tab {
    padding: 13px 0;
}

    .collapse.collapse--noboard .collapse__tab:after {
        right: 0;
    }

.collapse.collapse--noboard .collapse__panel {
    padding: 0;
}

.collapse.collapse--wt .collapse__item {
    background-color: #fff;
    -moz-transition: background-color ease 0.3s;
    -o-transition: background-color ease 0.3s;
    -webkit-transition: background-color ease 0.3s;
    transition: background-color ease 0.3s;
}

    .collapse.collapse--wt .collapse__item.active {
        background-color: #f6f6f6;
    }


/*---------- index ----------*/
.bulletin {
    padding: 11px 0;
    /*background-color: rgba(246, 214, 191, 0.8);*/
    background: url(/Images/bg-bulletin.png) repeat;
}

    .bulletin .bulletin__wrap {
        display: table;
    }

    .bulletin .bulletin__title,
    .bulletin .bulletin__content,
    .bulletin .bulletin__nav {
        display: table-cell;
        vertical-align: middle;
    }

    .bulletin .bulletin__title {
        width: 150px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    .bulletin .bulletin__items {
        margin: 0;
        padding: 0;
    }

        .bulletin .bulletin__items > li {
            list-style-type: none;
        }

    .bulletin .bulletin__items-a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        font-size: 14px;
        color: #333;
        text-decoration: none;
    }

        .bulletin .bulletin__items-a:hover {
            color: #149a88;
            text-decoration: none;
        }

    .bulletin .bulletin__nav {
        width: 80px;
        text-align: center;
    }

    .bulletin .bulletin__nav-a {
        margin-left: 5px;
    }

        .bulletin .bulletin__nav-a:first-of-type {
            margin-left: 0;
        }

    .bulletin ~ .helper {
        top: 200px;
    }

.idx-kv {
    /*height: 520px;*/
    background-color: #f9f9f9;
}

.idx-kv-small {
    /*height: 520px;*/
    background-color: #f9f9f9;
}

.idx-kv.idx-kv--bg {
    /*height: 520px;*/
}

.idx-kv.idx-banner {
    display: none;
}

.idx-kv.idx-kv--bg.idx-banner {
    display: none;
}

.idx-kv .bxslider {
    margin: 0;
    padding: 0;
    display: table;
}

    .idx-kv .bxslider > li {
        display: table-cell;
        list-style-type: none;
        position: relative;
        /*height: 520px;*/
        vertical-align: middle;
        overflow: hidden;
    }

    .idx-kv .bxslider .bxslider__item {
        display: block;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 440px;
    }

        .idx-kv .bxslider .bxslider__item img {
            display: none;
            min-width: 100%;
            min-height: 100%;
        }

.idx-kv.idx-kv--bg {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
}

.idx-login .idx-login__wrap {
    position: relative;
}

.idx-login .idx-login__main {
    width: 330px;
    position: absolute;
    right: 0;
    top: -440px;
}

.idx-login .idx-login__main--c {
    width: 50%;
    left: 25%;
    position: relative;
    top: auto;
}

    .idx-login .idx-login__main--c div .tab__panel {
        margin: 0px;
    }

    .idx-login .idx-login__main--c .verify .verify__input {
        width: 64%;
    }

.display--none {
    display: none;
}

.card-reader {
    min-height: 171px;
}

.card-reader--empty {
    background: url(/Images/img-card-reader.jpg) no-repeat center center;
    background-size: cover;
}

.idx-cnt {
    margin-bottom: 12px;
    text-align: center;
}

    .idx-cnt .idx-cnt__news {
        float: left;
        width: 39.5%;
        padding-right: 15px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .idx-cnt .idx-cnt__links {
        float: right;
        width: 60.5%;
        padding-left: 15px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .idx-cnt .idx-cnt__title {
        position: relative;
        display: inline-block;
        margin: 25px auto;
        font-size: 20px;
        font-weight: bold;
        color: #525252;
        text-align: center;
    }

        .idx-cnt .idx-cnt__title:after {
            content: "";
            display: inline-block;
            width: 50px;
            height: 2px;
            position: absolute;
            left: 50%;
            margin-left: -25px;
            bottom: 0;
        }

        .idx-cnt .idx-cnt__title.idx-cnt__title--og:after {
            background-color: #f59d15;
        }

        .idx-cnt .idx-cnt__title.idx-cnt__title--gn:after {
            background-color: #149a88;
        }

.news {
    border: 1px solid #dedede;
    height: 299px;
    padding: 0 15px;
    text-align: left;
}

.news__list {
    margin: -1px 0 0;
    padding: 0;
}

    .news__list > li {
        list-style-type: none;
        padding: 15px 0;
        height: 100px;
        border-top: 1px solid #dedede;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
    }

        .news__list > li:first-of-type .news__date {
            color: #f59d15;
        }

.news__date {
    float: left;
    width: 70px;
    height: 70px;
    padding: 12px 0;
    border: 1px solid #dedede;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.news__date-m {
    display: block;
    font-size: 10px;
}

.news__date-d {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.news__content {
    display: -webkit-box;
    margin-left: 90px;
    padding-left: 15px;
    height: 65px;
    border-left: 1px dashed #dedede;
    font-size: 14px;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.news__content-a {
    color: #666;
    text-decoration: none;
}

    .news__content-a:hover {
        color: #149a88;
        text-decoration: none;
    }

.news--fixed {
    height: auto;
}

    .news--fixed .news__list > li {
        display: table;
        width: 100%;
        height: auto;
    }

        .news--fixed .news__list > li:first-of-type .news__date {
            color: #666;
        }

    .news--fixed .news__cal {
        display: table-cell;
        padding-right: 20px;
    }

    .news--fixed .news__content {
        display: table-cell;
        width: 100%;
        height: auto;
        min-height: 80px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: middle;
    }

    .news--fixed div.news__content-a:hover {
        color: #666;
    }

.news-nav {
    position: relative;
    margin-top: -2px;
}

    .news-nav .news-nav__prev,
    .news-nav .news-nav__next {
        float: left;
        display: inline-block;
        width: 50%;
        border: 1px solid #dedede;
        background-color: #fff;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

        .news-nav .news-nav__prev.disable,
        .news-nav .news-nav__next.disable {
            background-color: #f5f5f5;
        }

            .news-nav .news-nav__prev.disable .bx-prev,
            .news-nav .news-nav__next.disable .bx-prev {
                cursor: default;
            }

                .news-nav .news-nav__prev.disable .bx-prev > i,
                .news-nav .news-nav__next.disable .bx-prev > i {
                    background-position: -15px 0;
                }

            .news-nav .news-nav__prev.disable .bx-next,
            .news-nav .news-nav__next.disable .bx-next {
                cursor: default;
            }

                .news-nav .news-nav__prev.disable .bx-next > i,
                .news-nav .news-nav__next.disable .bx-next > i {
                    background-position: -15px -15px;
                }

    .news-nav .bx-prev,
    .news-nav .bx-next {
        display: block;
        padding: 3px 10px;
        text-align: center;
    }

        .news-nav .bx-prev > i,
        .news-nav .bx-next > i {
            display: inline-block;
            width: 15px;
            height: 15px;
            background: url(/Images/icon-news.png) no-repeat 0 0;
            vertical-align: middle;
        }

        .news-nav .bx-prev > i {
            background-position: 0 0;
        }

        .news-nav .bx-next > i {
            background-position: 0 -15px;
        }

.useful {
    padding: 40px;
    height: 330px;
    text-align: left;
    background: url(/Images/bg-useful.png) no-repeat center center;
    background-size: cover;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .useful .useful__list {
        margin: 0;
        padding: 0;
        background: url(/Images/bg-useful-list.png) no-repeat center center;
        background-size: cover;
    }

        .useful .useful__list > li {
            list-style-type: none;
            float: left;
            width: 25%;
            padding: 13px 10px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
        }

    .useful .useful__item {
        display: block;
        font-size: 16px;
        color: #666;
        text-decoration: none;
    }

        .useful .useful__item:hover {
            color: #149a88;
            text-decoration: none;
        }

        .useful .useful__item:before {
            display: block;
            margin: 10px auto;
        }

/*---------- 帳戶總覽 ----------*/
.my {
    /*padding: 15px;*/
}

.my__info,
.my__chart {
    float: left;
    padding: 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .my__info + .my__content,
    .my__chart + .my__content {
        float: right;
        padding: 15px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.my__info {
    width: 415px;
}

    .my__info + .my__content {
        width: 555px;
    }

.my__chart {
    width: 295px;
}

    .my__chart + .my__content {
        width: 705px;
    }

.my--info .collapse__tab {
    font-size: 16px;
    color: #149a88;
}

.my--overview .tab__panel {
    margin: 30px 0;
}

.my--overview .collapse__item.active .collapse__panel {
    padding: 0;
}

.my--overview .collapse__tab {
    font-size: 16px;
}

.my--overview .collapse__panel {
    padding: 0;
}

.my-info__title {
    margin: 5px 0;
    font-size: 18px;
    font-weight: bold;
    color: #525252;
    text-align: center;
}

.my-info__wrap {
    margin-bottom: 30px;
    padding: 0 15px;
    background-color: #f6f6f6;
}

    .my-info__wrap:last-of-type {
        margin-bottom: 0;
    }

.my-notify {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .my-notify > li {
        padding: 15px 0;
        border-top: 1px solid #dedede;
    }

        .my-notify > li:first-of-type {
            border-top: 0;
        }

.my-notify__title {
    margin-bottom: 5px;
    font-size: 16px;
    color: #f59d15;
}

.calendar .calendar__date {
    padding: 15px 25px 0;
    font-size: 16px;
}

.calendar .calendar__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .calendar .calendar__list > li {
        padding: 5px 20px;
        border-bottom: 1px solid #dedede;
    }

.calendar .calendar__title {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
}

.calendar .calendar__action {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.chart {
    text-align: center;
}

    .chart .chart__tip {
        margin-top: 5px;
        text-align: center;
    }

    .chart .chart__pie {
        width: 250px;
        height: 250px;
        margin: 0 auto;
    }

    .chart .chart__spline {
        width: 80%;
        height: 550px;
        margin: 0 auto;
    }

.account {
    display: block;
}

    .account .account__title {
        display: inline-block;
        width: 260px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: middle;
    }

    .account .account__name {
        display: inline-block;
        min-width: 100px;
        vertical-align: middle;
    }

    .account .account__amount {
        display: inline-block;
        width: 140px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: right;
    }

    .account .account__color {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 5px;
        vertical-align: middle;
    }

    .account .account__unit {
        display: inline-block;
        min-width: 70px;
        vertical-align: middle;
        text-align: left;
    }

    .account .account__action {
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
    }

    .account .acount__link {
        margin-left: 10px;
    }

    .account.account--total {
        font-weight: bold;
    }

    .account.account--indent .account__title {
        padding-left: 65px;
    }

.account-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .account-list > li {
        padding: 13px 20px;
        border-top: 1px dashed #dedede;
        font-size: 15px;
    }

.overview {
    margin: 0 30px;
}

    .overview .overview__links {
        padding: 10px 0;
        text-align: right;
    }

    .overview .overview__link {
        font-size: 15px;
        font-weight: bold;
        color: #666;
    }

        .overview .overview__link:hover {
            color: #149a88;
        }

        .overview .overview__link.active {
            font-size: 18px;
            color: #149a88;
            text-decoration: none;
        }

        .overview .overview__link ~ .overview__link {
            margin-left: 15px;
        }

/*---------- other ----------*/
.cash-box {
    padding: 0;
    list-style-type: none;
}

    .cash-box > li {
        position: relative;
        float: left;
        width: 16.66%;
        margin: 0 0 15px;
    }

    .cash-box .cash-box__item {
        display: block;
        width: 130px;
        height: 130px;
        margin: 0 auto;
        padding: 20px 5px;
        font-size: 14px;
        line-height: 1.2;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #666;
        text-decoration: none;
        background: url(/Images/bg-cashbox.png) repeat;
        text-align: center;
    }

        .cash-box .cash-box__item:before {
            content: "";
            display: block;
            margin: 0 auto 15px;
            width: 32px;
            height: 32px;
            background: url(/Images/icon-cashbox.png) no-repeat 0 0;
        }

        .cash-box .cash-box__item:hover {
            color: #149a88;
        }

    .cash-box .cash-box__item--f {
        border-bottom: 2px solid #f28c13;
    }

        .cash-box .cash-box__item--f:before {
            background-position: 0 -32px;
        }

    .cash-box .cash-box__item--t {
        border-bottom: 2px solid #00d3b4;
    }

        .cash-box .cash-box__item--t:before {
            background-position: 0 0;
        }

    .cash-box .cash-box__item--b {
        border-bottom: 2px solid #7db7ff;
    }

        .cash-box .cash-box__item--b:before {
            background-position: 0 -64px;
        }

    .cash-box .cash-box__item--p {
        border-bottom: 2px solid #345684;
    }

        .cash-box .cash-box__item--p:before {
            background-position: 0 -96px;
        }

    .cash-box .cash-box__item--g {
        border-bottom: 2px solid #c6af5c;
    }

        .cash-box .cash-box__item--g:before {
            background-position: 0 -128px;
        }

    .cash-box .cash-box__big {
        font-size: 20px;
    }

    .cash-box .cash-box__wrap,
    .cash-box .cash-box__link--add,
    .cash-box .cash-box__link--edit {
        position: relative;
        display: block;
        width: 130px;
        height: 130px;
        margin: 0 auto;
        padding: 17px 5px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: url(/Images/bg-cashbox.png) repeat;
        color: #666;
        text-decoration: none;
    }

    .cash-box .cash-box__link {
        display: block;
        text-align: center;
        color: #666;
        text-decoration: none;
        background: url(/Images/bg-cashbox.png) repeat;
    }

        .cash-box .cash-box__link:before {
            display: block;
            margin: 0 auto 15px;
        }

        .cash-box .cash-box__link:hover {
            color: #149a88;
        }

    .cash-box .cash-box__link--add {
        padding: 40px 5px;
        border: 1px dashed #666;
        background: #fff;
    }

        .cash-box .cash-box__link--add:before {
            margin-bottom: 5px;
        }

    .cash-box .cash-box__link--edit {
        padding: 40px 5px;
        background: #c6af5c;
        color: #fff;
    }

        .cash-box .cash-box__link--edit:hover {
            background-color: #a8954e;
            color: #fff;
        }

        .cash-box .cash-box__link--edit:before {
            margin-bottom: 5px;
        }

    .cash-box .cash-box__del {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        background-color: #005248;
    }

        .cash-box .cash-box__del:before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 5px;
            background: url(/Images/icon-20px.png) no-repeat 0 0;
            vertical-align: middle;
        }

    .cash-box .cash-box__check {
        display: none;
    }

    .cash-box.cash-box--edit .cash-box__add,
    .cash-box.cash-box--edit .cash-box__edit {
        display: none;
    }

    .cash-box.cash-box--edit .cash-box__del {
        display: inline-block;
    }

    .cash-box.cash-box--edit .cash-box__wrap {
        border: 1px solid #dedede;
    }

.tb--mobile--only {
    display: none;
}

.tb--mobile--hide {
    display: normal;
}

.tb {
    width: 100%;
    border: 1px solid #dedede;
    text-align: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .tb th,
    .tb td {
        padding: 12px 10px;
        border: 1px solid #dedede;
        text-align: left;
    }

    .tb thead th {
        border-bottom: 2px solid #dedede;
        background-color: #e5f5f3;
        text-align: center;
    }

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

    .tb tfoot tr {
        background-color: #fffee8;
    }

    .tb .tb__action {
        margin-right: 5px;
        font-weight: bold;
        color: #19b2b6;
        white-space: nowrap;
    }

        .tb .tb__action.tb__a {
            padding: 3px 8px;
            background-color: #19b2b6;
            color: #fff;
            text-decoration: none;
            border: 1px solid #999;
        }

            .tb .tb__action.tb__a:hover {
                background-color: #159699;
            }

        .tb .tb__action:last-child {
            margin-right: 0;
        }

    .tb .tb__action--arrow:after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url(/Images/icon-arrow_10px.png) no-repeat -10px -30px;
        vertical-align: middle;
    }

    .tb .tr--sum {
        background-color: #fffee8;
    }

        .tb .tr--sum th {
            font-size: 18px;
        }

    .tb .td--text {
        text-align: left !important;
    }

    .tb .td--currency {
        text-align: right !important;
    }

    .tb .td--total {
        font-size: 18px;
        font-weight: bold;
    }

    .tb.tb--wt {
        background-color: #fff;
    }

    .tb.tb--wt--td td {
        background-color: #fff;
    }

    .tb.tb--view tbody tr {
        background-color: transparent;
    }

    .tb.tb--view tbody td:first-of-type {
        background-color: #f6f6f6;
        font-weight: bold;
        text-align: right;
    }

    .tb.tb--view.tb--view--50 {
        width: 50%;
        float: left;
    }

        .tb.tb--view.tb--view--50 + .tb--view--50 {
            margin-top: 1px;
            float: none;
        }

        .tb.tb--view.tb--view--50 tbody td:nth-child(1) {
            width: 114px;
        }

    .tb.tb--summary th,
    .tb.tb--summary td {
        padding: 12px 0;
        border-left: 0;
        border-right: 0;
    }

    .tb.tb--summary th {
        text-align: right;
    }

    .tb.tb--summary td {
        padding-right: 10px;
    }

    .tb.tb--summary tr:nth-of-type(even) {
        background-color: transparent;
    }

    .tb + .tb {
        margin-top: -1px;
    }

.tb-tip {
    margin: 5px 0;
    color: #999;
}

.tb.tb--rwd td {
    text-align: center;
}

.tb.tb--rwd.tb--wt td {
    text-align: left;
}

.tb--icon {
    float: right;
    width: 65%;
}

.tb--icon--e {
    margin-left: 190px;
    display: inline-block;
}

    .tb--icon--e + span {
        margin-left: 10px;
    }

/*TableEdit*/

.tb.tb--rwd.tb--edit input {
    padding: 0px 4px;
    height: 35px;
    /*background-color:rgba(255,255,255,0);*/
}

.tb.tb--rwd.tb--edit .form__field-row select {
    width: 150px;
    height: 35px;
    border: 1px solid #ddd;
}

.tb.tb--rwd.tb--edit td:nth-last-child(1) input[type="button"] {
    color: #19b2b6;
    text-decoration: underline;
    background: none;
    border: 0px;
    font-weight: bold;
    height: auto;
}

    .tb.tb--rwd.tb--edit td:nth-last-child(1) input[type="button"]:hover {
        text-decoration: none;
    }

.input_reset {
    padding: 0px !important;
    height: auto !important;
    margin-right: 10px;
}

.notes {
    border-top: 1px dashed #e58d38;
    padding: 20px 10px;
    margin-top: 25px;
    color: black;
}

    .notes .notes__title {
        font-weight: bold;
        color: #f59d15;
    }

        .notes .notes__title:before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/Images/icon-notes.png) no-repeat;
            background-size: 20px;
            vertical-align: middle;
            margin-right: 10px;
        }

    .notes .notes__list {
        padding: 0 0 0 10px;
        margin: 0;
        counter-reset: one-level-counter;
    }

        .notes .notes__list li {
            margin: 10px 0;
            list-style-type: none;
        }

        .notes .notes__list ol {
            padding: 0 0 0 23px;
            margin: 0;
            counter-reset: my-badass-counter;
            list-style-type: none;
        }

        .notes .notes__list li:before {
            content: counter(one-level-counter) ".";
            counter-increment: one-level-counter;
            position: relative;
            left: -5px;
        }

        .notes .notes__list ol > li {
            position: relative;
        }

            .notes .notes__list ol > li:before {
                content: "(" counter(my-badass-counter) ")";
                counter-increment: my-badass-counter;
                position: absolute;
                left: -20px;
            }

    .notes .notes__ul {
        list-style-type: disc;
    }

    .notes.notes--helper {
        margin: 0 20px;
        padding-top: 20px;
        border-color: #d2d2d2;
    }

        .notes.notes--helper .notes__title {
            color: #525252;
        }

            .notes.notes--helper .notes__title:before {
                background-position: 0 -20px;
            }

    .notes.notes--noboard {
        border-top: 0;
    }

.notes-half__item {
    float: left;
    margin: 10px 0;
    padding: 0 10px;
    width: 50%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .notes-half__item:nth-of-type(2n+1) {
        clear: left;
    }

.agreement {
    padding: 20px;
    border: 1px solid #dedede;
    /*    max-height:500px;
    overflow:auto;*/
}

.agreement__main {
    /*max-height: 400px;*/
    line-height: 28px;
    overflow: auto;
}

.agreement__list {
    position: relative;
    margin-top: 10px;
}

    .agreement__list div {
        position: absolute;
    }

    .agreement__list span {
        padding-left: 80px;
        display: inline-block;
    }

.agreement__agree {
    margin-top: 20px;
}

    .agreement__agree .trans-element-checkbox {
        float: left;
        margin-top: 2px;
    }

        .agreement__agree .trans-element-checkbox + label {
            display: block;
            margin-left: 25px;
        }

.verify .verify__input {
    display: inline-block;
    width: 125px;
    vertical-align: middle;
}

    .verify .verify__input input {
        height: 35px;
        padding: 6px 16px;
    }

.verify .verify__img {
    display: inline-block;
    vertical-align: middle;
}

    .verify .verify__img img {
        height: 35px;
    }

.jc .jc__head {
    margin: 2px 0 5px;
    text-align: center;
}

.jc .jc__choose {
    display: inline-block;
    width: 155px;
    padding: 0 20px;
    font-size: 20px;
    color: #333;
    text-align: center;
    vertical-align: middle;
}

.jc .jc__prevMonth {
    display: inline-block;
    vertical-align: middle;
}

    .jc .jc__prevMonth:before {
        content: "";
        display: inline-block;
        width: 21px;
        height: 21px;
        background: url(/Images/icon-double-arrow.png) no-repeat 0 0;
        vertical-align: middle;
    }

.jc .jc__nextMonth {
    display: inline-block;
    vertical-align: middle;
}

    .jc .jc__nextMonth:before {
        content: "";
        display: inline-block;
        width: 21px;
        height: 21px;
        background: url(/Images/icon-double-arrow.png) no-repeat 0 -21px;
        vertical-align: middle;
    }

.jc .jc__calendar {
    border: 1px solid #dedede;
}

    .jc .jc__calendar > thead {
        border-bottom: 2px solid #dedede;
        background-color: #f5f5f5;
    }

.jc .jc__calendarDateHeader {
    padding: 5px;
    width: 14.285%;
    font-size: 13px;
    font-weight: normal;
    border: 1px solid #dedede;
}

.jc .jc__calendarDateBox {
    padding: 5px;
    height: 54px;
    border: 1px solid #dedede;
    vertical-align: top;
}

    .jc .jc__calendarDateBox.today {
        background-color: #fffee8;
    }

.jc .jc__calendarDateLabel > a {
    display: inline-block;
    width: 18px;
    font-size: 13px;
    color: #999;
    text-decoration: none;
    cursor: default;
    text-align: center;
}

.jc .jc__event > a {
    display: inline-block;
    width: 18px;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
}

    .jc .jc__event > a:before {
        content: "●";
    }

.step {
    margin: 18px 0;
    text-align: center;
}

.step__item {
    display: inline-block;
    margin-left: 75px;
    font-size: 16px;
}

    .step__item:first-of-type {
        margin-left: 0;
    }

    .step__item.active .step__no {
        color: #fff;
        background-position: 0 -30px;
    }

    .step__item.active .step__name {
        color: #149a88;
    }

.step__no {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: url(/Images/icon-step.png) no-repeat 0 0;
    vertical-align: middle;
    text-align: center;
    color: #999;
}

.step__name {
    display: inline-block;
    color: #333;
    vertical-align: middle;
}

.step__no2 {
    display: inline-block;
    border: 2px solid #999;
    border-radius: 100px;
    padding: 2px 9px 2px 9px;
    color: #555;
    vertical-align: middle;
    margin-left: 20px;
}

.step__name2 {
    color: #555;
    vertical-align: middle;
    margin-right: 20px;
}

.immediately {
    position: absolute;
    margin: 11px 0 12px -70px;
    font-size: 15px;
}

.result {
    min-height: 250px;
    margin-bottom: 15px;
    font-size: 15px;
}

.result__row {
    width: 70%;
    margin: 10px auto;
}

.result__title {
    display: inline-block;
    width: 140px;
    text-align: right;
}

.result__field {
    display: inline-block;
}

.smap__mm1-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .smap__mm1-list > li {
        background-color: #f6f6f6;
    }

.smap__mm1-name {
    display: inline-block;
    padding: 5px 30px;
    font-size: 20px;
    font-weight: bold;
    color: #149a88;
    text-decoration: none;
}

    .smap__mm1-name > span {
        vertical-align: middle;
    }

    .smap__mm1-name:hover > span {
        text-decoration: underline;
    }

.smap__mm2 {
    background-color: #fff;
}

.smap__mm2--fluid .smap__mm2-list > li {
    width: auto;
    margin-left: 55px;
}

    .smap__mm2--fluid .smap__mm2-list > li:first-of-type {
        margin-left: 0;
    }

.smap__mm2-list {
    margin: 0;
    padding: 15px 30px 40px;
    list-style-type: none;
}

    .smap__mm2-list > li {
        float: left;
        width: 20%;
        padding-right: 5px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .smap__mm2-list > li:nth-of-type(5n+1) {
            clear: left;
        }

        .smap__mm2-list > li:nth-of-type(5) ~ li {
            margin-top: 20px;
        }

.smap__mm2-name {
    font-size: 16px;
    color: #333;
    text-decoration: none;
}

    .smap__mm2-name:hover {
        color: #149a88;
        text-decoration: underline;
    }

.smap__mm3 {
    margin-top: 5px;
}

.smap__mm3-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.smap__mm3-name {
    position: relative;
    display: inline-block;
    padding-left: 15px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
}

    .smap__mm3-name.play {
        padding-left: 20px;
    }

    .smap__mm3-name:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0;
        margin: 6px 0 5px;
        background: url(/Images/icon-arrow_10px.png) no-repeat -10px -30px;
        vertical-align: middle;
    }

    .smap__mm3-name.play:before {
        margin: 4px 0;
        width: 16px;
        height: 16px;
        background: url(/Images/organization/form.gif) no-repeat;
    }

    .smap__mm3-name:hover {
        color: #149a88;
        text-decoration: underline;
    }

.view-type {
    text-align: right;
}

.view-type__item {
    margin-left: 15px;
}

    .view-type__item > span {
        font-size: 14px;
        font-weight: bold;
        color: #666;
        text-decoration: underline;
        vertical-align: middle;
    }

        .view-type__item > span:hover {
            color: #149a88;
        }

    .view-type__item.active > span {
        color: #149a88;
        text-decoration: none;
    }

.view {
    padding-bottom: 10px;
}

.view__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .view__list > li {
        float: left;
        width: 25%;
        padding: 0 15px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .view__list > li:nth-of-type(4n+1) {
            clear: left;
        }

        .view__list > li:nth-of-type(4) ~ li {
            margin-top: 25px;
        }

.exrate__name {
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.exrate__flag {
    border: 1px solid #dedede;
}

    .exrate__flag img {
        width: 100%;
    }

    .exrate__flag ~ .exrate__info {
        margin-top: -1px;
    }

.exrate__info {
    display: table;
    width: 100%;
    border: 1px solid #dedede;
    border-collapse: collapse;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*& ~ & {
  	margin-top: -1px;
  }*/
}

.exrate__inout, .exrate__rate {
    display: table-cell;
    width: 50%;
    padding: 15px 5px;
    text-align: center;
    border: 1px solid #dedede;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.exchange__name {
    display: inline-block;
    margin-left: 35px;
    font-size: 17px;
    font-weight: bold;
    color: #525252;
}

.exchange__time {
    float: right;
    color: #999;
}

.exchange__wrap {
    display: table;
    width: 100%;
    border: 1px solid #dedede;
}

.exchange__flag {
    display: table-cell;
    width: 20%;
    min-width: 200px;
    padding: 10px 20px;
    border: 1px solid #dedede;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.exchange__flag-img {
    width: 156px;
    margin: 0 auto 5px;
}

    .exchange__flag-img > img {
        width: 100%;
    }

.exchange__currency {
    text-align: left;
}

.exchange__rate {
    display: table-cell;
    width: 80%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.exchange__info {
    width: 50%;
    float: left;
}

.exchange__agent {
    line-height: 50px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #dedede;
    color: #333;
}

.exchange__cell {
    width: 50%;
    float: left;
    line-height: 60px;
    border: 1px solid #dedede;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

    .exchange__cell:nth-of-type(2) ~ .exchange__cell {
        background-color: #f6f6f6;
    }

.ercal__head {
    padding: 0 15px;
    line-height: 45px;
    font-weight: bold;
    border: 1px solid #dedede;
    background-color: #f6f6f6;
}

.ercal__wrap {
    display: table;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.ercal__side, .ercal__mid {
    display: table-cell;
    border: 1px solid #dedede;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ercal__side {
    width: 250px;
}

.ercal__mid {
    position: relative;
    width: 500px;
    /*padding: 5px 35px 10px;*/
    cursor: pointer;
}

    .ercal__mid:before, .ercal__mid:after {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        background: url(/Images/icon-rotate.png) no-repeat;
        vertical-align: middle;
    }

    .ercal__mid:before {
        content: "";
        bottom: 15px;
        left: 7%;
        background-position: 0 -20px;
    }

    .ercal__mid:after {
        content: "";
        top: 15px;
        right: 7%;
        background-position: 0 0;
    }

.ercal__top {
    line-height: 60px;
    border-bottom: 1px solid #dedede;
}

.ercal__bottom {
    padding: 10px;
    line-height: 45px;
}

.ercal__back, .ercal__front {
    position: absolute;
    top: 5px;
    left: 5%;
    width: 80%;
    padding-top: 15px;
    height: 70px;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #999;
    z-index: 50;
    -webkit-box-shadow: 3px 4px 5px rgba(222, 222, 222, 0.75);
    -moz-box-shadow: 3px 4px 5px rgba(222, 222, 222, 0.75);
    box-shadow: 3px 4px 5px rgba(222, 222, 222, 0.75);
    border: solid 1px #dedede;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

    .ercal__back.active, .ercal__front.active {
        top: 45px;
        left: 15%;
        z-index: 60;
        color: #525252;
        -webkit-box-shadow: 3px 4px 5px rgba(73, 73, 73, 0.75);
        -moz-box-shadow: 3px 4px 5px rgba(73, 73, 73, 0.75);
        box-shadow: 3px 4px 5px rgba(73, 73, 73, 0.75);
        border: solid 1px #7e7e7e;
    }

.ercal__back {
    background-color: #f6f6f6;
}

.ercal__front {
    background-color: #d4f0f0;
}

.info-title {
    margin: 0 15px;
    font-size: 20px;
    font-weight: bold;
    color: #525252;
}

.pager {
    margin: 40px 0;
    text-align: center;
}

    .pager > a {
        display: inline-block;
        line-height: 40px;
        width: 40px;
        height: 40px;
        margin: 0 3px;
        border: 1px solid #dedede;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #333;
        text-decoration: none;
        vertical-align: middle;
    }

.pager__prev:before, .pager__next:before {
    content: "";
    display: inline-block;
    margin-top: -3px;
    width: 12px;
    height: 12px;
    background: url(/Images/icon-arrow_12px.png) no-repeat;
    vertical-align: middle;
}

.pager__prev.disable, .pager__next.disable {
    background-color: #f5f5f5;
    cursor: default;
}

.pager__prev:before {
    background-position: -12px -24px;
}

.pager__prev.disable:before {
    background-position: -36px -24px;
}

.pager__next:before {
    background-position: -12px -36px;
}

.pager__next.disable:before {
    background-position: -36px -36px;
}

.pager__no.active {
    background-color: #999;
    color: #fff;
}

.op {
    position: relative;
}

.op__row {
    position: relative;
    display: table;
    width: 100%;
    margin: 20px 0;
    text-align: center;
}

.op__col {
    position: relative;
    display: table-cell;
    padding: 0 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
}

.op__col-2-1 {
    width: 50%;
}

    .op__col-2-1:nth-of-type(odd) {
        padding-right: 12px;
        text-align: right;
    }

        .op__col-2-1:nth-of-type(odd) .op__item {
            display: inline-block;
        }

    .op__col-2-1:nth-of-type(even) {
        padding-left: 12px;
        text-align: left;
    }

    .op__col-2-1 .op__item {
        display: inline-block;
    }

.op__col-3-1 {
    width: 33.33%;
}

.op__col-3-2 {
    width: 66.66%;
}

.op__col--big {
    padding: 38px 10px;
    background-color: #fffee8;
    border-radius: 10px;
}

.op__item {
    display: inline-block;
    padding: 25px 0 30px;
    text-align: left;
}

    .op__item:before {
        float: left;
    }

.op__content {
    margin-left: 55px;
    min-height: 50px;
}

    .op__content > * {
        margin-top: 0;
    }

.op__warning {
    margin: 3px 0;
    font-size: 14px;
    color: #ff0000;
}

.op__link {
    display: block;
    position: relative;
    margin: 3px 0;
    text-decoration: none;
}

    .op__link:hover {
        color: #149a88;
    }

.op__root {
    font-size: 16px;
    color: #525252;
}

    .op__root:after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-top: -3px;
        margin-left: 5px;
        background: url(/Images/icon-arrow-round.png) no-repeat 0 -48px;
        vertical-align: middle;
    }

    .op__root:hover:after {
        background-position: -16px -48px;
    }

.op__child {
    margin-left: 3px;
    font-size: 14px;
    color: #666;
}

    .op__child:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url(/Images/icon-arrow_10px.png) no-repeat -10px -30px;
        vertical-align: middle;
    }

.op__start {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -60px;
    display: inline-block;
    width: 120px;
    height: 120px;
    padding: 35px 0;
    font-size: 16px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border-radius: 60px;
    background-color: #f59d15;
    color: #fff;
}

.op__begin {
    position: relative;
    text-align: center;
}

    .op__begin:before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 12px;
        position: absolute;
        top: -12px;
        left: 50%;
        margin-left: -3px;
        background-color: #00d3b4;
    }

    .op__begin:after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: -20px;
        left: 50%;
        margin-left: -10px;
        background: url(/Images/icon-op-arrow_gn.png) no-repeat 0 -20px;
    }

.op__begin-ctx {
    display: inline-block;
    padding: 5px 45px;
    font-size: 16px;
    background-color: #00d3b4;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 20px;
}

.op__arrow--og:before, .op__arrowd--og:before, .op__arrow--gn:before, .op__arrowd--gn:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.op__arrow--og:before {
    background-image: url(/Images/icon-op-arrow_og.png);
}

.op__arrowd--og:before {
    background-image: url(/Images/icon-op-arrowd_og.png);
}

.op__arrow--gn:before {
    background-image: url(/Images/icon-op-arrow_gn.png);
}

.op__arrowd--gn:before {
    background-image: url(/Images/icon-op-arrowd_gn.png);
}

.op__arrow--top, .op__arrow--top-right, .op__arrow--east, .op__arrow--bottom, .op__arrow--bottom-right {
    display: inline-block;
    position: absolute;
}

.op__arrow--top {
    top: -10px;
    left: 50%;
    margin-left: -10px;
}

.op__arrow--top-right {
    top: -10px;
    right: 20%;
}

.op__arrow--bottom {
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
}

.op__arrow--bottom-right {
    bottom: -10px;
    right: 20%;
}

.op__arrow--east {
    right: 0;
    top: 50%;
    margin-top: -10px;
}

.op__arrow--up:before {
    background-position: 0 0;
}

.op__arrow--down:before {
    background-position: 0 -20px;
}

.op__arrow--up-right:before {
    background-position: 0 -100px;
}

.op__arrow--down-right:before {
    background-position: 0 -140px;
}

.op__arrow--down-left:before {
    background-position: 0 -120px;
}

.op__arrow--right:before {
    background-position: 0 -60px;
}

.action-area {
    width: 240px;
    margin: 30px auto;
    text-align: center;
}

.action-inline {
    margin: 30px auto;
    text-align: center;
}

.action-2 {
    display: inline-block;
    width: 240px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

    .action-2:nth-of-type(odd) {
        padding-right: 10px;
    }

    .action-2:nth-of-type(even) {
        padding-left: 10px;
    }

.action-AcctID .action-2 {
    margin-top: 20px;
}

    .action-AcctID .action-2 span {
        position: absolute;
        width: 230px;
        text-align: center;
        top: -30px;
        left: 10px;
    }

.action-3 {
    display: inline-block;
    width: 240px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .action-3:nth-of-type(3n) {
        padding-left: 10px;
    }

    .action-3:nth-of-type(3n+1) {
        padding-right: 10px;
    }

    .action-3:nth-of-type(3n+2) {
        padding-left: 5px;
        padding-right: 5px;
    }

.action-4 {
    display: inline-block;
    width: 25%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px;
    margin: 5px 0;
    word-break: keep-all;
}

.uppercase {
    text-transform: uppercase;
}

.pc-hide {
    display: none;
}

/*---------- popup ----------*/
.popup {
    display: none;
    min-width: 540px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .popup .popup__date {
        float: right;
        padding: 19px 20px 10px;
        font-size: 14px;
        color: #fff;
    }

    .popup .popup__wrap {
        padding: 10px 20px;
    }

    .popup .form {
        padding: 0;
        background-color: transparent;
    }

    .popup .form__row {
        width: auto;
    }

    .popup .action-2 {
        width: 50%;
        float: left;
    }

    .popup .action-3 {
        width: 33.33%;
        float: left;
    }

/*---------- page ----------*/
/*---------- list ----------*/
/*---------- background ----------*/
/*---------- line ----------*/
.line--dash {
    border: 0;
    border-bottom: 1px dashed #dedede;
}

    .line--dash.mob {
        margin: 0 50px;
    }

/*---------- link ----------*/
a {
    color: #149a88;
    text-decoration: underline;
}

    a:hover {
        text-decoration: none;
    }

    a.link.icon:hover span {
        text-decoration: none;
    }

    a.link.icon span {
        text-decoration: underline;
    }

/*---------- form ----------*/

input[type="text"],
input[type="search"],
input[type="date"],
input[type="month"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="file"],
.textbox {
    width: 100%;
    height: 45px;
    padding: 12px 16px;
    border: 1px solid #dedede;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    color: #333;
}

    input[type="text"]::-webkit-inner-spin-button, input[type="text"]::-webkit-outer-spin-button,
    input[type="search"]::-webkit-inner-spin-button,
    input[type="search"]::-webkit-outer-spin-button,
    input[type="date"]::-webkit-inner-spin-button,
    input[type="date"]::-webkit-outer-spin-button,
    input[type="month"]::-webkit-inner-spin-button,
    input[type="month"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button,
    input[type="tel"]::-webkit-inner-spin-button,
    input[type="tel"]::-webkit-outer-spin-button,
    input[type="password"]::-webkit-inner-spin-button,
    input[type="password"]::-webkit-outer-spin-button,
    input[type="email"]::-webkit-inner-spin-button,
    input[type="email"]::-webkit-outer-spin-button,
    input[type="file"]::-webkit-inner-spin-button,
    input[type="file"]::-webkit-outer-spin-button,
    .textbox::-webkit-inner-spin-button,
    .textbox::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

.form__ui--s input[type="text"], .form__ui--s input[type="search"], .form__ui--s input[type="date"], .form__ui--s input[type="month"], .form__ui--s input[type="number"], .form__ui--s input[type="tel"], .form__ui--s input[type="password"], .form__ui--s input[type="email"], .form__ui--s input[type="file"], .form__ui--s .textbox {
    padding: 6px 11px 7px;
    height: 35px;
}

.icon > input[type="text"], .icon > input[type="search"], .icon > input[type="date"], .icon > input[type="month"], .icon > input[type="number"], .icon > input[type="tel"], .icon > input[type="password"], .icon > input[type="email"], .icon > input[type="file"], .icon > .textbox {
    padding-left: 50px;
}

input[type="date"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

input[type="date"].datepicker, input[type="date"].monthpicker,
input[type="month"].datepicker,
input[type="month"].monthpicker {
    background: url(/Images/icon-calendar.png) #fff no-repeat right center;
}

textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dedede;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form {
    padding: 35px 0;
    background-color: #f6f6f6;
}

    .form.form-min {
        padding: 10px 0;
        width: 100%;
        margin: auto;
    }

    .form.form--hor {
        padding: 15px;
    }

        .form.form--hor .form__row {
            display: inline-block;
            width: auto;
            margin: 0 0 0 15px;
            vertical-align: middle;
        }

        .form.form--hor .form__field {
            margin-left: 0;
        }

        .form.form--hor input[type="text"],
        .form.form--hor input[type="search"],
        .form.form--hor input[type="date"],
        .form.form--hor input[type="month"],
        .form.form--hor input[type="number"],
        .form.form--hor input[type="tel"],
        .form.form--hor input[type="password"],
        .form.form--hor input[type="email"],
        .form.form--hor input[type="file"],
        .form.form--hor .textbox,
        .form.form--hor select,
        .form.form--hor .transformSelect {
            width: 290px;
        }

    .form.form--idx {
        padding: 0;
        background-color: transparent;
    }

        .form.form--idx .form__row {
            width: auto;
            margin: 10px 0;
        }

            .form.form--idx .form__row:first-of-type {
                margin-top: 0;
            }

        .form.form--idx .form__title {
            display: none;
        }

        .form.form--idx .form__field {
            margin: 0;
        }

        .form.form--idx .form__remind {
            margin: 10px 0;
        }

        .form.form--idx .form__btn {
            width: auto;
            margin: 15px 0;
        }

        .form.form--idx .form__aid {
            text-align: center;
        }

            .form.form--idx .form__aid > a {
                display: inline-block;
            }

            .form.form--idx .form__aid.apply > a {
                text-decoration: none;
                color: #666;
                margin-bottom: 5px;
            }

                .form.form--idx .form__aid.apply > a:hover {
                    color: #888;
                    transition: .5s;
                }

                .form.form--idx .form__aid.apply > a + a {
                    border-left: 1px solid #999;
                    padding-left: 7px;
                    margin-left: 3px;
                    line-height: 15px;
                }

        .form.form--idx .keyboard__switch {
            color: red;
        }

    .form.form--idx-h {
        height: auto;
    }

        .form.form--idx-h .form__title {
            float: none;
            display: inline-block;
            width: 95px;
            height: 35px;
            margin-right: 0;
            padding: 6px 0 7px;
            vertical-align: top;
            text-align: right;
        }

        .form.form--idx-h .form__field {
            display: inline-block;
            width: 320px;
            vertical-align: top;
        }

        .form.form--idx-h .form__remind {
            font-size: 15px;
        }

        .form.form--idx-h .form__aid > a {
            font-size: 15px;
            color: #149a88;
        }

        .form.form--idx-h .keyboard__switch {
            color: #999;
        }

        .form.form--idx-h .form__field-sk .form__ui {
            margin-right: 105px;
        }

        .form.form--idx-h .form__field-sk .form__ui-sk {
            padding: 5px 0;
        }

        .form.form--idx-h .form__field-sk .keyboard__switch i {
            display: inline-block;
            margin-right: 5px;
        }

            .form.form--idx-h .form__field-sk .keyboard__switch i:before {
                background-position: 0 -13px;
            }

.form__row {
    width: 80%;
    margin: 15px auto;
}

    .form__row.h {
        min-height: 44px;
    }

.form__title {
    float: left;
    display: inline-block;
    width: 25%;
    height: 45px;
    padding: 11px 10px 12px 0;
    color: #000000;
    vertical-align: middle;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    clear: left;
}

    .form__title.long__title {
        width: 100%;
        padding: 11px 10px 12px 14%;
        text-align: left;
    }

    .form__title.long__title_1 {
        width: 100%;
        padding: 11px 10px 12px 14%;
        text-align: left;
    }

    .form__title.long__title_2 {
        width: 100%;
        padding: 11px 10px 12px 14%;
        text-align: left;
    }

    .form__title + .form__field {
        margin-left: 25%;
    }

.form__label {
    padding: 11px 10px 12px 0;
}

.form__field-row + .form__field-row {
    margin-top: 10px;
    clear: both;
}

.form__field-sk {
    position: relative;
}

    .form__field-sk .form__ui {
        margin-right: 86px;
    }

    .form__field-sk .form__ui-sk {
        position: absolute;
        top: 0;
        right: 0;
    }

.form__error {
    display: none;
    margin: 5px 0;
    color: #ff0000;
}

.form__remind {
    margin: 5px 0 10px;
    font-size: 13px;
    color: red;
    line-height: 1;
}

.form__account {
    margin: 5px 0 10px;
    color: #333;
}

.form__btn {
    width: 240px;
    margin: 30px auto;
}

.form--desk {
    padding: 10px 0;
    border-top: 1px solid #dedede;
}

    .form--desk .form__row {
        width: 510px;
    }

.form__ui.icon {
    position: relative;
}

    .form__ui.icon:before, .form__ui.icon:after {
        position: absolute;
        top: 50%;
        margin-top: -12.5px;
        margin-left: 12.5px;
    }

.form__ui .form__ui-tip {
    color: #333;
}

.form__ui-tip_right {
    text-align: right;
}

.form__ui .form__ui-tip_red {
    color: red;
}

.form__ui .form__ui-radio-inline {
    display: inline-block;
    margin-right: 30px;
    padding: 12px 0;
}

.form__ui.form__ui--ml45 {
    margin-left: 45px;
}

.form__ui.form__ui--ml120 {
    margin-left: 120px;
}

.form__ui.form__ui--pr200 {
    position: relative;
    padding-right: 200px;
}

    .form__ui.form__ui--pr200 .form__ui-mra {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        padding: 11px 5px 12px;
        text-align: right;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.form__ui.error input {
    border-color: #ff0000;
}

.form__ui--addon {
    position: relative;
}

    .form__ui--addon > input {
        padding-right: 40px;
    }

    .form__ui--addon .form__addon {
        position: absolute;
        right: 5px;
        top: 50%;
        margin-top: -15px;
    }

.form__ui--cd {
    position: relative;
    padding-right: 100px;
}

    .form__ui--cd .form__ui-tip {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        padding: 11px 5px 12px;
        text-align: left;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.form__ui--ab {
    position: relative;
    padding-right: 195px;
}
/*備註及通知*/
.closing {
    border: 1px solid #3DAD48 !important;
    border-radius: 5px;
    height: 45px;
    padding: 12px 0px;
    justify-content: center;
}

    .closing span {
        background: #fff no-repeat url(images/arrow_drop_down.png) right center;
    }

.form__ui--ab .form__ui-balance {
    position: absolute;
    top: 0;
    right: 0;
    width: 185px;
    padding: 11px 5px 12px 10px;
    /*  text-align: center;*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form__ui--ab .form__ui-sd {
    position: absolute;
    top: 0;
    right: 0;
    width: 185px;
    padding: 11px 5px 12px 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form__ui--ntd {
    position: relative;
    padding-left: 62px;
    padding-right: 30px;
}

    .form__ui--ntd.w {
        padding-left: 155px;
    }

    .form__ui--ntd.ntd {
        padding-left: 100px;
    }

    .form__ui--ntd.num {
        padding-left: 130px;
        padding-right: 125px;
    }

        .form__ui--ntd.num .form__ui-nt {
            top: 45px;
        }

        .form__ui--ntd.num .form__ui-d {
            width: auto;
            top: 45px;
        }

.radio_mg {
    margin-left: 31px;
}

.form__ui.margin-df .form__ui-radio-inline {
    margin-right: 5px;
}

.form__ui--ntd .form__ui-nt,
.form__ui--ntd .form__ui-d {
    position: absolute;
    padding: 11px 5px 12px;
    height: 45px;
    top: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.form__ui--ntd .form__ui-nt {
    left: 0;
    /*width: 80px;*/
}

.form__ui--ntd .form__ui-d {
    right: 0;
    width: 30px;
}

.form__ui--d {
    position: relative;
    padding-right: 30px;
}

    .form__ui--d .form__ui-d {
        position: absolute;
        padding: 11px 5px 12px;
        height: 45px;
        top: 0;
        right: 0;
        width: 30px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

.form__ui--dp {
    position: relative;
}

    .form__ui--dp .form__ui-begin,
    .form__ui--dp .form__ui-end {
        float: left;
        width: 48%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .form__ui--dp .form__ui-begin > input,
        .form__ui--dp .form__ui-end > input {
            padding: 11px 36px 11px 10px;
        }

    .form__ui--dp .form__ui-sp {
        float: left;
        width: 4%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.form__ui .form__ui-fl, .form__ui .form__ui-fr {
    height: 45px;
    padding: 11px 5px 12px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.form__ui-fl {
    float: left;
}

.form__ui-fr {
    float: right;
}

.trans-element-radio + label {
    cursor: pointer;
}

.ui-half .ui-half__item {
    float: left;
    margin: 10px 0;
    padding: 0 10px;
    width: 50%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-triplicate .ui-triplicate__item {
    float: left;
    margin: 10px 0;
    padding: 0 10px;
    width: 33%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-half .ui-half__item:nth-of-type(2n+1) {
    clear: left;
}

.skn {
    padding: 10px;
    border: 1px solid #dedede;
    background-color: #fff;
}

    .skn .skn__btn {
        float: left;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

        .skn .skn__btn > li {
            float: left;
            display: inline-block;
            margin-left: 10px;
        }

            .skn .skn__btn > li:nth-of-type(3n+1) {
                margin-left: 0;
                clear: left;
            }

            .skn .skn__btn > li:nth-of-type(3n) ~ li {
                margin-top: 10px;
            }

    .skn .skn__key {
        display: block;
        width: 42px;
        height: 40px;
        padding: 0 0;
        line-height: 40px;
        border: 1px solid #dedede;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #f5f5f5;
        color: #333;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
    }

        .skn .skn__key:hover {
            color: #149a88;
        }

        .skn .skn__key.skn__key--del {
            background-color: #999;
        }

        .skn .skn__key.skn__key--ok {
            background-color: #c6af5c;
            color: #fff;
        }

    .skn .skn__field {
        margin-left: 150px;
    }

    .skn .skn__tip {
        margin-top: 10px;
        color: #ff0000;
        text-align: center;
    }

.nowrap {
    white-space: nowrap;
}

.kyc-p p {
    display: inline-block;
}

.kyc-p > div {
    float: right;
}

/*---------- font & title ----------*/
.h1 {
    position: relative;
    margin: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #525252;
    text-align: center;
}

    .h1.icon:before {
        display: block;
        margin: 0 auto;
    }

.h1--list {
    text-align: left;
}

.h2 {
    font-size: 18px;
}

.h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.h4 {
    font-size: 15px;
}

.h5 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.f-og {
    color: #f59d15;
}

.f-rd {
    color: #ff0000;
}

.f-hei {
    font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
}

.f-bl {
    color: #000;
}

.f-bold {
    font-weight: bold;
}

/*---------- position ----------*/
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.static {
    position: static;
}

/*---------- text align ----------*/
.tal {
    text-align: left;
}

.tar {
    text-align: right;
}

.tac {
    text-align: center;
}

.vac {
    vertical-align: middle;
}

/*---------- display ----------*/
.block {
    display: block;
}

.inblock {
    display: inline-block;
}

.inline {
    display: inline;
}

.hide {
    display: none;
}

/*---------- float ----------*/
.fl {
    float: left;
}

.fr {
    float: right;
}

/*---------- margin ----------*/
.mr20 {
    margin-right: 20px;
}

/*---------- padding ----------*/
/*---------- width ----------*/
/*---------- height ----------*/
/*---------- line height ----------*/
/*---------- background color ----------*/
.bg-gy {
    background-color: #e5e5e5;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/* Prevent callout */
.nocallout {
    -webkit-touch-callout: none;
}

.pressed {
    background-color: rgba(0, 0, 0, 0.7);
}

/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {
    -webkit-appearance: none;
}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
   they have been set as display: none */
.gifhidden {
    position: absolute;
    left: -100%;
}

/*
 * Image replacement
 */
.ir {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0;
    direction: ltr;
    display: block;
    overflow: hidden;
    text-align: left;
    text-indent: -999em;
}

    .ir br {
        display: none;
    }

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    /*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
    visibility: hidden;
}

/**
 * Clearfix helper
 * Used to contain floats: h5bp.com/q
 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
    .i-news__prev:before, .i-news__next:before, .i-news__prev:after, .i-news__next:after {
        background-image: url(/Images/icon-news@3x.png);
        background-size: 45px;
    }

    .i-useful__try:before, .i-useful__faq:before, .i-useful__reg:before, .i-useful__env:before, .i-useful__trend:before, .i-useful__contact:before, .i-useful__cdic:before, .i-useful__taipay:before, .i-useful__try:after, .i-useful__faq:after, .i-useful__reg:after, .i-useful__env:after, .i-useful__trend:after, .i-useful__contact:after, .i-useful__cdic:after, .i-useful__taipay:after {
        background-image: url(/Images/icon-useful3x.png);
        background-size: 60px;
        width: 60px;
        height: 60px;
    }

    .i-result__ok:before, .i-result__fail:before, .i-result__ok:after, .i-result__fail:after {
        background-image: url(/Images/icon-result@3x.png);
        background-size: 40px;
    }

    .i-view__grid:before, .i-view__list:before, .i-view__chart:before, .i-view__grid:after, .i-view__list:after, .i-view__chart:after {
        background-image: url(/Images/icon-view@3x.png);
        background-size: 40px;
    }

    .i-btn__favorite:before, .i-btn__search:before, .i-btn__calendar:before, .i-btn__refresh:before, .i-btn__keyboard:before, .i-btn__favorite:after, .i-btn__search:after, .i-btn__calendar:after, .i-btn__refresh:after, .i-btn__keyboard:after {
        background-image: url(/Images/icon-button@3x.png);
        background-size: 30px;
    }

    .i-20__close:before, .i-20__add:before, .i-20__pen:before, .i-20__time:before, .i-20__close:after, .i-20__add:after, .i-20__pen:after, .i-20__time:after {
        background-image: url(/Images/icon-20px@3x.png);
        background-size: 20px;
    }

    .i-my__nt:before, .i-my__import:before, .i-my__loan:before, .i-my__card:before, .i-my__fund:before, .i-my__gold:before, .i-my__other:before, .i-my__bill:before, .i-my__bond:before, .i-my__nt:after, .i-my__import:after, .i-my__loan:after, .i-my__card:after, .i-my__fund:after, .i-my__gold:after, .i-my__other:after, .i-my__bill:after, .i-my__bond:after {
        background-image: url(/Images/icon-my-menu@3x.png);
        background-size: 62px;
    }

    .i-smap__desk:before, .i-smap__nt:before, .i-smap__import:before, .i-smap__loan:before, .i-smap__card:before, .i-smap__fund:before, .i-smap__gold:before, .i-smap__other:before, .i-smap__desk:after, .i-smap__nt:after, .i-smap__import:after, .i-smap__loan:after, .i-smap__card:after, .i-smap__fund:after, .i-smap__gold:after, .i-smap__other:after {
        background-image: url(/Images/icon-sitemap@3x.png);
        background-size: 40px;
    }

    .news-nav .bx-prev > i,
    .news-nav .bx-next > i {
        background-image: url(/Images/icon-news@3x.png);
        background-size: 30px;
    }

    .cash-box .cash-box__item:before {
        background-image: url(/Images/icon-cashbox@3x.png);
        background-size: 32px;
    }

    .cash-box .cash-box__del:before {
        background-image: url(/Images/icon-20px@3x.png);
        background-size: 20px;
    }

    .ercal__back:before, .ercal__back:after, .ercal__front:before, .ercal__front:after {
        background-image: url(/Images/icon-rotate@3x.png);
        background-size: 20px;
    }

    .notes .notes__title:before {
        background-image: url(/Images/icon-notes@3x.png);
        background-size: 20px;
    }

    input[type="date"].datepicker, input[type="date"].monthpicker,
    input[type="month"].datepicker,
    input[type="month"].monthpicker {
        background-image: url(/Images/icon-calendar@3x.png);
        background-size: 35px;
    }
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster: http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */
    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.login100-form-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 160px;
    height: 50px;
    background-color: #57b846;
    border-radius: 25px;
    font-family: Poppins-Regular;
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

    .login100-form-btn:hover {
        background-color: #333333;
    }


/*------------------------------------------------------------------
[ 廣告圖片調整 ]*/
.bx-wrapper .bx-viewport {
    /*Fix Ads Image Size*/
    height: auto;
}

@media (max-width: 767px) {
    .idx-kv .bxslider .bxslider__item {
        height: 220px;
    }
}
/*台幣轉帳樣式 Start*/
/*nav*/
.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
}

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

    .nav-link.disabled {
        color: #6c757d;
    }

.nav-tabs {
    border-bottom: 1px solid #dee2e6;
    display: inline-flex;
    width: 100%;
    flex-wrap: nowrap;
}

    .nav-tabs .nav-item {
        margin-bottom: 8px;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: center;
        text-decoration: none;
        box-shadow: 2px 2px 3px lightgrey;
        border: 1px solid #57B582 !important; /*green*/
        /*border: 1px solid #F2C183 !important;*/ /*orange*/
        background-color: #fff;
        padding: 3px 4px;
        border-radius: 5px;
        /*color: #0FA155;*/ /*green*/
        /*color: #A66530;*/ /*orange*/
        color: #595959;
        white-space: nowrap;
        font-size: 18px;
    }

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

        .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
            border-color: #e9ecef #e9ecef #dee2e6;
        }

        .nav-tabs .nav-link.disabled {
            color: #6c757d;
            background-color: transparent;
            border-color: transparent;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: #495057;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

.nav-fill .nav-item {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
    text-decoration: none;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

    .nav:before,
    .nav:after {
        display: table;
        content: " ";
    }

    .nav:after {
        clear: both;
    }

    .nav:before,
    .nav:after {
        display: table;
        content: " ";
    }

    .nav:after {
        clear: both;
    }

    .nav > li {
        position: relative;
        display: block;
    }

        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }

            .nav > li > a:hover,
            .nav > li > a:focus {
                text-decoration: none;
                background-color: #eeeeee;
            }

        .nav > li.disabled > a {
            color: #999999;
        }

            .nav > li.disabled > a:hover,
            .nav > li.disabled > a:focus {
                color: #999999;
                text-decoration: none;
                cursor: not-allowed;
                background-color: transparent;
            }


.nav-tabs {
    border-bottom: 1px solid #dddddd;
    overflow: auto;
}

    .nav-tabs > li {
        float: left;
        /*margin-bottom: -1px;*/
        width: 100%;
        /*flex: fit-content;*/
    }

        .nav-tabs > li > a {
            margin-right: 4px;
            line-height: 1.428571429;
            border: 1px solid transparent;
            border-radius: 4px 4px 0 0;
            color: black;
        }

            .nav-tabs > li > a:hover {
                border-color: #eeeeee #eeeeee #dddddd;
            }

        .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus {
            color: #fff;
            border-radius: 5px;
            background-color: #57B582; /*green*/
            /*background-color: #FF8F4C;*/ /*orange*/
            box-shadow: 2px 2px 3px lightgrey;
            padding: 3px 5px;
        }

    .nav-tabs.nav-justified {
        width: 100%;
        border-bottom: 0;
    }

        .nav-tabs.nav-justified > li {
            float: none;
        }

            .nav-tabs.nav-justified > li > a {
                text-align: center;
            }

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%;
    }
}

.nav-tabs.nav-justified > li > a {
    margin-right: 0;
    border-bottom: 1px solid #dddddd;
}

.nav-tabs.nav-justified > .active > a {
    border-bottom-color: #ffffff;
}

.nav-pills > li {
    float: left;
}

    .nav-pills > li > a {
        border-radius: 5px;
    }

    .nav-pills > li + li {
        margin-left: 2px;
    }

    .nav-pills > li.active > a,
    .nav-pills > li.active > a:hover,
    .nav-pills > li.active > a:focus {
        color: #ffffff;
        background-color: #428bca;
    }

.nav-stacked > li {
    float: none;
}

    .nav-stacked > li + li {
        margin-top: 2px;
        margin-left: 0;
    }

.nav-justified {
    width: 100%;
}

    .nav-justified > li {
        float: none;
    }

        .nav-justified > li > a {
            text-align: center;
        }

@media (min-width: 768px) {
    .nav-justified > li {
        display: table-cell;
        width: 1%;
    }
}

.nav-tabs-justified {
    border-bottom: 0;
}

    .nav-tabs-justified > li > a {
        margin-right: 0;
        border-bottom: 1px solid #dddddd;
    }

    .nav-tabs-justified > .active > a {
        border-bottom-color: #ffffff;
    }
/*nav*/
/*btn*/
.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-flex;
    width: 100%;
    vertical-align: middle;
    margin-top: 10px;
}

.nav-btn {
    display: inline-block;
    padding: 4px 0px;
    /*    margin-bottom: 0px;*/
    margin: 0 2px -1px 3px;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    /*border: 1px solid #F2C183;*/
    border: 1px solid #FF8F4C;
    /*background-color: #FDEAD1;*/
    background-color: #fff;
    /*color: #A66530;*/
    color: #595959;
    /*width: 16%;*/
    width: 25%;
    /*    color: white;
    background-color: #33B77A;*/
}


.btn-group > .btn,
.btn-group-vertical > .btn {
    position: relative;
    float: left;
    margin-left: 0.5%;
}

.btn-group > button:not(.active):hover {
    background-color: #eeeeee;
}

.btn-group > button.active {
    /*    background-color: #FF8F4C; 深橘*/
    background-color: #FDEAD1; /*淺橘*/
    /*color: #FFF;*/
    color: #A66530;
}

@media (max-with:376px) {
    .btn--gdn {
        background-color: #EC721E;
    }
}
/*btn*/
/*用於轉帳備註整合通知*/
.fold-region {
    margin: 15px auto;
    /*border: 1px solid #33B77A;*/ /*green*/
    border: 1px solid #FF8F4C; /*orange*/
    border-radius: 5px;
}

.collapse.fold-region .collapse__item {
    margin: 3px 0;
}

.collapse .fold-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    background-color: #B3D3A4;
    height: 15px;
    /*color: black;*/
    /*color: #0FA155;*/
    border-radius: 5px;
    background: #fff no-repeat url(../../images/add_open.png) right 3px center;
    border-bottom: 0px solid #FF8F4C;
    -moz-transition: border-bottom ease .3s;
    -o-transition: border-bottom ease .3s;
    -webkit-transition: border-bottom ease .3s;
    transition: border-bottom ease .3s;
}

.collapse.fold-region .collapse__item.active .fold-title {
    border-bottom: 1px solid #FF8F4C;
    -moz-transition: border-bottom ease .1s;
    -o-transition: border-bottom ease .1s;
    -webkit-transition: border-bottom ease .1s;
    transition: border-bottom ease .1s;
}

.collapse .fold-title:after {
    background: none;
}

.collapse__item.active > .fold-title {
    /*background: #FDEAD1 no-repeat url(../../images/add_close.png) right 3px center;*/
    background: #fff no-repeat url(../../images/add_close.png) right 3px center;
}

.fold-subtitle {
    justify-content: center;
    display: flex;
    /*    border-bottom: 1px solid #FF8F4C;
    border-top: 1px solid #FF8F4C;
    font-size: 16px;
    background-color: #fff;
    color: #FF8F4C;
    width: 100%;*/
    border-bottom: 1px solid #33B77A;
    border-top: 1px solid #33B77A;
    font-size: 16px;
    background-color: #E2F5EF;
    color: #0FA155;
    width: 100%;
}

.fold-inside {
    margin: 15px 15px;
}
/*用於轉帳備註整合通知*/
/*注意事項*/
.notes .notes__title.app {
    font-weight: bold;
    /*color: #EC721E;*/
    display: flex;
    align-items: center;
}

    .notes .notes__title.app:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url(/Images/notice_icon.png) no-repeat;
        background-size: 15px;
        vertical-align: middle;
        margin-right: 3px;
    }

.collapse .collapse__item.active .notes__title.app.collapse__tab::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(/Images/notice_close.png) no-repeat center;
    background-size: 12px;
    vertical-align: middle;
    margin-left: 3px;
    margin-bottom: -4px;
}

.notes .notes__title.app:after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(/Images/notice_open.png) no-repeat center;
    background-size: 12px;
    vertical-align: middle;
    margin-left: 3px;
    left: 0px;
    position: relative;
    float: right;
    margin-bottom: -4px;
}

.collapse .collapse__item.active .notes__title.app::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(/Images/notice_open.png) no-repeat center;
    background-size: 12px;
    vertical-align: middle;
    margin-left: 3px;
    margin-bottom: -4px;
}
/*注意事項*/
/*輸入欄位標籤(in middle)Start*/
div.input_group {
    align-items: center;
    display: inline-flex;
    /*border: 1px solid #33B77A;*/ /*green*/
    border: 1px solid #FF8F4C; /*orange*/
    border-radius: 5px;
    background-color: white;
    width: 100%;
    height: auto;
}
    /*下拉選單(不能輸入的)另外處理，避免破圖*/
    div.input_group.select_field {
        display: flow-root;
    }
    /*標籤*/
    div.input_group > label {
        position: relative;
        padding: 11px 5px 11px 5px;
        bottom: 0px;
        width: auto;
        white-space: nowrap;
    }

    div .input_group.select_field > label {
        float: left
    }
    /*一般輸入欄位*/
    div.input_group > .inputText, div.input_group > input {
        border: none;
        outline: none;
        margin-left: -5px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /*下拉選單*/
    div.input_group > .transformSelect {
        margin-left: 5px;
        margin-top: 0px;
        width: 100%;
        /* overflow-x: hidden; 會影響到如果有輸入框下拉清單被隱藏的情況
        text-overflow: ellipsis; 會影響到如果有輸入框下拉清單被隱藏的情況*/
    }
    /*下拉選單(不能輸入的)另外處理，避免破圖*/
    div.input_group.select_field > .transformSelect {
        width: auto;
    }

    div.input_group > .transformSelect span, div.input_group > .transformSelect input[type=text] {
        border: none;
        outline: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        height: auto;
    }
/*常用轉帳或最近轉帳下拉清單樣式*/
.DisplayDrop {
    list-style: none;
    margin-left: -40px;
}

    .DisplayDrop > li {
        /*border: 1px solid #72E0BE;*/
        margin: -2px 0;
        background-color: #fff;
        /* border-radius: 3px;*/
        padding-left: 8px;
        margin-bottom: 8px;
        /*box-shadow: 2px 2px 3px rgb(0 0 0 / 15%);*/
        /*border-bottom:1px solid #FF8F4C;*/
    }

        .DisplayDrop > li > span.row {
            display: inline-block;
            width: 100%;
        }

            .DisplayDrop > li > span.row > span.remind {
                /*color: #00B050;*/
            }

            .DisplayDrop > li > span.row > span.right {
                float: right;
            }
/*輸入欄位標籤(in middle)End*/
/*台幣轉帳按鈕樣式*/
.d_color {
    font-weight: 600;
    background-color: #EC721E;
    color: #fff;
    border-radius: 3px;
    box-shadow: 2px 2px 3px grey;
}

.g-color {
    background-color: #33B77A;
    color: #fff;
    border-radius: 3px;
    box-shadow: 2px 2px 3px grey;
}

.btn-shadow {
    box-shadow: 2px 2px 3px grey;
}

div.action-area.action-area-min {
    width: 75%;
}
/*台幣轉帳按鈕樣式*/
/*台幣轉帳確認頁及結果頁Start*/
.tb.tb--view tbody td.td-label {
    width: 30%;
    text-align: center;
}

.mask {
    color: #A66530 !important;
    border: 1px solid;
    border-radius: 5px;
    width: 60px;
    height: 28px;
    position: relative;
    margin-left: 15px;
    padding: 0;
    background-color: #FDEAD1 !important;
}
/*台幣轉帳確認頁及結果頁End*/
/*台幣轉帳樣式 End*/
/*toast樣式Start*/
.toast.toastCust {
    -ms-flex-preferred-size: 350px;
    flex-basis: 350px;
    font-size: 0.875rem;
    background-color: #f6f6f6;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    opacity: 0;
    border-radius: 0.25rem;
}

    .toast.toastCust:not(:last-child) {
        margin-bottom: 0.75rem;
    }

    .toast.toastCust.showing {
        opacity: 1;
    }

    .toast.toastCust.show {
        display: block;
        opacity: 1;
    }

    .toast.toastCust.hide {
        display: none;
    }

.toast-header.toastCust-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.25rem 0.75rem;
    color: #6c757d;
    background-color: #149a88;
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

.toast-title.toastCust-title {
    margin-right: auto !important;
    color: #fff;
    font-size: 20px;
}

.toast-body.toastCust-body {
    font-size: 14px;
    padding: 0.75rem;
    color: #444;
    text-shadow: none;
    letter-spacing: 2px;
}

.toast-close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #149a88;
    border: 1px;
    text-shadow: 0 1px 0 #fff;
    margin-left: 0.5rem !important;
}

.toast-container {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    position: fixed !important;
    width: auto;
    z-index: 50;
}
/*toast樣式End*/
/*WebView右上角按鈕設定樣式-無卡提款Start*/
button.btn.nav-btn.side-btn {
    width: 15%;
    position: absolute;
    right: 20%;
    border: 2px solid black;
    border-radius: 5px;
    z-index: 1;
    padding: 0px 0px;
}

@media (max-width: 768px) {
    button.btn.nav-btn.side-btn {
        right: 2%;
    }
}
/*WebView右上角按鈕設定樣式-無卡提款End*/
/*jQuery UI Dialog */
.ui-dialog .ui-dialog-titlebar {
    background: #149a88;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: #005248;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background: #00463D;
}

.ui-dialog.ui-widget {
    min-width: 540px;
}