/*@media only screen and (min-width: 1367px) {
	.content .wrapper {
		min-height: 710px;
	}
}*/
/* ipad 6 ----------- */
@media only screen and (max-width: 1024px) {
    .confirmation .convension {
        width: 80%;
    }

    .bg-index {
        background: url(../images/banner.png) no-repeat bottom center;
        background-size: 120% auto;
    }
}
/* iPhone 6 and (orientation : landscape) ----------- */
@media only screen and (max-width: 768px) {
    .div_title {
        text-align: left !important;
    }
    .header .wrapper {
        padding: 15px;
        max-height: 100px;
    }

    .head-right .signout {
    }

    .switch-language .switch-lang {
        padding: 0;
    }

    .switch-language {
        width: 80px;
    }

    .logo-card-scheme {
        margin: 5px 0;
    }

    .footer-left {
        display: none;
    }

    .footer-right {
        width: 285px;
        float: right;
        padding-left: 30px;
    }

    .input-half {
        width: 47%;
    }

    .merchant {
        margin: 0;
        padding: 0 0 20px 0;
    }

        .merchant .description {
            width: 100%;
            margin: 0;
        }

    .card {
        padding: 0;
    }

        .card span.title {
            text-align: left;
        }

        .card .remark {
            width: 100%;
            margin: 15px auto;
        }

    .ipp {
        padding: 0 0 10px 0;
    }

        .ipp span.title {
            text-align: left;
        }

    .main-btn {
        margin: 30px auto;
        width: auto;
        text-align: center;
    }

        .main-btn .btn {
            margin: 0 auto;
        }

    .login-wrap {
        float: none;
        margin: 100px auto 0;
        width: 90%;
        min-height: unset;
    }

    .card {
        width: 80%;
        margin: 20px auto;
    }

    .main-btn .btn-back {
        margin-left: 15px !important;
    }

    .main-btn .btn-sent {
        margin-right: 15px !important;
    }
    .nav > li > a {
        line-height: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .div_title {
        text-align: left !important;
    }
    .confirmation .email-addr span.title {
        text-align: left;
    }

    .loading {
        padding: 0;
    }

        .loading .description {
            width: 100%;
        }
}
/* iPhone 6 ----------- */
@media only screen and (max-width: 414px) {
    .div_title {
        text-align: left !important;
    }
    body {
        background: #f5f5f5;
    }

    .flag {
        top: 90px;
        width: 75px;
        right: 15px
    }

    .no-nav {
        top: 51px;
    }

    .breadcrumb {
        padding: 25px 15px;
    }

    .header .wrapper {
        padding: 15px;
    }

    .head-logo {
        width: 100%;
        margin: 0 auto;
        background-position: center center;
        height: 90px;
        border-bottom: 1px solid #cccccc;
    }

    .head-page {
        margin: 0 auto;
        padding: 0 15px 7px 0;
    }

    .head-right {
        padding: 60px 0 0 0;
        height: 90px;
    }

        .head-right span {
        }

        .head-right .signout {
            font-size: 12px;
            padding: 0 5px;
            min-width: unset;
            margin-top: 4px;
            position: absolute;
            right: 15px;
            line-height: 20px;
            border: 1px solid #e87722;
        }

    .head-page h1 {
        font-size: 22px;
    }

    .footer-addr {
        text-align: center;
    }

    .card h2 {
        margin: 0;
        text-align: center;
        width: 100%;
    }

    .head-right {
        max-width: 100%;
        text-align: left;
    }

    .footer-left {
        display: none;
    }

    .footer-right {
        width: 285px;
        padding-left: 30px;
    }

    .card {
        width: 100%;
    }

    .confirmation {
        padding: 0;
    }

        .confirmation .convension {
            width: 100%;
        }

    .confirm-detail {
        width: 100%;
    }

    .merchant .h-result {
        font-family: 'notosansthai-semibold','FWDCircularTT-Medium';
        color: #ff0000;
        margin: 10px 0;
    }

    .loading-icon {
        margin: 20px 0;
    }

    .loading .description {
    }

    .loading-txt {
        margin: 15px auto;
    }

    .term-wrap .content {
        width: 100%;
    }

    .term-wrap .title {
        margin: 0;
    }

    .card .icon {
        display: inline-block;
        width: 30%;
        float: left;
        margin: 0;
    }

    .card .description {
        display: inline-block;
        width: 100%;
        float: left;
        text-align: center;
    }

    .card .icon img {
        margin: 0 auto;
        width: 60%;
    }

    .main-btn .btn {
        display: inline-block;
        text-transform: uppercase;
    }

    .form {
        margin: 0;
        padding: 0 15px;
    }

    .input-l {
        width: 100%;
    }

    .card span.h120 {
        height: auto;
        line-height: 40px;
    }

    input[type="radio"].male + label {
        background-size: 100% auto;
        width: 80px;
        height: 100px;
        padding: 80px 0 0 0;
    }

    input[type="radio"].male:checked + label {
        background-size: 100% auto;
        width: 80px;
        height: 100px;
        padding: 80px 0 0 0;
    }

    input[type="radio"].female + label {
        background-size: 100% auto;
        width: 80px;
        height: 100px;
        padding: 80px 0 0 0;
    }

    input[type="radio"].female:checked + label {
        background-size: 100% auto;
        width: 80px;
        height: 100px;
        padding: 80px 0 0 0;
    }

    .input,
    .input-half {
        width: 100%;
        margin: 10px 0 0 0;
    }

    .input-rdo {
        width: auto;
        margin: 0 15px 0 0;
    }

    .scanqr {
        width: 100%;
    }

        .scanqr img {
            width: 50%;
            height: auto;
            margin: 0 auto;
            padding: 60px 0 0 0;
        }

    .lang-wrap {
        text-align: center;
        width: 100%;
        padding: 0 0 20px 0;
    }

        .lang-wrap .input,
        .lang-wrap .input-half {
            float: none;
            display: inline-block;
        }

    input[type="radio"].rate1 + label {
        background-size: 100% auto;
        width: 80px;
        height: 80px;
        margin: 0;
    }

    input[type="radio"].rate1:checked + label {
        background-size: 100% auto;
        width: 80px;
        height: 80px;
        margin: 0;
    }

    input[type="radio"].rate2 + label {
        background-size: 100% auto;
        width: 80px;
        height: 80px;
        margin: 0;
    }

    input[type="radio"].rate2:checked + label {
        background-size: 100% auto;
        width: 80px;
        height: 80px;
        margin: 0;
    }

    input[type="radio"].rate3 + label {
        background-size: 100% auto;
        width: 80px;
        height: 80px;
        margin: 0;
    }

    input[type="radio"].rate3:checked + label {
        background-size: 100% auto;
        width: 80px;
        height: 80px;
        margin: 0;
    }

    input[type="radio"].rate4 + label {
        background-size: 100% auto;
        width: 80px;
        height: 80px;
        margin: 0;
    }

    input[type="radio"].rate4:checked + label {
        background-size: 100% auto;
        width: 80px;
        height: 80px;
        margin: 0;
    }

    .consent-wrap {
        width: 100%;
    }

    .consent-agree {
        margin: 20px 0 20px 0;
    }

    .result {
        width: 100%;
    }

        .result h3 {
            margin-bottom: 40px;
        }

    .sendemail-btn {
        position: relative;
        margin: 15px 15px;
    }

        .sendemail-btn .btn {
            width: auto;
            height: auto;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            border: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

    .modal-body .title {
        text-align: left;
    }

    .bg-index {
        /*background:url(../images/banner-mobile.png) no-repeat top center;
		background-size: 100% auto;*/
        background: #f5f5f5;
    }

    .content .wrapper {
        min-height: 90vh;
    }

    .result p {
    }

    .dashboard-menu {
        width: 90%;
        margin: 75px auto 0;
    }

    .nav > li > a {
        line-height: 35px;
    }

    .navbar-nav .open .dropdown-menu {
        /*background: #FCEBDE;*/
    }

        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 30px;
        }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #0A3B32;
    }
    .navbar-default {
        margin-top: 10px;
    }
}

@media only screen and (max-width: 375px) {
    .div_title {
        text-align: left !important;
    }
    .merchant {
    }

    .card {
    }

    .detail {
    }

    .card-detail {
    }

    .confirmation .convension {
    }

    .confirm-detail {
    }

    .merchant .h-result {
    }

    .term-wrap {
        margin: 0;
    }

        .term-wrap .title {
            margin: 0;
        }

        .term-wrap .content {
            height: 210px;
            margin: 0 auto;
        }

    input[type="radio"].rate1 + label {
        background-size: 100% auto;
        width: 70px;
        height: 70px;
        margin: 0;
    }

    input[type="radio"].rate1:checked + label {
        background-size: 100% auto;
        width: 70px;
        height: 70px;
        margin: 0;
    }

    input[type="radio"].rate2 + label {
        background-size: 100% auto;
        width: 70px;
        height: 70px;
        margin: 0;
    }

    input[type="radio"].rate2:checked + label {
        background-size: 100% auto;
        width: 70px;
        height: 70px;
        margin: 0;
    }

    input[type="radio"].rate3 + label {
        background-size: 100% auto;
        width: 70px;
        height: 70px;
        margin: 0;
    }

    input[type="radio"].rate3:checked + label {
        background-size: 100% auto;
        width: 70px;
        height: 70px;
        margin: 0;
    }

    input[type="radio"].rate4 + label {
        background-size: 100% auto;
        width: 70px;
        height: 70px;
        margin: 0;
    }

    input[type="radio"].rate4:checked + label {
        background-size: 100% auto;
        width: 70px;
        height: 70px;
        margin: 0;
    }
}

@media only screen and (max-width: 360px) {
    .div_title {
        text-align: left !important;
    }
    .merchant {
    }

    .card-detail {
    }

    .card,
    .card .remark {
    }

    .confirmation {
    }

    .detail {
    }

    .card-detail {
        padding-bottom: 20px;
    }

    .confirmation .convension {
    }

    .confirm-detail {
    }

    input[type="radio"].rate1 + label {
        background-size: 100% auto;
        width: 60px;
        height: 60px;
        margin: 0;
    }

    input[type="radio"].rate1:checked + label {
        background-size: 100% auto;
        width: 60px;
        height: 60px;
        margin: 0;
    }

    input[type="radio"].rate2 + label {
        background-size: 100% auto;
        width: 60px;
        height: 60px;
        margin: 0;
    }

    input[type="radio"].rate2:checked + label {
        background-size: 100% auto;
        width: 60px;
        height: 60px;
        margin: 0;
    }

    input[type="radio"].rate3 + label {
        background-size: 100% auto;
        width: 60px;
        height: 60px;
        margin: 0;
    }

    input[type="radio"].rate3:checked + label {
        background-size: 100% auto;
        width: 60px;
        height: 60px;
        margin: 0;
    }

    input[type="radio"].rate4 + label {
        background-size: 100% auto;
        width: 60px;
        height: 60px;
        margin: 0;
    }

    input[type="radio"].rate4:checked + label {
        background-size: 100% auto;
        width: 60px;
        height: 60px;
        margin: 0;
    }
}

@media only screen and (max-width: 320px) {
    .div_title {
        text-align: left !important;
    }
    .merchant {
    }

    .loading .description .logo {
        display: none;
    }

    .login-wrap {
        margin: 110px auto 0;
    }
}