/* 让下拉层紧贴主菜单，去掉空隙 */
.nav-main .dd{
  top: calc(100% + 4px) !important; /* 从 130% 改为贴边 */
}
/* 主菜单下沿的透明承接带：必须能接管鼠标事件 */
.nav-main .has-dd::before{
  content: "" !important;
  position: absolute !important;
  left: -10px !important;
  right: -10px !important;
  top: 100% !important;
  height: 16px !important;
  background: transparent !important;
  pointer-events: auto !important; /* 关键：从 none 改为 auto */
}
/* 下拉层顶沿再加一条承接带，双保险 */
.nav-main .dd::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -12px !important;
  height: 12px !important;
  background: transparent !important;
  pointer-events: auto !important;
}


:root{--nav-h: 120px; --top-water-h: 700px; --hero-pad-base: 120px; --brand: #00a9d9; --ink: #0b4a6b; --muted: #557b91; --maxw: 1200px; --shadow: 0 10px 30px rgba(0,0,0,.06); --after-funzone-shift: 420px}

*{box-sizing: border-box}

html,body{height: 100%}

body{margin: 0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,'PingFang SC','Microsoft YaHei',Arial,sans-serif; color: var(--ink); background: transparent; overflow-x: hidden}

a{color: inherit; text-decoration: none}

ul{margin: 0; padding: 0; list-style: none}

h1,h2,h3{margin: 0}

.page-bg-fixed{position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; aspect-ratio: 1200 / 4900 !important; z-index: 0 !important; pointer-events: none; background-image: url('images/beijing.png') !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: 100% auto !important; background-attachment: scroll !important}

.container{max-width: var(--maxw); margin: 0 auto; padding: 0 16px; text-align: center}

body{counter-reset: ph}

.img-ph{position: relative; overflow: hidden; border-radius: 12px; background: repeating-linear-gradient(45deg,#eaf7ff,#eaf7ff 10px,#d5efff 10px,#d5efff 20px); border: 2px dashed #87cfff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); counter-increment: ph}

.img-ph::before{content: counter(ph); position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 999px; background: #00a9d9; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 3}

.img-ph::after{content: attr(data-label); position: absolute; left: 8px; top: 8px; padding: 2px 8px; font-size: 12px; letter-spacing: .5px; color: #0b4a6b; background: rgba(255,255,255,.8); border-radius: 99px; border: 1px solid rgba(11,74,107,.12)}

.img-ph > img.ph-img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block}

.img-ph.cover > img.ph-img{object-fit: cover}

.img-ph.has-img{border: none!important; box-shadow: none!important; background: transparent!important}

.img-ph.has-img::before,.img-ph.has-img::after{display: none!important}

.navbar-wrap{position: sticky; top: 0; z-index: 1000}

.navbar{position: relative; transition: transform .35s ease; will-change: transform; backface-visibility: hidden; background: none!important}

.navbar::before{content: ""; position: absolute; inset: 0; background: url('images/daohanglan.png') center/cover no-repeat; opacity: .8; z-index: 0; pointer-events: none}

.navbar > .container{position: relative; z-index: 1}

.navbar-wrap.nav-hidden .navbar{transform: translateY(-100%)}

.nav-inner{display: flex; flex-direction: column; gap: 8px; padding: 12px 0 18px}

.nav-utility{display: flex; align-items: center; justify-content: flex-end; gap: 26px; color: #fff}

.btn-access{height: 36px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.55); color: #fff; font-weight: 700; line-height: 36px}

.util-metric{color: #fff}

.util-search{display: flex; align-items: center; gap: 8px; color: #fff; cursor: pointer}

.util-search svg{width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2}

.lang{display: flex; gap: 22px; align-items: center}

.lang .chip{color: #fff; padding: 8px 16px; border-radius: 999px; border: 1px solid transparent}

.lang .chip.active{background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.6)}

.nav-top{display: flex; align-items: center; justify-content: space-between; gap: 0px; white-space: nowrap}

.brand{flex: 0 0 auto; display: flex; align-items: center; gap: 0px; min-width: 0}

.brand-mark{width: 86px; height: 66px; object-fit: contain; display: block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.05))}

.brand-text .cn{font-size: 14px; line-height: 1.1; font-weight: 400; color: #fff; letter-spacing: 1px}

.brand-text .en{margin-top: 2px; font-size: 7px; letter-spacing: 2px; color: rgba(255,255,255,.92); text-transform: uppercase}

.nav-main{flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 44px; white-space: nowrap; overflow: hidden}

.nav-main a{color: #fff!important; font-size: 15px; font-weight: 800; padding: 6px 4px; border-radius: 8px; text-shadow: 0 1px 0 rgba(0,0,0,.08)}

.nav-main a:hover{text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px}

.hero{position: relative; overflow: visible; padding-bottom: var(--hero-pad-base)}

.hero .water-bg{position: absolute; left: 0; right: 0; top: calc(-1 * var(--nav-h)); height: calc(var(--top-water-h) + var(--nav-h)); background: url('images/2.png') center top/cover no-repeat; opacity: .2; z-index: 0; pointer-events: none}

.hero .content{position: relative; z-index: 2; min-height: 520px; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: var(--nav-h)}

.hero .titles{padding: 0}

.hero .titles .stack{position: relative; left: 50%; transform: translateX(-50%); width: 100vw}

.hero .titles .stack .splash{position: relative; left: 0; top: -400px; transform: none; width: 100vw; aspect-ratio: 16/9; height: auto; border-radius: 0}

.hero .titles .stack .splash > img.ph-img{object-fit: cover !important}

.hero .badge{position: absolute; right: 60px; top: 0; width: 96px; height: 96px; z-index: 3}

.funzone{padding: 50px 0 50px; position: relative; z-index: 10; margin-top: -100px; top: 0}

.funzone .title{font-family: 'SourceHanSansCN','Source Han Sans CN','Noto Sans CJK SC','Microsoft YaHei',sans-serif !important; font-weight: 700 !important; font-size: 20px !important; color: blue; position: relative; z-index: 20}

.funzone .subtitle{position: relative; z-index: 20}

.funzone .subtitle-24h{opacity: .3}

.quick-card{margin: 20px auto 0; background: rgba(255,255,255,.95); border-radius: 999px; box-shadow: var(--shadow); padding: 14px 50px; width: 1100px}

.quick-strip{display: flex; align-items: center; justify-content: space-between; gap: 5px; overflow-x: auto; scrollbar-width: none}

.quick-item{min-width: 96px; text-align: center; padding: 4px 4px}

.circle{width: 56px; height: 56px; margin: 4px auto 6px; border-radius: 50%}

.quick-item .label{font-size: 14px; color: var(--ink)}

.quick-strip .quick-item .img-ph::before{width: 22px; height: 22px; font-size: 12px}

.overview{padding: 0 0 40px; top: 0px; position: relative; z-index: 1}

.overview .head{text-align: center}

.overview .head .splash{width: 180px; height: 80px; margin: 0 auto 10px}

.overview .title{font-size: 20px; font-weight: 800; text-align: center; color: #1f67c3; letter-spacing: 2px}

.overview .subtitle{text-align: center; color: #69a9d6; font-size: 14px; margin-top: 6px}

.overview .stats{max-width: 800px; margin: 50px auto 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align: center}

.overview .stat .icon{width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 12px}

.overview .stat .num{font-size: 45px; font-weight: 700; color: #255edb; line-height: 1; font-family: 'DINCond','SourceHanSansCN','Microsoft YaHei',sans-serif !important}

.overview .stat .cap{color: #77a3c3; font-size: 14px; line-height: 1.2; margin-top: 6px}

.overview .desc{max-width: 960px; margin: 50px auto 50px; color: #2f5a72; font-size: 14px; line-height: 2; text-align: center}

.overview .more{text-align: center; margin-top: 10px}

.overview .more .btn{display: inline-block; height: 28px; line-height: 28px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); font-size: 12px; color: #2a6aa0}

.climate{position: relative; overflow: hidden; padding: 70px 0 140px; top: -60px; z-index: 1}

.climate .head{text-align: center}

.climate .head .splash{width: 150px; height: 150px; margin: 0 auto 0px}

.climate .title{font-size: 20px; font-weight: 800; color: #1e64c4; letter-spacing: 1px}

.climate .subtitle{font-size: 14px; color: #69a9d6; margin-top: 6px}

.climate .metrics{max-width: 1000px; margin: 50px auto 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; text-align: center; position: relative; z-index: 1}

.metric .icon{width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 16px}

.metric .value{font-size: 20px; font-weight: 800; color: #0f3d7a; line-height: 1}

.metric .value .unit-ge{font-size: .4em; margin: 0 2px; vertical-align: baseline}

.metric .label{margin: 6px 0 4px; color: #2b5c73; font-size: 14px}

.decor-between{position: relative; height: 180px; margin-top: -120px; z-index: 4; pointer-events: none}

.decor-between .fisher{position: absolute; left: -56px; top: -260px; width: 655px; height: 667px}

.decor-between .lotus{position: absolute; right: 0px; bottom: -155px; width: 360px; height: 420px; border-radius: 16px}

.scenic .head{text-align: center}

.scenic .head .splash{width: 140px; height: 200px; margin: 0 auto -20px}

.scenic .title{font-size: 20px; font-weight: 800; color: #1e64c4}

.scenic .subtitle{font-size: 14px; color: #69a9d6; margin-top: 6px}

.scenic .cards{max-width: 1000px; margin: 50px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px}

.scenic .card{background: #fff; border-radius: 22px; box-shadow: var(--shadow); overflow: hidden}

.scenic .card .thumb{padding: 14px 14px 0}

.scenic .card .thumb .img-ph{height: 190px; width: 100%; border-radius: 16px}

.scenic .card .body{padding: 12px 16px 16px}

.scenic .card .name{font-weight: 800; font-size: 18px}

.scenic .card .desc{font-size: 14px; color: #445b66; margin-top: 6px; line-height: 1.6}

.scenic .card .meta{margin-top: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #354b57}

.scenic .card .stars{letter-spacing: 2px; color: #ffc107}

.listen{position: relative; padding: 70px 0 110px}

.listen .head{text-align: center}

.listen .head .splash{width: 140px; height: 190px; margin: 0 auto -20px}

.listen .title{font-size: 20px; font-weight: 800; color: #1e64c4}

.listen .subtitle{font-size: 14px; color: #69a9d6; margin-top: 6px}

.listen .media{max-width: 880px; margin: 50px auto 0; background: #fff; border-radius: 22px; padding: 14px; box-shadow: var(--shadow)}

.listen .media .frame{height: 380px; border-radius: 16px; overflow: hidden}

.listen .media .frame .img-ph{height: 100%; width: 100%; border-radius: 16px}

.listen .caption{text-align: center; margin-top: 10px; font-size: 12px; color: #486a78}

.listen .decor{position: absolute; inset: 0; pointer-events: none}

.listen .decor .lotus-left{position: absolute; left: -51px; top: -60px; width: 336px; height: 377px}

.listen .decor .lotus-right{position: absolute; right: 0; bottom: -156px; width: 386px; height: 313px}

.booking{position: relative; padding: 0}

.booking .head{text-align: center}

.booking .head .splash{width: 171px; height: 190px; margin: 0 auto 8px}

.booking .title{font-size: 20px; font-weight: 800; color: #1e64c4}

.booking .subtitle{font-size: 14px; color: #69a9d6; margin-top: 6px}

.booking .wrap{display: flex; align-items: flex-start; gap: 0; max-width: 1100px; margin: 50px auto 0}

.booking .lotus-side{flex: 0 0 50px}

.booking .lotus-side .img-ph{width: 240px; height: 500px; border-radius: 16px; top: 420px; left: -80px}

.booking .cards{flex: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px}

.booking .card{background: #fff; border-radius: 18px; box-shadow: var(--shadow); overflow: hidden}

.booking .card .thumb{padding: 12px 12px 0}

.booking .card .thumb .img-ph{height: 150px; width: 100%; border-radius: 14px}

.booking .card .body{padding: 10px 14px 14px}

.booking .card .name{font-weight: 800; font-size: 16px}

.booking .card .desc{font-size: 12px; color: #506771; margin-top: 6px; line-height: 1.55}

.booking .more{text-align: center; margin: 50px 0 50px}

.booking .more .btn{display: inline-block; height: 36px; line-height: 36px; padding: 0 28px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: 4px; color: #fff; background: linear-gradient(180deg,#bff5ff 0%, #7fe9ff 100%); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 10px 30px rgba(0,0,0,.06); cursor: pointer; user-select: none}

.booking .more .btn:hover{transform: translateY(-1px); filter: brightness(1.04)}

.booking .more .btn:active{transform: translateY(0)}

.booking .card .meta{margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #6e8a99}

.booking .card .stars{letter-spacing: 2px; color: #ffc107}

.img37{position: fixed; left: -5vw; top: 50%; transform: translateY(-50%); z-index: 60; pointer-events: none; user-select: none; max-height: 80vh}

.panorama{position: relative; padding: 0 0 110px}

.panorama .head{text-align: center; margin-top: 50px}

.panorama .head .splash{width: 171px; height: 190px; margin: 0 auto 8px}

.panorama .title{font-size: 20px; font-weight: 800; color: #1e64c4}

.panorama .subtitle{font-size: 14px; color: #69a9d6; margin-top: 6px}

.panorama .girl{position: absolute; right: 0; top: -142px; width: 732px; height: 434px; pointer-events: none; z-index: 2}

.panorama .pano-ph{max-width: 1000px; margin: 15px auto 0; height: 420px; border-radius: 16px}

.landscape{padding: 0}

.landscape .inner{position: relative; width: 100vw; max-width: none; margin: 0; height: 500px}

.landscape .scene{position: absolute; inset: 0; border-radius: 0}

.landscape .logo{position: absolute; left: 50%; top: -50px; transform: translateX(-50%); width: 140px; height: 149px; border-radius: 12px}

.landscape .contact{position: absolute; left: 50%; top: 37%; transform: translate(-50%,-50%); text-align: center; color: #fff; line-height: 1.6; text-shadow: 0 1px 2px rgba(0,0,0,.25); font-size: 20px}

.landscape .seal{position: absolute; left: 50%; top: 74%; transform: translate(-50%,-50%); width: 96px; height: 96px; border-radius: 50%}

.site-foot{background: #2c6230; color: #fff; text-align: center; padding: 12px 0 16px; font-size: 12px; line-height: 1.6}

.site-foot a{color: #fff; text-decoration: none; opacity: .95}

.funzone, .funzone ~ *{transform: translateY(calc(-1 * var(--after-funzone-shift))); will-change: transform}

@font-face{font-family: 'SourceHanSansCN'; src: url('fonts/SourceHanSansCN-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap}

@font-face{font-family: 'SourceHanSansCN'; src: url('fonts/SourceHanSansCN-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap}

@font-face{font-family: 'SourceHanSansCN'; src: url('fonts/SourceHanSansCN-Bold_0.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap}

@font-face{font-family: 'DINCond'; src: url('fonts/DINCond-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap}

.nav-utility{font-family: 'SourceHanSansCN','Source Han Sans CN','Noto Sans CJK SC','Microsoft YaHei',sans-serif !important; font-weight: 500 !important; font-size: 10px !important; line-height: 1.2 !important}

.nav-utility > *, .nav-utility .chip, .nav-utility .btn-access, .nav-utility .util-metric, .nav-utility .util-search{font-family: inherit !important; font-weight: inherit !important; font-size: inherit !important}

.util-metric, .util-metric strong{font-weight: 500 !important}

.overview .desc{line-height: 2 !important}

.climate .metrics{display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 0px; align-items: start; justify-items: center; position: relative}

.climate .metric{background: transparent; border: 0; text-align: center; padding: 0; --lift: 0px; transform: translateY(var(--lift))}

.climate .metric .m-icon{width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 50%; background: linear-gradient(#f7fbff,#eaf4ff); border: 1px dashed rgba(11,73,183,.2)}

.climate .metric .label{margin-top: 6px; color: #666}

.climate .metric .value{margin-top: 6px; font-size: 28px; line-height: 1.1; font-family: 'DINCond','SourceHanSansCN','Microsoft YaHei',sans-serif; font-weight: 700}

.climate .metrics .metric:nth-child(1){--lift: 12px}

.climate .metrics .metric:nth-child(2){--lift: 40px}

.climate .metrics .metric:nth-child(3){--lift: 22px}

.climate .metrics .metric:nth-child(4){--lift: 40px}

.climate .metrics .metric:nth-child(5){--lift: 12px}

.climate .metrics{grid-template-columns: repeat(auto-fit, minmax(180px,1fr))}

.funzone .bg-beijing1, .top-water, .water-bg{display: none !important; visibility: hidden !important}

#pageZoom, .site-header, .funzone, .overview, .climate, .site-foot{position: relative; z-index: 1 !important}

.nav-main{gap: 28px !important}

.nav-main a{font-size: 14px !important; padding: 6px 2px !important}

.brand{gap: 0px !important}

.brand-mark{width: 78px !important; height: 60px !important}

.nav-top{flex-wrap: nowrap !important}

.nav-main{flex-wrap: nowrap !important; overflow: visible !important}

.nav-main > *{flex: 0 0 auto !important; white-space: nowrap !important}

.nav-main .has-dd{display: inline-flex !important; align-items: center; width: auto !important; position: relative}

.page-bg-fixed{position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: var(--page-bottom, 100vh) !important; background-image: url('images/beijing.png') !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: 100% 100% !important; aspect-ratio: auto !important; pointer-events: none; z-index: 0 !important}

.quick-strip{align-items: stretch}

.wave-line{flex: 0 0 auto; align-self: center; width: 6px; height: 90px; margin: 0 6px; background: url("data:image/svg+xml; utf8,<svg xmlns='http: //www.w3.org/2000/svg' width='18' height='118' viewBox='0 0 18 118'><path d='M9 0 C3 10,15 18,9 28 C3 38,15 46,9 56 C3 66,15 74,9 84 C3 94,15 102,9 112' stroke='%23c9d5de' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat; opacity: 0.45; pointer-events: none}

.overview .more .btn, .booking .more .btn{display: inline-block; height: 36px; line-height: 36px; padding: 0 28px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: 4px; color: #fff; background: linear-gradient(180deg,#bff5ff 0%, #7fe9ff 100%); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 10px 30px rgba(0,0,0,.06); cursor: pointer; user-select: none; text-decoration: none}

.overview .more .btn:hover, .booking .more .btn:hover{transform: translateY(-1px); filter: brightness(1.04)}

.overview .more .btn:active, .booking .more .btn:active{transform: translateY(0)}

.nav-main{overflow: visible !important}

.nav-main .has-dd{position: relative; display: inline-flex; align-items: center}

.nav-main .has-dd > a::after{content: none !important}

.nav-main .has-dd > a{padding-bottom: 14px}

.nav-main .dd{position: absolute; top: 130%; left: 50%; transform: translateX(-50%); display: none; min-width: 90px; padding: 8px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.10); z-index: 2000; backdrop-filter: saturate(140%) blur(2px)}

.nav-main .dd a{display: block; padding: 10px 14px; margin: 4px 0; border-radius: 10px; color: #0b4a6b !important; font-weight: 800; text-shadow: none; white-space: nowrap}

.nav-main .dd a:hover{background: rgba(0,169,217,.10); text-decoration: none}

.nav-main .has-dd:hover .dd{display: block}

.nav-main .has-dd:focus-within .dd{display: block}

.nav-main .has-dd::before{content: ""; position: absolute; left: -10px; right: -10px; top: calc(100% - 8px); height: 16px; pointer-events: none}

.nav-main .has-dd{display: inline-flex; align-items: center; position: relative}

.scenic .container{position: relative}

.scenic .scenic-nav{position: absolute; top: 70%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; user-select: none; backdrop-filter: blur(4px); transition: background .25s, transform .25s; z-index: 5}

.scenic .scenic-prev{left: -18px}

.scenic .scenic-next{right: -18px}

.scenic .scenic-nav:hover{background: rgba(0,0,0,.75); transform: translateY(-50%) scale(1.1)}

.scenic .scenic-nav[disabled]{opacity: .35; pointer-events: none}

.scenic .card .thumb .img-ph{border: none !important; background: none !important; box-shadow: none !important}

.scenic .card .thumb .img-ph::before, .scenic .card .thumb .img-ph::after{display: none !important}

.scenic .card .thumb .img-ph img{width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block}

:root{--brand-h: 60px}

.brand{gap: 10px !important}

.brand-mark{height: var(--brand-h) !important; width: auto !important; object-fit: contain; display: block}

.brand-text{font-family: 'SourceHanSansCN','Source Han Sans CN','Noto Sans CJK SC','Microsoft YaHei',sans-serif !important; height: var(--brand-h) !important; width: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 6px; border-radius: 8px; overflow: hidden; line-height: 1.1; color: #fff}

.brand-text{position: relative; top: 4px}

.brand-text .cn{font-weight: 700; font-size: 14px; letter-spacing: 1px}

.brand-text .en{margin-top: 2px; font-weight: 500; font-size: 8px; letter-spacing: 2px; text-transform: uppercase}

/* 触控设备时，给 .has-dd 增加 .is-open 就显示下拉 */
html.touch .nav-main .has-dd.is-open > .dd{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}