@import url('reset.css');
@import url('font-awesome.min.css');

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    /*�B�ziPhone����r��j�p���@���p Prevent font scaling in landscape */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: '�L�n������', 'Microsoft JhengHei', 'Arial';
    font-size: 15px;
    background-color: #F5F5F5;
    /*overflow-y: scroll;
    �j������scroll bar�i�H�ѨMheader��j�ťհ��D�A���O���͵�
    overflow-x: hidden;*/
}

/*�D�n�����]�w--------------------------------------------------------*/
.container {
    width: 100%;
}

header {
    background-color: #007C7C;
    width: 100%;
    min-width: 100%;
    height: 70px;
}

.header-wrap {
    position: relative;
    width: 1000px;
    max-width: 1000px;
    margin: 0 auto;
    display: table;
}

img#logo {
    position: absolute;
    top: 0;
    left: 0;
}

.top-nav {
    /*position: absolute;
    right: 24px;
    width: 50%;*/
    /*height: 42px;*/
    height: 55px;
    color: white;
    padding-top: 15px;
    /*padding: 15px 0 13px 0;*/
    /*padding: 15px 0;
    margin: 0 30px 0 0;*/
    /*padding: 15px 24px 13px 0;*/
    text-align: right;
    background-color: #007C7C;
}

    .top-nav .welcome {
        position: absolute;
        /*right: 85px;*/
        right: 110px;
        line-height: 20px;
        padding-right: 20px;
        border-right: 1px solid rgba(255,255,255,0.5);
    }

    .top-nav .logout {
        position: absolute;
        /*right: 38px;*/
        right: 63px;
        padding-top: 10px;
    }

        .top-nav .logout img {
            position: absolute;
            top: 6px;
        }

        .top-nav .logout a:link,
        .top-nav .logout a:visited {
            color: white;
            text-decoration: none;
        }

        .top-nav .logout a:hover {
            text-decoration: underline;
        }

.content-wrap {
    display: table;
    width: 1000px;
    margin: 0 auto;
}

nav {
    display: table-cell;
    width: 22.46093%;
    /*
        �`�e��240px;(23.4375%)
        �`�e��216px;(21.09375%)
        �`�e��230px;(22.46093%)
    */
    background-color: #FFF;
    padding: 0 6px 10px 18px;
}

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        /*menu�U��d�աA���d�իh��menu�άOmain���e���׸��j�̼��}����*/
        margin-bottom: 50px;
    }

        nav ul li {
            height: 38px;
            min-height: 38px;
        }

            nav ul li a::after {
                content: '\f105';
                font-family: 'FontAwesome';
                float: right;
                margin-right: 12px;
                color: #ddd;
                font-weight: bolder;
            }

        nav ul a:link, ul a:visited {
            background-position: left;
            background-position-x: 198px;
            background-repeat: no-repeat;
            text-decoration: none;
            color: #007C7C;
            padding: 12px 0 10px 40px;
            display: block;
            border-bottom: 1px solid #E1E1E1;
            -moz-transition: background-color 0.5s ease;
            -webkit-transition: background-color 0.5s ease;
            -o-transition: background-color 0.5s ease;
            transition: background-color 0.5s ease;
        }

        nav ul a:hover, nav ul li a.active {
            color: #E70112;
            background-color: #F5F5F5;
        }

    nav .menu-back a:link, nav .menu-back a:visited {
        text-decoration: none;
        color: #007C7C;
        padding: 10px 0 10px 40px;
        /*padding: 10px 0 0 40px;*/
        display: block;
        border-bottom: 0;
        /*margin-top: 10px;*/
    }

    nav .menu-back a::after {
        content: '\f104';
        font-family: 'FontAwesome';
        float: left;
        margin-left: -30px;
        color: #ddd;
        font-weight: bolder;
    }

    nav .menu-back a:hover {
        color: #E70112;
    }

    nav .menu-title {
        /*margin-top: 10px;*/
        background-color: #4CA7A7;
        color: white;
        -webkit-border-radius: 0 3px 3px 0;
        -moz-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;
    }

        nav .menu-title .menu-title-text {
            display: inline-block;
            vertical-align: middle;
            padding-left: 6px;
        }

    /*menu�i�O��A�ȡj���Dicon*/
    nav #menu-ico-client {
        width: 38px;
        height: 38px;
        background: #007C7C url('../images/idxmenu.svg') no-repeat 0 0;
        display: inline-block;
        vertical-align: middle;
    }

    /*menu�i�u�W�@�~�j���Dicon*/
    nav #menu-ico-online {
        width: 38px;
        height: 38px;
        background: #007C7C url('../images/idxmenu.svg') no-repeat -76px 0;
        display: inline-block;
        vertical-align: middle;
    }

    /*menu�i��L�A�ȡj���Dicon*/
    nav #menu-ico-other {
        width: 38px;
        height: 38px;
        background: #007C7C url('../images/idxmenu.svg') no-repeat -38px 0;
        display: inline-block;
        vertical-align: middle;
    }

    /*menu�i��ꫬ�M�ϡj���Dicon*/
    nav #menu-ico-invest {
        width: 38px;
        height: 38px;
        background: #007C7C url('../images/idxmenu.svg') no-repeat -114px 0;
        display: inline-block;
        vertical-align: middle;
    }

/*���s����menu*/
.menu-hide {
    position: relative;
    /*top: 118px;
    left: 0;*/
    z-index: 1;
}

    .menu-hide button {
        /*�̾�menu-hide��div��position relative���*/
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        margin: 0;
        width: 20px;
        height: 56px;
        border: 1px solid #FF8B52;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 0 5px 5px 0;
        background-color: #FF8B52;
        outline: none;
        color: #FFF;
        font-size: 22px;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
        z-index: 1;
    }

        .menu-hide button#btn-hidemenu {
            top: 45px;
        }

/*IE���ÿ����s���׻PChrome���P�A�S�O�B�z IE10+ CSS styles here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .menu-hide button#btn-hidemenu {
        top: 11px;
    }
}

.main {
    position: relative;
    display: table-cell;
    width: auto; /*�`�e��784px;(76.5625%)*/
    padding: 0 20px 10px 27px;
    margin-top: 0;
    height: 100%;
    overflow: hidden;
    /*��border-image���覡�⳱�vŨ�쥪��*/
    border-style: solid;
    border-color: transparent;
    background: url(../images/bg_shadow.png) repeat-y 0 0;
    /*�ϥ�border-image�ɪ�padding�]�w*/
    /*padding: 0 20px 10px 20px;
    border-width: 0 0 0 7px;
    -moz-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    -webkit-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    -o-border-image: url(../images/bg_shadow.png) 0 12 repeat;
    border-image: url(../images/bg_shadow.png) 0 12 fill repeat;*/
}

/*�Ω�S���n�J���A�������A�p�ӽСB���]�K�X*/
.main-simple {
    position: relative;
    /*display: table-cell;*/
    width: 730px;
    margin: 0 auto;
    padding: 20px;
    height: 100%;
    overflow: hidden;
}

.breadcrumb {
    font-size: 13px;
    display: inline-block;
    line-height: 13px;
    width: 71%;
    /*padding: 18px 0 6px 2px;*/
    padding: 20px 0 6px 2px;
    display: inline-block;
}

    .breadcrumb .breadcrumb-home {
        background: url('../images/ico-home.svg') no-repeat 0 0;
        /*background: url('../images/ico-home.svg') no-repeat 0 -2px;*/
        /*padding: 0 4px 0 20px;*/
        padding: 0 0 0 20px;
    }

    .breadcrumb a:link, .breadcrumb a:visited {
        color: #393939;
        text-decoration: none;
        font-size: 13px;
        line-height: 13px;
    }

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

hr#breadcrumb-split {
    width: 100%;
    border: 0;
    height: 0;
    border-top: 1px solid #E1E1E1;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 0;
}

.home {
    /*�Ѧ�main��position*/
    position: absolute;
    top: -1px;
    right: 30px;
}

footer {
    background-color: #529E99;
    width: 100%;
    min-width: 100%;
    height: 20px;
    margin: 0 auto;
}

.footer-wrap {
    width: 1000px;
    margin: 0 auto;
    clear: both;
}

footer .line-wrap {
    width: 1000px;
    margin: 0 auto;
    display: inline-block;
    padding: 0;
}

    footer .line-wrap .line1 {
        display: inline-block;
        width: 73%;
        height: 20px;
        float: left;
        background-color: #007575;
    }

    footer .line-wrap .line2 {
        display: inline-block;
        width: 20%;
        height: 20px;
        float: left;
        background-color: #33928C;
    }

    footer .line-wrap .line3 {
        display: inline-block;
        width: 7%;
        height: 20px;
        float: left;
        background-color: #529E99;
    }

footer .footer-text {
    clear: both;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

    footer .footer-text a:link, footer .footer-text a:visited {
        color: #007C7C;
        font-weight: bold;
    }

    footer .footer-text a:hover {
        color: #E70112;
    }

/*�ɶ��b--------------------------------------------------------*/
.timeline-wrap {
    position: relative;
    width: 100%;
    height: 137px;
    display: inline-block;
}

    .timeline-wrap a:link, .timeline-wrap a:visited {
        text-decoration: none;
    }

    /*�ɶ��b�u��*/
    .timeline-wrap .line {
        content: '';
        position: absolute;
        top: 97px;
        width: 100%;
        height: 2px;
        background-color: #BEBEBE;
        z-index: -1;
    }

    /*�ɶ��b���k���s*/
    .timeline-wrap span.btn {
        display: inline-block;
        position: absolute;
        /*���s��m*/
        top: 81px;
        margin-top: -6px;
        width: 44px;
        height: 44px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: none;
        outline: none;
        background-color: #8ADEDE;
        color: white;
        cursor: pointer;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }


        /*���s�������b�Yfontawesome��r*/
        .timeline-wrap span.btn i {
            position: absolute;
            top: 15%;
            left: 35%;
        }

        .timeline-wrap span.btn:hover {
            background-color: #32B3B3;
        }


        .timeline-wrap span.btn#back {
            left: 0;
        }

        .timeline-wrap span.btn#forward {
            right: 0;
        }

    .timeline-wrap span.btn-disable {
        background-color: #BDBDBD;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        cursor: not-allowed;
    }

        .timeline-wrap span.btn-disable:hover {
            background-color: #BDBDBD;
        }

    /*�ɶ��b���n�B����I�I�B�����r��ܰϰ�------------------------------------------------*/
    .timeline-wrap .timeline-content {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 87.75%;
        margin: 0 44px;
        overflow: hidden;
    }

        .timeline-wrap .timeline-content .nav-content {
            position: absolute;
            width: 9999px;
            left: 0;
            top: 0;
        }

            .timeline-wrap .timeline-content .nav-content .content-group {
                position: relative;
                display: inline-block;
                float: left;
                width: 64px;
                padding: 8px 0;
                text-align: center;
            }

                .timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap {
                    /*����I�I��m*/
                    margin-top: -10px;
                }

                    .timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap .text {
                        font-size: 13px;
                        color: #393939;
                    }

                    .timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap .text-today {
                        font-size: 13px;
                        color: #007C7C;
                    }

                    .timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap .dateknot {
                        content: '';
                        width: 8px;
                        height: 8px;
                        line-height: 8px;
                        border: 2px solid #BEBEBE;
                        display: block;
                        text-align: center;
                        margin: 0 auto 2px auto;
                        -webkit-border-radius: 50%;
                        -moz-border-radius: 50%;
                        border-radius: 50%;
                        font-size: 13px;
                        /*�I�I����C��*/
                        background-color: #FFF;
                    }

                    .timeline-wrap .timeline-content .nav-content .content-group .dateknot-wrap .dateknot-today {
                        content: '';
                        width: 8px;
                        height: 8px;
                        line-height: 8px;
                        border: 2px solid #007C7C;
                        display: block;
                        text-align: center;
                        margin: 0 auto 2px auto;
                        -webkit-border-radius: 50%;
                        -moz-border-radius: 50%;
                        border-radius: 50%;
                        font-size: 13px;
                        /*�I�I����C��*/
                        background-color: #007C7C;
                    }

                /*���n*/
                .timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap {
                    position: relative;
                    width: 100%;
                    /*�վ㽦�n�O�_�������I�I*/
                    margin-left: 4px;
                }
                    /*���n�p�ƾ�*/
                    .timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-count {
                        position: absolute;
                        top: -50%;
                        left: 60%;
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        border-radius: 10px;
                        background-color: red;
                        color: #FFF;
                        text-align: center;
                        padding: 3px 7px;
                        font-weight: bold;
                        font-size: 12px;
                    }

                    /*���n�p�ƾ��wŪ*/
                    .timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-read {
                        position: absolute;
                        top: -50%;
                        left: 60%;
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        border-radius: 10px;
                        background-color: #B0B0B0;
                        color: #FFF;
                        text-align: center;
                        padding: 3px 7px;
                        font-weight: bold;
                        font-size: 12px;
                    }

                    /*�Ū����n�p�ƾ�*/
                    .timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-count-empty {
                        position: absolute;
                        top: -50%;
                        left: 60%;
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        border-radius: 10px;
                        background-color: transparent;
                        color: transparent;
                        text-align: center;
                        padding: 3px 7px;
                        font-weight: bold;
                        font-size: 12px;
                    }

                    /*���n��r*/
                    .timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-text {
                        /*width: 46.7px;*/
                        width: 60%;
                        -webkit-border-radius: 15px;
                        -moz-border-radius: 15px;
                        border-radius: 15px;
                        color: #FFF;
                        text-align: center;
                        padding: 5px;
                        margin: 10px 4px 20px 4px;
                        font-size: 12px;
                    }

                    /*�Ū����n*/
                    .timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-empty {
                        background-color: transparent;
                        color: transparent;
                    }

                    /*�T�����n*/
                    .timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-msg {
                        background-color: #FF8B52;
                    }

                    /*�i�׽��n*/
                    .timeline-wrap .timeline-content .nav-content .content-group .capsule-wrap .capsule-progress {
                        background-color: #4EB7EB;
                    }

/*�ӽСB���]�K�Xtab����--------------------------------------------------------*/
.tabcheck-wrap {
    position: relative;
    margin: 20px 0 0 0;
}

.tabcheck {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 44px;
}

    .tabcheck .tabcheck-btn {
        position: relative;
        display: table-cell;
        background-color: #FFF;
        text-align: left;
        vertical-align: middle;
        font-size: 15px;
        color: #393939;
        border-radius: 6px 6px 0 0;
        border: 1px solid #BEBEBE;
        padding: 10px 6px;
        cursor: pointer;
    }

        .tabcheck .tabcheck-btn .checkbox-wrap {
            padding: 0;
        }

        .tabcheck .tabcheck-btn.bg-yellow {
            background-color: #FFF8D1;
        }

.tabcheck-content, .personal-data-collect {
    background-color: white;
    border: 1px solid #BEBEBE;
    border-top: none;
}


.tab-agreement {
    background-color: #fff;
    border: 1px solid #BEBEBE;
    border-radius: 0 0 6px 6px;
    padding: 25px;
}

    .tab-agreement hr.content-split {
        width: 100%;
        border: 0;
        height: 0;
        margin: 13px 0;
        /*�Φ��z���P���u����ı�ĪG�����*/
        border-top: 1px solid #DDD;
    }



/*�ݭnscroll bar�����e--------------------------------------------------------*/
.scroll-wrap {
    padding: 30px;
    background-color: #F3FFFF;
}

.scroll-content {
    overflow-y: scroll;
    padding-right: 10px;
    height: 300px;
}


/*�b�᭶��--------------------------------------------------------*/
.tabaccount-wrap {
    position: relative;
    margin: 20px 0 0 0;
}

.tabaccount {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 48px;
}

    .tabaccount .tabaccount-btn {
        position: relative;
        display: table-cell;
        background-color: #BEBEBE;
        text-align: center;
        vertical-align: middle;
        font-size: 18px;
        color: white;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        cursor: pointer;
    }

        .tabaccount .tabaccount-btn span {
            text-decoration: none;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
            vertical-align: middle;
        }

    .tabaccount .tabaccount-split {
        display: table-cell;
        width: 6px;
    }

    .tabaccount .tabaccount-btn.active {
        background-color: #4AA5A5;
    }

        /*���Xcallout���V�U���T���νb�Y*/
        .tabaccount .tabaccount-btn.active::after {
            position: absolute;
            height: 0;
            width: 0;
            content: '';
            bottom: -35%;
            left: 45.9%;
            border: 10px solid transparent;
            border-top-color: #4CA7A7;
            z-index: 0;
        }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /*for IE10*/
    .tabaccount .tabaccount-btn.active .ie-arrow1 {
        position: absolute;
        height: 0;
        width: 0;
        content: '';
        bottom: -65%;
        left: 45.9%;
        border: 10px solid transparent;
        border-top-color: #4CA7A7;
        z-index: 0;
    }

    /*for IE10*/
    .tabaccount .tabaccount-btn.active .ie-arrow2 {
        position: absolute;
        height: 0;
        width: 0;
        content: '';
        bottom: -85%;
        left: 45.9%;
        border: 10px solid transparent;
        border-top-color: #4CA7A7;
        z-index: 0;
    }
}

.tabaccount .tabaccount-btn.active > * {
    opacity: 1;
}

.tabaccount-content {
    background-color: white;
    padding: 5px 12px 20px 12px;
    border-top: 8px solid #8DE1E1;
}

    .tabaccount-content .tab-nav {
        display: inline-block;
        width: 59%;
        text-align: center;
    }

    /*.tabaccount-content .tab-nav a:link, .tabaccount-content .tab-nav a:visited {
    }*/

    .tabaccount-content hr.content-split {
        width: 100%;
        border: 0;
        height: 0;
        margin: 13px 0;
        /*�Φ��z���P���u����ı�ĪG�����*/
        border-top: 1px solid #DDD;
    }

    .tabaccount-content ul {
        list-style: disc;
        margin: 30px 0 30px 30px;
        font-size: 15px;
        line-height: 26px;
    }

        .tabaccount-content ul li {
        }


/*tab�i�O�ٱb��jicon--------------------------------------------------------*/
.tabaccount .tabaccount-safe {
    width: 26px;
    height: 26px;
    background: transparent url('../images/accounts.svg') no-repeat 0 0;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.5;
    /*����icon�P��r�����Z*/
    margin-right: 5px;
}

/*tab�i�]�I�b��jicon--------------------------------------------------------*/
.tabaccount .tabaccount-wealth {
    width: 26px;
    height: 26px;
    background: transparent url('../images/accounts.svg') no-repeat -25px 0;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.5;
    /*����icon�P��r�����Z*/
    margin-right: 5px;
}

/*tab�i�t�űb��jicon--------------------------------------------------------*/
.tabaccount .tabaccount-debt {
    width: 26px;
    height: 26px;
    background: transparent url('../images/accounts.svg') no-repeat -53px 0;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.5;
    /*����icon�P��r�����Z*/
    margin-right: 5px;
}

/*tab�i�O�ٱb��j���e��--------------------------------------------------------*/
.safe-wrap {
    width: 100%;
    padding-top: 10px;
}

    .safe-wrap table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
    }

        .safe-wrap table tr td {
            margin: 0;
            padding: 0 0 15px 0;
            text-align: left;
            vertical-align: middle;
        }

            .safe-wrap table tr td a:link, .safe-wrap table tr td a:visited {
                text-decoration: none;
            }

    .safe-wrap .safe-group {
        display: inline-block;
    }

        .safe-wrap .safe-group #safe-icon1 {
            background: url('../images/benefits-color.svg') no-repeat 0 0;
            width: 72px;
            height: 72px;
            display: inline-block;
        }

        .safe-wrap .safe-group #safe-icon2 {
            background: url('../images/benefits-color.svg') no-repeat -72px 0;
            width: 72px;
            height: 72px;
            display: inline-block;
        }

        .safe-wrap .safe-group #safe-icon3 {
            background: url('../images/benefits-color.svg') no-repeat -144px 0;
            width: 72px;
            height: 72px;
            display: inline-block;
        }

        .safe-wrap .safe-group #safe-icon4 {
            background: url('../images/benefits-color.svg') no-repeat -216px 0;
            width: 72px;
            height: 72px;
            display: inline-block;
        }

        .safe-wrap .safe-group #safe-icon5 {
            background: url('../images/benefits-color.svg') no-repeat -288px 0;
            width: 72px;
            height: 72px;
            display: inline-block;
        }

        .safe-wrap .safe-group #safe-icon6 {
            background: url('../images/benefits-color.svg') no-repeat 0 -72px;
            width: 72px;
            height: 72px;
            display: inline-block;
        }


        .safe-wrap .safe-group .safe-text {
            float: right;
            clear: right;
            color: #393939;
            font-size: 15px;
            font-weight: bold;
            text-align: left;
            vertical-align: middle;
            padding: 8px 0 0 15px;
            line-height: 24px;
        }

            .safe-wrap .safe-group .safe-text .simple-text {
                margin: 0;
                padding: 0;
            }

    .safe-wrap .safe-detail {
        font-size: 100px;
        font-weight: bold;
        color: #8ADEDE;
    }

    .safe-wrap .safe-detail-text {
        font-size: 15px;
        font-weight: bold;
        color: #8ADEDE;
        padding-top: 20px;
    }

/*tab�i�]�I�b��j���e��--------------------------------------------------------*/
.wealth-wrap {
    width: 100%;
    padding-top: 10px;
    /*�Ψӹ�div�e���i��inline�����ƦC*/
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
    /*�e��inline�����ƦC*/
    .wealth-wrap .stretch {
        width: 100%;
        display: inline-block;
    }

    .wealth-wrap a:link, .wealth-wrap a:visited {
        color: #FFF;
        text-decoration: none;
    }

    /*�j��e��*/
    .wealth-wrap .main-circle {
        display: inline-block;
        width: 100%;
    }

        .wealth-wrap .main-circle hr.circle-split {
            width: 80%;
            border: 0;
            height: 0;
            /*�Φ��z���P���u����ı�ĪG�����*/
            border-top: 1px solid rgba(255,255,255,0.5);
        }

        .wealth-wrap .main-circle .main-circle-group {
            width: 128px;
            margin: 0 22px;
            /*margin: 0;
            margin-left: calc((100% - 616px) / 4);
            margin-right: calc((100% - 616px) / 4);*/
            display: inline-block;
        }

        /*�i�ɪ��B*/
        .wealth-wrap .main-circle #wealth-circle-loan {
            float: left;
            display: table;
            width: 128px;
            height: 128px;
            -webkit-border-radius: 128px;
            -moz-border-radius: 128px;
            border-radius: 128px;
            background: #226597;
        }

        .wealth-wrap .main-circle #wealth-circle-loan-text {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 15px;
            font-weight: bold;
            line-height: 18px;
        }

        /*�O����Q*/
        .wealth-wrap .main-circle #wealth-circle-bonus {
            float: left;
            display: table;
            width: 128px;
            height: 128px;
            -webkit-border-radius: 128px;
            -moz-border-radius: 128px;
            border-radius: 128px;
            background: #FD9394;
        }

        .wealth-wrap .main-circle #wealth-circle-bonus-text {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 15px;
            font-weight: bold;
            line-height: 18px;
        }

        /*��ꫬ�O��b�����*/
        .wealth-wrap .main-circle #wealth-circle-invest {
            float: left;
            display: table;
            width: 128px;
            height: 128px;
            -webkit-border-radius: 128px;
            -moz-border-radius: 128px;
            border-radius: 128px;
            background: #1896BF;
        }

        .wealth-wrap .main-circle #wealth-circle-invest-text {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 15px;
            font-weight: bold;
            line-height: 18px;
        }

        /*�Q��/�~���O��b�����*/
        .wealth-wrap .main-circle #wealth-circle-annuity {
            float: left;
            display: table;
            width: 128px;
            height: 128px;
            -webkit-border-radius: 128px;
            -moz-border-radius: 128px;
            border-radius: 128px;
            background: #60BB97;
        }

        .wealth-wrap .main-circle #wealth-circle-annuity-text {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 15px;
            font-weight: bold;
            line-height: 18px;
        }

    /*�p��e��*/
    .wealth-wrap .sub-circle {
        position: relative;
        display: inline-block;
        width: 100%;
        /*����p��e�����|�b�j��e�����W������*/
        margin: -43px 0 0 0;
        /*margin: -28px 0 0 0;*/
    }

        .wealth-wrap .sub-circle .sub-circle-group {
            width: 128px;
            margin: 0 22px;
            display: inline-block;
        }

        .wealth-wrap .sub-circle a:link, .wealth-wrap .sub-circle a:visited {
            text-decoration: none;
        }

        .wealth-wrap .sub-circle .wealth-circle-left {
            float: left;
            display: table;
            width: 50px;
            height: 50px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            background: #FFB400;
        }

        .wealth-wrap .sub-circle .wealth-circle-left-text {
            display: table-cell;
            width: 100%;
            min-height: 100%;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 13px;
            font-weight: bold;
            line-height: 18px;
        }

        .wealth-wrap .sub-circle .wealth-circle-right {
            float: right;
            display: table;
            width: 50px;
            height: 50px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            background: #E70112;
        }

        .wealth-wrap .sub-circle .wealth-circle-right-text {
            display: table-cell;
            width: 100%;
            min-height: 100%;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 13px;
            font-weight: bold;
            line-height: 18px;
        }


/*tab�i�t�űb��j���e��--------------------------------------------------------*/
.debt-wrap {
    width: 100%;
    padding-top: 10px;
    /*���e����������i�H�m��*/
    text-align: center;
    /*�Ψӹ�div�e���i��inline�����ƦC*/
    /*text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;*/
}

    /*�e��inline�����ƦC*/
    /*.debt-wrap .stretch {
        width: 100%;
        display: inline-block;
    }*/

    .debt-wrap a:link, .debt-wrap a:visited {
        color: #FFF;
        text-decoration: none;
    }

    /*�j��e��*/
    .debt-wrap .main-circle {
        /*�f�t���e���ntext-align:center*/
        display: inline-block;
        width: 100%;
    }

        .debt-wrap .main-circle hr.circle-split {
            width: 80%;
            border: 0;
            height: 0;
            /*�Φ��z���P���u����ı�ĪG�����*/
            border-top: 1px solid rgba(255,255,255,0.5);
        }

        .debt-wrap .main-circle .main-circle-group {
            width: 300px;
            margin: 0 23px;
            display: inline-block;
        }

        /*�ɴڥ������U����꽦�n*/
        .debt-wrap .main-circle #debt-circle-loan {
            float: left;
            display: table;
            width: 300px;
            height: 128px;
            -webkit-border-radius: 128px;
            -moz-border-radius: 128px;
            border-radius: 128px;
            background: #FD9394;
        }

        /*��ú�O�O���U����꽦�n*/
        .debt-wrap .main-circle #debt-circle-pay {
            float: left;
            display: table;
            width: 300px;
            height: 128px;
            -webkit-border-radius: 128px;
            -moz-border-radius: 128px;
            border-radius: 128px;
            background: #1896BF;
        }

        /*��꽦�n���䪺���*/
        .debt-wrap .main-circle #debt-circle-left {
            float: left;
            display: table;
            width: 116px;
            height: 116px;
            -webkit-border-radius: 116px;
            -moz-border-radius: 116px;
            border-radius: 116px;
            margin: 10px;
        }

        .debt-wrap .main-circle #debt-circle-left-text {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 15px;
            font-weight: bold;
            line-height: 18px;
        }

        /*�ɴڥ�����꽦�n�k�䪺���*/
        .debt-wrap .main-circle #debt-circle-right {
            float: right;
            display: table;
            width: 116px;
            height: 116px;
            -webkit-border-radius: 116px;
            -moz-border-radius: 116px;
            border-radius: 116px;
            background: rgba(255,255,255,0.25);
            margin: 10px;
        }

        .debt-wrap .main-circle #debt-circle-right-text {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 15px;
            font-weight: bold;
            line-height: 18px;
        }

    /*�p��e��*/
    .debt-wrap .sub-circle {
        position: relative;
        display: inline-block;
        width: 100%;
        /*����p��e�����|�b�j��e�����W������*/
        margin: -43px 0 0 0;
        /*margin: -28px 0 0 0;*/
    }

        .debt-wrap .sub-circle .sub-circle-group {
            width: 300px;
            margin: 0 23px;
            display: inline-block;
        }

        .debt-wrap .sub-circle a:link, .debt-wrap .sub-circle a:visited {
            text-decoration: none;
        }

        .debt-wrap .sub-circle .debt-circle {
            display: table;
            width: 50px;
            height: 50px;
            /*���m��*/
            margin: 0 auto;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            background: #E70112;
        }

        .debt-wrap .sub-circle .debt-circle-text {
            display: table-cell;
            width: 100%;
            min-height: 100%;
            text-align: center;
            vertical-align: middle;
            color: #FFF;
            font-size: 13px;
            font-weight: bold;
            line-height: 18px;
        }

/*tab�i�O��b��겣���R�j���e��--------------------------------------------------------*/
.asset-wrap {
    display: table;
    width: 100%;
    padding-top: 10px;
    /*���e����������i�H�m��*/
    text-align: center;
}

    .asset-wrap .asset-content-wrap {
        /*�f�t���e���ntext-align:center*/
        display: inline-block;
    }

    .asset-wrap hr.circle-split {
        width: 80%;
        border: 0;
        height: 0;
        /*�Φ��z���P���u����ı�ĪG�����*/
        border-top: 1px solid rgba(255,255,255,0.5);
    }

    .asset-wrap #color-asset-value {
        float: left;
        display: table;
        margin: 0 15px 0 15px;
        width: 128px;
        height: 128px;
        -webkit-border-radius: 128px;
        -moz-border-radius: 128px;
        border-radius: 128px;
        background: #FF8B52;
    }

    .asset-wrap #color-asset-value-text {
        display: table-cell;
        width: 100%;
        min-height: 100%;
        text-align: center;
        vertical-align: middle;
        color: #FFF;
        font-size: 15px;
        font-weight: bold;
        line-height: 18px;
    }

    .asset-wrap #color-asset-total {
        float: left;
        display: table;
        margin: 0 15px 0 15px;
        width: 128px;
        height: 128px;
        -webkit-border-radius: 128px;
        -moz-border-radius: 128px;
        border-radius: 128px;
        background: #5ACFAF;
    }

    .asset-wrap #color-asset-total-text {
        display: table-cell;
        width: 100%;
        min-height: 100%;
        text-align: center;
        vertical-align: middle;
        color: #FFF;
        font-size: 15px;
        font-weight: bold;
        line-height: 18px;
    }

    .asset-wrap #asset-dashboard {
        display: table;
        text-align: right;
    }

/*tab�i�겣�t�m���R�j���e��--------------------------------------------------------*/
.arrange-wrap {
    display: table;
    width: 100%;
    padding-top: 10px;
    /*���e����������i�H�m��*/
    text-align: center;
}

    .arrange-wrap .arrange-content-wrap {
        /*�f�t���e���ntext-align:center*/
        display: inline-block;
    }

    .arrange-wrap #arrange-dashboard {
        float: left;
        clear: left;
        display: table;
        padding: 12px 0 16px 24px;
        text-align: center;
    }

    .arrange-wrap .arrange-type {
        display: table;
        padding: 25px 0 0 45px;
    }

        .arrange-wrap .arrange-type dl dd {
            /*�վ��黡����r����m*/
            display: table-cell;
            padding: 0 0 15px 17px;
            line-height: 19px;
            font-size: 13px;
            font-weight: bold;
        }


        /*�i�겣�t�m���R�j�w�q���C����*/
        .arrange-wrap .arrange-type dl dt, .circle {
            display: table-cell;
            float: left;
            clear: left;
            -webkit-border-radius: 24px;
            -moz-border-radius: 24px;
            border-radius: 24px;
            width: 24px;
            height: 24px;
        }

.color-A001 {
    background-color: #ED2E33;
}

.color-M005 {
    background-color: #FFC800;
}

.color-F398 {
    background-color: #FD9394;
}

.color-F408 {
    background-color: #226597;
}

.color-F1307 {
    background-color: #60BB97;
}

.color-F203 {
    background-color: #DDDDDD;
}

/*�O����ӭ���--------------------------------------------------------*/
.tablist-wrap {
    position: relative;
    margin: 20px 0 0 0;
}

.tablist {
    display: table;
    table-layout: fixed;
    /*���tab���e��*/
    width: 97.5%;
    padding: 10px 10px 0 10px;
    background-color: #CCF3F3;
}

    .tablist .tablist-btn {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        height: 34px;
        font-size: 13px;
        font-weight: bold;
        color: #393939;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        cursor: pointer;
    }

    .tablist .tablist-btn-offsetfix {
        display: table-cell;
        cursor: default;
    }

    .tablist .tablist-btn span {
        text-decoration: none;
        vertical-align: middle;
    }

    /*���}tabbtn�O�W�s���\�઺a*/
    .tablist .tablist-btn.tablink a:link,
    .tablist .tablist-btn.tablink a:visited,
    .tablist .tablist-btn.tablink a:active,
    .tablist .tablist-btn.tablink a:hover {
        display: inline-block;
        width: 100%;
        line-height: 34px;
        color: #393939;
        text-decoration: none;
    }

    .tablist .tablist-btn a:link,
    .tablist .tablist-btn a:visited,
    .tablist .tablist-btn a:active,
    .tablist .tablist-btn a:hover {
        color: #393939;
        cursor: pointer;
        text-decoration: none;
    }

    .tablist .tablist-btn.active {
        background-color: #FFF;
        box-shadow: inset 0 2px 3px 0 rgba(0,0,0,0.25);
    }

        .tablist .tablist-btn.active span {
            color: #007C7C;
            border-bottom: 2px solid #CCF3F3;
            padding-bottom: 2px;
        }

        .tablist .tablist-btn.active > * {
            opacity: 1;
        }

.tablist-content {
    background-color: white;
    padding: 5px 12px 20px 12px;
}

/*�ֱ��ϥ�--------------------------------------------------------*/
.hotlink-wrap {
    display: table;
    width: 100%;
}

    .hotlink-wrap .hotlink {
        position: relative;
        display: inline-block;
        width: 140px;
        height: 122px;
        color: white;
    }

    .hotlink-wrap .hotlink-caption {
        /*�Ѧ�hotlink��position*/
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 6px 0;
        text-align: center;
        vertical-align: middle;
    }

    /*hotlink�i�i�׬d�ߡjicon*/
    .hotlink-wrap #hotlink-search {
        background: #6CA9EA url('../images/quicklink_1.svg') no-repeat 50% 30%;
        background-size: 50%;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .hotlink-wrap #hotlink-search:hover {
            background-size: 60%;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .hotlink-wrap #hotlink-search-caption {
        background-color: #4D89CA;
    }

    /*hotlink�i������O�jicon*/
    .hotlink-wrap #hotlink-insure {
        background: #6DC1C1 url('../images/quicklink_2.svg') no-repeat 50% 30%;
        background-size: 50%;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .hotlink-wrap #hotlink-insure:hover {
            background-size: 60%;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .hotlink-wrap #hotlink-insure-caption {
        background-color: #4D9292;
    }

    /*hotlink�iú�O�M�ϡjicon*/
    .hotlink-wrap #hotlink-fee {
        background: #67C7EA url('../images/quicklink_3.svg') no-repeat 50% 30%;
        background-size: 28%;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .hotlink-wrap #hotlink-fee:hover {
            background-size: 35%;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .hotlink-wrap #hotlink-fee-caption {
        background-color: #429EBF;
    }

    /*hotlink�i�[�ȪA�ȡjicon*/
    .hotlink-wrap #hotlink-extra {
        background: #5ACFAF url('../images/quicklink_4.svg') no-repeat 50% 30%;
        background-size: 37%;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .hotlink-wrap #hotlink-extra:hover {
            background-size: 44%;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .hotlink-wrap #hotlink-extra-caption {
        background-color: #2CA282;
    }

    /*hotlink�i�O��ɴڡjicon*/
    .hotlink-wrap #hotlink-loan {
        background: url('../images/money-pig.jpg') no-repeat -15px -3px;
        /*background-size: contain;*/
        background-size: 100%;
        background-color: #FFF;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .hotlink-wrap #hotlink-loan:hover {
            /*background-size: 120%;*/
            background-size: 110%;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .hotlink-wrap #hotlink-loan-caption {
        background-color: #C73636;
    }

    /*��bdiv�e�������A�Ω󥭧����}����*/
    .hotlink-wrap .stretch {
        display: table-cell;
        max-width: 100%;
        width: 10%;
        /*display: table-cell;
        max-width: 5px;
        width: 5px;*/
    }

/*�M�榡���--------------------------------------------------------*/
.table-list-wrap {
    width: 100%;
}

table.table-list {
    /*table-layout: fixed;*/
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background-color: #FFF;
    line-height: 18px;
}

    table.table-list thead tr th {
        border: none;
        color: #007C7C;
        border-bottom: 3px solid #4CA7A7;
        background-color: #F5F5F5;
        padding: 12px 5px 7px 5px;
        font-weight: bold;
        vertical-align: middle;
    }

    table.table-list tbody:nth-child(2n+1) {
        background-color: #F4FFFF;
    }

    table.table-list tbody tr.tr-emptytop td {
        /*td����bg-color�|�v�Ttbody:hover��bg-color�ĪG�A���]�w*/
        border: 0;
        height: 4px;
    }

    table.table-list tbody tr.tr-emptybtm td {
        /*td����bg-color�|�v�Ttbody:hover��bg-color�ĪG�A���]�w*/
        border: 0;
        border-bottom: 1px solid #DCDCDC;
        height: 4px;
    }

    table.table-list tbody tr.tr-content td {
        border: 0;
        border-left: 1px solid #F1F1F1;
        border-right: 1px solid #F1F1F1;
        padding: 5px 10px;
        vertical-align: middle;
        line-height: 16px;
    }

        table.table-list tbody tr.tr-content td:first-child {
            border-left: 0;
        }

        table.table-list tbody tr.tr-content td:last-child {
            border-right: 0;
            padding-right: 14px;
            position: relative;
        }

            table.table-list tbody tr.tr-content td:last-child::after {
                content: '\f105';
                font-family: 'FontAwesome';
                position: absolute;
                top: 20%;
                right: 3%;
                /*float: right;
                margin-right: 5px;
                margin-right: -10px;*/
                color: #FFF;
                font-weight: bolder;
            }

    table.table-list tbody:hover {
        background-color: #CCF3F3;
        cursor: pointer;
    }

    table.table-list tbody.no-arrow tr td:last-child::after {
        content: '';
    }

    table.table-list tbody.no-arrow:hover {
        background-color: #FFF;
        cursor: default;
    }

/*��榡���--------------------------------------------------------*/
.table-form-wrap {
    width: 100%;
    text-align: left;
}

table.table-form {
    width: 100%;
    /*table-layout: fixed;*/
    table-layout: auto;
    border-collapse: collapse;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
    background-color: #FFF;
}

    table.table-form thead tr th {
        border: none;
        color: #FFF;
        background-color: #4CA7A7;
        padding: 9px 0;
        /*font-weight: bold;*/
        vertical-align: middle;
    }

    /*�_�ƦC�������*/
    table.table-form tbody:nth-child(2n+1) {
        background-color: #F4FFFF;
    }

    table.table-form tbody tr.tr-emptytop td,
    table.table-form tfoot tr.tr-emptytop td {
        /*td����bg-color�|�v�Ttbody:hover��bg-color�ĪG�A���]�w*/
        border: 0;
        height: 4px;
    }

    table.table-form tbody tr.tr-emptytop:first-child,
    table.table-form tfoot tr.tr-emptytop:first-child {
        border-top: 1px solid #DDDDDD;
    }

    table.table-form tbody tr.tr-emptybtm td,
    table.table-form tfoot tr.tr-emptybtm td {
        /*td����bg-color�|�v�Ttbody:hover��bg-color�ĪG�A���]�w*/
        border: 0;
        border-bottom: 1px solid #DDDDDD;
        height: 6px;
    }

    table.table-form tbody tr.tr-content td {
        border: 0;
        border-left: 1px solid #F1F1F1;
        border-right: 1px solid #F1F1F1;
        /*padding: 5px 10px;*/
        padding: 5px 9px;
        vertical-align: middle;
        font-size: 13px;
        line-height: 16px;
    }

        table.table-form tbody tr.tr-content td.td-unitvalue {
            color: #E70112;
            text-align: right;
            vertical-align: middle;
            word-break: break-all;
        }

    table.table-form tfoot tr.tr-content td {
        border: 0;
        border-left: 1px solid #F1F1F1;
        border-right: 1px solid #F1F1F1;
        padding: 5px 10px;
        vertical-align: middle;
        font-size: 15px;
        font-weight: bold;
        line-height: 16px;
    }

        table.table-form tbody tr.tr-content td:first-child,
        table.table-form tfoot tr.tr-content td:first-child {
            border-left: 0;
        }

        table.table-form tbody tr.tr-content td:last-child,
        table.table-form tfoot tr.tr-content td:last-child {
            border-right: 0;
        }

    /*�겣�t�m���R���/���ê���ƦC*/
    table.table-form tbody tr.tr-toggle td {
        border-top: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
        background-color: #CCF3F3;
        text-align: left;
        vertical-align: middle;
        /*padding-left: 20px;*/
        padding: 13px 10px;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    table.table-form a.row-toggle:link, table.table-form a.row-toggle:visited {
        display: inline-block;
        padding: 3px 6px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #8ADEDE;
        background-color: #F5F5F5;
        color: #007C7C;
        text-decoration: none;
    }

    /*�S���W�U���j���@���榡���*/
    table.table-form tbody tr.tr-normal th {
        border: none;
        border-bottom: 1px solid #DDD;
        color: #FFF;
        background-color: #4CA7A7;
        padding: 9px 0;
        vertical-align: middle;
    }

    table.table-form tbody tr.tr-normal td {
        border: 0;
        border-bottom: 1px solid #DDD;
        padding: 5px 10px;
        vertical-align: middle;
        font-size: 13px;
        line-height: 16px;
    }

/*�z�߬������Ӹ�ƪ�*/
.table-detail-wrap {
    padding: 13px 10px;
    background-color: #CCF3F3;
}

    .table-detail-wrap .table-form-detail-top,
    .table-detail-wrap .table-form-detail-bottom {
        width: 100%;
        font-size: 12px;
        color: #393939;
        border-collapse: collapse;
        text-align: center;
        vertical-align: middle;
        /*padding: 10px;*/
        background-color: #FFF;
        border: none;
    }

        .table-detail-wrap .table-form-detail-top tr th {
            background-color: #8ADEDE;
            /*padding: 4px 0;*/
            padding: 5px 0;
            text-align: center;
            vertical-align: middle;
        }

        .table-detail-wrap .table-form-detail-bottom tr th {
            background-color: #FFF8D1;
            /*padding: 4px 0;*/
            padding: 5px 0;
            text-align: center;
            vertical-align: middle;
        }

        .table-detail-wrap .table-form-detail-top tr:nth-child(odd) td,
        .table-detail-wrap .table-form-detail-bottom tr:nth-child(odd) td {
            background-color: #F2FBFB;
            /*padding: 4px 0;*/
            padding: 5px 0;
            text-align: center;
            vertical-align: middle;
        }

        .table-detail-wrap .table-form-detail-top tr td {
            border-bottom: 1px solid #CCF3F3;
            /*padding: 4px 0;*/
            padding: 5px 0;
            text-align: center;
            vertical-align: middle;
        }

        .table-detail-wrap .table-form-detail-bottom tr td {
            /*padding: 4px 0;*/
            padding: 5px 0;
            text-align: center;
            vertical-align: middle;
        }

/*���զX���e�i�}/���X�e��*/
.expand-wrap {
    padding: 10px;
    font-size: 13px;
}

    .expand-wrap .expand-title {
        display: inline-block;
        width: 100%;
        vertical-align: middle;
        /*padding-bottom: 10px;*/
    }
        
        .expand-wrap .expand-title .toggler {
            cursor: pointer;
        }

        .expand-wrap .expand-title .expand-toggler {
            float: right;
            cursor: pointer;
            text-align: center;
            vertical-align: middle;
        }

            .expand-wrap .expand-title .expand-toggler i {
                display: inline-block;
                padding: 5px 6px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                border: 1px solid #8ADEDE;
                background-color: #F5F5F5;
                color: #007C7C;
                text-decoration: none;
                margin-top: 3px;
            }

    .expand-wrap .expand-detail {
        clear: right;
    }

    .expand-wrap .expand-text {
        /*�Pi���r���j�p�ۦP�A��r�i�����m��*/
        line-height: 25px;
        /*float: left;*/
        /*display:block;*/
        /*width: 80%;*/
        /*padding-bottom: 5px;*/
    }


/*�p���ڭ̦U���Ը�CheckBox*/
.table-contactus-wrap {
    width: 100%;
}

table.table-contactus {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    text-align: left;
    line-height: 18px;
    background-color: #FFF;
}

    table.table-contactus tr th {
        border: none;
        color: #FFF;
        background-color: #4CA7A7;
        padding: 9px 10px;
        vertical-align: middle;
        font-size: 13px;
        text-align: left;
    }

    table.table-contactus tr td {
        border: 0;
        padding: 12px 10px;
        vertical-align: middle;
        font-size: 15px;
        line-height: 16px;
    }

/*�|�����*/
.table-simple-wrap {
    /*width: 100%;*/
}

    .table-simple-wrap .alert {
        position: absolute;
        z-index: 1;
        width: 23px;
        height: 23px;
        right: 12px;
        top: 9px;
        background: url(../images/form_alert.svg) no-repeat;
    }

    .table-simple-wrap hr.content-split {
        width: 100%;
        border: 0;
        height: 0;
        margin: 13px 0;
        /*�Φ��z���P���u����ı�ĪG�����*/
        border-top: 1px solid #DDD;
    }

    .table-simple-wrap.bordered {
        border: 1px solid #BEBEBE;
        border-radius: 6px;
        background-color: #FFF;
        padding: 20px 10px;
    }

    .table-simple-wrap table.table-simple {
        width: 100%;
        table-layout: auto;
        border-collapse: collapse;
        text-align: center;
        font-size: 15px;
        line-height: 18px;
        background-color: #FFF;
        position: relative;
    }

        .table-simple-wrap table.table-simple tbody tr th {
            border: none;
            padding: 6px 3px;
            text-align: right;
            vertical-align: middle;
        }

        .table-simple-wrap table.table-simple tbody tr td {
            border: none;
            padding: 6px 3px;
            text-align: left;
            vertical-align: middle;
            /*�p���ڭ̪��td�ݭn��@.alert�ϥ���ܪ��ѷӦ�m*/
            position: relative;
        }

        .table-simple-wrap table.table-simple a.reset-code:link,
        .table-simple-wrap table.table-simple a.reset-code:visited {
            padding: 0 10px;
            color: #007878;
            font-size: 13px;
        }

/*.table-simple-wrap table.table-simple a.reset-code:hover {
            color: #393939;
        }*/

/*��mú�O�ܧ�table���e��--------------------------------------------------------*/
.table-split-wrap {
}

    .table-split-wrap .table-split {
        width: 100%;
        table-layout: auto;
        border-collapse: collapse;
        text-align: center;
        font-size: 15px;
        line-height: 18px;
        background-color: #FFF;
    }

        .table-split-wrap .table-split tbody tr td {
            padding-left: 30px;
        }

            .table-split-wrap .table-split tbody tr td:first-child {
                border-right: 1px solid #D8D8D8;
            }

        .table-split-wrap .table-split tfoot tr td {
            border-bottom: 1px solid #D8D8D8;
        }


/*��m�������ڤ��e--------------------------------------------------------*/
.table-text-wrap {
    width: 100%;
}

    .table-text-wrap .table-text {
        width: 100%;
        table-layout: auto;
        border-collapse: collapse;
        font-size: 13px;
        color: #393939;
    }

        .table-text-wrap .table-text tr td {
            border: none;
            /*padding: 10px 6px 20px 6px;*/
            padding: 4px 0;
            text-align: left;
            vertical-align: top;
            line-height: 22px;
            background-color: #F3FFFF;
        }

            .table-text-wrap .table-text tr td p {
                padding: 2px 0;
                line-height: 22px;
            }

            /*�@����ԧB�Ʀr������*/
            .table-text-wrap .table-text tr td ol {
                margin-left: 18px;
                /*margin-left: 13px;*/
            }

                .table-text-wrap .table-text tr td ol > li {
                    list-style-type: decimal;
                    padding: 2px 0;
                    line-height: 22px;
                }

                /*���ԧB�Ʀr���p�A��"()"������*/
                .table-text-wrap .table-text tr td ol.parentheses {
                    counter-reset: list;
                    margin-left: 0;
                }

                    .table-text-wrap .table-text tr td ol.parentheses > li {
                        list-style: none;
                        padding: 2px 0;
                        line-height: 22px;
                    }

                        .table-text-wrap .table-text tr td ol.parentheses > li::before {
                            content: "(" counter(list) ") ";
                            counter-increment: list;
                            color: #E70112;
                        }


/*��m�����s����ƦC--------------------------------------------------------*/
table.table-row {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
    font-size: 13px;
    /*margin-bottom: 30px;*/
    line-height: 18px;
    background-color: transparent;
}

    table.table-row tbody tr.tr-form-row td {
        padding: 20px 4px 0 4px;
        background-color: transparent;
        text-align: left;
        vertical-align: middle;
    }

        table.table-row tbody tr.tr-form-row td.total {
            padding-bottom: 7px;
            text-align: left;
            vertical-align: bottom;
            border-bottom: 2px solid #007C7C;
        }

        table.table-row tbody tr.tr-form-row td.total-amt {
            padding-bottom: 7px;
            text-align: right;
            vertical-align: bottom;
            border-bottom: 2px solid #007C7C;
        }

/*�z�ߪA�ȶ��زM��--------------------------------------------------------*/
.claim-list-wrap {
    width: 100%;
    display: inline-block;
}

    .claim-list-wrap ol {
        /*margin: 10px 24px;*/
        margin: 10px 0 10px 24px;
    }

        .claim-list-wrap ol > li {
            list-style-type: decimal;
            padding: 4px 0 4px 10px;
            font-size: 13px;
            line-height: 18px;
            /*border-bottom: 1px solid #DBDBDB;*/
        }

            /*�S��P�����O*/
            .claim-list-wrap ol > li .list-note {
                margin-left: 0;
                padding-left: 0;
            }

                .claim-list-wrap ol > li .list-note::before {
                    content: '���@ ';
                    margin-left: -28px;
                }

            /*���ؼƦr���A�����˦�*/
            .claim-list-wrap ol > li ol.parentheses {
                counter-reset: para-listnumber;
                margin-left: 0;
            }

                .claim-list-wrap ol > li ol.parentheses > li {
                    list-style: none;
                    padding-left: 0;
                }

                    .claim-list-wrap ol > li ol.parentheses > li::before {
                        content: "(" counter(para-listnumber) ").�@";
                        counter-increment: para-listnumber;
                        vertical-align: top;
                    }

                    .claim-list-wrap ol > li ol.parentheses > li .text {
                        display: inline-block;
                        width: 94%;
                    }


/*����J����--------------------------------------------------------*/
/*�����s--------------------------------------------------------*/
input[type=button].special-font {
    display: inline-block;
    width: 50px;
    /*min-width: 20%;*/
    min-width: 50px;
    padding: 12px 0;
    margin: 5px 0% 5px;
    border: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: 0;
    background: linear-gradient(180deg, #F5515F 0%, #9F041B 100%);
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
}

input[type=button].btnform-submit {
    display: inline-block;
    width: 100%;
    /*min-width: 20%;*/
    min-width: 120px;
    padding: 12px 0;
    margin: 5px 0% 5px;
    border: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: 0;
    background: linear-gradient(180deg, #F5515F 0%, #9F041B 100%);
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
}

    input[type=button].btnform-submit:hover {
        background: linear-gradient(180deg, #F5515F 10%, #F5515F 10%);
    }

input[type=button].btnform-enter {
    display: inline-block;
    width: 100%;
    /*min-width: 20%;*/
    min-width: 120px;
    padding: 12px 0;
    margin: 5px 0% 5px;
    border: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: 0;
    /*background: linear-gradient(180deg, #F5515F 0%, #9F041B 100%);*/
    background: linear-gradient(180deg, #4CA7A7 0%, #007C7C 100%);
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
}

    input[type=button].btnform-enter:hover {
        background: linear-gradient(180deg, #46A4A4 10%, #46A4A4 10%);
    }

/*��icon��button*/
.btn-group {
    position: relative;
    display: inline-block;
    margin: 0 10px;
}

    .btn-group button.btnicon {
        position: relative;
        background: linear-gradient(180deg, #4CA7A7 0%, #007C7C 100%);
        display: inline-block;
        border: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 15px;
        color: #FFF;
        width: 100%;
        min-width: 120px;
        margin: 5px 0% 5px;
        padding: 14px 0 14px 13%;
        text-align: left;
        outline: none;
        cursor: pointer;
    }

        .btn-group button.btnicon:hover {
            background: linear-gradient(180deg, #46A4A4 10%, #46A4A4 10%);
        }

        .btn-group button.btnicon.arrow-r::after {
            content: '';
            background: url(../images/btn-arrow-r.svg) no-repeat 50% 50%;
            position: absolute;
            right: 0;
            top: 0;
            /*box-sizing: border-box;*/
            background-color: rgba(0,0,0,0.1);
            width: 48px;
            height: 100%;
            -webkit-border-radius: 0 3px 3px 0;
            -moz-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;
        }

        .btn-group button.btnicon.download::after {
            content: '';
            background: url(../images/btn-dowload.svg) no-repeat 50% 50%;
            position: absolute;
            right: 0;
            top: 0;
            /*box-sizing: border-box;*/
            background-color: rgba(0,0,0,0.1);
            width: 48px;
            height: 100%;
            -webkit-border-radius: 0 3px 3px 0;
            -moz-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;
        }


input[type=button].btnform-cancel,
input[type=button].btnform-previous {
    display: inline-block;
    width: 100%;
    /*min-width: 20%;*/
    min-width: 120px;
    padding: 12px 0;
    margin: 5px 0% 5px;
    border: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: 0;
    /*background-color: #848484;*/
    background: linear-gradient(180deg, #848484 0%, #848484 0%);
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
}

input[type=button].btnform-insert,
input[type=button].btnform-delete,
input[type=button].btnform-deleteall,
input[type=button].popup-ok {
    display: inline-block;
    width: 100%;
    /*min-width: 20%;*/
    min-width: 120px;
    /*padding: 5px 2px;*/
    padding: 8px 2px;
    border: 1px solid #BEBEBE;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: 0;
    /*background-color: #F5F5F5;*/
    background: linear-gradient(180deg, #F5F5F5 0%, #F5F5F5 0%);
    font-size: 15px;
    line-height: 15px;
    color: #007C7C;
    cursor: pointer;
}

input[type=button].popup-cancel {
    display: inline-block;
    width: 100%;
    /*min-width: 20%;*/
    min-width: 120px;
    padding: 5px 2px;
    border: 0;
    outline: 0;
    background-color: transparent;
    font-size: 15px;
    line-height: 15px;
    color: #007C7C;
    cursor: pointer;
}

input[type=button].btnform-insert:hover,
input[type=button].btnform-delete:hover,
input[type=button].btnform-deleteall:hover,
input[type=button].popup-ok:hover {
    background-color: #E9E9E9;
}

/*�q�l�O��U�����s----------------------------------------------------*/
input[type=button].btnform-sign-download {
    border: none;
    background-color: transparent;
    background: url(../images/btn-dowload.svg) no-repeat 100% 50%;
    padding: 8px 24px 8px 2px;
    color: #E70112;
    font-size: 13px;
    line-height: 13px;
    text-align: right;
    cursor: pointer;
}

/*����J���--------------------------------------------------------*/
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=number],
textarea.txtform-textarea {
    width: 100%;
    /*����btd������*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #4CA7A7;
    /*color: #4CA7A7;*/
    /*font-size: 13px;*/
    color: #393939;
    font-size: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /*padding: 6px 8px;*/
    /*padding: 2px 4px;*/
    padding: 2px 6px 2px 4px;
    height: 32px;
    font-family: 'Microsoft JhengHei', '微軟正黑體';
}

textarea.txtform-textarea {
    text-align: left;
    padding: 4px;
    resize: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

input.txtform-text {
    text-align: left;
}

input.txtform-value {
    text-align: right;
}

input.border-gray,
textarea.txtform-textarea {
    border: 1px solid #DDD;
}

input[type=number].confirm-value {
    border: 1px solid #DBDBDC;
    color: #393939;
}

    /*�U�s�����]�wplaceholder��r�C��*/
    input[type=text].txtform-text::-webkit-input-placeholder,
    input[type=email].txtform-text::-webkit-input-placeholder,
    input[type=tel].txtform-text::-webkit-input-placeholder,
    input[type=password].txtform-text::-webkit-input-placeholder,
    input[type=number].txtform-text::-webkit-input-placeholder,
    input[type=number].txtform-value::-webkit-input-placeholder,
    input[type=number].confirm-value::-webkit-input-placeholder,
    .combobox-group input[type=number].combobox::-webkit-input-placeholder,
    .combobox-group input[type=text].combobox::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #848484;
    }

    input[type=text].txtform-text::-moz-placeholder,
    input[type=email].txtform-text::-moz-placeholder,
    input[type=tel].txtform-text::-moz-placeholder,
    input[type=password].txtform-text::-moz-placeholder,
    input[type=number].txtform-text::-moz-placeholder,
    input[type=number].txtform-value::-moz-placeholder,
    input[type=number].confirm-value::-moz-placeholder,
    .combobox-group input[type=number].combobox::-moz-placeholder,
    .combobox-group input[type=text].combobox::-moz-placeholder {
        /* Firefox 19+ */
        color: #848484;
    }

    input[type=text].txtform-text:-ms-input-placeholder,
    input[type=email].txtform-text:-ms-input-placeholder,
    input[type=tel].txtform-text:-ms-input-placeholder,
    input[type=password].txtform-text:-ms-input-placeholder,
    input[type=number].txtform-text:-ms-input-placeholder,
    input[type=number].txtform-value:-ms-input-placeholder,
    input[type=number].confirm-value:-ms-input-placeholder,
    .combobox-group input[type=number].combobox:-ms-input-placeholder,
    .combobox-group input[type=text].combobox:-ms-input-placeholder {
        /* IE 10+ */
        color: #848484;
    }

    input[type=text].txtform-text:-moz-placeholder,
    input[type=email].txtform-text:-moz-placeholder,
    input[type=tel].txtform-text:-moz-placeholder,
    input[type=password].txtform-text:-moz-placeholder,
    input[type=number].txtform-value:-moz-placeholder,
    input[type=number].confirm-value:-moz-placeholder,
    .combobox-group input[type=number].combobox:-moz-placeholder,
    .combobox-group input[type=text].combobox:-moz-placeholder {
        /* Firefox 18- */
        color: #848484;
    }

/*���Radio Button--------------------------------------------------------*/
.radiobutton-wrap {
    position: relative;
}

    .radiobutton-wrap input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: none;
        content: '';
        width: 24px;
        height: 24px;
    }

        .radiobutton-wrap input[type=radio] + label {
            display: inline-block;
            background: url('../images/radiooff.svg') no-repeat 0 -4px;
            background-size: 32px 32px;
            padding-top: 5px;
            padding-left: 30px;
            padding-bottom: 6px;
            cursor: pointer;
            /*font-size: 13px;
            line-height: 13px;*/
            font-size: 15px;
            line-height: 15px;
        }

        .radiobutton-wrap input[type=radio]:checked + label {
            display: inline-block;
            background: url('../images/radioon.svg') no-repeat 0 -4px;
            background-size: 32px 32px;
            padding-top: 5px;
            padding-left: 30px;
            padding-bottom: 6px;
            cursor: pointer;
            /*font-size: 13px;
            line-height: 13px;*/
            font-size: 15px;
            line-height: 15px;
        }

/*²�������--------------------------------------------------------*/
/*�i�O��ɴ��`���j--------------------------------------------------------*/
.loan-policy-wrap {
    width: 100%;
    display: table;
    margin: 0 auto;
}

    .loan-policy-wrap div {
        display: block;
        padding: 8px 0 6px 0;
        line-height: 22px;
    }

    .loan-policy-wrap .loan-policy-dashboard {
        float: left;
        clear: left;
        display: table;
        padding-left: 38px;
        padding-top: 40px;
    }

    .loan-policy-wrap .overview-wrap {
        display: table;
        width: 45%;
        padding-left: 70px;
    }

        .loan-policy-wrap .overview-wrap hr {
            border: 0;
            height: 0;
            border-top: 1px solid #D8D8D8;
        }

        .loan-policy-wrap .overview-wrap .circle {
            padding: 0;
            margin: 0;
            -webkit-border-radius: 22px;
            -moz-border-radius: 22px;
            border-radius: 22px;
            width: 22px;
            height: 22px;
        }

/*������ܧ�@�����--------------------------------------------------------*/
.table-overview-wrap {
    padding-top: 30px;
}

.table-overview {
    width: 100%;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
}

    .table-overview thead tr td {
        font-size: 13px;
        background-color: #CCF3F3;
        color: #007C7C;
        padding: 6px 10px;
    }

    .table-overview tbody tr {
        background-color: #FFF;
    }

        .table-overview tbody tr:nth-child(even) {
            background-color: #F4FFFF;
        }

        .table-overview tbody tr td {
            /*background-color: #FFF;*/
            padding-left: 6px;
            font-size: 15px;
            color: #393939;
        }

            /*.table-overview tbody tr td a:link, .table-overview tbody td a:visited {*/
            .table-overview tbody tr td span {
                color: #393939;
                text-decoration: none;
                cursor: pointer;
            }

                /*.table-overview tbody tr td a:hover {*/
                .table-overview tbody tr td span:hover {
                    color: #007C7C;
                    text-decoration: underline;
                    cursor: pointer;
                }

            .table-overview tbody tr td.item {
                padding: 14px 0 10px 20px;
                padding-left: 20px;
            }

                .table-overview tbody tr td.item i {
                    background-color: #FFF;
                    border: 1px solid #DDD;
                    color: #DDD;
                    width: 24px;
                    height: 24px;
                    line-height: 24px;
                    -webkit-border-radius: 24px;
                    -moz-border-radius: 24px;
                    border-radius: 24px;
                    text-align: center;
                    vertical-align: middle;
                    font-size: 20px;
                }

/*�Ƶ��϶�--------------------------------------------------------*/
.remark-outer-wrap {
    background-color: #FFF;
    padding: 15px 12px;
}

.remark-wrap {
    background-color: #F5F5F5;
    padding: 12px;
    font-size: 13px;
}

    .remark-wrap p {
        padding-bottom: 10px;
        border-bottom: 1px solid #BEBEBE;
        font-size: 13px;
    }

    .remark-wrap .remark-items ol {
        list-style-type: decimal;
        margin: 0 0 0 15px;
        padding: 10px 0 0 0;
        font-size: 13px;
    }

        .remark-wrap .remark-items ol li {
            padding-left: 15px;
            line-height: 20px;
        }

            /*�ĤG���h�M��C�� dl dt dd (�Ʀr�ۭq) */
            .remark-wrap .remark-items ol li > dl {
                width: 100%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }

                .remark-wrap .remark-items ol li > dl dt {
                    float: left;
                    width: 5%;
                    margin: 0;
                    padding: 0;
                }

                .remark-wrap .remark-items ol li > dl dd {
                    float: left;
                    width: 95%;
                    margin: 0;
                    padding: 0;
                }

                    .remark-wrap .remark-items ol li > dl dd::after {
                        clear: left;
                    }

/*���B�J�i��--------------------------------------------------------*/
.progressbar-wrap {
    width: 100%;
    display: table;
    margin: 30px 0 50px 0;
}

    .progressbar-wrap .progressbar-group {
        position: relative;
        /*�C��group�H������覡�ƦC��ܡA�C��group�ѷӦۤv���ݪ�position��m*/
        display: table-cell;
    }

        /*�B�J���D - �w�](������)�B�J*/
        .progressbar-wrap .progressbar-group .title {
            position: absolute;
            left: -4px;
            top: -9px;
            width: 40px;
            line-height: 40px;
            border: 2px solid #FFF;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            text-align: center;
            background-color: #BEBEBE;
            color: #FFF;
            font-size: 24px;
        }

        /*�B�J���D - �w�����B�J*/
        .progressbar-wrap .progressbar-group .done {
            background-color: #45A19A;
        }

        /*�B�J��μ��D - �ثe���B�J*/
        .progressbar-wrap .progressbar-group .active {
            background-color: #E94655;
        }

        /*�B�J������r*/
        .progressbar-wrap .progressbar-group .text {
            position: absolute;
            top: 0;
            left: 45px;
            height: 24px;
            line-height: 24px;
            font-size: 13px;
            color: #FFF;
        }

        /*�B�J�i�׭ȥ]�Юe��*/
        .progressbar-wrap .progressbar-group .progress {
            background-color: #bebebe;
            color: #333333;
            position: absolute;
            left: 0;
            /*���׫����m��*/
            top: 50%;
            /*�e�ײŦX�ۤv��group�e��*/
            width: 100%;
            height: 24px;
            z-index: -1;
        }

            /*�B�J�i�׭� - �w�](������)�B�J*/
            .progressbar-wrap .progressbar-group .progress .value {
                /*�L�i�װʵe�A���ݭn�e��*/
                /*width: 0;*/
                height: 24px;
                background-color: #bebebe;
            }

            /*�B�J�i�׭� - �w�](������)�B�J*/
            .progressbar-wrap .progressbar-group .progress .done {
                /*�L�i�װʵe�A���ݭn�e��*/
                /*width: 0;*/
                height: 24px;
                background-color: #45A19A;
            }

            /*�B�J�i�׭� - �w�](������)�B�J*/
            .progressbar-wrap .progressbar-group .progress .active {
                /*��ܶi�װʵe�A�e�׳]�w��0*/
                width: 0;
                height: 24px;
                background-color:  #E94655;
            }

/*�[�ȪA��--------------------------------------------------------*/
.extra-wrap {
    background-color: #FFF;
    padding: 20px;
    padding-left: 22px;
    /*���e����������i�H�m��*/
    text-align: left;
}

    .extra-wrap .extra-box-row {
        /*�f�t���e���ntext-align: left;*/
        display: inline-block;
    }

        .extra-wrap .extra-box-row a:link,
        .extra-wrap .extra-box-row a:visited,
        .extra-wrap .extra-box-row a:hover,
        .extra-wrap .extra-box-row a:active {
            display: inline-block;
        }

.extra-box {
    position: relative;
    width: 160px;
    height: 120px;
    float: left;
    margin: 6px 4px 3px 3px;
    background-color: #F5F5F5;
}

    .extra-box .card {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        /*background-size: 50px 52px;*/
        margin: 12px 0 0 55px;
    }

        .extra-box .card#gift {
            background: url('../images/plus.svg') no-repeat -12px -9px;
            width: 50px;
            height: 52px;
        }

        .extra-box .card#ebook {
            background: url('../images/plus.svg') no-repeat -80px -9px;
            width: 60px;
            height: 52px;
        }

        .extra-box .card#course {
            background: url('../images/plus.svg') no-repeat -155px -9px;
            width: 55px;
            height: 52px;
        }

        .extra-box .card#health-check {
            background: url('../images/plus.svg') no-repeat -225px -9px;
            width: 55px;
            height: 52px;
        }

        .extra-box .card#lohas {
            background: url('../images/plus.svg') no-repeat -298px -9px;
            width: 55px;
            height: 52px;
        }

        .extra-box .card#bag {
            background: url('../images/plus.svg') no-repeat -372px -7px;
            width: 55px;
            height: 55px;
        }

        .extra-box .card#treatment {
            background: url('../images/plus.svg') no-repeat -8px -82px;
            width: 55px;
            height: 52px;
        }

        .extra-box .card#health-care {
            background: url('../images/plus.svg') no-repeat -80px -80px;
            width: 55px;
            height: 58px;
        }

        .extra-box .card#road-aid {
            background: url('../images/plus.svg') no-repeat -153px -82px;
            width: 55px;
            height: 52px;
        }

        .extra-box .card#schoolarship {
            background: url('../images/plus.svg') no-repeat -222px -82px;
            width: 60px;
            height: 52px;
        }

        .extra-box .card#medicine {
            background: url('../images/plus.svg') no-repeat -295px -82px;
            width: 55px;
            height: 52px;
        }

        .extra-box .card#ecard {
            background: url('../images/plus.svg') no-repeat -368px -80px;
            width: 55px;
            height: 55px;
        }

    .extra-box .caption {
        position: absolute;
        width: 100%;
        height: 46px;
        line-height: 42px;
        bottom: 0;
        left: 0;
        font-size: 13px;
        color: #393939;
        /*padding: 12px 4px 16px;*/
        background-color: #FDF09D;
        text-align: center;
    }

        .extra-box .caption .text {
            display: inline-block;
            vertical-align: middle;
            line-height: normal;
            width: 100%;
            font-size: 13px;
            color: #393939;
            padding-bottom: 0;
        }

    .extra-box .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #4CA7A7;
        overflow: hidden;
        width: 100%;
        height: 0;
        text-align: center;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        /*-moz-transition: .5s ease;
        -webkit-transition: .5s ease;
        -o-transition: .5s ease;
        transition: .5s ease;*/
    }

    .extra-box:hover .overlay {
        /*bottom: 0;*/
        height: 100%;
    }

    .extra-box .overlay .text {
        width: 100%;
        color: #FFF;
        font-size: 13px;
        line-height: 18px;
        padding: 6px 0;
        position: absolute;
        overflow: hidden;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
        vertical-align: middle;
    }

    .extra-box span.btn {
        display: inline-block;
        position: absolute;
        /*���s��m*/
        top: 60%;
        left: 40%;
        width: 28px;
        height: 28px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: none;
        outline: none;
        background-color: #8ADEDE;
        color: white;
    }

        .extra-box span.btn:hover {
        }

        .extra-box span.btn i {
            position: absolute;
            top: 10%;
            left: 40%;
            font-size: 20px;
        }

/*�[�ȪA��ecard*/
.ecard-wrap {
    background-color: #FFF;
    padding: 30px 26px 26px 30px;
}

    .ecard-wrap::after {
        content: "";
        clear: both;
        display: table;
    }

    .ecard-wrap .left {
        /*�Ω�Ϥ��P�ϥΪ̦W�٪��۹��m�Ѧ�*/
        position: relative;
        width: 53.8%;
    }

    .ecard-wrap .right {
        width: 46.2%;
    }

    .ecard-wrap .ecard-col {
        float: left;
    }

        .ecard-wrap .ecard-col img#ecard {
            width: 360px;
        }

        .ecard-wrap .ecard-col .caption {
            position: absolute;
            top: 207px;
            left: 266px;
            color: #FFF;
            font-size: 18px;
            font-weight: bold;
        }

        .ecard-wrap .ecard-col .content {
            padding-left: 16px;
        }

            .ecard-wrap .ecard-col .content .title {
                color: #E70112;
                font-size: 15px;
                font-weight: bold;
            }

                .ecard-wrap .ecard-col .content .title i {
                }

                .ecard-wrap .ecard-col .content .title span {
                    padding-left: 13px;
                }

            .ecard-wrap .ecard-col .content ol {
                list-style-type: decimal;
                margin-left: 16px;
                padding-top: 18px;
                font-size: 13px;
            }

                .ecard-wrap .ecard-col .content ol li {
                    padding: 10px 0 10px 10px;
                    border-bottom: 1px solid #DDD;
                    line-height: 18px;
                }

/*�T����ܵe��--------------------------------------------------------*/
.box-agreement {
    margin: 20px;
    min-height: 100px;
    background-color: #CCF3F3;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #FFFFFF;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
    font-size: 15px;
}

    .box-agreement .box-icon {
        float: left;
        margin: 19px 0 0 36px;
        width: 48px;
        /*height: 63px;*/
        height: 70px;
        background: url('../images/bigicon.svg') no-repeat -14px -6px;
    }

    .box-agreement .text-title {
        /*padding: 30x 18px 15px 120px;*/
        padding: 20px 18px 25px 120px;
        line-height: 22px;
        font-size: 15px;
        font-weight: bold;
    }

    .box-agreement .text {
        padding: 10px 30px;
        line-height: 22px;
        font-size: 15px;
        color: #393939;
    }

.box-confirm {
    margin: 12px;
    min-height: 100px;
    background-color: #FFF8D1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-size: 15px;
}

    .box-confirm .box-icon {
        float: left;
        margin: 21px 0 0 28px;
        width: 64px;
        /*height: 64px;*/
        height: 70px;
        background: url('../images/bigicon.svg') no-repeat -158px -6px;
    }

    .box-confirm .text {
        padding: 15px 18px 15px 120px;
        line-height: 22px;
        font-size: 13px;
    }

    .box-confirm .confirm {
        padding-top: 10px;
    }


.box-msg {
    margin: 20px;
    min-height: 100px;
    background-color: #CCF3F3;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #FFFFFF;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
    /*box-shadow: 0 0 10px 0 rgba(0,0,0,0.25); IE��box shadow������i�[��*/
    font-size: 15px;
    display: table;
    width: 95%;
}

    .box-msg .box-icon {
        float: left;
        margin: 19px 0 0 36px;
        width: 64px;
        /*height: 58px;*/
        height: 70px;
        background: url('../images/bigicon.svg') no-repeat -82px -9px;
    }

    .box-msg .text {
        padding: 15px 20px;
        /*padding: 15px 18px 15px 20px;*/
        line-height: 22px;
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

        .box-msg .text::after {
            display: inline-block;
        }

    .box-msg .text-middle {
        padding: 15px 18px 15px 15px;
        line-height: 22px;
        font-size: 15px;
        display: inline-block;
        /*text-align:left;
        vertical-align: middle;*/
    }

/*�����B�z���J�ʵe*/
.loader-wrap {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.7);
}

    .loader-wrap .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 10px solid #007B7C;
        border-right: 10px solid #50ADAD;
        border-bottom: 10px solid #84DADB;
        border-left: 10px solid #CAF2F2;
        width: 29px;
        height: 29px;
        -webkit-animation: spin 0.8s linear infinite;
        -moz-animation: spin 0.8s linear infinite;
        -ms-animation: spin 0.8s linear infinite;
        -o-animation: spin 0.8s linear infinite;
        animation: spin 0.8s linear infinite;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    
    .loader-wrap .loader .loadimg {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

/*���J�ʵe���]�w*/
@-webkit-keyframes spin {
    0% {
        /*-webkit-transform: rotate(0deg);*/
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        /*-webkit-transform: rotate(360deg);*/
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        /*-webkit-transform: rotate(0deg);*/
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        /*-webkit-transform: rotate(360deg);*/
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.box-model {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.3);
    /*��ܰʵe�ĪG*/
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;
}

    .box-model .box-popup,
    .box-model .box-alert {
        position: relative;
        /*margin: 10% auto;*/
        margin: 7% auto;
        padding: 0;
        width: 470px;
        height: auto;
        /*overflow-y: no-display;*/
        background-color: #FFF;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid #BEBEBE;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
        padding-bottom: 56px;
        font-size: 15px;
    }

        .box-model .box-alert .popup-icon {
            display: inline-block;
            background: url('../images/form_alert.svg') no-repeat 0 0;
            margin: 7px 0 0 12px;
            padding-left: 40px;
            /*width: 30px;*/
            height: 30px;
            z-index: 1;
        }

        /*��w�n�X�T������*/
        .box-model .box-alert .logout-popup-icon {
            display: inline-block;
            background: url('../images/form_clock.svg') no-repeat 0 0;
            margin: 7px 0 0 12px;
            padding-left: 40px;
            /*width: 30px;*/
            height: 30px;
            z-index: 1;
        }
            /*��w�n�X�T������*/
            .box-model .box-alert .logout-popup-icon span {
                /*��ܦbicon���䪺��r*/
                line-height: 30px;
                width: 100%;
            }

    .box-model .popup-title {
        display: inline-block;
        margin: 7px;
        padding-left: 10px;
        height: 30px;
        line-height: 30px;
    }

    .box-model .box-popup .row,
    .box-model .box-alert .row {
        display: inline-block;
        padding: 7px 12px;
        float: right;
    }

        .box-model .box-popup .row span,
        .box-model .box-alert .row span {
            display: inline-block;
            padding: 3px;
            color: #848484;
            opacity: 0.7;
            cursor: pointer;
        }

            .box-model .box-popup .row span:hover,
            .box-model .box-alert .row span:hover {
                text-decoration: none;
                opacity: 1;
                cursor: pointer;
            }

    .box-model .box-popup .text,
    .box-model .box-alert .text {
        clear: both;
        font-size: 15px;
        line-height: 20px;
        padding: 10px 19px;
        color: #393939;
    }

    .box-model .box-popup hr {
        width: 100%;
        border: 0;
        height: 0;
        margin: 0;
        border-top: 6px solid #8ADEDE;
        float: left;
    }

    .box-model .box-alert hr {
        width: 100%;
        border: 0;
        height: 0;
        margin: 0;
        border-top: 6px solid #E70112;
        float: left;
    }


/*���󱱨--------------------------------------------------------*/
/*���U�ԲM��*/
.ddl-wrap {
    position: relative;
    display: block;
}

.ddl-inline {
    display: inline;
}

.ddl-wrap select {
    position: relative;
    /*�U�ԲM�檺�V�U�b�Y*/
    background: url('../images/ddl-down-arrow.svg') no-repeat 95% 50%;
    /*background-position: right center;*/
    padding: 7px 32px 7px 10px;
    font-size: 15px;
    /*font-weight: bold;*/
    color: #393939;
    border: 1px solid #DDD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #FFF;
    /*�����s�������]�w���U�ԲM��b�Y*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*�p���U�ԲM��*/
.ddl-s-srap {
    display: block;
    font-size: 13px;
    color: #848484;
    float: right;
    clear: right;
    margin: 10px 0;
}

    .ddl-s-srap select {
        /*�U�ԲM�檺�V�U�b�Y*/
        background: url('../images/ddl-down-arrow-gray.svg') no-repeat 95% 50%;
        padding: 3px 20px 3px 5px;
        border: 1px solid #BEBEBE;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background-color: #FFF;
        /*�����s�������]�w���U�ԲM��b�Y*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

.checkbox-wrap {
    position: relative;
}

    .checkbox-wrap input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: none;
        content: '';
    }

        .checkbox-wrap input[type=checkbox] + label {
            display: inline-block;
            background: url('../images/checkboxoff.svg') no-repeat 0 1px;
            background-size: 24px 24px;
            /*padding-left: 30px;*/
            padding: 4px 0 3px 30px;
            cursor: pointer;
        }

        .checkbox-wrap input[type=checkbox]:checked + label {
            display: inline-block;
            background: url('../images/checkboxon.svg') no-repeat 0 1px;
            background-size: 24px 24px;
            /*padding-left: 30px;*/
            padding: 4px 0 3px 30px;
            cursor: pointer;
        }


/*��L�]�w--------------------------------------------------------*/
ul.pwd-hint {
    list-style-type: disc;
    font-size: 13px;
    margin-left: 24px;
}

.clearfix {
    clear: both;
}

.hide {
    display: none;
}

.show {
    display: normal;
}

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

.text-center {
    text-align: center;
}

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

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

.text-middle {
    vertical-align: middle;
}

.text-center-middle {
    text-align: center;
    vertical-align: middle;
}

.text-red {
    color: #E70112;
}

.text-black {
    color: #393939;
}

.text-gray {
    color: #848484;
}

.text-lightgray {
    color: #BEBEBE;
}

.text-lightergray {
    color: #DDD;
}

.text-greendark {
    color: #007C7C;
}

.text-greenlight {
    color: #4CA7A7;
}

.text-underline {
    text-decoration: underline;
}

.text-nowrap {
    white-space: nowrap;
    text-wrap: avoid;
}

.text-height21 {
    line-height: 21px;
}

.text-height15 {
    line-height: 21px;
}

.font36 {
    font-size: 36px;
}

.font22 {
    font-size: 22px;
}

.font20 {
    font-size: 20px;
}

.font18 {
    font-size: 18px;
}

.font17 {
    font-size: 17px;
}

.font16 {
    font-size: 16px;
}

.font15 {
    font-size: 15px;
}

.font14 {
    font-size: 14px;
}

.font13 {
    font-size: 13px;
}

.font12 {
    font-size: 12px;
}

/*�k�W�������O*/
p.note-right {
    text-align: right;
    padding: 5px 18px 0 0;
    font-size: 13px;
}

/*�i�׬d�ߥk�W����*/
p.date-right {
    text-align: right;
    padding: 16px 4px 12px 0;
    font-size: 13px;
    color: #4A4A4A;
    float: right;
}

/*��padding top+bottom���}�e�����󤧶����Ŷ�*/
.space30 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.space20 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.space15 {
    padding-top: 7.5px;
    padding-bottom: 7.5px;
}

.space10 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.space6 {
    padding-top: 3px;
    padding-bottom: 3px;
}

/*��padding left+right���}�e�����󤧶����Ŷ�*/
.vspace10 {
    padding-left: 5px;
    padding-right: 5px;
}

.vspace20 {
    padding-left: 10px;
    padding-right: 10px;
}

.vspace30 {
    padding-left: 15px;
    padding-right: 15px;
}

.bg-white {
    padding-top: 10px;
    background-color: #FFF;
    margin-bottom: 0;
}

.bg-yellow {
    background-color: #FFF8D1;
    color: #393939;
    font-size: 13px;
    padding: 6px;
}

.nopadding {
    padding: 0;
}

/*�W�Upadding8*/
.vpad8 {
    padding: 4px 0;
}

.btm-border-gray {
    border-bottom: 1px solid #DDD;
}

/*tab�������D*/
h5 {
    margin: 10px 0;
    padding: 2px;
    color: #007C7C;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
}

p.h5-right {
    margin: 10px 0;
    padding: 2px;
    display: inline;
    float: right;
    clear: right;
}

/*�����W����D*/
h4 {
    margin: 10px 0;
    padding: 2px;
    color: #FF8B52;
    font-size: 15px;
    font-weight: bold;
}

/*�ڪ��b��ĤG�h���D�B�z�ߪA�ȶ�νb�Y���D*/
h3 {
    margin: 5px;
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
}
    /*�ڪ��b��ĤG�h���D---------------------------------------------*/
    h3 .backslash {
        display: inline-block;
        width: 5px;
        height: 18px;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        -o-transform: skew(30deg);
        transform: skew(30deg);
    }

    h3 .text {
        display: inline-block;
        padding: 2px 2px 2px 15px;
        /*background-color: #FFF;*/
        text-align: left;
        vertical-align: top;
    }

    h3 .progress-text {
        display: inline-block;
        padding: 8px 2px 2px 12px;
        /*background-color: #FFF;*/
        text-align: left;
        vertical-align: top;
    }

    h3#blue .backslash {
        background-color: #1D6499;
    }

    h3#blue .text {
        color: #1D6499;
    }

    h3#pink .backslash {
        background-color: #FF9292;
    }

    h3#pink .text, h3#pink .progress-text {
        color: #FF9292;
    }

    h3#skyblue .backslash {
        background-color: #0295C1;
    }

    h3#skyblue .text, h3#skyblue .progress-text {
        color: #0295C1;
    }

    h3#grass .backslash {
        background-color: #5CBC96;
    }

    h3#grass .text, h3#grass .progress-text {
        color: #5CBC96;
    }

    h3#gray .backslash {
        background-color: #848484;
    }

    h3#gray .text {
        color: #848484;
    }

    h3#greendark .backslash {
        background-color: #007C7C;
    }

    h3#greendark .text {
        color: #007C7C;
        line-height: 15px;
    }

    /*�i�׬d�ߡi�����ܧ�i�סj*/
    h3 .progress-change {
        display: inline-block;
        width: 28px;
        height: 29px;
        background: url('../images/status.svg') no-repeat 0 0;
    }

    /*�i�׬d�ߡi�����ܧ�i�סj*/
    h3 .progress-claim {
        display: inline-block;
        width: 28px;
        height: 29px;
        background: url('../images/status.svg') no-repeat -32px 0;
    }

    /*�i�׬d�ߡi�����ܧ�i�סj*/
    h3 .progress-new {
        display: inline-block;
        width: 28px;
        height: 29px;
        background: url('../images/status.svg') no-repeat -64px 0;
    }

    /*�z�ߪA�ȶ�νb�Y���D---------------------------------------------*/
    h3.claim-title {
        line-height: 20px;
    }

        h3.claim-title .arrow-icon {
            display: inline-block;
            background-color: #8ADEDE;
            width: 20px;
            height: 20px;
            margin: 0 10px 0 0;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }

            h3.claim-title .arrow-icon i {
                color: #FFF;
                text-align: center;
                vertical-align: middle;
                margin-left: 8px;
                margin-top: -4px;
            }

        h3.claim-title .arrow-title {
            display: inline-block;
            font-size: 15px;
            color: #007C7C;
            height: 100%;
        }

h2.title {
    display: inline-block;
    font-size: 16px;
    line-height: 36px;
    font-weight: bold;
    color: #393939;
}

h2.callout-title {
    border-left: 8px solid #007C7C;
    text-align: left;
    font-size: 18px;
    height: 36px;
    line-height: 36px;
    padding-left: 10px;
    color: #007C7C;
    font-weight: bold;
}

.callout-wrap {
    vertical-align: top;
    text-align: left;
}

.callout {
    display: inline-block;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    border: 1px solid #DDDDDD;
    padding: 10px 14px;
    margin: 0 10px;
    text-align: left;
    vertical-align: top;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.1);
}

    /*.callout:first-child {
        margin-left: 0;
    }*/

    .callout:last-child {
        margin-right: 0;
    }

    .callout a:link,
    .callout a:visited,
    .callout a:active,
    .callout a:hover {
        color: #393939;
    }

    .callout.callout-yellow {
        border-top: 6px solid #FEDA00;
        background-color: #FFF8D1;
    }

    .callout.callout-green {
        border-top: 6px solid #4CA7A7;
        background-color: #CCF3F3;
    }

    .callout ul {
        margin-left: 18px;
    }

        .callout ul > li {
            list-style-type: disc;
            font-size: 13px;
            line-height: 22px;
        }

            .callout ul > li.map i {
                margin-left: 10px;
                font-size: 16px;
                color: #007C7C;
            }

            .callout ul > li.map a:link,
            .callout ul > li.map a:visited,
            .callout ul > li.map a:active,
            .callout ul > li.map a:hover {
                color: #393939;
            }

/*div�ۭq���زM��˦�*/
.div-listitem-wrap {
    counter-reset: listnumber;
    display: inline-block;
    width: 98%;
}

    .div-listitem-wrap .listitem {
        padding: 10px 0 10px 10px;
        font-size: 13px;
        line-height: 20px;
        border-bottom: 1px solid #DBDBDB;
    }

        .div-listitem-wrap .listitem::before {
            counter-increment: listnumber;
            content: counter(listnumber) ".�@";
            vertical-align: top;
        }

        .div-listitem-wrap .listitem .listitem-text {
            display: inline-block;
            width: 94%;
        }

/*�z�ߪA��Arrow box-----------------------------*/
.arrowbox-wrap {
    display: table;
    width: 650px;
}

    .arrowbox-wrap .arrowbox {
        position: relative;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        padding: 20px;
        margin-bottom: 20px;
    }

        .arrowbox-wrap .arrowbox#step1 {
            background-color: #CCF3F3;
        }

        .arrowbox-wrap .arrowbox#step2 {
            background-color: #B0F2F2;
        }

        .arrowbox-wrap .arrowbox#step3 {
            background-color: #8ADEDE;
        }

        .arrowbox-wrap .arrowbox::after,
        .arrowbox-wrap .arrowbox::before {
            top: 100%;
            left: 7%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .arrowbox-wrap .arrowbox::after {
            border-width: 10px;
            margin-left: -10px;
        }

        .arrowbox-wrap .arrowbox:before {
            border-top-color: #CCF3F3;
            border-width: 11px;
            margin-left: -11px;
        }


        .arrowbox-wrap .arrowbox#step1::after,
        .arrowbox-wrap .arrowbox#step1:before {
            border-top-color: #CCF3F3;
        }

        .arrowbox-wrap .arrowbox#step2::after,
        .arrowbox-wrap .arrowbox#step2:before {
            border-top-color: #B0F2F2;
        }

        .arrowbox-wrap .arrowbox#step3::after,
        .arrowbox-wrap .arrowbox#step3:before {
            border-top-color: #8ADEDE;
        }

        .arrowbox-wrap .arrowbox .arrowbox-title {
            display: table-cell;
            width: 65px;
            text-align: center;
            line-height: 120px;
        }

            .arrowbox-wrap .arrowbox .arrowbox-title .step-circle {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 50px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                background-color: #FFF;
                box-shadow: 0 2px 6px 0 #4CA7A7;
                font-size: 32px;
                color: #007C7C;
                text-align: center;
                line-height: 50px;
            }

        .arrowbox-wrap .arrowbox .arrowbox-text {
            display: table-cell;
            width: 510px;
            height: 52px;
            vertical-align: middle;
            padding: 0 0 0 20px;
            border-left: 2px solid #FFF;
        }

span.toggle-title {
    display: inline-block;
    padding-right: 15px;
    color: #007C7C;
    font-size: 13px;
    font-weight: bold;
}

span.toggle-text {
    display: inline-block;
    color: #393939;
    font-size: 13px;
}

span.tab-nav-link {
    font-size: 15px;
    color: #007C7C;
    text-decoration: underline;
    cursor: pointer;
}

a.simple-link:link,
a.simple-link:visited,
.simple-text {
    display: inline-block;
    /*�P�U��underline���Z��*/
    padding: 10px 0 1px 0;
    margin: 0 0 12px 20px;
    font-size: 15px;
    font-weight: bold;
    color: #4CA7A7;
    line-height: 21px;
    text-decoration: none;
    border-bottom: 1px solid #4CA7A7;
}

a.reset-code:link,
a.reset-code:visited,
a.reset-code:hover,
a.reset-code:active {
    color: #007878;
    font-size: 13px;
}

/*.go-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}

go-top:hover {
    background-color: #555;
}*/


/*�ۻsComboBox--------------------------------------------------------*/
.combobox-group {
    display: inline-block;
    position: relative;
}

    .combobox-group input[type=number].combobox,
    .combobox-group input[type=text].combobox {
        font-size: 15px;
        border: 1px solid #DBDBDC;
/*         color: #4CA7A7; */
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        /*padding: 2px 4px;*/
        padding: 2px 6px 2px 4px;
        padding-right: 30px;
        height: 32px;
    }

    .combobox-group .combobox-dropdown {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 32px;
        background: url('../images/ddl-down-arrow.svg') no-repeat 75% 50%;
    }

    .combobox-group .combobox-items {
        position: absolute;
        top: 32px;
        left: 0;
        width: 100%;
        height: 150px;
        border: 1px solid #DBDBDC;
        border-top: none;
        z-index: 999;
        font-size: 14px;
        overflow-y: scroll;
        overflow-x: no-display;
        background-color: #FFF;
    }

        .combobox-group .combobox-items > div.option {
            padding: 4px 6px;
        }

            .combobox-group .combobox-items > div.option:hover {
                padding: 4px 6px;
                background-color: #ccc;
            }

/*.combobox-group select.combobox-items {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    height: 150px;
    border: 1px solid #DBDBDC;
    border-top: none;
    z-index: 999;
    font-size: 14px;
}

.combobox-group select.combobox-items > option {
    padding: 4px 6px;
}*/

*-- 2021.10.27 MID開發調整 & 版面調整 --*/
/*-- Header --*/
header{
    width: 100%;
    height: 70px;
    background: #007c7c;
    text-align: center;
    top: 0;
    z-index: 999;}

.header-wrap{
    display: inline-block;
    text-align: left;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 15px 2%;
    max-width: 1200px;}

.header-wrap > a{
    display: inline-block;
    width: 132px;}
    
.header-wrap > a > img{width: 100%;}

/*上方訊息窗、提示訊息窗調整*/
.main-simple{width: 800px;}
.box-msg{
    margin: 20px 0;
    width: 100%;
    background-color: #eeeeee;
    box-shadow:initial;}

#msg2 ul {
    padding-left: 25px;
    margin: 5px 0;
    color: #ED2E33;
    list-style: square;}

#msg2 ul li .tooltip{cursor: pointer;}
#msg2 ul li .tooltip .tooltiptext{
    width: 380px;
    font-size: 13px;
    top: 0;
    left: 20px;
    padding: 10px;
    transition: 0.5s;
    z-index: 2;}
    
#msg2 ul li .tooltip .tooltiptext ul li{color: #fff;}

.tooltip{cursor: pointer;}
.tooltip .tooltiptext{
    padding: 10px !important;
    left: 20px;}
ul.pwd-hint{
    padding-left: 20px;
    margin: 0;}

/*-- footer --*/
footer {
    position: relative;
    width: 100%;
    min-width: 100%;
    padding-top: 20px;
    height: initial;
    background: initial;
    margin: 0 auto;
    box-sizing: border-box;}

.footer-wrap {
    width: 100%;
    max-width: 1000px;
    padding: 10px 20px ;
    margin: 0 auto;
    box-sizing: border-box;}

footer .line-wrap {
    display: inline-block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0;}

footer .line-wrap .line1 {
    display: inline-block;
    width: 73%;
    height: 20px;
    float: left;
    background-color: #007575;}

footer .line-wrap .line2 {
    display: inline-block;
    width: 20%;
    height: 20px;
    float: left;
    background-color: #33928C;}

footer .line-wrap .line3 {
    display: inline-block;
    width: 7%;
    height: 20px;
    float: left;
    background-color: #529E99;}

footer .footer-text {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    line-height: 24px;
    text-align: left;}

footer .footer-text a:link, footer .footer-text a:visited {
    color: #007C7C;
    font-weight: bold;}

footer .footer-text a:hover {color: #E70112;}

 /*-- 行動電話選擇 --*/
.mobileOption-wrap{
    position: relative;
    display: block;
    box-sizing: border-box;}

.mobileOption-wrap > input{display:none;}

.mobile-option{
    display:inline-block;
    padding: 5px 20px;}

.table-simple-wrap table.table-simple tbody tr th.certify-th{
    vertical-align: top;
    padding-top: 15px;}

.certifyOption-wrap{
    display: inline-block;
    vertical-align: top;
    padding: 5px 0;
    overflow: hidden;}

.certifyOption-wrap > input[type=radio] {display:none;}
.certifyOption-wrap .certify-m1,
.certifyOption-wrap .certify-m2{
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 10px 20px;
    min-width: 200px;    
    height: 30px;
    font-weight: 600;
    line-height: 30px;
    background: #fff;
    border: 1px solid #45a19a;
    margin-right: 10px;
    border-radius: 6px;
    color: #45a19a;
    cursor: pointer;
    z-index: 1;
    transition: 0.5s;}

.certifyOption-wrap .certify-m1:hover,
.certifyOption-wrap .certify-m2:hover{
    background: #45a19a;
    border-color: #45a19a;
    color: #fff;}

#certify1:checked ~ .certify-m1,
#certify2:checked ~ .certify-m2{
    background: #45a19a;
    border-color: #45a19a;
    color: #fff;}

/*-- 選擇提示箭頭 --*/
.select-arrow{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 12px;
    border-color:  #45a19a transparent transparent transparent;
    z-index: 1;
    opacity: 0;
    transition: 0.5s;}

/*-- 行動電話號碼及E-MAIL驗證區塊 --*/
.certifyOption-mobile, 
.certifyOption-mid{
    display: inline-block;
    box-sizing: border-box;
    width: 498px;
    padding:15px;
    margin-top: 5px;
    background: #efefef;
    overflow: hidden;
    transition: 0.5s;
    top: 50px;
    left: 0;
    pointer-events: none;
    opacity: 0;
    border-radius: 3px;
    position: absolute;}

.certifyOption-mobile > div,
.certifyOption-mid > div {
    position: relative;
    padding-left: 90px;
    margin: 10px 0;}

.certifyOption-mobile h3,
.certifyOption-mid h3{
    position: absolute;
    height: 32px;
    line-height: 32px;
    left: 0;
    top: 0;
    min-width: 80px;
    text-align: right;
    margin: 0 5px;}

.certifyOption-mid > div > div{display: flex;}
.certifyOption-mid > div > div > select{margin-right: 10px;}

.certifyOption-mid > span{
    display: block;
    line-height: 24px;
    color: #ED2E33;
    font-size: 14px;
    font-weight: 900;
    padding-left: 10px;}

#certify1:checked ~ .certifyOption-mobile{
    opacity: 1;
    top: 0;
    position: relative;
    pointer-events: initial;}

#certify2:checked ~ .certifyOption-mid{
    opacity: 1;
    top: 0;
    position: relative;
    pointer-events: initial;}

#certify1:checked ~ .certify-m1 > .select-arrow{opacity: 1;}
#certify2:checked ~ .certify-m2 > .select-arrow{opacity: 1;}

/*-- 行動電話號碼及E-MAIL選項樣式 --*/
.certifyOption-mobile > div > input[type=radio], 
.certifyOption-mid > input[type=radio]{display: none;}

.phone1, .phone2,
.email11, .email12,
.phone3, .email13{
    vertical-align: middle;
    position: relative;
    display: inline-block;
    padding: 0 20px 0 40px;
    background: url(../index_mid_files/radiooff.svg) left no-repeat;
    background-size: contain;
    color: rgba(51, 51, 51, 0.6);
    border-radius: 3px;
    transition: 0.5s;
    cursor: pointer;
    height: 32px;
    line-height: 32px;}

.certifyOption-mobile > div >label:nth-of-type(1){ margin-right: 10px;}
.certifyOption-mobile > div:nth-of-type(2) >label:nth-of-type(2){ margin-top: 10px;}

#phone1:checked ~ .phone1,
#phone2:checked ~ .phone2,
#phone3:checked ~ .phone3,
#email11:checked ~ .email11,
#email12:checked ~ .email12,
#email13:checked ~ .email13{
    color: #333;
    background: url(../index_mid_files/radioon.svg) left no-repeat;
    background-size: contain;}

/*更換樣式，故取消此方式*/    
/*-- checked樣式
#mid-phone1:checked ~ .mid-phone1::after,
#mid-phone2:checked ~ .mid-phone2::after,
#mid-email1:checked ~ .mid-email1::after,
#mid-email2:checked ~ .mid-email2::after{
    content: '';
    display: inline-block;
    position: absolute;
    background: #45a19a;
    top: 16px;
    left: 11px;
    width: 4px;
    height: 10px;
    transform: rotate(-50deg);
    z-index: 1;
    animation: check-ani 0.2s ease-in forwards;}

#mid-phone1:checked ~ .mid-phone1::before,
#mid-phone2:checked ~ .mid-phone2::before,
#mid-email1:checked ~ .mid-email1::before,
#mid-email2:checked ~ .mid-email2::before{
    content: '';
    display: inline-block;
    position: absolute;
    background: #45a19a;
    top: 10px;
    left: 18px;
    width: 4px;
    height: 16px;
    transform: rotate(38deg);
    z-index: 1;
    animation: check-ani 0.2s ease-in forwards;}
    @keyframes check-ani {
        0%{opacity: 0;}
        100%{opacity: 1;}
    }  */  

/*-- 隱藏input數字預設輸入上下箭頭調整功能 --*/
.certifyOption-mid > div > div > input::-webkit-outer-spin-button,
.certifyOption-mid > div > div > input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;}

/*-- 警示文字樣式 --*/
.certifyOption-mobile .notice-red{
    display: block;
    font-size: 14px;
    line-height: 16px;
    color: #ED2E33;
    display: none;}

.certifyOption-mid > div:nth-of-type(1) > span.notice-red{
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #ED2E33;
    padding-left: 134px;
    display: none;}

.certifyOption-mid > div > span.notice-red{
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #ED2E33;
    padding-left: 4px;
    display: none;}

/*-- 調整：取消作業、確認送出 按鈕樣式 (和台壽官網一致) --*/
/*- 重發一次性密碼(OTP)鈕 -*/
input[type=button]#resend-pwd{
    color: #00726a;
    font-weight: 700;
    font-size: 17px;
    box-sizing: border-box;
  	-webkit-border-radius: 6px;
 	-moz-border-radius: 6px ;
  	border-radius: 6px;
 	appearance: none;
 	-webkit-appearance: none;
 	-moz-appearance: none;
    border:1px solid #00726a;
    background: #fff;
    transition:all 0.5s ease-in-out;}

input[type=button]#resend-pwd:active,
input[type=button]#resend-pwd:hover{
    border-color: transparent;
    background-image: linear-gradient(
105deg,#008680,#00726a);
    color: #fff;}
/*- 取消鈕 -*/
input[type=button].btnform-cancel, input[type=button].btnform-previous{
    color: #00726a;
    font-weight: 700;
    font-size: 17px;
    box-sizing: border-box;
  	-webkit-border-radius: 6px;
 	-moz-border-radius: 6px ;
  	border-radius: 6px;
 	appearance: none;
 	-webkit-appearance: none;
 	-moz-appearance: none;
    border:1px solid #00726a;
    background: #fff;
    transition:all 0.5s ease-in-out;}

input[type=button].btnform-cancel, input[type=button].btnform-previous:active,
input[type=button].btnform-cancel, input[type=button].btnform-previous:hover{
    border-color: transparent;
    background-image: linear-gradient(
105deg,#008680,#00726a);
    color: #fff;}

/*- 確認送出鈕 -*/
input[type=button].btnform-submit{
    font-size: 17px;
    font-weight: 700;
  	-webkit-border-radius: 6px;
 	-moz-border-radius: 6px ;
  	border-radius: 6px;
 	appearance: none;
 	-webkit-appearance: none;
 	-moz-appearance: none;
    box-shadow: 0 5px 15px 0 rgb(0 0 0 / 10%);
    border: 1px solid transparent;
    background-image: linear-gradient(
105deg,rgb(0, 133, 126),rgb(0, 114, 106));
    transition:all 0.5s ease-in-out;}

input[type=button].btnform-submit:active,
input[type=button].btnform-submit:hover{
background-image: linear-gradient(
180deg,hsla(0,0%,100%,.2),hsla(0,0%,100%,.2)),linear-gradient(
105deg,rgb(0, 134, 128),rgb(0, 114, 106));}

/*-- 行動身分識別(Mobile ID)認證 PopUp --*/
.popUp-wrap{
    position: fixed;
    box-sizing: border-box;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    z-index: 999;
    transition: 0.5s;
    animation: popUpShow-ani 0.8s ease;
    display: none;}
    /*蓋版用動畫*/
    @keyframes popUpShow-ani{
        0%{opacity: 0;}
        100%{opacity: 1;}
    }

.popUp-wrap .popUp{
    text-align: center;
    position: absolute;
    width: 95%;
    box-sizing: border-box;
    height: 85%;
    max-width: 730px;
    max-height: 645px;
    padding: 20px 40px 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 25px 30px -15px rgba(0, 0, 0, 0.4);
    -webkit-box-box-shadow: 0 25px 30px -15px rgba(0, 0, 0, 0.4);} 

.popUp-wrap .popUp > h2{
    text-align: center;
    color: #007C7C;
    margin-bottom: 5px;
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px;}

.popUp-wrap .popUp > p {
    margin: 0;
    font-size: 15px;
    color: #E70112;
    font-weight: 600;
    text-align: center;
    line-height: 24px;
    margin-bottom: 16px;}

.popUp-wrap .popUp .popUp-content p{
	margin-top:0;
    margin-bottom: 16px;}
.popUp-wrap .popUp .popUp-content{
    display: inline-block;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 120px);
    padding: 0 20px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 22px;}

.popUp-wrap .popUp .popUp-content ol{
    box-sizing: border-box;
    height: calc(100% - 120px);
    padding: 20px 20px 20px 40px;
    border-radius: 3px;
    background: #eeeeee;
    overflow-y: auto;
    margin-top: 16px;
    margin-bottom: 16px;}

.popUp-wrap .popUp .popUp-content ol li{
    list-style-type: square;
    margin-bottom: 10px;}

.popUpbtn-wrap{
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #fff;
    padding: 10px 0 20px;}

.popUpbtn-wrap input[type=button]{
    width: 150px;
    margin: 0 10px;
}