@media screen and (max-width: 650px) and (orientation:landscape) {
    body, html {
        width: 1100px;
    }
}

@media screen and (max-width: 650px) and (orientation:portrait) {

    body, html, input {
        width: 540px;
        font-size: 24px;
    }

    .header .bl {
        width: 500px;
    }

    .header .bl_l .name {
        font-size: 28px;
        font-weight: 300;
    }

    .header .bl_r .l {
        margin-left: 15px;
        font-size: 20px;
    }

    .header .mob_hide {
        display: none;
    }

    .content {
        width: 500px;
        margin: 30px auto;
    }

    .footer .bl {
        width: 500px;
    }

    .footer .col1 {
        width: 100%;
    }

    .footer .col1 .logo .name {
        font-size: 28px;
        font-weight: 300;
    }

    .footer .col1 .t {
        font-size: 18px;
    }

    .footer .col2 {
        display: none;
    }

    .footer .col3 {
        width: 50%;
        margin-top: 20px;
    }

    .footer .col3 .l {
        font-size: 20px;
    }

    .terms .btn {
        height: 80px;
        font-size: 32px;
    }

    .terms .h {
        font-size: 30px;
    }

    .terms .h2 {
        font-size: 24px;
    }

    .terms p {
        font-size: 18px;
    }

    .main .l1 .h2 {
        font-weight: 600;
    }

    .main .l1 .btn {
        height: 80px;
        font-size: 32px;
    }

    .main .l1 .col .ico {
        height: 18px;
    }

    .main .l1 .col .t2 {
        text-indent: -25px;
        margin-left: 25px;
    }

    .main .l2 .col {
        width: 100%;
    }

    .main .l2 .arr {
        width: 100%;
        justify-content: center;
        margin: 10px 0;
    }

    .main .l2 .arr img {
        transform: rotate(90deg);
    }

    .main .l4 .bl {
        width: 100%;
        margin-top: 20px;
    }

    .main .l4 .marr {
        margin-right: 0;
    }

    .main .l4 .marl {
        margin-left: 0;
    }

    .main .l4 .bl .t {
        font-size: 21px;
    }

    .main .lbtn .btn {
        height: 80px;
        font-size: 32px;
    }

    .test {
        height: 1000px;
    }

    .test .l2 {
        flex-wrap: wrap;
    }

    .test .l2 .bl1 {
        width: 100%;
    }

    .test .l2 .bl2 {
        width: 100%;
        margin-top: 20px;
    }

    .test .l2 .bl2 .q {
        height: unset;
    }

    .test .l2 .bl2 .a img {
        height: 96px;
    }

    .test .w1 .t1 {
        font-size: 21px;
    }

    .form_inp_text_label {
        font-size: 20px;
    }

    .form_inp_text {
        width: calc(100% - 24px);
        height: 50px;
        border: 2px solid #cccccc;
    }

    .form_inp_text:focus {
        border: 2px solid #cccccc;
    }

    .purchase .l1 .col1 {
        width: 100%;
    }

    .purchase .l1 .col1 .h2 {
        font-weight: 600;
    }

    .purchase .l1 .col2 {
        width: 100%;
        height: 130px;
        margin-top: 10px;
    }

    .purchase .l1 .col2 .iq {
        width: 60px;
    }

    .purchase .l1 .col2 .iq .score {
        font-size: 18px;
    }

    .purchase .l1 .col2 .iq .score_y {
        font-size: 18px;
    }

    .purchase .l2 {
        margin-top: 20px;
    }

    .purchase .l2 .col2 {
        width: 100%;
        margin-top: 20px;
    }

    .stripe_base {
        border: 2px solid #cccccc;
        height: 38px;
    }

    .purchase .l2 .col1 .form .bl_t {
        font-size: 12px;
    }

    .purchase .l2 .col2 .h {
        font-size: 24px;
    }

    .purchase .l2 .col2 .bl {
        font-size: 20px;
    }

}