body { background-color: #08203f; } .w1200 { width: 1200px; margin: 0 auto; } .filter-box { position: relative; padding-top: 144px; z-index: 10; } .filter-box .filter-top { position: absolute; top: -64px; right: 0; left: 0; display: flex; align-items: center; justify-content: space-around; width: 1200px; height: 128px; margin: 0 auto; background: #ffffff; box-shadow: 0px 3px 27px 0px rgba(13, 13, 13, 0.1); border-radius: 20px; } .filter-box .filter-top .select-box { display: flex; justify-content: center; align-items: flex-end; margin: 0; padding: 0; } .filter-box .filter-top .select-box .drop-down-box { display: flex; flex-direction: column; margin: 0; padding: 0; } .filter-box .filter-top .select-box .drop-down-box .title { font-size: 14px; font-weight: bold; color: #333333; } .filter-box .filter-top .select-box .drop-down-box .drop-down { padding: 9px 10px; font-size: 16px; font-weight: 300; color: #333333; background-image: url(/static/cn/images/shared/icon_down_jt.png); background-repeat: no-repeat; background-position: 0 center; background-size: 10px auto; } .filter-box .filter-top .select-box .drop-down-box .drop-down.position-1 { background-position-x: 87px; } .filter-box .filter-top .select-box .drop-down-box .drop-down.position-2 { background-position-x: 192px; } .filter-box .filter-top .select-box .drop-down-box .drop-down.position-3 { background-position-x: 55px; } .filter-box .filter-top .select-box .drop-down-box .drop-down-input { height: 38px; padding: 9px 10px; font-size: 16px; font-weight: 300; color: #333333; } .filter-box .filter-top .select-box .drop-down-box .drop-down-first { border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .filter-box .filter-top .select-box .drop-down-box .drop-down-center { border: 1px solid #eeeeee; } .filter-box .filter-top .select-box .drop-down-box .drop-down-last { border-top: 1px solid #eeeeee; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-position: 90% 14px; } .filter-box .filter-top .select-box .drop-down-box .drop-down-input-last { border: 1px solid #eeeeee; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-position: 90% 14px; } .filter-box .filter-top .select-box .opacity-0 { opacity: 0; } .filter-box .filter-top .select-box .search-button { width: 98px; height: 38px; cursor: pointer; text-align: center; background: #c8a063; border-radius: 4px; font-size: 16px; font-weight: 300; color: #ffffff; line-height: 38px; } .filter-box .filter-top .select-box-first { width: 430px; } .filter-box .filter-top .select-box-center { width: 232px; } .filter-box .filter-top .select-box-last { width: 228px; } .header { position: fixed; top: 0; left: 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.2); z-index: 99999; } .header .nav { display: flex; align-items: center; justify-content: space-around; width: 1270px; margin: 0 auto; height: 109px; } .header .nav .top-logo { display: block; width: 100px; height: 62px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; } .header .nav .nav-item { flex: 0.5; display: flex; align-items: center; height: 110px; padding-left: 2.6rem; } .header .nav .nav-item .item-list { display: flex; margin: 0 18px; } .header .nav .nav-item .item-list .item-list-link { font-size: 16px; font-weight: 400; color: #CFAF8C; } .header .nav .back-home-link > a { display: flex; align-items: center; } .header .nav .back-home-link .back-home-icon { width: 22px; height: 22px; background-image: url(/static/cn/images/hotel/back_home_icon.png); background-repeat: no-repeat; background-size: 21px 21px; background-position: center; } .header .nav .back-home-link span { margin-left: 12px; font-size: 16px; color: #CFAF8C; line-height: 32px; } .header.active { background-color: #05162C; border-bottom: 1px solid rgba(255, 255, 255, 0); box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); } .header.active .nav .nav-item .item-list .item-list-link { color: #CFAF8C; } .top-banner .banner { width: 100%; } @media only screen and (max-width: 600px) { .w1200 { width: 100%; padding: 0 0.3rem; } .filter-box { position: relative; height: 5.5rem; } .filter-box .filter-top { position: absolute; top: -2rem; right: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 6.9rem; height: 6.84rem; margin: 0 auto; padding: 16px 0; background: #ffffff; box-shadow: 0px 9px 26px 6px rgba(27, 23, 19, 0.1); border-radius: 20px; } .filter-box .filter-top .select-box { display: flex; justify-content: center; align-items: flex-end; width: 6.3rem; margin: 0; padding: 0; } .filter-box .filter-top .select-box.select-box-center { margin-top: 0.1rem; } .filter-box .filter-top .select-box.select-box-last { margin-top: 0.1rem; } .filter-box .filter-top .select-box .drop-down-box { display: flex; flex-direction: column; margin: 0; padding: 0; } .filter-box .filter-top .select-box .drop-down-box .title { margin-bottom: 0.18rem; font-size: 0.24rem; font-weight: 100; color: #333333; line-height: 0.32rem; } .filter-box .filter-top .select-box .drop-down-box .drop-down { font-size: 16px; font-weight: 400; color: #333333; padding: 8px 10px; background-image: url(/static/cn/images/shared/icon_down_jt.png); background-repeat: no-repeat; background-position: 0 center; background-size: 10px auto; } .filter-box .filter-top .select-box .drop-down-box .drop-down.position-1 { background-position-x: 2.55rem; } .filter-box .filter-top .select-box .drop-down-box .drop-down.position-2 { background-position-x: 5.7rem; } .filter-box .filter-top .select-box .drop-down-box .drop-down.position-3 { background-position-x: 1.57rem; } .filter-box .filter-top .select-box .drop-down-box .drop-down-input { height: 38px; padding: 9px 10px; font-size: 16px; font-weight: 300; color: #333333; } .filter-box .filter-top .select-box .drop-down-box .drop-down-first { border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .filter-box .filter-top .select-box .drop-down-box .drop-down-center { border: 1px solid #eeeeee; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .filter-box .filter-top .select-box .drop-down-box .drop-down-last { border-top: 1px solid #eeeeee; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-position: 90% 14px; } .filter-box .filter-top .select-box .drop-down-box .drop-down-input-last { border: 1px solid #eeeeee; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-position: 90% 14px; } .filter-box .filter-top .select-box .opacity-0 { opacity: 0; display: none; } .filter-box .filter-top .select-box .search-button { display: flex; justify-content: center; align-items: center; width: 6.3rem; height: 0.96rem; text-align: center; font-size: 0.34rem; font-weight: 300; background: #c8a063; color: #ffffff; border-radius: 6px; } .filter-box .filter-top .select-box-first .col-3 { flex: 0 0 50%; max-width: 50%; } .filter-box .filter-top .select-box-first .col-6 { flex: 0 0 100%; max-width: 100%; } .filter-box .banner { width: 7.5rem; height: 8.8rem; } .filter-box .banner img { width: 100%; } .filter-box .mobile-filter-swiper-container { width: 6.9rem; margin: 3.74rem auto 0; } .filter-box .mobile-filter-swiper-container .swiper-slide { width: 5.46rem; height: 3.3rem; } .filter-box .mobile-filter-swiper-container .swiper-slide img { width: 100%; height: 100%; } .filter-box .mobile-filter-swiper-container .swiper-button { width: 0.2rem; height: fit-content; font-size: 0.18rem; font-weight: 400; color: #fefefe; } .filter-box .mobile-filter-swiper-container .swiper-button .title-zh { display: inline-block; width: 0.2rem; } .filter-box .mobile-filter-swiper-container .swiper-button .title-en { transform: rotate3d(1, 1, 36, 180deg); writing-mode: vertical-lr; writing-mode: tb-lr; } .filter-box .mobile-filter-swiper-container .swiper-button-next { top: calc(50% - 20px); background-image: none; } .filter-box .mobile-filter-swiper-container .swiper-button-prev { top: calc(50% - 20px); background-image: none; } .filter-box .hotel-top { display: flex; align-items: center; width: 6.9rem; margin: 0.48rem auto 0.4rem; } .filter-box .hotel-top .left { display: flex; justify-content: flex-end; flex: 1; border-bottom: 1px solid #dcdcdc; } .filter-box .hotel-top .left .line { width: 0.7rem; height: 3px; background: #cba56b; } .filter-box .hotel-top .right { flex: 1; border-bottom: 1px solid #dcdcdc; } .filter-box .hotel-top .right .line { width: 0.7rem; height: 3px; background: #cba56b; } .filter-box .hotel-top .title-box { margin: 0 0.6rem; text-align: center; } .filter-box .hotel-top .title-box .title { font-size: 0.4rem; font-weight: bold; color: #000000; } .filter-box .hotel-main { display: flex; align-items: center; justify-content: space-between; overflow-x: auto; width: 6.9rem; margin: 0 auto; } .filter-box .hotel-main .item-box { display: flex; justify-content: center; align-items: flex-end; margin: 0; padding: 0; } .filter-box .hotel-main .item-box .item-list { display: flex; flex-direction: column; margin: 0; padding: 0; } .filter-box .hotel-main .item-box .item-list .title { text-align: center; font-size: 0.2rem; font-weight: 300; color: #cccccc; line-height: 28px; } .filter-box .hotel-main .item-box .item-list .item-card { display: flex; justify-content: center; align-items: center; width: 1.62rem; height: 0.88rem; margin: 0 5px; padding: 0; border: 1px solid #d2d2d2; border-radius: 4px; box-sizing: border-box; } .header { position: fixed; top: 0; left: 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .header .nav { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 auto; height: 1.09rem; padding: 0 0.3rem; } .header .nav .top-logo { display: block; width: 1.2rem; height: 0.7rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; } .header .nav .nav-item { flex: 0.5; display: none; justify-content: space-between; align-items: center; height: 110px; } .header .nav .nav-item .item-list { display: flex; } .header .nav .nav-item .item-list .item-list-link { font-size: 16px; font-weight: 400; color: #CFAF8C; } .header .nav .back-home-link > a { display: flex; align-items: center; } .header .nav .back-home-link .back-home-icon { width: 0.36rem; height: 0.36rem; background-image: url(/static/cn/images/hotel/back_home_icon.png); background-repeat: no-repeat; background-size: 0.35rem 0.35rem; background-position: center; } .header .nav .back-home-link span { margin-left: 12px; font-size: 16px; color: #CFAF8C; line-height: 32px; } }