/* 通用 */
/* ------------------------八等分 开始*/
.col-xs-1-8,.col-sm-1-8,.col-md-1-8,.col-lg-1-8 {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}
 
.col-xs-1-8 {
  width: 12.5%;
  float: left;
}
 
@media (min-width: 768px) {
  .col-sm-1-8 {
    width: 12.5%;
    float: left;
  }
}
 
@media (min-width: 992px) {
  .col-md-1-8 {
    width: 12.5%;
    float: left;
  }
}
 
@media (min-width: 1200px) {
  .col-lg-1-8 {
    width: 12.5%;
    float: left;
  }
}
/* ------------------------八等分 结束*/
/* ------------------------五等分  开始 */
.col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5 {
  min-height: 1px;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
}
 
.col-xs-1-5 {
  width: 20%;
  float: left;
}
 
@media (min-width: 768px) {
  .col-sm-1-5 {
    width: 20%;
    float: left;
  }
}
 
@media (min-width: 992px) {
  .col-md-1-5 {
    width: 20%;
    float: left;
  }
}
 
@media (min-width: 1200px) {
  .col-lg-1-5{
    width: 20%;
    float: left;
  }
}
/* ------------------------五等分  结束 */


/* 渐变色 开始*/
.bg-gradient-primary {
background: linear-gradient(50deg, #0372d4 0, #00f2fe 100%) !important;
}

/* 渐变色 结束 */



/* 头部开始 */
/* ----------------------------------------------------------------------------头部背景图开始 */
.bcgimg {
position: relative;
overflow: hidden;
width: 100%;
height: 450px;
background: url(../../../../../project/template/front/public/image/jbtt.png);
background-size: 100%;
background-repeat: no-repeat;
}

@media (min-width: 2101px) {
.bcgimg {
  background: linear-gradient(50deg, #0372d4 0, #00f2fe 100%) !important;
}

.col-xxxl-12 {
  width: 100% !important;
  text-align: center !important;
  margin-top: 80px;
}

.p2 {
  width: 100% !important;
}
}

@media (max-width: 2100px) {
.bcgimg {
  height: 912px;
}

.neirong {
  margin-top: 200px;
}
}

@media (max-width: 2000px) {
.bcgimg {
  height: 868px;
}

.neirong {
  margin-top: 190px;
}
}

@media (max-width: 1900px) {
.bcgimg {
  height: 825px;
}

.neirong {
  margin-top: 180px;
}
}

@media (max-width: 1800px) {
.bcgimg {
  height: 782px;
}

.neirong {
  margin-top: 170px;
}
}

@media (max-width: 1700px) {
.bcgimg {
  height: 738px;
}

.neirong {
  margin-top: 160px;
}
}

@media (max-width: 1600px) {
.bcgimg {
  height: 695px;
}

.neirong {
  margin-top: 150px;
}
}

@media (max-width: 1500px) {
.bcgimg {
  height: 651px;
}

.neirong {
  margin-top: 140px;
}
}

@media (max-width: 1400px) {
.bcgimg {
  height: 608px;
}

.neirong {
  margin-top: 130px;
}
}

@media (max-width: 1300px) {
.bcgimg {
  height: 564px;
}

.neirong {
  margin-top: 120px;
}
}

@media (max-width: 1200px) {
.bcgimg {
  height: 521px;
}

.neirong {
  margin-top: 110px;
}
}

@media (max-width: 1100px) {
.bcgimg {
  height: 478px;
}

.btn-outline-h {
  padding: 5px 20px !important;
}

.neirong {
  margin-top: 80px !important;
}
}

@media (max-width: 992px) {
.bcgimg {
  height: 460px;
  background: linear-gradient(50deg, #0372d4 0, #00f2fe 100%) !important;
}

.btn-outline-h {
  padding: 5px 20px !important;
}

.neirong {
  margin-top: 50px !important;
}
}

@media (max-width: 768px) {
.bcgimg {
  background: linear-gradient(50deg, #0372d4 0, #00f2fe 100%) !important;
  height: 357px;
}

.btn-outline-h {
  padding: 5px 20px !important;
}
}

.padding-0 {
padding: 0 !important;
}

/* ----------------------------------------------------------------------头部背景图结束 */

.btn-outline-h {
border: 1px solid #ffffff;
border-radius: 50px;
color: #fff;
padding: 10px 40px;
}

.btn-outline-h:hover,
.btn-outline-h:focus {
background-color: #fff;
color: #222;
}

.color-white {
color: #fff;
}

.w60 {
width: 40%;
}

.mr10 {
margin-right: 10px;
}

@media (min-width: 993px) {
.mx-lg-start {
  margin-left: 0 !important;
}
}

/* 头部结束 */

/* 多排 一排三个列表 底部带提示 开始 */
.bg-section-secondary {
background-color: #FAFBFE !important;
}

.slice {
position: relative;
padding-top: 4rem;
padding-bottom: 4rem;
}

[class*="shadow"] {
transition: all 0.2s ease;
}/* hover运动平缓 */

.hover-shadow-lg:hover {
box-shadow: 0 1rem 3rem rgba(31, 45, 61, 0.125) !important;
}

.translate-y-n10,
.hover-translate-y-n10:hover {
transform: translateY(-10px) !important;
}

.card15 {
background-color: #FFF;
border: 1px solid #EFF2F7;
box-shadow: 0 0.5rem 1rem rgba(31, 45, 61, 0.025) !important;
}

.text-f {
font-size: 16px;
color: #8492A6;
line-height: 30px;
}

.fluid-paragraph {
width: 680px;
margin: auto;
padding: 0 1.5rem;
position: relative;
}

@media (max-width: 767.98px) {
.fluid-paragraph {
  width: 100%;
}
}

/* 多排 一排三个列表 底部带提示 结束 */
/* 左图右文字 开始 */
.slice-lg {
position: relative;
padding-top: 6rem;
padding-bottom: 6rem;
}

/*----------------------------------------- 链接点击动态 开始 */
.link-underline-primary {
color: #38c1fe;
}

.link-underline-primary:after {
background-color: #38c1fe;
}

.link-underline-primary:hover {
color: #38c1fe;
}

.link {
transition: all 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
.link {
  transition: none;
}
}

[class*="link-underline-"] {
padding-bottom: 8px;
position: relative;
}

[class*="link-underline-"]:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
border-radius: 50rem;
transition: all 0.2s cubic-bezier(0.77, 0, 0.2, 2.25);
}

@media (prefers-reduced-motion: reduce) {
[class*="link-underline-"]:after {
  transition: none;
}
}

[class*="link-underline-"]:hover:after {
width: calc(100% + 8px);
left: -4px;
}

/*------------------------------------------- 链接点击动态 结束 */
/* 左图右文字 结束 */

/* 左文字   右图  开始 */
.slice-lg {
position: relative;
padding-top: 6rem;
padding-bottom: 6rem;
}

/* -----------------------------------------------------图标开始 */
.icon-shape {
display: inline-block;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.25rem;
margin-right: 20px;
}

.icon-primary {
color: #38c1fe;
background-color: #c5d4eb;
padding: 10px;
}

.rounded-circle {
border-radius: 50% !important;
}

/* ----------------------------------------------------------图标结束 */
.color-555 {
color: #555;
}

/* 左文字   右图  结束 */
/* 背景图 标题 三个错落卡 开始 */
.slice-lg {
position: relative;
padding-top: 6rem;
padding-bottom: 6rem;
}

.bg-section-secondary {
background-color: #FAFBFE !important;
}

.bg-absolute-cover {
background-repeat: no-repeat;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}

.bg-absolute-cover svg {
height: 1000px;
pointer-events: none;
}

.zindex-100 {
z-index: 100 !important;
}

/* ------------------------------按钮颜色 开始 */
.badge-soft-success {
color: #36B37E;
background-color: #d7f0e5;
font-weight: bold;
}

.badge-soft-success[href]:hover,
.badge-soft-success[href]:focus {
color: #36B37E;
text-decoration: none;
background-color: #c4e9d9;
}

.badge-pill {
padding: 10px 20px;
border-radius: 50rem;
}

/*--------------------------------按钮颜色 结束 */
.fluid-paragraph {
width: 680px;
margin: auto;
padding: 0 1.5rem;
position: relative;
}

@media (max-width: 767.98px) {
.fluid-paragraph {
  width: 100%;
}
}

.card15 {
background-color: #FFF;
border: 1px solid #EFF2F7;
box-shadow: 0 0.5rem 1rem rgba(31, 45, 61, 0.025) !important;
}

/* ------------------------------------图标开始 */
.bg-gradient-primary {
background: linear-gradient(50deg, #0372d4 0, #00f2fe 100%) !important;
}

/*---------------------------------- 图标结束 */
.shadow-primary {
box-shadow: 0 0.5rem 1rem rgba(22, 88, 147, 0.4) !important;
}

.icon {
min-width: 3rem;
min-height: 3rem;
line-height: 3rem;
text-align: center;
margin-right: 20px;
}

.icon i {
font-size: 20px;
}

/* 背景图 标题 三个错落卡 结束  */



/* 动感标题介绍按钮图片 开始 */

.has-floating-items {
padding-bottom: 18rem !important;
}

/* ---------------------------------------------头部箭头开始 */
.slice-xl {
padding-top: 8rem;
padding-bottom: 8rem;
}

.tongue {
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 1;
transform: rotate(180deg) translateX(50%);
width: 138px;
height: 35px;
line-height: 35px;
text-align: center;
color: #8492A6;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='35' viewBox='0 0 138 35'%3E%3Cpath fill='%23FFF' d='M 3.15027 34.4375C 1.74207 34.6025 0.68396 34.7266 0 35L 68.9982 35C 68.9982 35 68.9998 28.6387 69 19.5132C 69 20.7261 69.0001 21.8892 69.0001 22.9956L 69.0018 35L 138 35C 137.316 34.7266 136.258 34.6025 134.85 34.4375C 131.11 33.9995 124.903 33.2729 116.678 28.6875C 111.015 25.3901 106.523 20.9771 102.07 16.6025C 93.5474 8.23096 85.1685 -1.97984e-15 69.0018 3.55056e-31C 69.0006 5.271 69 10.4292 69 15.0952C 69 10.4287 68.9994 5.27148 68.9982 3.55056e-31C 52.8314 1.97986e-15 44.4526 8.23096 35.9302 16.6025C 31.4772 20.9771 26.985 25.3901 21.3221 28.6875C 13.0974 33.2729 6.88965 33.9995 3.15027 34.4375Z'/%3E%3C/svg%3E");
}

.tongue-section-secondary {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='35' viewBox='0 0 138 35'%3E%3Cpath fill='%23FAFBFE' d='M 3.15027 34.4375C 1.74207 34.6025 0.68396 34.7266 0 35L 68.9982 35C 68.9982 35 68.9998 28.6387 69 19.5132C 69 20.7261 69.0001 21.8892 69.0001 22.9956L 69.0018 35L 138 35C 137.316 34.7266 136.258 34.6025 134.85 34.4375C 131.11 33.9995 124.903 33.2729 116.678 28.6875C 111.015 25.3901 106.523 20.9771 102.07 16.6025C 93.5474 8.23096 85.1685 -1.97984e-15 69.0018 3.55056e-31C 69.0006 5.271 69 10.4292 69 15.0952C 69 10.4287 68.9994 5.27148 68.9982 3.55056e-31C 52.8314 1.97986e-15 44.4526 8.23096 35.9302 16.6025C 31.4772 20.9771 26.985 25.3901 21.3221 28.6875C 13.0974 33.2729 6.88965 33.9995 3.15027 34.4375Z'/%3E%3C/svg%3E");
color: #273444;
}

.tongue-section-secondary:hover {
color: #273444;
}

/* -------------------------------------------头部箭头结束 */
.text-ff {
font-size: 16px;
color: #fff;
line-height: 30px;
}

/* ----------------------------------------按钮 上动 开始*/
.translate-y-n3,
.hover-translate-y-n3:hover {
transform: translateY(-3px) !important;
}

/*------------------------------------------------- 按钮 上动 结束*/
/* -------------------------白色按钮开始 */
.btn-white {
color: #273444;
background-color: #FFF;
border-color: #FFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-white:hover {
color: #273444;
background-color: #ececec;
border-color: #e6e6e6;
}

.btn-white:focus,
.btn-white.focus {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 rgba(255, 255, 255, 0.35);
}

.btn-white.disabled,
.btn-white:disabled {
color: #273444;
background-color: #FFF;
border-color: #FFF;
}

.btn-white:not(:disabled):not(.disabled):active,
.btn-white:not(:disabled):not(.disabled).active,
.show>.btn-white.dropdown-toggle {
color: #273444;
background-color: #e6e6e6;
border-color: #dfdfdf;
}

.btn-white:not(:disabled):not(.disabled):active:focus,
.btn-white:not(:disabled):not(.disabled).active:focus,
.show>.btn-white.dropdown-toggle:focus {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 rgba(255, 255, 255, 0.35);
}

/* -------------------------白色按钮结束 */
/* -----------------------------------------底部动图开始 */
.floating-items {
position: relative;
left: 50%;
margin-left: -570px;
z-index: 10;
}

.icon-floating {
position: absolute;
text-align: center;
box-shadow: 0 30px 40px 0 rgba(31, 45, 61, 0.1);
border-radius: 50%;
}

.icon-floating svg {
width: 50px;
}

.icon-floating span {
height: 100%;
}

.icon-floating img {
max-width: 100%;
}

.icon-floating span,
.icon-floating img {
display: inline-block;
vertical-align: middle;
}

.icon-floating:nth-child(1) {
top: 140px;
left: -60px;
width: 120px;
height: 120px;
}

.icon-floating:nth-child(2) {
top: 200px;
left: 180px;
width: 160px;
height: 160px;
animation-delay: .5s;
}

.icon-floating:nth-child(3) {
top: 120px;
left: 480px;
width: 80px;
height: 80px;
animation-delay: 1s;
}

.icon-floating:nth-child(4) {
top: 210px;
left: 680px;
width: 140px;
height: 140px;
animation-delay: 1.5s;
}

.icon-floating:nth-child(5) {
top: 100px;
left: 920px;
width: 100px;
height: 100px;
animation-delay: 2s;
}

.icon-floating:nth-child(6) {
top: 200px;
left: 1120px;
width: 80px;
height: 80px;
animation-delay: 2.5s;
}

.icon-sm svg {
width: 36px;
}

.icon-lg svg {
width: 76px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {

.icon-floating:nth-child(1),
.icon-floating:nth-child(6) {
  display: none;
}
}

@media (max-width: 991.98px) {

.icon-floating:nth-child(1),
.icon-floating:nth-child(2),
.icon-floating:nth-child(3) {
  display: none;
}

.icon-floating:nth-child(4),
.icon-floating:nth-child(5),
.icon-floating:nth-child(6) {
  width: 100px;
  height: 100px;
  top: 80px;
}

.icon-floating:nth-child(4) {
  left: 300px;
}

.icon-floating:nth-child(5) {
  left: 500px;
}

.icon-floating:nth-child(6) {
  left: 700px;
}

.icon-floating svg {
  width: 40px;
}
}

@media (max-width: 767.98px) {

.icon-floating:nth-child(4),
.icon-floating:nth-child(5),
.icon-floating:nth-child(6) {
  width: 80px;
  height: 80px;
  top: 80px;
}

.icon-floating:nth-child(4) {
  left: 400px;
}

.icon-floating:nth-child(5) {
  left: 530px;
}

.icon-floating:nth-child(6) {
  left: 660px;
}
}

.bg-white {
background-color: #FFF !important;
}
/*-------------------------------------------- 上下晃动 点击停止  开始 */
.floating {
animation: floating 3s ease infinite;
will-change: transform;
}
@keyframes floating {
0% {
  transform: translateY(0px); }
50% {
  transform: translateY(10px); }
100% {
  transform: translateY(0px); } }
.floating:hover {
animation-play-state: paused;
}
/*-------------------------------------------- 上下晃动 点击停止  结束 */


/* 动感标题介绍按钮图片 结束 */

/* 一行四个循环 开始 */
.fluid-paragraph {
width: 680px;
margin: auto;
padding: 0 1.5rem;
position: relative;
}

@media (max-width: 767.98px) {
.fluid-paragraph {
  width: 100%;
}
}
.icon2 {
min-width: 3rem;
min-height: 3rem;
line-height: 3rem;
}

.icon2 i {
font-size: 40px;
}
.text-f {
font-size: 16px;
color: #8492A6;
line-height: 30px;
}
/* 一行四个循环 结束 */
/* 一行两个卡片不规则底部 开始 */
.slice-lg {
position: relative;
padding-top: 6rem;
padding-bottom: 6rem;
}
/* -----------------------黑色渐变 */
.bg-gradient-dark {
background: linear-gradient(50deg, #273444 0, #272b44 100%) !important; }


[class*="shadow"] {
  transition: all 0.2s ease;
}/* hover运动平缓 */

.hover-shadow-lg:hover {
  box-shadow: 0 1rem 3rem rgba(31, 45, 61, 0.125) !important;
}
.zindex-100 {
  z-index: 100 !important;
}
.icon3 {
  min-width: 3rem;
  min-height: 3rem;
  line-height: 3rem;
}

.icon3 i {
  font-size: 40px;
  margin-right: 50px !important;
}
.px-30{
  padding-left: 50px;
  padding-right: 50px;
}
.bg-primary {
  background-color: #0372d4 !important; }
/* 一行两个卡片不规则底部 结束 */



/* 产品选项卡 开始 */
.cardlink{
font-size: 18px;
color: #7b7b7b;
margin: 0 20px;
text-decoration: none;
text-align: center;
padding: 15px 0;
}
.cardlink img{
width: 50px;height: 50px;
}
.cardlink .body{
transform-style: preserve-3d;perspective: 500px;
}
.cardlink #element{
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(30deg);
transition: all .1s;
}
.cardlink p{
padding-top: 10px;
}
.cardlink.active{
color: #111;
border-bottom: 4px solid #38c1fe;
}
.cardlink:hover,.cardlink:focus{
  border-bottom: 4px solid #38c1fe;
  color: #365297;
}
@media (max-width: 992px) {
  .cardlink{
      margin-bottom: 20px !important;
  }
}
.card-product-v2 {
cursor:pointer;
transition:z-index .2s cubic-bezier(.28,.12,.22,1);
z-index:1;
border:1px solid #38c1fe!important;
}
.card-product-v2 .product-content-fade {
background-color:#fff;
bottom:0;
box-shadow:5px 15px 30px rgba(62,68,90,.1);
left:-1px;
opacity:0;
pointer-events:none;
position:absolute;
right:-1px;
top:-1px;
transition:opacity .2s cubic-bezier(.28,.12,.22,1);
will-change:opacity;
z-index:-1
}
.card-product-v2 .product-fade-block {
background-color:transparent;
border-radius:.5rem;
left:0;
opacity:0;
padding:0 .9375rem;
position:absolute;
right:0;
transform:translateY(5px);
transition:all .2s cubic-bezier(.28,.12,.22,1);
visibility:hidden;
will-change:opacity,transform
}
.card-product-v2 .product-action-btn {
display:flex;
flex-direction:column;
opacity:0;
position:absolute;
right:0;
top:0;
transform:translateX(10px);
transition:opacity .25s cubic-bezier(.17,.62,.44,.99),transform .25s cubic-bezier(.17,.62,.44,.99)
}
.card-product-v2 .btn-action {
align-items:center;
background-color:#fff;
border-radius:.5rem;
box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
color:#21313c;
display:inline-flex;
font-size:14px;
height:34px;
justify-content:center;
line-height:34px;
text-align:center;
transition:all .3s ease 0s;
vertical-align:middle;
width:34px
}
.card-product-v2 .btn-action:hover {
background-color:#38c1fe !important;
color:#fff
}
.card-product-v2:hover .product-fade-block {
opacity:1;
transform:translateY(0);
visibility:visible
}
.card-product-v2:hover .product-content-fade {
opacity:1
}
.card-product-v2:hover .product-action-btn {
opacity:1;
transform:translateX(0)
}
.card-product-v2 .product-content-fade.border-info {
border:1px solid #38c1fe!important;
border-radius:.5rem
}
.card-product-v2:hover.card {
border:none;
z-index:2
}
.h-100 {
height:100%!important
}
.g-4,.gx-4 {
--bs-gutter-x:1rem
}
.g-4,.gy-4 {
--bs-gutter-y:1rem
}
@media (max-width:780px) {
.ml20{
      margin-left: 20px !important;
  }
}
/* 产品选项卡 结束 */
/* 产品选项卡 内容 开始 */
.item1{
box-sizing: border-box;
background-color: #fff;
border-right: 1px solid #f2f2f2;
}
.fts36{font-size: 36px;}
.green{color: #4cd862;}
.orange{color: #ff7f46;}
.item1{padding: 30px;background-color: #FFFFFF;border: 1px solid #fafafa;}
.item1:hover{background-color: #dcf0ff;}
.item1 .tit h2{font-weight: normal;color: #2b2b2b;font-size: 28px;text-align: center;}
.item1 .tit span{font-size: 14px;color: #909399;display: flex;justify-content: center;}
.item1 .tit p{color: #d4af30;text-align: center;font-size: 16px;}
.item1 .tit hr{color: #f8f8f8;opacity: 0.2;margin-top: 12px;text-align: center;}
.item1 .price p{font-size: 14px;color: #a393f2;text-align: center;}
.item1 .price .number{ display: flex;height: 40px;margin-top: 10px;}
.item1 .price .number .size{display: flex;align-items: center;width: 67%;justify-content: flex-end;}
.item1 .price .tips{margin-left: 10px;}
.item1 .price .buy{padding: 8px;font-size: 18px;margin: 10px auto;background-color: #2086ee;color: #ffffff;width: 80%;text-align: center;border-radius: 4px;}
/*el 文字提示开始 */
.product .tips .itemel {padding: 5px 10px;border-radius: 10px;background-color: #e8f8fe;color: #2086ee;}
/*el 文字提示结束 */
.item1 h5{text-align: left;color: #2b2b2b;}
.item1 hr{color: #f8f8f8;opacity: 0.2;margin-top: 5px;}
.item1 .configuration{margin-top: 20px;height: 120px;}
.item1 .configuration span{display: flex;flex-direction: column;align-items: flex-start;margin: 12px auto; margin-left: 20px;font-size: 14px;color: #666666;}
.item1 .have{height: 140px;}
.item1 .have ul{display: flex;align-items: center;}
.item1 .have ul li{font-size: 14px;color: #909399;display: flex;align-items: center;text-align: left;margin-top: 10px;}
.item1 .have ul li p{margin-left: 6px;}
.item1 .ewm{
width: 40%;
height: auto;
}
.item1 .see{
margin-top: 10px;
color: #888;
}

/* 产品选项卡 内容 结束 */