/*------------------------------------------------------------------*/


/*	2) Note: Design for a width of 480 px
/*------------------------------------------------------------------*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /*------------------------------------------------------------------*/
    /*	1) Header
/*------------------------------------------------------------------*/
    .device-menu {
        display: block;
        margin-top: 10px;
    }

    .sf-menu>li {
        margin-right: 15px;
        margin-bottom: 15px;
    }

    .sf-menu li a {
        font-size: 12px;
    }

    .search .ft {
        width: 130px;
    }

    .searchBox .search .ft {
        width: 76%;
        margin: 0 2%;
    }
    .searchBox .search .searchBtn {
        padding: 0;
        width: 20%;
        height: 35px;
        line-height: 35px;
    }
    .header-web {
        display: none;
    }

    .header-phone {
        display: block;
        width: 100%;
        height: 8vh;
        background-color: black;
        box-sizing: border-box;
    }

    .logo {
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 98%;
        padding: 0 1%;
        height: 8vh;
        background-color: black;
    }

    .logo-menu {
        width: 25%;
    }

    .logo-img {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logoImage,
    .yearImage {
        width: auto;
        height: 30px;
        display: block;
    }

    .logo-search {
        width: 25%;
        display: flex;
        justify-content: end;
    }

    .logo-menu .icon-menu {
        text-align: left;
    }

    .logo-img img {
        display: block;
    }

    .header-search {
        box-sizing: border-box;
        width: 100%;
        padding: 5vh 5% 3vh;
        background: #111;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-search .search .ft {
        width: 56vw;
    }

    .header-search-cancelText {
        font-size: 15px;
        color: white;
    }

    .header-sidebar-title {
        height: 10vh;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .header-sidebar-logo img {
        display: block;
        width: 5vh;
        height: 5vh;
    }
    .header-sidebar-close a,
    .header-sidebar-close .icon-cancel {
        text-align: right;
    }

    .logo-menu .icon-menu,
    .header-sidebar-close .icon-cancel {
        color: rgb(251, 0, 54);
        font-size: 30px;
        display: block;
    }
    .header-sidebar-close .icon-cancel {
        color: white;
    }
    .logo-menu .icon-menu:before,
    .header-sidebar-close .icon-cancel:before {
        margin: 0;
        padding: 0;
    }

    .header-sidebar-menu {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 80vh;
        padding-left: 0;
        padding-right: .5rem;
    }

    .nav-showBar {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    /* 定义整个滚动条的宽度 */
    ::-webkit-scrollbar {
        width: 3px; 
        height: 3px; 
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        background: black;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        background:rgb(251, 0, 54);
    }

    /* 鼠标悬停时的滑块颜色 */
    ::-webkit-scrollbar-thumb:hover {
        background: rgb(251, 0, 54);
    }
    .footer-down-qrcode {
        width: 35%;
    }
    /*------------------------------------------------------------------*/
    /*	2) Slider
/*------------------------------------------------------------------*/
    .main-slider {
        width: 400px;
    }
    .slider2,
    .slider3 {
        display: none;
    }
    ul.social img {
        width: 100%;
        height: auto;
    }
    
    ul.social li span {
        padding: 8px 0px 10px;
    }
    /*------------------------------------------------------------------*/
    /*	3) Content
/*------------------------------------------------------------------*/
    .main-content {
        width: 100%;
    }
    .outertight {
        width: 100%;
        margin-right: 0;
    }
    .outertight img {
        max-width: 100%;
    }
    .outerwide {
        width: 100%;
    }
    .wnews li {
        width: 400px;
    }
    .wnews li img {
        max-width: 200px;
    }
    .block2 li {
        width: 100%;
        margin-right: 0;
    }
    .block2 li img {
        width: 100%;
        margin: 0 0 10px 0;
    }
    .outerwide .block2 li img {
        width: 100%;
        margin: 0 15px 10px 0;
    }
    .d-list li {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .recommend_ul li {
        width: 49%;
    }
    .shop_list_ul {
        justify-content: space-between;
    }
    .shop_list_ul li {
        width: 49%;
    }
    .shop_list_ul .sc_box {
        height: 117px;
    }
    .login_img_box {
        margin: 0;
    }
    .login_input {
        width: 94%;
        padding: 0 3%;
    }
    .submit-login {
        width: 100% !important;
    }
    .buy-btn {
        width: 100% !important;
    }
    .user-box {
        margin: 15px 0%;
    }
    .user_name {
        margin-bottom: 0;
    }
    .user-right .login-form {
        margin: 10px auto;
    }
    .pricing {
        width: 100%;
    }
    .order-lg-2 {
        order: 2;
        width: 100%;
    }
    .order-lg-1 {
        order: 1;
        width: 100%;
    }
    /* recharge */
    .rex_box {
        margin: 20px 2% 30px;
    }
    .rex_block_a {
        padding: 20px 10px;
    }
    .rex_box_ul_year {
        flex-wrap: wrap;
        padding: 0;
    }
    .rex_box_ul_year>li {
        width: 25%;
    }
    .rex_box_title span {
        font-size: 20px;
        width: 100px;
    }
    .rex_box_title font {
        font-size: 11px;
    }
    .downBtn {
        width: 100%;
    }
    
    .downLink {
        width: 100%;
        margin-top: 20px;
        text-align: center;
    }
    /*------------------------------------------------------------------*/
    /*	3) Comments
/*------------------------------------------------------------------*/
    .commment-text-wrap {
        width: 280px;
    }
    ul.children li div.commment-text-wrap {
        width: 250px;
    }
    ul.children li li div.commment-text-wrap {
        width: 220px;
    }
    ul.children li li li div.commment-text-wrap {
        width: 190px;
    }
    .form textarea {
        width: 380px;
    }
    .meal-form-control {
        width: 180px;
    }
    .meb_year_ul span {
        padding: 10px;
    }
    .edit_pw_box>div {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 10px;
    }
    .edit_pw_box input {
        width: 94%;
        padding: 5px 3%;
    }
    .edit_pw_box button {
        width: 100%;
    }

    .pager ul li a {
        padding: 3px 6px;
    }

    .pre-page {
        display: none;
    }

    .left-sidebar,
    .left-sidebar-equity {
        width: 49%;
    }
    
    .left-sidebar-equity ul.social li,
    .left-sidebar ul.social li {
        width: 32%;
    }
    
    .left-sidebar-equity ul.social li span b {
        font-size: 10px;
    }
    /*------------------------------------------------------------------*/
    /*	4) user
/*------------------------------------------------------------------*/
    .user_profile .row {
        margin-bottom: 10px;
    }
    .serviceBox {
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
    }
    .hw-layer-wrap {
        width: 94%;
        left: 3%;
        margin-left: 0px;
    }
    .level_info .item .left .name {
        font-size: 18px;
    }
    .buy_box .item {
        width: 100%;
    }
    .buy_btn_phone_mask {
        display: block;
    }
}