/* 自动布局 */


/* public */

@media only screen and (min-width: 300px) and (max-width: 1120px) {
    /* content start */
    .content_width {
        width: 96%;
        margin: 0 auto;
    }
    /* content end */
    .mainList_cover {
        min-height: 5vh;
    }
    /* sort start */
    .mainMenu_left_box,
    .mainMenu_right_box {
        margin-top: 1.5rem;
    }
    .mainMenu_right_box {
        margin-left: 1.5rem;
    }
    /* sort end */
    .details_leftMenu {
        width: 100%;
        margin-right: 0;
    }
    .registerBox_mail {
        width: 100%;
    }
}


/* pad */

@media only screen and (min-width: 768px) and (max-width: 1120px) {
    .loginBox_wrap {
        width: 70%;
    }
    .mainMenu_right_box>.loginBox_wrap {
        width: 85%;
    }
}


/* phone */

@media only screen and (min-width: 300px) and (max-width: 760px) {
    .header {
        min-height: 10vh;
    }
    .header .left-menu .logo {
        width: 85px;
    }
    .header .left-menu .nav-title {
        margin-left: 0px;
    }
    .header-menu,
    .header-menu .item {
        margin: 0px 5px;
    }
    .header-menu .item>a {
        font-size: 12px;
    }
    .header .right-menu .item:first-child {
        margin-right: 5px;
    }
    button.login,
    button.register {
        width: 50px;
        height: 30px;
    }
    .mainMenu_left {
        width: 22%;
        display: none;
    }
    .mainMenu_right {
        width: 100%;
    }
    .mainMenu_left_box,
    .mainMenu_right_box {
        margin-top: 20px;
    }
    .mainMenu_right_box {
        margin-left: 0rem;
    }
    .mainList {
        margin-top: .5rem;
    }
    .mainUpdate {
        margin-bottom: .5rem;
    }
    .mainList_ul>.item,
    .other_ul>.item,
    .shopList>.item {
        width: 49%;
        margin-right: 2%;
    }
    .sortList>.item:nth-child(5n),
    .other_ul>.item:nth-child(5n),
    .homeList>.item:nth-child(5n),
    .shopList>.item:nth-child(5n) {
        margin-right: 2%;
    }
    .homeList>.item:nth-child(2n),
    .sortList>.item:nth-child(2n),
    .other_ul>.item:nth-child(2n),
    .shopList>.item:nth-child(2n) {
        margin-right: 0;
    }
    .tags_ul .item {
        width: 32%;
    }
    .tags_ul .item:nth-child(3n) {
        margin-right: 0;
    }
    .tags_ul .item a {
        font-size: 12px;
    }
    .other_ul {
        margin-top: 20px;
    }
    .menu-item,
    .submenu-item {
        font-size: 12px;
        margin-right: 2%;
    }
    .submenu-item {
        padding: 2px 0px;
    }
    .video-wrap {
        align-items: baseline;
    }
    .videoBox {
        margin-top: 4vh;
    }
    .dynamicList>.item {
        width: 32%;
        margin-right: 2%;
        margin-bottom: 2%;
    }
    .dynamicList>.item:nth-child(3n) {
        margin-right: 0px;
    }
    .videoDown {
        bottom: 21%;
    }
    .videoDown .downBox {
        margin-right: 10px;
    }
    .details_cover {
        flex-wrap: wrap;
    }
    .details_cover>.item {
        width: 49%;
        margin-right: 2%;
        margin-bottom: 2%;
    }
    .details_cover>.item:nth-child(2n) {
        margin-right: 0%;
    }
    .details_cover>.item img {
        max-width: 100%;
    }
    .shopList>.item .info p {
        font-size: 12px;
    }
    .shop_details_lf {
        width: 100%;
        margin-bottom: 20px;
    }
    .shop_details_rh {
        width: 100%;
        margin-left: 0;
    }
    .shop_recordList>.section h2 {
        /* font-size: ; */
        width: 21.6%;
        font-size: 13px;
    }
    .shop_recordList_lf>.info {
        margin-left: 2%;
    }
    .shop_recordList_lf>.info p {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .shop_recordList_lf>.coverBox {
        width: 27%;
    }
    .phone_none {
        display: none;
    }
    .shop_recordList_rh>.time {
        font-size: 10px;
    }
    .addressLabel {
        width: 100%;
        margin-bottom: 10px;
    }
    .addressLabel>span {
        flex: 1;
    }
    .loginBox {
        min-height: 0;
    }
    .loginBox_wrap {
        width: 100%;
    }
    .registerBox_code {
        width: 50%;
    }
    .registerBox_code,
    .registerBox_getCode {
        margin-top: 20PX;
    }
    .recordList_section_log {
        width: 55%;
    }
    .recordList_section_amount {
        width: 25%;
    }
    .recordList_section_detail {
        width: 20%;
    }
    .recordList_section_log_title h3 {
        font-size: 15px;
        margin-bottom: 3px;
    }
    .recordList_section_amount_add,
    .recordList_section_amount_reduce {
        font-size: 15px;
    }
    .recordList_section_log_date,
    .recordList_section_detail_title {
        font-size: 12px;
    }
    .registerBox_getCode {
        width: 25%;
    }
    .recharge_title {
        font-size: 13px;
    }
    .serviceList_serviceFace {
        width: 13%;
    }
    .mebmer_phoneMenu {
        display: block;
    }
    .mebmerMenu_ul {
        flex-wrap: nowrap;
        background-color: rgb(243, 243, 243);
        padding: 0% 2%;
        margin-bottom: 0;
    }
    .mebmerMenu_ul .item {
        margin-bottom: 0;
        margin-left: 5px;
        text-align: center;
    }
    .mebmerMenu_ul .item:first-child {
        margin-left: 0;
    }
    .mebmerMenu_ul .item.icon {
        text-align: left;
    }
    .mebmerMenu_ul .item a {
        color: #000000;
        font-size: 13px;
        display: block;
        height: 40px;
        line-height: 40px;
    }
    .mebmerMenu_ul .item.tag a {
        color: rgb(189, 189, 189);
    }
    .mebmerMenu_ul .item.title a {
        font-size: 16px;
        font-weight: 600;
    }
    .mebmerMenu_ul .item .iconfont {
        font-size: 25px;
    }
    .mebmerMenu_ul .item.title a .icon-zuanshi {
        font-size: 16px;
    }
    .member_infoList .item .title,
    .member_infoList .item .text,
    .mebmer_info_tag .item {
        font-size: 12px;
    }
    .member_infoList .item .text {
        width: 80%;
    }
    .information>.addressBox {
        width: 100%;
    }
    .information {
        flex: 2;
    }
    .information>.d-flex>.text {
        width: 100%;
        margin-bottom: 5px;
    }
    .information>.d-flex>.copyBtn {
        margin-left: 0;
    }
}


/* phone header */

@media only screen and (min-width: 300px) and (max-width: 760px) {
    .web_header {
        display: none;
    }
    .phone_header {
        display: flex;
    }
    .headerMenuBtn>.iconfont {
        font-size: 22px;
        color: black;
    }
    .headerMenuBtn>.button {
        background-color: rgba(0, 0, 0, 0);
    }
    .headerMenuBtn>.icon-menu-s {
        text-align: left;
    }
    .headerMenuBtn>.icon-a-120_wode {
        text-align: right;
    }
    .nav-sidebar {
        height: 100vh;
        width: 100vw;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        overflow-x: hidden;
        background-color: rgba(0, 0, 0, 0.438);
        transition: opacity 0.2s ease-in-out;
    }
    .header-sidebar-box {
        --sidebar-width: 65vw;
        position: relative;
        top: 0;
        left: calc(-1 * var(--sidebar-width));
        width: var(--sidebar-width);
        height: 100%;
        box-sizing: border-box;
        padding: 0rem 1rem 10vh 0rem;
        background-color: white;
        overflow-x: hidden;
        transition: transform 0.3s ease-in-out;
    }
    .header-sidebar-title {
        min-height: 10vh;
        margin-left: 1rem;
        align-items: center;
        justify-content: space-between;
    }
    .header-sidebar-logo {
        width: 50%;
    }
    .header-sidebar-menu .nav-item {
        position: relative;
        margin-bottom: 10px;
    }
    .header-sidebar-menu .nav-item a {
        display: block;
        --radius: 100px;
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }
    .header-sidebar-menu .nav-item.active>a,
    .header-sidebar-menu .nav-item.nav-show>a {
        background-color: rgb(243, 243, 243);
    }
    .header-sidebar-menu .nav-item .menu-icon {
        align-items: center;
        color: black;
        font-size: 15px;
        font-weight: bold;
        transition: 0.3s;
        padding-left: 1.5rem;
    }
    .header-sidebar-menu .nav-item .menu-icon .iconfont {
        margin-right: 15px;
        font-size: 22px;
    }
    .nav-item-meun {
        display: none;
    }
    .nav-more {
        font-family: "fontello";
        font-style: normal;
        font-weight: normal;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        font-size: 20px;
    }
    .my-icon-right:after {
        content: '\e75e';
    }
    .my-icon-up:after {
        content: '\25b4';
    }
    .nav-show .nav-more {
        transform: rotate(90deg);
    }
    .nav-item-meun>li>a {
        color: black;
        font-size: 15px;
    }
    /* 显示时的样式 */
    .nav-sidebar.show,
    .header-searchBox.show {
        opacity: 1;
        visibility: visible;
    }
    .nav-item.nav-show .nav-item-meun {
        display: block;
        padding: 0;
        margin: 15px 0rem 15px 4.5rem;
        transition: 0.3s;
    }
    .nav-sidebar.show .header-sidebar-box {
        transform: translateX(65vw);
    }
    .header-sidebar-menu .nav-item li.active>a {
        border-radius: 10px 0 0 10px;
    }
    .header-sidebar-menu .nav-item.current,
    .header-sidebar-menu .nav-item li.active>a,
    .header-sidebar-menu .nav-item li>a:active {
        background-color: #212121;
    }
}