/* ============================================================
   web.css — 喉升音官网前台样式（自主重写，视觉与旧站 1:1）
   基调：墨黑 #1e1e1e + 琥珀金 #fd9b3a；字体沿用旧站思源黑体栈
   结构：头部导航 / 轮播 / 微信浮层 / 资质翻转画廊 / 研发叙事 / 联系卡片 / 深色页脚
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
/* 与旧站一致：旧站引入 Bootstrap3 将根字号置 10px，全文 rem 均按 10px 基准 */
html{font-size:10px}
body{margin:0;padding:0;font:14px/1 "思源黑体","Source Han Sans CN";font-style:normal;
  color:#fff;background-color:#1e1e1e;overflow:auto}
a{color:#fff;text-decoration:none}
img{vertical-align:middle;border:0}
ul{list-style:none}
p{line-height:18px;margin:0 0 10px}
h1,h2,h3{margin:20px 0 10px;font-weight:500;line-height:1.1}
h4,h5,h6{margin:10px 0;font-weight:500;line-height:1.1}
h2{font-size:30px}h3{font-size:24px}h4{font-size:18px}h5{font-size:14px}
.img-bg{width:100%}

/* ---------- 滚动条（与旧站一致） ---------- */
::-webkit-scrollbar{width:6px;height:6px;background-color:#F5F5F5}
::-webkit-scrollbar-thumb{border-radius:0;background-color:gray}

/* ---------- 整页缩放容器（复刻旧站 public.js：1366 设计稿→视口宽等比放大） ---------- */
/* 旧站由 container-fluid 的 overflow-x:hidden 吞掉 Bootstrap 行负边距溢出，这里同理，
   否则 1396px 宽的行会撑出横向滚动条，反过来影响缩放基准 */
.body_container{width:1366px;transform-origin:left top 0;overflow-x:hidden}

/* ---------- 头部导航 ---------- */
/* 旧站头部是 iframe（行内元素，坐在文本行盒上），iframe 底部有约 1px 行盒 descent，
   全站内容因此始于 71px 而非 70px；这里用 1px 下边距复刻该偏移。
   overflow:hidden 必须保留：.menu 补回浏览器默认 12px 边距后浮动盒变 84px，会溢出 70px 的
   head，把下方建立 BFC 的区块整体下推 14px（旧站是固定高 iframe，不存在该问题） */
.head{height:70px;opacity:.7;margin-left:160px;margin-bottom:1px;overflow:hidden}
.head .logo{width:150px;float:left;margin-top:10px}
.head .logo img{width:90px}
/* 旧站 head.html 只链 main.css（无 * 全局 reset），ul.menu 保留浏览器默认 margin:1em 0（字号 12px → 12px），
   菜单因此比 logo 低 12px；本站 * 已清零，这里补回该默认边距 */
.menu{padding-left:0;height:60px;float:left;font-size:12px;margin:12px 0}
.menu li{float:left;position:relative;display:block;padding:5px 15px;text-align:center}
.menu li:hover,.menu li.active{border-bottom:3px solid #fd9b3a}
.menu li:hover a,.menu li.active a{color:#fd9b3a}
.menu li a{line-height:20px;position:relative;display:block}
.phoneGif{width:250px;float:right;margin-top:18px;font-size:12px;line-height:35px;color:#fd9b3a}
.phoneGif img{width:35px;float:left;margin-right:5px}

/* ---------- 首页轮播（淡入淡出 500ms / 3000ms） ---------- */
.pb-carouselWarp{position:relative;max-width:100%;height:493px;overflow:hidden;margin-left:auto;margin-right:auto}
.pb-carouselWarp .pb-carousel{position:relative;height:100%}
.pb-carouselWarp .pb-carousel li{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .5s}
.pb-carouselWarp .pb-carousel li img{width:100%;height:100%;vertical-align:middle}
.pb-carouselWarp .pb-carousel .pb-this{opacity:1;left:0;z-index:2}
.pb-carouselWarp .pb-carousel-ind{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:5}
.pb-carouselWarp .pb-carousel-ind li{float:left;width:10px;height:10px;border-radius:50%;
  background-color:#999;margin:0 5px;cursor:pointer;color:transparent}
.pb-carouselWarp .pb-carousel-ind .pb-this{background-color:#fff}
.pb-carouselWarp .pb-arrow{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;
  border-radius:50%;background:#000;cursor:pointer;border:none;opacity:.5;z-index:5;
  transition:opacity .5s,visibility .5s}
/* 旧站 arrowtype:'move'：鼠标移入淡入、移出淡出（500ms），淡出后不可点 */
.pb-carouselWarp .pb-arrow-off{opacity:0;visibility:hidden}
/* 注意权重：必须与基础规则同为双类（.pb-carouselWarp .pb-arrow-prev），
   否则单类选择器压不过 .pb-carouselWarp .pb-arrow 的 background:#000，箭头图会被黑底盖掉只剩圆 */
.pb-carouselWarp .pb-arrow-prev{left:20px;background:#000 url(https://file.houshengyin.com/media/b5164cd12156bb6500b955a2a60dd869316352568bff05e8d66582dd2430da63.png) no-repeat center}
.pb-carouselWarp .pb-arrow-next{right:20px;background:#000 url(https://file.houshengyin.com/media/8e9fa5ae14b320dec4776a581554f8f157cdf69d95e22873cf6a1d727e7a40d8.png) no-repeat center}

/* ---------- 微信浮层 + 流光 ---------- */
.wechart-pannel{width:270px;position:absolute;margin-top:-200px;right:3%;color:#fff;z-index:999999}
.wechart-pannel:hover .wxCode{display:block}
.wechart-pannel .wxCode{display:none;width:220px;position:absolute;top:0}
.wechart-pannel .wxText{width:150px;position:absolute;margin-top:132px;top:0}
.logo_flash{margin:0 auto;transition-duration:2s;height:200px;width:100px;width:auto;overflow:hidden}
.logo_flash:before{content:"";position:absolute;width:200px;height:20px;background-color:rgba(255,255,255,.6);
  transform:rotate(-45deg);animation:searchLights 3s linear 0s infinite}
@keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}

/* ---------- 首页底部大图 + 滚动浮现文案 ---------- */
#div_bottom{display:none;position:absolute;top:340px;left:0;right:0;text-align:center;font-size:12px;color:#333}
#div_bottom p{margin-bottom:9px}
.animated{animation-duration:1s;animation-fill-mode:both}
.slow{animation-duration:2s}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
.fadeInUp{animation-name:fadeInUp}

/* ---------- 资质荣誉：翻转画廊 ---------- */
.achievements_title1{font-size:20px;font-weight:bold;line-height:30px;height:30px;color:#F7AB41;text-align:center}
.achievements_title1 span{display:inline-block;width:20%;margin:0;height:10px;border-top:solid 1px #F7AB41}
.achievements_title1 div{display:inline-block;padding:0 2%}
.achievements_title2{font-size:20px;font-weight:bold;line-height:30px;height:30px;color:#F7AB41;text-align:center}
.achievements_title2 span{display:inline-block;width:14px;height:14px;background-color:#F7AB41}
.achievements_title2 div{display:inline-block;padding:30px 10px 0 10px}
.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}
.swiper-wrapper{display:flex;position:relative;width:100%;height:100%;transition-property:transform;box-sizing:content-box}
.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;
  background-size:contain;background-position:center;background-repeat:no-repeat}
#rypb_top{height:270px;width:510px;padding:0 50px}
#rypb_bottom{height:102px;width:410px;padding-top:30px;padding-bottom:10px;box-sizing:border-box}
#zzzs_top{height:585px;width:510px;padding:0 50px}
#zzzs_bottom{height:157px;width:410px;padding-top:40px;padding-bottom:10px;box-sizing:border-box}
#gszz_top{height:585px;width:510px;padding:0 50px}
#gszz_bottom{height:147px;width:410px;padding-top:20px;padding-bottom:10px;box-sizing:border-box}
#cpzz_top{height:585px;width:510px;padding:0 50px}
#cpzz_bottom{height:157px;width:410px;padding-top:40px;padding-bottom:10px;box-sizing:border-box}
.swiper_text1{margin-top:-50px;font-size:16px;line-height:30px;height:30px;color:#F7AB41;
  text-align:center;width:810px;margin-left:-200px}
.swiper_text2{margin-top:-50px;font-size:16px;line-height:25px;color:#444;text-align:center;width:810px;margin-left:-200px}
.gallery-thumbs{overflow:hidden;scrollbar-width:none}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumbs .swiper-wrapper{height:100%}
.gallery-thumbs .swiper-slide{height:100%;opacity:.4;cursor:pointer;transition-property:transform,opacity}
.gallery-thumbs .swiper-slide-thumb-active{opacity:1}
.swiper-button-prev,.swiper-button-next{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;
  z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}
.swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}
.swiper-button-black.swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}
.swiper-button-black.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}
/* 旧站 Swiper flip 模式给容器挂 swiper-container-flip 类把 overflow 放开（swiper.css 673 行），
   slide 里的证书名 swiper_text1 靠 margin-top:-50px 顶出画廊顶边显示，不加这条会被裁掉 */
.gallery-top{overflow:visible}
/* 旧站翻到头时 Swiper 给箭头挂 swiper-button-disabled（首张左箭头 0.35 淡显、不可点） */
.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}
.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute;width:100%;height:4px;left:0;bottom:0}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;bottom:0;width:100%;height:100%;transform-origin:left top}
.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#ffffff}
.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#333333}

/* ---------- 研发生产 ---------- */
/* 旧站这些区块都是 Bootstrap 行(负边距→1396px)里的 col，百分比按 1396 解析；
   本页无栅格，故直接折算成 1366 设计稿下的等效像素 */
.company_info{text-align:center;color:#333}
.company_info img{width:40%;border-radius:50%}
.company_info h2{color:#fd9b3a;margin:20px 0 10px}
.company_info p{margin:0 0 10px}
.doctorInfo{position:absolute;color:#272727;width:489px;left:613px;bottom:0;padding-bottom:15px}
.doctorInfo p{margin-bottom:5px}
.doctorInfo h3{font-size:20px;font-weight:bold;margin:20px 0 10px}
.doctorInfo h4{font-size:14px;color:#777;margin:10px 0}
.patentInfo{color:#333;margin-top:100px;width:66.6667%;margin-left:16.6667%;padding:0 15px}
.patentItem{color:#fff;text-align:center;background-size:cover;font-size:1.6rem;padding-top:20px;width:150px;height:200px}
.patentItem1{background-image:url(https://file.houshengyin.com/media/6ffe35441c13876ceeb82560a5d1c9e8f03c4b0287a5feaec1df39d9b48e235a.png)}
.patentItem2{background-image:url(https://file.houshengyin.com/media/f4c07a477e9134fb745d856fea42dd97714b92bc2f8d803a294d0b58c9e16b0a.png)}
.patentItem3{background-image:url(https://file.houshengyin.com/media/c1c97b73d579829ff9f3dfc686764e81c0ea9fe92c1a6152c068422efb491ea1.png)}
.patentInfo .patentItem .number{width:120px;height:120px;border-radius:120px;line-height:120px;color:#fd9b3a;
  font-size:3.5rem;background-color:#fff;margin-bottom:15px;margin-left:15px}
.patentTxt{text-align:center;color:#333;font-size:1.5rem;position:absolute;bottom:40px;width:100%;padding:0 15px}
.historyImg{position:absolute;bottom:17%;left:0;right:0;text-align:center}
/* 旧站发展历程图是 col-xs-6（含 15px 左右内距，border-box 下实际渲染 653px），此处补齐 */
.historyImg img{padding:0 15px}
.yellowbg{background-color:#fd9b3a;color:#fff}
.yellow{color:#fd9b3a}
.zhuanlibg{position:relative;height:400px;margin:0 -15px;overflow:hidden;
  background:linear-gradient(#fff 0%,#fff 50%,#dadada 50%)}
.ks-fs-12{font-size:12px!important}
.ks-fs-14{font-size:14px!important}
.ks-color-gray{color:#777}
.ks-mt-15{margin-top:15px!important}
.ks-mb-5{margin-bottom:5px!important}
.ks-fw-bold{font-weight:bold}
.yeollowbg-width1{display:inline-block;width:90px;text-align:center}
.yeollowbg-width2{display:inline-block;width:70px;text-align:center}
/* 旧站地图两段文字图宽 30%（按 1396 行解析=419px），左侧距按行含 -15 偏移折算 */
.companyText1{opacity:0;width:419px;position:absolute;top:22%;left:197px;
  animation:fadeInUp 2s ease 0s 1 alternate forwards}
.companyText2{opacity:0;width:419px;position:absolute;top:34%;right:165px;
  animation:fadeInUp 2s ease 1s 1 alternate forwards}

/* ---------- 联系我们 ---------- */
/* 旧站为 Bootstrap 栅格，按 1366 设计稿折算：卡片行是 row+col-xs-12 且内联 margin:auto
   覆盖了 row 的负边距 → 行内容 1336；col-xs-8 = 890.7px；图标格 col-sm-1(8.333%) 覆盖 col-xs-2 */
.ct-cardwrap{position:absolute;top:220px;left:0;right:0;padding:0 15px}
.ct-card{width:66.6667%;margin-left:16.6667%;background-color:#fff;padding-left:15px;padding-right:0;
  box-shadow:5px 5px 20px #bbb;display:flex}
.ct-left{width:50%;padding:0 0 0 15px}
.ct-mapwrap{padding:25px 15px}
/* 地图：旧站百度地图在 HTTPS 下瓦片被拦/模块被屏蔽，无法复现；按旧站当前渲染结果截图为静态图 */
/* 旧站该行 img 是浮动 col，被前方浮动的地图容器推至其底边（490）→ 二维码与地图视觉间距为 0 */
.mapimg{display:block;width:100%;height:220px;margin:0 -15px}
.ct-qrrow{display:flex;margin:0 -15px 0 -15px}
.ct-qrrow figure{width:25%;margin:0}
.ct-qrrow img{width:100%;padding:0 10px 0 15px}
.ct-qrlabel{display:flex;margin:3px -15px 0 -15px;color:#272727}
.ct-qrlabel div{width:25%;text-align:center;margin-top:2px;padding-left:5px;padding-right:0;font-size:12px}
.ct-right{width:50%}
.contactPannel{background:#efefef;color:#272727;font-size:1.1rem;line-height:20px;padding:20px 10px 30px 15px}
.contactPannel .icon{width:25px}
/* 合同logo：旧站是 row > img.col(width:28%)。28% 相对行加负边距后的 452.8 宽解析 = 124px，
   col 的 15px 左右内距使内容宽 94px，高度按内容宽/自然比 = 45.47px（object-fit 默认 fill 压扁）；
   margin-left:-15px 抵消行负边距，左缘落在面板内容左（690.5） */
.ct-logo{width:30.04%;margin-left:-15px;padding:0 15px}
.ct-logo2{margin-top:10px}
.ct-row{display:flex;margin:10px -15px 0 -15px}
/* 旧站 logo 与首行间距为 5px（其余行 10px） */
.ct-rowfirst{margin-top:5px}
.ct-rowflat{margin-top:0}
.ct-ico{width:8.333%;padding:0 15px}
/* 旧站 p 行高 18px、段距 10px（main.css p{line-height:18px}） */
.ct-txt{width:83.333%;padding:0 15px;font-size:14px;line-height:18px}
.ct-txt p{margin:0 0 10px}
.ct-t{font-weight:bold}
.ct-d{font-size:11px}

/* ---------- 页脚 ---------- */
.foot{text-align:center;padding-top:2%;color:#969696;min-height:270px}
.foot div{line-height:25px;font-size:1.2rem}
.footlogo{width:66.6667%;margin-left:16.6667%;border-bottom:thin solid #4a4a4a;padding:12px 0;margin-bottom:16px}
.footlogo img{width:10%}
#img_backtotop{position:fixed;bottom:50px;right:50px;z-index:99999999999;display:none;cursor:pointer}

/* ---------- 研发数据行 / 团队行 / 专利行布局（对应旧站 col-xs 栅格） ---------- */
/* col 的 15px 左右内距一并复刻：公司信息图宽 40% 是按去掉内距后的内容宽解析的 */
.stat-row{display:flex;position:absolute;bottom:60px;left:0;right:0}
.stat-cell{width:16.6667%;padding:0 15px;text-align:center;color:#333}
.stat-cell.first{margin-left:25%}
.team-row{display:flex;position:absolute;bottom:13%;left:101px;width:1163px;padding:0 15px}
.team-cell{width:16.6667%;padding:0 15px;text-align:center;color:#333}
.team-cell.first{margin-left:16.6667%}
.patent-row{display:flex}
.patent-cell{width:16.6667%;margin-left:8.333%;padding:0 15px}
.patent-cell.mid{margin-left:16.666%}

/* ---------- 翻转画廊动画（1:1 复刻旧站 Swiper 4.5 flip 实测行为，clickprobe2 量得） ----------
   旧站 flip 容器没有 perspective（1200px 只属于 -3d 类），翻转是正交渲染：卡片原地绕 Y 轴
   旋转、宽度按余弦压缩到 0 再展开，正反面在 90° 由 backface-visibility:hidden 无缝交接；
   所有 slide 叠放在同一位置（Swiper 靠 tx=-offset 抵消 flex 排列，这里直接绝对定位等价实现），
   时长 300ms（Swiper 默认 speed）。绝不加 translateX 位移——那会出现截图里「卡片飞向两侧」
   的白色竖条，旧站没有这种效果。 */
.gallery-top .swiper-wrapper{display:block}
.gallery-top .swiper-slide{position:absolute;left:0;top:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .3s ease}
.gallery-thumbs .swiper-wrapper{transition:transform .3s ease}
/* 缩略条可拖拽（旧站 freeMode + grabCursor） */
.gallery-thumbs{cursor:grab;touch-action:pan-y}
.gallery-thumbs.dragging{cursor:grabbing}