@charset "gb2312";
/* =========================================================
   行业应用版块（复刻自参考站交互特效）
   鼠标划过下方行业小图标 -> 背景图与左侧文字切换
   样式以 #hyApp 限定作用域，不影响其他版块
   ========================================================= */

#hyApp.box3 { position: relative; overflow: hidden; background: #1b1b1b; }
#hyApp .hy { position: absolute; left: 0; top: 4.5vw; z-index: 9; width: 100%; }
#hyApp .hxbt { text-align: center; }
#hyApp .hxbt .wz { color: #fff; font-size: 16px; font-family: Arial; text-transform: uppercase; letter-spacing: 4px; }
#hyApp .hxbt .wz2 { color: #fff; font-size: 42px; font-weight: bold; line-height: 1.35; }
#hyApp .qie { overflow: hidden; display: none; }
#hyApp .qie.clicked { display: block; }
#hyApp .qie li { position: relative; overflow: hidden; }
#hyApp .qie li:before { content: ""; width: 100%; height: 100%; background: rgba(0,0,0,.62); position: absolute; left: 0; top: 0; z-index: 1; }
#hyApp .qie li .img img { width: 100%; display: block; }
#hyApp .qie.clicked li .img img { animation: hyScaleIn 1.6s forwards cubic-bezier(0.4, 0, 0.49, 0.93); -webkit-animation: hyScaleIn 1.6s forwards cubic-bezier(0.4, 0, 0.49, 0.93); }
@keyframes hyScaleIn { from { transform: scale(1.08); } to { transform: scale(1); } }
@-webkit-keyframes hyScaleIn { from { -webkit-transform: scale(1.08); } to { -webkit-transform: scale(1); } }
#hyApp .qie li .det { position: absolute; left: 0; top: 12vw; z-index: 9; width: 100%; text-align: center; }
#hyApp .qie li .det .wh1200 { position: relative; text-align: center; }
#hyApp .qie li .wz { font-size: 18px; line-height: 38px; overflow: hidden; color: #fff; max-width: 780px; margin: 0 auto; text-align: center; }
#hyApp a.idxMore3 { display: inline-block; background: #215cc8; margin-top: 2vw; color: #fff; padding: 0 40px; line-height: 44px; border-radius: 40px; font-size: 15px; text-decoration: none; }
#hyApp a.idxMore3:hover { background: #f6a91b; }
#hyApp .tabli2 { width: 60%; position: absolute; left: 20%; z-index: 9; bottom: 0; display: -webkit-box; display: -webkit-flex; display: flex; margin: 0; list-style: none; }
#hyApp .tabli2 li { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 30px 0; text-align: center; position: relative; cursor: pointer; box-sizing: border-box; }
#hyApp .tabli2 li + li:after { display: block; content: ""; width: 1px; height: 40%; top: 50%; transform: translateY(-50%); position: absolute; background: rgba(255,255,255,.5); left: 0; }
#hyApp .tabli2 li .img { width: 64px; margin: 0 auto; background: #fff; border-radius: 10px; overflow: hidden; }
#hyApp .tabli2 li .img img { width: 100%; display: block; transition: all .8s; }
#hyApp .tabli2 li:hover .img img,
#hyApp .tabli2 li.cur .img img { transform: rotateY(360deg); }
#hyApp .tabli2 li .wz { color: #fff; font-size: 16px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 12px; text-align: center; display: block; }

/* ---------- Tablet (<=990px) ---------- */
@media (max-width: 990px) {
  #hyApp .hxbt .wz2 { font-size: 30px; }
  #hyApp .qie li .det { top: 12vw; }
  #hyApp .qie li .wz { max-width: 90%; font-size: 16px; line-height: 32px; }
  #hyApp a.idxMore3 { margin-top: 2vw; }
  #hyApp .tabli2 { width: 80%; left: 10%; }
  #hyApp .tabli2 li .img { width: 46px; }
  #hyApp .tabli2 li .wz { font-size: 14px; }
}

/* ---------- Mobile (<=767px) ---------- */
@media (max-width: 767px) {
  #hyApp .hy { top: 3.5vw; }
  #hyApp .hxbt .wz2 { font-size: 24px; }
  #hyApp .qie li .img img { min-height: 400px; }
  #hyApp .qie li .det { top: 92px; }
  #hyApp .qie li .wz { width: 100%; font-size: 14px; line-height: 30px; padding: 0 20px; box-sizing: border-box; text-align: center; }
  #hyApp a.idxMore3 { line-height: 38px; padding: 0 26px; font-size: 14px; margin: 16px auto 0; display: block; width: -webkit-fit-content; width: fit-content; }
  #hyApp .tabli2 { width: 100%; left: 0; }
  #hyApp .tabli2 li { padding: 16px 0; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
  #hyApp .tabli2 li .img { width: 34px; border-radius: 6px; }
  #hyApp .tabli2 li .wz { font-size: 12px; margin-top: 8px; }
}