.banner-bg { width: 100%; } .banner-bg .pc { display: block; width: 100%; } .banner-bg .mobile { display: none; width: 100%; } .w1200 { width: 1200px; margin: 0 auto; } .nav { position: relative; width: 100%; height: 100px; background-color: #fff; z-index: 15; } .nav > .my-container { display: flex; align-items: center; justify-content: space-around; width: 1270px; } .nav a .top-logo { width: auto; max-width: 280px; } .nav .nav-item { flex: 1; display: flex; justify-content: space-between; height: 100%; margin: 0 125px; margin-right: 52px; } .nav .nav-item .item-list { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; } .nav .nav-item .item-list .item-list-link { display: block; height: 100%; padding: 0 20px; font-size: 16px; line-height: 100px; font-weight: 400; color: #333333; } .nav .nav-item .item-list .line { display: none; position: absolute; bottom: 0; left: 0; height: 5px; width: 100%; background-color: #CBA56B; } .nav .nav-item .item-list ul { position: absolute; top: 100px; left: -28px; display: none; width: 160px; background-color: #fff; z-index: 15; } .nav .nav-item .item-list ul li > a { padding: 10px 20px; display: flex; justify-content: center; align-items: center; font-size: 16px; line-height: 36px; cursor: pointer; } .nav .nav-item .item-list ul li > a:hover { background-color: #CBA56B; color: #fff; } .nav .nav-item .item-list:hover .line { display: block; } .nav .nav-item .item-list:hover ul { display: block; } .nav .nav-item .item-list.active .line { display: block; } .nav .user-box { display: inline-flex; justify-content: space-between; align-items: center; margin-right: 50px; min-width: 200px; } .nav .user-box .user-box-list .user-box-list-link { font-size: 16px; font-weight: 400; color: #333333; } .nav .user-box .nav-phone-pic { position: relative; width: 38px; height: 38px; background-image: url(/static/cn/images/shared/qrcode_logo.png); background-repeat: no-repeat; background-position: -70px 0; } .nav .user-box .nav-phone-pic .qrcode-pic { position: absolute; display: none; top: 30px; left: -86px; z-index: 16; } .nav .user-box .nav-phone-pic .qrcode-pic:hover { display: block; } .nav .user-box .nav-phone-pic:hover { background-position: 0 0; } .nav .user-box .nav-phone-pic:hover .qrcode-pic { display: block; } .nav .hotel-menu-box { position: absolute; top: 99px; left: 0; display: none; width: 100%; height: 340px; padding-top: 50px; background-color: #fff; z-index: 15; border-top: 1px solid #CCCCCC; } .nav .hotel-menu-box.show { display: block; } .nav .hotel-menu-box > .my-container { display: flex; } .nav .hotel-menu-box .left { padding-right: 20px; height: 240px; width: 340px; padding-left: 100px; border-right: 1px solid rgba(153, 153, 153, 0.3); } .nav .hotel-menu-box .left .item { display: flex; align-items: center; } .nav .hotel-menu-box .left .item .item-line { width: 4px; height: 20px; margin-right: 10px; background-color: #CBA56B; opacity: 0; } .nav .hotel-menu-box .left .item h2 { font-weight: 400; font-size: 18px; line-height: 28px; color: #999; } .nav .hotel-menu-box .left .item + .item { margin-top: 40px; } .nav .hotel-menu-box .left .item.active h2 { color: #333; } .nav .hotel-menu-box .left .item.active .item-line { opacity: 1; } .nav .hotel-menu-box .right { padding-left: 100px; } .nav .hotel-menu-box .right .content-item { display: none; flex-wrap: wrap; width: 800px; } .nav .hotel-menu-box .right .content-item.show { display: flex; } .nav .hotel-menu-box .right .content-item > a { display: flex; justify-content: center; align-items: center; width: 150px; height: 90px; margin-right: 40px; margin-bottom: 20px; overflow: hidden; } .nav .hotel-menu-box .right .content-item > a img { display: block; width: 100%; } .nav-mobile { display: none; } .title-crumbs-top .my-container { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20px; padding-top: 60px; border-bottom: 1px solid #EEEEEE; } .title-crumbs-top .title { font-size: 34px; font-weight: bold; line-height: 36px; color: #000000; } .title-crumbs-top .crumbs { display: flex; align-items: flex-end; padding-right: 24px; } .title-crumbs-top .crumbs a, .title-crumbs-top .crumbs .arrow { margin-right: 5px; font-size: 16px; line-height: 26px; color: #999; } .page-bottom-group { margin-bottom: 100px; } .page-bottom-group .my-container { display: flex; justify-content: center; align-items: center; } .page-bottom-group .page-list { display: flex; justify-content: center; align-items: center; } .page-bottom-group .page-list > a { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; font-size: 18px; color: #999; border: 1px solid #e5e5e5; } .page-bottom-group .page-list > a + a { margin-left: 19px; } .page-bottom-group .page-list > a.active, .page-bottom-group .page-list > a:not(.ellipsis):hover { background-color: #f2f2f2; } .page-bottom-group .page-list .prev, .page-bottom-group .page-list .next { background-repeat: no-repeat; background-position: center center; background-size: 10px auto; } .page-bottom-group .page-list .prev { background-image: url(/static/cn/images/about/news_arrow_prev.png); } .page-bottom-group .page-list .next { background-image: url(/static/cn/images/about/news_arrow_next.png); } .page-bottom-group .page-list .ellipsis { border: none; margin-left: 10px; margin-right: -9px; } .page-bottom-group .goto { display: flex; justify-content: center; align-items: center; margin-left: 30px; } .page-bottom-group .goto p { font-size: 16px; line-height: 18px; color: #999; } .page-bottom-group .goto .page-value { width: 45px; height: 45px; margin: 0 10px; padding: 5px; text-align: center; font-size: 18px; border: 1px solid #e5e5e5; color: #999; } .page-bottom-group .goto .goto-btn { display: flex; justify-content: center; align-items: center; margin-left: 24px; width: 65px; height: 45px; font-size: 16px; color: #999; border: 1px solid #e5e5e5; } .page-bottom-group .goto .goto-btn:hover { background-color: #f2f2f2; } .footer { width: 100%; padding: 80px 0; background-color: #fff; } .footer .footer-main { display: flex; justify-content: space-between; } .footer .footer-main .footer-left { display: flex; } .footer .footer-main .footer-left .nav-item { display: flex; flex-direction: column; margin-right: 100px; } .footer .footer-main .footer-left .nav-item .item-list { margin-bottom: 40px; font-size: 16px; font-weight: bold; color: #333333; } .footer .footer-main .footer-left .nav-item .item-list .item-list-link { font-weight: 300; color: #666666; } .footer .footer-main .footer-right .right-about .right-about-tit { font-size: 16px; font-weight: bold; color: #333333; } .footer .footer-main .footer-right .right-about .right-about-item { display: flex; margin-top: 30px; } .footer .footer-main .footer-right .right-about .right-about-item .item-list { margin-right: 40px; } .footer .footer-main .footer-right .right-about .right-about-item .item-list:last-child { margin-right: 0; } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a { display: block; width: 56px; height: 56px; background-repeat: no-repeat; background-size: 54px auto; background-position: center center; } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-1 { background-image: url(/static/cn/images/shared/wechat.png); } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-2 { background-image: url(/static/cn/images/shared/webo.png); } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-3 { background-image: url(/static/cn/images/shared/xiaohongshu.png); } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a:hover.icon-1 { background-image: url(/static/cn/images/shared/wechat_active.png); } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a:hover.icon-1 .weixing-qr { display: block; } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a:hover.icon-2 { background-image: url(/static/cn/images/shared/webo_active.png); } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a:hover.icon-3 { background-image: url(/static/cn/images/shared/xiaohongshu_active.png); } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a:hover.icon-3 .weixing-qr { display: block; } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-1, .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-3 { position: relative; } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-1 .weixing-qr, .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-3 .weixing-qr { display: none; position: absolute; width: 200px; top: 50px; left: -70px; } .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-1 .weixing-qr img, .footer .footer-main .footer-right .right-about .right-about-item .item-list > a.icon-3 .weixing-qr img { display: block; width: 100%; } .footer .footer-main .footer-right .right-phone { margin-top: 56px; } .footer .footer-main .footer-right .right-phone img { display: block; width: 241px; } .footer .footer-main .footer-right .right-phone .phone-tit { margin-bottom: 30px; font-size: 16px; font-weight: bold; color: #333333; } .footer .copyright { margin-top: 130px; text-align: center; font-size: 14px; font-weight: 300; color: #999999; line-height: 26px; opacity: 0.5; } .footer-mobile { display: none; } .search-book-pop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; display: none; } .search-book-pop .search-book-pop-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .search-book-pop .search-book-pop-container .pop-box { position: relative; width: 500px; padding: 30px 40px; padding-top: 50px; background-color: #fff; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .search-book-pop .search-book-pop-container .pop-box h2 { font-size: 22px; color: #333; } .search-book-pop .search-book-pop-container .pop-box .ok-btn { display: flex; justify-content: center; align-items: center; width: 100px; height: 45px; margin-top: 60px; border-radius: 5px; font-size: 20px; color: #fff; background-color: #CBA56B; opacity: 0.8; transition: opacity 0.2s; } .search-book-pop .search-book-pop-container .pop-box .ok-btn:hover { opacity: 1; } .search-book-pop .search-book-pop-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); } .warning-book-pop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; display: none; } .warning-book-pop .warning-book-pop-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .warning-book-pop .warning-book-pop-container .pop-box { position: relative; width: 500px; padding: 30px 40px; padding-top: 50px; background-color: #fff; z-index: 99999; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .warning-book-pop .warning-book-pop-container .pop-box .content { font-size: 22px; color: #333; text-align:center; line-height:normal; } .warning-book-pop .warning-book-pop-container .pop-box .ok-btn { display: flex; justify-content: center; align-items: center; width: 100px; height: 45px; margin-top: 60px; border-radius: 5px; font-size: 16px; color: #fff; background-color: #c8a063; opacity: 0.8; transition: opacity 0.2s; } .warning-book-pop .warning-book-pop-container .pop-box .ok-btn:hover { opacity: 1; } .warning-book-pop .warning-book-pop-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 600px) { body { padding-top: 1.05rem; } .banner-bg { width: 100%; } .banner-bg .pc { display: none; width: 100%; } .banner-bg .mobile { position: relative; display: block; width: 100%; z-index: 15; background-color: #fff; } .w1200 { width: 100%; padding: 0 0.3rem; } .nav-show { height: 100%; overflow: hidden; } .nav { display: none; } .hotel-menu-box { display: none; } .nav-mobile { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.38rem; background-color: #fff; box-shadow: 0 0 0.05rem rgba(0, 0, 0, 0.1); z-index: 999999; } .nav-mobile .top-logo { display: flex; align-items: center; width: 2.8rem; height: 0.46rem; } .nav-mobile .top-logo img { display: block; width: 100%; } .nav-mobile .nav-button { display: block; width: 0.44rem; height: 0.44rem; } .nav-mobile .nav-button img { display: block; width: 100%; } .nav-mobile .mask-box { position: fixed; top: 1.06rem; right: 0; bottom: 0; left: 0; display: none; width: 100%; height: 100%; background-color: #000000; opacity: 0.8; z-index: 19; } .nav-mobile .mask-nav { position: fixed; top: 1.05rem; right: 0; left: 0; display: none; width: 100%; z-index: 20; } .nav-mobile .mask-nav .nav-item { background-color: #ffffff; } .nav-mobile .mask-nav .nav-item .item-list { font-size: 0.3rem; font-weight: bold; color: #333333; } .nav-mobile .mask-nav .nav-item .item-list > a { display: flex; justify-content: space-between; align-items: center; padding: 0.28rem 0.34rem; width: 100%; height: 100%; } .nav-mobile .mask-nav .nav-item .item-list > a h2 { font-weight: bold; } .nav-mobile .mask-nav .nav-item .item-list > a .arrow-icon { width: 0.18rem; height: 0.28rem; background-image: url(/static/cn/images/shared/icon_right.png); background-repeat: no-repeat; background-size: 0.16rem 0.28rem; background-position: 95% center; border-top: 1px solid #EEEEEE; transition: transform 0.2s; transform: rotate(0); } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel { padding-bottom: 0.3rem; } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel li { margin-top: 0.3rem; } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel li + li { margin-top: 0.6rem; } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel li h2 { position: relative; padding-left: 0.2rem; margin-left: 0.35rem; font-size: 0.24rem; color: #333; } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel li h2 .line { position: absolute; left: 0; top: 0; display: block; width: 0.06rem; height: 0.26rem; background-color: #CBA56B; } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel li .content-box { margin-top: 0.3rem; padding: 0 0.3rem; display: flex; align-items: center; flex-wrap: wrap; } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel li .content-box > a { display: block; width: 27%; margin-right: 0.6rem; margin-bottom: 0.1rem; height: auto; } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel li .content-box > a img { width: 100%; height: 100%; } .nav-mobile .mask-nav .nav-item .item-list .item-list-hotel li .content-box > a:nth-child(3n) { margin-right: 0; } .nav-mobile .mask-nav .nav-item .item-list ul { display: none; } .nav-mobile .mask-nav .nav-item .item-list ul li > a { display: block; padding: 0.28rem 0.34rem; padding-left: 0.6rem; border-top: 1px solid rgba(100, 100, 100, 0.1); width: 100%; height: 100%; color: #666; } .nav-mobile .mask-nav .nav-item .item-list ul li h2 { position: relative; padding-left: 0.2rem; margin-left: 0.3rem; font-size: 0.24rem; color: #333; } .nav-mobile .mask-nav .nav-item .item-list ul li h2 .line { position: absolute; left: 0; top: 0; display: block; width: 0.06rem; height: 0.26rem; background-color: #CBA56B; } .nav-mobile .mask-nav .nav-item .item-list.active > a .arrow-icon { transform: rotate(90deg); } .nav-mobile .mask-nav .login-Register { display: flex; } .nav-mobile .mask-nav .login-Register .log-in { display: flex; align-items: center; justify-content: center; width: 50%; height: 0.9rem; font-size: 0.3rem; font-weight: bold; color: #ffffff; background: #c49c4f; } .nav-mobile .mask-nav .login-Register .register { display: flex; align-items: center; justify-content: center; width: 50%; height: 0.9rem; font-size: 0.3rem; font-weight: bold; color: #333333; background: #f7f7f7; } .title-crumbs-top .my-container { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column-reverse; padding-top: 0.57rem; border-bottom: none; } .title-crumbs-top .title { width: 100%; padding-bottom: 0.2rem; font-size: 0.38rem; font-weight: bold; line-height: 0.36rem; color: #000000; border-bottom: 1px solid #EEEEEE; } .title-crumbs-top .crumbs { display: none; align-items: flex-end; padding-right: 0.24rem; } .title-crumbs-top .crumbs a, .title-crumbs-top .crumbs .arrow { margin-right: 0.05rem; font-size: 0.16rem; line-height: 0.26rem; color: #999; } .page-bottom-group { margin-bottom: 0.7rem; } .page-bottom-group .my-container { display: flex; justify-content: center; align-items: center; } .page-bottom-group .page-list { display: flex; justify-content: center; align-items: center; } .page-bottom-group .page-list > a { display: flex; justify-content: center; align-items: center; width: 0.5rem; height: 0.5rem; font-size: 0.24rem; color: #999; border: 1px solid #e5e5e5; } .page-bottom-group .page-list > a + a { margin-left: 0.19rem; } .page-bottom-group .page-list > a.active, .page-bottom-group .page-list > a:not(.ellipsis):hover { background-color: #f2f2f2; } .page-bottom-group .page-list .prev, .page-bottom-group .page-list .next { background-repeat: no-repeat; background-position: center center; background-size: 0.1rem auto; } .page-bottom-group .page-list .prev { background-image: url(/static/cn/images/about/news_arrow_prev.png); } .page-bottom-group .page-list .next { background-image: url(/static/cn/images/about/news_arrow_next.png); } .page-bottom-group .page-list .ellipsis { border: none; margin-left: 0.1rem; margin-right: -0.09rem; } .page-bottom-group .goto { display: none; justify-content: center; align-items: center; margin-left: 30px; } .page-bottom-group .goto p { font-size: 16px; line-height: 18px; color: #999; } .page-bottom-group .goto .page-value { width: 45px; height: 45px; margin: 0 10px; padding: 5px; text-align: center; font-size: 18px; border: 1px solid #e5e5e5; color: #999; } .page-bottom-group .goto .goto-btn { display: flex; justify-content: center; align-items: center; margin-left: 24px; width: 65px; height: 45px; font-size: 16px; color: #999; border: 1px solid #e5e5e5; } .page-bottom-group .goto .goto-btn:hover { background-color: #f2f2f2; } .footer { display: none; } .footer-mobile { display: block; margin: 0 auto; padding: 0.54rem 0; background-color: #fff; padding-left: 0.3rem; padding-right: 0.3rem; } .footer-mobile .footer-nav .nav-item { width: 100%; } .footer-mobile .footer-nav .nav-item .item-list .item-list-tit { font-size: 0.3rem; font-weight: bold; color: #333333; line-height: 0.8rem; background-image: url(/static/cn/images/shared/icon_right.png); background-repeat: no-repeat; background-size: 0.16rem 0.28rem; background-position: right center; border-bottom: 1px solid #EEEEEE; } .footer-mobile .footer-nav .nav-item .item-list .son-item { display: none; margin-left: 0.3rem; } .footer-mobile .footer-nav .nav-item .item-list .son-item .son-item-list .son-item-list-link { display: flex; font-size: 0.28rem; font-weight: 400; color: #666666; line-height: 0.8rem; } .footer-mobile .footer-about { margin-top: 0.8rem; } .footer-mobile .footer-about .about-tit { text-align: center; font-size: 0.3rem; font-weight: bold; color: #333333; line-height: 0.8rem; } .footer-mobile .footer-about .about-item { display: flex; justify-content: center; margin-top: 0.1rem; } .footer-mobile .footer-about .about-item .item-list { position: relative; width: 0.86rem; height: 0.85rem; margin-right: 0.6rem; } .footer-mobile .footer-about .about-item .item-list:last-child { margin-right: 0; } .footer-mobile .footer-about .about-item .item-list img { display: block; width: 100%; } .footer-mobile .footer-about .about-item .item-list .weixing-qr { position: absolute; top: 0.7rem; left: -0.6rem; width: 2rem; display: none; } .footer-mobile .footer-about .about-item .item-list .weixing-qr img { display: block; width: 100%; } .footer-mobile .footer-about .about-item .item-list .weibo-qr { position: absolute; top: 0.7rem; left: -0.6rem; width: 2rem; display: none; } .footer-mobile .footer-about .about-item .item-list .weibo-qr img { display: block; width: 100%; } .footer-mobile .footer-about .about-item .item-list:hover .weixing-qr { display: block; } .footer-mobile .footer-about .about-item .item-list:hover .weibo-qr { display: block; } .footer-mobile .footer-phone { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin-top: 0.8rem; font-size: 0.24rem; } .footer-mobile .footer-phone .phone-tit { text-align: center; margin-bottom: 0.2rem; font-size: 0.3rem; font-weight: bold; color: #333333; line-height: 0.8rem; } .footer-mobile .footer-phone img { margin: 0 auto; width: 3.08rem; height: 0.38rem; } .footer-mobile .copyright { margin-top: 1.2rem; font-size: 0.18rem; font-weight: 300; color: #999999; line-height: 1.6; opacity: 0.5; } .search-book-pop { z-index: 9999999; } .search-book-pop .search-book-pop-container .pop-box { position: relative; width: 6rem; padding: 0.4rem 0.4rem; padding-top: 0.5rem; background-color: #fff; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; } .search-book-pop .search-book-pop-container .pop-box h2 { font-size: 0.28rem; color: #333; } .search-book-pop .search-book-pop-container .pop-box .ok-btn { display: flex; justify-content: center; align-items: center; width: 1.4rem; height: 0.6rem; margin-top: 0.6rem; border-radius: 0.05rem; font-size: 0.26rem; color: #fff; background-color: #CBA56B; opacity: 0.8; transition: opacity 0.2s; } .search-book-pop .search-book-pop-container .pop-box .ok-btn:hover { opacity: 1; } .search-book-pop .search-book-pop-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); } }