#eccalculator ::-ms-input-placeholder {
    font-style: normal !important
}

#eccalculator * {
    box-sizing: border-box
}

#eccalculator b {
    font-weight: 700
}

#eccalculator label {
    cursor: pointer
}

#eccalculator img {
    max-width: 100%;
    height: auto
}

@media (max-width: 1023px) {
    #eccalculator img {
        width: 100%
    }
}

#eccalculator button {
    outline: 0
}

#eccalculator li {
    list-style: none !important;
    background-image: none !important
}

#eccalculator select::-ms-value {
    background: none;
    color: var(--sunlife-blue)
}

#eccalculator html,
#eccalculator body {
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-weight: 200;
    font-size: 19px;
    color: var(--sunlife-blue);
    box-sizing: border-box
}

input[type=range].ecc {
    -webkit-appearance: none;
    width: 100%;
    margin: 5.2px 0;
    background: transparent;
    border-radius: 25px
}

    input[type=range].ecc:focus {
        outline: 0;
        background: none
    }

    input[type=range].ecc::-webkit-slider-runnable-track {
        width: 100%;
        height: 15.6px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: rgba(255, 255, 255, 0.78);
        border-radius: 25px;
        border: 1.5px solid var(--sunlife-yellow);
    }

    input[type=range].ecc::-webkit-slider-thumb {
        box-shadow: 0px 0px 0px 2px var(--sunlife-yellow);
        border: 1.8px solid #ffffff;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: var(--sunlife-yellow);
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -6.7px
    }

    input[type=range].ecc:focus::-webkit-slider-runnable-track {
        background: rgba(255, 255, 255, 0.78)
    }

    input[type=range].ecc::-moz-range-track {
        width: 100%;
        height: 15.6px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: rgba(255, 255, 255, 0.78);
        border-radius: 25px;
        border: 1.5px solid var(--sunlife-yellow)
    }

    input[type=range].ecc::-moz-range-thumb {
        box-shadow: 0px 0px 0px 2px var(--sunlife-yellow);
        border: 1.8px solid #ffffff;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: var(--sunlife-yellow);
        cursor: pointer
    }

    input[type=range].ecc::-ms-track {
        width: 100%;
        height: 15.6px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
        margin: 0 auto
    }

    input[type=range].ecc::-ms-fill-lower {
        background: none;
        border: 1.5px solid var(--sunlife-yellow);
        border-radius: 50px;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
    }

    input[type=range].ecc::-ms-fill-upper {
        background: white;
        border: 1.5px solid var(--sunlife-yellow);
        border-radius: 50px;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
    }

    input[type=range].ecc::-ms-thumb {
        box-shadow: 0px 0px 0px 2px var(--sunlife-yellow);
        border: 1.8px solid #ffffff;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: var(--sunlife-yellow);
        cursor: pointer;
        margin-left: 3px;
        margin-right: 2px
    }

    input[type=range].ecc:focus::-ms-fill-lower,
    input[type=range].ecc:focus::-ms-fill-upper {
        background: none
    }

input[type=range].ecc2 {
    -webkit-appearance: none;
    width: 100%;
    margin: 5.2px 0;
    background: transparent;
    border-radius: 25px
}

    input[type=range].ecc2:focus {
        outline: 0;
        background: none
    }

    input[type=range].ecc2::-webkit-slider-runnable-track {
        width: 100%;
        height: 15.6px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: rgba(247, 223, 159, 0.78);
        border-radius: 25px;
        border: 1.5px solid var(--sunlife-yellow)
    }

    input[type=range].ecc2::-webkit-slider-thumb {
        box-shadow: 0px 0px 0px 2px var(--sunlife-yellow);
        border: 1.8px solid #ffffff;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: var(--sunlife-yellow);
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -6.7px
    }

    input[type=range].ecc2:focus::-webkit-slider-runnable-track {
        background: rgba(247, 223, 159, 0.78)
    }

    input[type=range].ecc2::-moz-range-track {
        width: 100%;
        height: 15.6px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: rgba(247, 223, 159, 0.78);
        border-radius: 25px;
        border: 1.5px solid var(--sunlife-yellow)
    }

    input[type=range].ecc2::-moz-range-thumb {
        box-shadow: 0px 0px 0px 2px var(--sunlife-yellow);
        border: 1.8px solid #ffffff;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: var(--sunlife-yellow);
        cursor: pointer
    }

    input[type=range].ecc2::-ms-track {
        width: 100%;
        height: 15.6px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent
    }

    input[type=range].ecc2::-ms-fill-lower {
        background: rgba(247, 223, 159, 0.78);
        border: 1.5px solid var(--sunlife-yellow);
        border-radius: 50px;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
    }

    input[type=range].ecc2::-ms-fill-upper {
        background: rgba(255, 255, 255, 0.9);
        border: 1.5px solid var(--sunlife-yellow);
        border-radius: 50px;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
    }

    input[type=range].ecc2::-ms-thumb {
        box-shadow: 0px 0px 0px 2px var(--sunlife-yellow);
        border: 1.8px solid #ffffff;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: var(--sunlife-yellow);
        cursor: pointer
    }

    input[type=range].ecc2:focus::-ms-fill-lower {
        background: rgba(247, 223, 159, 0.78)
    }

    input[type=range].ecc2:focus::-ms-fill-upper {
        background: rgba(255, 255, 255, 0.9)
    }

@media (max-width: 1023px) {
    .desktop {
        display: none
    }
}

@media (min-width: 1024px) {
    .mobile {
        display: none
    }
}

[v-cloak] {
    display: none
}

[role="main"] #eccalculator {
    /*     font-family: 'agenda', 'Noto Sans TC', 'SimHei', 'Apple LiGothic', serif;*/
    font-weight: 200;
    font-size: 19px;
    color: var(--sunlife-blue);
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 1066px;
    line-height: 1
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator {
        margin: 0 auto;
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator {
        margin: 0 auto;
    }
}

[role="main"] #eccalculator .fas {
    color: var(--sunlife-yellow);
    font-size: 32px
}

[role="main"] #eccalculator .error {
    font-size: 12px;
    color: red
}

[role="main"] #eccalculator .arrow {
    margin-top: 1em;
    text-align: center;
    width: 100%
}

    [role="main"] #eccalculator .arrow span {
        display: inline-block;
        width: 40px;
        margin-bottom: 1em
    }

        [role="main"] #eccalculator .arrow span img {
            width: 100%;
            height: auto
        }

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_leadin {
        background: url(/getContentAsset/87dcd843-1e37-462c-bf04-763c0ec9989f/f246f73c-f72d-42d2-b6b1-ceafb27365a0/leadinBg.jpg) top right 35% no-repeat;
        background-size: cover;
        margin-bottom: 10px
    }
}

[role="main"] #eccalculator .ecc_leadin .mobile img {
    display: block;
    height: auto
}

[role="main"] #eccalculator .ecc_leadin .ecc_inner {
    padding: .766em .588em 0;
    background: #f2f5f6;
    width: 100%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_leadin .ecc_inner {
        padding: 1.9em 2.352em 0;
        min-height: 17em;
        width: 50%
    }
}

[role="main"] #eccalculator .ecc_leadin p {
    margin-top: 0;
    margin-bottom: 0
}

    [role="main"] #eccalculator .ecc_leadin p.lg {
        font-size: 30px;
        text-align: center;
        padding-bottom: .6em;
        line-height: 1.35
    }

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_leadin p.lg {
        padding-bottom: .6em
    }
}

[role="main"] #eccalculator .ecc_leadin p.md {
    font-size: 19px;
    text-align: center;
    padding-bottom: 1.61em;
    line-height: 1.2
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_leadin p.md {
        padding-bottom: 1.61em
    }
}

[role="main"] #eccalculator .ecc_leadin p.sm {
    padding-bottom: .89em;
    line-height: 1.2;
    text-align: left;
    font-size: 19px
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_leadin p.sm {
        font-size: 14px
    }

        [role="main"] #eccalculator .ecc_leadin p.sm b {
            font-weight: 200
        }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_leadin p.sm {
        font-size: 14px;
        padding-bottom: .89em
    }
}

[role="main"] #eccalculator .ecc_step1 .ecc_inner {
    position: relative;
    overflow: hidden
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step1 .ecc_inner {
        height: 800px
    }
}

[role="main"] #eccalculator .ecc_step1 .step1_2,
[role="main"] #eccalculator .ecc_step1 .step1_3 {
    top: 50vw;
    right: 0;
    width: 100%;
    position: absolute
}

@media (min-width: 1024px) {

    [role="main"] #eccalculator .ecc_step1 .step1_2,
    [role="main"] #eccalculator .ecc_step1 .step1_3 {
        position: absolute;
        top: 3%;
        right: 5%;
        width: 60%
    }
}

[role="main"] #eccalculator .ecc_step1 .step1_2 {
    z-index: 1
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step1 .step1_2 {
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_step1 .step1_2 {
        padding-left: 10px;
        padding-right: 10px
    }
}

[role="main"] #eccalculator .ecc_step1 .step1_2 .placeSelector {
    margin-bottom: 1.8em
}

[role="main"] #eccalculator .ecc_step1 .step1_3 {
    z-index: 20;
    right: auto;
    left: 0%
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_step1 .step1_3 {
        top: 0;
        z-index: 1
    }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step1 .step1_3 {
        left: 5%;
        top: .8%
    }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step1.noIdea > .ecc_inner {
        height: 870px
    }
}

[role="main"] #eccalculator .ecc_step5 .ecc_inner {
    position: relative
}

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .ecc_inner {
        height: 550px
    }
}

@media (min-width: 1601px) {
    [role="main"] #eccalculator .ecc_step5 .ecc_inner {
        height: 700px
    }
}

[role="main"] #eccalculator .grid_item.question {
    font-weight: 700;
    color: white;
    font-size: 30px;
    background: var(--sunlife-yellow);
    display: flex;
    align-items: center;
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.question {
        font-size: 7vw
    }
}

[role="main"] #eccalculator .grid_item.question .item_inner {
    text-align: center;
    width: 90%;
    max-width: 13em;
    margin: 0 auto;
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.question .item_inner span {
        font-size: 6vw
    }
}

[role="main"] #eccalculator .grid_item.question .item_inner span.desc,
[role="main"] #eccalculator .grid_item.question .item_inner .affordableCountries {
    font-size: 19px;
    font-weight: 200;
    line-height: 1.2;
    display: inline-block;
    width: 100%
}

    [role="main"] #eccalculator .grid_item.question .item_inner span.desc span,
    [role="main"] #eccalculator .grid_item.question .item_inner .affordableCountries span {
        font-weight: 200;
        vertical-align: middle;
        font-size: 4vw
    }

    [role="main"] #eccalculator .grid_item.question .item_inner span.desc img,
    [role="main"] #eccalculator .grid_item.question .item_inner .affordableCountries img {
        width: 1em;
        height: auto;
        vertical-align: middle
    }

@media (max-width: 1023px) {

    [role="main"] #eccalculator .grid_item.question .item_inner span.desc,
    [role="main"] #eccalculator .grid_item.question .item_inner .affordableCountries {
        font-size: 4vw
    }
}

[role="main"] #eccalculator .grid_item.my {
    background: url("/getContentAsset/9e648136-9f5c-44b9-b6e3-9b3b154120f2/f246f73c-f72d-42d2-b6b1-ceafb27365a0/my.jpg") 30% center no-repeat;
    background-size: auto 100%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.my {
        background: url("/getContentAsset/9e648136-9f5c-44b9-b6e3-9b3b154120f2/f246f73c-f72d-42d2-b6b1-ceafb27365a0/my.jpg") 30% center no-repeat;
        background-size: 100%
    }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.my.selected {
        background-position: center center;
        background-size: cover
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.my.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.uk {
    background: url("/getContentAsset/5e38631e-7ead-4d9a-822a-8643fc3734c5/f246f73c-f72d-42d2-b6b1-ceafb27365a0/uk.jpg") 18% top no-repeat;
    background-size: auto 156%;
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.uk.selected {
        background-position: center center;
        background-size: cover
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.uk.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.us {
    background: url("/getContentAsset/b477763c-8e75-4cd5-b3e9-ae113e9c8525/f246f73c-f72d-42d2-b6b1-ceafb27365a0/usa.jpg") 21% top no-repeat;
    background-size: auto 134%;
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.us.selected {
        background-position: center center;
        background-size: cover
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.us.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.cn {
    background: url("/getContentAsset/7dbe2617-7f89-4886-8d33-3842678be27c/f246f73c-f72d-42d2-b6b1-ceafb27365a0/cn.jpg") left 40% no-repeat;
    background-size: 200% auto
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.cn.selected {
        background-position: center center;
        background-size: cover
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.cn.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.ca {
    background: url("/getContentAsset/400aa558-7a0c-4375-8dfb-f6e52f8d8d94/f246f73c-f72d-42d2-b6b1-ceafb27365a0/ca.jpg") 0% top no-repeat;
    background-size: auto 106%;
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.ca.selected {
        background: url("/getContentAsset/400aa558-7a0c-4375-8dfb-f6e52f8d8d94/f246f73c-f72d-42d2-b6b1-ceafb27365a0/ca.jpg") 100% top no-repeat;
        background-size: auto 100%
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.ca.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.au {
    background: url("/getContentAsset/5bc4cae4-3507-4889-b47b-a77589ee6776/f246f73c-f72d-42d2-b6b1-ceafb27365a0/au.jpg") 20% top no-repeat;
    background-size: auto 139%;
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.au.selected {
        background-position: center center;
        background-size: cover
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.au.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.nz {
    background: url("/getContentAsset/6cfc4e0c-df9d-4e59-8d37-0ab8d58a7af1/f246f73c-f72d-42d2-b6b1-ceafb27365a0/nz.jpg") 20% center no-repeat;
    background-size: auto 127%;
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.nz.selected {
        background: url("/getContentAsset/6cfc4e0c-df9d-4e59-8d37-0ab8d58a7af1/f246f73c-f72d-42d2-b6b1-ceafb27365a0/nz.jpg") 100% top no-repeat;
        background-size: auto 100%
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.nz.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.jp {
    background: url("/getContentAsset/f5d4218d-5004-477f-a8f2-b58e5a3de4fc/f246f73c-f72d-42d2-b6b1-ceafb27365a0/jp.jpg") left center no-repeat;
    background-size: auto 136%;
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.jp.selected {
        background: url("/getContentAsset/f5d4218d-5004-477f-a8f2-b58e5a3de4fc/f246f73c-f72d-42d2-b6b1-ceafb27365a0/jp.jpg") 100% top no-repeat;
        background-size: auto 100%
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.jp.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.nl {
    background: url("/getContentAsset/14880209-6fb4-4134-ad5c-27ac7508c273/f246f73c-f72d-42d2-b6b1-ceafb27365a0/nl.jpg") center 20% no-repeat;
    background-size: 100% auto
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.nl {
        background: url("/getContentAsset/14880209-6fb4-4134-ad5c-27ac7508c273/f246f73c-f72d-42d2-b6b1-ceafb27365a0/nl.jpg") center 20% no-repeat;
        background-size: auto 127%;
    }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid_item.nl.selected {
        background-position: center center;
        background-size: cover
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.nl.selected {
        background-position: center center;
        background-size: cover
    }
}

[role="main"] #eccalculator .grid_item.place {
    text-align: center
}

    [role="main"] #eccalculator .grid_item.place .name {
        font-weight: 700;
        color: var(--sunlife-blue);
        font-size: 26px
    }

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.place .name {
        font-size: 5.5vw
    }
}

[role="main"] #eccalculator .grid_item.place .cost {
    font-weight: 400;
    color: var(--sunlife-yellow);
    font-size: 32px
}

    [role="main"] #eccalculator .grid_item.place .cost span {
        font-weight: 700
    }

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.place .cost {
        font-size: 5.5vw
    }
}

[role="main"] #eccalculator .grid_item.place .item_inner {
    position: absolute;
    left: 0;
    bottom: 0;
    padding-top: 2em;
    padding-bottom: 1em;
    width: 100%;
    text-align: center;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 40%, #fff 100%);
    filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 )"
}

[role="main"] #eccalculator .grid_item.noIdea {
    font-size: 24px;
    color: var(--sunlife-blue);
    background: var(--sunlife-light-grey);
    font-weight: 700;
    display: flex;
    align-items: center;
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid_item.noIdea {
        font-size: 5.25vw
    }
}

[role="main"] #eccalculator .grid_item.noIdea .item_inner {
    text-align: center;
    width: 90%;
    max-width: 8.08em;
    margin: 0 auto;
}

    [role="main"] #eccalculator .grid_item.noIdea .item_inner span {
        vertical-align: middle
    }

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.my {
        background: url("/getContentAsset/9e648136-9f5c-44b9-b6e3-9b3b154120f2/f246f73c-f72d-42d2-b6b1-ceafb27365a0/my.jpg") left 40% no-repeat;
        background-size: 130% auto
    }
}

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.uk {
        background: url("/getContentAsset/5e38631e-7ead-4d9a-822a-8643fc3734c5/f246f73c-f72d-42d2-b6b1-ceafb27365a0/uk.jpg") left top no-repeat;
        background-size: auto 120%
    }
}

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.us {
        background-size: cover
    }
}

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.cn {
        background: url("/getContentAsset/7dbe2617-7f89-4886-8d33-3842678be27c/f246f73c-f72d-42d2-b6b1-ceafb27365a0/cn.jpg") left 30% no-repeat;
        background-size: 200% auto
    }
}

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.ca {
        background-size: cover
    }
}

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.au {
        background-size: cover
    }
}

[role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.nz {
    background-size: auto 120%
}

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.nz {
        background: url("/getContentAsset/6cfc4e0c-df9d-4e59-8d37-0ab8d58a7af1/f246f73c-f72d-42d2-b6b1-ceafb27365a0/nz.jpg") left 0% no-repeat;
        background-size: 100% auto
    }
}

@media (max-width: 1600px) and (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.place.jp {
        background: url("/getContentAsset/f5d4218d-5004-477f-a8f2-b58e5a3de4fc/f246f73c-f72d-42d2-b6b1-ceafb27365a0/jp.jpg") left 0% no-repeat;
        background-size: 100% auto
    }
}

[role="main"] #eccalculator .ecc_step5 .grid .grid_item.place .item_inner {
    padding: .2em 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 35%, #fff 100%)
}

[role="main"] #eccalculator .grid {
    width: 100%;
    height: 100%;
    position: relative
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid {
        min-height: 100vh
    }
}

[role="main"] #eccalculator .grid .grid_item {
    position: absolute
}

    [role="main"] #eccalculator .grid .grid_item:not(.selected) {
        cursor: pointer
    }

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item:hover {
        z-index: 10
    }

        [role="main"] #eccalculator .grid .grid_item:hover:not(.selected):after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 3px solid var(--sunlife-yellow);
            z-index: 11;
            box-sizing: border-box
        }
}

[role="main"] #eccalculator .grid .grid_item:first-child {
    cursor: auto;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 12.5%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item:first-child {
        top: 0%;
        left: 0%;
        width: 50%;
        height: 25%
    }
}

[role="main"] #eccalculator .grid .grid_item.noIdea {
    top: 87.5%;
    left: 50%;
    width: 50%;
    height: 12.5%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.noIdea {
        top: 75%;
        left: 66%;
        width: 34%;
        height: 25%
    }
}

[role="main"] #eccalculator .grid .grid_item.place {
    transition: all .2s linear
}

    [role="main"] #eccalculator .grid .grid_item.place.my {
        top: 12.5%;
        left: 50%;
        width: 50%;
        height: 12.5%
    }

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.my {
        top: 0;
        left: 50%;
        width: 51%;
        height: 25%
    }
}

[role="main"] #eccalculator .grid .grid_item.place.uk {
    top: 12.5%;
    left: 0%;
    width: 50%;
    height: 25%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.uk {
        top: 25%;
        left: 66%;
        width: 34%;
        height: 25%;
    }
}

[role="main"] #eccalculator .grid .grid_item.place.us {
    top: 37.5%;
    left: 50%;
    width: 50%;
    height: 25%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.us {
        top: 25%;
        left: 0%;
        width: 33%;
        height: 25%;
    }
}

[role="main"] #eccalculator .grid .grid_item.place.nl {
    top: 62.5%;
    left: 0%;
    width: 100%;
    height: 12.5%;
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.nl {
        top: 75%;
        left: 0%;
        width: 33%;
        height: 25%
    }
}

[role="main"] #eccalculator .grid .grid_item.place.ca {
    top: 25%;
    left: 50%;
    width: 50%;
    height: 12.5%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.ca {
        top: 50%;
        left: 33%;
        width: 33%;
        height: 25%
    }
}

[role="main"] #eccalculator .grid .grid_item.place.au {
    top: 75%;
    left: 0%;
    width: 50%;
    height: 25%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.au {
        top: 50%;
        left: 0;
        width: 33%;
        height: 25%;
    }
}

[role="main"] #eccalculator .grid .grid_item.place.nz {
    top: 75%;
    left: 50%;
    width: 50%;
    height: 12.5%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.nz {
        top: 50%;
        left: 66%;
        width: 34%;
        height: 25%
    }
}

[role="main"] #eccalculator .grid .grid_item.place.jp {
    top: 37.5%;
    left: 0%;
    width: 50%;
    height: 12.5%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.jp {
        top: 25%;
        left: 33%;
        width: 33%;
        height: 25%
    }
}

[role="main"] #eccalculator .grid .grid_item.place.cn {
    top: 50%;
    left: 0%;
    width: 50%;
    height: 12.5%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.cn {
        top: 75%;
        left: 33%;
        width: 33%;
        height: 25%
    }
}

[role="main"] #eccalculator .grid .grid_item.place.selected {
    background-color: white;
    z-index: 1;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 25%
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid .grid_item.place.selected {
        height: 50vw
    }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .grid_item.place.selected {
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%
    }
}

[role="main"] #eccalculator .grid .grid_item.place.selected .item_inner {
    background: none
}

[role="main"] #eccalculator .grid .overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    background: url("/getContentAsset/e659499f-7bf1-4e4f-b681-b579f9cf446c/f246f73c-f72d-42d2-b6b1-ceafb27365a0/resultBg.jpg") center center no-repeat;
    background-size: cover;
    width: 100%
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .grid .overlay {
        display: none
    }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .grid .overlay {
        height: 100%
    }
}

[role="main"] #eccalculator .placeSelector {
    margin-bottom: 1.33em;
    text-align: center
}

    [role="main"] #eccalculator .placeSelector ul,
    [role="main"] #eccalculator .placeSelector li {
        display: block;
        padding: 0;
        margin: 0
    }

    [role="main"] #eccalculator .placeSelector ul {
        position: relative
    }

    [role="main"] #eccalculator .placeSelector li {
        display: inline-block;
        vertical-align: middle;
        list-style: none
    }

        [role="main"] #eccalculator .placeSelector li.prev,
        [role="main"] #eccalculator .placeSelector li.next {
            position: absolute;
            top: 0;
            cursor: pointer;
            z-index: 1;
            width: 15px;
            height: 30px;
            opacity: 1;
            transition: opacity .4s linear
        }

            [role="main"] #eccalculator .placeSelector li.prev img,
            [role="main"] #eccalculator .placeSelector li.next img {
                height: 30px
            }

            [role="main"] #eccalculator .placeSelector li.prev.disable,
            [role="main"] #eccalculator .placeSelector li.next.disable {
                opacity: 0;
                cursor: auto
            }

        [role="main"] #eccalculator .placeSelector li.prev {
            left: 20px
        }

        [role="main"] #eccalculator .placeSelector li.next {
            right: 20px
        }

        [role="main"] #eccalculator .placeSelector li.location {
            position: relative;
            width: 100%;
            font-size: 30px !important;
            font-weight: 700 !important
        }

[role="main"] #eccalculator .courseSeletor {
    text-align: center;
    max-width: 100%
}

    [role="main"] #eccalculator .courseSeletor select,
    [role="main"] #eccalculator .courseSeletor option {
        /*    font-family: 'agenda', 'Noto Sans TC', 'SimHei', 'Apple LiGothic', serif;*/
        font-weight: 700;
        color: var(--sunlife-blue);
        font-size: 30px;
        border: none;
        width: auto;
        text-align: center
    }

    [role="main"] #eccalculator .courseSeletor select {
        padding-right: 1em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        position: relative;
        z-index: 2;
        outline: 0;
        max-width: 100%;
        line-height: 1.5;
        height: 1.5em;
        cursor: pointer
    }

        [role="main"] #eccalculator .courseSeletor select::-ms-expand {
            display: none
        }

    [role="main"] #eccalculator .courseSeletor .selectWrapper {
        display: inline-block;
        position: relative;
        background: none;
        max-width: 100%;
        font-size: 30px
    }

        [role="main"] #eccalculator .courseSeletor .selectWrapper:after {
            content: '';
            display: block;
            width: .8em;
            height: 1.5em;
            background: url("/getContentAsset/380ec2ce-55c8-45d8-9fd9-b0a624cc1dec/f246f73c-f72d-42d2-b6b1-ceafb27365a0/icoDownArw.svg") center center no-repeat transparent;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1
        }

        [role="main"] #eccalculator .courseSeletor .selectWrapper.disable select {
            pointer-events: none;
            padding-right: 0
        }

        [role="main"] #eccalculator .courseSeletor .selectWrapper.disable:after {
            display: none
        }

[role="main"] #eccalculator .step1_2 {
    width: 90%;
    text-align: center;
    padding: 2em 0 0;
    background: #fff
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .step1_2 {
        background: rgba(255, 255, 255, 0.95);
        max-width: 450px
    }
}

[role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:first-child,
[role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:last-child {
    padding: 1.11em 0 1.22em;
    border: 3px solid var(--sunlife-yellow);
    width: 100%;
    max-width: 380px;
    margin: 1em auto
}

    [role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:first-child div:first-child,
    [role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:last-child div:first-child {
        font-size: 19px;
        font-weight: 400;
        color: var(--sunlife-blue);
        line-height: 1.2
    }

    [role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:first-child div:last-child,
    [role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:last-child div:last-child {
        font-size: 50px;
        font-weight: 400;
        color: var(--sunlife-yellow);
        line-height: 1
    }

        [role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:first-child div:last-child span,
        [role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:last-child div:last-child span {
            font-weight: 700
        }

[role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:last-child {
    margin-top: 2em;
    margin-bottom: 2em
}

[role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:first-child {
    position: relative
}

    [role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:first-child:before {
        content: '';
        display: block;
        height: 1em;
        width: 3px;
        position: absolute;
        top: -1em;
        left: 50%;
        background: var(--sunlife-yellow)
    }

[role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:last-child {
    position: relative
}

    [role="main"] #eccalculator .step1_2 .needFeeWrapper .needFee:last-child:after {
        content: '+';
        font-size: 3em;
        position: absolute;
        top: -.85em;
        left: 0;
        width: 100%;
        text-align: center;
        font-family: sans-serif;
        color: var(--sunlife-yellow)
    }

[role="main"] #eccalculator .step1_2 button {
    width: 100%;
    max-width: 300px;
    font-weight: 700;
    color: white;
    border: none;
    background: #003947;
    padding: 1.25em 0;
    cursor: pointer;
    text-transform: capitalize
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .step1_2 button {
        min-width: 51%
    }
}

[role="main"] #eccalculator .step1_2 button span {
    vertical-align: middle
}

[role="main"] #eccalculator .step1_2 button.back {
    background: none;
    border: none;
    color: var(--sunlife-blue);
    font-weight: 400;
    text-transform: none;
    margin-bottom: 1em
}

    [role="main"] #eccalculator .step1_2 button.back:after {
        content: none
    }

[role="main"] #eccalculator .step1_2 button:disabled {
    background: #ccc
}

[role="main"] #eccalculator .step1_3 {
    width: 90%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .step1_3 {
        max-width: 450px
    }
}

[role="main"] #eccalculator .step1_3 .mobile img {
    display: block
}

[role="main"] #eccalculator .step1_3 > .inner {
    padding: 2em 1em 0;
    background: #fff
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .step1_3 > .inner {
        background: rgba(255, 255, 255, 0.95);
        margin-bottom: 1em
    }
}

[role="main"] #eccalculator .step1_3 > .inner > div:not(:last-child) {
    border-bottom: 1px solid var(--sunlife-yellow)
}

[role="main"] #eccalculator .step1_3 > .inner > .location {
    text-align: center !important;
    padding-bottom: 1.5em;
    border-bottom: none !important
}

    [role="main"] #eccalculator .step1_3 > .inner > .location .place {
        font-size: 30px !important;
        font-weight: 700 !important;
        margin-bottom: .5em;
        display: none
    }

    [role="main"] #eccalculator .step1_3 > .inner > .location .desc {
        font-size: 21px;
        font-weight: 200
    }

[role="main"] #eccalculator .step1_3 .inputs {
    font-size: 16px;
    font-weight: 200;
    background: none;
    position: relative;
    padding: 0 0 1.5em;
    margin-top: 1.5em
}

    [role="main"] #eccalculator .step1_3 .inputs label {
        font-weight: 200
    }

        [role="main"] #eccalculator .step1_3 .inputs label .age {
            font-weight: 400
        }

    [role="main"] #eccalculator .step1_3 .inputs.expanded {
        padding: 0;
        margin: 1.5em 0
    }

    [role="main"] #eccalculator .step1_3 .inputs input {
        width: 100%;
        height: 45px;
        padding: 0 0.833em;
        margin: 0.8em 0 1.5em;
        font-style: normal !important
    }

        [role="main"] #eccalculator .step1_3 .inputs input:not([type="range"]) {
            border: 1px solid var(--sunlife-yellow)
        }

        [role="main"] #eccalculator .step1_3 .inputs input::-ms-clear {
            display: none
        }

        [role="main"] #eccalculator .step1_3 .inputs input#ecname {
            font-size: 16px
        }

    [role="main"] #eccalculator .step1_3 .inputs .icon {
        position: absolute;
        width: 20%;
        text-align: center;
        padding-right: 3%;
        padding-left: 3%;
        top: 0;
        left: 0
    }

@media (min-width: 1024px) {
    [role="main"] #eccalculator .step1_3 .inputs .icon {
        width: 30%;
        padding-right: 10%;
        padding-left: 10%
    }

        [role="main"] #eccalculator .step1_3 .inputs .icon img {
            width: 100%;
            height: auto
        }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .step1_3 .inputs .icon img {
        width: 2.5em;
        height: auto
    }
}

[role="main"] #eccalculator .step1_3 .inputs i {
    font-size: 2em
}

[role="main"] #eccalculator .step1_3 .inputs.childNameInput {
    padding: 0 0 0;
    margin: 0.833em 0 0
}

    [role="main"] #eccalculator .step1_3 .inputs.childNameInput.expanded {
        margin: 0.833em 0
    }

@media (min-width: 1024px) {
    [role="main"] #eccalculator .step1_3 .inputs.childNameInput .icon {
        padding-left: 10.5%;
        padding-right: 10.5%
    }

        [role="main"] #eccalculator .step1_3 .inputs.childNameInput .icon img {
            width: 80%;
            height: auto
        }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .step1_3 .inputs.childNameInput .icon img {
        width: 2em;
        height: auto
    }
}

[role="main"] #eccalculator .step1_3 .inputs .inner {
    width: 95%;
    padding-left: 25%
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .step1_3 .inputs .inner {
        padding-left: 30%
    }
}

[role="main"] #eccalculator .step1_3 .childAgeInput input {
    padding-left: 0;
    padding-right: 0
}

[role="main"] #eccalculator .step1_3 .nameWrapper {
    margin-bottom: 1.07em
}

[role="main"] #eccalculator .step1_3 .savedAmountInput {
    margin-bottom: 1.3em;
    border-bottom: none !important
}

    [role="main"] #eccalculator .step1_3 .savedAmountInput.expanded {
        padding-bottom: 0
    }

    [role="main"] #eccalculator .step1_3 .savedAmountInput label {
        font-size: 14px
    }

    [role="main"] #eccalculator .step1_3 .savedAmountInput input {
        font-size: 16px;
        font-weight: 700;
        text-align: right;
        margin: 0.2em 0 0.55em
    }

        [role="main"] #eccalculator .step1_3 .savedAmountInput input#ecsaving {
            padding-left: 1.8em;
            padding-right: .6em;
            max-width: none
        }

        [role="main"] #eccalculator .step1_3 .savedAmountInput input#ecrate {
            padding-right: 1.35em;
            max-width: none
        }

    [role="main"] #eccalculator .step1_3 .savedAmountInput .ecsavingwrapper {
        position: relative
    }

        [role="main"] #eccalculator .step1_3 .savedAmountInput .ecsavingwrapper:after {
            content: 'RM';
            position: absolute;
            top: 1.6em;
            left: 1em;
            font-size: 14px
        }

    [role="main"] #eccalculator .step1_3 .savedAmountInput .ecratewrapper {
        position: relative
    }

        [role="main"] #eccalculator .step1_3 .savedAmountInput .ecratewrapper:after {
            content: '%';
            position: absolute;
            top: 1.2em;
            right: .5em
        }

[role="main"] #eccalculator .step1_3 .monthlySavingInput {
    border-top: 1px solid var(--sunlife-yellow);
    border-bottom: none !important;
    padding-bottom: 2.83em;
    padding-top: 1.83em
}

    [role="main"] #eccalculator .step1_3 .monthlySavingInput .icon {
        top: 1.83em
    }

    [role="main"] #eccalculator .step1_3 .monthlySavingInput.expanded {
        padding-top: 1.5em;
        padding-bottom: 0.83em;
        margin-bottom: 0
    }

        [role="main"] #eccalculator .step1_3 .monthlySavingInput.expanded .icon {
            top: 1.5em
        }

    [role="main"] #eccalculator .step1_3 .monthlySavingInput .ecrmonthlysavingwrapper {
        position: relative
    }

        [role="main"] #eccalculator .step1_3 .monthlySavingInput .ecrmonthlysavingwrapper input {
            font-size: 16px;
            font-weight: 700;
            text-align: right;
            margin: 0.55em 0;
            padding-left: 1.8em;
            padding-right: .6em;
            max-width: none
        }

        [role="main"] #eccalculator .step1_3 .monthlySavingInput .ecrmonthlysavingwrapper:after {
            content: 'RM';
            position: absolute;
            top: 1.9em;
            left: 1em;
            font-size: 14px
        }

[role="main"] #eccalculator .step1_3 .buttonWrapper {
    text-align: center
}

    [role="main"] #eccalculator .step1_3 .buttonWrapper button {
        width: 100%;
        max-width: 300px;
        font-size: 16px;
        font-weight: 700;
        color: white;
        border: none;
        background: #003947;
        padding: 1.25em 0;
        cursor: pointer;
        text-transform: capitalize
    }

@media (max-width: 1023px) {
    [role="main"] #eccalculator .step1_3 .buttonWrapper button {
        min-width: 51%
    }
}

[role="main"] #eccalculator .step1_3 .buttonWrapper button span {
    vertical-align: middle
}

[role="main"] #eccalculator .step1_3 .buttonWrapper button.back {
    background: none;
    border: none;
    color: var(--sunlife-blue);
    font-weight: 400;
    text-transform: none;
    margin-bottom: 1em
}

    [role="main"] #eccalculator .step1_3 .buttonWrapper button.back:after {
        content: none
    }

[role="main"] #eccalculator .step1_3 .buttonWrapper button:disabled {
    background: #ccc
}

[role="main"] #eccalculator .step1_3.noIdea > .inner {
    padding-top: 0.833em
}

    [role="main"] #eccalculator .step1_3.noIdea > .inner > .location {
        padding-bottom: .833em
    }

[role="main"] #eccalculator .step1_3.noIdea .savedAmountInput {
    margin-bottom: 0
}

    [role="main"] #eccalculator .step1_3.noIdea .savedAmountInput .ecratewrapper input#ecrate {
        margin-bottom: 1em;
        max-width: none
    }

[role="main"] #eccalculator .step1_3.noIdea .monthlySavingInput {
    margin-top: 0;
    padding-top: 1.5em
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_result {
        background: url("/getContentAsset/e659499f-7bf1-4e4f-b681-b579f9cf446c/f246f73c-f72d-42d2-b6b1-ceafb27365a0/resultBg.jpg") center center no-repeat;
        background-size: cover;
        padding: 5% 5% 10%
    }
}

[role="main"] #eccalculator .ecc_result .ecc_inner {
    text-align: center
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner {
        width: 90%;
        max-width: 450px
    }
}

[role="main"] #eccalculator .ecc_result .ecc_inner > div {
    background: rgba(255, 255, 255, 0.95)
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_study_years {
    font-size: 24px;
    font-weight: 400;
    padding-top: 1.33em;
    padding-bottom: 0.33em
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_child_name {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 0.8em
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_location {
    font-size: 20px
}

    [role="main"] #eccalculator .ecc_result .ecc_inner .result_location div:first-child {
        padding-top: 1.2em;
        border-top: 1px solid var(--sunlife-yellow);
        padding-bottom: 0.6em
    }

    [role="main"] #eccalculator .ecc_result .ecc_inner .result_location .placeSelector {
        border-bottom: 1px solid var(--sunlife-yellow);
        padding-bottom: 0.8em;
        margin-bottom: 0
    }

[role="main"] #eccalculator .ecc_result .ecc_inner .result_breakdown {
    padding-top: 1em
}

[role="main"] #eccalculator .ecc_result .ecc_inner .courseSeletor {
    padding-top: 0.87em
}

[role="main"] #eccalculator .ecc_result .ecc_inner .ttf_amount,
[role="main"] #eccalculator .ecc_result .ecc_inner .tle_amount {
    font-size: 19px
}

    [role="main"] #eccalculator .ecc_result .ecc_inner .ttf_amount .inner,
    [role="main"] #eccalculator .ecc_result .ecc_inner .tle_amount .inner {
        overflow: hidden !important;
        width: 90%;
        max-width: 300px;
        margin: auto
    }

    [role="main"] #eccalculator .ecc_result .ecc_inner .ttf_amount .feeLabel,
    [role="main"] #eccalculator .ecc_result .ecc_inner .tle_amount .feeLabel {
        padding-right: .5em
    }

[role="main"] #eccalculator .ecc_result .ecc_inner .ttf_amount {
    padding-top: 0.9em;
    margin-bottom: 2em
}

[role="main"] #eccalculator .ecc_result .ecc_inner .tle_amount {
    margin-top: 2em;
    padding-bottom: 0.9em;
    position: relative
}

    [role="main"] #eccalculator .ecc_result .ecc_inner .tle_amount:before {
        content: '+';
        font-size: 40px;
        color: var(--sunlife-yellow);
        font-family: sans-serif;
        position: absolute;
        top: -1em;
        left: 0;
        width: 100%;
        text-align: center
    }

[role="main"] #eccalculator .ecc_result .ecc_inner .result_cost {
    background: rgba(238, 179, 16, 0.95);
    font-size: 19px;
    font-weight: 700;
    padding: 1.2em 0;
    position: relative
}

    [role="main"] #eccalculator .ecc_result .ecc_inner .result_cost .cost_amount {
        color: white;
        font-size: 48px;
        font-weight: 400;
        padding-top: 0.1em
    }

        [role="main"] #eccalculator .ecc_result .ecc_inner .result_cost .cost_amount span {
            font-weight: 700
        }

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner .result_cost {
        border-top: 20px solid white;
        border-left: 20px solid white;
        border-right: 20px solid white
    }
}

@media (max-width: 520px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner .result_cost {
        padding-left: 1em;
        padding-right: 1em
    }
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_cost:after {
    content: '▼';
    -ms-transform: scaleX(3) translateX(-16%);
    transform: scaleX(3) translateX(-16%);
    position: absolute;
    bottom: -0.6em;
    left: 50%;
    color: rgba(238, 179, 16, 0.95);
    font-size: 2em
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall {
    font-size: 0;
    background: rgba(247, 223, 159, 0.95)
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall {
        border-bottom: 40px solid white;
        border-left: 20px solid white;
        border-right: 20px solid white;
        padding-left: 15px;
        padding-right: 15px
    }
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall > div {
    display: inline-block;
    width: 50%;
    font-size: 19px;
    font-weight: 400;
    vertical-align: top;
    padding: 1.2em .8em 1.2em .2em;
    line-height: 1.3
}

@media (max-width: 520px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall > div {
        display: block;
        width: 100%;
        padding: .8em 0 0.8em
    }
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall > div:last-child {
    padding: 1.2em .2em 1.2em .8em
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .saved_amount {
    font-size: 30px;
    position: relative
}

@media (max-width: 520px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .saved_amount {
        font-size: 30px
    }
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .saved_amount .detail {
    font-size: 14px
}

@media (max-width: 375px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .saved_amount .detail {
        font-size: 16px
    }
}

@media (max-width: 520px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .saved_amount .detail {
        font-size: 18px
    }
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .saved_amount:before {
    content: '+';
    color: #003947;
    font-size: 40px;
    font-family: sans-serif;
    position: absolute;
    left: 95%;
    top: 30%;
    text-align: center
}

@media (max-width: 520px) {
    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .saved_amount:before {
        top: auto;
        bottom: -.8em;
        left: 50%;
        right: auto;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .saved_amount:after {
        bottom: -.1em;
        top: auto;
        left: 50%;
        right: 0;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

[role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .shortfall_amount {
    font-size: 30px;
    font-weight: 400
}

    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .shortfall_amount span {
        font-weight: 700
    }

    [role="main"] #eccalculator .ecc_result .ecc_inner .result_shortfall .shortfall_amount .detail {
        font-size: 14px;
        font-weight: 700
    }

[role="main"] #eccalculator .ecc_result .reset {
    right: 1.67em;
    top: 1.67em;
    background: none;
    border: none;
    color: #003947;
    cursor: pointer
}

    [role="main"] #eccalculator .ecc_result .reset img {
        width: 1em;
        vertical-align: middle;
        margin-right: .5em;
        height: auto
    }

    [role="main"] #eccalculator .ecc_result .reset span {
        font-size: 18px;
        vertical-align: middle
    }

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_result .reset {
        float: right
    }
}

[role="main"] #eccalculator .ecc_footer {
    text-align: center;
    background: var(--sunlife-yellow);
    padding: 1.67em 0;
    position: relative
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_footer {
        padding-bottom: 4em
    }
}

[role="main"] #eccalculator .ecc_footer .head {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: .5em
}

[role="main"] #eccalculator .ecc_footer .reduce_shortfall_amount {
    font-size: 55px;
    font-weight: 400;
    color: white
}

    [role="main"] #eccalculator .ecc_footer .reduce_shortfall_amount span {
        font-weight: 700
    }

[role="main"] #eccalculator .ecc_footer .reduce_shortfall_duration,
[role="main"] #eccalculator .ecc_footer .reduce_shortfall_persent,
[role="main"] #eccalculator .ecc_footer .affordableCountries {
    font-size: 19px;
    font-weight: 400
}

    [role="main"] #eccalculator .ecc_footer .reduce_shortfall_duration span,
    [role="main"] #eccalculator .ecc_footer .reduce_shortfall_persent span,
    [role="main"] #eccalculator .ecc_footer .affordableCountries span {
        font-weight: 700
    }

    [role="main"] #eccalculator .ecc_footer .reduce_shortfall_duration img,
    [role="main"] #eccalculator .ecc_footer .reduce_shortfall_persent img,
    [role="main"] #eccalculator .ecc_footer .affordableCountries img {
        vertical-align: middle;
        width: 1em;
        height: auto
    }

[role="main"] #eccalculator .ecc_footer .affordableCountries {
    margin-top: 1em;
    padding-left: 1em;
    padding-right: 1em
}

    [role="main"] #eccalculator .ecc_footer .affordableCountries span {
        vertical-align: middle;
        font-weight: normal
    }

[role="main"] #eccalculator .ecc_footer .reduce_shortfall_duration {
    margin-bottom: .5em
}

[role="main"] #eccalculator .ecc_footer .reduce_shortfall_persent {
    margin-top: .5em
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_footer .reduce_shortfall_persent {
        padding-left: 1em;
        padding-right: 1em
    }
}

[role="main"] #eccalculator .ecc_footer .reduce_shortfall_selector {
    width: 90%;
    max-width: 350px;
    margin: 0 auto
}

    [role="main"] #eccalculator .ecc_footer .reduce_shortfall_selector input {
        padding: 0;
        height: 40px
    }

[role="main"] #eccalculator .ecc_footer .share {
    right: 50;
    top: -10%;
    position: absolute;
    background: none;
    border: none;
    cursor: pointer
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_footer .share {
        right: 1.67em;
        top: 10.2em
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_footer .share {
        left: 50%;
        bottom: 2em;
        right: auto;
        top: auto;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

[role="main"] #eccalculator .ecc_footer .share img {
    width: 1.5em;
    vertical-align: middle;
    margin-right: .5em;
    height: auto
}

[role="main"] #eccalculator .ecc_footer .share span {
    color: #003947;
    font-size: 16px;
    vertical-align: middle
}

[role="main"] #eccalculator .ecc_footer.affordableTable button {
    background: none;
    border: none;
    color: var(--sunlife-blue);
    font-weight: 400;
    text-transform: none;
    font-size: 16px;
    margin-top: 2em;
    cursor: pointer
}

[role="main"] #eccalculator .ecc_moreInfo {
    margin-bottom: 3em
}

    [role="main"] #eccalculator .ecc_moreInfo .leadOut {
        text-align: center;
        font-size: 24px;
        padding: 2.5em 0;
        font-weight: 700;
        text-transform: uppercase
    }

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_moreInfo .leadOut {
        padding-left: .5em;
        padding-right: .5em
    }
}

[role="main"] #eccalculator .ecc_moreInfo .leadOut span {
    color: var(--sunlife-yellow)
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks {
    font-size: 0
}

    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item {
        position: relative
    }

        [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item .imgWrapper {
            border-bottom: 2px solid white
        }

            [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item .imgWrapper img {
                display: block
            }

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item .imgWrapper img {
        display: none
    }
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item .imgWrapper + div {
    padding: .6em .8em 2em
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item {
        width: 90%;
        margin: 0 auto 40px
    }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item {
        display: inline-block;
        width: 22%;
        margin-right: 4%;
        vertical-align: top
    }
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item:last-child {
        margin-right: 0
    }
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item img {
    width: 100%;
    height: auto;
    border-width: 0
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item > a {
    font-size: 16px;
    font-weight: 400;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    display: inline-block;
    color: var(--sunlife-blue);
    text-decoration: none
}

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item > a {
        min-height: 20em
    }
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item > a {
        width: 100%
    }
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item > a > div + div {
    padding: .2em .5em
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item > a .hl {
    font-size: 19px;
    color: #003947;
    padding: .2em 0 .6em;
    display: inline-block;
    width: 100%
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item ul,
[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item li {
    padding: 0;
    margin: 0;
    display: block
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item ul {
    margin-top: .25em
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item li {
    position: relative;
    padding-left: .8em;
    padding-bottom: .25em
}

    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item li:before {
        content: '';
        display: block;
        width: .4em;
        height: .4em;
        border-radius: 50%;
        background: #003947;
        position: absolute;
        top: .3em;
        left: 0
    }

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item:hover {
        -ms-transform: scale(1.03);
        transform: scale(1.03);
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        transition: all .1s linear;
        box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5)
    }
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item.feature {
    background: #f2f5f6
}

    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item.feature .imgWrapper {
        position: relative;
        border-bottom: 2px solid var(--sunlife-yellow)
    }

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item.feature .imgWrapper {
        border-bottom: none
    }
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item.feature .imgWrapper:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("/content/dam/sunlife/legacy/assets/hk/About%20Us/Tools%20-%20Resources/Education%20budget%20calculator/img/slf_featured_icon.jpg") top right no-repeat transparent
}

[role="main"] #eccalculator .ecc_moreInfo .otherlinks .item.feature .imgWrapper + div {
    position: relative
}

@media (max-width: 1023px) {
    [role="main"] #eccalculator .ecc_moreInfo .otherlinks .item.feature .imgWrapper + div {
        border-bottom: 2px solid var(--sunlife-yellow)
    }
}

[role="main"] #eccalculator .ecc_step5 .place:before {
    content: '';
    background: rgba(0, 0, 0, 0.5);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1
}

[role="main"] #eccalculator .ecc_step5 .place.affordable:before {
    display: none
}

[role="main"] #eccalculator .ecc_step5 .grid .grid_item.noIdea {
    cursor: auto
}

    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.noIdea .item_inner:after {
        content: none
    }

@media (min-width: 1024px) {
    [role="main"] #eccalculator .ecc_step5 .grid .grid_item.noIdea:hover:after {
        content: none
    }
}

[role="main"] #eccalculator .ecc_step5 .grid_item.question {
    cursor: auto;
    display: flex;
    align-items: center;
}

    [role="main"] #eccalculator .ecc_step5 .grid_item.question .item_inner {
        max-width: 14em;
    }

[role="main"] #eccalculator .terms {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 400;
    margin-top: 2em
}

    [role="main"] #eccalculator .terms ul {
        padding: 10px;
        margin: 0
    }

    [role="main"] #eccalculator .terms ul,
    [role="main"] #eccalculator .terms li {
        display: block;
        list-style: none !important;
        background-image: none !important
    }

        [role="main"] #eccalculator .terms ul a,
        [role="main"] #eccalculator .terms li a {
            color: #003947;
            font-weight: 700;
            text-decoration: none
        }

            [role="main"] #eccalculator .terms ul a:hover,
            [role="main"] #eccalculator .terms li a:hover {
                text-decoration: underline
            }

        [role="main"] #eccalculator .terms li.bulletPoints {
            position: relative
        }

            [role="main"] #eccalculator .terms li.bulletPoints:before {
                content: '*';
                margin-left: -.6em;
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
                width: .5em
            }

.leadinAnimation-enter-active {
    animation: fadeIn .2s linear
}

.leadinAnimation-leave-active {
    animation: fadeOut .2s linear
}

@keyframes leadinAnimation-in {
    0% {
        max-height: 0
    }

    100% {
        max-height: 1000px
    }
}

.gotoStep2-enter-active {
    animation: fadeIn .5s linear
}

.gotoStep2-leave-active {
    animation: fadeOut .1s linear
}

.gotoStep3-enter-active {
    animation: slideInRight .5s linear
}

.gotoStep3-leave-active {
    animation: fadeOut .5s linear
}

.inputsFade-enter-active {
    animation: fadeIn .5s linear
}

.inputsFade-leave-active {
    animation: fadeOut .5s linear
}