/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{ height: 48px; z-index: 1000; background-color: #404A3D; padding-top: 0; top: 0; border-bottom: 0; }
    header h1.logo{ display: inline-block; width: 60px; height:38px; left: 10px; top: 5px;}
    header h1.logo img.scroll-none{ display: none;}
    header h1.logo img.mo-scroll{ display: block;}
    header .reser-wrap{ line-height: 56px; }
    header #panelbtn{ margin: 15px 0;}
}

#section01{ padding-top: 80px; padding-bottom: 80px;}
#section01 ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
#section01 ul li{ width: 340px; padding-bottom: 5px;}
#section01 ul li .img-wrap{ height: 300px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ padding-top: 30px; padding-bottom: 40px;}
    #section01 ul li{ width: calc(50% - 5px); padding-bottom: 0;}
    #section01 .room-swiper{ padding-bottom: 0;}
    #section01 ul li .img-wrap{ height: 41.03vw;}
    .room-swiper .text-wrap {left: 5px; width: calc(100% - 10px); padding: 10px 0 9px; box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);}
    .room-swiper .text-wrap h3{ font-size: 16px; line-height: 24px; padding-bottom: 6px;}
}