.fz12 { font-size: 12px; }

.header { position: relative; padding-bottom: 4rem; overflow: hidden; color: #ffffff; background: #0C30AB url("xmt-bg.jpg") no-repeat center 0; }
.header-num { color: #FFFCBC; font-weight: bold; }
.header-num-box { display: flex; gap: .3rem; align-items: baseline; justify-content: space-evenly; line-height: 1; }

.mtype { width: 69%; }
.mtype-item { width: 9.0625rem; height: 9.0625rem; border: 8px solid #fff; background: linear-gradient(#1168DB, #11B7DB); justify-content: center; gap: .5rem; }
.mtype-item:first-of-type, .mtype-item:last-of-type { margin-top: -4.5rem; }
.mtype-text { font-weight: bold; display: flex; flex-direction: column; gap: .3rem; }

.xmt-head-wx { position: absolute; left: 13.5%; top: 29%; }
.xmt-head-wb { position: absolute; left: 80%; top: 25%; }
.xmt-head-chat { position: absolute; left: 7.5%; top: 58%; }
.xmt-head-dy { position: absolute; left: 87%; top: 55%; }
.xmt-total-box { height: 88%; }
.xmt-intro { margin-top: -2.5rem; }
.xmt-title { display: flex; gap: .5rem; align-items: flex-end; position: relative; }
.xmt-title-text { position: relative; }
.xmt-title-text:before { content: ' '; background: var(--bs-primary); transform: skew(-17deg, 0deg); position: absolute; width: 100%; height: 100%; border-radius: .3rem; }
.xmt-title-text span { position: relative; color: white; }
.xmt-title:after { content: ''; flex: 1; padding: .5rem; background: #E3F0FF; transform: skew(-17deg, 0deg); }
.xmt-title2 { padding-left: .5rem; display: flex; gap: .5rem; align-items: flex-end; position: relative; }
.xmt-title2:before { content: ' '; background: var(--bs-primary); transform: skew(-17deg, 0deg); position: absolute; width: 1.6rem; height: 100%; }
.xmt-title2:after { content: ' '; background: #A2CDFC; transform: skew(-17deg, 0deg); position: absolute; width: .8rem; height: 100%; left: 2rem; }
.xmt-title2-text { position: relative; left: 3.7rem; flex: 1; display: flex; }
.xmt-title2-text span { padding-left: .8rem; }
.xmt-title2-text:after { content: ''; position: absolute; z-index: -1; flex: 1; height: 63%; bottom: 0; right: 4rem; left: -1rem; background: #F2F8FF; transform: skew(-17deg, 0deg); }
.xmt-title2 .qrcode-tips { position: relative; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: var(--bs-border-radius); cursor: pointer; }
.xmt-title2 .qrcode-tips .iconfont { color: #fff; font-size: 22px; }
.xmt-title2 .qrcode-tips:hover .qrcode-box { display: block; }
.xmt-title2 .qrcode-box { display: none; position: absolute; z-index: 9999; width: calc(100% - 1.5rem); bottom: 3.6rem; min-width: 160px; text-align: center; background: linear-gradient(#11B7DB, #1168DB); padding: .5rem 0; gap: .5rem; border-radius: var(--bs-border-radius); }
.xmt-title2 .qrcode-box-title { font-weight: bold; font-size: 16px; color: #fff; }
.xmt-title2 .qrcode-box img { margin: .5rem 0; width: 80%; max-height: 160px; }
.xmt-title2 .qrcode-box-scan { color: #ffffff; }
.xmt-list-logo { position: relative; width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; padding: 6px; background: #fff; }
.xmt-list-logo img { border-radius: 50%; border: 1px solid var(--bs-border-color); }
.xmt-list > * { position: relative; display: flex; flex-direction: column; gap: .5rem; align-items: center; padding-bottom: 1rem; }
.xmt-list > *:after { content: ''; position: absolute; bottom: 0; z-index: -1; width: calc(100% - 1.5rem); height: 77%; background: #F3F9FF; border-radius: var(--bs-border-radius); }
.xmt-list > *:not(a):hover .qrcode-box { display: block; }
.xmt-list > *:hover:after { background: #daecff; }
.xmt-list > * .qrcode-tips { color: #fff; background: #A3CFFB; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--bs-border-radius); cursor: pointer; /* &:hover { .qrcode-box{ display: block; } }*/ }
.xmt-list > * .qrcode-tips .iconfont { color: #fff; font-size: 22px; }
.xmt-list > * .qrcode-box { display: none; position: absolute; z-index: 9999; width: calc(100% - 1.5rem); bottom: 3.6rem; min-width: 160px; text-align: center; background: linear-gradient(#11B7DB, #1168DB); padding: .5rem 0; gap: .5rem; border-radius: var(--bs-border-radius); }
.xmt-list > * .qrcode-box-title { font-weight: bold; font-size: 16px; color: #fff; }
.xmt-list > * .qrcode-box img { margin: .5rem 0; width: 80%; max-height: 160px; }
.xmt-list > * .qrcode-box-scan { color: #ffffff; }
.xmt-list > a .qrcode-tips:hover .qrcode-box { display: block; }

.tab-active-bg { display: flex; }
.tab-active-bg .tab-hd { flex-direction: column; flex-shrink: 0; display: flex; }
.tab-active-bg .tab-hd > * { cursor: pointer; display: flex; gap: 1rem; padding: .5rem; align-items: center; position: relative; border-radius: var(--bs-border-radius); background: #F3F9FF; }
.tab-active-bg .tab-hd > * .wx-logo { width: 3.625rem; height: 3.625rem; border-radius: var(--bs-border-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tab-active-bg .tab-hd > * .wx-name { font-weight: bold; font-size: 18px; }
.tab-active-bg .tab-hd .qrcode-tips { position: absolute; right: 6px; top: 6px; z-index: 99999; color: #fff; background: #A3CFFB; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--bs-border-radius); cursor: pointer; }
.tab-active-bg .tab-hd .qrcode-tips .iconfont { color: #fff; font-size: 22px; }
.tab-active-bg .tab-hd .qrcode-tips:hover .qrcode-box { display: block; }
.tab-active-bg .tab-hd .qrcode-box { display: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); position: absolute; left: 100%; top: -0.5rem; margin-left: 1.5rem; min-width: 160px; text-align: center; background: linear-gradient(#11B7DB, #1168DB); padding: .5rem 0; gap: .5rem; border-radius: var(--bs-border-radius); /* &:after{ font-family: "iconfont"; content: "\eca0"; width: 2rem; height: 2rem; position: absolute; right: -1rem; top: -1rem; background:#e5e5e5; color: #43474e; font-size: 1rem; border-radius: 50%; font-weight: bold; text-align: center; padding-top: .2rem; border: 1px solid #fff; }*/ }
.tab-active-bg .tab-hd .qrcode-box-title { font-weight: bold; font-size: 16px; color: #fff; }
.tab-active-bg .tab-hd .qrcode-box img { margin: .5rem 0; width: 80%; max-height: 160px; }
.tab-active-bg .tab-hd .qrcode-box-scan { color: #ffffff; }
.tab-active-bg .tab-hd > .active { background: var(--bs-primary) url(xmt-wx-hover.png) no-repeat center bottom; background-size: 100% 100%; color: #fff; }
.tab-active-bg .tab-hd > .active:after { content: ''; position: absolute; left: 100%; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 7px solid #125cb1; }
.tab-active-bg .tab-hd > .active .qrcode-tips { background: #fff; z-index: 999999; }
.tab-active-bg .tab-hd > .active .qrcode-tips .iconfont { color: var(--bs-primary); }
.tab-active-bg .tab-content { height: 730px; background: #F8FBFF; overflow: hidden; }
.tab-active-bg .news-list li { height: 4.59375rem; border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.3); }
.tab-active-bg .news-list li:first-of-type { height: 200px; border-bottom: 0; }
.tab-active-bg .news-list li:first-of-type a { width: 100%; height: 100%; position: relative; }
.tab-active-bg .news-list li:first-of-type a img { width: 100%; height: 100%; object-fit: fill; }
.tab-active-bg .news-list li:first-of-type a img:hover { transform: scale(1.1); transition: .5s; }
.tab-active-bg .news-list li:first-of-type a div { line-height: 2.5; position: absolute; width: 100%; left: 0; bottom: 0; padding: 0 .5rem; color: #ffffff; background: rgba(var(--bs-dark-rgb), 0.8); }
.tab-active-bg .news-list li:last-of-type { border-bottom: 0; }
.tab-active-row .tab-hd > *.active > * { color: #fff; }
.tab-active-row .tab-hd > *.active > *:after { background-color: var(--bs-primary); }
.tab-active-row .tab-hd > * > * { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tab-active-row .tab-hd > * > * > * { position: relative; z-index: 1; }
.tab-active-row .tab-hd > * > *:after { content: ''; position: absolute; width: 100%; height: 100%; background: #F1F7FF; border-radius: var(--bs-border-radius); transform: skew(-17deg, 0deg); }
.tab-active-row .tab-hd > * .pic { width: 2.25rem; height: 2.25rem; }
.tab-active-row .tab-hd > * img { object-fit: cover; }

.news-list li { overflow: hidden; display: flex; justify-content: space-between; align-items: center; }
.news-list li a { flex: 1; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-list li a:hover { color: var(--bs-primary); }
.news-list-pic li { margin-top: 15px; height: 6.875rem; }
.news-list-pic li:first-of-type { margin-top: 0; }
.news-list-pic li:hover .text { color: var(--bs-primary); }
.news-list-pic li a { padding: 1rem; background: #F8FBFF; overflow: hidden; display: flex; align-items: center; gap: 1rem; }
.news-list-pic li a:hover { background: rgba(var(--bs-primary-rgb), 0.1); }
.news-list-pic li a:hover img { transform: scale(1.2); transition: .3s; }
.news-list-pic li a .pic { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 6.875rem; height: 4.5rem; overflow: hidden; }
.news-list-pic li a .pic img { width: 100%; height: 100%; object-fit: fill; }
.news-list-pic li a .text { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.scale80 { transform: scale(0.8); }

@media (max-width: 991.98px) { .logo img { max-width: 80%; }
  .header-num { font-size: 1rem !important; }
  .mtype { width: 100%; }
  .tab-active-bg .tab-hd > * { margin: .5rem; width: calc(33.333333% - 1rem); gap: .3rem; }
  .tab-active-bg .tab-hd > *.active:after { content: ''; position: absolute; left: 50%; margin-left: -7px; top: auto; bottom: -14px; border: 7px solid transparent; border-top: 7px solid #125cb1; }
  .tab-active-bg .tab-hd > * .wx-logo { width: 3rem; height: 3rem; }
  .tab-active-bg .tab-hd > * .wx-name { font-size: 15px; }
  .tab-active-bg .tab-hd .qrcode-box { position: fixed; transition: all .3s; left: 50%; top: auto; transform: translate(-50%, 0%); margin-left: 0; z-index: 999999; }
  .tab-active-bg .tab-content { height: auto; }
  .tab-active-bg .news-list li { height: auto; padding: .5rem 0; }
  .tab-active-bg .news-list li a .pic { height: auto; }
  .tab-active-bg .news-list li:first-of-type a img { max-width: 100%; }
  .tab-active-row .tab-hd { transform: scale(0.85); }
  .tab-active-row .tab-hd > * img { max-width: 80%; }
  .xmt-logo { transform: scale(0.65); }
  .xmt-total-box { font-size: 1rem !important; /*top:50%;*/ font-weight: normal !important; }
  .xmt-head-wx, .xmt-head-wb, .xmt-head-chat, .xmt-head-dy { width: 2.5rem; }
  .xmt-head-wx { top: 20%; left: 23%; }
  .xmt-head-wb { top: 20%; left: auto; right: 23%; }
  .xmt-head-chat { top: 50%; left: 10%; }
  .xmt-head-dy { top: 50%; left: auto; right: 10%; }
  .xmt-list a .qrcode-tips:hover .qrcode-box { display: none; }
  .xmt-title-text { font-size: 1rem !important; }
  .xmt-title-sub img { max-width: 100%; transform: scale(0.65); }
  .xmt-title2 { transform: scale(0.8); transform-origin: left; }
  .xmt-title2-text:after { right: 0; }
  .xmt-title2 .qrcode-tips .iconfont { font-size: 28px; }
  .xmt-list-logo img { max-width: 100%; }
  .news-list-pic li { height: auto; margin-top: 10px; }
  .news-list-pic li a { gap: .5rem; padding: .5rem; }
  .news-list-pic li a .pic { height: 3.5rem; } }
@media (max-width: 767.98px) { .mtype-item:first-of-type, .mtype-item:last-of-type { margin-top: -2rem; }
  .mtype .iconfont { line-height: 1; }
  .mtype-item { width: 5.5rem; height: 5.5rem; border: 3px solid #fff; gap: 0; }
  .mtype-text { font-size: 12px; font-weight: normal; gap: 0; }
  .mtype-text .header-num { font-size: 1rem !important; }
  .mtype-text .header-num-box { gap: 0; justify-content: center; }
  .tab-active-bg .tab-hd > * { flex-direction: column; }
  /*.xmt{ &-head{ &-wx{ top: 20%; left: 23%;} &-wb{ top: 20%; left: auto; right:23%;} &-chat{ top: 45%; left:10%;} &-dy{ top: 45%; left: auto; right:10%;} } }*/ }
@media (max-width: 575.98px) { .xmt-head { /*&-wx{ top: 20%; left: 23%;}
&-wb{ top: 20%; left: auto; right:23%;}
&-chat{ top: 45%; left:10%;}
&-dy{ top: 45%; left: auto; right:10%;}*/ }
  .xmt-head-wx { top: 35%; left: 23%; }
  .xmt-head-wb { top: 35%; left: auto; right: 23%; }
  .xmt-head-chat { top: 55%; left: 10%; }
  .xmt-head-dy { top: 55%; left: auto; right: 10%; } }
.xmt-head-wx, .xmt-head-wb, .xmt-head-chat, .xmt-head-dy { animation: bounce 1s infinite alternate; mix-blend-mode: plus-lighter; }

.xmt-head-wx { animation-delay: 0s; }

.xmt-head-wb { animation-delay: 0.2s; }

.xmt-head-chat { animation-delay: 0.4s; }

.xmt-head-dy { animation-delay: 0.6s; }

@keyframes bounce { from { transform: translateY(0); }
  to { transform: translateY(-10px); } }
.xmt-logo { animation: fadeInDown 1s ease-out; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); } }
.xmt-title-sub { animation: fadeInUp 1s ease-out; animation-delay: 0.3s; opacity: 0; animation-fill-mode: forwards; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); } }
.mtype { position: relative; }
.mtype > * { opacity: 0; animation: spreadOut 0.8s ease-out forwards; }
.mtype > *:nth-child(2) { animation-delay: 0.6s; animation-name: spreadOutLeft; }
.mtype > *:nth-child(3) { animation-delay: 0.6s; animation-name: spreadOutRight; }
.mtype > *:nth-child(1) { animation-delay: 0.8s; animation-name: spreadOutFarLeft; }
.mtype > *:nth-child(4) { animation-delay: 0.8s; animation-name: spreadOutFarRight; }

@keyframes spreadOutLeft { from { opacity: 0; transform: translate(50%, 0) scale(0.5); }
  to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes spreadOutRight { from { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
  to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes spreadOutFarLeft { from { opacity: 0; transform: translate(150%, 0) scale(0.5); }
  to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes spreadOutFarRight { from { opacity: 0; transform: translate(-150%, 0) scale(0.5); }
  to { opacity: 1; transform: translate(0, 0) scale(1); } }