/* @import url("./tailwind_common.css"); */

html,body{
  min-height: 100vh;
}


/* @font-face {
  font-family:poppins;
  src: url(../font/POPPINS-REGULAR.ttf) format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
} */


:root{

  --dark-color-half: #999;
  --dark-color-50: #999;
  --dark-color-75: #555;
/* 
  --light-color:#0064b0;
  --light-color-red:#b91c1c;
 */
  --light-color:#0064b0;
  --light-color-red:#cd0001;
  /* b91c1c */

  
  --bgc: #f8f8f8;

  --p-color: #455555;



}


body{
  font-size: 16px;
  background-color: var(--bgc);
  font-family: 'Poppins', "Microsoft YaHei", sans-serif;
  /* font-family: "Microsoft YaHei"; */
  line-height: 2;
  font-weight: 400;
  color:#232323;
}



/* 小屏 */
@media (max-width: 1024px){
  p{
    line-height: 1.5;

  }

}


a:hover{
  color:var(--light-color, red);
  text-decoration: underline;
}

a.red:hover{
  color:var(red);
}




/************以下来源于bootstrap532  */

.a {
  color: var(--light-color);
  text-decoration: underline;
}
.a:hover {
  color: #cc312e; 
  /* var(--light-color); */
}

.a-unchange, .a-unchange:hover {
  color: inherit;
  text-decoration: none;
}




b,
strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.875em;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}


input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

textarea {
  resize: vertical;
}




/***************** 以上样式摘取于bootstrap532，a前加了点  */





/* 小屏 */
/* @media (max-width: 1024px){

  .banner{
    display: none !important;
  }

} */



/* 小屏 */
@media (max-width: 1024px){
  /* :root,  body{
    font-size: 14px;
  } */

  /* .cbox{
    width:clamp(990px, 90%, 1200px);
  } */

}



/* 超大屏xl */
@media (min-width: 1280px){
  /* .cbox{
    max-width: 1200px !important;
  } */
}

/* 大屏lg */
@media (min-width: 1024px){

  /* .cbox{
    max-width: 990px;
  } */
}

.iconfont{
  font-size: inherit;
}



.current--whole{
  color:var(--light-color);
}

/* 大屏 */
@media (min-width: 1024px){

  /* 当前 li */
  .current--whole{
    /* color:var(--light-color); */
    border-bottom: 2px solid var(--light-color);
    height: 100%;
    display: flex;
    align-items: center;
  }

  .nav-menu--whole a{
    /* color:inherit; */
    text-decoration: none;
  }

  
  /* link交互样式 */
  .nav-menu--whole li:hover a[data-grade="1"], .nav-menu--whole a.active {
    color:var(--light-color);
    /* border-bottom: 2px solid var(--light-color); */
  }


} 
  

/**************************** header start   */

/* 下拉符号样式 */
.dropdown-toggle-btn--whole{
  padding:2px;
  /* border: 0 solid #000; */
  border-style: solid;
  border-width: 0 2px 2px 0;
}

.collapse-btn--whole:before{
  /* content:"×"; */
  content:"\e6e9";
}

.collapse-btn--whole[data-stat=open]:before{
  /* content:"≡"; */
  content:"\e62c";
}
  

.search-box-btn--whole{
  position:fixed;
  z-index: 100;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color: #000000e0;

  display: flex;
  justify-content: center;
  align-items: center;
}

/**************************** header end */


/*分页*/
/* .pager {} */
.pager ul {display: flex; flex-wrap: wrap; gap:.5em; }
/* .pager ul li {} */
/* .pager ul li a {padding: 5px 15px; margin: 15px 5px; border: #dddddd solid 1px; display: inline-block;} */
.pager a {display: block; padding:2px 1em; border:#dddddd solid 1px; }
.pager a:hover {border: var(--light-color) solid 1px; color: var(--light-color)}
.pager .active a {border: var(--light-color) solid 1px;  background-color: var(--light-color); color: #fff;}
/* .pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px;} */
.pager .active a:hover {color: #fff; border: var(--light-color) solid 1px !important;}



/* share 的二种主题  */
.share-box-gray{
  --share-color-1: rgba(255, 255, 255, 0.2);
  --share-color-2: rgba(255, 255, 255, 0.2);
  --share-color-3: rgba(255, 255, 255, 0.2);
  --share-color-4: rgba(255, 255, 255, 0.2);
}

.share-box-color{
  --share-color-1: #00a0ec;
  --share-color-2: #4170dc;
  --share-color-3: #335894;
  --share-color-4: #4e4d4b;
}



/* 页面表格 观察待用 */
.pate_table{
  overflow-x: auto;
  white-space: nowrap;
}


/* 通用 大标题 前图标 */


.common-tit-icon{
  display: block;
  float: left;
  position: relative;
  width: 1em;
  aspect-ratio: 1/1;
  margin-right: .2em;
  /* transform: scale(.7);
  transform-origin: left bottom; */
}

.common-tit-icon::before {
  display: block;
  position: absolute;
  left: 0;
  bottom:0;
  width: 45%;
  content: '';
  aspect-ratio: 1/1;
  background: var(--light-color);
  transform: translate(75%, -75%) ;
  transform-origin: left bottom;

}

.common-tit-icon::after {
  display: block;
  position: absolute;
  left: 0;
  bottom:0;
  width: 50%;
  content: '';
  aspect-ratio: 1/1;

  background: var(--light-color-red);
}




/* 
.common-tit-icon{
  display: block;
  float: left;
  position: relative;
  width: 1em;
  aspect-ratio: 1/1;
}

.common-tit-icon::before {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  aspect-ratio: 1/1;
  background: #0064b0;
  content: '';
}

.common-tit-icon::after {
  display: block;
  position: absolute;
  left: 0;
  top: 0%;
  height: 50%;
  aspect-ratio: 1/1;
  background: #cc312e;
  content: '';
  transform: scale(.7) translateX(143%) ;
  transform-origin: left bottom;
} */


/* 
.common-tit-icon {
  aspect-ratio: 1/1;
  display: inline-block;
  width: 1em;
  background: url(../image/common-tit-icon.png) center center no-repeat;
}

 */



/* 文章类 通用类 */
article{
  /* --p-color:#455555; */
  word-wrap: break-word;
}

article a{
  text-decoration: underline;
}

article video{
  display: block;
  margin:1.25rem 0;
  width: 100%;
}

article>*:first-child{
  margin-top: 0;
}


article p{
  margin:1.25rem 0;
  color:var(--p-color);
}

article p:empty {
  margin:0;
}

article img{
  margin:1.25rem 0;
  width: 100%;
}


article table{
  max-width:100%;
  /* white-space: nowrap; */
  background-color: #fff;
  /* user-select:none; */
  /* table-layout:fixed; */
  /* overflow-x: auto; */
  scroll-margin-top:110px;
  font-size: .9rem;
}


/* table外必需加 .table-parent，否则小屏下表将超出 2024-09-12 10:55:03 */
.table-parent{
  width: 100%;
  overflow-x: auto;
}

/* 使表格不超出，针对不能设置外div的表格，其它不建议使用 2024-09-12 10:55:03 */
.table-fixed{
  table-layout:fixed;
  word-break:break-all;
  word-wrap:break-word;
  border-collapse:collapse;
  margin:0;
  padding:0;
}

thead{
  text-align: center;
  color:#fff;
  background-color: var(--light-color);
}
th{
  font-weight: 500;
  border:1px solid #DDD;
}
td{
  border:1px solid #DDD;
}
td,th{
  padding:.5em;
}

tr:nth-child(even){
  background-color: #0284c710;
}

tr:hover{
  background-color: #0284c750;
}


/* 文章内列表 自定样式 */
article ul, .list-common{
  margin:.5em 0;
  padding-left:1.5em;
}

article ul>li::marker, .list-common>li::marker{
  color:#888;
}

article ul>li, .list-common>li {
  padding:.2em 0;
  list-style: disc inside;
}

article ul p, article ol p {
  display: inline;
}

.get_quote{
  margin:1.5rem 0;
}

.list-number{
  margin:.5em 0;
  padding-left:1.5em;
}

.list-number>li::marker{
  color:#888;
}

.list-number>li {
  padding:.2em 0;
  list-style: decimal inside;
}


/* 小屏 */
@media (max-width: 1024px){

  article{
    font-size: .9rem;
    line-height: 1.35;
  }

  /* article h1{
    font-size: 1.5rem;
  } */

  article h2, 
  article h3 {
    margin:1rem 0 .5rem;
  }

  article h2{
    font-size: 1.25rem;
    font-weight: 500;
  }

  article h3{
    font-size: 1.15rem;
    font-weight: 500;
  }

  article h4{
    font-size: 1.05rem;
    font-weight: 500;
  }


  article h2:nth-child(1){
    padding-top: 0 !important;
  }

  article p{
    margin:.5rem 0;
  }

  article img{
    margin:1rem 0;
  }

 
  /* placeholder 减小 */
  ::placeholder{
    font-size: .8rem !important;
  }

}



/* 大屏lg */
@media (min-width: 1024px){

  article h2, 
  article h3,
  article h4 {
    margin:1.25rem 0 1rem;
    line-height: 1.35;
  }

  /* article h1{
    font-size: 2.25rem;
  } */

  article h2{
    font-size: 1.5rem;
    font-weight: 600;
  }

  article h3{
    font-size: 1.25rem;
    font-weight: 500;
  }

  article h4{
    font-size: 1.15rem;
    font-weight: 500;
  }
  

  article h2:nth-child(1){
    padding-top: 0 !important;
  }

}




/* 客服侧边 */


.kefu-chy{
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);

  /* display: flex; */
  flex-direction: column;
  gap:.3rem;
  z-index: 100;

  --bgc:#ffffff;
  --color:var(--light-color);
  --bg-rever:var(--light-color);  
}


/* 一级子节点 */
.kefu-chy > .item-box{
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:.5rem;

  padding:.3rem;
  min-width:4rem;
  aspect-ratio: 1/1;

  color:var(--color);
  border-radius: 10% 0 0 10%;
  background-color: var(--bgc);
  box-shadow: 0 0 1px #888;
  cursor: pointer;
 
}

.kefu-chy > .item-box:hover{
  background-color: var(--bg-rever);
  color: var(--bgc);
  text-decoration: none;
}

.kefu-chy a:hover{
  color: var(--bgc);
}

.kefu-chy .item-box > a:hover{
  text-decoration: none;
}


/* 抽屉 */
.kefu-chy .drawer-box{
  position: absolute;
  left:0;
  top:50%;
  transform: translate(0, -50%) scale(0);

  padding-right: 10px;

  transition: transform ease .2s;

  z-index: -1;
}

/* 注意：只有一级子节点为div时才有抽屉 */
.kefu-chy > .item-box:hover .drawer-box, .kefu-chy li .now{
  transform: translate(-100%, -50%) scale(1);
}

.kefu-chy .drawer-conent-box{
  position: relative;
  color:var(--bgc);
  background-color: var(--bg-rever);
  padding:1rem;
}


/* 右侧箭头 */
.kefu-chy .drawer-conent-box::after{
  position: absolute;
  top:50%;
  right:0;
  content:" ";
  display: block;
  width:1rem;
  height:1rem;
  background-color: var(--bg-rever);
  transform: translate(30%, -50%) rotate(45deg);
}

.kefu-chy .item-box .iconfont, .kefu-chy .item-box .iconfont-hj{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:.5rem;
  font-size: 12px;
  line-height: 1;
}

.kefu-chy .item-box .iconfont::before, .kefu-chy .item-box .iconfont-hj::before{
  font-size: 2em;
}


.btm-bar > .iconfont, .btm-bar > .iconfont-hj{
  font-size: 24px !important;
  line-height: 1.2;
}



/* table 折叠 chy 2024-01-12 16:17:30 */
.collapse-table-chy tr:nth-child(n+7){
  display: none;
} 

.btn-tab-colapse-chy{
  display: block;
  margin:5px auto;
  background-color: #F0F0F0;
  border-width: 0;
  cursor: pointer;
  line-height: 1.5;
}

.btn-tab-colapse-chy:hover{
  background-color:#ccc;
}

.btn-tab-colapse-chy[data-colapse='1']:after{
  content: '▲ flow up';
}

.btn-tab-colapse-chy::after{
  content: '▼ more';
  padding:0 1rem;
  font-size: .6rem;
}

/* 通用页 客服 z-500 */
#LRfloater0{
  z-index: 500 !important;
}


/* 产品页标题 左侧颜色样式 */
.bg-top-to-bottom-color{
  background: linear-gradient(to bottom, var(--light-color-red) 50%, var(--light-color) 50%);
}


/* select language chy 2024-08-21 16:50:00 */
.language-box{
  position: relative;
  --height:1rem;
  max-width: fit-content;
  cursor: pointer;
}

.language-box:hover > .language{
  color:var(--hover-color);
  /* color:red; */
}

.language-box:hover > .languages{
  display: flex;
}

.language-box img{
  height:var(--height);
  aspect-ratio: 3/2;
}


.language{
  /* background-color: #cccccc55; */
  /* padding:.5rem; */

  display: flex;
  align-items: center;
  gap:.5rem;
}


.languages{
  display: none;

  position: absolute;
  top:100%;
  right:0;

  min-width: 100%;

  background-color: #FFF;
  padding:.5rem;

  /* display: flex; */
  flex-direction: column;
  gap:.5rem;

  border:1px solid #CCC;

}

.lang-li {
  display: flex;
  align-items: center;
  gap:.5rem;

  padding:2px 0 ;
  color:#333;

  width: max-content;
}

.lang-li:hover{
  color: red;
}


/* leavemessage show or hide chy 22024-09-26 15:39:10 */
#lmsgFormFreeze {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  min-height: 100vh;
  height: 100%;
  overflow-y: auto;
  z-index: 100000001;
  background-color: #0000008f;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}


.viewer-canvas img{
  border:1rem solid #fff;
}


.just-validate-error-field{
  border:1px solid rgb(184, 17, 17);
  background-color: rgb(184 17 17 / 5%);
}