.service_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    text-align: center;
}

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

@media screen and (max-width: 767px) {
    .service_content {
        margin-top: 105px;
    }

    .service_content > .service_table {
        max-width: 375px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin: 40px 0px;
    }

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

    .service_content > .service_table > .area1 {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .service_content > .service_table > .area1 > .item1 {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-color: #f4f4f4;
        margin-bottom: 40px;
    }

    .service_content > .service_table > .area1 > .item1 > p {
        color: #101c44;
        font-size: 20px;
        font-weight: 700;
        padding: 0px;
        margin: 35px 35px 30px 35px;
    }

    .service_content > .service_table > .area1 > .item1 > .item1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0px 0px 35px 0px;
    }

    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn {
        width: 230px;
        height: 50px;
        /* 改成flex 或 block 才能直接調整 寬度、高度 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-color: #ffffff;
        border-bottom: 1px solid #f4f4f4;
        color: black;
        font-size: 16px;
        font-weight: 700;
        padding: 0px 0px 0px 20px;
        margin: 0px;
        text-decoration: none;
        cursor: pointer;
    }

    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn:link { color: black; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn:visited { color: black; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn:hover { color: white; background-color: #d41f26; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn:active { color: white; background-color: #d41f26; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn span { margin: 0; padding: 0; vertical-align: middle; }

    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active { background-color: #d41f26; color: white; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active:link { color: white; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active:visited { color: white; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active:hover { color: white; background-color: #d41f26; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active:active { color: white; background-color: #d41f26; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active span { margin: 0; padding: 0; vertical-align: middle; }

    .service_content > .service_table > .area1 > .item2 {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
         /* 漸層 Chrome10-25 */
        background: -webkit-linear-gradient(-45deg, #3a4364 0%, #04103a 45%);
         /* 漸層 Chrome26+ */
        background: linear-gradient(135deg, #3a4364 0%, #04103a 45%);
        color: #ffffff;
        margin-bottom: 40px;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 {
        width: 250px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 35px 0px;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 > p {
        font-size: 30px;
        padding: 0px;
        margin: 0px;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 > p:nth-child(2) {
        margin-bottom: 20px;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 > a {
        width: 246px;
        height: 46px;
        background-color: #d41f26;
        border: 2px solid #fd6013;
        border-radius: 4px;
        color: white;
        font-size: 16px;
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 > a:link { color: white; }
    .service_content > .service_table > .area1 > .item2 > .item1 > a:visited { color: white; }
    .service_content > .service_table > .area1 > .item2 > .item1 > a:hover { color: white; background-color: #ef2c16; border: 2px solid #fd6013 }
    .service_content > .service_table > .area1 > .item2 > .item1 > a:active { color: white; background-color: #ef2c16; border: 2px solid #fd6013 }
    .service_content > .service_table > .area1 > .item2 > .item1 > a span { margin: 0; padding: 0; }

    .service_content > .service_table > .area1 > .item3 {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #d41f26;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 {
        width: 250px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 35px 0px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > p {
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
        padding: 0px;
        margin: 0px 0px 35px 0px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item {
        margin-bottom: 20px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item:last-child {
        margin-bottom: 0px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a {
        width: 250px;
        height: 50px;
        /* 改成flex 或 block 才能直接調整 寬度、高度 */
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        background-color: #131c45;
        color: white;
        font-size: 14px;
        padding: 0px;
        margin: 0px 0px 20px 0px;
        text-decoration: none;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:link { color: white; }
    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:visited { color: white; }
    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:hover { color: white; background-color: #3f4c6b; }
    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:active { color: white; background-color: #3f4c6b; }
    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a span { margin: 0; padding: 0; vertical-align: middle; }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:last-child {
        margin: 0px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a > img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin: 0px 10px 0px 40px;
    }

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

    .service_content > .service_table > .area2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .service_content > .service_table > .area2 > .item {
        max-width: 340px;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .service_content > .service_table > .area2 > .item:first-child {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .service_content > .service_table > .area2 > .item > .item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .service_content > .service_table > .area2 > .item > .item > .item1 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .service_content > .service_table > .area2 > .item > .item > .item1 > p {
        color: #131c47;
        font-size: 24px;
        font-weight: 700;
        padding: 0px;
        margin: 0px 0px 20px 0px;
    }

    .service_content > .service_table > .area2 > .item > .item > .item1 > p:first-child {
        color: #d41f24;
        font-size: 38px;
        font-weight: 700;
        padding: 0px;
        margin: 0px 0px 20px 0px;
    }

    .service_content > .service_table > .area2 > .item > .item > .item1 > span {
        color: #6c6c6c;
        margin: 0px 0px 20px 0px;
        line-height: 26px;
    }

    .service_content > .service_table > .area2 img {
        max-width: 340px;
        vertical-align: middle;
    }
}

@media screen and (min-width: 768px) {
    .service_content {
        margin-top: 135px;
    }

    .service_content > .service_table {
        max-width: 1200px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        margin: 100px 0px;
    }

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

    .service_content > .service_table > .area1 {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 40px;
    }

    .service_content > .service_table > .area1 > .item1 {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-color: #f4f4f4;
        margin-bottom: 40px;
    }

    .service_content > .service_table > .area1 > .item1 > p {
        color: #101c44;
        font-size: 20px;
        font-weight: 700;
        padding: 0px;
        margin: 35px 35px 30px 35px;
    }

    .service_content > .service_table > .area1 > .item1 > .item1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0px 0px 35px 0px;
    }

    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn {
        width: 230px;
        height: 50px;
        /* 改成flex 或 block 才能直接調整 寬度、高度 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-color: #ffffff;
        border-bottom: 1px solid #f4f4f4;
        color: black;
        font-size: 16px;
        font-weight: 700;
        padding: 0px 0px 0px 20px;
        margin: 0px;
        text-decoration: none;
        cursor: pointer;
    }

    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn:link { color: black; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn:visited { color: black; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn:hover { color: white; background-color: #d41f26; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn:active { color: white; background-color: #d41f26; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn span { margin: 0; padding: 0; vertical-align: middle; }

    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active { background-color: #d41f26; color: white; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active:link { color: white; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active:visited { color: white; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active:hover { color: white; background-color: #d41f26; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active:active { color: white; background-color: #d41f26; }
    .service_content > .service_table > .area1 > .item1 > .item1 > .uc_btn_active span { margin: 0; padding: 0; vertical-align: middle; }

    .service_content > .service_table > .area1 > .item2 {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
         /* 漸層 Chrome10-25 */
        background: -webkit-linear-gradient(-45deg, #3a4364 0%, #04103a 45%);
         /* 漸層 Chrome26+ */
        background: linear-gradient(135deg, #3a4364 0%, #04103a 45%);
        color: #ffffff;
        margin-bottom: 40px;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 {
        width: 250px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 35px 0px;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 > p {
        font-size: 30px;
        padding: 0px;
        margin: 0px;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 > p:nth-child(2) {
        margin-bottom: 20px;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 > a {
        width: 246px;
        height: 46px;
        background-color: #d41f26;
        border: 2px solid #fd6013;
        border-radius: 4px;
        color: white;
        font-size: 16px;
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .service_content > .service_table > .area1 > .item2 > .item1 > a:link { color: white; }
    .service_content > .service_table > .area1 > .item2 > .item1 > a:visited { color: white; }
    .service_content > .service_table > .area1 > .item2 > .item1 > a:hover { color: white; background-color: #ef2c16; border: 2px solid #fd6013 }
    .service_content > .service_table > .area1 > .item2 > .item1 > a:active { color: white; background-color: #ef2c16; border: 2px solid #fd6013 }
    .service_content > .service_table > .area1 > .item2 > .item1 > a span { margin: 0; padding: 0; }

    .service_content > .service_table > .area1 > .item3 {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #d41f26;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 {
        width: 250px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 35px 0px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > p {
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
        padding: 0px;
        margin: 0px 0px 35px 0px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item {
        margin-bottom: 20px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item:last-child {
        margin-bottom: 0px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a {
        width: 250px;
        height: 50px;
        /* 改成flex 或 block 才能直接調整 寬度、高度 */
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        background-color: #131c45;
        color: white;
        font-size: 14px;
        padding: 0px;
        margin: 0px 0px 20px 0px;
        text-decoration: none;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:link { color: white; }
    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:visited { color: white; }
    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:hover { color: white; background-color: #3f4c6b; }
    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:active { color: white; background-color: #3f4c6b; }
    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a span { margin: 0; padding: 0; vertical-align: middle; }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a:last-child {
        margin: 0px;
    }

    .service_content > .service_table > .area1 > .item3 > .item1 > .item > a > img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin: 0px 10px 0px 40px;
    }

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

    .service_content > .service_table > .area2 {
        width: 800px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .service_content > .service_table > .area2 > .item {
        width: 100%;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .service_content > .service_table > .area2 > .item:first-child {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .service_content > .service_table > .area2 > .item > .item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .service_content > .service_table > .area2 > .item > .item > .item1 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .service_content > .service_table > .area2 > .item > .item > .item1 > p {
        color: #131c47;
        font-size: 24px;
        font-weight: 700;
        padding: 0px;
        margin: 0px 0px 20px 0px;
    }

    .service_content > .service_table > .area2 > .item > .item > .item1 > p:first-child {
        color: #d41f24;
        font-size: 38px;
        font-weight: 700;
        padding: 0px;
        margin: 0px 0px 20px 0px;
    }

    .service_content > .service_table > .area2 > .item > .item > .item1 > span {
        color: #6c6c6c;
        margin: 0px 0px 20px 0px;
        line-height: 26px;
    }

    .service_content > .service_table > .area2 img {
        max-width: 800px;
        vertical-align: middle;
    }
}