@media only screen and (max-width: 500px) and (orientation: portrait) {
    
    .close {
        width: 5%;
        padding: 3px 10px;
    }
    .desktop .header {
        height: 5%;
    }
    .desktop .mainSlider {
        height: 95%;
    }
    .desktop .slide1 {
        background: url(../image/mobile_slide1.jpg) no-repeat;
        background-position: 10% 5% !important;
    }
    .desktop .slide2 {
        background: url(../image/mobile_slide2.jpg) no-repeat;
        background-position: 10% 5% !important;
    }
    .desktop .slide3 {
        background: url(../image/mobile_slide3.jpg) no-repeat;
        background-position: 10% 5% !important;
    }
    .desktop .slide4 {
        background: url(../image/mobile_slide4.jpg) no-repeat;
        background-position: 10% 5% !important;
    }
    .desktop .slide5 {
        background: url(../image/mobile_slide5.jpg) no-repeat;
        background-position: 10% 5% !important;
    }
    .get_tips, .shop_now, .save_time, .pre_order_online {
        bottom: 17%;
        right: 24%;
        width: 55% !important;
    }
    .desktop .banner{
        background:url('../image/collapse-mobile.jpg');
        background-repeat: no-repeat;
        background-position: 7% 0%;
        background-size: cover;
        height: 14%;
    }
}

@media only screen and (max-width: 300px) and (orientation: portrait) {
    .desktop .banner{
        height: 10%;
    }
}

@media only screen and (max-width: 500px) and (orientation: landscape) {
    .desktop .header {
        height: 10%;
    }
    .desktop .mainSlider {
        height: 90%;
    }
    .close {
        width: 4%;
        padding: 4px; /* 8px */
    }
    .desktop .slide1 {
        background: url(../image/tab_slide1.jpg) no-repeat;
        background-position: 100% 70% !important;
    }
    .desktop .slide2 {
        background: url(../image/tab_slide2.jpg) no-repeat;
        background-position: 100% 50% !important;
    }
    .desktop .slide3 {
        background: url(../image/tab_slide3.jpg) no-repeat;
        background-position: 100% 50% !important;
    }
    .desktop .slide4 {
        background: url(../image/tab_slide4.jpg) no-repeat;
        background-position: 100% 50% !important;
    }
    .desktop .slide5 {
        background: url(../image/tab_slide5.jpg) no-repeat;
        background-position: 100% 50% !important;
    }
    .desktop .banner{
        background:url('../image/collapse-tablet.jpg');
        background-repeat: no-repeat;
        background-position: 7% 0%;
        background-size: cover;
    }
}
/* @media only screen and (max-width: 500px) and (orientation: landscape) {} */