:root {
  --iblanse: linear-gradient(92.83deg, #52b9e9 0%, #00b8b0 47.34%, #00b5ad 94.68%);
  --zaiblack: #232323;
}

@font-face {
  font-family: "Roboto";
  src: url("calc/Roboto-Regular.woff2")/*tpa=https://www.feejoy.com/calc/calc/Roboto-Regular.woff2*/ format("woff2"), url("calc/Roboto-Regular.woff")/*tpa=https://www.feejoy.com/calc/calc/Roboto-Regular.woff*/ format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("calc/Roboto-Bold.woff2")/*tpa=https://www.feejoy.com/calc/calc/Roboto-Bold.woff2*/ format("woff2"), url("calc/Roboto-Bold.woff")/*tpa=https://www.feejoy.com/calc/calc/Roboto-Bold.woff*/ format("woff");
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}
.calc__popup-btn {
  border: none;
  position: fixed;
  height: 60px;
  width: 60px;
  left: 20px;
  bottom: 25px;
  z-index: 10000;
  border-radius: 20px;
  background: var(--iblanse);
  text-align: center;
  -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 22%);
  box-shadow: 0 0 10px rgb(0 0 0 / 22%);
}

.calc__popup-btn svg {
  fill: #ebf0f4;
}

.calc__popup-btn:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: scale ease-out 1.5s;
  -o-transition: scale ease-out 1.5s;
  transition: scale ease-out 1.5s;
}

.calc__popup {
  margin: 0 auto;
  display: none;
  overflow: hidden;
  background: rgb(248, 248, 248);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-height: -webkit-max-content;
  min-height: -moz-max-content;
  min-height: max-content;
  border-radius: 20px;
  position: fixed;
  bottom: 25px;
  left: 20px;
  -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 22%);
  box-shadow: 0 0 10px rgb(0 0 0 / 22%);
  z-index: 10000;
}

.calc__popup-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: var(--iblanse);
  height: 50px;
  color: white;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  font-family: "Microsoft Jhenghei", "PingFang SC", "Calibri", "opensans", "GothicArial", "Arial", "Microsoft YaHei",
    "San Francisco", "Hiragino Sans GB", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.popup-close {
  content: "×";
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0px;
  right: 0px;
  color: white;
  font-family: "Roboto";
  font-size: 25px;
  border: none;
  background: transparent;
}

.popup-close:hover {
  color: rgb(228, 228, 228);
}

.calc__popup-title span {
  vertical-align: middle;
  top: auto;
  margin: 0 auto;
}

.calc__popup-main {
  min-height: 262px;
  background: #fff;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: -webkit-max-content -webkit-max-content;
  -ms-grid-columns: max-content max-content;
  grid-template-columns: -webkit-max-content -webkit-max-content;
  grid-template-columns: max-content max-content;
  overflow: hidden;
}

.calc__meter {
  width: 100%;
  min-height: -webkit-max-content;
  min-height: -moz-max-content;
  min-height: max-content;
  display: -ms-grid;
  display: grid;
  grid-gap: 16px 20px;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
}

.calc__item-cont {
  display: block;
  border: solid 1px #e3e3e3;
  border-radius: 10px;
  height: 52px;
  position: relative;
  padding: 5px 10px;
}

.calc__item-cont:hover,
.calc__item-cont:focus-within {
  border: solid 1px #47c0bb;
}

.calc__item-action input {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background: #e3e3e3;
  border: none;
  border-radius: 0 10px 10px 0;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  vertical-align: middle;
  font-weight: 700;
  font-family: "Roboto" !important;
  font-size: 16px;
  color: var(--zaiblack);
}

.calc__item-action input:hover {
  color: #47c0bb;
}
.calc__item-input {
  margin-right: 20px;
}

.calc__item-input input:focus-visible {
  outline: none;
}

.calc__item-input input {
  border: none;
  background: transparent;
  height: 20px;
  min-width: 100px;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  font-family: "Roboto" !important;
}

.calc__item-title {
  font-family: "PingFang SC", "Calibri", "opensans", "GothicArial", "Arial", "Microsoft YaHei", "San Francisco",
    "Hiragino Sans GB", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  margin-bottom: 3px;
  white-space: nowrap;
}

.calc__popup-main > input[type="radio"],
.flan-list {
  display: none;
}
.calc__popup-main > input[type="radio"],
.flan2-list {
  display: none;
}
.calc__popup-main > input[type="radio"],
.flan3-list {
  display: none;
}

.calc__popup-main input[type="radio"]:hover,
.flan-list {
  border: solid 1px #47c0bb;
}

.calc__popup-main input[type="radio"]:hover,
.flan2-list {
  border: solid 1px #47c0bb;
}
.calc__popup-main input[type="radio"]:hover,
.flan3-list {
  border: solid 1px #47c0bb;
}
.calc__popup-main > input[type="radio"]:checked + label {
  background: var(--iblanse);
  border: solid 1px transparent;
  color: white;
}

.calc__popup-main > div {
  display: none;
}

.calc__cont {
  display: none;
  width: 410px;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 11;
  grid-row: 1 / 13;
  padding: 20px 24px 0 24px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.calc__popup-main > label {
  display: block;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  padding: 4px 20px;
  border: solid 1px transparent;
  text-align: center;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  line-height: 32px;
  height: 40px;
  font-size: 14px;
  vertical-align: middle;
  text-decoration: none;
  color: var(--zaiblack);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  cursor: pointer;
  background: rgb(243, 243, 243);
}

.calc__popup-main > label:hover {
  border: solid 1px #47c0bb;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  background: white;
  z-index: 2;
  -webkit-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

.calc__cont > label {
  display: inline-block;
  padding: 4px 10px;
  border: solid 1px transparent;
  text-align: center;
  height: 30px;
  font-size: 14px;
  vertical-align: middle;
  text-decoration: none;
  width: 110px;
  color: var(--zaiblack);
  cursor: pointer;
  background: #f1f1f1;
  line-height: 22px;
  border-radius: 10px;
  margin-bottom: 15px;
}
.calc__cont > label:hover {
  border: solid 1px #47c0bb;
  -webkit-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  z-index: 2;
}
.calc__cont > input[type="radio"]:checked + label {
  background: var(--iblanse);
  border: solid 1px transparent;
  color: white;
}

.calc__item-copy,
.calc__item-copied {
  border: none;
  background: none;
  -webkit-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  margin-left: 5px;
}

.calc__item-copy svg:hover {
  fill: #47c0bb;
}

.calc__item-copy svg {
  display: inline-block;
  vertical-align: bottom;
  border: none;
  fill: #929292;
  stroke: #929292;
}

.calc__item-copied {
  display: none;
}

.calc__item-copied svg {
  display: inline-block;
  vertical-align: bottom;
  border: none;
  fill: #47c0bb;
}

.flan__cont {
  display: none;
}
.flan2__cont {
  display: none;
}
.flan3__cont {
  display: none;
}

#tab-temp:checked ~ #cont-temp,
#tab-speed:checked ~ #cont-speed,
#tab-len:checked ~ #cont-len,
#tab-wei:checked ~ #cont-wei,
#tab-vol:checked ~ #cont-vol,
#tab-gonglv:checked ~ #cont-gonglv,
#tab-gnr:checked ~ #cont-gnr,
#tab-redian:checked ~ #cont-redian,
#tab-press:checked ~ #cont-press,
#tab-jdian:checked ~ #cont-jdian,
#tab-flan:checked ~ #cont-flan,
#tab-flan2:checked ~ #cont-flan2,
#tab-flan3:checked ~ #cont-flan3,
#tab-4-20:checked ~ #cont-4-20,
#tab-0-10:checked ~ #cont-0-10 {
  display: block;
}

#flan-p25:checked ~ #cont-p25,
#flan-p6:checked ~ #cont-p6,
#flan-p10:checked ~ #cont-p10,
#flan-p16:checked ~ #cont-p16,
#flan-p35:checked ~ #cont-p35,
#flan-p40:checked ~ #cont-p40,
#flan-p63:checked ~ #cont-p63,
#flan-p100:checked ~ #cont-p100,
#flan-p160:checked ~ #cont-p160 {
  display: block;
}
#flan2-p25:checked ~ #cont2-p25,
#flan2-p6:checked ~ #cont2-p6,
#flan2-p10:checked ~ #cont2-p10,
#flan2-p16:checked ~ #cont2-p16 {
  display: block;
}
#flan3-PL:checked ~ #cont3-PL,
#flan3-SO:checked ~ #cont3-SO,
#flan3-WN:checked ~ #cont3-WN {
  display: block;
}

.calc__meter-group {
  margin: 0 0 20px;
}
.calc__meter-title {
  grid-column: 1 / -1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  font-family: "Roboto", "opensans", "arial", sans-serif;
  font-weight: 500;
  text-align: left;
  margin: 0 0 11px;
  font-size: 15px;
}

.tabmat-input {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 12px;
  padding: 12px 40px 12px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 12px;
  font-family: "Roboto", "Microsoft Jhenghei", "opensans", sans-serif;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

#tabmat-head,
.flan-thead,
#tabmat-body,
.flan-tbody {
  border-collapse: collapse;
  width: 100%;
  height: 40px;
}

#tabmat-head th,
.flan-thead th,
#tabmat-body td,
.flan-tbody td {
  word-break: break-all;
  white-space: pre-line;
  font-size: 12px;
  font-family: "Roboto", "Microsoft Jhenghei", "opensans", sans-serif;
}

.ttxt {
  padding-left: 12px;
  text-align: left;
}

.tnum {
  text-align: center;
}

.ttxt1 {
  width: 98px;
}
.ttxt2 {
  width: 138px;
  font-size: 11px;
}
.tnum1 {
  width: 50px;
}
.tnum2 {
  width: 61px;
}
#tabmat-body tr {
  border-bottom: 1px solid #ddd;
  display: none;
  height: 40px;
}
.flan-tbody tr {
  border-bottom: 1px solid #ddd;
  display: none;
  height: 40px;
}
#tabmat-head tr.tab-header,
.flan-thead tr.tab-header,
#tabmat-body tr td:hover,
.flan-tbody tr td:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}
#cont-flan .tnum {
  width: 14%;
}

#cont-flan2 .tnum {
  width: 14%;
}

#cont-flan3 .tnum {
  width: 14%;
}

.calc__table {
  border: solid 1px #ddd;
  border-radius: 10px;
  -webkit-border-radius: ;
  -moz-border-radius: ;
  -ms-border-radius: ;
  -o-border-radius: ;
  overflow: hidden;
}

.calc__table-body {
  max-height: 319px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.calc__table-body::-webkit-scrollbar-thumb {
  background-color: #fff;
  height: 20%;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.calc__table-body::-webkit-scrollbar-thumb:hover {
  background-color: rgb(148, 148, 148);
}
.calc__table-body::-webkit-scrollbar {
  width: 5px;
  background: #f1f1f1;
}

#tabmat-input:hover,
#tabmat-input:focus-within,
#tabmat-input:focus-visible {
  border: solid 1px #47c0bb;
  outline: none;
}
.calc__input {
  position: relative;
}
.calc__input svg {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 18px;
}
.calc__table-copy {
  font-size: 12px;
  color: #b0b4bb;
  margin: 10px;
}
@media only screen and (max-width: 768px) {
  .calc__popup:before {
    content: "";
    background: #262626;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    opacity: 0.8;
    left: 0;
  }

  .calc__popup-btn {
    bottom: 75px;
  }

  .calc__popup {
    max-width: 100vw;
    width: 100%;
    bottom: auto;
    top: 0px;
    left: 0;
    right: auto;
    margin: 0 auto;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    border-radius: 0;
    height: 100%;
  }

  .calc__popup-main {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr -webkit-max-content;
    -ms-grid-rows: 1fr 1fr 1fr max-content;
    grid-template-rows: 1fr 1fr 1fr -webkit-max-content;
    grid-template-rows: 1fr 1fr 1fr max-content;
  }

  .calc__popup-main > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  .calc__popup-main > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  .calc__popup-main > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }

  .calc__popup-main > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
  }

  .calc__popup-main > *:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  .calc__popup-main > *:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }

  .calc__popup-main > *:nth-child(7) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }

  .calc__popup-main > *:nth-child(8) {
    -ms-grid-row: 2;
    -ms-grid-column: 4;
  }

  .calc__popup-main > *:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }

  .calc__popup-main > *:nth-child(10) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }

  .calc__popup-main > *:nth-child(11) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }

  .calc__popup-main > *:nth-child(12) {
    -ms-grid-row: 3;
    -ms-grid-column: 4;
  }

  .calc__popup-main > *:nth-child(13) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
  }

  .calc__popup-main > *:nth-child(14) {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
  }

  .calc__popup-main > *:nth-child(15) {
    -ms-grid-row: 4;
    -ms-grid-column: 3;
  }

  .calc__popup-main > *:nth-child(16) {
    -ms-grid-row: 4;
    -ms-grid-column: 4;
  }
  .calc__popup-main > label {
    grid-column: auto;
    padding: 0;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    line-height: 40px;
    height: 40px;
    font-size: 12px;
  }
  .calc__meter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    grid-gap: 15px 5px;
  }
  .calc__cont {
    grid-column: 1 / -1;
    grid-row: 4 / -1;
    padding: 30px 2%;
    width: 100%;
    height: 100vh;
  }

  .calc__item-title {
    font-size: 11px;
  }
  .calc__meter-title {
    font-size: 14px;
  }
  .calc__meter-item {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}

.jsq-img img {
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}
.jsq-cont {
  position: relative;
  width: 400px;
  height: 250px;
  z-index: 2;
}
.jsq-img {
  position: absolute;
  top: 30px;
}
.jsq__dx-input {
  position: absolute;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.jsq-input {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 22px;
  line-height: 18px;
  min-width: 52px;
  text-align: center;
  margin: 0 5px;
  background: #e0e0e0;
  padding: 1px 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}
.jsq-input:hover {
  border: 1px solid #47c0bb;
  cursor: pointer;
}
#jsq-D1 {
  top: 180px;
  left: 100px;
}
#jsq-K1 {
  top: 145px;
  left: 100px;
}
#jsq-C1 {
  top: 65px;
  left: 300px;
}
#jsq-L1 {
  top: 20px;
  left: 255px;
}
#jsq-n1 {
  top: 20px;
  left: 0px;
}
#jsq-Th1 {
  top: 20px;
  left: 75px;
}
.jsq-guige {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}

#jsq-D2 {
  top: 170px;
  left: 100px;
}
#jsq-K2 {
  top: 135px;
  left: 100px;
}
#jsq-C2 {
  top: 55px;
  left: 300px;
}
#jsq-L2 {
  top: 20px;
  left: 255px;
}
#jsq-n2 {
  top: 10px;
  left: 0px;
}
#jsq-Th2 {
  top: 10px;
  left: 75px;
}

#jsq-D3 {
  top: 220px;
  left: 100px;
}
#jsq-K3 {
  top: 185px;
  left: 100px;
}
#jsq-C3 {
  top: 105px;
  left: 300px;
}
#jsq-L3 {
  top: 60px;
  left: 255px;
}
#jsq-n3 {
  top: 60px;
  left: 0px;
}
#jsq-Th3 {
  top: 10px;
  left: 85px;
}
