/* EICMA 2026 homepage banner + modal — same look as CN 号外板块 */
.haowai-block{
  width:100%;
  background:#fff;
  margin:0;
  padding:0.4rem 10% 0.8rem;
  box-sizing:border-box;
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
}
.haowai-heading{display:none}
.haowai-banner{
  position:relative;
  display:block;
  width:auto;
  max-width:70%;
  margin:0 auto;
  padding:0;
  border:0;
  background:#111;
  cursor:pointer;
  line-height:0;
  text-align:center;
}
.haowai-banner picture,
.haowai-banner img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:calc(100vh - 100px);
  object-fit:contain;
  margin:0 auto;
}
.haowai-play{
  position:absolute;
  left:50%;
  top:50%;
  width:76px;
  height:76px;
  margin:-38px 0 0 -38px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 22px rgba(0,0,0,.28);
  pointer-events:none;
  transition:transform .2s ease,background-color .2s ease;
}
.haowai-play::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  border-style:solid;
  border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #111;
  transform:translate(-35%,-50%);
}
.haowai-banner:hover .haowai-play,
.haowai-banner:focus-visible .haowai-play{
  transform:scale(1.08);
  background:#fff;
}
.haowai-banner:focus-visible{
  outline:2px solid #000;
  outline-offset:3px;
}
.haowai-modal{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:2147483646 !important;
  display:none;
  align-items:center;
  justify-content:center;
  padding:80px 8vw 56px;
  margin:0;
  box-sizing:border-box;
}
.haowai-modal[hidden]{display:none !important}
.haowai-modal.is-open{display:flex !important}
.haowai-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.82);
}
.haowai-modal-dialog{
  position:relative;
  z-index:1;
  width:min(720px,70vw);
}
.haowai-modal-close{
  position:absolute;
  right:-8px;
  top:-52px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  color:#111;
  font-size:1.8rem;
  line-height:44px;
  cursor:pointer;
  padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.haowai-modal-close:hover,
.haowai-modal-close:focus-visible{
  color:#ddd;
  outline:none;
}
.haowai-modal-player{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:#000;
  overflow:hidden;
}
.haowai-modal-player iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
body.haowai-lock,
html.haowai-lock{
  overflow:hidden !important;
}
@media (max-width:767px){
  .haowai-block{padding:0.3rem 5% 0.6rem}
  .haowai-banner{max-width:90%}
  .haowai-banner picture,
  .haowai-banner img{max-height:calc(100vh - 86px)}
  .haowai-play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .haowai-play::after{border-width:10px 0 10px 17px}
  .haowai-modal{padding:72px 5vw 40px}
  .haowai-modal-dialog{width:min(720px,92vw)}
}

body.haowai-lock .main-navbar-canvas,
body.haowai-lock .sticky-top{
  z-index:1 !important;
}