:root {
    --main-color: #285ee4;
    --btn-color: #658ae6;
    --secondary-color: #2E4A8F;
    --font-size: 20px;
    --font-weight: 500;
    --box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

html,
body {
    background: #f7f8fa;
    ;
    width: 100%;
    height: 100%;
}

body {
    overflow-y: auto !important;
}

#app {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

/* .custom-select {
    position: relative;
    font-family: Arial;
}

.custom-select input {
    display: none;
    width: 100%;
    z-index: 2;
    position: absolute;
    width: 100% !important;
    border-radius: 0;
    outline: none;
    border: 0 !important;
}

.custom-select.open_filter input {
    display: block;
    width: calc(100% - 4px) !important;
    top: 2px;
    left: 2px;
}

.custom-select select {
    display: none;
}

.select-selected {
    background-color: #fff;
    border-radius: 8px;
    color: #b4b4b4;
}

.select-selected.select-arrow-active {
    border-radius: 0;
    color: #3d3d3d;
}

.select_changed .select-selected {
    color: #3d3d3d;
}

.select-selected:after {
    position: absolute;
    content: "";
    top: 9px;
    right: 10px;
    width: 0;
    height: 0;
    background-image: url(../images/slk_down_b.svg);
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 9px;
    transform: rotate(180deg);
    transition: .3s;
}

.select-items {
    max-height: 302px;
    overflow: auto;
}

.select-items div,
.select-selected {
    font-size: 20px;
    text-align: center;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, .1) transparent;
    cursor: pointer;
    z-index: 100;
}

.select-selected.select-arrow-active,
.select-selected.select-arrow-active~.select-items>div {
    border-color: transparent transparent #285ee4 transparent;
}

.select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, .1);
}

.select-selected.select-arrow-active {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top: 2px solid #658ae6;
    border-left: 2px solid #658ae6;
    border-right: 2px solid #658ae6;
}

.select-items {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 2px solid #658ae6;
    border-right: 2px solid #658ae6;
    border-bottom: 2px solid #658ae6;
}

.select-items div:last-child {
    border-bottom: 0;
} */

.showDiv {
    position: absolute;
    z-index: 9;
    font-size: 18px;
    padding: 5px 16px 8px 16px;
    text-align: center;
    border-radius: 24px;
    color: #359B9B;
    background-color: white;
    border: 3px solid #359B9B;
    box-shadow: 2px 4px 10px rgb(4 128 128 / 25%);
    transition-duration: 0.6s;
    display: none;
}

#preview {
    z-index: 101;
    position: absolute;
    border: 2px solid #285ee4;
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    display: none;
    color: #fff;
    margin-top: 30px !important;
    margin-left: -230px;
    width: 250px;
    min-height: 250px;
    max-height: 350px;
}

#preview img {
    width: 100%;
    max-height: 350px;
}

.upload_action {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
}

.rdcontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.rdcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.rdcontainer .checkmark {
    position: absolute;
    top: 8px;
    left: 8px;
    height: 20px;
    width: 20px;
    border: 2px solid #285ee4;
    border-radius: 50px;
}

.rdcontainer:hover input~.checkmark {
    background-color: #fff;
    border: 2px solid #285ee4;
}

.rdcontainer input:checked~.checkmark {
    background: #fff;
    border: 2px solid #285ee4;
}

.rdcontainer .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.rdcontainer .outter {
    top: 1px;
    position: absolute;
    left: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: .3s;
}

.rdcontainer .outter:hover {
    background: #E0E7F8;
}

.rdcontainer .outter:active {
    background: #B9C9F4;
}

.rdcontainer input:checked~.outter .checkmark:after {
    display: block;
}

.rdcontainer .checkmark:after {
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #285ee4;
}

.daterangepicker.show-calendar {
    border: 2px solid #285ee4;
    border-radius: 11px;
    box-shadow: 0 3px 6px 0 rgb(0 0 0/16%);
}

.daterangepicker:after {
    top: -5px;
}

.daterangepicker:before {
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc;
}

.daterangepicker:before {
    top: -8px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom: 7px solid #285ee4;
}

.modal .modal-content .input_field label.tb_container.disable {
    color: rgba(0, 0, 0, .3);
}

.tb_container {
    display: block;
    position: relative;
    padding-left: 10px !important;
    padding-top: 10px !important;
    width: 50px !important;
    margin-bottom: 0;
    margin-right: 0 !important;
    text-align: center;
    cursor: pointer;
    font-size: 16px !important;
    text-align-last: center !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tb_container.disable {
    color: rgba(0, 0, 0, .3);
}

.tb_container.disable .checkmark {
    border-color: rgba(0, 0, 0, .4);
}

.tb_container.disable .checkmark:after {
    background: rgba(0, 0, 0, .3);
}

.tb_container.disable::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    left: 0;
    top: 0;
}

.tb_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.tb_container .checkmark {
    position: absolute;
    top: 8px;
    left: 8px;
    height: 20px;
    width: 20px;
    border: 2px solid #285ee4;
    border-radius: 50px;
}

.tb_container:hover input~.checkmark {
    background-color: #fff;
    border: 2px solid #285ee4;
}

.tb_container input:checked~.checkmark {
    background: #fff;
    border: 2px solid #285ee4;
}

.tb_container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.tb_container .outter {
    top: 1px;
    position: relative;
    display: block;
    left: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: .3s;
    margin-right: 0;
    margin-bottom: 5px;
}

.tb_container .outter:hover {
    background: #E0E7F8;
}

.tb_container .outter:active {
    background: #B9C9F4;
}

.tb_container input:checked~.outter .checkmark:after {
    display: block;
}

.tb_container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #285ee4;
}

#tiptop {
    width: 450px;
    border-radius: 20px;
    background: #fff;
    position: absolute;
    padding: 30px 0;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    bottom: 130px;
    left: 20;
}

#tiptopc.enter {
    left: 185;
}

#tiptop.right {
    right: 20;
    left: auto;
}

#tiptop .triangle-with-shadow {
    width: 100px;
    height: 100px;
    overflow: hidden;
    transform: rotate(180deg);
    position: absolute;
    bottom: -100px;
    left: calc(50% - 45px);
}

#tiptop .triangle-with-shadow:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    transform: rotate(45deg);
    top: 75px;
    left: 25px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

#tiptop .triangle-with-shadow:hover,
#tiptop .triangle-with-shadow:hover:after {
    box-shadow: none;
}

#tiptop h3 {
    font-size: 35px;
    text-align: center;
    color: #285ee4;
    margin: 0 0 40px;
    font-weight: 500;
}

#tiptop p {
    font-size: 20px;
    text-align: center;
    color: #285ee4;
    margin: 0 0 30px;
}

#tiptop .confirm {
    display: flex;
    justify-content: center;
}

#tiptop .confirm button {
    margin: 0 20px;
}

#tiptop .confirm button.reset {
    border: 2px solid #285ee4;
    background: #fff;
    color: #285ee4;
}

#tiptop .confirm button.confirm {
    background: #285ee4;
    color: #fff;
}

/* tippy.js */
.i_info {
    content: "";
    background-image: url(../images/info_qm2_v1.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: block;
    width: 16px;
    height: 16px;
    /* position: relative; */
    cursor: pointer;
}

.tippy-box {
    min-width: 200px;
    padding: 6px;
    background-color: #2E4A8F;
    border: 2px solid #2E4A8F;
    color: #fff;
    font-size: 18px;
    border-radius: 12px;
    box-shadow: 3px 3px 6px 0 rgba(0, 90, 90, 0.3);
}

.tippy-box .tippy-arrow {
    color: #2E4A8F;
}

.tippy-content {
    white-space: pre-line;
}

.tippy-box[data-placement^=bottom]>.tippy-arrow {
    top: -3px;
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
    top: -6px;
}

#control_position {
    width: 100%;
    height: 100%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

#app.modal_blur .main-content>div {
    filter: blur(8px);
}

#app.modal_blur~.blocker {
    background: 0 0;
}

.main-content h2.title-text {
    color: #285ee4;
    font-weight: 700;
    font-size: 35px;
    line-height: 52px;
    margin-bottom: 10px;
    max-width: 950px;
    position: relative;
}

.app-title {
    display: flex;
    flex-direction: row;
    position: relative;
    min-width: 328px;
}

.app-title .i_info {
    position: absolute;
    top: 20px;
    left: 144px;
    margin-left: 8px;
}

.main-content #home h2.app-title2 {
    color: #2E4A8F;
    font-weight: 700;
    font-size: 35px;
    line-height: 52px;
    margin-bottom: 10px;
    width: 100%;
    position: relative;
    margin-top: 8px;
    color: #285ee4;
}

.main-content #home .i_info {
    position: relative;
    bottom: 40px;
    right: -320px;
    margin-left: 8px;
}

.main-content #home .add-btn {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    z-index: 2;
    width: 38px;
}

.main-content #home .add-btn img {
    width: 100%;
}

/*教學入口卡片*/
.main-content #instruction1 {
    width: 412px;
    z-index: 99;
    position: absolute;
    left: 1140px;
    top: 567px;
}


.main-content #instruction1 .instruction-card_bg {
    width: 100%;
    padding: 4px 4px 8px 4px;
    background-color: #285ee4;
    border-radius: 15px;
    height: 174px;
    box-shadow: var(--box-shadow);
}

.main-content #instruction1 .instruction-card_bg:hover {
    background-color: #359B9B;
}

/*內部白底修改*/
.main-content #instruction1 .instruction-small-card {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
}

.main-content #instruction1 .instruction-small-card h3 {
    margin: 8px 0 0 8px;
    font-size: 30px;
    color: #285ee4;
}

.main-content #instruction1 img {
    position: absolute;
    top: 0;
    right: 0;
}

.main-content #instruction1 .instruction-text {
    display: flex;
    justify-content: flex-start;
    margin-left: 16px;
}

/*以下是教學入口卡片Rwd的控制*/
@media(max-width: 1617px) {
    .main-content #instruction1 {
        width: 26%;
        right: 48px;
        left: unset;
    }
}

@media(max-width: 1390px) {
    .main-content #instruction1 {
        width: 25%;
    }
}

@media(max-width: 1277px) {
    .main-content #instruction1 {
        width: 83%;
        top: 140px;
        left: 160px;
        right: 16px;
    }
}



@media(max-width: 1140px) {
    .main-content #instruction1 {
        width: 82%;
    }
}

@media(max-width: 1080px) {
    .main-content #instruction1 {
        width: 81%;
    }
}

@media(max-width: 1000px) {
    .main-content #instruction1 {
        width: 80%;
    }
}

@media(max-width: 930px) {
    .main-content #instruction1 {
        width: 95%;
        top: 100px;
        left: 16px;
        right: 16px;
    }
}

@media(max-width: 768px) {
    .main-content #instruction1 {
        width: 95%;
    }
}

@media(max-width: 742px) {
    .main-content #instruction1 {
        width: 94%;
    }
}

@media(max-width: 540px) {
    .main-content #instruction1 {
        width: 92%;
    }
}

@media(max-width: 450px) {
    .main-content #instruction1 {
        width: 90%;
    }
}


.main-content .info_content #instruction2 {
    margin-top: 26px;
}

/*qrcode卡片容器調整*/
.main-content .info_content #instruction2 .inner {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
}



.main-content #instruction2.subscription_msg {
    padding-top: 53px;
}

.main-content #instruction2 .my_package {
    background: #285ee4;
    color: #fff;
    margin: 0 -41 0 150px;
    padding: 0 7px 0 20px;
    height: 44px;
    border-radius: 50px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.main-content #instruction2 .my_package .text {
    display: flex;
    margin-right: auto;
}

.main-content #instruction2 .my_package .renew {
    height: 32px;
    width: 76px;
    border-radius: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #000;
    background-color: #fff;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

#home .sc-components {
    display: flex;
}

.sc-components_content {
    margin-right: 20px;
}

.sc-components_nav {
    overflow-x: hidden;
    height: 176px;
}

.sc-components_nav .mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal {
    margin: 0 0;
}

.sc-components_nav .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    background: #ccc;
    border-radius: 16px;
    height: 5px;
}

.sc-components_nav .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #658ae6;
    margin: 0;
    height: 100%;
}

.sc-components_nav .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.sc-components_nav .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: #285ee4;
}

#home .sc-components .sc-box {
    margin-right: 10px;
    margin-bottom: 15px;
    background-position: center 0% !important;
    background-size: 150px !important;
    min-width: 150px;
}

.sc-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
    position: relative;
}

.sc-container .card {
    width: calc(33.333% - 20px);
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    margin-right: 20px;
    margin-bottom: 20px;
    background: #fff;
}

.main-content .info_content #home .sc-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* margin-bottom: 40px */
}

.main-content #home h2.app-title2 {
    font-weight: 700;
    font-size: 35px;
    line-height: 52px;
    margin-bottom: 10px;
    width: 100%;
    position: relative;
    margin-top: 8px;
    color: #285ee4;
}

.main-content .main_intro .main_chart .card_section1 .card {
    min-height: 220px;
}

.main-content .main_intro .main_chart .card_section1 .card1,
.card2,
.card3 {
    width: 30%;
    min-width: calc(33.333% - 20px);
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    margin-right: 20px;
    margin-bottom: 20px;
    background: #fff;
    overflow: hidden;
    height: 170px;
}

.main-content .info_content #home .sc-container .card_section2 {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.card_section2_estimate {
    width: 100%;
    display: flex;
    flex-direction: row;
    max-height: 220px;
}

.main-content .info_content #home .sc-container .card4 {
    width: 30%;
    min-width: calc(33.333% - 20px);
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    margin-right: 20px;
    margin-bottom: 34px;
    background: #fff;
}

.main-content .main_intro {
    width: 100%;
    max-width: 1400px;
}

.main_intro_section .my_package.type1 {
    background: #ff8000;
}

.main_intro_section .my_package .text_type1 {
    margin: 0 16px;
}

.main-content .main_intro_section {
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.main-content .main_intro .main_chart {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.main-content .main_intro .main_chart .card_section1 {
    width: 70%;
    display: flex;
    max-height: 220px;
    position: relative;
}

.main-content .main_intro .main_chart .chart_section {
    width: 30%;
    display: flex;
    box-sizing: border-box;
}

.chart_section .myChart .chart_select .chart-selection {
    line-height: 1.88;
    margin-right: 10px;
    font-size: 20px;
    color: #e1e1e1;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    border: none;
    background: none;
    text-transform: uppercase;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: color;
    user-select: none;
}

.chart_section .myChart .chart_select .chart-selection:focus,
.chart_section .myChart .chart_select .chart-selection:hover {
    color: #e1e1e1;
    ;
}

.chart_section .myChart .chart_select .chart-selection:focus:after,
.chart_section .myChart .chart_select .chart-selection:hover:after {
    width: 100%;
    left: 0%;
}

.chart_section .myChart .chart_select .chart-selection:after {
    content: "";
    pointer-events: none;
    bottom: 2px;
    left: 50%;
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #285ee4;
    ;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: width, left;
}

.chart_section .myChart .chart_select .chart-selection.selected {
    line-height: 1.88;
    text-align: left;
    color: #285ee4;
}

.chart_section .myChart .chart_select .chart-selection#category-expense {
    margin-left: 10px;
}

.main-content .main_intro .main_chart .chart_section .myChart {
    width: 100%;
    min-width: calc(100% - 20px);
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    background: #fff;
    border: 4px solid #285ee4;
    padding: 0 0 20px;
}

.chart_section .myChart .chart_content_title {
    width: 100%;
    height: 50px;
    color: #285ee4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-weight: 500;
}

.chart_section .myChart .chart_content_title .info_radius_grey {
    color: #285ee4;
    text-align: left;
    margin-left: 12px;
    font-size: 20px;
    font-weight: 500;
}

.chart_section .myChart .chart_select {
    display: flex;
    justify-content: center;
    margin-right: 16px;
    align-items: center;
}

#expenseCategory_cate,
#incomeCategory_cate {
    position: absolute;
    bottom: -12px;
    right: 16px;
    color: #285ee4;
}

.chart_section .myChart .chart_content_title .category_sep {
    margin: 0 8px;
}

.chart_section .myChart .chart_content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart_section .myChart .chart_content .expense_chart,
.chart_section .myChart .chart_content .income_chart {
    width: 250px !important;
    height: 250px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.noData_title {
    font-size: 18px;
    margin-bottom: 16px;
    color: #285ee4;
    letter-spacing: 2px;
    line-height: 1.2;
}

.noData_title a {
    color: blue;
    text-decoration: underline;
}

.noData_img {
    object-fit: cover;
}

.chart_section .myChart .chart_content #expenseCategory_desc,
#incomeCategory_desc {
    margin-top: 8px;
}

.instruction-card {
    max-width: 396px;
    width: 100%;
    min-height: 804px;
    padding: 42px 50px 85px 63px;
    border-radius: 45px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    background-color: #fff;
}

.card1 {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
}

.card1 .sc-data-box {
    padding: 16px;
    background: #fff;
    color: #d16a01;
    height: 138px;
}

.card1 .sc-data-box h3 {
    font-size: var(--font-size);
    background-image: url(../images/card1.svg);
    background-position: left center;
    padding-left: 45px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    font-weight: var(--font-weight);
    margin-bottom: 30px;
    height: 32px;
    line-height: 32px;
}

.card1 .sc-data-box .info {
    height: 60px;
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    padding-bottom: 16px;
}

.card1 .sc-data-box .info .num {
    font-size: 45px;
}

.card1 .action {
    color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    justify-self: center;
    background: #d16a01;
    text-align: center;
    width: 100%;
    justify-content: center;
    font-size: 20px
}

.card1 .action:hover {
    background-color: #F98611;
}

.card1 .action:active {
    background-color: #8F4800;
}

.card2 {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden
}

.card2 .sc-data-box {
    padding: 16px;
    background: #fff;
    color: #2E4A8F
}

.card2 .sc-data-box h3 {
    font-size: var(--font-size);
    background-image: url(../images/card2_v1.svg);
    background-position: left center;
    padding-left: 38px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    font-weight: var(--font-weight);
    margin-bottom: 34px;
    height: 28px;
    line-height: 28px;
    color: var(--main-color)
}

.card2 .sc-data-box .info {
    height: 60px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: #285ee4;
    font-size: 25px;
    padding: 0 16px 16px
}

.card2 .sc-data-box .info .num {
    font-size: 45px
}

.card2 .action {
    color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    justify-self: center;
    background: #285ee4;
    text-align: center;
    width: 100%;
    justify-content: center;
    font-size: 20px
}

.card2 .action:hover {
    background-color: #359B9B;
}

.card2 .action:active {
    background-color: #2E4A8F;
}

.card3 {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden
}

.card3 .sc-data-box {
    padding: 16px;
    background: #fff;
    color: #2E4A8F
}

.card3 .sc-data-box h3 {
    font-size: var(--font-size);
    background-image: url(../images/card3_v1.svg);
    background-position: left center;
    padding-left: 38px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    font-weight: var(--font-weight);
    margin-bottom: 34px;
    height: 28px;
    line-height: 28px;
    color: var(--main-color)
}

.card3 .sc-data-box .info {
    height: 60px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    color: #285ee4;
    font-size: 25px;
    padding-bottom: 16px
}

.card3 .sc-data-box .info .num {
    font-size: 45px
}

.card3 .action {
    color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    justify-self: center;
    background: #285ee4;
    text-align: center;
    width: 100%;
    justify-content: center;
    font-size: 20px
}

.card3 .action:hover {
    background-color: #359B9B;
}

.card3 .action:active {
    background-color: #2E4A8F;
}

.card4 {
    position: relative
}

.card4 .slick-list {
    overflow: hidden;
    border-radius: 15px
}

.card4 .bank-info {
    padding: 16px;
    font-weight: 500;
    color: #285ee4;
    height: 140px;
    box-sizing: border-box
}

.card4 .bank-info .bank {
    border-right: 1px solid #fff;
    display: flex;
    justify-content: space-between;
    height: 40px
}

.card4 .bank-info .bank .default {
    font-size: var(--font-size);
    background-image: url(../images/card4_v1.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    padding-left: 38px;
    font-weight: var(--font-weight);
    margin-bottom: 16px;
    letter-spacing: 1px;
    height: 28px;
    line-height: 28px;
    color: var(--main-color)
}

.card4 .bank-info .bank .default_0 {
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 26px;
    color: var(--main-color)
}

.card4 .bank-info .bank h3 {
    font-size: 23px;
    margin-bottom: 10px
}

.card4 .bank-info .bank .detail {
    font-weight: 300;
    font-size: 11px
}

.card4 .bank-info .bank .detail .tl {
    letter-spacing: 3px
}

.card4 .bank-info .bank-account {
    font-size: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 16px
}

.card4 .bank-info .bank-account .bank_num {
    margin-bottom: 6px
}

.card4 .bank-info .bank-account .bank_name {
    width: 100%;
    font-size: 16px;
    text-align: center;
    line-height: 26px
}

.card4 .bank-info .sn {
    width: calc(100% - 100px);
    padding-left: 10px;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    align-content: end;
    font-weight: 300
}

.card4 .bank-info .sn h4 {
    width: 100%;
    font-size: 13px;
    margin-bottom: 10px;
    display: block
}

.card4 .bank-info .sn .num {
    letter-spacing: 1px
}

.card4 .sc-data-box {
    position: relative
}

.card4 .sc-data-box .slide {
    box-sizing: border-box;
    color: #285ee4
}

.card4 .sc-data-box .slide .mk {
    padding-left: 10px
}

.card4 .sc-data-box .slide .item {
    background: #285ee4;
    color: #fff;
    display: flex !important;
    align-items: center;
    padding: 0 16px 10px;
    height: 46px;
    box-sizing: border-box;
    font-size: 25px;
    position: relative
}

.card4 .sc-data-box .slide .item .amount {
    font-size: 35px;
    width: 100%;
    text-align: right;
    padding-left: 8px;
    padding-right: 8px
}

.card4 .sc-data-box .slick-dots {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translate(-50%, 0%)
}

.card4 .sc-data-box .slick-dots li.slick-active button {
    background: #fff;
    border-color: #fff
}

.card4 .sc-data-box .slick-dots li button {
    cursor: pointer;
    height: 9px;
    width: 9px;
    border-radius: 100%;
    text-indent: -9999px;
    padding: 0;
    margin: 0 4px;
    background: #b4b4b4;
    border: 1px solid #b4b4b4
}

.card4 .sc-data-box .slick-initialized .slick-slide {
    height: auto
}

.card4 .sc-data-box .slider {
    height: 100%
}

.card4 .sc-data-box .slick-prev,
.card4 .sc-data-box .slick-next {
    position: absolute;
    bottom: 25px;
    text-indent: -9999px;
    cursor: pointer
}

.card4 .sc-data-box .slick-prev {
    width: 0;
    background-image: url(../images/left_abtn_v1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 44px;
    width: 44px;
    left: 2px;
    top: 35%;
    border: 0;
    z-index: 2;
    border-radius: 50%;
    background-color: transparent
}

.card4 .sc-data-box .slick-prev:hover {
    background-color: #e7f1f1
}

.card4 .sc-data-box .slick-prev:active {
    background-color: #bfdad9
}

.card4 .sc-data-box .slick-next {
    background-image: url(../images/right_abtn_v1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 44px;
    width: 44px;
    right: 2px;
    top: 35%;
    z-index: 2;
    border: 0;
    background-color: transparent;
    border-radius: 50%
}

.card4 .sc-data-box .slick-next:hover {
    background-color: #e7f1f1
}

.card4 .sc-data-box .slick-next:active {
    background-color: #bfdad9
}

.card5 {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    margin-right: 20px;
    margin-bottom: 20px;
    width: calc(66.66666% - 20px);
    position: relative;
    height: 186px
}

.card5 .sc-data-box {
    padding: 16px 16px 0;
    background: #fff;
    color: #fff;
    height: 68px;
    box-sizing: border-box
}

.card5 .sc-data-box h3 {
    font-size: var(--font-size);
    background-image: url(../images/card5_v1.svg);
    background-position: left center;
    padding-left: 38px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    font-weight: var(--font-weight);
    margin-bottom: 24px;
    height: 28px;
    color: var(--main-color);
    line-height: 28px
}

.card5 .sc-data-box .datep {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #285ee4
}

.card5 .sc-data-box .datep .sc-datepicker {
    margin-left: 10px
}

.card5 .sc-data-box .datep .sc-datepicker input {
    width: 90px;
    letter-spacing: 1px
}

.card5 .info {
    display: flex;
    align-items: baseline;
    height: 103px
}

.news-card {
    width: 100%;
    padding: 16px;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    background-color: #fff;
    border: 4px solid var(--main-color);
    box-sizing: border-box;
    margin-top: 114px;
}

.news-card h3 {
    color: var(--main-color);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    text-align: left;
    letter-spacing: 2px
}

.news-card ul {
    margin: 0;
    padding: 0 0 20px
}

.news-card ul li {
    padding: 25px 20px 15px;
    border-bottom: 1px solid #707070
}

.news-card ul li a {
    font-size: 15px;
    color: #5d5d5d;
    text-align: center;
    display: flex
}

.news-card ul li a .date {
    margin-right: 20px;
    line-height: 1.8em
}

.news-card ul li a .title {
    line-height: 1.8em;
    text-align: left
}

.card5 .info {
    display: flex;
    flex-wrap: wrap;
    background: #fff
}

.card5 .info .sec1 {
    padding: 0 20px 20px;
    display: flex;
    width: 100%;
    justify-content: end;
    letter-spacing: 1px
}

.card5 .info .sec2 {
    width: 100%;
    height: 46px;
    background: #285ee4;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0 20px 10px;
    letter-spacing: 1px;
    box-sizing: border-box;
    text-align: end;
    position: absolute;
    bottom: 0;
}

.card5 .info .amount1 {
    color: #d69898
}

.card5 .info .sec1 .sec1_op1,
.sec1_op2 {
    display: flex
}

.card5 .info .amount2 {
    font-size: 45px;
    color: #ffaf00
}

.card5 .info .amount3 {
    color: #146aad
}

.card5 .info .amount4 {
    font-size: 35px;
    color: #fff
}

.card5 .info .op1 {
    padding: 0 12px;
    font-size: 35px;
    color: #6e6e6e
}

.card5 .info .op2 {
    padding: 0 12px;
    font-size: 35px;
    color: #6e6e6e
}

.card5 .info .op3 {
    padding: 0 12px;
    font-size: 30px;
    color: #fff
}

.card5 .info .unit {
    margin-left: 5px;
    font-size: 30px;
    color: #fff;
    margin-right: 20px
}

.card5 .info .amount1,
.card5 .info .amount2,
.card5 .info .amount3 {
    font-size: 32px;
    text-align: end
}

.card5 .info .amount1 span,
.card5 .info .amount2 span,
.card5 .info .amount3 span {
    display: block;
    margin-top: 6px;
    text-align: right;
    font-size: 15px
}

.outter {
    display: flex;
    justify-content: end
}

.subscription_link {
    background: #ff8000;
    height: 44px;
    display: flex;
    border-radius: 22px;
    align-items: center;
    justify-content: space-between;
    padding-left: 18px;
    padding-right: 6px;
    max-width: 430px;
    margin: 0 0 22px auto;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    width: 100%
}

.subscription_link.type1 {
    width: auto;
    background: #285ee4;
    display: inline-flex;
    padding-right: 20px
}

.subscription_link.type2 {
    background: #285ee4;
    width: 100%
}

.subscription_link .text {
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 300
}

.subscription_link a {
    align-items: center;
    border-radius: 22px;
    background: #fff;
    display: block;
    width: 76px;
    height: 32px;
    display: flex;
    align-content: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    font-weight: 300;
    font-size: 17px
}

@media(min-width: 1660px) {
    .instruction-small-card {
        max-height: 220px
    }
}


#app-login {
    width: 100%;
    background-image: url(../images/login_bk.webp);
    background-repeat: repeat;
    background-position: center;
    height: 100vh;
    min-height: 646px;
    background-size: cover
}

#app-login:before {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    opacity: .4;
    left: 0;
    min-height: 646px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(../images/bk_filter.png);
    background-repeat: repeat;
    background-position: center
}

#login-form {
    max-width: 406px;
    height: 100%;
    color: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center
}

#login-form .logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%
}

#login-form .checkbox {
    color: #fff;
    font-size: 21px
}

#login-form .login-vat>.icon {
    display: block;
    background-image: url(../images/ic_16px_3.svg);
    width: 70px;
    height: 40px;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
    border-right: 1px solid #fff;
    margin-right: 15px
}

#login-form .login-account>.icon {
    display: block;
    background-image: url(../images/ic_16px_2.svg);
    width: 70px;
    height: 40px;
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: center;
    border-right: 1px solid #fff;
    margin-right: 15px
}

#login-form .login-password>.icon {
    display: block;
    background-image: url(../images/ic_16px_1.svg);
    width: 70px;
    height: 40px;
    background-size: 23px;
    background-repeat: no-repeat;
    background-position: center;
    border-right: 1px solid #fff;
    margin-right: 15px
}

#login-form .check_passwd {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -8px;
    z-index: 3
}

#login-form .hide {
    display: none
}

#login-form .login-vat,
#login-form .login-account,
#login-form .login-password {
    position: relative;
    width: 100%;
    height: 52px;
    border: 1px solid #fff;
    border-radius: 21px;
    display: flex;
    align-items: center
}

#login-form .login-vat input,
#login-form .login-account input,
#login-form .login-password input {
    position: relative;
    height: 40px;
    width: calc(100% - 110px);
    border: 0 !important;
    background: 0 0;
    outline: none;
    font-size: 27px;
    flex: 1;
    color: #fff
}

#login-form .login-vat.error,
#login-form .login-account.error,
#login-form .login-password.error {
    border-width: 2px;
    border-color: #ff5b5b;
    position: relative
}

#login-form .login-vat .error_msg,
#login-form .login-account .error_msg,
#login-form .login-password .error_msg {
    display: none
}

#login-form .login-vat.error .error_msg,
#login-form .login-account.error .error_msg,
#login-form .login-password.error .error_msg {
    display: flex;
    color: #ff5b5b;
    font-size: 14px;
    position: absolute;
    top: 57px;
    right: 8px
}

#login-form ::placeholder {
    color: #6fc7c9;
    letter-spacing: 2px
}

#login-form .login-field {
    margin-bottom: 28px;
    color: #fff
}

#login-form .login-field.logo {
    margin-bottom: 16px
}

#login-form .login-field button[type=submit] {
    background: #fff;
    cursor: pointer;
    color: #138b8b;
    font-size: 22px;
    height: 41px;
    border-radius: 21px;
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .15);
    border: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
    transform: scale(1);
    transition: .3s
}

#login-form .login-field button[type=submit]:active {
    transform: scale(.98)
}

#login-form .login-field a {
    font-size: 18px;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
    display: block;
    line-height: 2em;
    text-underline-offset: 5px;
    text-decoration: underline
}

#login-form .visible {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 44px;
    height: 44px;
    background-image: url(../images/btn_invisible_w.png);
    background-size: 100% 100%;
    cursor: pointer
}

#login-form .invisible {
    background-image: url(../images/btn_visible_w.png);
    background-size: 100% 100%
}

.login-field.checkbox {
    display: block;
    width: 100%
}

.chk-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 40px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: right;
    letter-spacing: 1px
}

.chk-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 16px;
    width: 16px;
}

.chk-container .checkmark {
    position: absolute;
    top: 2px;
    border-radius: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff
}

.chk-container:hover input~.checkmark {
    background-color: #fff
}

.chk-container input:checked~.checkmark {
    background-color: #fff
}

.chk-container .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.chk-container input:checked~.checkmark:after {
    display: block
}

.chk-container .checkmark:after {
    left: 7px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #138b8b;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

@media(max-width: 450px) {
    #login-form {
        max-width: 330px
    }
}

.instruction-card {
    box-sizing: border-box
}

.instruction-card h3 {
    color: #2E4A8F;
    font-size: 28px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 25px
}

.instruction-card .step_img {
    width: 100%;
    position: relative;
    padding-bottom: 100%;
    height: 0
}

.instruction-card .step_img img {
    display: block;
    width: 100%;
    max-width: 280px
}

.instruction-card .info-box h4 {
    position: relative
}

.instruction-card .info-box h4 .small-title {
    position: relative;
    display: flex;
    align-items: center;
    color: #2E4A8F;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #2E4A8F
}

.instruction-card .info-box h4 .small-title span {
    display: block;
    font-size: 14px
}

.instruction-card .info-box h4 .small-title span .en {
    font-size: 20px;
    line-height: 24px
}

.instruction-card .info-box h4 .small-title .num {
    display: flex;
    font-size: 51px;
    line-height: 50px;
    position: absolute;
    left: 40px;
    top: -10px
}

.instruction-card .info-box h4 .text {
    position: absolute;
    right: 0;
    bottom: 10px;
    font-size: 20px;
    color: #5d5d5d
}

.instruction-card .info-box .btext {
    min-height: 180px;
    color: #fff
}

.instruction-card .info-box .btext p {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 2em
}

.instruction-card .info-box .btext p:last-child {
    margin-bottom: 0
}

.instruction-card .step {
    margin: 50px auto auto;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 16px;
    width: 128px;
    height: 39px;
    border-radius: 20px;
    background-color: #6a6a6a;
    color: #fff;
    text-align: center;
    transition: .3s;
    transform: scale(1)
}

.instruction-card .step:active {
    transform: scale(.93)
}

.instruction-card .step.start {
    background: #658ae6
}

.step_img {
    width: 280px
}

.step_img .fright {
    position: absolute;
    bottom: -25px;
    right: -10px;
    width: 240px !important
}

.step_img .fleft {
    z-index: 2;
    position: absolute;
    top: 20px;
    left: -10px;
    color: #5d5d5d;
    font-size: 20px;
    display: flex
}

.step_img .fleft img {
    display: block;
    width: 108px;
    height: 108px;
    margin-right: 20px
}

/*首頁外部綠底修改*/
.instruction-card_bg {
    width: 100%;
    padding: 4px 4px 8px 4px;
    background-color: #285ee4;
    border-radius: 15px;
    height: 174px;
    box-shadow: var(--box-shadow)
}

.instruction-card_bg:hover {
    background-color: #359B9B;
}

.instruction-card_bg:active {
    background-color: #005A5A;
    transform: scale(.98)
}

/*卡片小按鈕*/
.instruction-card_bg .step {
    width: 134px;
    height: 28px;
    margin-top: 7px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    text-align: center;
    z-index: 2
}

.instruction-small-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    min-height: 136px;
    border-radius: 12px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    background-color: #fff;
    box-sizing: content-box;
}

.instruction-small-card .step_img {
    width: 120px;
    height: 120px;
}

.inner .card_spacing {
    margin-left: 8px;
}

.inner .instruction-text {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}


.main-content .title-bookkeeping {
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    background: #FF8D00;
    color: #eee;
    width: 150px;
    height: 40px;
    margin-top: 10px;
    margin-left: 40px;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 25px;
    box-shadow: 0 5px 10px 0 rgba(209, 106, 1, .2);
    transition: all 0.3s;
}

.main-content .title-bookkeeping:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 15px rgba(209, 106, 1, .3);
}

.main-content .title-bookkeeping:active {
    transform: scale(0.95);
    box-shadow: 0px 2px 5px rgba(209, 106, 1, .2);
}

.main-content .title-bookkeeping span {
    display: block;
    margin-left: 8px;
    margin-bottom: 2px;
    transition: all 0.3s;
}

.main-content .title-bookkeeping img {
    margin-left: 8px;
    width: 20px;
    height: 20px;
    fill: white;
    transition: all 0.3s;
}

@media screen and (max-width: 742px) {
    .main-content .title-bookkeeping {
        margin-top: 56px;
    }
}


.main_intro_first #step_text1 {
    top: 30%;
}

.main_intro_first .instruction-small-card {
    position: relative;
    min-height: 168px;
    display: flex;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    background-color: #fff;
    max-height: 220px;
    box-sizing: border-box;
}

.main_intro_first .instruction-small-card .info-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main_intro_first .instruction-small-card .info-box h3 {
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    color: var(--main-color);
    text-align: center;
}

.main_intro_first .instruction-small-card .info-box h4 {
    position: relative;
}

.main_intro_first .instruction-small-card .info-box h4 .small-title {
    position: relative;
    display: flex;
    align-items: center;
    color: #285ee4;
    padding-bottom: 8px;
    font-size: 18px;
}

.main_intro_first .instruction-small-card .info-box h4 .small-title span {
    display: block;
    font-size: 14px;
}

.main_intro_first .instruction-small-card .info-box h4 .small-title span .en {
    font-size: 20px;
    line-height: 24px;
}

.main_intro_first .instruction-small-card .info-box h4 .small-title .num {
    display: flex;
    font-size: 51px;
    line-height: 50px;
    position: absolute;
    left: 42px;
    top: -10px;
    padding-left: 5px;
}

.main_intro_first .instruction-small-card .info-box h4 .text {
    right: 0;
    font-size: 18px;
    color: #285ee4;
    font-weight: 400;
}

.main_intro_first .instruction-small-card .info-box .step {
    margin: 15px auto auto 0;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 16px;
    width: 128px;
    height: 39px;
    border-radius: 20px;
    background-color: #658ae6;
    color: #fff;
    text-align: center;
    transition: .3s;
    transform: scale(1);
}

.main_intro_first .instruction-small-card .info-box .step.start {
    background-color: #658ae6;
}

.main_intro_first .instruction-small-card .step_img {
    width: 230px;
    position: relative;
}

.main_intro_first .instruction-small-card .step_img img {
    display: block;
    width: 230px;
}

.main_intro_first .instruction-small-card .step_img {
    position: relative;
}

.main_intro_first .instruction-small-card .step_img .box1 {
    right: 0;
    width: 108px;
    height: auto;
    position: absolute;
    text-align: right;
    color: #5d5d5d;
    font-size: 14px;
    z-index: 3;
}

.main_intro_first .instruction-small-card .step_img .box1 img {
    display: block;
    width: 100%;
}

.main_intro_first .instruction-small-card .step_img .box2 {
    position: absolute;
    bottom: -30px;
    width: 240px;
    left: -50px;
}

@media screen and (max-width: 1560px) {
    .main-content .main_intro_first #instruction1 {
        max-width: 900px;
    }

    .main-content .main_intro_first {
        top: 400px;
    }

    .main_intro_first #instruction1 {
        max-width: 900px;
        position: absolute;
        top: -718px;
        left: 0;
        right: 0;
    }

    .main_intro_first #instruction1 .instruction-card {
        width: 100%;
        height: 300px;
        min-height: 384px;
        display: flex;
        position: relative;
    }

    .main_intro_first .instruction-card {
        width: 100%;
        max-width: 900px;
        min-height: 384px;
    }

    .main_intro_first .step_img_bg {
        background: #fff;
        min-width: 343px;
    }

    .main_intro_first .step3 .step_img_bg {
        width: 100%;
    }

    .main_intro_first .instruction-card .info-box {
        position: relative;
    }

    .main_intro_first #instruction1 .instruction-card .step {
        position: absolute;
        bottom: 16px;
        right: 16px;
    }

    .main_intro_first #instruction1 #step_text1 {
        top: 400px;
        right: 0;
        left: 308px;
    }

    .main_intro_first #instruction1 #step_text1:after {
        display: none;
    }
}

#basic-info {
    max-width: 400px;
    min-width: 300px;
}

#basic-info .input-field {
    margin-bottom: 16px;
}

#basic-info .input-field label {
    font-size: 20px;
    color: #3d3d3d;
    font-weight: 300;
    display: block;
    width: 86px;
    text-align-last: justify;
    margin-bottom: 8px;
}

#basic-info .input-field input {
    width: 100%;
    min-width: 413px;
    height: 36px;
    padding: 5px 8px;
    box-sizing: border-box;
    background: #fff;
    color: #3d3d3d;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 20px;
    letter-spacing: 2px;
    outline: none;
}

#basic-info .input-field input:hover,
#basic-info .input-field input:focus {
    border: 2px solid #285ee4;
}

#basic-info .input-field input::placeholder {
    color: #b4b4b4;
    text-align: center;
}

#basic-info .input-field input::-webkit-input-placeholder {
    color: #b4b4b4;
    text-align: center;
}

#basic-info .input-field input:-ms-input-placeholder {
    color: #b4b4b4;
    text-align: center;
}

#basic-info .input-field .error_field {
    font-weight: 300;
    font-size: 15px;
    color: red;
    letter-spacing: 2px;
    margin-left: 20px;
    display: none;
}


#basic-info .action {
    max-width: 529px;
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
    margin-bottom: 16px;
    padding-left: 0px;
    box-sizing: border-box;
}

#basic-info .action button {
    width: 400px;
    height: 39px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #285ee4;
    box-shadow: 2px 4px 10px 0 rgba(53, 155, 155, .25);
    border: 0;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: .3s;
    transform: scale(1);
}

#basic-info .action button:hover {
    background-color: #359B9B;
}

#basic-info .action button:active {
    background-color: #005A5A;
    transform: scale(.98);
}

#basic-info .info {
    white-space: nowrap;
}


#account-info {
    padding-top: 30px;
    /* max-width: 590px; */
    width: 100%;
}

#account-info h3 {
    font-size: 35px;
    color: #2E4A8F;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

#account-info .input-field-upload {
    font-size: 20px;
    color: #3d3d3d;
    font-weight: 300;
    display: block;
    width: 100%;
    margin-right: 20px;
    letter-spacing: 1px;
}

#account-info .box {
    width: 100%;
    max-width: 420px;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    position: relative;
}

#account-info .box.fw {
    max-width: 530px;
    margin-bottom: 24px;
    text-align-last: left;
}

#account-info .box.fw.addlocation {
    display: flex;
    justify-content: space-between;
    margin: 0 0 24px 24px;
}

#account-info .box label {
    width: 86px;
    margin-right: 8px;
    font-size: 20px;
    font-weight: 500;
    color: #3d3d3d;
    display: block;
    text-align-last: justify;
}

#account-info .box label.type_no {
    margin-bottom: 8px;
}

#account-info .box input {
    box-sizing: border-box;
    padding: 4px 16px;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #fff;
    height: 36px;
    color: #3d3d3d;
    font-size: 18px;
    letter-spacing: 2px;
    outline: none;
    min-width: 413px;

}

#account-info .box .inpnt1 {
    margin-right: 113px;
}

#account-info .box .inpnt2 {
    margin-right: 17px;
}

#account-info .box .inpnt3 {
    margin-right: 55px;
}

#account-info .box .inpnt4 {
    margin-right: 90px;
}

#account-info .box .inpnt5 {
    margin-right: 70px;
}


#account-info .box input::placeholder {
    color: #b4b4b4;
    text-align: center;
}

#account-info .box input::-webkit-input-placeholder {
    color: #b4b4b4;
    text-align: center;
}

#account-info .box input:-ms-input-placeholder {
    color: #b4b4b4;
    text-align: center;
}


#account-info .box input.small {
    width: 100%;
    max-width: 220px;
    min-width: 300px;
}


#account-info .box input.is_favorite {
    width: 24px;
    height: 24px;
    min-width: 0
}

/* #account-info .box input.is_favorite {
    margin-left: 106px
} */

#account-info .box input:hover,
#account-info .box input:focus {
    border: 2px solid #76bcbc !important
}

#account-info .box input.not_vaild {
    border: 2px solid red !important
}

#account-info .box input.active {
    border: 2px solid #285ee4 !important
}

#account-info .box input.is_vailded {
    border: 2px solid #285ee4 !important
}

#account-info .box input.not_vaild~.vaild_text {
    display: block
}

#account-info .box .vaild_text {
    color: red;
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 14px;
    display: none
}


#account-info form .annotation-title {
    display: flex;
    align-items: center;
    width: 120px;
}

#account-info .action_account {
    max-width: 410px;
    margin-top: 60px;
    display: flex;
    /* padding  -left: 116px; */
    box-sizing: border-box;
    margin-bottom: 46px;
    justify-content: center;
}

#account-info .action_account button {
    width: 100%;
    height: 40px;
    color: #fff;
    font-size: 16px;
    background: #285ee4;
    border: 0;
    border-radius: 20px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .3s;
    transform: scale(1);
}

#account-info .action_account button:hover {
    background: #077474;
}

#account-info .action_account button:active {
    background: #2E4A8F;
    transform: scale(.98);
}

#account-info .action_account button.reset {
    border: 2px solid #285ee4;
    background: #fff !important;
    color: #285ee4;
    transform: scale(1)
}

#account-info .action_account button.reset:hover {
    background: #f3f3f3 !important
}

#account-info .action_account button.reset:active {
    background: #dbdbdb !important;
    transform: scale(.98);
}


#account-info .action {
    padding-left: 116px;
    box-sizing: border-box;
    margin-bottom: 46px;
    margin-top: 100px;
    max-width: 529px;
}

#account-info .action button {
    cursor: pointer;
    margin: auto;
    border: 0;
    background: #2E4A8F;
    border-radius: 20px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 39px;
    transition: .3s;
    transform: scale(1);
}

#account-info .action button:active {
    transform: scale(.98);
}

#account-info .info {
    padding-left: 116px;
    font-size: 15px;
    line-height: 1.6;
    color: #787878;
    font-weight: 300;
}

#account-info .info a {
    color: #279ceb;
}

#account-info .input-field.error input {
    border-color: #d69898;
}

#account-info .input-field.error .error_field {
    display: block;
}

#account-info .box .custom-select {
    max-width: 220px;
    min-width: 300px;
}

.main-content .main-content-password {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.main-content .main-content-password #main_title {
    width: 100%;
    height: 41px;
    float: none;
    display: inline;
    vertical-align: bottom;
    line-height: 1;
    margin-bottom: 16px;
}

.main-content .main-content-password #main_title h3 {
    font-size: 35px;
    color: #285ee4;
    font-weight: 600;
    letter-spacing: 1px;
    flex-direction: row;
    position: relative;
    display: inline;
    vertical-align: bottom;
    line-height: 1;
}

.main-content .main-content-password #main_title h5 {
    font-size: 20px;
    color: #285ee4;
    font-weight: 300;
    letter-spacing: 1px;
    flex-direction: row;
    position: relative;
    display: inline;
    vertical-align: bottom;
    line-height: 1;
    padding: 16px;
}


#account-setting {
    max-width: 955px;
    width: 100%;
}

#account-setting .create {
    position: relative;
    display: flex;
    align-items: center;
}

#account-setting .create:before {
    content: url(../../../static/v2/images/components/btn_type/create_plus.svg);
    width: 30px;
    height: 30px;
}

.analysis_chart {
    width: 100%;
}

.analysis_chart .main_chart {
    display: flex;
}

.analysis_chart .main_chart .analysis_section {
    box-sizing: border-box;
    width: 70%;
}

.analysis_chart .main_chart .analysis_section .mychart_analysis {
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    background: #fff;
    border: 4px solid #285ee4;
    padding: 16px;
    position: relative;
    min-width: 535px;
}

.analysis_chart .analysis_section .chart-location {
    display: flex;
}

.analysis_chart .analysis_section .chart-suffix {
    color: #285ee4;
    margin-right: 4px;
    font-size: 16px;
}

.analysis_chart .main_chart .chart_section {
    width: 25%;
    min-width: 260px;
    margin-left: 16px;
}

.analysis_chart .main_chart .chart_section .myChart {
    width: 100%;
    min-width: calc(100% - 20px);
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    background: #fff;
    border: 4px solid #285ee4;
    padding: 0 0 20px;
}

.analysis_chart .analysis_section .table {
    width: 100%;
}

.analysis_chart .analysis_section .table {
    background: 0 0;
}

.analysis_chart .analysis_section .table tbody tr {
    border-color: inherit;
    border-width: 0;
    height: 40px;
    border-bottom: 1px solid #ccc;
}

.analysis_chart .analysis_section .table tbody tr td {
    vertical-align: middle;
    text-align: right;
}

.analysis_chart .analysis_section .chart-header {
    color: #285ee4;
    text-align: left;
    margin: -4px 0 8px -4px;
    font-size: 20px;
    font-weight: 500;
}

.analysis_chart .sc-datepicker {
    border-radius: 0 15px 15px 0;
    margin-bottom: 16px;
    margin-top: 2px;
}

.modal .upload_title {
    margin-top: 30px;
    font-size: 20px;
    color: #3d3d3d;
    margin-right: 31px;
    display: flex;
    align-items: center;
}

.modal .upload_title .text {
    display: block;
    color: #3d3d3d;
    font-size: 20px;
    width: 82px;
    text-align-last: justify;
    margin-right: 40px;
}

.modal .upload_title .small {
    display: block;
    color: #9b9b9b;
    font-size: 16px;
}

.modal .upload_outter {
    padding: 30px 0 0;
}

.upload_outter {
    padding: 30px 0 0;
    width: 100%;
    display: flex;
}

.input-field-upload .upload_outter {
    padding: 0;
    position: absolute;
    top: 16px;
    left: 114px;
}

.upload_outter .upload {
    margin-right: 10px;
    padding-top: 12px;
    display: block;
    transform: scale(1);
    transition: .3s;
}

.upload_outter .upload>a {
    height: 72px;
    width: 72px;
    display: block;
    background-image: url(../images/upx_b.png);
    /* background-size: 77px auto; */
    background-position: center;
    background-repeat: no-repeat;
}

.upload_outter .upload>a img {
    display: none;
}

.upload_outter .upload:active {
    transform: scale(.98);
}

.upload_outter .upload img {
    height: 66px;
}

.upload_outter .mcs-horizontal-pics {
    max-width: 215px;
    margin-left: 0;
}

.upload_outter .mcs-horizontal-pics .hitem>img {
    height: 66px;
}

.tableAutoHead {
    height: auto;
    border-radius: 15px;
    overflow: hidden;
}

th,
td {
    text-align: left;
    padding: 4px;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 15px;
}

table.data-table tr th,
table.data-table tr td {
    font-size: 20px;
    font-weight: 300;
}

table.data-table tr td {
    height: 80px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
}

table.data-table tr td.am {
    text-align: right;
    padding-right: 10px;
}

table.data-table tr td.alert {
    color: #ff8000;
    font-weight: 500;
}

table.data-table tr th {
    height: 50px;
    text-align: center;
    vertical-align: middle;
}

table.data-table tr th.am {
    text-align: right;
    padding-right: 10px;
}

table.data-table thead th {
    background: #285ee4;
    color: #fff;
}

table.data-table tbody {
    background: #fff;
    color: #767676;
}

table.data-table tbody tr:nth-child(2n+1) {
    background: #f8f8f8;
}

.pagination {
    max-width: 100%;
    position: relative;
    height: 80px;
    bottom: 0;
    padding-right: 20px;
    box-sizing: border-box;
}

.pagination .action {
    display: flex;
    left: 50%;
    top: 25px;
    transform: translate(-50%, 0%);
    position: absolute;
    align-items: center;
}

.pagination .action .prev {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid #b8b8b8;
    margin-right: 15px;
}

.pagination .action .next {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #b8b8b8;
    margin-left: 15px;
}

.pagination .action ul {
    border-radius: 7px;
    overflow: hidden;
    display: flex;
}

.pagination .action ul li {
    background: #fff;
}

.pagination .action ul li a {
    display: flex;
    text-align: center;
    height: 28px;
    width: 40px;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #646464;
}

.pagination .action ul li a.active {
    background: #285ee4;
    color: #fff;
}

.pagination .info {
    display: flex;
    font-size: 15px;
    color: #767676;
    letter-spacing: 1px;
    position: absolute;
    right: 30px;
    top: 30px;
}

.pagination .info .total_page {
    text-align: right;
    margin-right: 20px;
}

.pagination .info .records {
    text-align: right;
}

.tableFixHead {
    overflow-y: auto;
    max-height: calc(100vh - 340px);
    /* border-radius: 15px; */
    /* scrollbar-width: none; */
    box-shadow: var(--box-shadow);
}

.tableFixHead table {
    border-collapse: collapse;
    width: 100%;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
}

#ex1,
#ex2,
#ex_add,
#ex_edit {
    max-width: 820px;
    padding: 30px 30px 50px;
}

.modal a.close-modal {
    top: -34px;
    right: -33px;
    display: none;
}

#modal_password {
    max-width: 640px;
    padding: 30px 30px 40px;
    box-sizing: border-box;
}

#modal_password h4 {
    text-align: center;
}

#modal_password .modal-content {
    margin-bottom: 0;
}

.modal {
    background: #f2f1f6;
}

.modal h4 {
    font-size: 35px;
    font-weight: 600;
    color: #285ee4;
    margin-bottom: 40px;
}

.modal .b30 {
    margin-bottom: 30px;
}

.modal .top0 {
    margin-top: 8px;
}

.modal .modal-content {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.modal .modal-content .input_field {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.modal .modal-content .input_field input[type=text]:focus,
.modal .modal-content .input_field input[type=number]:focus,
.modal .modal-content .input_field textarea:focus {
    border: 1px solid #658ae6;
}

.modal .modal-content .input_field .click_container {
    display: flex;
    flex-direction: row;
}

.modal .modal-content .input_field input[type=text]:focus,
.modal .modal-content .input_field input[type=number]:focus,
.modal .modal-content .input_field input[type=email]:focus,
.modal .modal-content .input_field textarea:focus {
    border: 1px solid #658ae6;
}

.modal .modal-content .input_field small {
    font-size: 12px;
}

.modal .modal-content .input_field.atop {
    align-items: baseline;
}

.modal .modal-content .input_field.upload {
    flex-wrap: wrap;
    align-content: baseline;
}

.modal .modal-content .input_field.amount input[type=text],
.modal .modal-content .input_field.amount input[type=number] {
    text-align: right;
}

.modal .modal-content .input_field.w100 {
    width: 100%;
    position: relative;
}

.modal .modal-content .input_field label {
    width: 82px;
    margin-right: 34px;
    text-align-last: justify;
    font-size: 20px;
    color: #3d3d3d;
}

.modal .modal-content .input_field label.fullwidth {
    width: auto;
}

.modal .modal-content .input_field label.fullwidth small {
    font-size: 14px;
}

.modal .modal-content .input_field textarea {
    outline: none;
    border-radius: 8px;
    background: #fff;
    color: #3d3d3d;
    font-weight: 300;
    width: calc(100% - 160px);
    font-size: 18px;
    padding: 5px 10px;
}

.modal .modal-content .input_field textarea::placeholder {
    color: #b4b4b4;
    text-align: center;
}

.modal .modal-content .input_field textarea::-webkit-input-placeholder {
    color: #b4b4b4;
    text-align: center;
}

.modal .modal-content .input_field textarea:-ms-input-placeholder {
    color: #b4b4b4;
    text-align: center;
}

.modal .modal-content .input_field input[type=number],
.modal .modal-content .input_field input[type=text],
.modal .modal-content .input_field input[type=email] {
    outline: none;
    border-radius: 8px;
    background: #fff;
    border: 0;
    color: #3d3d3d;
    font-weight: 300;
    height: 36px;
    width: calc(100% - 160px);
    font-size: 18px;
    padding: 5px 10px;
}

.modal .modal-content .input_field input[type=number]::placeholder,
.modal .modal-content .input_field input[type=text]::placeholder,
.modal .modal-content .input_field input[type=email]::placeholder {
    color: #b4b4b4;
    text-align: center;
}

.modal .modal-content .input_field input[type=number]::-webkit-input-placeholder,
.modal .modal-content .input_field input[type=text]::-webkit-input-placeholder,
.modal .modal-content .input_field input[type=email]::-webkit-input-placeholder {
    color: #b4b4b4;
    text-align: center;
}

.modal .modal-content .input_field input[type=number]:-ms-input-placeholder,
.modal .modal-content .input_field input[type=text]:-ms-input-placeholder,
.modal .modal-content .input_field input[type=email]:-ms-input-placeholder {
    color: #b4b4b4;
    text-align: center;
}

.modal .modal-content .input_field .custom-select {
    width: 100%;
    max-width: 220px;
    text-align: left;
    font-weight: 300;
}

.modal .modal-content .input_field.w100 .reset_error_message {
    font-weight: 500;
    color: red;
    font-size: 14px;
    position: absolute;
    bottom: -16px;
    right: 48px;
}

.modal .modal-content .input_field.am input[type=text] {
    font-size: 20px;
}

.modal .modal-content .input_field.am input[type=text]::placeholder {
    font-size: 18px;
}

.modal .modal-content .input_field_note {
    width: 50%;
}

.modal .modal-content .input_field_note .atop {
    width: 100%;
    align-items: baseline;
    margin-bottom: 0;
}

.modal .modal-content .input_field_note .tip_note {
    width: 100%;
    display: flex;
    align-items: baseline;
    margin-bottom: 40px;
    flex-wrap: wrap;
    margin-top: 6px;
}

@media screen and (max-width: 930px) {
    .modal .modal-content .input_field_note {
        width: 100%;
    }

    .modal .modal-content .input_field_note .atop {
        margin-bottom: 16px;
    }

    .modal .modal-content .input_field_note .tip_note {
        margin-top: 0;
        margin-bottom: 16px;
    }
}

.modal .action {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal .action button {
    margin: 0 10px;
    border: 0;
    width: 150px;
    height: 39px;
    background: #2E4A8F;
    display: flex;
    border-radius: 19.5px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1.6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s;
    transform: scale(1);
}

.modal .action button:active {
    transform: scale(.98);
}

.modal .action button.cancel {
    border: 1px solid #285ee4;
    background: #fff !important;
    color: #285ee4;
    transform: scale(1);
}

.modal .action button.del_account {
    background: #ff2323 !important;
}

.modal .action button.cancel:hover {
    background: #f3f3f3 !important;
}

.modal .action button.cancel:active {
    background: #dbdbdb !important;
    transform: scale(.98);
}

.modal .action button.confirm {
    background: #285ee4;
    color: #fff;
    transform: scale(1);
}

.modal .action button.confirm:hover {
    background: #077474;
}

.modal .action button.confirm:active {
    background: #2E4A8F;
    transform: scale(.98);
}

.modal .action button[type=submit] {
    background: #285ee4;
}

.modal .action button[type=button] {
    background: #285ee4;
}

@media(max-width: 600px) {
    .modal .modal-content .input_field {
        width: 100%;
    }
}

#ex3,
#ex4 {
    max-width: 720px;
    padding: 0 50px 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: none;
    background: 0 0;
}

#ex3 a.close-modal,
#ex4 a.close-modal {
    top: -14px;
    right: 33px;
}

#pxlob {
    display: none;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999999;
    background: rgba(0, 0, 0, .5);
}

#pxlob.openx {
    display: block;
}

#pxlob .center_imgp {
    position: absolute;
    max-height: 800px;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
}

#pxlob .center_imgp img {
    width: 100%;
}

.tiptop_t1,
.tiptop_t2,
.tiptop_t3 {
    width: 450px;
    border-radius: 20px;
    background: #fff;
    position: absolute;
    padding: 30px 0;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    bottom: 130px;
    left: 20;
}

.tiptop_t1.center,
.tiptop_t2.center,
.tiptop_t3.center {
    left: 185;
}

.tiptop_t1.right,
.tiptop_t2.right,
.tiptop_t3.right {
    right: 20;
    left: auto;
}

.tiptop_t1 .triangle-with-shadow,
.tiptop_t2 .triangle-with-shadow,
.tiptop_t3 .triangle-with-shadow {
    width: 100px;
    height: 100px;
    overflow: hidden;
    transform: rotate(180deg);
    position: absolute;
    bottom: -100px;
    left: calc(50% - 45px);
}

.tiptop_t1 .triangle-with-shadow:after,
.tiptop_t2 .triangle-with-shadow:after,
.tiptop_t3 .triangle-with-shadow:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    transform: rotate(45deg) skew(15deg, 15deg);
    top: 80px;
    left: 25px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

.tiptop_t1 .triangle-with-shadow:hover,
.tiptop_t1 .triangle-with-shadow:hover:after,
.tiptop_t2 .triangle-with-shadow:hover,
.tiptop_t2 .triangle-with-shadow:hover:after,
.tiptop_t3 .triangle-with-shadow:hover,
.tiptop_t3 .triangle-with-shadow:hover:after {
    box-shadow: none;
}

.tiptop_t1 h3,
.tiptop_t2 h3,
.tiptop_t3 h3 {
    font-size: 35px;
    text-align: center;
    color: #285ee4;
    margin: 0 0 40px;
    font-weight: 500;
}

.tiptop_t1 p,
.tiptop_t2 p,
.tiptop_t3 p {
    font-size: 20px;
    text-align: center;
    color: #285ee4;
    margin: 0 0 30px;
}

.tiptop_t1 .confirm,
.tiptop_t2 .confirm,
.tiptop_t3 .confirm {
    display: flex;
    justify-content: center;
}

.tiptop_t1 .confirm button.reset,
.tiptop_t2 .confirm button.reset,
.tiptop_t3 .confirm button.reset {
    border: 2px solid #285ee4;
    background: #fff;
    color: #285ee4;
}

.tiptop_t1 .confirm button.confirm,
.tiptop_t2 .confirm button.confirm,
.tiptop_t3 .confirm button.confirm {
    background: #285ee4;
    color: #fff;
}

#ex_add .tiptop_t1.center,
#ex_add .tiptop_t2.center,
#ex_add .tiptop_t3.center {
    left: 95;
}

#ex_add .tiptop_t1.right,
#ex_add .tiptop_t2.right,
#ex_add .tiptop_t3.right {
    right: 110;
    left: auto;
}

#ex2_340 .tiptop_t1.center,
#ex2_340 .tiptop_t2.center,
#ex2_340 .tiptop_t3.center {
    left: 95px;
}

#ex2_340 .tiptop_t1.right,
#ex2_340 .tiptop_t2.right,
#ex2_340 .tiptop_t3.right {
    right: 105px;
}

.modal .action .btn {
    width: 150px;
    height: 35px;
    background: #285ee4;
    color: #fff;
    line-height: 30px;
    border-radius: 20px;
    border: 2px solid #285ee4;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
}

.modal .confirm_btn {
    width: 150px;
    height: 35px;
    background: #285ee4;
    color: #fff;
    line-height: 30px;
    border-radius: 20px;
    border: 2px solid #285ee4;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.modal .action button.del_btn {
    background: #ff2323;
    color: #fff;
    transform: scale(1);
}

.modal .action button.del_btn:hover {
    background: #df0f0f !important;
}

.modal .action button.del_btn:active {
    background: #be0000 !important;
    transform: scale(.98);
}

.modal .action .cancel_btn {
    border: 2px solid #285ee4;
    background: #fff !important;
    color: #285ee4;
    transform: scale(1);
}

.modal .action .cancel_btn:hover {
    background: #f3f3f3 !important;
}

.modal .action .cancel_btn:active {
    background: #dbdbdb !important;
    transform: scale(.98);
}

.modal .action .send_btn {
    background: #285ee4;
    color: #fff;
    transform: scale(1);
}

.modal .action .send_btn:hover {
    background: #077474;
}

.modal .action .send_btn:active {
    background: #2E4A8F;
    transform: scale(.98);
}

.modal .message {
    font-size: 20px;
    font-weight: 400;
    color: #285ee4;
    line-height: 1.5;
    margin-bottom: 24px;
}


#ex2 #form_transfer .tiptop_t2.center {
    left: 95px;
}

#ex2 #form_transfer .tiptop_t3.right {
    left: 265px;
    right: auto;
}

#uploading {
    background: 0 0;
    box-shadow: none;
    width: auto;
}

#uploading .close-modal {
    display: none;
}

body.load .blocker {
    background: 0 0;
}

/* 資金移轉紀錄 */
#transaction {
    max-width: 1450px;
    width: 100%;
}

#transaction .condition_wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 16px;
}

#transaction .condition_wrap .create {
    height: 40px;
}

#transaction .condition_wrap .create span {
    display: flex;
    align-items: center;
    justify-content: center;
}

#transaction .condition_wrap .create span::before {
    content: url(../images/components/btn_type/create_plus.svg);
    width: 30px;
    height: 30px;
}

@media screen and (max-width: 580px) {
    #transaction .condition_wrap .create {
        width: 100%;
    }
}


#transaction .datepicker-outter {
    position: relative;
    display: flex;
    font-size: 16px;
    color: #767676;
    align-items: center;
    font-weight: 600;
    /* margin-bottom: 15px; */
}

#transaction .datepicker-outter .sc-datepicker {
    margin-left: 8px;
    margin-bottom: 0;
}


#income_record {
    width: 100%;
}

#income_record h3 {
    font-size: 35px;
    color: #285ee4;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 40px;
    position: relative;
    display: flex;
}

#income_record .overdue {
    padding-right: 24px;
    border-right: 4px solid #dbdbdb;
}

#income_record .record {
    padding-left: 24px;
}

#income_record .income {
    padding-left: 24px;
    padding-right: 24px;
    border-right: 4px solid #dbdbdb;
}

#income_record h3 a {
    padding-top: 0;
    padding-bottom: 0;
    color: #dbdbdb;
}

#income_record h3 a.active {
    color: #285ee4;
}

#income_record .tab-content>div {
    display: none;
}

#income_record .tab-content>div.active {
    display: block;
}

#income_record .create {
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    right: 0;
    color: #fff;
    font-size: 18px;
    background: #658ae6;
    padding: 15px 19px 16px 46px;
    border-radius: 23.5px;
    line-height: 1em;
    font-weight: 400;
}

#income_record .create:before {
    content: "+";
    left: 12px;
    top: 12px;
    font-size: 50px;
    margin-right: 10px;
    position: absolute;
    height: 30px;
}

#income_record .datepicker-outter {
    position: relative;
    margin-bottom: 15px;
    font-size: 16px;
    color: #6a6a6a;
    letter-spacing: 1.6px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

#income_record .datepicker-outter .sc-datepicker {
    margin-left: 20px;
    margin-bottom: 0;
    height: 28px;
    box-sizing: border-box;
}

#income_record .datepicker-outter .record_type .custom-select {
    margin-left: 20px;
}

#income_record .datepicker-outter .record_type .custom-select .select-selected {
    border-radius: 15px;
    width: 110px;
    font-size: 13px;
    font-weight: 500;
}

#income_record .datepicker-outter .record_type .custom-select .select-selected:after {
    top: 6px;
}

#income_record .datepicker-outter .record_type .custom-select .select-items div {
    font-size: 13px;
}

#income_record .datepicker-outter .record_type .custom-select .select-selected.select-arrow-active {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#income_record .datepicker-outter .record_type .custom-select .select-selected.select_changed {
    color: #767676;
}

#income_record .datepicker-outter .record_search {
    margin-left: 20px;
    background: #fff;
    height: 28px;
    border-radius: 15px;
    width: 155px;
    padding: 0 5px 0 13px;
    position: relative;
    overflow: hidden;
}

#income_record .datepicker-outter .record_search input[type=number],
#income_record .datepicker-outter .record_search input[type=text] {
    border: 0;
    font-size: 13px;
    color: #767676;
    outline: none;
    height: 28px;
}

#income_record .datepicker-outter .record_search input[type=number]::placeholder,
#income_record .datepicker-outter .record_search input[type=text]::placeholder {
    color: #c4c4c4;
}

#income_record .datepicker-outter .record_search button {
    border: 0;
    right: 0;
    top: 5px;
    position: absolute;
    background-color: transparent;
    z-index: 0;
}

#object_mgmt {
    max-width: 1450px;
    width: 100%;
}

/* #object_mgmt h3 {
    font-size: 35px;
    color: #285ee4;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 24px;
    position: relative;
    display: flex;
} */

#object_mgmt .create {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
}

#object_mgmt .create:before {
    content: url(../images/components/btn_type/create_plus.svg);
}

#object_mgmt table .text_format {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#object_mgmt table tr th:nth-child(1),
#object_mgmt table tr td:nth-child(1) {
    text-align: start;
    padding-left: 16px;
    max-width: 200px;
    min-width: 180px;
}

#object_mgmt table tr th:nth-child(2),
#object_mgmt table tr th:nth-child(3),
#object_mgmt table tr th:nth-child(4),
#object_mgmt table tr td:nth-child(2),
#object_mgmt table tr td:nth-child(3),
#object_mgmt table tr td:nth-child(4) {
    text-align: start;
}

#object_mgmt table tr td.bank_number {
    min-width: 180px;
}

@media screen and (max-width: 600px) {
    #object_mgmt h3 {
        margin-bottom: 16px;
    }

    #object_mgmt .create {
        width: 100%;
        height: 40px;
    }
}

.no_data {
    max-width: 540px;
    padding-top: 213px;
}

.no_data img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    max-width: 213px;
    margin: auto auto 30px;
}

.no_data h4 {
    text-align: center;
    font-size: 28px;
    color: #7b7b7b;
}

/* 分享帳簿 */
#share-accoount {
    width: 100%;
}

#share-accoount .pagination {
    max-width: 980px;
}

#share-accoount .title_dis {
    display: flex;
    flex-direction: row;
    align-items: start;
}


#share-accoount .title_dis span {
    padding-left: 8px;
    font-size: 15px;
    color: #767676;
    font-weight: 500;
    max-width: 400px;
    display: block;
    line-height: 1.5;
}

#share-accoount .datepicker-outter {
    font-weight: 600;
    color: #767676;
    letter-spacing: 1.6px;
    margin-bottom: 16px;
}

#share-accoount table td .disabled img {
    opacity: .4;
}

#share-accoount .sc-datepicker {
    margin-left: 10px;
    margin-bottom: 0px;
}

#share-accoount .share_link_generator {
    margin-bottom: 24px;
    position: relative;
}

#share-accoount .share_link_generator form {
    display: flex;
    width: 100%;
    align-items: center;
}

#share-accoount .share_link_generator input {
    width: 100%;
    height: 28px;
    padding: 0 136px 0 16px;
    border: 0;
    border-radius: 14px;
    outline: none;
    font-size: 12px;
    color: #7d7d7d;
    box-sizing: border-box;
}

#share-accoount .share_link_generator button {
    width: 130px;
    height: 28px;
    border: 0;
    border-radius: 21.5px;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    right: 0;
    background: #0052d9;
    color: #fff;
    outline: none;
    transition: .3s;
    transform: scale(1);
}

#share-accoount .share_link_generator button:active {
    transform: scale(.98);
}

#share-accoount .warn {
    padding: 0 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#share-accoount .warn h5 {
    font-size: 16px;
    font-weight: 600;
    color: #767676;
    letter-spacing: 1px;
}

#share-accoount .warn span {
    font-size: 13px;
    color: #a4a4a4;
}

#my-accoount {
    width: 100%;
    align-items: baseline;
}

#my-accoount.full_width {
    max-width: none;
    width: 100%;
}

#my-accoount .pagination {
    max-width: none;
    padding-right: 0;
}

#my-accoount .pagination .info {
    right: 10px;
}

/* #my-accoount h3 {
    font-size: 35px;
    color: #285ee4;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    align-items: baseline;
}

#my-accoount h3 span {
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #767676;
    font-weight: 400;
    margin-left: 20px;
} */

#my-accoount #bank-account {
    width: 100%;
    display: flex;
    margin-bottom: 32px;
    border-bottom-left-radius: 15px;
    overflow: hidden;
    border-bottom-right-radius: 15px;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .22);
    height: 160px;
    min-width: 311px;
    margin-top: -16px;
}

#my-accoount #bank-account .cur_account {
    z-index: 1;
    width: 410px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
    color: #285ee4;
    background: #fff;
    height: 125px;
    box-sizing: border-box;
    padding: 10px 15px 15px;
    position: relative;
    height: 130px;
    margin-top: 30px;
}

#my-accoount #bank-account .cur_account .default {
    width: 100%;
    /* background-image: url(../images/card4.webp); */
    background-image: url(/static/v2/images/card4_v1.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 20px;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 15px;
    line-height: 16px;
    width: 100px;
}

#my-accoount #bank-account .cur_account .bank-setting {
    top: 10px;
    right: 10px;
    position: absolute;
    width: 14px;
    height: 14px;
}

#my-accoount #bank-account .cur_account .bank-setting img {
    width: 100%;
}

#my-accoount #bank-account .cur_account .bank-info {
    padding: 0 0 10px 15px;
}

#my-accoount #bank-account .cur_account .bank-info .bank {
    border-right: 1px solid #fff;
    padding-right: 10px;
    width: 100%;
}

#my-accoount #bank-account .cur_account .bank-info .bank h3 {
    font-weight: 500;
    font-size: 23px;
    margin-bottom: 15px;
}

#my-accoount #bank-account .cur_account .bank-info .sn {
    display: flex;
    align-items: center
}

#my-accoount #bank-account .cur_account .bank-info .sn .bank_name {
    padding-right: 10px;
    line-height: 1.5;
    border-right: 2px solid #285ee4;
}

#my-accoount #bank-account .cur_account .bank-info .sn .detail {
    padding-left: 10px;
    line-height: 1.3;
}

#my-accoount #bank-account .other_account {
    width: calc(100% - 410px);
    padding-top: 12px;
    position: relative;
}

#my-accoount #bank-account .other_account ul {
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
    margin-left: -20px;
}

#my-accoount #bank-account .other_account ul li {
    padding: 0 16px;
    width: calc(100% + 15px);
    margin-left: -20px;
    border-top-right-radius: 15px;
    background-color: #658ae6;
    overflow: hidden;
    margin-top: 35px;
    border-top-left-radius: 15px;
    height: 100px;
    box-shadow: 5px 3px 6px 0 rgba(0, 0, 0, .16);
    transition: .3s;
    border: 1px solid #285ee4;
}

#my-accoount #bank-account .other_account ul li:last-child {
    margin-left: 0;
}

#my-accoount #bank-account .other_account ul li:hover {
    margin-top: 5px;
}

#my-accoount #bank-account .other_account ul li a {
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 19px;
    line-height: 1.9em;
    justify-content: center;
    height: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

#my-accoount #bank-account .other_account ul li a .bank {
    line-height: 1.2;
}

#my-accoount #bank-account .other_account .cur_bank_amount {
    bottom: 0;
    position: absolute;
    display: flex;
    width: 100%;
    height: 74px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #fff;
    margin-top: -15px;
    box-shadow: 0 3px 6px 0 #000;
    padding: 0 30px 18px 20px;
    box-sizing: border-box;
    align-items: end;
    justify-content: space-between;
}

#my-accoount #bank-account .other_account .cur_bank_amount .cur_bank_select_content {
    display: none;
}

#my-accoount #bank-account .other_account .cur_bank_amount .current_amount1 {
    width: calc(50% - 10px);
    display: flex;
    border-right: 2px solid #285ee4;
}

#my-accoount #bank-account .other_account .cur_bank_amount .current_amount2 {
    padding-left: 10px;
    width: calc(50% - 10px);
    display: flex;
}

#my-accoount #bank-account .other_account .cur_bank_amount .text {
    position: absolute;
    color: #285ee4;
    font-size: 18px;
    letter-spacing: 1.8px;
    font-weight: 400;
    padding-bottom: 10px;
}

#my-accoount #bank-account .other_account .cur_bank_amount .amount_content {
    color: #285ee4;
    width: 100%;
    text-align: center;
}

#my-accoount #bank-account .other_account .cur_bank_amount .amount_content .unit {
    font-size: 25px;
}

#my-accoount #bank-account .other_account .cur_bank_amount .amount_content .amount {
    font-size: 45px;
}

#my-accoount .datepicker-outter {
    font-weight: 600;
    color: #767676;
    letter-spacing: 1.6px;
}

#my-accoount .datepicker-outter .sc-datepicker {
    margin-left: 16px;
}

#my-accoount #bank-account .other_account ul li.add_bank_account {
    background: #76bcbc;
}

#my-accoount #bank-account .other_account ul li.add_bank_account a {
    display: flex;
    align-items: center;
    height: 37px;
    align-content: center;
}

#my-accoount #bank-account .other_account ul li.add_bank_account a img {
    height: 20px;
    margin-right: 5px;
    display: block;
}

#step1 {
    position: absolute;
    z-index: 10;
}

#instruction {
    visibility: hidden;
}

#step_text1 {
    position: absolute;
    right: 140%;
    top: 35%;
    max-width: 580px;
    width: 580px;
}

#step_text1 img {
    width: 100%;
}

#step_text1:after {
    content: '';
    position: absolute;
    width: 143px;
    height: 47px;
    bottom: -40px;
    background-image: url(../images/arrow1.png);
    background-size: cover;
}

#step2 {
    position: absolute;
    z-index: 10;
    right: 100%;
}

#step2 img {
    width: 100%;
}

#step2 .c1 {
    width: 403px;
    right: 180px;
    position: absolute;
    top: -40px;
}

#step2 .c2 {
    width: 160px;
    top: 20px;
    position: absolute;
    right: 10px;
    top: -40px;
}

/* 按鈕 */
.action_block {
    display: flex;
    flex-direction: column;
    margin: auto;
}

.action_block a[type="button"] {
    width: 199px;
    height: 40px;
    margin-bottom: 16px;
    border: 2px solid #359B9B;
    border-radius: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.5;
    line-height: 2;
    box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
}

.action_block .btn_step {
    background-color: #359B9B;
    color: #fff;
}

.action_block .btn_skip {
    background-color: #fff;
    color: #359B9B;
}

.action_block .btn_step:hover {
    background-color: #285ee4;
}

.action_block .btn_step:active {
    background-color: #005A5A;
    transform: scale(.98)
}

.action_block .btn_skip:hover {
    background-color: #ECECEC;
}

.action_block .btn_skip:active {
    background-color: #DBDBDB;
    transform: scale(.98);
}

#step5 {
    position: absolute;
    z-index: 105;
    width: 97%;
    display: flex;
    background: #fff;
    padding: 15px 0 0 15px;
    border-radius: 10px;
    top: 0;
    left: 0;
}

#step5 img {
    width: 100%;
}

#step5 .step5_text {
    position: absolute;
    top: 280px;
    left: -3px;
}

#step5 .action_block {
    position: absolute;
    top: 56px;
}

#step6 {
    position: absolute;
    z-index: 105;
    display: flex;
    background: #fff;
    padding: 15px 0 0 15px;
    border-radius: 10px;
    top: 60px;
}

#step6 img {
    width: 100%;
}

#step6 .step6_text {
    position: absolute;
    top: 256px;
}

#step6 .card4 {
    overflow: hidden;
}

.main-content .info_content #home .sc-container #step6 .card4 {
    width: 307px;
}

#step6 .card5 {
    min-width: 600px;
}

#step6 .action_block {
    position: absolute;
    top: 50px;
}

#step72 {
    position: absolute;
    z-index: 105;
    width: 90%;
}

.main-content .info_content #step72 #instruction2 {
    margin-top: 0;
    width: 30%;
}

#home .sc-components #step7 .sc-box {
    width: 148px;
    min-width: 148px;
}

#step72 #instruction2 .news-card {
    position: absolute;
    width: 30%;
    margin: 12px auto 25px;
    padding: 22px 28.5px 44.3px 29px;
    border-radius: 15px;
    background-color: #fff;
    min-height: 466px;
}

#step7 {
    position: absolute;
    z-index: 105;
    /* width: 97%; */
    width: 100%;
    display: flex;
    background: #fff;
    padding: 0 0;
    border-radius: 10px;
    padding-left: 32px;
    left: 126px;
    top: 828px;
    max-width: 980px;
}

#step7 .sc-components_content {
    margin-right: 0;
}

#home .sc-components #step7 .sc-box {
    margin-right: 12px;
}

#step7 img {
    width: 100%;
}

#step7 .aw1 {
    position: absolute;
    width: 100px;
    top: -110px;
    left: 46px;
}

#step7 .aw2 {
    position: absolute;
    width: 180px;
    right: 36px;
    z-index: 333333;
    top: -224px;
}

#step7 .action_block {
    position: absolute;
    top: -352px;
    left: 768px;
}

#step_text7 {
    position: absolute;
    width: 690px;
    top: -356px;
    left: 150px;
}

@media screen and (max-width: 1500px) {
    #step7 img {
        width: 90%;
    }
}

@media screen and (max-width: 1400px) {
    #step_text7 {
        top: -310px;
        left: 126px;
    }

    #step7 img {
        width: 80%;
    }

    #step7 .aw2 {
        /* top: -192px; */
        display: none;
    }
}

.paginationjs {
    line-height: 1.6;
    font-family: Marmelad, lucida grande, Arial, hiragino sans gb, Georgia, sans-serif;
    font-size: 14px;
    box-sizing: initial;
}

.paginationjs:after {
    display: table;
    content: " ";
    clear: both;
}

.paginationjs .paginationjs-pages {
    float: left;
}

.paginationjs .paginationjs-pages ul {
    float: left;
    margin: 0;
    padding: 0;
    border-radius: 7px;
}

.paginationjs .paginationjs-go-button,
.paginationjs .paginationjs-go-input,
.paginationjs .paginationjs-nav {
    float: left;
    margin-left: 10px;
    font-size: 14px;
}

.paginationjs .paginationjs-pages li {
    float: left;
    border-right: none;
    list-style: none;
}

.paginationjs .paginationjs-pages li.active {
    border: none;
}

.paginationjs .paginationjs-pages li.active>a {
    height: 30px;
    line-height: 30px;
    background: #285ee4;
    color: #fff;
}

.paginationjs .paginationjs-pages li.disabled>a {
    opacity: .3;
}

.paginationjs .paginationjs-pages li.disabled>a:hover {
    background: 0 0;
}

.paginationjs .paginationjs-pages li:first-child,
.paginationjs .paginationjs-pages li:first-child>a {
    border-radius: 3px 0 0 3px;
}

.paginationjs .paginationjs-pages li:last-child>a {
    border-radius: 0 3px 3px 0;
}

.paginationjs .paginationjs-go-input>input[type=text] {
    width: 30px;
    height: 28px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 0;
    font-size: 14px;
    text-align: center;
    vertical-align: baseline;
    outline: 0;
    box-shadow: none;
    box-sizing: initial;
}

.paginationjs .paginationjs-go-button>input[type=button] {
    min-width: 40px;
    height: 30px;
    line-height: 28px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #aaa;
    text-align: center;
    padding: 0 8px;
    font-size: 14px;
    vertical-align: baseline;
    outline: 0;
    box-shadow: none;
    color: #333;
    cursor: pointer;
    vertical-align: middle\9
}

.paginationjs.paginationjs-theme-blue .paginationjs-go-input>input[type=text],
.paginationjs.paginationjs-theme-blue .paginationjs-pages li {
    border-color: #289de9;
}

.paginationjs .paginationjs-go-button>input[type=button]:hover {
    background-color: #f8f8f8;
}

.paginationjs .paginationjs-nav {
    height: 30px;
    line-height: 30px;
}

.paginationjs .paginationjs-go-button,
.paginationjs .paginationjs-go-input {
    margin-left: 5px\9
}

.paginationjs.paginationjs-small {
    font-size: 12px;
}

.paginationjs.paginationjs-small .paginationjs-pages li>a {
    min-width: 26px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
}

.paginationjs.paginationjs-small .paginationjs-pages li.active>a {
    height: 26px;
    line-height: 26px;
}

.paginationjs.paginationjs-small .paginationjs-go-input {
    font-size: 12px;
}

.paginationjs.paginationjs-small .paginationjs-go-input>input[type=text] {
    width: 26px;
    height: 24px;
    font-size: 12px;
}

.paginationjs.paginationjs-small .paginationjs-go-button {
    font-size: 12px;
}

.paginationjs.paginationjs-small .paginationjs-go-button>input[type=button] {
    min-width: 30px;
    height: 26px;
    line-height: 24px;
    padding: 0 6px;
    font-size: 12px;
}

.paginationjs.paginationjs-small .paginationjs-nav {
    height: 26px;
    line-height: 26px;
    font-size: 12px;
}

.paginationjs.paginationjs-big {
    font-size: 16px;
}

.paginationjs.paginationjs-big .paginationjs-pages li>a {
    min-width: 36px;
    height: 34px;
    line-height: 34px;
    font-size: 16px;
}

.paginationjs.paginationjs-big .paginationjs-pages li.active>a {
    height: 36px;
    line-height: 36px;
}

.paginationjs.paginationjs-big .paginationjs-go-input {
    font-size: 16px;
}

.paginationjs.paginationjs-big .paginationjs-go-input>input[type=text] {
    width: 36px;
    height: 34px;
    font-size: 16px;
}

.paginationjs.paginationjs-big .paginationjs-go-button {
    font-size: 16px;
}

.paginationjs.paginationjs-big .paginationjs-go-button>input[type=button] {
    min-width: 50px;
    height: 36px;
    line-height: 34px;
    padding: 0 12px;
    font-size: 16px;
}

.paginationjs.paginationjs-big .paginationjs-nav {
    height: 36px;
    line-height: 36px;
    font-size: 16px;
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li>a {
    color: #289de9;
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li>a:hover {
    background: #e9f4fc;
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li.active>a {
    background: #289de9;
    color: #fff;
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li.disabled>a:hover {
    background: 0 0;
}

.paginationjs.paginationjs-theme-blue .paginationjs-go-button>input[type=button] {
    background: #289de9;
    border-color: #289de9;
    color: #fff;
}

.paginationjs.paginationjs-theme-green .paginationjs-go-input>input[type=text],
.paginationjs.paginationjs-theme-green .paginationjs-pages li {
    border-color: #449d44;
}

.paginationjs.paginationjs-theme-blue .paginationjs-go-button>input[type=button]:hover {
    background-color: #3ca5ea;
}

.paginationjs.paginationjs-theme-green .paginationjs-pages li>a {
    color: #449d44;
}

.paginationjs.paginationjs-theme-green .paginationjs-pages li>a:hover {
    background: #ebf4eb;
}

.paginationjs.paginationjs-theme-green .paginationjs-pages li.active>a {
    background: #449d44;
    color: #fff;
}

.paginationjs.paginationjs-theme-green .paginationjs-pages li.disabled>a:hover {
    background: 0 0;
}

.paginationjs.paginationjs-theme-green .paginationjs-go-button>input[type=button] {
    background: #449d44;
    border-color: #449d44;
    color: #fff;
}

.paginationjs.paginationjs-theme-yellow .paginationjs-go-input>input[type=text],
.paginationjs.paginationjs-theme-yellow .paginationjs-pages li {
    border-color: #ec971f;
}

.paginationjs.paginationjs-theme-green .paginationjs-go-button>input[type=button]:hover {
    background-color: #55a555;
}

.paginationjs.paginationjs-theme-yellow .paginationjs-pages li>a {
    color: #ec971f;
}

.paginationjs.paginationjs-theme-yellow .paginationjs-pages li>a:hover {
    background: #fdf5e9;
}

.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.active>a {
    background: #ec971f;
    color: #fff;
}

.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.disabled>a:hover {
    background: 0 0;
}

.paginationjs.paginationjs-theme-yellow .paginationjs-go-button>input[type=button] {
    background: #ec971f;
    border-color: #ec971f;
    color: #fff;
}

.paginationjs.paginationjs-theme-red .paginationjs-go-input>input[type=text],
.paginationjs.paginationjs-theme-red .paginationjs-pages li {
    border-color: #c9302c;
}

.paginationjs.paginationjs-theme-yellow .paginationjs-go-button>input[type=button]:hover {
    background-color: #eea135;
}

.paginationjs.paginationjs-theme-red .paginationjs-pages li>a {
    color: #c9302c;
}

.paginationjs.paginationjs-theme-red .paginationjs-pages li>a:hover {
    background: #faeaea;
}

.paginationjs.paginationjs-theme-red .paginationjs-pages li.active>a {
    background: #c9302c;
    color: #fff;
}

.paginationjs.paginationjs-theme-red .paginationjs-pages li.disabled>a:hover {
    background: 0 0;
}

.paginationjs.paginationjs-theme-red .paginationjs-go-button>input[type=button] {
    background: #c9302c;
    border-color: #c9302c;
    color: #fff;
}

.paginationjs.paginationjs-theme-red .paginationjs-go-button>input[type=button]:hover {
    background-color: #ce4541;
}

.paginationjs .paginationjs-pages li.paginationjs-next {
    border-right: 1px solid #aaa;
}

.paginationjs .paginationjs-go-input>input[type=text] {
    line-height: 28px\9;
    vertical-align: middle\9
}

.paginationjs.paginationjs-big .paginationjs-pages li>a {
    line-height: 36px\9
}

.paginationjs.paginationjs-big .paginationjs-go-input>input[type=text] {
    height: 36px\9;
    line-height: 36px\9
}

.paginationjs-prev {
    background: 0 0 !important;
    text-indent: -99999;
    position: absolute;
}

.paginationjs-prev {
    left: -30px;
    top: 5px;
}

.paginationjs-prev a {
    width: 0 !important;
    height: 0 !important;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid #b8b8b8;
    margin-right: 15px;
}

.paginationjs-next {
    background: 0 0 !important;
    text-indent: -99999;
    position: absolute;
    right: -30px;
    top: 5px;
}

.paginationjs-next a {
    width: 0 !important;
    height: 0 !important;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #b8b8b8;
    margin-left: 15px;
}

#subscription {
    max-width: 1450px;
    width: 100%;
    position: relative;
}

#subscription .title {
    width: 66%;
    align-items: start;
    justify-content: space-between;
}

#subscription .process_bar {
    position: relative;
    top: 8px;
}

#subscription .process_bar ul {
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 0;
}

#subscription .process_bar ul:before {
    content: '';
    position: absolute;
    width: calc(50% - 32px);
    height: 2px;
    background: #285ee4;
    top: 11px;
    left: 32px;
    z-index: -1;
}

#subscription .process_bar ul:after {
    content: '';
    position: absolute;
    width: calc(50% - 32px);
    height: 2px;
    background: #c6c6c6;
    top: 11px;
    left: calc(50%);
    z-index: -1;
}

#subscription .process_bar ul li {
    font-size: 16px;
}

#subscription .process_bar ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#subscription .process_bar ul li a .num {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    border: 2px solid #285ee4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #285ee4;
    font-weight: 300;
    box-sizing: border-box;
    padding-bottom: 2px;
    background: #fff;
}

#subscription .process_bar ul li a.active .num {
    background: #285ee4;
    color: #fff;
}

#subscription .process_bar ul li a .text {
    height: 30px;
    font-weight: 500;
    color: #285ee4;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

@media screen and (max-width:1277px) {
    #subscription .title {
        width: 100%;
        flex-direction: column;
    }

    #subscription .process_bar {
        width: 100%;
    }

    #subscription .process_bar ul {
        width: 100%;
    }
}

#subscription a.upgrade {
    width: 150px;
    height: 40px;
    font-size: 18px;
    font-weight: 500;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background-color: #ffaf00;
}

#subscription a.upgrade:hover {
    background-color: #ffaf00;
}

#subscription .btn_renewal,
#subscription .btn_upgrade {
    width: 150px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    position: absolute;
    right: 0;
}

#subscription .btn_upgrade {
    background: #ffaf00;
    color: #fff;
}

#subscription .location_hor {
    display: flex;
    flex-direction: row;
}

#subscription .location_ver {
    display: flex;
    flex-direction: column;
}

#subscription #program {
    display: flex;
    max-width: 1450px;
    margin-bottom: 24px;
}

#subscription #program .plan_selection {
    max-width: 717px;
    min-width: 343px;
    width: 100%;
    min-height: 328px;
    padding: 16px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

#subscription #program .module_selection {
    max-width: 717px;
    min-width: 343px;
    width: 100%;
    min-height: 100%;
    margin-left: 24px;
    padding: 16px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    position: relative;
}

#subscription #program h4 {
    font-size: 28px;
    line-height: 37px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #285ee4;
}

#subscription #program p {
    color: #285ee4;
    font-size: 18px;
    margin-top: 8px;
    margin-left: 8px;
}

.plan_content {
    display: flex;
    flex-wrap: wrap;
}

.plan_content .plan_hand {
    width: 100%;
}

.module_content {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.plan_content .plan_content_select {
    width: 46%;
    min-width: 320px;
    height: 88px;
    background: #fff;
    margin: 8px;
    border-radius: 8px;
    border: 2px solid transparent;
    position: relative;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

.plan_content .plan_content_select .plan_select_account,
.module_content .module_content_select .module_select_account {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.plan_content .plan_content_select .plan_img,
.module_content .module_content_select .plan_img {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    display: none;
}

#subscription #program .plan_select_account p {
    position: absolute;
    bottom: 28px;
    right: 16px;
    z-index: 4;
    font-size: 26px;
}

.module_body {
    margin-top: 24px;
}

.module_dev {
    margin: auto;
}

.module_dev img {
    margin-bottom: 16px;
}

.module_content .module_content_select {
    width: 46%;
    height: 88px;
    min-width: 242px;
    background: #fff;
    margin: 8px;
    border-radius: 8px;
    border: 2px solid transparent;
    position: relative;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

.module_content .module_content_select.active {
    border: 2px solid #285ee4;
    background: #dfe9e9;
}

.plan_select_checked,
.module_select_checked {
    height: 100%;
    display: flex;
    align-items: center;
}

.plan_content_select .tb_container,
.module_content_select .tb_container {
    padding-left: 0 !important;
}

.plan_content_select input,
.module_content_select input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.plan_content_select .tb_container .checkmark {
    position: absolute;
    top: 8px;
    left: 8px;
    height: 24px;
    width: 24px;
    border: 2px solid #285ee4;
    border-radius: 50px;
}

.module_content_select .chk-container .checkmark {
    position: absolute;
    top: 2px;
    border-radius: 3px;
    left: 0;
    height: 20px;
    width: 20px;
}

.plan_content_select:hover input~.checkmark,
.module_content_select:hover input~.checkmark {
    background-color: #fff;
    border: 2px solid #285ee4;
}

.plan_content_select input:checked~.checkmark,
.module_content_select input:checked~.checkmark {
    background: #fff;
    border: 2px solid #285ee4;
}

.plan_content_select .checkmark:after,
.module_content_select .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.plan_content_select .outter,
._content_select .outter {
    top: 1px;
    position: relative;
    display: block;
    left: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: .3s;
    margin-right: 0;
    margin-bottom: 5px;
}

.plan_content_select .tb_container .outter:hover {
    background: 0 0;
}

.plan_content_select .tb_container .outter:active {
    background: 0 0;
}

.plan_content_select input:checked~.outter .checkmark:after,
.module_content_select input:checked~.outter .checkmark:after {
    display: block;
}

.plan_content_select .checkmark:after {
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #285ee4;
}

.plan_select_text {
    margin-left: -10px;
}

#subscription #program .module_select_account p {
    position: absolute;
    bottom: 28px;
    right: 16px;
    z-index: 4;
    font-size: 24px;
}

#subscription #program .plan_select_account .annually_account,
#subscription #program .module_select_account .annually_account {
    color: #ff8000;
}

#subscription #program .plan_select_account span,
#subscription #program .module_select_account span {
    position: absolute;
    bottom: 8px;
    right: 18px;
    z-index: 4;
    color: #285ee4;
    font-size: 14px;
}

.module_content_select .chk-container {
    float: none;
    font-size: 16px;
    text-align: center;
    font-weight: 300;
    margin-bottom: 0;
    padding-left: 40px;
}

.module_content_select .outter {
    left: 10px;
    top: -14px;
    padding-top: 5px;
    padding-left: 5px;
    height: 33px;
    width: 330px;
    border-radius: 50%;
    position: absolute;
    width: 30px;
    height: 30px;
    transition: .3s;
}

.module_content_select .outter .checkmark {
    top: 8px;
    left: 8px;
    border: 2px solid #285ee4;
    z-index: 2;
    background: 0 0;
}

.module_content_select .chk-container input:checked~.outter .checkmark {
    background: #088080;
}

.module_content_select .chk-container input:checked~.outter .checkmark:after {
    display: block;
    border-color: #fff;
}

.module_content_select .chk-container .checkmark:after {
    left: 5px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid #138b8b;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.plan_content .plan_content_select:hover,
.module_content .module_content_select:hover {
    border: 2px solid #285ee4;
    background: #dfe9e9;
}

.plan_content a.active {
    border: 2px solid #285ee4;
    background: #dfe9e9;
}

/* ================== 開帳設定 ================== */

.account_set {
    max-width: 686px;
}

.item_wrap {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

.item_wrap .item_header {
    width: 100%;
    height: 40px;
    background: #285ee4;
}

.item_wrap .item_body {
    width: 100%;
    /* height: 100%; */
    background-color: #fff;
    padding: 24px 16px
}

.account_set .action {
    width: 100%;
    text-align: end;
}

.account_set .action .btn {
    width: 150px;
    height: 40px;
    font-size: 18px;
    letter-spacing: 1.6px;
}


.account_set .area {
    width: 311px;
    /* border: 2px solid red; */
    margin-bottom: 24px;
}

.account_set .area+.area {
    margin-left: 24px;
}

.account_set .input_field {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.account_set .input_field:not(:last-child) {
    margin-bottom: 24px;
}

/*填入框前標題*/
.account_set .input_field label {
    font-size: 18px;
    color: #3d3d3d;
    width: 72px;
    min-width: 72px;
    margin-right: 24px;
    text-align-last: justify;
    display: block;
    position: relative;
    white-space: nowrap;
}

.account_set .i_info {
    position: absolute;
    top: 2px;
    right: -20px;
}

/*填入框*/
.account_set .input_field input {
    width: 211px;
    height: 36px;
    font-size: 18px;
    background: #fff;
    color: #3d3d3d;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 8px;
    padding: 8px 16px;
    text-align: left;
    box-sizing: border-box;
}

.account_set .input_field.error input {
    border: 1px solid red;
}

.account_set .input_field.error input {
    border: 1px solid red;
}

.account_set .input_field input:disabled {
    cursor: not-allowed;
    background: #bebebe;
}

.account_set .input_field .error_message {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #ff0000;
    font-size: 14px;
    visibility: hidden;
}

.input_field .valid_msg {
    position: absolute;
    bottom: -14px;
    right: 8px;
    font-size: 13px;
    color: red;
    display: none;
}

.input_field.error .valid_msg {
    display: block;
}

@media screen and (max-width: 1665px) {
    .plan_content .plan_content_select {
        width: 46%;
        min-width: 242px;
    }

    #subscription #program .plan_select_text p,
    #subscription #program .module_select_text p {
        font-size: 14px;
    }

    #subscription #program .plan_select_account p,
    #subscription #program .module_select_account p {
        font-size: 20px;
    }

    #subscription #program .plan_select_account span,
    #subscription #program .module_select_account span {
        font-size: 12px;
    }
}

@media screen and (max-width: 1400px) {
    #subscription .location_hor {
        flex-direction: column;
    }

    #subscription #program .plan_selection {
        max-width: 100%;
        min-width: 311px;
    }

    #subscription #program .module_selection {
        max-width: 100%;
        min-width: 311px;
        margin-left: 0;
        margin-top: 24px;
        min-height: 0;
    }

    .plan_content .plan_content_select,
    .module_content .module_content_select {
        width: 46%;
        min-width: 242px;
    }

    #subscription #program .plan_select_text p,
    #subscription #program .module_select_text p {
        font-size: 18px;
        margin-left: 8px;
        margin-top: 8px;
    }

    #subscription #program .plan_select_account p {
        font-size: 26px;
    }

    #subscription #program .plan_select_account span,
    #subscription #program .module_select_account span {
        font-size: 14px;
    }
}

#checkout_subscription.tableFixHead {
    min-height: 300px;
    max-height: 100%;
    box-sizing: border-box;
}

#checkout_subscription h4 {
    font-size: 28px;
    line-height: 37px;
    font-weight: 500;
    margin-bottom: 16px;
    padding-left: 16px;
    color: #285ee4;
}

#checkout_subscription .package_table_content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#checkout_subscription .package_table_content .total {
    padding: 0;
    width: 100%;
    position: relative;
}

#checkout_subscription .package_table_content .total .amount {
    position: absolute;
    right: 36px;
}

#checkout_subscription table.package_table tr th,
#checkout_subscription table.package_table tr td {
    height: 44px;
}

#checkout_subscription table.package_table tbody tr .tb3 {
    text-align: center;
}

#checkout_subscription .package_mobile_content {
    display: none;
}

#checkout_subscription .package_table .tb1,
#checkout_subscription .package_table .tb2 {
    min-width: 120px;
    width: 20%;
}

#checkout_subscription .package_table .tb5,
#checkout_subscription .package_table .tb6 {
    min-width: 140px;
    width: 20%;
}

#checkout_subscription .package_table .tb3 {
    min-width: 120px;
    padding: 0 16px;
    width: 20%;
}

#checkout_subscription .package_table .tb4 {
    min-width: 200px;
}

#subscription .my_package {
    height: 44px;
    border-radius: 50px;
    padding: 0 0 0 16px;
    margin: 0;
    background: #ff8000;
    color: #fff;
    display: inline-block;
    display: inline-flex;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    align-items: center;
    vertical-align: middle;
}

#subscription .my_package .text {
    display: inline-block;
}

#subscription .my_package .renew {
    height: 32px;
    width: 76px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #000;
    background-color: #fff;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

#subscription #package {
    margin-bottom: 40px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

#subscription #package h4 {
    font-size: 28px;
    color: #285ee4;
    margin: 0;
    padding: 16px;
    line-height: 37px;
    font-weight: 500;
    position: relative;
}

#subscription #package tbody tr {
    height: 84px;
}

#subscription #package table.plist {
    width: 100%;
    display: inline-table;
}

#subscription #package table.plist thead {
    background: #285ee4;
}

#subscription #package table.plist thead th {
    padding: 10px 0 12px;
    font-size: 18px;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 24px;
}

#subscription #package table.plist thead th.tb1 {
    padding-left: 25px;
    width: 25%;
}

#subscription #package table.plist thead th.tb2 {
    padding-left: 25px;
    width: 20%;
}

#subscription #package table.plist thead th.tb3 {
    padding-left: 25px;
    width: 20%;
}

#subscription #package table.plist thead th.tb4 {
    padding-left: 25px;
    width: 35%;
}

#subscription #package table.plist tbody td {
    padding: 20px 0;
    font-size: 18px;
    font-weight: 300;
    color: #2E4A8F;
    letter-spacing: 1px;
    vertical-align: middle;
}

#subscription #package table.plist tbody td.tb1 {
    padding-left: 25px;
    width: 25%;
}

#subscription #package table.plist tbody td.tb2 {
    padding-left: 25px;
    width: 20%;
}

#subscription #package table.plist tbody td.tb3 {
    padding-left: 25px;
    width: 20%;
}

#subscription #package table.plist tbody td.tb4 {
    padding-left: 25px;
    width: 35%;
}

#subscription #package .plist_mb {
    display: none;
}

#subscription #package_history {
    margin-bottom: 40px;
    padding-bottom: 50px;
    background: #fff;
    border-radius: 15px;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}

#subscription #package_history h4 {
    font-size: 28px;
    line-height: 37px;
    color: #285ee4;
    margin: 0;
    padding: 16px;
    font-weight: 500;
    position: relative;
}

#subscription #package_history .accordion_content_mb {
    display: none;
}

#subscription #package_history.close {
    padding-bottom: 20px;
}

#subscription #package_history.close h4 .panel_toggle {
    transform: rotate(-180deg);
}

#subscription #package_history.close .accordion_body,
#subscription #package_history.close .accordion_head {
    display: none;
}

#subscription #package_history .accordion_head {
    display: flex;
    width: 100%;
    background: #fff;
    color: #2E4A8F;
}

#subscription #package_history .accordion_head>div {
    font-size: 18px;
    padding: 10px 0 12px;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 24px;
    color: #fff;
    background: #285ee4;
    box-sizing: border-box;
}

#subscription #package_history .accordion_head .tb {
    position: absolute;
}

#subscription #package_history .accordion_head .tb1 {
    padding-left: 55px;
    width: 22%;
    min-width: 250px;
}

#subscription #package_history .accordion_head .tb2 {
    padding-left: 16px;
    width: 20%;
}

#subscription #package_history .accordion_head .tb3 {
    padding-left: 16px;
    width: 12%;
}

#subscription #package_history .accordion_head .tb4 {
    padding-left: 16px;
    width: 12%;
}

#subscription #package_history .accordion_head .tb5 {
    padding-left: 16px;
    width: 12%;
}

#subscription #package_history .accordion_head .tb6 {
    padding-left: 16px;
    width: 12%
}

#subscription #package_history .accordion_head .tb7 {
    padding-left: 16px;
    width: 12%;
}

#subscription #package_history .accordion_head.active {
    background: #285ee4;
}

#subscription #package_history .accordion_head.active>div {
    color: #fff;
}

#subscription #package_history .module_list {
    transition: .2s;
    height: 0;
    overflow: hidden;
    width: 100%;
    max-height: 0;
    height: auto;
    box-sizing: border-box;
}

#subscription #package_history .module_list .module {
    padding: 20px;
    position: relative;
}

#subscription #package_history .module .mhead {
    box-sizing: border-box;
    border-left: 1px solid #2E4A8F;
    border-right: 1px solid #2E4A8F;
    border-top: 1px solid #2E4A8F;
    display: flex;
    width: 100%;
}

#subscription #package_history .module .mhead:before {
    content: "";
    height: 20px;
    width: 2px;
    border-left: 2px dashed #2E4A8F;
    position: absolute;
    top: -1px;
    left: 40px;
    display: none;
}

#subscription #package_history .module .mhead>div {
    font-size: 18px;
    padding: 20px 0 12px;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 24px;
    color: #fff;
    background: #285ee4;
    box-sizing: border-box;
}

#subscription #package_history .module .mhead .mb1 {
    width: 30%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

#subscription #package_history .module .mhead .mb2 {
    width: 40%;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

#subscription #package_history .module .mhead .mb3 {
    width: 30%;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
}

#subscription #package_history .module .mbody {
    border-left: 1px solid #2E4A8F;
    border-right: 1px solid #2E4A8F;
    border-bottom: 1px solid #2E4A8F;
    padding: 0 20px;
}

#subscription #package_history .module .mbody .list {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #2E4A8F;
}

#subscription #package_history .module .mbody .list:last-child {
    border-bottom: 0;
}

#subscription #package_history .module .mbody .list>div {
    font-size: 18px;
    padding: 20px 0 12px;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 24px;
    color: #2E4A8F;
}

#subscription #package_history .module .mbody .list .mb1 {
    width: 30%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

#subscription #package_history .module .mbody .list .mb2 {
    padding: 10px;
    width: 40%;
    text-align: center;
    box-sizing: border-box;
}

#subscription #package_history .module .mbody .list .mb3 {
    text-align: center;
    padding: 10px 0;
    width: 30%;
    padding-left: 2.5%;
    box-sizing: border-box;
    padding-left: calc(5% - 20px);
}

#subscription #package_history .accordion_body.open .module_list {
    max-height: 1500px;
    transition: 2s;
}

#subscription #package_history .accordion_body.open .module_list .module .mhead:before {
    display: block;
}

#subscription #package_history h4 .panel_toggle {
    position: absolute;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    border-radius: 50%;
    transition: .3s;
    right: 10px;
}

#subscription #package_history h4 .panel_toggle:hover {
    background-color: #E0E7F8;
}

#subscription #package_history h4 .panel_toggle:active {
    background-color: #B9C9F4;
}

#subscription #package_history .accordion_body.open .head {
    border-bottom: 1px solid #2E4A8F;
}

#subscription #package_history .accordion_body.open .head .tb a {
    transform: scale(.95) rotate(180deg);
}

#subscription #package_history .accordion_body:last-child .head {
    border-bottom: 1px solid #2E4A8F;
}

#subscription #package_history .accordion_body .head {
    border-top: 1px solid #2E4A8F;
    display: flex;
    width: 100%;
}

#subscription #package_history .accordion_body .head>div {
    font-size: 18px;
    padding: 10px 0 12px;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 24px;
    color: #2E4A8F;
    box-sizing: border-box;
}

#subscription #package_history .accordion_body .head .tb a:hover {
    background-color: #E0E7F8;
}

#subscription #package_history .accordion_body .head .tb a:active {
    background-color: #B9C9F4;
}

#subscription #package_history .accordion_body .head .tb1 {
    padding-left: 55px;
    width: 22%;
    min-width: 250px;
}

#subscription #package_history .accordion_body .head .tb2 {
    padding-left: 16px;
    width: 20%;
}

#subscription #package_history .accordion_body .head .tb3 {
    padding-left: 16px;
    width: 12%;
}

#subscription #package_history .accordion_body .head .tb4 {
    padding-left: 16px;
    width: 12%;
}

#subscription #package_history .accordion_body .head .tb5 {
    padding-left: 16px;
    width: 12%;
}

#subscription #package_history .accordion_body .head .tb6 {
    padding-left: 16px;
    width: 12%;
}

#subscription #package_history .accordion_body .head .tb7 {
    padding-left: 31px;
    width: 12%;
    padding-top: 0;
    padding-bottom: 0;
}

#subscription #package_history .accordion_body .head .tb7 .preview {
    width: 44px;
    height: 44px;
    padding-top: 1px;
}

@media screen and (max-width: 1010px) {
    #subscription #package_history .accordion_body .head .tb7 {
        padding-left: 12px;
    }
}

#subscription #package_history .accordion_body .head .tb7 .preview a.imgpreview {
    transition: .3s;
    background-image: url(../../images/eye_g.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 44px;
    transform: scale(.95);
    height: 44px;
    display: block;
    border-radius: 50%;
}

#subscription #package_history .accordion_body .head .tb7 .preview a.imgpreview:hover {
    border-radius: 50%;
    background: #E0E7F8;
}

#subscription #package_history .accordion_body .head .tb7 .preview a.imgpreview:active {
    border-radius: 50%;
    background: #B9C9F4;
}

#subscription #package_history .accordion_body .head .tb {
    position: absolute;
}

#subscription #package_history .accordion_body .head .tb a {
    transform: scale(.95);
    top: 1px;
    left: 5px;
    display: block;
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: .3s;
}

#subscription #package_history .module .tb {
    height: 44px;
    padding-left: 16px;
    line-height: 44px;
    border-top: 1px solid #2E4A8F;
}

#subscription #package_history .module .mb {
    height: 44px;
    padding-left: 16px;
    line-height: 44px;
    border-top: 1px solid #2E4A8F;
}

#subscription #package_history .accordion_body .tb .preview a.imgpreview {
    transition: .3s;
    background-image: url(../images/eye_g.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 44px;
    transform: scale(.95);
    height: 44px;
    display: block;
    border-radius: 50%;
}

#subscription #package_history .accordion_body .tb .preview a.imgpreview:hover {
    border-radius: 50%;
    background: #E0E7F8;
}

#subscription #package_history .accordion_body .tb .preview a.imgpreview:active {
    border-radius: 50%;
    background: #B9C9F4;
}

#subscription #package_history .module .mhead:before {
    content: '';
    height: 20px;
    width: 2px;
    border-left: 2px dashed #2E4A8F;
    position: absolute;
    top: -1px;
    left: 40px;
    display: none;
}

#subscription #package_history .module .mhead .mb {
    width: 120px;
    height: 44px;
    padding-left: 16px;
    line-height: 44px;
    border-top: 1px solid #2E4A8F;
}

#subscription #package_history .module .mbody .mb {
    width: 230px;
    height: 44px;
    padding-left: 16px;
    line-height: 44px;
    border-top: 1px solid #2E4A8F;
}

#package_history .case2 {
    margin-top: 60px
}


#subscription h3 .tabs {
    position: relative;
    display: flex;
    align-items: center;
}

#subscription h3 .tabs a {
    padding-top: 0;
    padding-bottom: 0;
    font-weight: 500;
    color: #dbdbdb;
    transition: .3s;
}

#subscription h3 .tabs a.active {
    color: #285ee4;
}

#subscription h3 .tabs a:nth-child(1) {
    padding-right: 20px;
    position: relative;
}

#subscription h3 .tabs a:nth-child(1):after {
    content: '';
    position: absolute;
    height: 18px;
    width: 2px;
    background: #e0e0e0;
    top: 16px;
    right: 0;
}

#subscription h3 .tabs a:nth-child(2) {
    margin-left: 20px;
    padding-right: 20px;
    position: relative;
}

#subscription h3 .tabs a:nth-child(2):after {
    content: '';
    position: absolute;
    height: 18px;
    width: 2px;
    background: #e0e0e0;
    top: 16px;
    right: 0;
}

#subscription h3 .tabs a:last-child {
    padding-left: 20px;
}

#subscription .tab-content {
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    background-color: #fff;
    height: calc(100vh - 307px);
    overflow-y: scroll;
}

#subscription .tab-content #p1 {
    line-height: 1.4em;
}

#subscription .tab-content #p2 p,
#subscription .tab-content #p3 p {
    margin-bottom: 0;
}

#subscription .tab-content>div {
    display: none;
    font-size: 18px;
    line-height: 40px;
    color: #285ee4;
    text-align: justify;
}

#subscription .tab-content>div.active {
    display: block;
}

#subscription .tab-content>div p {
    margin-bottom: 1em;
}

#subscription .tab-content>div.active {
    display: block;
}

#checkout_panel {
    margin-bottom: 40px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    padding: 24px 0;
}

#checkout_panel .tabs {
    display: flex;
    justify-content: space-between;
    width: 284px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 30px;
}

#checkout_panel .tabs:after {
    content: '';
    width: 2px;
    height: 18px;
    background: #e0e0e0;
    position: absolute;
    left: calc(50% - 1px);
    top: 5px;
}

#checkout_panel .tabs a {
    font-size: 28px;
    line-height: 1;
    color: #e0e0e0;
    letter-spacing: 1px;
}

#checkout_panel .tabs a.active {
    color: #285ee4;
}

#checkout_panel .tabs a:first-child {
    position: relative;
}

#checkout_panel .tab_contens>div.active {
    display: block !important;
}

#checkout_panel .tab_contens>div {
    display: none !important;
}

#checkout_panel #online {
    width: 620px;
    margin-left: auto;
    margin-right: auto;
}

#checkout_panel #online .tpfield {
    height: 40px;
    width: 400px;
    border-radius: 8px;
    border: 1px solid gray;
    margin: 5px 0;
    padding: 5px;
}

.tappay-field-focus {
    border-color: #285ee4;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #285ee4;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #285ee4;
}

#checkout_panel #online .card_info1 .card_data .item:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    background: #707070;
    top: 16px;
    right: -21px;
}

#checkout_panel #online .card_info1 .card_data .item:last-child:after {
    display: none;
}

#checkout_panel #online .card_info1,
#checkout_panel #online .card_info2,
#checkout_panel #online .card_info3 {
    display: flex;
    align-items: flex-end;
    margin-bottom: 60px;
}

#checkout_panel #online .card_info1 .name,
#checkout_panel #online .card_info2 .name,
#checkout_panel #online .card_info3 .name {
    width: 100px;
    font-size: 18px;
    text-align: right;
    color: #285ee4;
    margin-right: 11px;
}

#checkout_panel #online .card_info1 .card_data,
#checkout_panel #online .card_info2 .card_data,
#checkout_panel #online .card_info3 .card_data {
    width: calc(100% - 90px);
    display: flex;
    align-items: center;
}

#checkout_panel #online .card_info1 .card_data .item,
#checkout_panel #online .card_info2 .card_data .item,
#checkout_panel #online .card_info3 .card_data .item {
    width: 82px;
    height: 36px;
    margin-right: 31px;
    position: relative;
}

#checkout_panel #online .card_info1 .card_data .item input,
#checkout_panel #online .card_info2 .card_data .item input,
#checkout_panel #online .card_info3 .card_data .item input {
    width: 82px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    height: 36px;
    margin-right: 31px;
    font-size: 18px;
    color: #6a6a6a;
    text-align: center;
}

#checkout_panel #online .card_info1 .card_data .item input::placeholder,
#checkout_panel #online .card_info2 .card_data .item input::placeholder,
#checkout_panel #online .card_info3 .card_data .item input::placeholder {
    color: #e0e0e0;
}

#checkout_panel #atm .inner_box {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
    width: 700px;
    border: 1px solid #2E4A8F;
    border-radius: 15px;
    display: flex;
    min-height: 176px;
}

#checkout_panel #atm .inner_box .atm_info {
    width: 50%;
    position: relative;
}

#checkout_panel #atm .inner_box .atm_info:after {
    top: 0;
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    background: #2E4A8F;
}

#checkout_panel #atm .inner_box .atm_info ul {
    padding: 26px 0 24px 20px;
}

#checkout_panel #atm .inner_box .atm_info ul li {
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #6a6a6a;
    font-weight: 300;
    line-height: 24px;
}

#checkout_panel #atm .inner_box .atm_info ul li:last-child {
    margin-bottom: 0;
}

#checkout_panel #atm .inner_box .atm_info ul li label {
    color: #285ee4;
    width: 80px;
    font-weight: 500;
    display: block;
    margin-right: 20px;
}

#checkout_panel #atm .inner_box .atm_data {
    width: 50%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner label {
    color: #285ee4;
    width: 80px;
    display: block;
    margin-right: 20px;
    font-size: 18px;
    font-weight: 500;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner input {
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    height: 36px;
    padding: 0 15px;
    width: 200px;
    outline: none;
    transition: .1s;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner input::placeholder {
    color: #c6c6c6;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner input:hover,
#checkout_panel #atm .inner_box .atm_data .atm_data_inner input:focus {
    border: 2px solid #76bcbc !important;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner input.not_vaild {
    border: 2px solid red !important;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner input.active {
    border: 2px solid #285ee4 !important;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner input.is_vailded {
    border: 2px solid #285ee4 !important;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner .not_vaild~.vaild_text {
    display: block;
}

#checkout_panel #atm .inner_box .atm_data .atm_data_inner .vaild_text {
    display: none;
    color: red;
    position: absolute;
    top: -17px;
    right: 30px;
    font-size: 14px;
}

#checkout_panel #atm p {
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    color: #6a6a6a;
    margin-bottom: 24px;
}

#checkout_panel .amount_total {
    display: flex;
    background: #f9f9f9;
}

#checkout_panel .amount_total .total {
    display: flex;
    padding: 20px 0 20px calc(50% + 85px);
    font-size: 18px;
    font-weight: 300;
    color: #2E4A8F;
}

#checkout_panel .amount_total .total .amount {
    margin-left: 20px;
    color: red;
    font-weight: 500;
    margin-right: 10px;
}

#checkout_panel .amount_total.pm2 .total {
    padding: 20px 0 20px calc(50% + 218px);
}

#checkout_panel .action {
    display: flex;
    justify-content: center;
    /* padding-top: 30px; */
    padding: 24px 16px 16px;
}

#checkout_panel .action .btn {
    width: 250px;
    height: 48px;
    font-size: 26px;
}

#checkout_panel .action .btn+.btn {
    margin-left: 8px;
}


#checkout_panel .action button.confirm:hover {
    border-color: #2E4A8F;
    background: #2E4A8F;
}

#checkout_package,
#checkout_subscription,
#checkout_info2 {
    margin-bottom: 40px;
    background: #fff;
    border-radius: 15px;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    padding: 16px 0;
}

#checkout_package {
    margin-bottom: 30px;
}

#checkout_package .tabs {
    padding: 0 20px;
    display: inline-flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 20px;
}

#checkout_package .tabs a:first-child {
    position: relative;
    padding-right: 20px;
}

#checkout_package .tabs a:first-child:after {
    content: '';
    width: 2px;
    height: 18px;
    background: #e0e0e0;
    position: absolute;
    right: 0;
    top: 12px;
}

#checkout_package .tabs a:last-child {
    padding-left: 20px;
}

#checkout_package .tabs a {
    font-size: 28px;
    line-height: 1;
    color: #e0e0e0;
    letter-spacing: 1px;
    line-height: 37px;
}

#checkout_package .tabs a.active {
    color: #285ee4;
}

#checkout_package .tabs a:first-child {
    position: relative;
}

#checkout_package .tab_contens>div.active {
    display: block !important;
    border-radius: 0;
}

#checkout_package .tab_contens>div {
    display: none !important;
}

.module_table,
.package_table {
    width: 100%;
    margin-bottom: 20px;
}

.module_table thead,
.package_table thead {
    background: #285ee4;
}

.module_table thead th,
.package_table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    min-height: 43px;
}

.module_table thead th.tb3,
.package_table thead th.tb3 {
    min-height: 43px;
    padding-left: 70px;
}

.module_table tbody tr td,
.package_table tbody tr td {
    border-bottom: 1px solid #2E4A8F;
}

.module_table tbody tr.disable td,
.package_table tbody tr.disable td {
    color: #e0e0e0;
}

.module_table tbody tr.disable td.tb,
.package_table tbody tr.disable td.tb {
    position: relative;
}

.module_table tbody tr.disable td.tb:before,
.package_table tbody tr.disable td.tb:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.module_table tbody tr.disable td .rdcontainer .checkmark,
.package_table tbody tr.disable td .rdcontainer .checkmark {
    border-color: #e0e0e0;
}

.module_table tbody tr.disable td .rdcontainer input:checked~.outter .checkmark:after,
.package_table tbody tr.disable td .rdcontainer input:checked~.outter .checkmark:after {
    background: #e0e0e0;
}

.module_table tbody td,
.package_table tbody td {
    color: #2E4A8F;
    font-weight: 300;
    height: 43px;
    vertical-align: middle;
    font-size: 18px;
}

.module_table tbody td .bonus,
.package_table tbody td .bonus {
    padding-top: 4px;
    line-height: 1.2;
    color: #ff8000;
    font-size: 14px;
    font-weight: 500;
}

.module_table tbody td.tb,
.package_table tbody td.tb {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 57px;
}

.module_table tbody td.tb .rdcontainer,
.package_table tbody td.tb .rdcontainer {
    height: 42px;
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.module_table tbody td.tb1,
.package_table tbody td.tb1 {
    width: 15%;
}

.module_table tbody td.tb2,
.package_table tbody td.tb2 {
    width: 15%;
}

.module_table tbody td.tb3,
.package_table tbody td.tb3 {
    width: 15%;
}

.module_table tbody td.tb3 .amount,
.package_table tbody td.tb3 .amount {
    width: 100px;
    text-align: right;
    line-height: 1.2;
}

.module_table tbody td.tb3 .month_pay,
.package_table tbody td.tb3 .month_pay {
    line-height: 1.2;
    color: #ff8000;
    font-size: 14px;
    font-weight: 500;
}

.module_table tbody td.tb4,
.package_table tbody td.tb4 {
    width: 20%;
}

.module_table tbody td.tb5,
.package_table tbody td.tb5 {
    width: 15%;
    color: #2E4A8F;
}

.module_table tbody td.tb6,
.package_table tbody td.tb6 {
    width: calc(20% - 57px);
    color: #2E4A8F;
}

#subscription #program .module_selection.close .module_body {
    display: none;
}

#subscription #program .module_selection h4 .panel_toggle {
    position: absolute;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    border-radius: 50%;
    transition: .3s;
    right: 10px;
}

#subscription #program .module_selection h4 .panel_toggle:hover {
    background-color: #E0E7F8;
}

#subscription #program .module_selection h4 .panel_toggle:active {
    background-color: #B9C9F4;
}

#subscription #program .module_selection.close h4 .panel_toggle {
    transform: rotate(-180deg);
}

#subscription #program .module_selection .total {
    padding-left: calc(75% + 57px);
    height: 64px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
}

#subscription #program .module_selection .total .amount {
    align-items: center;
    font-size: 18px;
    display: flex;
    color: #2E4A8F;
    font-weight: 300;
}

#subscription #program .module_selection .total .amount>span {
    margin-left: 50px;
    margin-right: 10px;
    display: block;
    color: red;
    font-weight: 600;
}

#subscription #program .module_selection .module_body.close {
    display: none;
}

#checkout_subscription.close .accordion_body,
#checkout_subscription.close .accordion_head {
    display: none;
}

#checkout_subscription h4 .panel_toggle {
    position: absolute;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    border-radius: 50%;
    transition: .3s;
    right: 10px;
}

#checkout_subscription .total {
    padding-left: calc(75% + 57px);
    height: 64px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
}

#checkout_subscription .total .amount {
    align-items: center;
    font-size: 18px;
    display: flex;
    color: #2E4A8F;
    font-weight: 300;
}

#checkout_subscription .total .amount>span {
    margin-left: 50px;
    margin-right: 10px;
    display: block;
    color: red;
    font-weight: 600;
}

#checkout_info2 {
    margin-bottom: 30px;
}

#checkout_info2 h4 {
    font-size: 28px;
    line-height: 1;
    color: #285ee4;
    letter-spacing: 1px;
    line-height: 37px;
    padding-left: 20px;
    margin-bottom: 20px;
}

#checkout_info2 .pay_tabs {
    display: flex;
    padding: 0 15px 0 150px;
    align-items: center;
    margin-bottom: 32px;
}

#checkout_info2 .pay_tabs .name {
    font-size: 18px;
    color: #285ee4;
}

#checkout_info2 .pay_tabs .invoice {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    padding: 10px;
    border-radius: 8px;
    margin-left: 10px;
}

#checkout_info2 .pay_tabs .invoice .chk-container .checkmark:after {
    left: 4px;
    top: 0px;
    width: 5px;
    height: 11px;
    border: solid #138b8b;
    border-width: 0 4px 4px 0;
}

#checkout_info2 .pay_tabs .invoice.active {
    background: #285ee4;
}

#checkout_info2 .pay_tabs .invoice.active label {
    color: #fff;
}

#checkout_info2 .pay_tabs .invoice label {
    margin-bottom: 0;
    color: #285ee4;
}

#checkout_info2 .pay_tabs .invoice .chk-container .checkmark {
    width: 20px;
    height: 20px;
    top: 0;
    border-radius: 2px;
    border: 2px solid;
}

#checkout_info2 .pay_cotents {
    padding-left: 135px;
}

#checkout_info2 .pay_cotents>div {
    display: none;
}

#checkout_info2 .pay_cotents>div.active {
    display: flex;
    flex-wrap: wrap;
}

#checkout_info2 .pay_cotents .box {
    position: relative;
    width: 50%;
    max-width: 540px;
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    padding: 0 15px;
    box-sizing: border-box;
}

#checkout_info2 .pay_cotents .box .vaild_text {
    color: red;
    position: absolute;
    top: -17px;
    right: 30px;
    font-size: 14px;
    display: none;
}

#checkout_info2 .pay_cotents .box .name {
    font-size: 18px;
    width: 72px;
    color: #285ee4;
    line-height: 24px;
    margin-right: 10px;
}

#checkout_info2 .pay_cotents .box input {
    height: 36px;
    width: calc(100% - 88px);
    border-radius: 8px;
    border: solid 1px #c6c6c6;
    outline: none;
    padding: 0 2%;
    font-size: 18px;
    transition: .1s;
}

#checkout_info2 .pay_cotents .box input[type=email] {
    position: relative;
}

#checkout_info2 .pay_cotents .box input:hover,
#checkout_info2 .pay_cotents .box input:focus {
    border: 2px solid #76bcbc !important;
}

#checkout_info2 .pay_cotents .box input.not_vaild {
    border: 2px solid red !important;
}

#checkout_info2 .pay_cotents .box input.active {
    border: 2px solid #285ee4 !important;
}

#checkout_info2 .pay_cotents .box input.is_vailded {
    border: 2px solid #285ee4 !important;
}

#checkout_info2 .pay_cotents .box .not_vaild~.vaild_text {
    display: block;
}

#payment {
    padding: 30px 0;
    border-top: 1px solid #2E4A8F;
}

#payment .chk1 {
    font-size: 16px;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

#payment .chk1 .chk-container {
    float: none;
    font-size: 16px;
    /* text-align: center; */
    font-weight: 300;
    margin-bottom: 0;
    padding-left: 40px;
}

#payment .chk-container .checkmark:after {
    top: 0;
    left: 5px;
}

#payment .chk1 .chk-container .warn {
    padding-top: 8px;
    color: red;
}

#payment .chk1 .chk-container a {
    color: #2E4A8F;
}

#payment .chk1 .outter {
    left: 0;
    top: -11px;
    padding-top: 5px;
    padding-left: 5px;
    height: 33px;
    width: 330px;
    border-radius: 50%;
    position: absolute;
    width: 34px;
    height: 34px;
    transition: .3s;
}

#payment .chk1 .outter:hover {
    background: #E0E7F8;
}

#payment .chk1 .outter:active {
    background: #B9C9F4;
}

#payment .chk1 .outter .checkmark {
    top: 8px;
    left: 8px;
    border: 2px solid #285ee4;
    z-index: 2;
    background: 0 0;
}

#payment .chk2 {
    margin-bottom: 30px;
    font-size: 20px;
    display: flex;
    justify-content: center;
}

#payment .chk2 .chk-container {
    float: none;
    font-size: 20px;
    text-align: center;
    font-weight: 300;
    margin-bottom: 0;
    padding-left: 40px;
}

#payment .chk2 .chk-container .warn {
    padding-top: 8px;
    color: red;
}

#payment .chk2 .outter {
    left: 0;
    top: -9px;
    padding-top: 5px;
    padding-left: 5px;
    height: 33px;
    width: 330px;
    border-radius: 50%;
    position: absolute;
    width: 34px;
    height: 34px;
    transition: .3s;
}

#payment .chk2 .outter:hover {
    background: #E0E7F8;
}

#payment .chk2 .outter:active {
    background: #B9C9F4;
}

#payment .chk2 .outter .checkmark {
    top: 8px;
    left: 8px;
    border: 2px solid #285ee4;
    z-index: 2;
    background: 0 0;
}

#payment .action button {
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    font-size: 26px;
    text-align: center;
    color: #fff;
    width: 250px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #285ee4;
    border: 0;
    border-radius: 30px;
    transition: .3s;
}

#payment .action button:hover {
    background: #2E4A8F;
}

#payment .chk-container input:checked~.outter .checkmark {
    background: #088080;
}

#payment .chk-container input:checked~.outter .checkmark:before {
    display: block;
    border-color: #fff;
}

#payment .chk-container input:checked~.outter .checkmark:after {
    display: block;
    border-color: #fff;
}

.box_email {
    font-size: 12px;
    color: #aaa;
    position: absolute;
    top: 40px;
    left: 100px
}

#checkout_panel #online .vaild_text {
    display: none;
    color: red;
    position: absolute;
    top: -17px;
    right: -2px;
    font-size: 14px;
    width: 100%;
}

#checkout_panel #online input {
    outline: none;
    transition: .1s;
}

#checkout_panel #online input:hover,
#checkout_panel #online input:focus {
    border: 2px solid #76bcbc !important;
}

#checkout_panel #online input.not_vaild {
    border: 2px solid red !important;
}

#checkout_panel #online input.active {
    border: 2px solid #285ee4 !important;
}

#checkout_panel #online input.is_vailded {
    border: 2px solid #285ee4 !important;
}

#checkout_panel #online input.not_vaild~.vaild_text {
    display: block;
}

.main-content {
    flex-direction: column;
}

.main-content #main_title {
    margin-bottom: 24px;
}

.main-content #main_title h3 {
    font-size: 35px;
    color: #285ee4;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
}



#account-info .adate_box {
    box-sizing: border-box;
    width: 480px;
    margin: 0 0 0 24px;
    overflow: scroll;
}



#account-info .box .tappay_info {
    box-sizing: border-box;
    padding: 4px 16px;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #fff;
    height: 36px;
    color: #3d3d3d;
    font-size: 18px;
    letter-spacing: 2px;
    min-width: 289px;
    outline: none;
}

#account-info .textarea {
    font-size: 20px;
    color: #3d3d3d;
    font-weight: 500;
    display: flex;
    align-items: baseline;
}

#account-info .textarea label {
    width: 86px;
    margin-right: 8px;
    text-align-last: justify;
}

#account-info .textarea-gg {
    width: 413px;
    height: 96px;
    box-sizing: border-box;
    padding: 4px 16px;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #fff;
    color: #3d3d3d;
    font-size: 18px;
    outline: none;
}

#account-info .input-field-upload {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: 24px;
    height: 70px;
}

#account-info .input-field-upload label {
    width: 128px;
    font-size: 20px;
    color: #3d3d3d;
    font-weight: 500;
}

.upload_outter {
    width: 100%;
}

#upload_icon {
    width: 72px;
    height: 72px;
    position: relative;
    bottom: 24px;
    left: 100px;
    cursor: pointer;
}

input[type=file] {
    display: none;
}

#account-info .click-box {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    margin-top: 24px;
    height: 50px;
    line-height: 22px;
}

#account-info .click-box label {
    font-size: 20px;
    color: #3d3d3d;
    font-weight: 500;
    padding-right: 5px;
}

#account-info .click-box input {
    cursor: pointer;
    width: 24px;
    height: 24px;
    margin-left: 24px;
}

#line {
    width: 100%;
    height: 20px;
    border-top: 1px solid #285ee4;
}

/* .btn {
    cursor: pointer;
    border: 0;
    background: #285ee4;
    border-radius: 20px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    transition: .3s;
    transform: scale(1);
    padding: 2px 24px;
    box-sizing: border-box;
}

.btn:hover {
    color: #fff;
    background: #077474;
}

.btn:focus {
    color: #fff;
    background: #2E4A8F;
}

.btn:active {
    transform: scale(.98);
} */

.btn.btn-success {
    background: #285ee4;
    border-color: #285ee4;
}

.btn.btn-success:hover {
    background: #658ae6;
    border-color: #658ae6;
}

.btn_block {
    margin-top: 24px;
    flex: none;
}

.btn_block .action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.btn_block .action button {
    width: 150px;
    height: 40px;
    color: #fff;
    border: 0;
    border-radius: 20px;
    margin: 0 10px;
    font-size: 18px;
    letter-spacing: 1.6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s;
    transform: scale(1);
}

.btn_block .action .confirm {
    position: relative;
    color: #fff;
    background: #285ee4;
}

.btn_block .action .confirm_btn {
    position: relative;
    color: #fff;
    background: #285ee4;
}

.btn_block .action .reset {
    color: #285ee4;
    background: #fff;
    border: 2px solid #285ee4;
}

.btn_block .action .delete {
    position: relative;
    color: #fff;
    background: red;
}

.main-content .btn_block .action .reset:hover {
    background: #f3f3f3;
    border: 2px solid #285ee4;
    color: #285ee4;
}

.btn_block .action button:active {
    transform: scale(.9);
}

.btn_block .action .confirm .loading:before {
    display: block;
}

.action .confirm:before {
    display: none;
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(../images/loadingx.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 10px;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.tableFixHead .data-table th,
.tableFixHead .data-table td {
    box-sizing: border-box;
    min-width: 136px;
    padding: 0 16px 0 0;
}

.tableFixHead .details_table th:nth-child(2),
.tableFixHead .details_table td:nth-child(2),
.tableFixHead .details_table th:nth-child(3),
.tableFixHead .details_table td:nth-child(3),
.tableFixHead .details_table th:nth-child(4),
.tableFixHead .details_table td:nth-child(4) {
    min-width: 114px;
    padding-right: 16px;
}

.tableFixHead .details_table th:nth-child(5),
.tableFixHead .details_table td:nth-child(5),
.tableFixHead .IncomeExpenses_table th:nth-child(5),
.tableFixHead .IncomeExpenses_table td:nth-child(5) {
    min-width: 200px;
    padding: 0;
}

.main-content.main-content_identify {
    padding-left: 140px;
}

.datepicker {
    z-index: 180 !important;
}

#identify_content h3 {
    font-size: 35px;
    color: #285ee4;
    font-weight: 600;
    padding-bottom: 24px;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    align-items: baseline;
}

#identify_content #form_post {
    width: 1320px;
    white-space: nowrap;
    margin-top: 16px;
}

#identify_content .content-body {
    padding-top: 0 !important;
}

#identify_content .content-body .page-header {
    width: 1760px;
    background-color: #edeff3;
    background-color: #fff;
    display: flex;
    padding: 16px 0;
    position: relative;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

#identify_content .content-body .page-header .identify_title {
    width: 200px;
    margin-left: 16px;
}

#identify_content .content-body .page-header .identify_preview {
    width: 200px;
    position: absolute;
    left: 1330px;
}

#identify_content .content-body .page-header h2 {
    border: none;
    font-family: MicrosoftJhengHei;
    font-size: 18px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-align: left;
    vertical-align: top;
    color: gray;
}

#identify_content .content-body .page-header p {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: gray;
    margin-top: 2px;
}

#identify_content .content-body .preview_content {
    width: 422px;
    height: 480px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
    overflow: hidden;
}

#identify_content .content-body .preview_content .preview_0 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    position: relative;
}

#identify_content .content-body .preview_content .preview_0 .image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    padding: 0;
    position: absolute;
    cursor: move;
}

#identify_content .handsontable {
    border-radius: 10px 10px 0 0
}

#identify_content .handsontable table.htCore thead th {
    background: #285ee4;
    color: #fff;
    vertical-align: middle;
}

#identify_content .handsontable th {
    background-color: transparent;
    font-size: 15px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 1.5px;
    color: #666;
    text-align: center;
    vertical-align: middle;
    border-color: red;
}

#identify_content .handsontable table.htCore tbody tr:nth-child(2n+1) {
    background: #f8f8f8;
}

#identify_content .handsontable.ht_clone_top {
    z-index: 1;
}

#identify_content .ht_clone_top_left_corner th {
    border-bottom: none;
}

#identify_content .ht_clone_left th {
    border-right: none;
    border-left: none;
}

#identify_content .ht_clone_top th {
    border-top: none;
    border-right: none;
    border-bottom: none;
    background-color: #edeff3;
}

#identify_content .ht_clone_top_left_corner th {
    border-right: none;
    background-color: #edeff3;
}

#identify_content .ht_clone_top_left_corner th {
    border: none;
    background-color: #edeff3;
}

#identify_content .ht_master tr:nth-of-type(odd)>td {
    background-color: transparent;
    font-size: calc(0.5em + 0.3vw);
    color: #6f6f6f;
    text-align: center;
    vertical-align: middle;
    border: none;
}

#identify_content .ht_master tr:nth-of-type(even)>td {
    background-color: transparent;
    font-size: calc(0.5em + 0.3vw);
    color: #6f6f6f;
    text-align: center;
    vertical-align: middle;
    border: none;
}

#identify_content tr,
th,
thead {
    border: none !important;
    background-color: none;
}

#identify_content .htCore tr:nth-child(even) {
    background-color: #fcfcfc;
}

#identify_content .htCore tr:hover td:first-child {
    background-color: #f6f6f6 !important;
    border-left: 4px solid #285ee4 !important;
}

#identify_content tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
}

#identify_content tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
}

#identify_content td {
    height: 44px !important;
}

#identify_content th {
    font-family: Microsoft JhengHei;
}

#identify_upload_content h3 {
    font-size: 35px;
    color: #285ee4;
    font-weight: 600;
    padding-bottom: 8px;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    align-items: baseline;
    margin-left: 8px;
}

#identify_upload_content>a.back {
    align-items: center;
    margin-right: 20px;
    width: 330px;
    position: relative;
    transition: .3s;
    text-decoration: none;
    margin-bottom: 16px;
}

#identify_upload_content>a.back:before {
    content: '';
    position: absolute;
    height: 47px;
    width: 47px;
    background: 0 0;
    border-radius: 50%;
    z-index: 0;
    transition: .3s;
    top: 0;
}

#identify_upload_content h3>a.back:hover:before {
    background: #E0E7F8;
}

#identify_upload_content h3>a.back:active:before {
    background: #B9C9F4;
}

#identify_upload_content h3>a.back img {
    position: absolute;
    display: block;
    height: 47px;
    width: 47px;
    z-index: 2;
}

#identify_upload_content .card-body {
    background: #fff;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0/5%);
    box-shadow: 0 3px 6px 0 rgb(0 0 0/16%);
    border-radius: 15px;
    height: 150px;
    padding: 50px 24px;
    width: 100%;
}

#identify_upload_content .card-body .control_fileupload {
    min-width: 650px;
    margin-left: 16px;
}

.custom-file-label {
    width: 345px;
}

#identify_upload_content .card-body .input-append {
    position: relative;
    display: flex;
}

#identify_upload_content .card-body .input-append .btn-default {
    width: 60px;
    background: #ff2323;
    border: 1px solid #ff2323;
    color: #fff;
    margin: 0;
    position: absolute;
    top: 0;
    left: 345px;
    height: calc(1.5em + 0.75rem + 2px);
    border-radius: 0;
}

.fileupload .btn.identifyBtn {
    margin-left: 222px;
}

#control_position {
    width: 100%;
    height: 100%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ex_import_success {
    border-radius: 28px;
    max-width: 180px;
    height: 180px;
    background-image: url(../images/loading.gif);
    background-position: center;
    background-size: 35% 35%;
    background-repeat: no-repeat;
    padding-top: 6px;
    position: fixed;
    top: 40%;
    left: 50%;
    background-color: #fff;
}

#ex_import_success .close-modal {
    display: none;
}

#ex_import_success h3 {
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 0;
    font-size: 12px;
    text-align: center;
    color: #285ee4;
}

#ex4_modal {
    max-width: 782px;
    box-sizing: border-box;
    border-radius: 20px;
    background: #fff;
}

#ex4_modal .close-modal {
    display: none;
}

#ex4_modal .inner {
    padding: 30px 0;
    text-align: center;
}

#ex4_modal .inner h4 {
    font-size: 45px;
    color: #285ee4;
}

#ex4_modal .inner .message {
    font-size: 38px;
    line-height: 66px;
    color: #285ee4;
    margin-bottom: 46px;
}

#ex4_modal .inner .message>span {
    margin-left: 100px;
}

#ex4_modal .inner a {
    margin: auto;
    color: #fff;
    font-size: 26px;
    width: 180px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #285ee4;
    transition: .3s;
    border-radius: 25px;
}

#ex4_modal .inner a:hover {
    background: #005a59;
}

#ex4_modal .inner a.subscribe {
    background-color: #ffaf00;
    transition: .3s;
}

#ex4_modal .inner a.subscribe:hover {
    background-color: #d39100;
}


#ex4_modal.notice_modal {
    width: 100%;
    height: 450px;
    top: 30%;
    left: 30%;
}

#ex5_modal {
    max-width: 782px;
    box-sizing: border-box;
    border-radius: 20px;
}

#ex5_modal .close-modal {
    display: none;
}

#ex5_modal .inner {
    padding: 30px 0;
    text-align: center;
}

#ex5_modal .inner h4 {
    font-size: 36px;
    color: #285ee4;
}

#ex5_modal .inner .message {
    font-size: 20px;
    line-height: 30px;
    color: #285ee4;
    margin-bottom: 24px;
}

#ex5_modal .inner a {
    margin: auto;
    color: #fff;
    font-size: 26px;
    width: 180px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #285ee4;
    transition: .3s;
    border-radius: 25px;
}

#ex5_modal .inner a:hover {
    background: #005a59;
}

#ex5_modal .inner a.subscribe {
    background-color: #ffaf00;
    transition: .3s;
}

#ex5_modal .inner a.subscribe:hover {
    background-color: #d39100;
}

#ex5_modal.notice_modal {
    width: 100%;
    height: 450px;
    top: 30%;
    left: 30%;
}

/*點擊註解*/
.full_width .title {
    display: flex;
    align-items: center;
    /* margin-bottom: 24px; */
}

.full_width .title .i_info {
    margin-left: 16px;
}

.full_width h3 {
    margin-bottom: 0;
}

/* 教學圖片step01 */
.teaching-img-conten_01 {
    position: absolute;
    top: 480px;
    left: 582px;
}

@media(max-width: 930px) {
    .teaching-img-conten_01 {
        position: relative;
        top: 0;
        left: -16px;
        z-index: 2;
        margin-bottom: 16px;
    }
}

.teaching-img-conten .step01_img {
    width: 343px;
}

/* 教學圖片step02 */
.teaching-img-conten_02 {
    position: absolute;
    top: 823px;
    left: 580px;
}

@media(max-width: 1200px) {
    .teaching-img-conten_02 {
        top: 873px;
    }
}

@media(max-width: 930px) {
    .teaching-img-conten_02 {
        top: 76px;
        left: 4px;
        z-index: 2;
    }
}

.teaching-img-conten .step01_img {
    width: 343px;
}



@media screen and (max-width: 1277px) {
    .main_intro_first #instruction1 .instruction-card {
        top: -16px;
    }

    .main-content .main_intro .main_chart {
        flex-direction: column;
    }

    .main-content .main_intro .main_chart .card_section1 {
        width: 100%;
        margin-bottom: 16px;
    }

    .main-content .main_intro .main_chart .card_section1 .card3 {
        margin-right: 0px;
    }

    .main-content .main_intro .main_chart .card_section1 .card1,
    .card2,
    .card3 {
        min-width: calc(34% - 20px);
    }

    .main-content .main_intro .main_chart .chart_section {
        width: 31%;
    }

    #step6 {
        top: 60px;
    }

    #step7 {
        left: 160px;
        top: 1200px;
    }

    #step7 .action_block {
        top: -310px;
    }

    .main-content .main_intro .main_chart .chart_section .myChart {
        min-width: 300px;
    }

    .main-content .info_content #step72 #instruction2 {
        width: 94%;
    }

    #step72 #instruction2 .news-card {
        width: 94%;
        margin-top: 0;
    }

    #checkout_panel .amount_total.pm2 .total {
        padding: 20px 0 20px calc(50% + 100px);
    }

    #subscription h3 {
        margin-bottom: 24px;
    }


    #checkout_subscription.tableFixHead {
        max-height: none;
        overflow: auto;
    }

    #checkout_subscription .total {
        padding-left: calc(60% + 57px);
    }

    #subscription table td {
        font-size: 16px;
    }

    .analysis_chart .main_chart {
        flex-direction: column;
    }

    .analysis_chart .main_chart .analysis_section {
        width: 100%;
        margin-bottom: 16px;
        min-width: 0;
    }

    .analysis_chart .main_chart .chart_section {
        width: calc(100% - 5px);
        margin-left: 0;
    }

    .chart_section .myChart .chart_content .expense_chart,
    .chart_section .myChart .chart_content .income_chart {
        box-sizing: border-box;
        height: 300px !important;
        width: 300px !important;
    }

    .main_intro_first #instruction1 #step1 #step_text1 {
        display: none;
    }

    .card5 {
        margin-right: 0;
        width: calc(69% - 20px);
    }
}

@media screen and (max-width: 1200px) {
    #my-accoount #bank-account {
        min-height: 240px;
    }

    #my-accoount #bank-account .cur_account {
        height: 100%;
        width: 32%;
        overflow: visible;
    }

    #my-accoount #bank-account .other_account {
        width: 70%;
    }

    #my-accoount #bank-account .other_account ul li {
        height: 150px;
        box-shadow: -5px 3px 6px 0 rgb(0 0 0/16%);
    }

    #my-accoount #bank-account .other_account ul li a {
        width: 100%;
        height: 120px;
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        text-orientation: mixed;
        text-align: start;
        padding-top: 10px;
    }

    #my-accoount #bank-account .other_account ul li.add_bank_account a {
        display: flex;
        align-items: center;
        height: 110px;
        padding: 4px 0 0;
    }

    #my-accoount #bank-account .other_account ul li.add_bank_account a img {
        height: 20px;
        margin-right: 0;
        display: block;
        margin-bottom: 6px;
    }

    #account-info {
        padding-top: 0;
    }

    #my-accoount #bank-account .cur_account .bank-info .sn {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #my-accoount #bank-account .cur_account .bank-info .sn .detail {
        padding: 0;
    }

    #identify_upload_content .card-body {
        padding: 24px;
    }

    #identify_upload_content .card-body .control_fileupload {
        margin-left: 0;
    }
}

@media screen and (max-width: 930px) {
    .modal .modal-content .input_field.w100 .reset_error_message {
        right: 8px;
    }

    .main-content .main_intro {
        width: 100%;
        display: flex;
        flex-direction: column;
        /* margin-left: 10px */
    }

    .main-content .main_intro .main_chart {
        position: relative;
    }

    .main-content .main_intro .main_chart .card_section {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .main-content .main_intro .main_chart .card_section1 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .main-content .main_intro .main_chart .card_section1 .card1,
    .card2,
    .card3 {
        width: 47%;
    }

    .main-content .main_intro .main_chart .chart_section {
        width: 47%;
        display: flex;
        position: absolute;
        top: 240px;
        right: 32px;
    }

    .main-content .info_content #step72 #instruction2 {
        margin-top: 16px;
        width: 100%;
    }

    #step72 #instruction2 .news-card {
        width: 100%;
    }

    /* #my-accoount h3 {
        margin-bottom: 24px;
    } */

    .main-content .info_content {
        margin-top: 332px;
    }

    .main-content .info_content #home .sc-container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .main-content .info_content #home .sc-container .card_section2 .card_section2_estimate {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        height: 100%;
    }

    .main-content .info_content #home .sc-container .card {
        width: 47%;
    }

    .main-content .info_content #home .sc-container .card5 {
        width: 100%;
    }

    .main-content .info_content #home .sc-container .card4 {
        margin-right: 0;
        margin-bottom: 50px;
        width: 100%;
    }

    .card4 .sc-data-box .slick-dots {
        bottom: -36px;
    }

    #my-accoount {
        padding-top: 0;
    }

    #my-accoount #bank-account {
        margin-top: 0;
    }

    #my-accoount #bank-account .cur_account {
        margin-top: 0;
    }

    #my-accoount #bank-account .other_account ul li {
        margin-top: 5px;
    }

    .analysis_chart .main_chart .analysis_section {
        overflow-x: auto;
        min-width: 0;
    }

    .analysis_chart .main_chart .analysis_section .mychart_analysis {
        min-width: 800px;
    }

    .sc-components_content {
        position: relative;
        top: 256px;
    }

    .main-content .info_content #instruction2 {
        margin-top: 250px;
    }

    #home .sc-components {
        display: flex;
        flex-wrap: nowrap;
        min-width: 100%;
        overflow: auto;
    }

    .main-content .main_intro_first .info_content #home {
        margin-top: -104px;
    }

    .pagination .action {
        top: 70px;
    }

    #preview {
        z-index: -1;
    }

    .modal .modal-content .input_field {
        width: 100%;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 16px;
    }

    .modal .modal-content .input_field label {
        margin: 0 0 8px;
    }

    .modal .modal-content .input_field input[type=number],
    .modal .modal-content .input_field input[type=text],
    .modal .modal-content .input_field input[type=email] {
        width: 100%;
        max-width: 100%;
    }

    .modal .modal-content .input_field .custom-select {
        width: 100%;
        max-width: 100%;
    }

    .modal .modal-content .input_field textarea {
        width: 100%;
    }

    #share-accoount .warn {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 16px;
    }

    #share-accoount .warn h5 {
        margin-bottom: 8px;
    }

    .main-content .main_intro_first #instruction1 {
        width: 100%;
    }

    .main_intro_first #instruction1 {
        top: -1098px;
    }

    .main_intro_first #instruction1 .instruction-card {
        width: 97%;
        top: 32px;
    }

    .main_intro_first .step_img_bg {
        width: 70%;
    }

    .main_intro_first .main-content .info_content #home {
        margin-top: -84px;
    }

    #ex2 #form_transfer .tiptop_t2.center {
        left: 70px;
    }

    #ex2 #form_transfer .tiptop_t3.right {
        left: 240px;
    }

    #ex1 .form_transfer .tiptop_t1 {
        left: 0
    }

    .full_width .title {
        margin-bottom: 16px;
    }
}

@media screen and (max-width: 850px) {
    #ex_add #form_income .tiptop_t2.center {
        left: 40px;
    }

    #ex_add #form_income .tiptop_t3.right {
        left: 206px;
    }

    #ex_edit .tiptop_t1 {
        left: 0;
    }

    #ex_edit .tiptop_t1,
    #ex_edit .tiptop_t2,
    #ex_edit .tiptop_t3 {
        width: 350px;
    }

    .tiptop_t1 h3,
    .tiptop_t2 h3,
    .tiptop_t3 h3 {
        font-size: 30px;
    }

    #ex_edit .tiptop_t1 .confirm button,
    #ex_edit .tiptop_t2 .confirm button,
    #ex_edit .tiptop_t3 .confirm button {
        margin: 0 8px;
    }

    #ex_edit .tiptop_t2.center {
        left: 170px;
    }

    #ex_edit .tiptop_t3.right {
        right: 8px;
    }

    #ex2 #form_transfer .tiptop_t2.center {
        left: 40px;
    }

    #ex2 #form_transfer .tiptop_t3.right {
        left: 206px;
    }

    #ex1 .form_transfer .tiptop_t1 {
        left: -40px;
    }

    #ex1 .form_transfer .tiptop_t2.center {
        left: 135px;
    }

    #ex1 .form_transfer .tiptop_t3.right {
        left: 290px;
    }
}

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

    .main-content .main_intro .main_chart .card_section1 .card1,
    .card2,
    .card3 {
        width: 100%;
        margin-right: 0;
    }

    .main-content .main_intro .main_chart .chart_section {
        width: 97%;
        position: absolute;
        top: 720px;
        left: 0;
    }

    .main-content .info_content {
        margin-top: 815px;
    }

    .main_intro_first #instruction1 {
        top: -1098px;
    }

    .main_intro_first #instruction1 .instruction-card {
        top: -86px;
    }

    .main-content .main_intro_first .info_content #home {
        margin-top: 16px;
    }

    #subscription #package table.plist {
        display: none;
    }

    #subscription #package .plist_mb {
        display: inline-table;
        width: 100%;
    }

    #subscription #package .plist_mb tbody tr {
        height: 44px;
        width: 100%;
        border-top: 1px solid #2E4A8F;
    }

    #subscription #package .plist_mb tbody tr th {
        width: 25%;
        min-width: 125px;
        padding-left: 16px;
        background: #285ee4;
        color: #fff;
        vertical-align: middle;
    }

    #subscription #package .plist_mb tbody tr td {
        padding-left: 16px;
        color: #2E4A8F;
        vertical-align: middle;
    }

    #subscription #package_history .accordion_content {
        display: none;
    }

    #subscription #package_history {
        padding-bottom: 30px;
    }

    #subscription #package_history .accordion_content_mb {
        width: 100%;
        display: block;
    }

    #subscription #package_history .accordion_content_mb .accordion_section_mb {
        margin-bottom: 24px;
    }

    .accordion_content_mb .accordion_head_mb {
        width: 100%;
        height: 44px;
        display: flex;
        background: #285ee4;
        color: #fff;
        align-items: center;
    }

    .accordion_content_mb .accordion_head_mb .head_tb1 {
        width: 25%;
        padding: 4px 4px 4px 8px;
    }

    .accordion_content_mb .accordion_head_mb .body_tb1 {
        width: 75%;
        padding: 4px 4px 4px 8px;
    }

    .accordion_content_mb .accordion_body_mb {
        width: 100%;
        min-height: 44px;
        height: 100%;
        display: flex;
        border-top: 1px solid #2E4A8F;
        position: relative;
    }

    .accordion_content_mb .accordion_body_mb .head_tb1 {
        width: 25%;
        /* height: 100%; */
        display: flex;
        align-items: center;
        padding-left: 8px;
        background: #285ee4;
        color: #fff;
    }

    .accordion_content_mb .accordion_body_mb .body_tb1 {
        width: 75%;
        /* height: 100%; */
        display: flex;
        align-items: center;
        /* padding-left: 16px; */
        color: #2E4A8F;
        padding: 4px 4px 4px 8px;
    }

    .accordion_content_mb .accordion_body_mb .body_tb1 .preview a:before {
        content: url(../../../static/v2/images/eye_g.svg);
        position: absolute;
        top: -10px;
        left: -36px;
    }

    .accordion_content_mb .accordion_body_mb .body_tb1 .preview a {
        position: relative;
        top: 0;
        left: 24px;
        text-decoration: underline;
    }

    .accordion_content_mb .accordion_section_mb.open .accordion_body_mb .tb a {
        transform: scale(.95) rotate(180deg);
    }

    .accordion_content_mb .accordion_body_mb .tb {
        position: absolute;
        right: 12px;
        height: 44px;
        display: flex;
        align-items: center;
        color: #285ee4;
    }

    .accordion_content_mb .accordion_body_mb .tb a {
        transform: scale(.95);
        display: block;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        transition: .3s;
    }

    .accordion_content_mb .accordion_body_mb .tb a:hover {
        background-color: #E0E7F8;
    }

    .accordion_content_mb .accordion_body_mb .tb a:active {
        background-color: #B9C9F4;
    }

    #subscription #package_history .accordion_content_mb .module_list_mb {
        transition: .2s;
        overflow: hidden;
        width: 100%;
        max-height: 0;
        height: auto;
        box-sizing: border-box;
    }

    #subscription #package_history .accordion_section_mb.open .module_list_mb {
        width: 100%;
        max-height: 100%;
        transition: 2s;
        overflow: hidden;
    }

    #subscription #package_history .accordion_content_mb .module_list_mb .module {
        position: relative;
        width: 100%;
        overflow-y: auto;
    }

    .accordion_content_mb .module_list_mb .module .mbody_mb .list {
        width: 100%;
        display: flex;
    }

    .accordion_content_mb .module_list_mb .module .mbody_mb .list:last-child .list_mb1 {
        border-bottom: 1px solid #2E4A8F;
    }

    .accordion_content_mb .module_list_mb .module .mbody_mb .list:last-child .mb2 {
        border-bottom: 1px solid #2E4A8F;
    }

    .accordion_content_mb .module_list_mb .module .mbody_mb .list .list_mb1 {
        width: 25%;
        height: 44px;
        background: #285ee4;
        color: #fff;
        display: flex;
        align-items: center;
        padding-left: 16px;
        min-width: 77px;
        border-top: 1px solid #2E4A8F;
    }

    .accordion_content_mb .module_list_mb .module .mbody_mb .list .list_mb2 {
        width: 75%;
        display: flex;
    }

    .accordion_content_mb .module_list_mb .module .mbody_mb .list .mb2 {
        height: 44px;
        color: #2E4A8F;
        display: flex;
        align-items: center;
        padding-left: 16px;
        width: 100%;
        min-width: 200px;
        border-top: 1px solid #2E4A8F;
        border-left: 1px solid #2E4A8F;
    }

    .tiptop_t1 h3,
    .tiptop_t2 h3,
    .tiptop_t3 h3 {
        font-size: 30px;
    }

    #ex_add #form_income .tiptop_t2.center {
        left: 0;
    }

    #ex_add #form_income .tiptop_t3.right {
        left: 170px;
    }

    #ex_add #form_income .tiptop_t2 .confirm button,
    #ex_add #form_income .tiptop_t3 .confirm button {
        margin: 0 8px;
    }

    #ex_edit .tiptop_t1 {
        left: -40px;
    }

    #ex_edit .tiptop_t2.center {
        left: 148px;
    }

    #ex_edit .tiptop_t3.right {
        left: 300px;
    }

    #ex2 #form_transfer .tiptop_t2,
    #ex2 #form_transfer .tiptop_t3 {
        width: 350px;
    }

    #ex2 .tiptop_t2 .confirm button,
    #ex2 .tiptop_t3 .confirm button {
        margin: 0 8px;
    }

    #ex2 #form_transfer .tiptop_t2.center {
        left: 48px;
    }

    #ex2 #form_transfer .tiptop_t3.right {
        left: 220px;
    }

    #ex1 .form_transfer .tiptop_t1 {
        width: 350px;
        left: -26px;
    }

    #ex1 .form_transfer .action .confirm button {
        margin: 0 8px;
    }

    #ex1 .form_transfer .tiptop_t2,
    #ex1 .form_transfer .tiptop_t3 {
        width: 350px;
    }

    #ex1 .form_transfer .tiptop_t2.center {
        left: 148px;
    }
}

@media screen and (max-width: 742px) {
    .modal #form_post .modal-content #area_1 {
        width: 100%;
        order: 1;
    }

    .modal #form_post .modal-content #area_2 {
        width: 100%;
        order: 2;
        margin-bottom: 16px;
    }

    .modal #form_post .modal-content #area_3 {
        width: 100%;
        order: 3;
    }

    #switch:checked~.app-menu_content .app-menu_list {
        width: 100%;
    }

    .main-content .main_intro {
        margin-left: 0;
    }


    .main-content h2.title-text {
        margin-bottom: 8px;
        margin-top: 48px;
    }

    .app-title .i_info {
        top: 68px;
    }

    .main-content .title-bookkeeping {
        margin-bottom: 8px;
        margin-top: 56px;
    }

    /*20230629 修改*/
    .main-content .my_package {
        position: absolute;
        top: 0;
        box-sizing: border-box;
        width: 100%;
    }

    .main-content .info_content #home .sc-container .card {
        width: 100%;
        margin-right: 0;
        min-width: 308px;
    }

    .main-content .info_content #home .sc-container .card5 {
        width: 100%;
        margin-right: 0;
        height: 358px;
        background: #fff;
    }

    .main-content .info_content #instruction2 {
        margin-top: 400px;
    }

    #share-accoount h3,
    #share-accoount .title_dis .small {
        margin-bottom: 16px;
    }

    .sc-components_content {
        width: 100%;
        top: 390px;
    }

    #home .sc-components {
        display: flex;
        flex-wrap: nowrap;
        min-width: 100%;
        overflow: auto;
    }

    .card5 .sc-data-box {
        display: flex;
        flex-direction: column;
    }

    .card5 .sc-data-box h3 {
        width: 80%;
        display: block;
        margin-bottom: 8px;
    }

    .card5 .info .sec1 {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .sec1_op1,
    .sec1_op2 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
    }

    #my-accoount #bank-account {
        display: flex;
        flex-direction: column;
        height: 300px;
        box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .22);
    }

    #my-accoount #bank-account .cur_account {
        width: 100%;
        height: 100%;
    }

    #my-accoount #bank-account .other_account {
        width: 100%;
        border-radius: 0 0 15px 15px;
    }

    #my-accoount #bank-account .other_account ul {
        display: none;
    }

    #my-accoount #bank-account .other_account .cur_bank_amount {
        height: 160px;
        position: relative;
        align-items: flex-start;
        padding: 15px 30px 0;
        box-shadow: 0 6px 6px 0 #ccc;
        border-radius: 0 0 15px 15px;
    }

    #my-accoount #bank-account .other_account .cur_bank_amount .amount_content {
        text-align: end;
        margin-top: 20px;
    }

    #my-accoount #bank-account .cur_account .bank-info .sn {
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    #my-accoount #bank-account .cur_account .bank-info .sn .detail {
        padding-left: 10px;
        line-height: 1.3;
    }

    #my-accoount #bank-account .other_account .cur_bank_amount .cur_bank_select_content {
        width: 100%;
        background: var(--main-color);
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 16px;
        text-align: center;
        box-sizing: border-box;
        border-radius: 0 0 15px 15px;
    }

    #my-accoount #bank-account .other_account .cur_bank_amount .cur_bank_select {
        width: 100%;
        font-size: 20px;
        padding: 8px;
        background: var(--main-color);
        border-color: transparent;
        color: #fff;
        cursor: pointer;
    }

    select option {
        background: #fff;
        color: #000;
        font-size: 16px;
        font-weight: 700;
    }

    #my-accoount #bank-account {
        overflow: visible;
        min-width: 312px;
    }

    #my-accoount #bank-account .other_account {
        position: static;
    }

    #account-info {
        padding: 0;
        max-width: 742px;
    }

    #account-info .box {
        width: 100%;
        /* max-width: 742px;
        min-width: 295px; */
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }

    #account-info .box.fw {
        width: 100%;
        max-width: 726px;
        min-width: 295px;
    }

    #account-info .box .custom-select {
        width: 100%;
        max-width: none;
        min-width: inherit;
    }

    #account-info .box select {
        width: 100%;
        max-width: 726px;
        min-width: 295px;
    }

    #account-info .box .vaild_text {
        top: 75px;
        right: 8px;
    }

    .upload_outter {
        padding: 0;
    }


    #account-info .action_account {
        display: flex;
        /* margin-top: 50px; */
        padding: 0;
        flex-direction: column-reverse;
        justify-content: flex-start;
        max-width: none;
    }

    #account-info .action_account button {
        /* margin: 0 0 16px; */
        width: 100%;
        min-width: 300px;
    }


    #income_record h3 {
        font-size: 24px;
        color: #2E4A8F;
        font-weight: 800;
        letter-spacing: 1px;
        margin-bottom: 30px;
        position: relative;
        display: flex;
    }

    #income_record h3 a {
        padding-top: 0;
        padding-bottom: 0;
        color: #dbdbdb;
    }

    #income_record .overdue {
        padding-right: 8px;
        border-right: 2px solid #dbdbdb;
    }

    #income_record .record {
        padding-left: 8px;
    }

    #income_record .income {
        padding-left: 8px;
        padding-right: 8px;
        border-right: 2px solid #dbdbdb;
    }

    #income_record h3 a.active {
        padding-left: 8px;
        color: #285ee4;
    }

    #income_record .datepicker-outter {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #income_record .datepicker-outter .sc-datepicker {
        margin: 8px 0 16px;
    }

    #income_record .datepicker-outter .record_search {
        margin: 0;
    }

    .modal .modal-content {
        margin-bottom: 0;
    }

    .modal .action {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        clear: both;
    }

    .modal .action button {
        margin: 0 0 16px;
        width: 100%;
    }

    #ex1,
    #ex2,
    #ex_add,
    #ex_edit {
        padding: 16px;
    }

    #btn_send_reset_password {
        margin: 24px 0 16px;
    }

    #account-info .box .tappay_info,
    #account-info .box input.small {
        width: 100%;
        max-width: none;
        min-width: inherit;
        margin-top: 8px;
    }

    #account-info .textarea-gg {
        margin: 8px 0 0;
        width: 100%;
    }

    #account-info .textarea {
        flex-direction: column;
    }


    .btn_block .action {
        flex-direction: column-reverse;
    }

    .btn_block .action button {
        width: 100%;
        margin: 0 0 16px;
    }

    #basic-info .input-field input {
        width: 100%;
        min-width: 300px;
    }

    #basic-info .input-field .error_field {
        margin: 8px 0 0;
        font-weight: 500;
    }

    .main-content #share-accoount .title_dis {
        display: flex;
        flex-direction: column;
    }

    .main-content .main-content-password {
        padding: 0;
    }


    #subscription #program .plan_select_text p,
    #subscription #program .module_select_text p {
        font-size: 14px;
    }

    #subscription #program .plan_select_account p,
    #subscription #program .module_select_account p {
        font-size: 20px;
    }

    #subscription #program .plan_select_account span,
    #subscription #program .module_select_account span {
        font-size: 12px;
    }

    #checkout_subscription.tableFixHead {
        min-width: 343px;
    }

    #checkout_subscription .package_table_content {
        display: none;
    }

    #checkout_subscription .package_mobile_content {
        display: inline-table;
        width: 100%;
    }

    #checkout_subscription .total {
        margin-top: 16px;
    }

    #checkout_subscription table.package_mobile tr th,
    #checkout_subscription table.package_mobile tr td {
        font-size: 18px;
        height: 44px;
        padding-left: 16px;
        text-align: start;
    }

    #checkout_subscription table.package_mobile tr th {
        background: #285ee4;
    }

    #checkout_subscription table.package_mobile tr td {
        color: #285ee4;
    }

    #checkout_subscription table.package_mobile tbody tr:first-child {
        border-top: 1px solid #2E4A8F;
    }

    #checkout_subscription table.package_mobile tbody tr {
        height: 44px;
        padding-left: 16px;
        font-size: 18px;
        font-weight: 300;
        letter-spacing: 1px;
        border-bottom: 1px solid #2E4A8F;
        color: #fff;
        box-sizing: border-box;
        text-align: left;
        vertical-align: middle;
    }

    #checkout_subscription table.package_mobile tbody tr td {
        min-width: 200px;
        border-right: 1px solid #285ee4;
    }

    #checkout_subscription .package_mobile_content .total {
        position: relative;
        padding: 0;
    }

    #checkout_subscription .package_mobile_content .total .amount {
        position: sticky;
        left: 45%;
    }

    #checkout_package .tabs a {
        font-size: 22px;
    }

    #checkout_info2 .pay_cotents {
        padding-left: 0;
        margin: 0 16px;
    }

    #checkout_info2 .pay_cotents .box {
        width: 100%;
        margin-bottom: 16px;
        padding: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #checkout_info2 .pay_cotents .box .vaild_text {
        top: 16px;
        right: 16px;
    }

    #checkout_info2 .pay_cotents>div.active {
        flex-wrap: nowrap;
        flex-direction: column;
    }

    #checkout_info2 .pay_cotents .box input {
        width: 100%;
    }

    #checkout_info2 .pay_cotents .box .name {
        width: 100px;
        margin: 0 0 8px;
    }

    #checkout_info2 .pay_tabs {
        padding: 0;
        align-items: flex-start;
        margin: 0 16px 16px;
        flex-direction: column;
    }

    #checkout_info2 .pay_tabs .invoice {
        margin: 0 0 16px;
        padding: 10px 0;
        width: 100%;
    }

    #checkout_info2 .pay_tabs .name {
        margin: 0 0 8px;
    }

    #checkout_info2 .pay_tabs .chk-container {
        float: left;
        margin-left: 16px;
    }

    #payment .chk1 {
        justify-content: flex-start;
    }

    #payment .chk2 .chk-container {
        text-align: left;
        font-size: 16px;
    }

    #payment .action button {
        width: 100%;
    }

    .box_email {
        top: 70px;
        left: 0;
    }

    #subscription .tab-link {
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
    }


    #subscription .tab-link .tabs a {
        font-size: 22px;
    }

    #subscription .tab-link .tabs a:nth-child(1) {
        padding-right: 8px;
    }

    #subscription .tab-link .tabs a:nth-child(2) {
        margin-left: 8px;
        padding-right: 8px;
    }

    #subscription .tab-link .tabs a:last-child {
        padding-left: 8px;
    }

    #checkout_panel .tab_contens {
        padding: 16px;
    }

    #checkout_panel .amount_total.pm2 .total {
        padding: 20px 0 20px calc(50%);
    }

    #checkout_panel #online {
        width: 100%;
    }

    #checkout_panel #online .tpfield {
        margin: 0;
        padding: 6px 0;
        width: 100%;
    }

    #checkout_panel #online .card_info1,
    #checkout_panel #online .card_info2,
    #checkout_panel #online .card_info3 {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 24px;
    }

    #checkout_panel #online .card_info1 .name,
    #checkout_panel #online .card_info2 .name,
    #checkout_panel #online .card_info3 .name {
        text-align: left;
        margin: 0 0 16px;
    }

    #checkout_panel #online .card_info1 .card_data,
    #checkout_panel #online .card_info2 .card_data,
    #checkout_panel #online .card_info3 .card_data {
        width: 100%;
    }

    #checkout_panel #online .card_info1 .card_data .item,
    #checkout_panel #online .card_info2 .card_data .item,
    #checkout_panel #online .card_info3 .card_data .item {
        width: 100%;
        height: 60px;
        margin-right: 0;
    }

    #checkout_panel #online .card_info1 .card_data iframe,
    #checkout_panel #online .card_info2 .card_data iframe,
    #checkout_panel #online .card_info3 .card_data iframe {
        margin-left: 16px;
    }

    #checkout_panel .action {
        width: 100%;
        flex-direction: column-reverse;
    }


    #checkout_panel .action .btn {
        width: 100%;
    }

    #checkout_panel .action .btn+.btn {
        margin-left: 0;
        margin-bottom: 16px;
    }

    /* #checkout_panel .tabs {
        margin: 0 0 24px;
    } */

    #subscription .my_package {
        position: static;
        min-width: 0;
        width: 100%;
    }

    #subscription .my_package .text {
        font-size: 14px;
        white-space: pre-wrap;
    }

    #subscription .my_package .hidd {
        display: none;
    }

    #identify_upload_content .card-body {
        width: 100%;
        height: 174px;
    }

    #identify_upload_content .card-body .fileupload .btn.identifyBtn {
        margin-top: 50px;
        margin-left: 32px;
    }

    .main-content .main_intro_first {
        top: 630px;
    }

    .main_intro_first #instruction1 #step1 {
        width: 100%;
    }

    .main_intro_first #instruction1 .instruction-card {
        width: 345px;
        height: 650px;
        min-height: 650px;
        max-width: 345px;
        display: block;
        top: -333px;
        margin: 0 auto;
    }

    .main_intro_first .step_img_bg {
        width: 100%;
        min-width: 337px;
    }


    #ex_edit .action,
    #ex_add #form_income .action {
        position: relative;
    }

    #ex_add #form_income .tiptop_t2.center {
        left: calc(50% - 196px);
        bottom: 95px;
    }

    #ex_add #form_income .tiptop_t3.right {
        left: calc(50% - 196px);
        bottom: 150px;
    }

    #ex_add #form_income .tiptop_t2,
    #ex_add #form_income .tiptop_t3 {
        width: 350px;
    }

    #ex_edit .action button.cancel_btn,
    #ex_edit .action button.confirm,
    #ex_add .action button.cancel_btn,
    #ex_add .action button.confirm {
        width: 120px;
    }

    #ex_edit .tiptop_t1,
    #ex_edit .tiptop_t2.center,
    #ex_edit .tiptop_t3.right {
        left: calc(50% - 180px);
    }

    #ex_edit .tiptop_t1 {
        bottom: 95px;
    }

    #ex_edit .tiptop_t2 {
        bottom: 150px;
    }

    #ex_edit .tiptop_t3 {
        bottom: 206px;
    }

    #ex1.modal .form_transfer .action,
    #ex2.modal #form_transfer .action {
        position: relative;
    }

    #ex2 #form_transfer .tiptop_t2.center {
        left: calc(50% - 178px);
        bottom: 95px;
    }

    #ex2 #form_transfer .tiptop_t3.right {
        left: calc(50% - 178px);
        bottom: 150px;
    }

    #ex2.modal #form_transfer .action button.cancel_btn,
    #ex2.modal #form_transfer .action button.confirm {
        width: 120px;
    }

    #ex1.modal .form_transfer .action button.cancel_btn,
    #ex1.modal .form_transfer .action button.confirm {
        width: 120px;
    }

    #ex1 .form_transfer .tiptop_t1,
    #ex1 .form_transfer .tiptop_t2.center,
    #ex1 .form_transfer .tiptop_t3.right {
        left: calc(50% - 180px);
    }

    #ex1 .form_transfer .tiptop_t1 {
        bottom: 95px;
    }

    #ex1 .form_transfer .tiptop_t2 {
        bottom: 150px;
    }

    #ex1 .form_transfer .tiptop_t3 {
        bottom: 205px;
    }

}

@media screen and (max-width: 630px) {
    .module_content {
        flex-wrap: wrap;
    }

    .plan_content .plan_content_select,
    .module_content .module_content_select {
        width: 100%;
    }

    #subscription #program .plan_select_text p,
    #subscription #program .module_select_text p {
        font-size: 18px;
    }

    #subscription #program .plan_select_account p,
    #subscription #program .module_select_account p {
        font-size: 26px;
    }

    #subscription #program .plan_select_account span,
    #subscription #program .module_select_account span {
        font-size: 14px;
    }
}

@media screen and (max-width: 580px) {
    #checkout_subscription .total {
        padding-left: calc(50%);
    }

    #transaction .datepicker-outter {
        margin-bottom: 16px;
    }
}


@media screen and (max-width: 500px) {
    .custom-file-label {
        width: 300px;
    }

    #identify_upload_content .card-body .fileupload .btn.identifyBtn {
        margin-left: -12px;
    }

    #identify_upload_content .card-body .input-append .btn-default {
        left: 300px;
    }
}

@media screen and (max-width: 480px) {
    .main-content .info_content #home .sc-container .card5 {
        position: relative;
    }

    .card5 .sc-data-box .datep {
        top: 20px;
    }
}

@media screen and (max-width: 450px) {
    .card5 .sc-data-box .datep>span {
        display: none;
    }

    .modal h4 {
        font-size: 30px;
        margin-bottom: 24px;
    }

    #income_record h3 {
        font-size: 20px;
    }

    .instruction-small-card .info-box h4 .small-title {
        position: absolute;
        bottom: 20px;
        left: 0;
    }

    .instruction-small-card .info-box h4 .text {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 170px;
    }

    .main_intro {
        margin-left: 0;
    }

    #checkout_subscription .total {
        padding-left: calc(30%);
    }

    .main-content .main_intro_first {
        top: 630px;
    }

    .main_intro_first #instruction1 .instruction-card {
        width: 345px;
        height: 650px;
        min-height: 650px;
        max-width: 345px;
        display: block;
    }

    .main_intro_first .step_img_bg {
        width: 100%;
    }

    .analysis_chart .main_chart .chart_section {
        min-width: 330px;
    }

    #subscription a.upgrade {
        width: 100%;
        position: relative;
    }

    #subscription .btn_renewal,
    #subscription .btn_upgrade {
        top: 52px;
        width: 100%;
    }

    #subscription .process_bar {
        margin-top: 40px;
    }

    #subscription .process_bar.bar2 {
        margin-top: 0px;

    }

    .plan_select_text,
    .module_select_text {
        margin-left: -16px;
    }

    #subscription #program .plan_select_text p {
        font-size: 16px;
    }

    #subscription #program .module_select_text p {
        font-size: 16px;
        margin-left: 24px;
    }

    #subscription #program .plan_select_account p,
    #subscription #program .module_select_account p {
        font-size: 20px;
    }

    #subscription #program .plan_select_account span,
    #subscription #program .module_select_account span {
        font-size: 12px;
    }


    .tiptop_t1,
    .tiptop_t2,
    .tiptop_t3 {
        font-size: 28px;
    }

    #ex_edit .tiptop_t1,
    #ex_edit .tiptop_t2,
    #ex_edit .tiptop_t3,
    #ex_add #form_income .tiptop_t2,
    #ex_add #form_income .tiptop_t3 {
        width: 280px;
    }

    #ex_edit .tiptop_t1,
    #ex_edit .tiptop_t2.center,
    #ex_edit .tiptop_t3.right,
    #ex_add #form_income .tiptop_t2.center,
    #ex_add #form_income .tiptop_t3.right {
        left: calc(50% - 144px);
    }

    #ex1 .form_transfer .tiptop_t1,
    #ex1 .form_transfer .tiptop_t2,
    #ex1 .form_transfer .tiptop_t3,
    #ex2 #form_transfer .tiptop_t2,
    #ex2 #form_transfer .tiptop_t3 {
        width: 280px;
    }

    #ex1 .form_transfer .tiptop_t1,
    #ex1 .form_transfer .tiptop_t2.center,
    #ex2 #form_transfer .tiptop_t2.center,
    #ex2 #form_transfer .tiptop_t3.right {
        left: calc(50% - 144px);
    }

    #ex1 .form_transfer .tiptop_t3.right {
        left: calc(50% - 144px);
    }

    #pxlob .center_imgp {
        max-height: 500px;
    }

    .upload_outter .mcs-horizontal-pics {
        max-width: 180px;
        margin-left: 0;
    }
}

@media screen and (max-width: 430px) {
    #income_record .datepicker-outter .record_search {
        margin: 0 0 60px;
    }

}

@media screen and (max-width: 400px) {
    #my-accoount .datepicker-outter {
        display: flex;
        flex-direction: column;
    }

    #my-accoount .datepicker-outter .sc-datepicker {
        margin-top: 8px;
        width: 220px;
        margin-left: 0;
    }
}

@media screen and (max-width: 370px) {
    #income_record h3 {
        font-size: 18px;
    }
}

.notice_modal.type9 {
    padding: 24px;
    min-width: 311px;
}

.modal.type9 .inner {
    text-align: center;
}

.modal.type9 .title {
    font-size: 30px;
    line-height: 1.2;
}

.modal .capital_msg {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    display: none;
    margin-bottom: 16px;
}

.modal .capital_msg>div {
    margin-top: 8px;
}


.modal .capital_msg .capital4,
.modal .capital_msg .capital5 {
    display: none;
}

.modal .capital_msg .capital_span {
    color: red;
    margin-left: 8px;
}

@media screen and (max-width:450px) {
    .modal.type9 .title {
        font-size: 24px;
    }

    .modal .capital_msg {
        width: 100%;
        text-align: left;
        font-size: 18px;
    }
}