@font-face {
  font-family: 'PingFangHK';
  src: url(../fonts/PingFangHK.ttf);
}

@font-face {
  font-family: 'Helvetica LT Std';
  src: url(../fonts/Helvetica_LT_Std_Condensed.ttf);
}

.font1 {
  font-family: 'PingFangHK', '微软雅黑';
}

.font2 {
  font-family: 'Helvetica LT Std', '微软雅黑';
}

.font3 {
  font-family: "思源黑体", "微软雅黑";
}

.font4 {
  font-family: "DIN", "微软雅黑";
}

.font5 {
  font-family: 'SourceHanSansCN', "微软雅黑";
}

.bg-button {
  background-color: #AF895D;
}

.bg4 {
  background-image: url(../images/bg5.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.text-af {
  color: #AF895D;
}

.text-b6 {
  color: #B68756;
}

.text-d6 {
  color: #D65254;
}

.text-4a {
  color: #4A4849;
}

.text-6c {
  color: #6C757D;
}

.label {
  background-color: #E9ECEF;
}

.hovered {
  color: #AF895D;
}

.hovered:hover {
  background-color: #AF895D;
}

.hovered:hover .img-unhov {
  display: none;
}

.hovered:hover .img-hov {
  display: block;
}

.el-collapse {
  border-width: 0px !important;
}

.el-collapse-item__header {
  height: 60px;
  padding: 0 16px;
  background-color: #FFFFFF !important;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #e9ecef;
  border-width: 0px !important;
}

.el-collapse-item__wrap {
  border-width: 0px !important;
  background-color: inherit !important;
}

.bg-af {
  background-color: #AF895D;
}


@media screen and (max-width: 639px) {
  .el-collapse-item__header {
    height: 70px;
  }
}

.gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

:root {
  --kv-width1: 330px;
  --kv-width2: 330px;
  --input-width1: 330px;
  --input-width2: 340px;
  --size1: 48px;
  --size2: 46px;
  --size3: 48px;
  --size4: 48px;
  --size5: 39px;
  --size6: 30px;
  --size7: 39px;
  --size8: 30px;
  --size9: 35px;
  --size10: 45px;
  --size11: 45px;
  --size12: 36px;
  --size13: 35px;
}

/* 72 48 130 44 703 */
@media screen and (min-width: 640px) {
  :root {
    --kv-width1: 460px;
    --kv-width2: 460px;
    --input-width1: 460px;
    --input-width2: 450px;
    --size1: 60px;
    --size2: 57px;
    --size3: 60px;
    --size4: 60px;
    --size5: 50px;
    --size6: 40px;
    --size7: 50px;
    --size8: 40px;
    --size9: 46px;
    --size10: 60px;
    --size11: 60px;
    --size12: 48px;
    --size13: 46px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --kv-width1: 380px;
    --kv-width2: 350px;
    --input-width1: 320px;
    --input-width2: 340px;
    --size1: 50px;
    --size2: 45px;
    --size3: 50px;
    --size4: 42px;
    --size5: 30px;
    --size6: 32px;
    --size7: 41px;
    --size8: 32px;
    --size9: 37px;
    --size10: 48px;
    --size11: 48px;
    --size12: 40px;
    --size13: 38px;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --kv-width1: 500px;
    --kv-width2: 460px;
    --input-width1: 455px;
    --input-width2: 455px;
    --size1: 68px;
    --size2: 64px;
    --size3: 68px;
    --size4: 55px;
    --size5: 40px;
    --size6: 42px;
    --size7: 55px;
    --size8: 42px;
    --size9: 49px;
    --size10: 65px;
    --size11: 65px;
    --size12: 54px;
    --size13: 52px;
  }
}

@media screen and (min-width: 1280px) {
  :root {
    --kv-width1: 600px;
    --kv-width2: 580px;
    --input-width1: 500px;
    --input-width2: 600px;
    --size1: 88px;
    --size2: 78px;
    --size3: 85px;
    --size4: 70px;
    --size5: 50px;
    --size6: 55px;
    --size7: 70px;
    --size8: 55px;
    --size9: 63px;
    --size10: 75px;
    --size11: 75px;
    --size12: 65px;
    --size13: 62px;
  }
}


.kv-width1 {
  width: var(--kv-width1);
}
.kv-width2 {
  width: var(--kv-width2);
}

.title1 {
  font-size: var(--size1);
  line-height: 1;
}

.title2 {
  font-size: var(--size2);
  line-height: 1.1;
}

.title3 {
  font-size: var(--size3);
  line-height: 1.2;
}

.title4 {
  font-size: var(--size4);
  line-height: 1.2;
}

.title5 {
  font-size: var(--size5);
  line-height: 1.1;
}

.title6 {
  font-size: var(--size6);
  line-height: 1.2;
}

.title7 {
  font-size: var(--size7);
  line-height: 1.2;
}

.title8 {
  font-size: var(--size8);
  line-height: 1.2;
}

.title9 {
  font-size: var(--size9);
  line-height: 1.2;
}

.title10 {
  font-size: var(--size10);
  line-height: 1.2;
}

.title11 {
  font-size: var(--size11);
  line-height: 1.2;
}

.title12 {
  font-size: var(--size12);
  line-height: 1.2;
}

.title13 {
  font-size: var(--size13);
  line-height: 1.2;
}

#input-box1 {
  width: var(--input-width1);
}

#input-box2 {
  width: var(--input-width2);
}