@font-face { font-family: GenYo; src: url('fonts/genyo.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Overpass; src: url('fonts/overpass.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --orange: #e24c00; }
* { box-sizing: border-box; }
html { background: #fff; }
body { width: 1179px; margin: 0 auto; font-family: GenYo, sans-serif; }
.page { position: relative; width: 1179px; height: 2556px; background: url('img/wall.jpg') center / cover no-repeat; }
h1, h2, p { margin: 0; }
#map-title { position: absolute; left: 53px; top: 215px; width: 686px; height: 135px; z-index: 2; display: flex; align-items: center; padding-left: 53px; letter-spacing: 12px; border: 3px solid var(--orange); background: #fff; color: var(--orange); font-size: 62px; font-weight: 500; white-space: nowrap; }
.region-box { position: absolute; left: 116px; top: 336px; width: 517px; height: 506px; border: 3px solid var(--orange); background: linear-gradient(90deg,#ddd,#eee,#d7d7d7); }
.region-box img { display: block; width: 100%; height: 100%; }
.intro-box { position: absolute; left: 628px; top: 428px; width: 502px; height: 348px; padding: 26px 20px; border: 2px solid var(--orange); background: #fff; color: var(--orange); text-align: justify; }
#intro-zh { font-size: 20px; line-height: 37px; letter-spacing: 1.5px; }
#intro-en { margin-top: 12px; font: 400 17.45px/22.9px Overpass, sans-serif; }
.spot-banner { position: absolute; left: 131px; top: 878px; width: 621px; height: 115px; padding: 18px 29px; color: #fff; background: var(--orange); }
.spot-banner h2 { font-size: 40px; line-height: 51px; font-weight: 500; white-space: nowrap; }
.spot-banner p { font: 600 21.8px/30px Overpass, sans-serif; white-space: nowrap; }
.spot-box { position: absolute; left: 131px; top: 993px; width: 952px; height: 1231px; padding: 23px 24px; border: 4px solid var(--orange); background: #fff; }
.spot-photo { display: block; width: 896px; height: 598px; object-fit: cover; }
#spot-desc-zh { margin-top: 25px; color: #262626; font-size: 29px; line-height: 49px; text-align: justify; }
#spot-desc-en { margin-top: 10px; color: #333; font: 400 19.5px/29px Overpass, sans-serif; text-align: justify; }
.spot-footer { position: absolute; left: 24px; right: 24px; bottom: 25px; min-height: 135px; display: flex; align-items: center; gap: 38px; }
#spot-minimap { width: 142px; height: 142px; flex: none; }
#spot-minimap path { stroke: #666; stroke-width: .3px; }
.spot-address { flex: 1; min-width: 0; }
#spot-address-zh { font-size: 29px; line-height: 40px; }
#spot-address-en { font: 400 20.7px/29px Overpass, sans-serif; }
.more { position: absolute; left: 166px; top: 2262px; width: 847px; height: 189px; border: 15px solid var(--orange); border-radius: 22px; box-shadow: inset 0 0 0 4px #fff; background: var(--orange); color: #fff; text-decoration: none; display: flex; align-items: center; justify-content: space-between; padding: 22px 42px; }
.more strong { display: block; font-size: 43px; line-height: 62px; font-weight: 500; white-space: nowrap; }
.more small { display: block; font: 600 38.6px/46px Overpass, sans-serif; }
.arrow { position: relative; width: 200px; height: 4px; background: #fff; flex: none; }
.arrow::after { content: ''; position: absolute; right: 0; top: -13px; width: 28px; height: 28px; border-top: 4px solid #fff; border-right: 4px solid #fff; transform: rotate(45deg); }
.more:focus-visible { outline: 5px solid #111; outline-offset: 5px; }