@charset "utf-8";
/* ==========================================================================
   HAID 创意酒店设计 · 官网首页 Banner V2
   --------------------------------------------------------------------------
   新增于 2026-10，替换原 bannertext*.png / sb_tit*.png 图片文字方案
   设计稿基准：1920 × 820        换算：1px(设计稿)  *  0.0520833  =  1vw
   依赖：jquery + idangerous.swiper（沿用站点原有，无需额外库）
   说明：全部尺寸用 vw，任意屏宽下都是设计稿的等比缩放；≤767px 切竖版排版
   ========================================================================== */

.banner.hb{background:#0B1512;}

/* ---------- 舞台 ---------- */
.hb .swiper-container{position:relative;}
.hb .swiper-slide{overflow:hidden;}
.hb-slide{
	position:relative;width:100%;padding-top:42.7083%;   /* 820 / 1920 */
	background:#0B1512;overflow:hidden;
}

/* ---------- 图片层 ---------- */
.hb-photo{position:absolute;top:0;left:0;right:0;bottom:0;}
.hb-bg{
	position:absolute;top:0;left:0;right:0;bottom:0;
	background-repeat:no-repeat;background-position:center center;background-size:cover;
}
.hb-s1 .hb-bg{background-image:url(../images/banner-v2/slide01.jpg);}
.hb-s2 .hb-bg{background-image:url(../images/banner-v2/slide02.jpg);}
.hb-s3 .hb-bg{background-image:url(../images/banner-v2/slide03.jpg);}
.hb-s4 .hb-bg{background-image:url(../images/banner-v2/slide04.jpg);}

.hb-mask{
	position:absolute;top:0;left:0;right:0;bottom:0;
	background:
		-webkit-linear-gradient(left, rgba(7,18,15,.95) 0%, rgba(7,18,15,.88) 34%, rgba(7,18,15,.58) 58%, rgba(7,18,15,.08) 82%, rgba(7,18,15,0) 100%),
		        linear-gradient(96deg, rgba(7,18,15,.95) 0%, rgba(7,18,15,.88) 34%, rgba(7,18,15,.58) 58%, rgba(7,18,15,.08) 82%, rgba(7,18,15,0) 100%),
		        linear-gradient(0deg, rgba(6,16,13,.55) 0%, rgba(6,16,13,0) 42%);
}

/* ---------- 文案层 ---------- */
.hb-copy{
	position:absolute;left:7.8125vw;top:50%;width:62.5vw;
	-webkit-transform:translateY(-50%);transform:translateY(-50%);
	color:#fff;text-align:left;
}

.hb-kicker{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
	margin-bottom:1.3542vw;font-size:.8854vw;line-height:1;}
.hb-kicker .en{letter-spacing:.4em;color:#C9A063;font-weight:500;}
.hb-kicker .cn{letter-spacing:.22em;color:rgba(255,255,255,.68);
	text-shadow:0 .12em .6em rgba(0,0,0,.6);}
.hb-kicker .hb-sep{display:block;width:1.7708vw;height:1px;background:rgba(201,160,99,.7);margin:0 .8333vw;}

.hb-title{
	margin:0;font-size:4.0625vw;line-height:1.2;font-weight:700;letter-spacing:.015em;
	color:#fff;text-shadow:0 .05em .34em rgba(0,0,0,.4);
	font-family:"SourceHanSansCN-Bold","Microsoft YaHei",sans-serif;
}
.hb-title .sm{font-size:2.2917vw;font-weight:500;letter-spacing:.02em;
	font-family:"SourceHanSansCN-Medium","Microsoft YaHei",sans-serif;}
.hb-title .hb-gold{color:#E7C583;}
.hb-title .hb-mini{font-size:2.3958vw;letter-spacing:.1em;vertical-align:.1em;}

.hb-sub{
	margin:1.3542vw 0 0;font-size:1.3021vw;line-height:1.65;font-weight:300;
	color:rgba(255,255,255,.86);text-shadow:0 .08em .56em rgba(0,0,0,.6);
	font-family:"SourceHanSansCN-Light","Microsoft YaHei",sans-serif;
}

.hb-tags{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:1.7708vw;}
.hb-tags span{
	font-size:.9375vw;line-height:1.35;color:rgba(255,255,255,.92);
	padding:0 1.1458vw;border-left:1px solid rgba(201,160,99,.55);
	text-shadow:0 .12em .56em rgba(0,0,0,.6);
}
.hb-tags span:first-child{padding-left:0;border-left:0;}

.hb-btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
	margin-top:2.2917vw;}
.hb-btn{
	display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
	-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
	height:3.125vw;padding:0 2.0833vw;margin-right:.9375vw;
	font-size:.9896vw;font-weight:500;letter-spacing:.08em;border-radius:.2083vw;
	color:#12211D;background:#D8B173;background:-webkit-linear-gradient(left,#D8B173,#B98B3E);background:linear-gradient(135deg,#D8B173,#B98B3E);
	box-shadow:0 .52vw 1.35vw -.52vw rgba(201,160,99,.75);
	-webkit-transition:all .3s;transition:all .3s;
}
.hb-btn i{font-style:normal;margin-left:.52vw;}
.hb-btn:hover{color:#12211D;background:#E7C583;background:-webkit-linear-gradient(left,#E7C583,#C9A063);background:linear-gradient(135deg,#E7C583,#C9A063);}
.hb-btn.hb-ghost{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.45);box-shadow:none;font-weight:400;}
.hb-btn.hb-ghost:hover{color:#12211D;background:#fff;border-color:#fff;}

/* ---------- 品牌角标（右下，避开左侧文案与指示器） ---------- */
.hb-brand{
	position:absolute;right:7.8125vw;left:auto;bottom:2.9167vw;
	display:-webkit-box;display:-ms-flexbox;display:flex;
	-webkit-box-align:center;-ms-flex-align:center;align-items:center;
	font-size:.8854vw;letter-spacing:.24em;color:rgba(255,255,255,.78);
}
.hb-brand i{display:block;width:1.1458vw;height:1.1458vw;border:1px solid #C9A063;
	margin-right:.625vw;-webkit-transform:rotate(45deg);transform:rotate(45deg);}

/* ---------- 屏 2 · 标准指引规格面板 ---------- */
.hb-aside--spec{
	position:absolute;right:6.875vw;top:50%;width:22.3958vw;
	padding:1.5625vw 1.6667vw;border:1px solid rgba(201,160,99,.42);border-radius:.5208vw;
	background:rgba(9,22,18,.68);
	-webkit-transform:translateY(-50%);transform:translateY(-50%);
	color:#fff;text-align:left;
}
.hb-aside--spec .h{font-size:.7292vw;letter-spacing:.3em;color:#C9A063;margin-bottom:1.0417vw;}
.hb-aside--spec ul{margin:0;padding:0;list-style:none;}
.hb-aside--spec li{
	display:-webkit-box;display:-ms-flexbox;display:flex;padding:.6771vw 0;
	border-top:1px solid rgba(255,255,255,.1);
	font-size:.8854vw;line-height:1.5;color:rgba(255,255,255,.86);
}
.hb-aside--spec li:first-child{border-top:0;padding-top:0;}
.hb-aside--spec li em{font-style:normal;color:#C9A063;font-size:.7292vw;letter-spacing:.1em;
	margin-right:.7292vw;padding-top:.1em;}

/* ---------- 屏 4 · 底部三标签 ---------- */
.hb-aside--team{
	position:absolute;left:7.8125vw;right:7.8125vw;bottom:6.875vw;
	display:-webkit-box;display:-ms-flexbox;display:flex;color:#fff;text-align:left;
}
.hb-aside--team div{
	border-top:2px solid rgba(201,160,99,.55);padding-top:.7292vw;
	margin-right:3.6458vw;min-width:9.8958vw;
}
.hb-aside--team b{display:block;font-size:1.0417vw;font-weight:500;letter-spacing:.06em;color:#fff;}
.hb-aside--team span{font-size:.7552vw;letter-spacing:.04em;color:rgba(255,255,255,.6);}

/* ---------- 指示器：4 段细线，居中（左右两侧留给悬浮客服与留言弹窗） ---------- */
.banner.hb .pagination{
	position:absolute;z-index:20;left:0;right:0;bottom:3.125vw;top:auto;width:auto;text-align:center;
}
.banner.hb .swiper-pagination-switch{
	display:inline-block;width:2.0833vw;height:2px;min-height:2px;margin:0 0 0 .3125vw;
	border:0;border-radius:0;background:rgba(255,255,255,.35);
	-webkit-transition:all .4s;transition:all .4s;
}
.banner.hb .swiper-active-switch{width:3.125vw;background:#C9A063;}

/* ---------- 进场动效 ----------
   只做位移、不碰 opacity —— 无论脚本/动画是否执行、执行到哪一帧，
   标题文字永远是可见的，不存在「动画没跑完 → 文字消失」的失败态。
   ------------------------------------------------------------------------ */
@-webkit-keyframes hbItemIn{
	from{-webkit-transform:translateY(1.0417vw);}
	to{-webkit-transform:translateY(0);}
}
@keyframes hbItemIn{
	from{transform:translateY(1.0417vw);}
	to{transform:translateY(0);}
}
.hb-anim .swiper-slide-active .hb-item{
	-webkit-animation:hbItemIn .7s cubic-bezier(.22,.61,.36,1) both;
	animation:hbItemIn .7s cubic-bezier(.22,.61,.36,1) both;
}
.hb-anim .swiper-slide-active .hb-kicker{-webkit-animation-delay:.08s;animation-delay:.08s;}
.hb-anim .swiper-slide-active .hb-title {-webkit-animation-delay:.17s;animation-delay:.17s;}
.hb-anim .swiper-slide-active .hb-sub   {-webkit-animation-delay:.26s;animation-delay:.26s;}
.hb-anim .swiper-slide-active .hb-tags  {-webkit-animation-delay:.34s;animation-delay:.34s;}
.hb-anim .swiper-slide-active .hb-btns  {-webkit-animation-delay:.42s;animation-delay:.42s;}
.hb-anim .swiper-slide-active .hb-aside--spec,
.hb-anim .swiper-slide-active .hb-aside--team{-webkit-animation-delay:.42s;animation-delay:.42s;}
.hb-anim .swiper-slide-active .hb-brand {-webkit-animation-delay:.52s;animation-delay:.52s;}

/* 屏 4 文案上移，给底部三标签留位 */
.hb-s4 .hb-copy{top:46%;}

/* 关闭动效偏好 / 不支持动画的环境：直接显示终态 */
@media (prefers-reduced-motion: reduce){
	.hb-anim .swiper-slide-active .hb-item{-webkit-animation:none;animation:none;}
}

/* ==========================================================================
   首页头部：深色 Banner 之上把导航与 logo 转白
   滚动后（.scroll）自动恢复站点原有的浅底深字，不影响内页
   ========================================================================== */
.header.indexheader:not(.scroll) .pubNav ul li>a,
.header.indexheader:not(.scroll) .pubNav ul li.on>a,
.header.indexheader:not(.scroll) .phoneHeader p,
.header.indexheader:not(.scroll) .head-jian{color:#fff;}
.header.indexheader:not(.scroll) .pubNav ul li.on>a{color:#E7C583;}
.header.indexheader:not(.scroll) .logo img,
.header.indexheader:not(.scroll) .headerRight img{
	-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);
}

/* 兜底：万一首页头部没有 .indexheader 类，用 :has() 再兜一层 */
body:has(.banner.hb) .header:not(.scroll) .pubNav ul li>a,
body:has(.banner.hb) .header:not(.scroll) .pubNav ul li.on>a,
body:has(.banner.hb) .header:not(.scroll) .phoneHeader p{color:#fff;}
body:has(.banner.hb) .header:not(.scroll) .pubNav ul li.on>a{color:#E7C583;}
body:has(.banner.hb) .header:not(.scroll) .logo img,
body:has(.banner.hb) .header:not(.scroll) .headerRight img{
	-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);
}

/* ==========================================================================
   移动端 ≤767px：图片在上、文案在下的竖版排版
   ========================================================================== */
@media screen and (max-width:767px){
	.hb-slide{padding-top:0;}
	.hb-photo{position:relative;top:auto;left:auto;right:auto;bottom:auto;padding-top:88%;}
	.hb-mask{
		background:-webkit-linear-gradient(bottom, rgba(7,18,15,.92) 0%, rgba(7,18,15,.25) 46%, rgba(7,18,15,.05) 100%);
		background:linear-gradient(0deg, rgba(7,18,15,.92) 0%, rgba(7,18,15,.25) 46%, rgba(7,18,15,.05) 100%);
	}
	.hb-copy{
		position:relative;left:auto;top:auto;width:auto;
		padding:20px 18px 0;-webkit-transform:none;transform:none;
	}
	.hb-kicker{font-size:11px;margin-bottom:12px;}
	.hb-kicker .hb-sep{width:16px;margin:0 8px;}
	.hb-title{font-size:23px;}
	.hb-title .sm{font-size:14px;}
	.hb-title .hb-mini{font-size:15px;}
	.hb-sub{font-size:13px;margin-top:12px;line-height:1.7;}
	.hb-tags{margin-top:14px;}
	.hb-tags span{font-size:11px;padding:0 10px;}
	.hb-btns{margin-top:18px;}
	.hb-btn{height:42px;padding:0 20px;font-size:13px;border-radius:3px;margin-right:10px;
		box-shadow:0 6px 16px -6px rgba(201,160,99,.7);}
	.hb-btn i{margin-left:6px;}

	.hb-brand{position:relative;left:auto;right:auto;bottom:auto;padding:16px 18px 20px;font-size:11px;letter-spacing:.2em;}
	.hb-brand i{width:12px;height:12px;border-width:1px;margin-right:8px;}

	.hb-aside--spec{
		position:relative;right:auto;top:auto;width:auto;margin:18px 18px 0;padding:16px;
		border-radius:6px;-webkit-transform:none;transform:none;
	}
	.hb-aside--spec .h{font-size:11px;margin-bottom:10px;}
	.hb-aside--spec li{font-size:13px;padding:9px 0;}
	.hb-aside--spec li em{font-size:11px;margin-right:8px;}

	.hb-aside--team{
		position:relative;left:auto;right:auto;bottom:auto;
		display:block;padding:18px 18px 20px;
	}
	.hb-aside--team div{border-top:1px solid rgba(201,160,99,.55);padding-top:10px;margin:0 0 12px;min-width:0;}
	.hb-aside--team b{font-size:14px;}
	.hb-aside--team span{font-size:11px;}

	.banner.hb .pagination{right:0;bottom:auto;top:calc(88% - 26px);text-align:center;left:0;}
	.banner.hb .swiper-pagination-switch{width:22px;margin:0 2px;}
	.banner.hb .swiper-active-switch{width:34px;}
}