@charset "UTF-8";

@keyframes upDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes rotate360 {
    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }
}

@keyframes inputHighlighter {
    from {
        background: #5264AE;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 10px rgba(0, 110, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 110, 255, 0.9);
    }

    100% {
        box-shadow: 0 0 10px rgba(0, 110, 255, 0.5);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes drawLine {
    0% {
        width: 0%;
        border-color: #CCC;
    }

    100% {
        width: 100%;
        border-color: #20973E;
    }
}
/* 修正粗體 */
@font-face {
    font-family: "微軟正黑體修正";
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic);
}
/* 一般粗細的時候改回微軟正黑 */
@font-face {
    font-family: "微軟正黑體修正";
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體);
}

a {
    color: #333333;
}

    a:hover {
        color: #000000;
        text-decoration: none;
    }

input:focus {
    outline-width: 3px;
    outline-style: dashed;
    outline-color: #38adeb;
}

a[href]:focus {
    outline-width: 3px;
    outline-style: dashed;
    outline-color: #38adeb;
}

[href] {
    cursor: pointer;
}

* {
    box-sizing: border-box;
}

main.main .pagination ul {
    margin: 0;
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

main.main .pagination ul {
    padding: 0;
    border: 0;
    border-radius: 0;
    list-style: none;
    background-color: transparent;
    font-size: 1em;
    font-weight: normal;
    transition: initial;
    line-height: 1.5;
}

    main.main .pagination ul:before {
        content: none;
    }

    main.main .pagination ul:after {
        content: none;
    }

footer, main, header {
    margin: 0 auto;
    max-width: 1440px;
}

    main.main .pagination ul {
        padding: 0;
        border: 0;
        border-radius: 0;
        list-style: none;
        background-color: transparent;
        font-size: 1em;
        font-weight: normal;
        transition: initial;
        line-height: 1.5;
    }

        main.main .pagination ul:before {
            content: none;
        }

        main.main .pagination ul:after {
            content: none;
        }

    main .content .step_content .material ul .verification .v_box a.renew, main .content .step_content .material ul .verification .v_box a.voice, main .index_box .index_top .right .index_material ul .verification .v_box a.renew, main .index_box .index_top .right .index_material ul .verification .v_box a.voice, header .header_box .logo h1 a, main.main .pagination li.PagedList-skipToNext a, main.main .pagination li.PagedList-skipToPrevious a {
        text-indent: -9999px;
        font: 0/0 a;
        color: transparent;
    }

.table > table tbody > tr td .list-file ul li .file {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main .content .step_content .apply ul li a, .function_bt ul li a, .btn-border, .btn-Square button, .btn-Square a, .btn-greens input, .btn-greens button, .btn-greens a, .btn-gray button, .btn-gray a {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    line-height: 1.8;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    transition: 300ms;
    padding: 5px 18px !important;
    border: none;
    border-radius: 0.2em;
    font-size: inherit;
    cursor: pointer;
    margin: 3px;
}

    main .content .step_content .apply ul li a:hover, .function_bt ul li a:hover, .btn-border:hover, .btn-Square button:hover, .btn-Square a:hover, .btn-greens input:hover, .btn-greens button:hover, .btn-greens a:hover, .btn-gray button:hover, .btn-gray a:hover {
        color: #ffffff;
        transform: translateY(-5px);
    }

main .top .online_appeal > a.appeal, .btn-green {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    line-height: 1.8;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    transition: 300ms;
    padding: 0px 30px;
    border: none;
    border-radius: 2em;
    font-size: inherit;
    cursor: pointer;
    margin: 3px;
}

    main .top .online_appeal > a.appeal:hover, .btn-green:hover {
        color: #ffffff;
    }

.btn-gray a {
    border: #CCC solid 1px;
    border-radius: 40px;
    padding: 5px 40px !important;
    background-color: #747474;
    color: #ffffff;
}

@media screen and (max-width: 560px) {
    .btn-gray a {
        padding: 5px 20px !important;
    }
}

.btn-gray a:hover {
    background-color: #20973E;
    color: #ffffff !important;
    transform: translateY(-5px);
}

.btn-gray button {
    border: #CCC solid 1px;
    border-radius: 40px;
    padding: 5px 40px !important;
    background-color: #C3CBD1;
    font-weight: lighter;
    color: #ffffff;
}

    .btn-gray button:hover {
        background-color: #20973E;
        color: #ffffff !important;
        transform: translateY(-5px);
    }

.btn-greens a {
    border-radius: 40px;
    padding: 5px 40px !important;
    background-color: #20973E;
    color: #ffffff;
}

@media screen and (max-width: 560px) {
    .btn-greens a {
        padding: 5px 20px !important;
    }
}

.btn-greens a:hover {
    background-color: #20973E;
    color: #ffffff !important;
    transform: translateY(-5px);
}

.btn-greens button {
    border-radius: 40px;
    padding: 5px 40px !important;
    background-color: #20973E;
    font-weight: lighter;
    color: #ffffff;
}

@media screen and (max-width: 768px) {
    .btn-greens button {
        padding: 5px !important;
    }
}

.btn-greens button:hover {
    background-color: #20973E;
    color: #ffffff !important;
    transform: translateY(-5px);
}

.btn-greens input {
    border-radius: 40px;
    padding: 5px 40px !important;
    background-color: #20973E;
    font-weight: lighter;
    color: #ffffff;
}

    .btn-greens input:hover {
        background-color: #20973E;
        color: #ffffff !important;
        transform: translateY(-5px);
    }

.btn-Square a {
    border: #CCC solid 1px;
    border-radius: 0.2em;
    background-color: #747474;
    color: #ffffff;
    width: 225px;
}

    .btn-Square a:hover {
        background-color: #20973E;
        color: #ffffff !important;
        transform: translateY(-5px);
    }

.btn-Square button {
    border: #CCC solid 1px;
    border-radius: 0.2em;
    background-color: #C3CBD1;
    font-weight: lighter;
    color: #ffffff;
    width: 225px;
}

    .btn-Square button:hover {
        background-color: #20973E;
        color: #ffffff !important;
        transform: translateY(-5px);
    }

.btn-border {
    border: #CCC solid 1px;
    font-size: 0.9em;
}

    .btn-border:hover {
        transform: translateY(-5px);
        background-color: #20973E;
    }

main .top .online_appeal > a.appeal, .btn-green {
    background-color: #20973E;
    color: #ffffff;
}

    main .top .online_appeal > a.appeal:hover, .btn-green:hover {
        background-color: rgb(23.0819672131, 108.9180327869, 44.7213114754);
    }

.btn-reset a {
    background-image: url(../images/svg/reset.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 15%;
    background-color: #20973E;
    color: #ffffff;
    color: #ffffff;
    border-radius: 20px;
    padding: 10px 20px;
    padding-left: 40px;
}

.btn-date a {
    padding-left: 40px !important;
    background-repeat: no-repeat;
    background-position: 10px center;
    padding: 10px 20px;
    background-size: 20px;
    background-color: #F3F3F3;
    border-radius: 0.2em;
    background-position: 15px;
}

    .btn-date a:hover {
        background-color: #20973E;
        color: #ffffff !important;
    }

.btn-date {
    background-image: url(../images/svg/date.svg);
}

main.main .pagination li.PageSizeGo > a, main.main .pagination li.PagedList-skipToLast a, main.main .pagination li.PagedList-skipToFirst a, main.main .pagination li.PagedList-skipToNext a, main.main .pagination li.PagedList-skipToPrevious a {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

input, textarea, select, .time input[type=date], input[type=date], input[type=datetime-local], input[type=text],
input[type=password],
input[type=number], main.main .pagination li.PagedList-pageCountAndLocation input, main.main .pagination li.number-select input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /* 包含padding在內計算寬度 */
    font-size: inherit;
    color: #000000;
    font-family: "微軟正黑體";
    position: relative;
}

    input:focus, textarea:focus, select:focus, main.main .pagination li.PagedList-pageCountAndLocation input:focus, main.main .pagination li.number-select input:focus {
        border-color: #66afe9;
        outline: 0;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder, .time input[type=date]::-moz-placeholder, input[type=date]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=number]::-moz-placeholder, main.main .pagination li.PagedList-pageCountAndLocation input::-moz-placeholder, main.main .pagination li.number-select input::-moz-placeholder {
        color: #CCC;
    }

    input::placeholder, textarea::placeholder, select::placeholder, .time input[type=date]::placeholder, input[type=date]::placeholder, input[type=datetime-local]::placeholder, input[type=text]::placeholder,
    input[type=password]::placeholder,
    input[type=number]::placeholder, main.main .pagination li.PagedList-pageCountAndLocation input::placeholder, main.main .pagination li.number-select input::placeholder {
        color: #CCC;
    }

    input[type=checkbox], label[for=checkbox1],
    .check_box {
        width: 22px;
        height: 20px;
        margin: 10px;
    }

        input[type=checkbox]:checked, label[for=checkbox1]:checked,
        .check_box:checked {
            accent-color: #20973E;
        }

.time {
    display: inline-block;
    position: relative;
}

    .time:after {
        background-color: #FFF;
        background-image: url(../images/svg/date.svg);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 40px;
    }

.settings ul li .set_list ol li input[type=radio], .radio input[type=radio], .radio_box input[type=radio] {
    width: 15px;
    height: 15px;
    line-height: 15px;
    flex: 0 0 15px;
    margin: 5px 5px;
}

    .settings ul li .set_list ol li input[type=radio]:checked, .radio input[type=radio]:checked, .radio_box input[type=radio]:checked {
        accent-color: #20973E;
    }

main .content .step ul li.active .step1, main .content .step ul li.active .step2, main .content .step ul li.active .step3, main .content .step ul li.active .step4, main .content .step ul li .step1, main .content .step ul li .step2, main .content .step ul li .step3, main .content .step ul li .step4 {
    background-color: #fff;
    border-radius: 50%;
    color: #CCC;
    height: 64px;
    line-height: 64px;
    margin: 0 auto;
    position: relative;
    width: 64px;
    z-index: 1;
    text-indent: -9999px;
}

    .settings ul li.w33 a.limited, main .content .step_content .appeal_box .btn_box .btn a, main .content .step ul li.active .step4 a, main .content .step ul li.active .step3 a, main .content .step ul li.active .step2 a, main .content .step ul li.active .step1 a, main .content .step ul li .step4 a, main .content .step ul li .step3 a, main .content .step ul li .step2 a, main .content .step ul li .step1 a, main .top .case_inquiry .search_box ul li.voice a, main .top .case_inquiry .search_box ul li.reorganize a, main .top .case_inquiry .h3 {
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
    }

@keyframes underline {
    from {
        width: 1%;
    }

    to {
        width: 100%;
    }
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px); /* 上浮 10px */
    }

    100% {
        transform: translateY(0); /* 回到原位 */
    }
}

.page {
    background-color: #000;
}

.btn-link a {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: underline;
}

    .btn-link a:hover {
        color: #20973E;
    }

main.main .pagination {
    display: flex;
    justify-content: center;
    margin: 20px;
}

@media screen and (max-width: 768px) {
    main.main .pagination {
        display: block;
    }
}

main.main .pagination .pagination-container {
    margin: 3px 6px;
}

main.main .pagination .pagination li + li {
    margin-left: 3px;
}

main.main .pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

main.main .pagination li.is-active a,
main.main .pagination li.is-active span {
    background-color: #20973E !important;
    border-color: #20973E;
    color: #ffffff;
    cursor: pointer;
}

    main.main .pagination li.is-active a:hover, main.main .pagination li.is-active a:focus,
    main.main .pagination li.is-active span:hover,
    main.main .pagination li.is-active span:focus {
        background-color: deeper(#20973E);
        color: #ffffff;
    }

main.main .pagination li.PagedList-pageCountAndLocation a,
main.main .pagination li.PagedList-pageCountAndLocation span, main.main .pagination li.number-select a,
main.main .pagination li.number-select span {
    width: auto;
    background-color: transparent;
    border: none;
}

main.main .pagination li.number-select {
    display: flex;
    align-items: center;
}

    main.main .pagination li.number-select input[type=number] {
        height: 30px;
    }

main.main .pagination li.PagedList-skipToPrevious a {
    background-image: url("../images/svg/icon_arrow-left.svg");
    background-size: 14px;
}

main.main .pagination li.PagedList-skipToNext a {
    background-image: url("../images/svg/icon_arrow-right.svg");
    background-size: 14px;
}

main.main .pagination li.PagedList-skipToFirst a {
    background-image: url("../images/svg/icon_next.svg");
    transform: rotate(180deg);
    background-size: 14px;
}

main.main .pagination li.PagedList-skipToLast a {
    background-image: url("../images/svg/icon_next.svg");
    background-size: 14px;
}

main.main .pagination li.PageSizeGo > a {
    background-image: url("../images/svg/icon_nav.svg");
    background-size: 14px;
}

main.main .pagination li span,
main.main .pagination li a,
main.main .pagination li input {
    border: 1px solid #e4e4e4;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
}

main.main .pagination select {
    display: inline-block;
    width: auto;
    max-width: initial;
}

main.main .pagination span {
    display: block;
}

main.main .pagination .btn {
    display: inline-block;
    vertical-align: middle;
    margin: 0 7px 0 -6px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #e4e4e4;
    min-width: initial;
    width: 17px;
    height: 30px;
    padding: 14px 15px;
    box-sizing: border-box;
    background-image: url("../images/icon-pic/icon-page.png");
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid #d0d0d0;
}

    main.main .pagination .btn:hover, main.main .pagination .btn:focus {
        background-color: #CCC;
        transform: initial;
        box-shadow: none;
    }

    main.main .pagination .btn:after {
        display: none;
    }

    main.main .pagination .btn:active {
        box-shadow: inset 0px 0px 4px 0px rgb(136.8, 136.8, 136.8);
    }

    main.main .pagination .btn span {
        font-size: 0;
    }

    main.main .pagination .btn::before {
        background: none;
    }

.function_bt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #ffffff;
}

    .function_bt ul {
        text-align: center;
    }

        .function_bt ul li {
            display: inline-block;
        }

            .function_bt ul li a {
                margin: 8px 5px;
            }

.table {
    line-height: 0;
    background-color: #ffffff;
    margin-top: 20px;
}

@media screen and (max-width: 1440px) {
    .table {
        overflow-x: scroll;
    }
}

.table > table {
    width: 100%;
    border-collapse: collapse;
    line-height: 1.8;
    table-layout: fixed;
}

    .table > table thead {
        color: #C3CBD1;
        border-radius: 10px 10px 0 0;
        line-height: 3;
        background: #F3F3F3;
        border-top: #CCC solid 1px;
        border-bottom: #CCC solid 1px;
    }

        .table > table thead th.required::before {
            content: "*";
            color: red;
        }

        .table > table thead tr {
            text-align: center;
            /* 水平居中 */
            vertical-align: middle;
            /* 垂直居中 */
        }

            .table > table thead tr th {
                font-weight: normal;
                color: initial;
            }

    .table > table tbody {
        background-color: #ffffff;
    }

        .table > table tbody > tr {
            border-bottom: #e4e4e4 solid 1px;
            text-align: center;
            vertical-align: middle;
        }

            .table > table tbody > tr td {
                padding: 8px 5px;
                vertical-align: inherit;
                line-height: 1;
                word-wrap: break-word;
            }

                .table > table tbody > tr td .list {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                    .table > table tbody > tr td .list.winherit input {
                        text-align: right;
                    }

                .table > table tbody > tr td .list_left {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                }

                .table > table tbody > tr td .list-file {
                    padding-left: 10px;
                }

                    .table > table tbody > tr td .list-file ul {
                        text-align: left;
                    }

                        .table > table tbody > tr td .list-file ul li {
                            display: flex;
                            flex-wrap: wrap;
                            padding-bottom: 8px;
                        }

                            .table > table tbody > tr td .list-file ul li .file {
                                margin: 5px 0;
                                text-align: start;
                                padding-right: 40px;
                                flex: initial;
                                line-height: 1.7;
                            }

                            .table > table tbody > tr td .list-file ul li .input,
                            .table > table tbody > tr td .list-file ul li p {
                                flex: 1;
                                margin-left: 8px;
                            }

                            .table > table tbody > tr td .list-file ul li p {
                                line-height: 1.5;
                                font-size: 0.9em;
                            }

                            .table > table tbody > tr td .list-file ul li .btn-del {
                                flex: 0 0 30px;
                                padding: 0;
                                width: 30px;
                                height: 30px;
                                margin: 0 5px;
                            }

                .table > table tbody > tr td .group_4 {
                    padding: 10px 0;
                }

                .table > table tbody > tr td a.link {
                    text-decoration: underline;
                }

                .table > table tbody > tr td .list a:hover {
                    text-decoration: underline;
                }

                .table > table tbody > tr td .list ul {
                    border-left: 1px solid #7B7B7B;
                    padding-left: 10px;
                    margin-left: 10px;
                }

                .table > table tbody > tr td .input {
                    flex: 0 0 80%;
                    padding: 0px;
                    padding: 8px;
                }

                .table > table tbody > tr td .details {
                    display: flex;
                    align-items: center;
                    margin: 0;
                }

                    .table > table tbody > tr td .details p {
                        width: 200px;
                    }

                .table > table tbody > tr td.btn-greens a {
                    padding: 5px 20px !important;
                }

            .table > table tbody > tr .email {
                word-break: break-all;
                text-align: start;
            }

        .table > table tbody tr.titlebar {
            background-color: #fff7f7;
        }

        .table > table tbody .border-light {
            border-bottom: #F3F3F3 solid 1px;
        }

        .table > table tbody .total_gray {
            background-color: #7B7B7B;
            color: #ffffff;
        }

.table p {
    color: #CC0000;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    padding: 20px 0;
}

.del {
    position: relative;
}

    .del::before {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 10px;
        width: 1px;
        background-color: #e4e4e4;
    }

@media screen and (max-width: 768px) {
    table thead {
        display: none;
    }

        table thead tr th {
            width: inherit !important;
        }

    table tbody tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: left;
    }

        table tbody tr td {
            text-align: left;
        }

            table tbody tr td:before {
                content: attr(data-title);
                display: block;
                font-size: 0.8em;
                font-weight: 600;
                color: #20973e;
                margin-bottom: 4px;
            }
}

body {
    font-family: Arial, "微軟正黑體修正", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif, "新細明體";
    padding: 0;
    font-size: 1.2em;
    line-height: 1.7 !important;
    background-color: #F3F3F3;
    background-image: url(../images/bglogo.png);
    background-repeat: no-repeat;
    background-position: right 150px bottom;
}

    body ::-webkit-scrollbar-track {
        background-color: #F1F1F1;
        border-radius: 0px;
    }

    body ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #C1C1C1;
        border-radius: 0px;
    }

    body ::-webkit-scrollbar-thumb {
        background-color: #C1C1C1;
        border-radius: 10px;
    }

.simple-text.accesskey {
    position: relative;
}

    .simple-text.accesskey a {
        position: absolute;
    }

a {
    text-decoration: none;
    cursor: pointer;
}

h2 {
    font-size: 1.2em;
    font-weight: bold;
    padding-left: 16px;
}

p {
    line-height: 1.8;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    position: relative;
}

header {
    background-color: #F3F3F3;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    header {
        flex-wrap: wrap;
    }
}

header .for_accessibility {
    position: absolute;
}

header .header_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 1060px) and (min-width: 1px) {
    header .header_box {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    header .header_box {
        display: block;
    }
}

header .header_box .logo {
    margin: 10px 0;
}

@media screen and (max-width: 768px) {
    header .header_box .logo {
        flex: 0 0 100%;
    }
}

header .header_box .logo h1 a {
    display: block;
    background-image: url(../images/svg/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 130px;
    width: 500px;
    background-size: contain;
}

@media screen and (max-width: 768px) {
    header .header_box .logo h1 a {
        max-width: 100%;
        margin: 0 auto;
    }
}

header .header_box .link {
    margin: 20px 0;
}

@media screen and (max-width: 768px) {
    header .header_box .link {
        margin: 10px 0;
    }
}

header .header_box .link ul {
    flex: 1;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 1060px) and (min-width: 1px) {
    header .header_box .link ul {
        justify-content: center;
    }
}

header .header_box .link ul li a {
    display: block;
    position: relative;
}

    header .header_box .link ul li a:before {
        position: absolute;
        content: "";
        background-color: #747474;
        width: 1px;
        height: 20px;
        top: 4px;
        right: -5px;
    }

    header .header_box .link ul li a:hover {
        text-decoration: underline;
        color: #20973E;
    }

header .header_box .link ul li:last-child a::before {
    display: none;
}

main {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 20px;
    box-sizing: border-box;
    padding-bottom: 20px;
}

@media screen and (max-width: 768px) {
    main {
        justify-content: center;
        flex-direction: column;
    }
}

main .tab {
    margin-bottom: 20px;
}

    main .tab ul {
        border-bottom: #20973E solid 3px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

        main .tab ul li a {
            display: block;
            border-radius: 0.4em;
            background-color: #C3CBD1;
            color: #333333;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
            padding: 15px 30px;
            padding-left: 80px;
            font-weight: bold;
            position: relative;
            transition: 300ms;
        }

@media screen and (max-width: 768px) {
    main .tab ul li a {
        padding-left: 45px !important;
        padding-right: 10px;
    }
}

main .tab ul li a:hover {
    background-color: #20973E;
    color: #ffffff;
}

main .tab ul li a:before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 0px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    padding: 10px;
    margin-right: 10px;
    background-image: url(../images/svg/tab01.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    left: 20px;
}

@media screen and (max-width: 768px) {
    main .tab ul li a:before {
        width: 10px;
        height: 10px;
        background-size: 20px;
        top: 15px;
        left: 10px;
    }
}

main .tab ul li + li a:before {
    background-image: url(../images/svg/tab02.svg);
}

main .tab ul li.is-active a {
    display: block;
    border-radius: 0.4em;
    background-color: #20973E;
    color: #ffffff;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    padding: 15px 30px;
    font-weight: bold;
    padding-left: 80px;
    position: relative;
}

main .top {
    display: flex;
    flex: 1;
    gap: 20px;
}

    main .top .online_appeal {
        position: relative;
        background-color: #ffffff;
        border-radius: 0.4em;
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
        padding: 30px;
        flex: 3;
    }

        main .top .online_appeal .h3 {
            color: #20973E;
            font-weight: bold;
            font-size: 2em;
        }

        main .top .online_appeal .h4 {
            font-size: 1.2em;
        }

        main .top .online_appeal img {
            height: 300px;
        }

        main .top .online_appeal > a.appeal {
            position: absolute;
            right: 10%;
            top: 40%;
            font-size: 1.6em;
            box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
            padding: 10px 80px;
            font-weight: bold;
        }

        main .top .online_appeal p {
            color: #D63636;
            font-size: 0.9em;
        }

    main .top .case_inquiry {
        flex: 2;
        background-color: #ffffff;
        border-radius: 0.4em;
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
        padding: 30px;
    }

        main .top .case_inquiry .h3 {
            font-size: 1.4em;
            font-weight: bold;
            text-indent: 40px;
            background-image: url(../images/svg/title_icon.svg);
            background-size: 40px;
            background-position: left center;
        }

        main .top .case_inquiry ul li {
            display: flex;
            margin: 5px 0;
            align-items: center;
        }

            main .top .case_inquiry ul li label {
                flex: 0 0 65px;
                color: #20973E;
            }

            main .top .case_inquiry ul li input {
                border: none;
                border-bottom: #CCC solid 1px !important;
                border-radius: 0px !important;
            }

        main .top .case_inquiry ul.personal {
            display: flex;
            position: relative;
            margin-top: 40px;
        }

            main .top .case_inquiry ul.personal:before {
                color: #20973E;
                font-size: 1em;
                content: "個人資料";
                position: absolute;
                top: -30px;
                left: 0;
            }

            main .top .case_inquiry ul.personal li {
                display: flex;
                align-items: center;
                margin: 5px 0 0 0;
            }

                main .top .case_inquiry ul.personal li input:first-child {
                    flex: 0 0 20px;
                }

                main .top .case_inquiry ul.personal li label {
                    color: #7B7B7B;
                    font-size: 0.8em;
                }

        main .top .case_inquiry .search_box {
            margin-left: 65px;
        }

            main .top .case_inquiry .search_box ul {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 5px;
            }

                main .top .case_inquiry .search_box ul li button {
                    padding: 10px 40px;
                    box-sizing: border-box;
                }

                main .top .case_inquiry .search_box ul li.reorganize a {
                    display: block;
                    width: 50px;
                    height: 50px;
                    text-indent: -9999px;
                    background-image: url(../images/svg/reorganize.svg);
                }

                main .top .case_inquiry .search_box ul li.voice a {
                    display: block;
                    width: 50px;
                    height: 50px;
                    text-indent: -9999px;
                    background-image: url(../images/svg/sound.svg);
                }

        main .top .case_inquiry .forget {
            float: right;
        }

            main .top .case_inquiry .forget a {
                text-decoration: underline;
                color: #7B7B7B;
            }

                main .top .case_inquiry .forget a:hover {
                    color: #20973E;
                }

main .bottom ul {
    margin: 0px;
    padding: 0px;
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

    main .bottom ul li {
        background-color: #ffffff;
        border-radius: 0.4em;
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 10px;
    }

        main .bottom ul li a .img {
            display: block;
            margin: 0 auto;
            width: 100px;
            height: 100px;
            margin: 10px auto;
            background-color: #E8EBEF;
            border-radius: 100%;
            transition: all 0.4s ease-in-out;
        }

        main .bottom ul li a:hover .img {
            width: 120px;
            height: 120px;
            margin: 0 auto;
        }

        main .bottom ul li a .h4 {
            color: #20973E;
            font-weight: bold;
            font-size: 1.2em;
        }

        main .bottom ul li a .p {
            text-align: left;
            padding: 0 10px;
            box-sizing: border-box;
        }

main .index_box .index_top {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .index_box .index_top {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    main .index_box .index_top {
        grid-template-columns: 1fr;
    }
}

main .index_box .index_top .left {
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    border-radius: 0.4em;
    padding: 30px;
    position: relative;
}

    main .index_box .index_top .left img {
        margin: 40px 0;
    }

@media screen and (max-width: 768px) {
    main .index_box .index_top .left img {
        max-width: 100%;
        margin: 0px;
        margin-bottom: 20px;
    }
}

main .index_box .index_top .left img.float-updown {
    animation: floatUpDown 3s ease-in-out infinite;
}

main .index_box .index_top .left .btn-greens {
    position: absolute;
    bottom: 160px;
    right: 60px;
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .left .btn-greens {
        position: initial;
        text-align: center;
        margin-bottom: 20px;
    }
}

main .index_box .index_top .left .btn-greens a {
    font-size: 1.4em;
    font-weight: bold;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
    padding: 5px 60px !important;
}

main .index_box .index_top .left p {
    color: #CC0000;
}

main .index_box .index_top .right {
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    border-radius: 0.4em;
    padding: 30px;
}

    main .index_box .index_top .right .title {
        font-size: 1.2em;
        font-weight: bold;
    }

    main .index_box .index_top .right .index_material .h3 {
        flex: 0 0 150px;
        margin-top: 10px;
        color: #20973E;
    }

    main .index_box .index_top .right .index_material ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .index_box .index_top .right .index_material ul {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul {
        grid-template-columns: 1fr;
    }
}

main .index_box .index_top .right .index_material ul li.full {
    grid-column: 1/-1;
}

main .index_box .index_top .right .index_material ul li.name {
    display: flex;
    align-items: center;
}

    main .index_box .index_top .right .index_material ul li.name label {
        flex: 0 0 150px;
        text-align: right;
    }

main .index_box .index_top .right .index_material ul li.birthday {
    display: flex;
    align-items: center;
}

    main .index_box .index_top .right .index_material ul li.birthday label {
        flex: 0 0 150px;
        text-align: right;
    }

    main .index_box .index_top .right .index_material ul li.birthday .input {
        flex: 1;
    }

        main .index_box .index_top .right .index_material ul li.birthday .input .time {
            width: 100%;
        }

main .index_box .index_top .right .index_material ul .verification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul .verification {
        flex-wrap: wrap;
    }
}

main .index_box .index_top .right .index_material ul .verification label {
    flex: 0 0 130px;
    color: #20973E;
}

main .index_box .index_top .right .index_material ul .verification .number_box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 5px;
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul .verification .number_box {
        position: relative;
    }
}

main .index_box .index_top .right .index_material ul .verification .number_box .number {
    width: 100%;
}

    main .index_box .index_top .right .index_material ul .verification .number_box .number input {
        width: 100%;
        padding-right: 40px; /* 預留空間給眼睛按鈕 */
        box-sizing: border-box;
    }

        main .index_box .index_top .right .index_material ul .verification .number_box .number input[type=password], main .index_box .index_top .right .index_material ul .verification .number_box .number input[type=text] {
            margin: 10px 0;
        }

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul .verification .number_box .number input[type=password], main .index_box .index_top .right .index_material ul .verification .number_box .number input[type=text] {
        margin: 0px;
    }
}

main .index_box .index_top .right .index_material ul .verification .number_box .number p {
    position: absolute;
    color: #CC0000;
    font-size: 0.8em;
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul .verification .number_box .number p {
        left: 0px;
        position: inherit;
    }
}

main .index_box .index_top .right .index_material ul .verification .number_box .mail, main .index_box .index_top .right .index_material ul .verification .number_box .phone {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul .verification .number_box .mail, main .index_box .index_top .right .index_material ul .verification .number_box .phone {
        flex: 0 0 130px;
    }
}

main .index_box .index_top .right .index_material ul .verification .number_box .mail input, main .index_box .index_top .right .index_material ul .verification .number_box .phone input {
    margin: 0px 5px;
}

main .index_box .index_top .right .index_material ul .verification .number_box .mail label, main .index_box .index_top .right .index_material ul .verification .number_box .phone label {
    flex: 0 0 98px;
    color: inherit;
}

main .index_box .index_top .right .index_material ul .verification .number_box input {
    border: none;
    border-bottom: 1px solid #e4e4e4;
    border-radius: 0px;
    padding: 10px 5px;
}

    main .index_box .index_top .right .index_material ul .verification .number_box input.w200 {
        width: 200px;
    }

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .index_box .index_top .right .index_material ul .verification .number_box input.w200 {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul .verification .number_box input.w200 {
        width: 100%;
    }
}

main .index_box .index_top .right .index_material ul .verification a {
    flex: 0 0 80px;
    text-decoration: underline;
}

    main .index_box .index_top .right .index_material ul .verification a:hover {
        text-decoration: none;
        color: #20973E;
    }

main .index_box .index_top .right .index_material ul .verification .relative {
    position: relative;
}

main .index_box .index_top .right .index_material ul .verification .v_box {
    display: flex;
    align-items: center;
}

    main .index_box .index_top .right .index_material ul .verification .v_box a {
        width: 30px;
        height: 30px;
        margin: 10px;
        background-repeat: no-repeat;
        background-position: center;
    }

        main .index_box .index_top .right .index_material ul .verification .v_box a.voice {
            flex: 0 0 30px;
            background-image: url(../images/svg/voice.svg);
        }

        main .index_box .index_top .right .index_material ul .verification .v_box a.renew {
            flex: 0 0 30px;
            background-image: url(../images/svg/renew.svg);
        }

main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye, main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye-slash {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye, main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye-slash {
        top: 0px;
    }
}

main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye:before, main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye-slash:before {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    width: 42px;
    height: 50px;
    display: block;
    background-size: 25px;
}

main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye:focus, main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye-slash:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye:before {
    background-image: url(../images/svg/eye_close.svg);
}

main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye-slash:before {
    background-image: url(../images/svg/eye_open.svg);
}

main .index_box .index_top .right .index_material ul .verification i.fas.fa-eye-slash:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .index_box .index_top .right .index_material ul .verification .checkbox {
    width: 170px;
}

main .index_box .index_top .right .index_material ul .verification img {
    height: 45px;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .index_box .index_top .right .index_material ul li.btn-Square a {
        width: inherit !important;
    }
}

@media screen and (max-width: 768px) {
    main .index_box .index_top .right .index_material ul li.btn-Square a {
        width: inherit !important;
    }
}

main .index_box .index_top .right .index_material .btn-greens {
    text-align: center;
    margin: 10px 0;
}

main .index_box .index_bottom ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .index_box .index_bottom ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 768px) {
    main .index_box .index_bottom ul {
        grid-template-columns: 1fr;
    }
}

main .index_box .index_bottom ul li {
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 20px;
    border-radius: 0.4em;
}

    main .index_box .index_bottom ul li a {
        display: flex;
        flex-direction: column;
        transition: 300ms;
    }

        main .index_box .index_bottom ul li a:hover {
            transform: translateY(-5px);
        }

            main .index_box .index_bottom ul li a:hover img {
                background-color: #e2f1e6;
                max-width: 130px;
            }

        main .index_box .index_bottom ul li a img {
            background-color: #E8EBEF;
            border-radius: 100px;
            width: 140px;
            margin: 0 auto;
            text-align: center;
            display: block;
        }

            main .index_box .index_bottom ul li a img.float-updown {
                animation: floatUpDown 3s ease-in-out infinite;
            }

        main .index_box .index_bottom ul li a span {
            color: #20973E;
            font-weight: bold;
            font-size: 1.2em;
            text-align: center;
            margin: 0 10px;
        }

        main .index_box .index_bottom ul li a p {
            line-height: 1.5;
        }

main .content {
    background-color: #ffffff;
    border-radius: 0.4em;
    padding-bottom: 40px;
}

    main .content .step {
        width: 60%;
        margin: 0 auto;
    }

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step {
        width: 100%;
    }
}

@media screen and (max-width: 768px) and (min-width: 561px) {
    main .content .step {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    main .content .step {
        width: 100%;
    }
}

main .content .step ul {
    border-collapse: separate;
    display: table;
    margin-left: 0px;
    position: relative;
    table-layout: fixed;
    text-align: center;
    vertical-align: middle;
    padding-left: 0;
    padding-top: 20px;
}

    main .content .step ul li {
        display: table-cell;
        position: relative;
        float: none;
        padding: 0;
        width: 1%;
    }

        main .content .step ul li:after {
            background-color: #CCC;
            content: "";
            display: block;
            height: 1px;
            position: absolute;
            width: 100%;
            top: 32px;
        }

        main .content .step ul li:after {
            left: 50%;
        }

        main .content .step ul li:last-child:after {
            display: none;
        }

        main .content .step ul li .step1, main .content .step ul li .step2, main .content .step ul li .step3, main .content .step ul li .step4 {
            border: 1px solid #CCC;
        }

            main .content .step ul li .step1 a, main .content .step ul li .step2 a, main .content .step ul li .step3 a, main .content .step ul li .step4 a {
                display: block;
            }

                main .content .step ul li .step1 a:hover, main .content .step ul li .step2 a:hover, main .content .step ul li .step3 a:hover, main .content .step ul li .step4 a:hover {
                    cursor: pointer;
                }

            main .content .step ul li .step1 a {
                background-image: url(../images/svg/g_step01.svg);
            }

            main .content .step ul li .step2 a {
                background-image: url(../images/svg/g_step02.svg);
            }

            main .content .step ul li .step3 a {
                background-image: url(../images/svg/g_step03.svg);
            }

            main .content .step ul li .step4 a {
                background-image: url(../images/svg/g_step04.svg);
            }

        main .content .step ul li.active:after {
            background-color: #20973E;
            content: "";
            display: block;
            height: 1px;
            position: absolute;
            width: 100%;
            top: 32px;
            width: 0%;
            animation: drawLine 1s ease-out forwards;
        }

        main .content .step ul li.active:after {
            left: 50%;
        }

        main .content .step ul li.active:last-child:after {
            display: none;
        }

        main .content .step ul li.active .caption {
            color: #20973E;
            font-weight: bold;
        }

        main .content .step ul li.active .step1, main .content .step ul li.active .step2, main .content .step ul li.active .step3, main .content .step ul li.active .step4 {
            border: 1px solid #20973E;
            background-color: #20973E;
        }

            main .content .step ul li.active .step1 a, main .content .step ul li.active .step2 a, main .content .step ul li.active .step3 a, main .content .step ul li.active .step4 a {
                display: block;
            }

                main .content .step ul li.active .step1 a:hover, main .content .step ul li.active .step2 a:hover, main .content .step ul li.active .step3 a:hover, main .content .step ul li.active .step4 a:hover {
                    cursor: pointer;
                }

            main .content .step ul li.active .step1 a {
                background-image: url(../images/svg/w_step01.svg);
            }

            main .content .step ul li.active .step2 a {
                background-image: url(../images/svg/w_step02.svg);
            }

            main .content .step ul li.active .step3 a {
                background-image: url(../images/svg/w_step03.svg);
            }

            main .content .step ul li.active .step4 a {
                background-image: url(../images/svg/w_step04.svg);
            }

        main .content .step ul li .caption {
            color: #333333;
            font-weight: normal;
        }

    main .content .step ul .caption {
        color: #CCC;
        padding: 11px 16px;
    }

main .content .step_content {
    padding: 20px 50px 50px 50px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    main .content .step_content {
        padding: 20px 30px 50px 30px;
    }
}

main .content .step_content b {
    font-weight: bold;
    color: #20973E;
    margin: 10px 0;
    display: block;
    position: relative;
    padding-left: 25px;
}

    main .content .step_content b:before {
        content: "";
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent #20973E;
        top: 5px;
    }

main .content .step_content .apply .h3 {
    text-align: center;
    font-size: 1.6em;
    font-weight: bold;
    padding: 10px;
    margin-top: 20px;
}

main .content .step_content .apply ul {
    text-align: right;
}

    main .content .step_content .apply ul li {
        display: inline-block;
    }

        main .content .step_content .apply ul li a {
            position: relative;
            border: #E8EBEF solid 1px;
            border-radius: 0.4em;
            padding-left: 30px !important;
        }

            main .content .step_content .apply ul li a::after {
                content: "";
                position: absolute;
                left: 0px;
                background-color: #ffffff;
                color: #20973E;
                width: 33px;
                height: 30px;
                border-radius: 20px;
                text-align: center;
                font-weight: bold;
            }

            main .content .step_content .apply ul li a:hover {
                color: inherit;
            }

        main .content .step_content .apply ul li.open a::after {
            content: "━";
            font-size: 1em;
        }

        main .content .step_content .apply ul li.close a::after {
            content: "╋";
            font-size: 0.8em;
        }

main .content .step_content .apply span {
    color: #20973E;
    font-weight: bold;
    display: block;
    margin: 20px 0;
}

main .content .step_content .apply .agree {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

    main .content .step_content .apply .agree label a {
        text-decoration: underline;
    }

main .content .step_content .illustrate {
    background-color: #F3F3F3;
    padding: 20px 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    align-items: center;
}

@media screen and (max-width: 560px) {
    main .content .step_content .illustrate {
        padding: 20px;
    }
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    [lang=en] main .content .step_content .illustrate {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    [lang=en] main .content .step_content .illustrate {
        flex-direction: column;
    }
}

main .content .step_content .illustrate p.bold {
    font-weight: bold;
    font-size: 1.3em;
}

main .content .step_content .illustrate .case {
    display: flex;
    align-items: center;
    gap: 10px;
}

    main .content .step_content .illustrate .case p {
        width: 120px;
    }

    main .content .step_content .illustrate .case select {
        width: 100px;
    }

    main .content .step_content .illustrate .case button {
        border-radius: 5px !important;
    }

    main .content .step_content .illustrate .case input {
        border-radius: 5px !important;
        padding: 5px 20px !important;
        width: inherit;
    }

main .content .step_content .qa_box ul li .qa {
    margin-top: 10px;
}

    main .content .step_content .qa_box ul li .qa .question {
        background-color: #E8EBEF;
        padding: 10px;
        font-weight: bold;
    }

        main .content .step_content .qa_box ul li .qa .question a {
            display: block;
            position: relative;
        }

            main .content .step_content .qa_box ul li .qa .question a:after {
                content: "╋";
                position: absolute;
                right: 0px;
                background-color: #ffffff;
                color: #20973E;
                width: 33px;
                height: 30px;
                border-radius: 20px;
                text-align: center;
                font-weight: bold;
                font-size: 0.8em;
                padding-top: 3px;
                transition: transform 0.4s ease;
            }

    main .content .step_content .qa_box ul li .qa .answer {
        border: 1px solid #e4e4e4;
        border-top: none;
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.5s ease, opacity 0.4s ease;
        height: 0;
    }

    main .content .step_content .qa_box ul li .qa.is-active .question a:after {
        content: "━";
        transform: rotate(180deg);
    }

    main .content .step_content .qa_box ul li .qa.is-active .answer {
        padding: 10px;
        transform: scaleY(1);
        opacity: 1;
        visibility: visible;
        height: auto;
    }

main .content .step_content .account_list {
    width: calc(100% - 50px);
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    main .content .step_content .account_list {
        width: 100%;
        margin-bottom: 20px;
    }
}

main .content .step_content .account_list > p {
    color: #CC0000;
}

main .content .step_content .account_list ul {
    margin: 0;
    padding: 0;
}

    main .content .step_content .account_list ul li {
        display: flex;
        margin: 10px 0;
    }

main .content .step_content .material .h3 {
    flex: 0 0 150px;
    margin: 10px 0;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .material ul.gap10 {
        gap: 10px;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul.gap10 {
        gap: 10px;
    }
}

main .content .step_content .material ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .material ul {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

main .content .step_content .material ul li.name {
    display: flex;
    align-items: center;
}

    main .content .step_content .material ul li.name label {
        flex: 0 0 150px;
        text-align: right;
    }

main .content .step_content .material ul li.birthday {
    display: flex;
    align-items: center;
}

    main .content .step_content .material ul li.birthday label {
        flex: 0 0 150px;
        text-align: right;
    }

    main .content .step_content .material ul li.birthday .input {
        flex: 1;
    }

        main .content .step_content .material ul li.birthday .input .time {
            width: 100%;
        }

main .content .step_content .material ul .verification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul .verification {
        flex-wrap: wrap;
    }
}

main .content .step_content .material ul .verification label {
    flex: 0 0 200px;
    text-align: right;
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul .verification label {
        text-align: left;
    }
}

main .content .step_content .material ul .verification .number_box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 5px;
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul .verification .number_box {
        position: relative;
    }
}

main .content .step_content .material ul .verification .number_box .number {
    width: 100%;
}

    main .content .step_content .material ul .verification .number_box .number input {
        width: 100%;
        padding-right: 40px; /* 預留空間給眼睛按鈕 */
        box-sizing: border-box;
    }

        main .content .step_content .material ul .verification .number_box .number input[type=password], main .content .step_content .material ul .verification .number_box .number input[type=text] {
            margin: 10px 0;
        }

@media screen and (max-width: 768px) {
    main .content .step_content .material ul .verification .number_box .number input[type=password], main .content .step_content .material ul .verification .number_box .number input[type=text] {
        margin: 0px;
    }
}

main .content .step_content .material ul .verification .number_box .number p {
    position: absolute;
    color: #CC0000;
    font-size: 0.8em;
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul .verification .number_box .number p {
        left: 0px;
        position: inherit;
    }
}

main .content .step_content .material ul .verification .number_box .mail, main .content .step_content .material ul .verification .number_box .phone {
    flex: 0 0 200px;
    text-align: right;
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul .verification .number_box .mail, main .content .step_content .material ul .verification .number_box .phone {
        flex: 0 0 130px;
    }
}

main .content .step_content .material ul .verification .number_box .mail input, main .content .step_content .material ul .verification .number_box .phone input {
    margin: 20px 0;
}

main .content .step_content .material ul .verification a {
    flex: 0 0 80px;
    text-decoration: underline;
}

[lang=en] main .content .step_content .material ul .verification a {
    flex: 0 0 170px;
}

main .content .step_content .material ul .verification a:hover {
    text-decoration: none;
    color: #20973E;
}

main .content .step_content .material ul .verification .relative {
    position: relative;
}

main .content .step_content .material ul .verification .v_box {
    display: flex;
    align-items: center;
}

    main .content .step_content .material ul .verification .v_box a {
        width: 30px;
        height: 30px;
        margin: 10px;
        background-repeat: no-repeat;
        background-position: center;
    }

        main .content .step_content .material ul .verification .v_box a.voice {
            flex: 0 0 30px;
            background-image: url(../images/svg/voice.svg);
        }

        main .content .step_content .material ul .verification .v_box a.renew {
            flex: 0 0 30px;
            background-image: url(../images/svg/renew.svg);
        }

main .content .step_content .material ul .verification i.fas.fa-eye, main .content .step_content .material ul .verification i.fas.fa-eye-slash {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul .verification i.fas.fa-eye, main .content .step_content .material ul .verification i.fas.fa-eye-slash {
        top: 0px;
    }
}

main .content .step_content .material ul .verification i.fas.fa-eye:before, main .content .step_content .material ul .verification i.fas.fa-eye-slash:before {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    width: 42px;
    height: 50px;
    display: block;
    background-size: 25px;
}

main .content .step_content .material ul .verification i.fas.fa-eye:focus, main .content .step_content .material ul .verification i.fas.fa-eye-slash:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .content .step_content .material ul .verification i.fas.fa-eye:before {
    background-image: url(../images/svg/eye_close.svg);
}

main .content .step_content .material ul .verification i.fas.fa-eye:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .content .step_content .material ul .verification i.fas.fa-eye-slash:before {
    background-image: url(../images/svg/eye_open.svg);
}

main .content .step_content .material ul .verification i.fas.fa-eye-slash:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .content .step_content .material ul .verification .checkbox {
    width: 170px;
}

main .content .step_content .material ul .verification img {
    height: 45px;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .material ul li.btn-Square a {
        width: inherit !important;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .material ul li.btn-Square a {
        width: inherit !important;
    }
}

main .content .step_content .material.one ul {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .material.two ul {
        grid-template-columns: 1fr 1fr;
    }

    [lang=en] main .content .step_content .material.two ul {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .material.two ul {
        grid-template-columns: 1fr;
    }
}

main .content .step_content .p p a {
    text-decoration: underline;
}

    main .content .step_content .p p a:hover {
        color: #20973E;
        text-decoration: none;
    }

main .content .step_content .list {
    display: block;
    background-color: #F3F3F3;
    padding: 30px 50px;
    color: #CC0000;
    margin-top: 20px;
}

    main .content .step_content .list ul {
        list-style-type: auto;
        margin-left: 40px;
    }

main .content .step_content .title {
    background-color: #F3F3F3;
    border-left: #20973E solid 5px;
    display: flex;
    align-items: center;
    padding: 20px;
    margin: 10px 0;
}

@media screen and (max-width: 768px) {
    main .content .step_content .title {
        display: inline-block;
        width: 100%;
    }
}

main .content .step_content .title .h3 {
    margin-right: 10px;
    font-weight: bold;
    color: #333333;
    font-size: 1.2em;
}

main .content .step_content .title p {
    font-size: 0.8em;
    padding-left: 10px;
}

main .content .step_content .p_text {
    background-color: #F3F3F3;
    padding: 20px;
}

main .content .step_content .form_box ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-bottom: 35px;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .form_box ul {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul {
        grid-template-columns: 1fr;
    }
}

main .content .step_content .form_box ul li {
    width: 100%;
    margin: 5px 0px;
    gap: 10px;
}

    main .content .step_content .form_box ul li .form.w205 > label {
        flex: 0 0 205px;
    }

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form.w205 > label {
        flex: 0 0 100%;
    }
}

main .content .step_content .form_box ul li .form.w205 > .number_box {
    flex: 1;
}

    main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye, main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye-slash {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        cursor: pointer;
    }

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye, main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye-slash {
        top: 35px;
    }
}

main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye:before, main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye-slash:before {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    width: 42px;
    height: 50px;
    display: block;
    background-size: 25px;
}

main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye:focus, main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye-slash:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye:before {
    background-image: url(../images/svg/eye_close.svg);
}

main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye-slash:before {
    background-image: url(../images/svg/eye_open.svg);
}

main .content .step_content .form_box ul li .form.w205 > .number_box i.fas.fa-eye-slash:focus {
    outline-width: 3px;
    outline-color: #38adeb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

main .content .step_content .form_box ul li .form {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form {
        display: block;
    }
}

main .content .step_content .form_box ul li .form > label {
    flex: 0 0 172px;
    padding-left: 10px;
    text-align: right;
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form > label {
        text-align: left;
    }
}

main .content .step_content .form_box ul li .form > select {
    flex: 1;
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form > select {
        width: 100%;
        margin-bottom: 5px;
    }
}

main .content .step_content .form_box ul li .form input disabled {
    color: #7B7B7B;
}

main .content .step_content .form_box ul li .form input.aspNetDisabled {
    color: #CCC;
}

main .content .step_content .form_box ul li .form input.readonly {
    color: #CCC;
    background-color: #fafafa;
}

main .content .step_content .form_box ul li .form input.time::after {
    top: 10px;
}

main .content .step_content .form_box ul li .form .text {
    width: 100%;
}

    main .content .step_content .form_box ul li .form .text p {
        bottom: 0px;
    }

main .content .step_content .form_box ul li .form input {
    text-align: left;
}

main .content .step_content .form_box ul li .form ol {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form ol {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form ol select {
        margin-bottom: 5px;
    }
}

main .content .step_content .form_box ul li .form ol li {
    width: inherit;
    margin: 5px 0px;
    display: flex;
    align-items: center;
}

    main .content .step_content .form_box ul li .form ol li label {
        text-align: left !important;
    }

main .content .step_content .form_box ul li .form .upload {
    width: 100%;
}

    main .content .step_content .form_box ul li .form .upload .file_box {
        border: #CCC solid 1px;
        border-radius: 0.4em;
        height: 300px;
        margin-bottom: 10px;
        background-image: url(../images/files_upload.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 300px;
    }

    main .content .step_content .form_box ul li .form .upload .illustrate {
        background-color: #F3F3F3;
        padding: 20px;
    }

        main .content .step_content .form_box ul li .form .upload .illustrate p {
            word-break: break-all;
        }

        main .content .step_content .form_box ul li .form .upload .illustrate a {
            text-decoration: underline;
        }

    main .content .step_content .form_box ul li .form .upload div:focus {
        border-color: #66afe9;
        outline: 0;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
    }

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even {
        flex-wrap: wrap;
    }
}

main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd .delbtn input, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even .delbtn input {
    text-align: center;
}

main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd .filename, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even .filename {
    flex: 0 0 50%;
    display: block;
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd .filename, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even .filename {
        flex: 0 0 100%;
    }
}

main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd .filesize, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even .filesize {
    flex: 0 0 100px;
}

main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd .progressBar, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even .progressBar {
    text-align: center;
}

    main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd .progressBar div, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even .progressBar div {
        width: initial !important;
        text-align: center;
    }

main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.odd .status, main .content .step_content .form_box ul li .form .upload #StatusArea .statusbar.even .status {
    width: inherit;
}

main .content .step_content .form_box ul li .form span a {
    text-decoration: underline;
    color: #20973E;
}

    main .content .step_content .form_box ul li .form span a:hover {
        text-decoration: none;
    }

main .content .step_content .form_box ul li.full {
    grid-column: 1/-1;
}

    main .content .step_content .form_box ul li.full .form {
        position: relative;
    }

        main .content .step_content .form_box ul li.full .form ol li select {
            flex: 0 0 100px;
        }

        main .content .step_content .form_box ul li.full .form ol li input {
            flex: 1;
        }

        main .content .step_content .form_box ul li.full .form ol li + li {
            width: 100%;
        }

        main .content .step_content .form_box ul li.full .form > p {
            position: absolute;
            bottom: -30px;
            left: 180px;
            color: #CC0000;
            font-size: 0.9em;
        }

@media screen and (max-width: 768px) and (min-width: 561px) {
    main .content .step_content .form_box ul li.full .form > p {
        left: 0px;
        bottom: -30px;
        line-height: 1;
    }
}

@media screen and (max-width: 560px) {
    main .content .step_content .form_box ul li.full .form > p {
        left: 0px;
        bottom: -40px;
        line-height: 1;
    }
}

[lang=en] main .content .step_content .form_box ul li.full .form > p {
    top: 55px;
    line-height: 1.2;
    left: 215px;
}

@media screen and (max-width: 768px) {
    [lang=en] main .content .step_content .form_box ul li.full .form > p {
        left: 0px;
        top: 85px;
    }
}

main .content .step_content .form_box ul li.inhert {
    grid-column: 1/-1;
}

    main .content .step_content .form_box ul li.inhert .form ol li + li {
        width: inhert;
    }

main .content .step_content .form_box.one ul {
    grid-template-columns: 1fr;
}

main .content .step_content .form_box.three ul {
    grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .form_box.three ul {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box.three ul {
        grid-template-columns: 1fr;
    }
}

main .content .step_content .form_box.three ul li .form label {
    flex: inherit;
    padding: 0;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .form_box.three ul li .form label {
        flex: 0 0 160px;
        text-align: left;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .form_box.three ul li .form label {
        flex: 0 0 160px;
        text-align: left;
    }
}

main .content .step_content .border .h3 {
    font-weight: bold;
    padding-left: 25px;
}

main .content .step_content .border ul {
    border: 1px solid #e4e4e4;
    padding: 20px;
    margin: 10px 0;
}

main .content .step_content .gray {
    background-color: #F3F3F3;
    padding: 30px;
    margin: 20px 0;
}

[lang=en] main .content .step_content .gray {
    margin-top: 50px;
}

@media screen and (max-width: 768px) {
    [lang=en] main .content .step_content .gray {
        margin-top: 80px;
    }
}

main .content .step_content .gray ul li .form {
    margin: 20px 0;
}

    main .content .step_content .gray ul li .form ol {
        display: flex;
        align-items: center;
    }

@media screen and (max-width: 768px) {
    main .content .step_content .gray ul li .form ol {
        display: inherit;
    }
}

[lang=en] main .content .step_content .gray ul li .form ol {
    flex-wrap: wrap;
}

main .content .step_content .gray ul li .form ol li .checkbox {
    display: flex;
    align-items: center;
}

main .content .step_content .gray ul li .form ol li p {
    margin-top: 10px;
    margin-left: 10px;
}

main .content .step_content .complaint {
    margin-top: 15px;
}

    main .content .step_content .complaint .h3 {
        border-bottom: #CCC solid 1px;
        line-height: 2;
        margin-bottom: 10px;
    }

        main .content .step_content .complaint .h3 a {
            position: relative;
            display: block;
            transition: 150ms;
        }

            main .content .step_content .complaint .h3 a::before {
                content: "";
                position: absolute;
                display: block;
                width: 25px;
                height: 20px;
                background-image: url(../images/svg/bottom.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 20px;
                right: 10px;
                top: 10px;
                opacity: 0.5;
            }

    main .content .step_content .complaint > .form_box {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
    }

    main .content .step_content .complaint.is-active > .form_box {
        max-height: 1000px;
    }

    main .content .step_content .complaint.is-active .h3 a::before {
        background-image: url(../images/svg/top.svg);
    }

main .content .step_content .appeal_box {
    border: 1px solid #e4e4e4;
    padding: 20px;
    display: flex;
    margin: 20px 0;
}

    main .content .step_content .appeal_box .appeal {
        flex: 1;
    }

        main .content .step_content .appeal_box .appeal ul {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .appeal_box .appeal ul {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .appeal_box .appeal ul {
        grid-template-columns: 1fr;
    }
}

main .content .step_content .appeal_box .appeal ul li {
    display: flex;
    gap: 10px;
    padding: 10px;
}

@media screen and (max-width: 768px) {
    main .content .step_content .appeal_box .appeal ul li {
        flex-wrap: wrap;
    }
}

main .content .step_content .appeal_box .appeal ul li span {
    flex: 0 0 120px;
    text-align: right;
}

@media screen and (max-width: 768px) {
    main .content .step_content .appeal_box .appeal ul li span {
        flex: inherit;
    }
}

[lang=en] main .content .step_content .appeal_box .appeal ul li span {
    flex: 0 0 180px;
}

@media screen and (max-width: 768px) {
    [lang=en] main .content .step_content .appeal_box .appeal ul li span {
        flex: inherit;
    }
}

main .content .step_content .appeal_box .appeal ul li.border-bottom {
    border-bottom: 1px solid #e4e4e4;
}

main .content .step_content .appeal_box .appeal ul li.border-top {
    border-top: 1px solid #e4e4e4;
}

main .content .step_content .appeal_box .appeal ul li.one {
    grid-column: 1/-1; /* 跨越全部欄位 */
    gap: 10px;
}

    main .content .step_content .appeal_box .appeal ul li.one .one_box {
        display: flex;
    }

        main .content .step_content .appeal_box .appeal ul li.one .one_box p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 主要作為 fallback/無動畫情況 */
            overflow: hidden;
        }

        main .content .step_content .appeal_box .appeal ul li.one .one_box a {
            display: block;
            flex: 0 0 40px;
            margin: 0 20px;
            background-image: url(../images/svg/bottom.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 20px;
            text-indent: -9999px;
            width: 40px;
            height: 30px;
            background-color: #F3F3F3;
            border-radius: 0.2em;
        }

        main .content .step_content .appeal_box .appeal ul li.one .one_box.is-active p {
            -webkit-line-clamp: inherit;
        }

        main .content .step_content .appeal_box .appeal ul li.one .one_box.is-active a {
            background-image: url(../images/svg/top.svg);
        }

main .content .step_content .appeal_box .btn_box {
    flex: 0 0 50px;
    margin: 0px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}

    main .content .step_content .appeal_box .btn_box .btn {
        position: relative;
        margin: 0px;
        background-color: #F3F3F3;
        flex: 1;
    }

        main .content .step_content .appeal_box .btn_box .btn:hover {
            background-color: #20973E;
        }

        main .content .step_content .appeal_box .btn_box .btn a {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
        }

            main .content .step_content .appeal_box .btn_box .btn a:hover {
                filter: brightness(0) invert(1);
            }

        main .content .step_content .appeal_box .btn_box .btn.w50 a {
            height: 50%;
            top: 12.5%;
            left: 25%;
            transform: translate(-25%, 0%);
            margin: 5px 0;
        }

            main .content .step_content .appeal_box .btn_box .btn.w50 a:after {
                top: 45%;
            }

main .content .step_content .ok_box {
    width: 60%;
    margin: 0 auto;
}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .ok_box {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .ok_box {
        width: 100%;
    }
}

main .content .step_content .ok_box .ok {
    display: flex;
    align-items: center;
}

    main .content .step_content .ok_box .ok img {
        flex: 0 0 80px;
        margin-right: 10px;
    }

    main .content .step_content .ok_box .ok p {
        flex: 1;
    }

main .content .step_content .ok_box .file {
    margin-top: 50px;
}

    main .content .step_content .ok_box .file ul {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr 1fr;
    }

        main .content .step_content .ok_box .file ul li a {
            display: block;
            transition: 300ms;
        }

            main .content .step_content .ok_box .file ul li a span {
                width: 160px;
                height: 160px;
                padding: 30px;
                border-radius: 200px;
                display: block;
                margin: 0 auto;
                text-align: center;
            }

@media screen and (max-width: 1360px) and (min-width: 769px) {
    main .content .step_content .ok_box .file ul li a span {
        width: 120px;
        height: 120px;
    }
}

@media screen and (max-width: 768px) {
    main .content .step_content .ok_box .file ul li a span {
        width: 100px;
        height: 100px;
    }
}

main .content .step_content .ok_box .file ul li a span img {
    max-width: 100%;
}

main .content .step_content .ok_box .file ul li a p {
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}

main .content .step_content .ok_box .file ul li a:hover {
    transform: translateY(-5px);
}

main .content .step_content .ok_box .file ul li.print a span {
    background-color: #20973E;
}

main .content .step_content .ok_box .file ul li.pdf a span {
    background-color: #BB3A3A;
}

main .content .step_content .ok_box .file ul li.odt a span {
    background-color: #0862A9;
}

main .btn {
    margin: 20px;
}

    main .btn ul {
        display: flex;
        justify-content: center;
    }

footer {
    position: relative;
}

    footer .simple-text.accesskey {
        position: absolute;
    }

    footer .p {
        padding: 0 20px;
    }

        footer .p p {
            padding: 0px;
        }

label[for=checkbox1],
.check_box {
    display: inline-flex;
    align-items: center;
    width: auto;
}

.check_box {
    margin: 0;
}

.radio_box {
    display: inline-flex;
    align-items: center;
    width: auto;
}

.radio {
    display: inline-flex;
    align-items: center;
}

    .radio input[type=text] {
        width: inherit;
    }

.input > span {
    padding: 5px;
}

input[type=radio] {
    width: 22px !important;
    height: 22px !important;
    margin: 10px;
    accent-color: #20973E;
}

.time:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 30px;
    top: 15px;
    right: 6px;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .time:after {
        top: 10px;
    }
}

input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

select {
    background-color: #ffffff;
    background-image: url(../images/svg/select.svg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    width: 100px;
}

    select:focus, select:active {
        color: #000000;
    }

textarea {
    min-height: 200px;
}

.time {
    position: relative;
}

.required {
    position: relative;
}

    .required:before {
        color: #CC0000;
        content: "*";
        left: -10px;
    }

.settings ul {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
    .settings ul {
        flex-direction: column;
    }
}

.settings ul li {
    width: 100%;
}

    .settings ul li .set_list {
        padding: 20px;
        box-sizing: border-box;
    }

        .settings ul li .set_list .title {
            color: #20973E;
            font-weight: bold;
        }

        .settings ul li .set_list ol {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

@media screen and (max-width: 560px) {
    .settings ul li .set_list ol {
        flex-direction: column;
    }
}

.settings ul li .set_list ol li {
    flex: 0 0 33%;
    padding: 10px;
}

    .settings ul li .set_list ol li select {
        margin: 5px 0;
    }

.settings ul li .set_list .input {
    margin-top: 15px;
}

    .settings ul li .set_list .input .time {
        width: calc(50% - 16px);
    }

.settings ul li.w50 {
    flex: 0 0 49.9%;
}

.settings ul li.w33 {
    flex: 0 0 33.3%;
}

    .settings ul li.w33 a.limited {
        display: inline-block;
        text-indent: -9999px;
        background-image: url(../images/svg/limited.svg);
        width: 45px;
        height: 30px;
    }

        .settings ul li.w33 a.limited:hover {
            animation: upDown 0.5s ease-in-out infinite;
        }