@media screen and (min-width: 768px){
    .hide-xs{
        display: block;
    }
    .visible-xs{
        display: none;
    }
}

@media screen and (max-width: 1180px){
    .inner{
        width: 980px;
    }
    .index .series ul{
        width:83.333333333%;
        justify-content: space-between;
    }

    .record .wrapper,
    .discount .wrapper,
    .stockout .wrapper{
       max-width: 980px;
    }
}

@media screen and (max-width: 1400px){

    .record .wrapper,
    .discount .wrapper,
    .stockout .wrapper{
        max-width: 1100px;
    }

    .discount .wrapper .swiper-button-next,
    .stockout .swiper .swiper-button-next{
        right: 0;
    }

    .discount .swiper .swiper-button-prev,
    .stockout .swiper .swiper-button-prev{
        left: 0;
    }
}


@media screen and (max-width: 1024px){
    .inner{
        width: 768px;
    }
    .container{
        width:100%;
    }
    footer .inner{
        flex-wrap: wrap;
    }
    footer .links{
        margin-bottom: 20px;
    }
    /* 首页 */
    .index .goods .container{
        width:100%;
    }
    .about .introduction .content .wrapper{
        flex-direction: column;
        align-items: center;
    }
    .about .introduction .content .wrapper p{
        margin-top: 20px;
    }
    .product .series .item .link{
        position: static;
        display: block;
        margin-top: 30px;
    }
    .trip .promote ul li{
        flex-direction: column;
    }
    .trip .promote ul li:nth-child(even){
        flex-direction: column;
    }
    .trip .promote ul li .thumb img{
        width: auto;
        margin: auto;
    }
    .trip .promote ul li .text{
        margin-top: 30px;
    }
    .trip .promote ul li .text .wrap{
        width:100%;
        text-align: center;
    }
    .trip .promote ul li .text .wrap p{
        text-align: left;
    }
    .trip .travel p{
        margin:30px auto auto;
        width: 100%;
    }
    .trip .travel ul li{
        width:50%;
    }
    .trip .video .content .wrap{
        width: 100%;
    }
    .trip .history .description{
        width: 100%;
    }
    .trip .history ul{
        width: 100%;
    }

    .plan .christmas .table-row{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .plan .christmas .table-cell{
        width:100%;
    }
    .plan .christmas .table-cell{
        width: auto;
        display: block;
        margin:auto;
    }
    .plan .christmas .sliders .thumb{
        margin-top: 30px;
    }

    .plan .review .ariticle li{
        display: block;
    }

    .plan .review .ariticle li>div{
        display: block;
        width:100%;
    }

    .plan .review .ariticle li>.right{
        margin-top: 20px;
    }

    .record .wrapper,
    .stockout .wrapper{
       max-width: 768px;
    }

}


@media screen and (max-width: 768px) {
    .hide-xs{
        display: none;
    }
    .visible-xs{
        display: block;
    }

    .overlay{
        width: auto;
    }

    h2.title{
        font-size: 22px;
    }

    .swiper-button-prev,
    .swiper-button-next{
        top:50%;
        width:30px;
        height:30px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 7;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after{
        font-size: 28px;
        
    }


    header .logo{
        flex:0 0 45px;
        padding:0
    }

    header .navbar{
        display: none;
    }
    header .inner{
        align-items: flex-start;
    }

    header .inner .lang{
        display: none;
    }
    header .inner .icon{
        width: 50px;
        height: 50px;
        padding:10px;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        background-color: var(--primary);
    }

    header .aside{
        position: fixed;
        height: 100vh;
        width: 65vw;
        left:150%;
        top:0;
        background: #f7f7f7;
        z-index: 9;
        transition: left 0.3s ease;
    }

    header .aside.show{
        left:35%;
    }

    header .aside ul li{
        height: 40px;
        border-bottom:1px solid #eee;
        padding:0 15px;
        box-sizing: border-box;
    }

    header .aside ul li a{
        line-height: 39px;
        color: #39342e;
        font-weight: 900;
        font-size: 13px;
        letter-spacing: 1px;
    }

    header .aside ul li.active a{
        color:var(--primary);
    }

    header .aside .close{
        position: absolute;
        top:0;
        left:0;
        transform: translateX(-100%);
        width:40px;
        height:40px;
        padding:10px;
        background-color: var(--primary);
    }
    
    header .aside .close img,
    header .inner .icon img{
        display: block;
        width: 100%;
    }

    header .aside + .mask{
        position: fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index: -1;
        opacity: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    header .aside.show + .mask{
        opacity:1;
        z-index: 8;
    }

    .subnav li a{
        font-size: 16px;
        font-weight: normal;
        padding: 0 10px;
    }

    .index .newest{
        padding:30px 0;
    }

    .index .newest ul{
        margin:0;
        flex-wrap: wrap;
    }

    .index .newest ul li{
        width:100%;
        padding:0;
    }

    .index .newest ul li + li{
        margin-top: 20px;
    }

    .index .newest .promote{
        margin-top: 30px;
    }

    .index .series ul{
        flex-wrap: wrap;
    }

    .index .series ul li{
        width: 100%;
    }

    .about .introduction{
        padding:30px 0;
    }

    .about .introduction .inner .container{
        width: 83.33333333%;
    }

    .about .introduction .description{
        margin-top: 30px;
    }

    .product .wrapper{
        position: relative;
        padding:0 35px;
        --swiper-theme-color:var(--primary);
    }

    .product .series .container{
        padding:30px 0;
    }

    .product .series .item > .title{
        margin-top:0;
    }

    .product .series .item table{
        margin-top: 0;
    }

    .product .series .item td{
        padding:0 10px;
    }

    .product .series .item table a{
        font-size: 14px;
        height: 4em;
    }

    .product .series .item .link{
        margin-top: 20px;
    }

    .product .series .item .link img{
        width:35px;
    }


    .message .newest{
        padding:30px 0
    }

    .message .newest ul{
        margin:0;
        flex-wrap: wrap;
    }

    .message .newest ul li{
        width: 100%;
        margin-top: 20px;
    }

    .message .newest ul li:first-child{
        margin-top: 0;
    }

    .trip .anchor{
        padding:20px 0;
    }

    .trip .anchor ul{
        flex-wrap: wrap;
    }

    .trip .anchor li:first-child::before,
    .trip .anchor li::after{
        content:'|'
    }

    .trip .anchor li a{
        padding:0 20px;
    }

    .trip .promote{
        padding:30px 0;
    }

    .trip .promote ul{
        margin-top: 30px;
    }

    .trip .travel{
        padding-bottom: 40px;
    }

    .trip .video .content{
        margin-top: 30px;
    }

    .trip .history{
        padding-top: 30px;
    }

    .trip .history .description{
        margin-top: 30px;
    }

    .trip .history ul li{
        margin-bottom: 30px;
    }

    .plan .christmas div.title-year{
        font-size: 12px;
    }

    .plan .christmas .sliders .thumb-next,
    .plan .christmas .sliders .thumb-prev{
        width: 35px;
        height: 35px;
        background-size: contain;
    }

    .plan .contents{
        padding:40px 0;
    }
    .plan .contents .content{
        width: 100%;
    }
    .plan .review{
        padding:40px 0;
    }
    .plan .review .ariticle{
        width: 100%;
    }
    .plan .review .ariticle li{
        margin-top: 40px;
    }
    /* 社区慈善 */
    .charity .category{
        flex-wrap: wrap;
    }
    .charity .category li{
        width:33.3333%;
        border-bottom:1px dotted #ccc;
    }
    .charity .masonry{
        margin-top: 30px;
        margin-right: -15px;
    }
    .charity .masonry .item{
        width:calc(50% - 15px);
    }

    .record .join{
        padding: 25px 0;
    }

    .record .wrapper{
       max-width: 90%;
       padding: 15px;
    }
    .record .divider span{
        font-size: 20px;
    }

    .record .join ul{
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .record .join li{
        flex: 0 0 50%;
        border: none;
        padding-bottom: 15px;
    }
    .record .join li:not(:first-child){
        border: none;
    }

    .record .join p{
        margin-top: 5px;
    }

    .record .buy{
        padding-top: 35px;
    }

    .record .list{
        margin-top: 35px;
        display: flex;
        flex-wrap: wrap;
    }

    .record .list>div{
        flex: 0 1 100%;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .record .list>div + div{
        margin-left: 0;
        margin-top: 35px;
    }

    .record .list .title{
        padding-left: 15px;
        padding-right: 15px;
    }

    .record .list li{
        padding: 10px;
    }

    .record .list .infomation p{
        margin-top: 10px;
        font-size: 16px;
    }

    .record .list .left .total,
    .record .list .totals{
        position: static;
        text-align: right;
    }

    .record .list .total{
        padding-right: 15px;
    }

    .record .list .items{
        margin-top: 15px;
    }

    .record .buttons{
        margin-top: 35px;
    }

    .record .buttons .button{
        padding: 0 30px;
    }

    .record .buttons .button + .button{
        margin-left: 35px;
    }

    .record .progress ul{
        flex-wrap: wrap;
    }

    .record .progress ul li{
        flex: 0 1 100%;
    }

    .record .progress ul li + li{
        margin-left: 0;
        margin-top: 35px;
    }

    .record .progress ul li + li:before{
        left: 50%;
        top: -30px;
        transform: translateX(-50%) rotate(90deg);
    }

    .record .progress .image{
        width: 70px;
        height: 70px;
        padding: 10px;
    }

    .record .progress h4{
        width: auto;
        margin-top: 10px;
        padding-bottom: 10px;
    }

    .record .progress p{
        margin-top: 10px;
    }

    .discount{
        padding: 35px 15px;
    }

    .discount .text h2{
        font-size: 17px;
    }

    .discount .text p{
        margin-top: 10px;
    }

    .discount #swiper{
        margin-top: 35px;
    }

    .discount .info{
        margin-top: 35px;
        padding: 15px;
        flex-direction: column;
    }

    .discount .info ul{
        margin-top: 20px;
    }

    .discount .info ul li{
        white-space: inherit;
    }

    .discount .thumb{
        width: 100%;
        height: auto;
        padding: 15px;
        margin-top: 20px;
    }

    .discount .info .link{
        margin-top: 20px;
    }

    .stockout{
        padding: 35px 15px;
    }

    /*2021-06-24新增*/
    .upload{
        padding: 35px 15px;
    }

    .upload .form{
        margin-top: 40px;
    }

    /*2021-6-29新增*/
    .member-info{
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .member-info .form{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    /*2021-06-30新增*/
    .promote .lists{
        padding-top: 20px;
    }

    .promote .lists table,
    .promote .lists table tbody,
    .promote .lists table tr,
    .promote .lists table td {
        display: block;
        width:100%
    }

    .promote .lists table td{
        width: 100% !important;
    }

    .promote .media{
        padding:25px 0;
    }

    .promote .series{
        padding: 25px 0;
    }

    .lists .list ul li{
        width:33.33%;
        padding:0 8px;
    }

    .lists .list ul li .image{
        font-size: 0
    }

    .lists .list ul li p.title{
        font-size: 13px;
        text-overflow: inherit;
        white-space: normal;
        margin-top: 10px;
        min-height: 2em;
    }

    .activity .form{
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .activity .form li{
        flex-direction: column;
    }

    .activity .form li > * + *{
        margin-left: 0;
        margin-top: 15px;
        flex:0 0 auto;
    }

    .activity .form li input[readonly]{
        background-color: transparent;
        padding:0;
        height: auto;
        color:#666;
    }

    .activity input[type=text],
    .activity select,
    .activity input[type=email],
    .activity input[type=number],
    .activity input[type=date],
    .activity input[type=datetime-local],
    .activity input[type=button],
    .activity input[type=tel]{
        flex:0 0 auto;
    }
}