@charset "utf-8";
/* CSS Document */
/* box 阴影渐变色效果， 10px = 0 没有阴影朦胧效果，translate(24px,24px)=角度; 已删除 */ 

.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --s: 1.8em; /* the ribbon size */
  --d: .8em;  /* the depth */
  --c: .8em;  /* the cutout part */
  
  padding: 0 calc(var(--s) + .5em) var(--d);
  line-height: 1.8;
  background:
    conic-gradient(at left  var(--s) bottom var(--d),
     #0000 25%,#0008 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
    conic-gradient(at right var(--s) bottom var(--d),
     #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
  background-color: #CC333F; /* the main color */
  width: fit-content;
}
.ribbon2 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon2 {
  --s: 1.8em; /* the ribbon size */
  --d: .8em;  /* the depth */
  --c: .8em;  /* the cutout part */
  
  padding: var(--d) calc(var(--s) + .5em) 0;
  line-height: 1.8;
  background:
    conic-gradient(from  45deg at left  var(--s) top var(--d),
     #0008 12.5%,#0000 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
    conic-gradient(from -45deg at right var(--s) top var(--d),
     #0004 62.5%,#0000 0 87.5%,#0008 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 0,calc(var(--s) + var(--d)) 0,calc(var(--s) + var(--d)) var(--d),calc(100% - var(--s) - var(--d)) var(--d),calc(100% - var(--s) - var(--d)) 0,100% 0, calc(100% - var(--c)) calc(50% - var(--d)/2),100% calc(100% - var(--d)),calc(100% - var(--s)) calc(100% - var(--d)),calc(100% - var(--s)) 100%,var(--s) 100%,var(--s) calc(100% - var(--d)),0 calc(100% - var(--d)),var(--c) calc(50% - var(--d)/2));
  background-color: #D95B43; /* the main color */
  width: fit-content;
}
.ribbon3 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon3 {
  --r: .8em; /* control the cutout */
  
  border-block: .5em solid #0000;
  padding-inline: .5em calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,calc(100% - var(--r)) calc(100% - .25em),100% 50%,calc(100% - var(--r)) .25em);
  /*background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
   #45ADA8 padding-box;  自己设定吧！灵活一点*/
  width: fit-content;
}
.ribbon4 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon4 {
  --r: .8em; /* control the cutout */
  
  border-block: .5em solid #0000;
  padding-inline: calc(var(--r) + .25em) .5em;
  line-height: 1.8;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--r) calc(100% - .25em),0 50%,var(--r) .25em);
  background:
   radial-gradient(.2em 50% at right,#000a,#0000) border-box,
   #BD1550 padding-box; /* the color  */
  width: fit-content;
}
.ribbon5 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon5 {
  --r: .8em; /* control the cutout */
  
  border-block: .5em solid #0000;
  padding-inline: .5em calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,100% calc(100% - .25em),calc(100% - var(--r)) 50%,100% .25em);
  /*background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
   #FF6B6B padding-box; 自己设定吧！灵活一点*/
  width: fit-content;
}
.ribbon6 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon6 {
  --r: .8em; /* control the cutout */
  
  border-block: .5em solid #0000;
  padding-inline: calc(var(--r) + .25em) .5em;
  line-height: 1.8;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 calc(100% - .25em),var(--r) 50%,0 .25em);
  background:
   radial-gradient(.2em 50% at right,#000a,#0000) border-box,
   #2699dc padding-box; /* the color  */
  width: fit-content;
}
.tooltip2 {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip2 {
  /* triangle dimension */
  --b: 1em; /* control the base */
  --h: .7em; /* control the height */

  --c:#4ECDC4;

  padding: 1em;
  border-radius: 1.2em;
  border-bottom-left-radius: 0;
  clip-path: polygon(0 0,100% 0,100% 100%,
    var(--b) 100%,
    calc(-1*var(--h)) calc(100% + var(--h)),
    0 calc(100% - var(--b)));
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 0 0 999 999/
    0 0 calc(var(--h) + var(--b)) calc(var(--h) + var(--b))/0 0 var(--h) var(--h);
}
.tooltip3 {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip3 {
  /* triangle dimension */
  --b: 1em; /* control the base */
  --h: .7em; /* control the height */

  --c:#3399ff;

  padding: 1em;
  border-radius: 1.2em;
  border-bottom-right-radius: 0;
  clip-path: polygon(100% 0,0 0,0 100%,
    calc(100% - var(--b)) 100%,
    calc(100% + var(--h)) calc(100% + var(--h)),
    100% calc(100% - var(--b)));
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 0 999 999 0/
    0 calc(var(--h) + var(--b)) calc(var(--h) + var(--b)) 0/0 var(--h) var(--h) 0;
}
.tooltip4 {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip4 {
  /* tail dimension */
  --b: 3em;   /* base */
  --h: 1.8em; /* height */
  --t: .6;    /* thickness (from 0 to 1) */

  --p: 50%;  /* main position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */


  padding: 1em;
  border-radius: var(--r)/min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2) var(--r) var(--r) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2);
  background: #eb6841; /* the main color */
  position: relative;
}
.tooltip4:before {
  content: "";
  position: absolute;
  right: 100%;
  top: clamp(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*var(--b)/2,100% - var(--b));
  width: var(--h);
  height: var(--b);
  background: inherit;
  border-bottom-left-radius: 100%;
  -webkit-mask: radial-gradient(105% calc(var(--t)*100%) at 100% 0,#0000 99%,#000 101%);
}

.tooltip5 {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip5 {
  /* tail dimension */
  --b: 3em;   /* base */
  --h: 1.8em; /* height */
  --t: .6;    /* thickness (from 0 to 1) */

  --p: 50%;  /* main position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */


  padding: 1em;
  border-radius: var(--r)/var(--r) min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) var(--r);
  background: #563444; /* the main color */
  position: relative;
}
.tooltip5:before {
  content: "";
  position: absolute;
  left: 100%;
  top: clamp(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*var(--b)/2,100% - var(--b));
  width: var(--h);
  height: var(--b);
  background: inherit;
  border-bottom-right-radius: 100%;
  -webkit-mask: radial-gradient(105% calc(var(--t)*100%) at 0 0,#0000 99%,#000 101%);
}

/* HTML: <div class="tooltip">This is the same as #8 but with another shape for the tail </div> */
.tooltip6 {
  color: #fff;
  font-size: 18px;
  /* max-width: 28ch; 自己设定吧！灵活一点*/
  text-align: center;
}
.tooltip6 { 
  --b: 3em; /* tail dimension */

  --p: 50%;  /* main position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */

  padding: 1em;
  border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/4) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/4);
  background: #33cccc; /* the main color */
  position: relative;
}
.tooltip6:before {
  content: "";
  position: absolute;
  right: 100%;
  top: clamp(var(--b)/-2,var(--p) - 3*var(--b)/4,100% - var(--b));
  width: var(--b);
  aspect-ratio: 1;
  background: inherit;
  --g:#000 calc(100% - 1px),#0000;
  -webkit-mask: 
    radial-gradient(circle closest-side at 12% 12%,var(--g)),
    radial-gradient(20% 20% at 45% 52%,var(--g)),
    radial-gradient(25% 25% at 100% 75%,var(--g));
}

/* HTML: <div class="tooltip">This is the same as #5 but with another shape for the tail </div> */
.tooltip7 {
  color: #fff;
  font-size: 18px;
  /* max-width: 28ch; 自己设定吧！灵活一点*/
  text-align: center;
}
.tooltip7 { 
  --b: 3em; /* tail dimension */

  --p: 16%;  /* main position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */

  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/4) min(var(--r),var(--p) - var(--b)/4)/var(--r);
  background: #33cccc; /* the main color */
  position: relative;
}
.tooltip7:before {
  content: "";
  position: absolute;
  top: 100%;
  left: clamp(var(--b)/-2,var(--p) - 3*var(--b)/4,100% - var(--b));
  width: var(--b);
  aspect-ratio: 1;
  background: inherit;
  --g:#000 calc(100% - 1px),#0000;
  -webkit-mask: 
    radial-gradient(circle closest-side at 12% 88%,var(--g)),
    radial-gradient(20% 20% at 52% 55%,var(--g)),
    radial-gradient(25% 25% at 75% 0,var(--g));
}
.biaoti1 {
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-color: #0099ff #6666ff #ff6699 #ff9933;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-radius: 10px;
  padding: 10px 30px 10px 30px;
  color:#1f1f60;
  font-size: 24px;
  font-weight: bold;
}
.biaoti2 {
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-color: #0099ff #6666ff #ff6699 #00cc99;
  border-top-style: dashed;
  border-right-style: dashed;
  border-bottom-style: dashed;
  border-left-style: dashed;
  border-radius: 10px;
  padding: 10px 30px 10px 30px;
  color:#1f1f60;
  font-size: 24px;
  font-weight: bold;
}
.biaoti3 {
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-color: #0099ff #6666ff #ff6699 #ff9933;
  border-top-style: double;
  border-right-style: double;
  border-bottom-style: double;
  border-left-style: double;
  border-radius: 0px;
  padding: 10px 30px 10px 30px;
  color:#1f1f60;
  font-size: 24px;
  font-weight: bold;
}
.biaoti4 {
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-color: #0099ff #ff9933 #ff6699 #6666ff;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-radius: 0px;
  padding: 10px 30px 10px 30px;
  color:#1f1f60;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 8px 8px #6699ff;
}
.biaoti5 {
  border-bottom-style:solid; 
  padding: 10px;
  display: inline-block;
  border-bottom-color:#3333cc;
  font-size: 18px;
  font-weight: bold;
}
.biaoti5.box {
  border: 1px solid #ffcc00;
  background:#3333cc;
  color:#ffff00; 
  box-shadow: 4px 3px #ffcc00;
  padding: 3px 6px;
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
}
.biaoti6 {
  border-bottom-style:solid; 
  padding: 10px;
  display: inline-block;
  border-bottom-color:#009999;
  font-size: 18px;
  font-weight: bold;
}
.biaoti6.box {
  border: 1px solid #b3ffcc;
  background:#009999;
  color:#ffffff; 
  box-shadow: 4px 3px #99ffbb;
  padding: 3px 6px;
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
}

/* 动画 HTML: <div class="loader"></div> */
.loader-1 {
  width: 80px;
  height: 40px;
  color: #000;
  border: 2px solid currentColor;
  border-right-color: transparent;
  padding: 3px;
  background: 
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 15px) 
    0/0% no-repeat content-box content-box;
  position: relative;
  box-sizing: border-box;
  animation: l5 2s infinite steps(6);
}
.loader-1::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 100%;
  width: 10px;
  background:
    linear-gradient(
        #0000   calc(50% - 7px),currentColor 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left /100% 100%,
    linear-gradient(currentColor calc(50% - 5px),#0000        0 calc(50% + 5px),currentColor 0) left /2px 100%,
    linear-gradient(#0000        calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000        0) right/2px 100%;
  background-repeat:no-repeat;
}
@keyframes l5 {
    100% {background-size:120%}
}
/* 干预手册的 提示框*/
.jxlanse{
background-color:#cfe2ff;
border-style: solid;
border-width: 1px;
border-color:#9ec5fe;
color:#0a58ca;
padding: 8px 15px 8px 15px;
margin:20px 0px;
border-radius: 8px;
}
.jxhzlanse{background-color: #0a58ca;font-size: 15px;}
.jxluvse{
background-color:#d1e7dd;
border-style: solid;
border-width: 1px;
border-color:#a3cfbb;
color:#146c43;
padding: 8px 15px 8px 15px;
margin:20px 0px;
border-radius: 8px;
}
.jxhzluvse{background-color: #146c43;font-size: 15px;}
.jxhuangse{
background-color:#fff3cd;
border-style: solid;
border-width: 1px;
border-color:#ffe69c;
color:#997404;
padding: 8px 15px 8px 15px;
margin:20px 0px;
border-radius: 8px;
}
.jxhzhuangse{background-color: #997404;font-size: 15px;}
.jxhongse{
background-color:#f8d7da;
border-style: solid;
border-width: 1px;
border-color:#f1aeb5;
color:#b02a37;
padding: 8px 15px 8px 15px;
margin:20px 0px;
border-radius: 8px;
}
.jxhzhongse{background-color: #b02a37;font-size: 15px;}
.jxzise{
background-color:#e0ccff;
border-style: solid;
border-width: 1px;
border-color:#c299ff;
color:#3d0099;
padding: 8px 15px 8px 15px;
margin:20px 0px;
border-radius: 8px;
}
.jxhzzise{background-color: #6600ff;font-size: 15px;}
.jxkafeise{
background-color:#ecd9c6;
border-style: solid;
border-width: 1px;
border-color:#996633;
color:#996633;
padding: 8px 15px 8px 15px;
margin:20px 0px;
border-radius: 8px;
}
.jxhzkafeise{background-color: #996633;font-size: 15px;}