@media (min-width: 1280px) and (max-width: 1500px) {
    #banner:before {
        width: 100%;
        height: 150px;
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .container {
        max-width: 1100px;
    }

    #banner:before {
        width: 100%;
        height: 70px;
    }

    #hottest .content .list .item {
        min-width: 180px;
    }

    #hottest .item .txt .poiName {
        font-size: .8rem;
    }

    #headerNew2 .wrapper {
        width: 400px;
    }

    .buPage #bodyContent {
        width: calc(100% - 377px);
        margin-left: 70px;
    }

    #hottest .content .list .item {
        min-width: 200px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #banner:before {
        width: 100%;
        height: 100px;
    }

    .container {
        max-width: 991px;
    }

    #headerNew2 .wrapper {
        width: 100%;
        margin: auto;
    }

    #headerNew2 .inner .headerDesktop .li {
        max-width: 250px;
    }

    #headerNew2 a.bu-link {
        font-size: 18px;
    }

    #hottest .content .icon {
        width: 100%;
        background-size: 24%;
        background-repeat: no-repeat;
        background-position: center;
    }

    #hottest .content .list {
        width: 100%;
    }

    #hottest .content .list .item {
        min-width: 220px;
    }
}

@media (min-width: 0) and (max-width: 768px) {
    #banner:before {
        height: 40px;
    }

    #banner .heart {
        left: auto;
        right: -142px;
        top: -30px;
        background-size: 109%;
        background-repeat: no-repeat;
    }

    #banner .item {
        display: none;
    }

    #banner .item2 {
        display: none;
    }

    #banner {
        height: 600px;
    }

    #intro .content .txt {
        width: 90%;
        margin: 20px auto;
    }

    #intro .content .txt .period {
        margin: 20px auto;
    }

    #intro .content .images {
        width: 100%;
    }

    #hottest .content .list {
        width: 100%;
        flex-wrap: wrap;
    }

    #hottest .content .list .item {
        min-width: auto;
        height: auto;
        width: 47%;
    }

    #hottest .content .btn {
        display: block;
    }

    #specialPage .pageTT .title {
        width: 350px;
        height: 150px;
        background: url('../images/page/TT-page-cms2.png');
        background-size: 100%;
    }

    #intro .content .txt {
        order: 2;
        text-align: center;
    }

    #intro .content .txt p {
        text-align: center;
        max-width: 100%;
    }

    #intro .content .images {
        order: 1;
    }

    #hottest .content .icon .txt {
        width: 240px;
        height: 85px;
    }

    #hottest .content .icon .txt h2 b {
        font-size: 35px;
    }

    #hottest .content .icon {
        width: 350px;
        height: 180px;
        background: url(../images/00_index/hottest_icon_m.png);
        background-size: 100%;
    }

    #hottest .item .txt .poiName {
        font-size: 1rem;
    }

    #bookingPage .prizeWrapper .order img {
        width: 90%;
    }

    #special-section {
        background-size: auto;
        background-attachment: unset;
    }

    #hottest {
        background-size: auto;
        background-attachment: unset;
        background-repeat: no-repeat;
    }

    #hottest .item .txt p {
        font-size: 1rem;
        font-weight: 600;
    }

    #hottest .content .icon .txt img {
        width: 80px;
        height: auto;
        margin: auto;
        float: left;
        left: 0px;
        top: -10px;
        position: relative;
    }

    #hottest .content .icon .txt h3 {
        color: #4C4556;
        font-weight: bold;
        width: 260px;
        height: 30px;
        text-align: left;
    }

    #hottest .content .icon .txt h2 {
        color: #F25555;
    }
    #hottest .content .icon .txt .subtitle {
        text-align: left;
    }

}

@media (min-width: 0) and (max-width: 440px) {
    #banner:before {
        height: 40px;
    }

    #banner .heart {
        top: -70px;
        left: -290px;
        right: -330px;
        width: 730px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #banner .cloud1 {
        top: 407px;
    }

    #banner .item {
        display: none;
    }

    #banner {
        height: 300px;
    }

    .swiper-slide {
        width: 100% !important;
    }

    #special-section .title {
        width: 340px;
        height: 75px;
        line-height: 80px;
        margin: 40px auto;
    }

    #intro .content .images .anc1 {
        width: 150px;
        height: 167px;
        background-size: 100%;
        position: relative;
    }

    #intro .content .images .anc2 {
        width: 150px;
        height: 167px;
        background-size: 100%;
        position: relative;
    }

    #intro .content .images .details h2 {
        font-size: 20px;
    }

    #intro .content .images .details h3 {
        font-size: 20px;
    }

    #intro .content .images .details h3 b {
        font-size: 45px;
    }

    #intro .content .images .details {
        height: 30px;
    }

    #editors-section .title {
        width: auto;
        height: 90px;
    }

    #voucherPage .title {
        height: 90px;
    }

    #bookingPage .banner {
        display: block;
    }

    #hottest .content .list .item {
        width: 90%;
    }
    #editors .swiper-wrapper{
        display: block;
    }
    #editors .swiper-slide{
        margin: 10px auto;
    }
    #editors-section .txt p{
        font-size: 0.9rem;
    }
}

@media (min-width: 0) and (max-width: 375px) {
    #editors-section .title {
        width: auto;
        height: 90px;
    }

}