@media (max-width: 1023px) {
    /************************************************************************
    home
    ************************************************************************/
    .home {
        max-width: 740px;
    }
    .home .banner .img {
        max-width: 100%;
    }
    .home .content img {
        max-width: 100%;
    }
    .home .content .services .each .frame .each_title {
        font-size: 20px;
    }
    .home .content .services .each .frame .each_content {
        margin-right: 10px;
        margin-left: 10px;
        font-size: 13px;
        overflow: hidden;
    }

    /************************************************************************
    about
    ************************************************************************/
    .about {
        max-width: 740px;
    }
    .about .content .logo {
        width: 244px;
    }
    .about .content .inf {
        float: right;
        width: 486px;
        line-height: 30px;
    }
    .about .content .inf .each .left {
        float: left;
        width: 90px;
    }
    .about .content .inf .each .right {
        float: right;
        width: 366px;
    }
    .about .content .team .each {
        width: 238px;
        height: 238px;
        margin-right: 10px;
    }
    .about .content .team .each_last {
        margin-right: 0;
    }
    .about .content .team .each .image {
        margin-top: 10px;
    }
    .about .content .team .each .image img {
        width: 160px;
    }
    .about .content .team .each .name {
        font-size: 18px;
        margin-top: 10px;
    }
    .about .content .team .each .pos {
        font-size: 14px;
    }

    /************************************************************************
    website
    ************************************************************************/
    .website {
        max-width: 740px;
    }
    .website .content .customer .each {
        width: 120px;
        height: 120px;
    }
    .website .content .customer .each .img {
        max-width: 90px;
        max-height: 90px;
    }
    .website .content .template .col-sm-4 {
        width: 50%;
    }

    /************************************************************************
    hosting
    ************************************************************************/
    .hosting {
        max-width: 740px;
    }
    .hosting .slides .img {
        max-width: 100%;
    }
    .hosting .content .price .each .col {
        width: 122px;
    }
    .hosting .content .price .each .col_first {
        width: 125px;
    }
    .hosting .content .price .each .col .number {
        font-size: 28px;
    }

    /************************************************************************
    contact
    ************************************************************************/
    .contact {
        max-width: 740px;
    }
    .contact .content .map {
        height: 306px;
    }
    .contact .content .inf_form {
        float: none;
        margin: 20px auto 0;
    }
    .contact .content .form .button {
        text-align: center;
    }
    .contact .content .social_facebook {
        float: none;
        text-align: center;
        margin: 0 auto;
    }
    .contact .content .social {
        display: inline-block;
        margin-top: 20px;
        float: none;
    }
}

@media (max-width: 799px) {
    /************************************************************************
    home
    ************************************************************************/
    .home {
        max-width: 580px;
    }

    /************************************************************************
    about
    ************************************************************************/
    .about {
        max-width: 580px;
    }
    .about .content .logo {
        width: 150px;
    }
    .about .content .logo .img {
        max-width: 150px;
        height: 150px;
    }
    .about .content .inf {
        width: 420px;
    }
    .about .content .inf .each .right {
        width: 290px;
    }
    .about .content .team {
        display: none;
    }
    .about .content .team_2 {
        display: block;
    }
    .about .content .team .each {
        width: 278px;
        height: 258px;
    }
    .about .content .team .each .image img {
        width: 180px;
    }

    /************************************************************************
    website
    ************************************************************************/
    .website {
        max-width: 580px;
    }

    .website .content .template .each .button .demo,
    .website .content .template .each .button .more {
        width: 110px;
        font-size: 12px;
    }

    .website .content .customer {
        margin-left: -16px;
        margin-right: -16px;
    }
    .website .content .customer .each_wrap {
        padding: 0px 17px 17px;
        float: left;
    }
    .website .content .customer .each {
        width: 164px;
        height: 164px;
        margin: 0;
    }

    /************************************************************************
    hosting
    ************************************************************************/
    .hosting {
        max-width: 580px;
    }
    .hosting .content .price .each .col {
        width: 95px;
        padding: 12px 0;
        height: 66px;
    }
    .hosting .content .price .each .col_first {
        width: 100px;
    }
    .hosting .content .price .each_price .col_first {
        line-height: normal;
    }
    .hosting .content .price .each .col .number {
        font-size: 23px;
    }

    /************************************************************************
    contact
    ************************************************************************/
    .contact {
        max-width: 580px;
    }
    .contact .content .map {
        height: 204px;
    }

    /************************************************************************
    menu
    ************************************************************************/
    .menu_content {
        width: 560px;
    }
    .menu .each {
        margin-right: 40px;
    }
    .menu h2.each {
        margin-right: 40px;
    }
    .menu .each_last {
        margin-right: 0;
    }
    .menu h2.each_last {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .home .content .services .each {
        margin-top: 44px;
    }
    .website .content .template {
        max-width: 400px;
        margin: 0 auto;
    }
    .website .content .template .col-sm-4 {
        width: 100%;
    }
    .website .content .template .each .button .demo,
    .website .content .template .each .button .more {
        width: 120px;
        font-size: 14px;
    }
}

@media (max-width: 639px) {
    /************************************************************************
    go-to-top
    ************************************************************************/
    #go-to-top {
        bottom: 51px;
        right: 10px;
    }

    /************************************************************************
    mobile_menu
    ************************************************************************/
    .mobile_menu {
        display: block;
    }

    /************************************************************************
    main
    ************************************************************************/
    .main {
        padding-bottom: 51px;
    }
    .main_nav {
        padding: 0;
        padding-bottom: 51px;
    }
    .main_member {
        padding-left: 10px;
    }

    /************************************************************************
    home
    ************************************************************************/
    .home {
        max-width: 100%;
    }

    /************************************************************************
    about
    ************************************************************************/
    .about {
        max-width: 100%;
    }
    .about .content .logo {
        width: 100%;
    }
    .about .content .logo .img {
        max-width: none;
        height: 244px;
    }
    .about .content .inf {
        width: 100%;
        margin-top: 10px;
    }
    .about .content .inf .each {
        padding: 0 2%;
    }
    .about .content .inf .each .left {
        width: 30%;
    }
    .about .content .inf .each .right {
        width: 70%;
    }
    .about .content .team_2 {
        display: none;
    }
    .about .content .team_1 {
        display: block;
    }
    .about .content .team .each {
        height: 278px;
    }
    .about .content .team .each .image {
        margin-top: 24px;
    }

    /************************************************************************
    website
    ************************************************************************/
    .website {
        max-width: 100%;
    }
    .website .content .customer {
        margin: 0;
    }
    .website .content .customer .each_wrap {
        padding: 0px 3vw 3vw;
    }
    .website .content .customer .each {
        width: 35vw;
        height: 35vw;
    }
    .website .content .customer .each .img {
        max-width: 75%;
        max-height: 75%;
    }

    /************************************************************************
    hosting
    ************************************************************************/
    .hosting {
        max-width: 100%;
    }
    .hosting .content .price .each .col {
        width: 16.5%;
        margin-right: 0.2%;
    }
    .hosting .content .price .each .col_last {
        margin-right: 0;
    }
    .hosting .content .price .each .col .number {
        font-size: 20px;
    }

    /************************************************************************
    contact
    ************************************************************************/
    .contact {
        max-width: 100%;
    }
    .contact .content .map {
        height: 180px;
    }
    .contact .content .inf_form {
        width: 100%;
    }
    .contact .content .form .each {
        margin-bottom: 0;
    }
    .contact .content .form .each .input_text {
        float: none;
        margin-bottom: 10px;
        width: 100%;
    }
    .contact .content .form .each .textarea {
        width: 100%;
    }
    .contact .content .form .button {
        margin-top: 10px;
    }
    .contact .content .social_facebook {
        width: 100%;
    }
    .contact .content .facebook {
        overflow: hidden;
    }

    /************************************************************************
    login
    ************************************************************************/
    .login .content {
        margin-top: 20px;
        margin-bottom: 0;
    }

    /************************************************************************
    mobile_footer
    ************************************************************************/
    .mobile_footer {
        display: block;
    }

    /************************************************************************
    Basic
    ************************************************************************/
    .mt-60 { margin-top: 20px; }

    /************************************************************************
    main_bar
    ************************************************************************/
    .main_bar {
        display: none;
    }

    /************************************************************************
    main_bar
    ************************************************************************/
    .main_bar {
        display: none;
    }

    /************************************************************************
    mask
    ************************************************************************/
    .mask {
        display: none;
    }

    /************************************************************************
    menu
    ************************************************************************/
    .menu {
        display: none;
    }

    /************************************************************************
    left_menu
    ************************************************************************/
    .left_menu {
        display: none;
    }
}

@media (max-width: 401px) {
    /************************************************************************
    hosting
    ************************************************************************/
    .hosting .content .price {
        font-size: 10px;
    }
    .hosting .content .price .each .col_name {
        font-size: 14px;
    }
    .hosting .content .price .each .col .number {
        font-size: 12px;
    }
    .hosting .content .price .each .col .unit {
        font-size: 9px;
    }

    .sbzon, .sbzoff {
        left: 0;
        right: 0 !important;
        margin: auto !important;
    }
}