@media (min-width: 414px) {

    /*iPhone 6+*/
    .home-contact {
        width: 94%;
    }
}


@media (min-width: 768px) {

    /*iPad portrait*/

    span {
        margin: 0 0.1em;
    }

    .top-spacer {
        margin-top: 69px !important;
    }

    .wrapper {
        padding: 1em;
    }


    /* ----- swiper ----- */

    .swiper-main {
        height: 356px;
    }

    .swiper-main .swiper-wrapper div h1 {
        font-size: 32px;
    }

    .swiper-main .swiper-wrapper div h1 span {
        display: inline-block
    }

    .slide1 {
        background-size: 136%;
    }

    .slide1 h1 {
        position: absolute;
        right: 2em;
    }

    .slide2>div {
        width: 50%;
    }

    .slide2>div>h1 {
        font-size: 32px;
    }

    .slide2 figure {
        width: 50%;
    }

    .slide5 {
        background-size: cover;
        background-position: top;
    }

    .slide5 h1 {
        position: absolute;
        left: 8%;
    }

    .slide6 h1 {
        top: 29%;
        left: 8%;
    }

    .slide6>figure:nth-child(2) {
        width: 24%;
        left: 36%;
    }

    .slide6>figure:nth-child(3) {
        width: 36%;
    }

    .slide6>figure:last-child {
        width: 40%;
        left: 8%;
        bottom: 10%;
    }

    .main-img-target {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: center;
    }

    .swiper-target {
        width: 46%;
        margin-left: 0;
    }

    .main-img-target>div:last-child {
        width: 52%;
    }

    .main-img-target>div:last-child h4,
    .main-img-target>div:last-child p {
        text-align: left;
    }

    .main-img-target>div:last-child h4 {
        margin-top: 0;
    }

    .img-full {
        height: 360px;
    }

    .img-full h1 {
        font-size: 28px;
    }

    .img-full-2>h1 {
        top: 32px;
    }

    .img-full-2>h1>span {
        display: inline-block;
    }

    .img-full-9>h1,
    .img-full-10>h1 {
        left: 4%;
        bottom: 20px;
    }

    .img-full-3>h1,
    .img-full-8>h1 {
        left: 4%;
        top: 0;
    }

    .img-full-4>h1 {
        left: 100px;
        bottom: inherit;
    }

    .img-full-7>h1 {
        left: 12%;
    }

    .main-our-service>div:last-child {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: first baseline;
        justify-content: space-between;
    }

    .main-our-service>div:last-child>div {
        width: 48%;
    }

    .main-our-people>p {
        margin-top: 0;
    }

    .main-our-people>figure {
        width: 24%;
        margin: 0.5em auto;
    }

    .main-work>div {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: space-between;
    }

    .main-work>div>div {
        width: 33%;
        height: 1046px;
    }

    .main-alway-onEra>div {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: center;
    }

    .main-alway-onEra>div>div {
        width: 40%;
        margin: 0.5em 0;
    }

    .main-alway-onEra>div>div:first-child,
    .main-alway-onEra>div>div:nth-child(2) {
        height: 184px;
    }

    .main-alway-onEra>div>div:nth-child(3),
    .main-alway-onEra>div>div:nth-child(4) {
        height: 202px;
    }

    .main-alway-onEra>div>div:nth-child(5),
    .main-alway-onEra>div>div:nth-child(6) {
        height: 158px;
    }

    .main-alway-onEra>div>div:nth-child(7),
    .main-alway-onEra>div>div:nth-child(8) {
        height: 184px;
    }

    .main-alway-onEra>div>div:nth-child(9),
    .main-alway-onEra>div>div:last-child {
        height: 256px;
    }

    .main-alway-onEra>div>div:nth-child(odd) {
        margin-right: 0.5em;
    }

    .main-alway-onEra>div>div:nth-child(even) {
        margin-left: 0.5em;
    }

    .main-why>div {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: center;
    }

    .main-why>div>div {
        width: 44%;
        margin: 0.5em 0;
        padding: 1em 1em 3em 1em;
    }

    .main-why>div>div:first-child,
    .main-why>div>div:nth-child(2) {
        height: 275px;
    }

    .main-why>div>div:nth-child(3),
    .main-why>div>div:last-child {
        height: 275px;
    }

    .main-why>div>div:nth-child(odd) {
        margin-right: 0.5em;
    }

    .main-why>div>div:nth-child(even) {
        margin-left: 0.5em;
    }

    .lagacy {
        width: 88%;
        flex-flow: row nowrap;
    }

    .lagacy>div {
        margin: 0 0.5em;
    }

    .bank-vol {
        justify-content: space-around;
    }

    .bank-vol>div {
        width: 22%;
    }

    .client>h3>span {
        display: inline-block;
    }

    .client>div {
        flex-flow: row wrap;
    }

    .client>div>div {
        width: 18%;
    }

    .partner {
        margin: 0 auto;
    }
    .partner>div>h3 span {
        display: inline-block;
    }

    .partner>div:first-child>div>figure:first-child {
        width: 19%;
    }

    .partner>div:first-child>div>figure:nth-child(2) {
        width: 18%;
    }

    .partner>div:first-child>div>figure:nth-child(3) {
        width: 17%;
    }

    .partner>div:first-child>div>figure:nth-child(4) {
        width: 17%;
    }

    .partner>div:first-child>div>figure:last-child {
        width: 10%;
    }


    .partner>div:last-child>div {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
    }
    
    .partner>div:last-child>div>figure {
        width: 14%;
        margin: 0 0.5em 0 0;
    }
    .partner>div:last-child>div>h5 {
        font-size: 20px;
    }

    .our-belief>div {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: space-around;
    }

    .our-belief>div>div {
        width: 48%;
        margin: 0.5em auto;
    }

    .our-belief>div>div:first-child,
    .our-belief>div>div:nth-child(2) {
        height: 267px;
    }

    .our-belief>div>div:nth-child(3),
    .our-belief>div>div:last-child {
        height: 241px;
    }

    .our-belief>div>div:nth-child(odd) {
        margin-right: 0.5em;
    }

    .our-belief>div>div:nth-child(even) {
        margin-left: 0.5em;
    }

    .our-belief>div>div:first-child,
    .our-belief>div>div:last-child {
        color: rgba(189, 229, 231, 1);
        background-color: rgba(16, 69, 87, 1);
    }

    .our-belief>div>div:nth-child(2),
    .our-belief>div>div:nth-child(3) {
        color: rgba(16, 69, 87, 1);
        background-color: rgba(189, 229, 231, 1);
    }

    /* ------- Home Contact ------- */


    .home-contact>div:first-child {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: space-between;
    }

    .home-contact>div:first-child>h1 {
        width: auto;
        margin: 0.5em 0;
        text-align: left;
    }

    .home-contact>div:nth-child(3) {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: space-between;
    }

    .home-contact>div:nth-child(3)>div>h4,
    .home-contact>div:nth-child(3)>div>div>h5 {
        font-size: 18px;
    }

    .home-contact>div:nth-child(3)>div>div h5 br {
        display: block;
    }

    .home-contact>div:nth-child(3)>div>div h5 span {
        display: inline-block;
    }

    .home-contact>div:last-child>div:last-child>a>figure {
        width: 40px;
        margin-right: 8px;
    }



    .home-contact>div:nth-child(3)>figure {
        /* Line QR */
        width: 100px;
        margin: 0;
    }

    .home-contact>div:first-child>div>a,
    .home-contact>div:last-child>a {
        /*--- social nav --- */
        width: 54px;
    }

    .home-contact>div:first-child>div {
        display: flex;
    }

    .home-contact>div:last-child {
        display: none;
    }

    .home-contact>div:last-child>div:last-child>div:last-child>figure {
        width: 100px;
        margin: 0 0 0 50px;
    }




    /* ------- footer ------- */

    footer>div {
        padding: 1em 8%;
        display: flex;
        flex-flow: row-reverse nowrap;
        align-items: baseline;
        justify-content: space-between;
    }

    footer>div>div {
        width: auto;
        margin: 0;

        display: flex;
        flex-flow: row nowrap;
        align-items: baseline;
        justify-content: flex-start;
    }

    footer>div>div>a {
        margin: 0 0 0 2em;
    }

    footer>div>h6 {
        width: auto;
        margin: 0;
    }

    /* ----- page service ----- */
    .ser-pain>div {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: center;
    }

    .ser-pain>div>div {
        width: 28%;
        height: 210px;
    }

    .ser-PMS>div {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: space-between;
    }

    .ser-PMS>div>figure {
        width: 38%;
        height: 200px
    }

    .ser-PMS>div>div {
        width: 60%;
    }

    .ser-PMS>div>div>div:first-child>h1 {
        margin-top: 0;
    }

    .map {
        width: 80%;
        height: 320px;
    }

    /* ----- policy ----- */
    .policy {
        width: 90%;
        padding: 1em 0;
    }

    .policy>h1>span {
        display: inline-block;
    }

}

@media (min-width: 992px) {

    /*iPad landscape*/
    h1 {
        font-size: 32px;
        letter-spacing: 1px
    }

    p {
        text-align: center;
    }

    .wrapper {
        padding: 1.5em 2em;
    }

    .info-wrap {
        width: 956px;
        padding: 2em 0;
    }

    .swiper-main {
        height: 480px;
    }

    .slide1 {
        background-size: cover;
    }

    .slide6>figure:nth-child(3) {
        width: 30%;
    }

    .swiper-target {
        width: 40%;
        margin: 0 1em 0 0;
    }

    .img-target figure {
        height: 260px;
    }

    .main-img-target>div:last-child {
        width: 36%;
    }

    .img-full {
        height: 480px;
    }

    .img-full h1 {
        font-size: 36px;
    }

    .main-our-service>div:last-child {
        justify-content: center;
    }

    .main-our-service>div:last-child>div {
        width: 29%;
        margin: 1em;
    }

    .main-work>div {
        width: 1000px;
    }

    .main-work>div>div {
        height: 860px;
    }

    .main-alway-onEra>div>div:first-child,
    .main-alway-onEra>div>div:nth-child(2) {
        height: 158px;
    }

    .main-alway-onEra>div>div:nth-child(3),
    .main-alway-onEra>div>div:nth-child(4) {
        height: 158px;
    }

    .main-alway-onEra>div>div:nth-child(5),
    .main-alway-onEra>div>div:nth-child(6) {
        height: 132px;
    }

    .main-alway-onEra>div>div:nth-child(7),
    .main-alway-onEra>div>div:nth-child(8) {
        height: 158px;
    }

    .main-alway-onEra>div>div:nth-child(9),
    .main-alway-onEra>div>div:last-child {
        height: 208px;
    }

    .main-why>div {
        width: 1000px;
    }

    .main-why>div>div {
        padding: 2em 2em 3em 2em;
    }

    .main-why>div>div:first-child,
    .main-why>div>div:nth-child(2) {
        height: 269px;
    }

    .main-why>div>div:nth-child(3),
    .main-why>div>div:last-child {
        height: 269px;
    }

    .bank-vol {
        width: 80%;
    }

    .our-belief>div>div:first-child,
    .our-belief>div>div:nth-child(2) {
        height: 241px;
    }

    .our-belief>div>div:nth-child(3),
    .our-belief>div>div:last-child {
        height: 216px;
    }

    .home-contact {
        width: 1024px;
    }

    .home-contact>figure {
        width: 200px;
    }

    .home-contact>div:nth-child(3)>figure {
        width: 148px;
    }

    .ser-pain>div {
        padding-bottom: 2em;
    }

    .ser-pain>div>div {
        padding: 1.5em 2em;
        height: 232px;
    }

    .ser-PMS>div>figure {
        height: 260px;
    }

    .ser-PMS>div>figure>h2 {
        font-size: 24px;
        font-weight: 500;
        left: 1em;
        bottom: 0.5em;
    }

    .ser-PMS>div>div {
        width: 58%;
    }

    .ser-PMS>div>div>div:last-child {
        margin: 2em auto;
        justify-content: space-around;
    }

    .ser-PMS>div>div>div:last-child>div {
        width: 38%;
    }

    .ser-PMS>div:nth-child(2)>figure>figure {
        width: 120px;
    }

    .ser-PMS>div>div>div:last-child>div>figure {
        height: 80px;
    }

    .home-contact>div:first-child>div>h4 {
        font-size: 22px;
    }

    .home-contact>div:first-child>div>div h5 span {
        display: inline-block;
    }

    .home-contact>div:first-child>div>div h5 br {
        display: block;
    }

    .map {
        width: 70%;
        height: 440px;
    }

    .policy h1 {
        font-size: 22px;
    }

    .policy>div {
        margin: 1em auto;
    }

}


@media (min-width: 1280px) {
    /*HD */

    h1 {
        font-size: 44px;
    }

    p {
        font-size: 18px;
    }

    .info-wrap h4 {
        font-size: 28px;
    }

    .img-target figure {
        height: 280px;
    }

    .slide1 h1 {
        right: 10%;
    }

    .swiper-main>.swiper-wrapper div h1 {
        font-size: 40px;
    }

    .main-img-target>div:last-child>h4 {
        font-size: 22px;
    }

    .img-full h1 {
        font-size: 44px;
    }

    .main-work>div>div {
        height: 974px;
    }

    .main-alway-onEra>div>div>h5 {
        font-size: 20px;
    }

    .main-alway-onEra>div>div:first-child,
    .main-alway-onEra>div>div:nth-child(2) {
        height: 174px;
    }

    .main-alway-onEra>div>div:nth-child(3),
    .main-alway-onEra>div>div:nth-child(4) {
        height: 174px;
    }

    .main-alway-onEra>div>div:nth-child(5),
    .main-alway-onEra>div>div:nth-child(6) {
        height: 146px;
    }

    .main-alway-onEra>div>div:nth-child(7),
    .main-alway-onEra>div>div:nth-child(8) {
        height: 174px;
    }

    .main-alway-onEra>div>div:nth-child(9),
    .main-alway-onEra>div>div:last-child {
        height: 232px;
    }

    .main-why>div>div:first-child,
    .main-why>div>div:nth-child(2) {
        height: 280px;
    }

    .main-why>div>div:nth-child(3),
    .main-why>div>div:last-child {
        height: 310px;
    }

    .lagacy {
        width: 100%;
    }

    .lagacy>div {
        margin: 0 1em;
    }

    .lagacy>div h4,
    .lagacy>div>div>h4 {
        font-size: 20px;
    }

    .lagacy>div>div h1 {
        font-size: 52px;
    }

    .bank-vol {
        width: auto;
    }

    .bank-vol>div>figure {
        width: 100px;
        margin: 0 0.5em 0 0;
    }

    .bank-vol>div>div h1 {
        font-size: 52px;
    }

    .bank-vol>div>div p {
        font-size: 18px;
    }

    .client h3,
    .partner h3 {
        font-size: 32px;
        margin: 0 auto 1em;
    }
    .partner > div:last-child {
        margin-top: 2em;
    }
    .partner > div:last-child > div >h5 {
        font-size: 26px;
    }

    .client>div {
        width: 1000px;
    }

    .client>div>div>figure {
        width: 120px;
    }

    .client>div>div>h5 {
        font-size: 20px;
    }

    .our-belief>div {
        width: 1000px;
    }

    .our-belief>div>div:first-child,
    .our-belief>div>div:nth-child(2) {
        height: 264px
    }

    .our-belief>div>div:nth-child(3),
    .our-belief>div>div:last-child {
        height: 236pxt;
    }

    .our-belief>div>div>h4 {
        font-size: 22px;
    }

    .our-belief>div>div>p {
        font-size: 18px;
    }

    .ser-pain h1 {
        font-size: 26px;
    }

    .ser-pain>div>div {
        height: 248px;
    }

    .ser-PMS>div {
        margin: 0 auto;
    }

    .policy h1 {
        font-size: 24px;
        letter-spacing: 0px;
    }

    .policy>div>h3 {
        font-size: 20px;
    }

    .policy>div>p,
    .policy>div>ul li {
        font-size: 18px;
    }


}

@media (min-width: 1920px) {

    /* Full HD */
    p {
        font-size: 20px;
    }

    .info-wrap {
        width: 1100px;
    }

    .info-wrap h4 {
        font-size: 28px;
    }

    .swiper-main {
        height: 648px;
    }

    .swiper-main>.swiper-wrapper div h1 {
        font-size: 52px;
    }

    .swiper-target {
        width: 520px;
        margin: 0 2em 0 0;
    }

    .main-img-target>div:last-child>h4 {
        font-size: 24px;
    }

    .img-target figure {
        height: 348px;
    }

    .img-full {
        height: 640px;
    }

    .img-full-2 {
        background-position: 50% -190px;
    }

    .main-our-service>div {
        width: 1350px;
    }

    .main-our-service>div:last-child {
        justify-content: space-between;
    }

    .main-our-service>div:last-child>div {
        width: 19%;
        margin: 0;
    }

    .main-our-service>div:last-child>div>div>p {
        margin: 1em 36px;
    }

    .main-work>div {
        width: 90%;
    }

    .main-work>div>div {
        width: 31%;
        height: 860px;
        padding: 2em;
    }

    .main-alway-onEra>div {
        width: 1280px;
    }

    .main-alway-onEra>div>div:first-child,
    .main-alway-onEra>div>div:nth-child(2) {
        height: 184px;
    }

    .main-alway-onEra>div>div:nth-child(3),
    .main-alway-onEra>div>div:nth-child(4) {
        height: 184px;
    }

    .main-alway-onEra>div>div:nth-child(5),
    .main-alway-onEra>div>div:nth-child(6) {
        height: 152px;
    }

    .main-alway-onEra>div>div:nth-child(7),
    .main-alway-onEra>div>div:nth-child(8) {
        height: 216px;
    }

    .main-alway-onEra>div>div:nth-child(9),
    .main-alway-onEra>div>div:last-child {
        height: 248px;
    }


    .main-why>div {
        width: 1280px;
    }

    .main-why>div>div:first-child,
    .main-why>div>div:nth-child(2) {
        height: 300px;
    }

    .main-why>div>div:nth-child(3),
    .main-why>div>div:last-child {
        height: 332px;
    }

    .main-why>div>div>h4 {
        font-size: 22px;
    }

    .lagacy {
        width: 80%;
        justify-content: space-around;
    }

    .lagacy>div h4,
    .lagacy>div>div>h4 {
        font-size: 26px;
    }

    .lagacy>div>div h1 {
        font-size: 60px;
    }

    .bank-vol {
        width: 76%;
    }

    .bank-vol>div>figure {
        width: 120px;
        /* margin: 0 0.5em 0 0; */
    }

    .bank-vol>div>div h1 {
        font-size: 60px;
    }

    .bank-vol>div>div p {
        font-size: 20px;
    }

    .client h3,
    .partner>div> h3 {
        font-size: 40px;
        margin: 0 auto 1em;
    }

    .client>div {
        width: 76%;
    }

    .client>div>div>h5 {
        font-size: 22px;
    }

    .partner>div {
        width: 90%;
    }

    .partner>div>div>figure {
        padding: 0 32px;
    }

    .ser-pain>div {
        width: 84%;
    }

    .ser-pain>div>div {
        height: 240px;
    }

    .ser-pain h1 {
        font-size: 32px;
    }

    .ser-pain>div>div>h4 {
        font-size: 22px;
    }

    .ser-PMS {
        width: 80%;
    }

    .ser-PMS>div>div>div:first-child>h1 {
        font-size: 24px;
    }

    .ser-PMS>div>figure {
        width: 45%;
        height: 400px;
    }

    .ser-PMS>div>figure>h2 {
        font-size: 36px;
        letter-spacing: 2px;
    }

    .ser-PMS>div:nth-child(2)>figure>figure {
        width: 180px;
        top: 100px;
        left: 80px;
    }

    .ser-PMS>div:nth-child(3)>figure>figure {
        width: 120px;
        top: 64px;
        right: 64px;
    }

    .ser-PMS>div>div {
        width: 51%;
    }

    .our-belief>div>div:first-child,
    .our-belief>div>div:nth-child(2) {
        height: 264px;
    }

    .our-belief>div>div:nth-child(3),
    .our-belief>div>div:last-child {
        height: 236px;
    }

    .home-contact {
        width: 1200px;
    }

    .map {
        height: 480px;
    }

    .policy {
        width: 1320px;
    }

    .policy h1 {
        font-size: 28px;
    }

    .policy>div>h3 {
        font-size: 22px;
    }

    .policy>div>p,
    .policy>div>ul li {
        font-size: 20px;
    }
}

@media (min-width: 1921px) {
    /* 2K */
}