@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://use.typekit.net/hvu5qeh.css);
html {
  font-size: 62.5%;
}
body,
div,
a,
ul,
li,
img,
table,
tr,
td,
nav,
header,
footer,
h1,
h2,
h3,
h4,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #000;
  font-weight: 400;
  font-size: 16px;
  font-family: "din-2014", "Noto Sans TC";
  list-style: none;
  border: none;
  border-collapse: collapse;
  box-sizing: border-box;
}
@keyframes littleHelperPC {
  from {
    transform: translateY(500px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes littleHelperClosePC {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(500px);
  }
}
@keyframes scaleMainCircle {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
.mobileMapCircle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.mobileMapCircle .mobileCircle {
  position: absolute;
}
.mobileMapCircle .mainCircleM {
  width: 80px;
  left: 465px;
  top: 300px;
  animation: scaleMainCircle 1s alternate infinite;
}
.mobileMapCircle .a1 {
  left: 576px;
  top: 380px;
}
.mobileMapCircle .a2 {
  left: 635px;
  top: 413px;
}
.mobileMapCircle .a3 {
  left: 740px;
  top: 413px;
}
.mobileMapCircle .a4 {
  left: 850px;
  top: 413px;
}
.mobileMapCircle .b1 {
  left: 580px;
  top: 314px;
}
.mobileMapCircle .b2 {
  left: 655px;
  top: 314px;
}
.mobileMapCircle .b3 {
  left: 740px;
  top: 314px;
}
.mobileMapCircle .b4 {
  left: 815px;
  top: 314px;
}
.mobileMapCircle .b5 {
  left: 815px;
  top: 250px;
}
.mobileMapCircle .b6 {
  left: 815px;
  top: 181px;
}
.mobileMapCircle .c1 {
  left: 475px;
  top: 211px;
}
.mobileMapCircle .c2 {
  left: 475px;
  top: 129px;
}
.mobileMapCircle .c3 {
  left: 400px;
  top: 129px;
}
.mobileMapCircle .c4 {
  left: 315px;
  top: 129px;
}
.mobileMapCircle .c5 {
  left: 225px;
  top: 129px;
}
.mobileMapCircle .c6 {
  left: 140px;
  top: 129px;
}
.mobileMapCircle .c7 {
  left: 140px;
  top: 65px;
}
.mobileMapCircle .c8 {
  left: 206px;
  top: 0;
}
.mobileMapCircle .c9 {
  left: 295px;
  top: 0;
}
.mobileMapCircle .c10 {
  left: 380px;
  top: 0;
}
.mobileMapCircle .d1 {
  left: 413px;
  top: 280px;
}
.mobileMapCircle .d2 {
  left: 287px;
  top: 232px;
}
.mobileMapCircle .d3 {
  left: 205px;
  top: 232px;
}
.mobileMapCircle .d4 {
  left: 104px;
  top: 283px;
}
.mobileMapCircle .d5 {
  left: 104px;
  top: 343px;
}
.mobileMapCircle .d6 {
  left: 104px;
  top: 398px;
}
.mobileMapCircle .d7 {
  left: 73px;
  top: 470px;
}
.mobileMapCircle .d8 {
  left: 44px;
  top: 515px;
}
.mobileMapCircle .d9 {
  left: 10px;
  top: 560px;
}
.mobileMapCircle .e1 {
  left: 552px;
  top: 250px;
}
.mobileMapCircle .e2 {
  left: 638px;
  top: 180px;
}
.mobileMapCircle .e3 {
  left: 728px;
  top: 180px;
}
.mobileMapCircle .e4 {
  left: 728px;
  top: 110px;
}
.mobileMapCircle .e5 {
  left: 728px;
  top: 36px;
}
.mobileMapCircle .f1 {
  left: 308px;
  top: 330px;
}
.mobileMapCircle .f2 {
  left: 290px;
  top: 385px;
}
.mobileMapCircle .f2-1 {
  left: 215px;
  top: 385px;
}
.mobileMapCircle .f2-1 span {
  display: inline-block;
  width: 100%;
}
.mobileMapCircle .f3 {
  left: 275px;
  top: 442px;
}
.mobileMapCircle .f4 {
  left: 267px;
  top: 490px;
}
.mobileMapCircle .f5 {
  left: 250px;
  top: 545px;
}
.mobileMapCircle .g1 {
  left: 375px;
  top: 440px;
}
.mobileMapCircle .g2 {
  left: 375px;
  top: 545px;
}
.mobileMapCircle .h1 {
  left: 485px;
  top: 398px;
}
.mobileMapCircle .h2 {
  left: 485px;
  top: 440px;
}
.mobileMapCircle .h3 {
  left: 485px;
  top: 485px;
}
.mobileMapCircle .h4 {
  left: 485px;
  top: 528px;
}
.mobileMapCircle .h5 {
  left: 540px;
  top: 560px;
}
.mobileMapCircle .h6 {
  left: 610px;
  top: 560px;
}
.mobileMapCircle .h7 {
  left: 680px;
  top: 560px;
}
.mobileMapCircle .h8 {
  left: 755px;
  top: 560px;
}
.mobileMapCircle .h9 {
  left: 830px;
  top: 560px;
}
.mobileMapCircle .h10 {
  left: 900px;
  top: 560px;
}
.lineMap {
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
}
.lineMap > div {
  position: absolute;
  background-position: left top;
  background-repeat: no-repeat;
}
.lineMap .yellowLine {
  left: 193px;
  top: 0;
  width: 412px;
  height: 397.28px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+WcluWxpF8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ5OC41IDQ4MC43Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQyKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmYmNlMDA7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6ICNkZWRlZGU7CiAgICAgIH0KCiAgICAgIC5zdDMgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlOiAjZmJjZTAwOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kOwogICAgICAgIHN0cm9rZS13aWR0aDogMjBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il/lnJblsaRfMi0yIj4KICAgIDxwb2x5bGluZSBjbGFzcz0ic3QzIiBwb2ludHM9IjQ4OC41IDQ3MC43IDQ4OC41IDIwNC44IDEwIDIwNC44IDEwIDE0LjMgMzU0LjcgMTQuMyIvPgogICAgPHJlY3QgY2xhc3M9InN0MCIgeD0iMzg1LjIiIHk9IjAiIHdpZHRoPSIyNy40IiBoZWlnaHQ9IjI3LjQiLz4KICAgIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00MDEuNiwxMC4xYy0uMy0yLjEtMS0zLTIuNC0zcy0yLjUsMS41LTIuNSw1LjF2Mi4yYzAsMy42LjgsNS4xLDIuNSw1LjFzMi0uOSwyLjQtM2gyLjdjLS41LDMuOC0yLjIsNS40LTUsNS40cy01LjMtMi4zLTUuMy03LjZ2LTIuMWMwLTUuMywyLjItNy42LDUuMy03LjZzNC42LDEuOCw1LDUuNGMwLDAtMi43LDAtMi43LDBaIi8+CiAgPC9nPgogIDxjaXJjbGUgY2xhc3M9InN0MiIgY3g9IjExIiBjeT0iMTYuMyIgcj0iNiIvPgo8L3N2Zz4=);
}
.lineMap .yellowLine.noHover {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+WcluWxpF8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ5OC41IDQ4MC43Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQyKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICM5MDkwOTA7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlOiAjOTA5MDkwOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kOwogICAgICAgIHN0cm9rZS13aWR0aDogMjBweDsKICAgICAgfQoKICAgICAgLnN0MyB7CiAgICAgICAgZmlsbDogI2RlZGVkZTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il/lnJblsaRfMi0yIj4KICAgIDxwb2x5bGluZSBjbGFzcz0ic3QyIiBwb2ludHM9IjQ4OC41IDQ3MC43IDQ4OC41IDIwNC44IDEwIDIwNC44IDEwIDE0LjMgMzU0LjcgMTQuMyIvPgogICAgPHJlY3QgY2xhc3M9InN0MSIgeD0iMzg1LjIiIHk9IjAiIHdpZHRoPSIyNy40IiBoZWlnaHQ9IjI3LjQiLz4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MDEuNiwxMC4xYy0uMy0yLjEtMS0zLTIuNC0zcy0yLjUsMS41LTIuNSw1LjF2Mi4yYzAsMy42LjgsNS4xLDIuNSw1LjFzMi0uOSwyLjQtM2gyLjdjLS41LDMuOC0yLjIsNS40LTUsNS40cy01LjMtMi4zLTUuMy03LjZ2LTIuMWMwLTUuMywyLjItNy42LDUuMy03LjZzNC42LDEuOCw1LDUuNGgtMi43WiIvPgogIDwvZz4KICA8Y2lyY2xlIGNsYXNzPSJzdDMiIGN4PSIxMSIgY3k9IjE2LjMiIHI9IjYiLz4KPC9zdmc+);
}
.lineMap .greenLine {
  left: 585px;
  top: 1px;
  width: 316px;
  height: 393.64px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf5ZyW5bGkXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDM4NC4yNiA0NzguNjgiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojMjE3YTI5O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MjBweDt9LmNscy0ye2ZpbGw6I2ZmZjt9LmNscy0ze2ZpbGw6IzIxN2EyOTt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/lnJblsaRfMi0yIj48cG9seWxpbmUgY2xhc3M9ImNscy0xIiBwb2ludHM9IjEwIDQ2OC42OCAyMjkuNzcgMjY4LjI5IDM3MC41NSAyNjguMjkgMzcwLjU1IDU4LjMyIi8+PHJlY3QgY2xhc3M9ImNscy0zIiB4PSIzNTYuODMiIHdpZHRoPSIyNy40MyIgaGVpZ2h0PSIyNy40MyIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTM3NS4yOCw0Ljg0djIuNDdoLTUuNzV2NC40NWg1LjE0djIuNDVoLTUuMTR2NS4wNmg1Ljc1djIuNDVoLTguNThWNC44NGg4LjU4WiIvPjwvZz48L3N2Zz4=);
}
.lineMap .greenLine.noHover {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+WcluWxpF8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDM4NC4zIDQ3OC43Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQyKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICM5MDkwOTA7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlOiAjOTA5MDkwOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kOwogICAgICAgIHN0cm9rZS13aWR0aDogMjBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il/lnJblsaRfMi0yIj4KICAgIDxwb2x5bGluZSBjbGFzcz0ic3QyIiBwb2ludHM9IjEwIDQ2OC43IDIyOS44IDI2OC4zIDM3MC41IDI2OC4zIDM3MC41IDU4LjMiLz4KICAgIDxyZWN0IGNsYXNzPSJzdDEiIHg9IjM1Ni44IiB5PSIwIiB3aWR0aD0iMjcuNCIgaGVpZ2h0PSIyNy40Ii8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzc1LjMsNC44djIuNWgtNS44djQuNGg1LjF2Mi40aC01LjF2NS4xaDUuOHYyLjVoLTguNlY0LjhoOC42WiIvPgogIDwvZz4KPC9zdmc+);
}
.lineMap .lightBlueLine {
  left: 606px;
  top: 178px;
  width: 401px;
  height: 205.56px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+WcluWxpF8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUwNS40IDI1OS4xIj4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQyKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIHN0cm9rZTogIzgzYTdmZjsKICAgICAgfQoKICAgICAgLnN0MCwgLnN0MSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDIwcHg7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIHN0cm9rZTogIzc4YTdmZjsKICAgICAgfQoKICAgICAgLnN0MyB7CiAgICAgICAgZmlsbDogIzgzYTdmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il/lnJblsaRfMi0yIj4KICAgIDxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjEwIDI0OS4xIDQ5MS44IDI0OS4xIDQ5MS44IDc0LjYiLz4KICAgIDxyZWN0IGNsYXNzPSJzdDMiIHg9IjQ3OCIgeT0iMCIgd2lkdGg9IjI3LjQiIGhlaWdodD0iMjcuNCIvPgogICAgPHBhdGggY2xhc3M9InN0MiIgZD0iTTQ5MS43LDUuNWMzLjIsMCw1LDEuNSw1LDQuNHMtLjcsMy4xLTEuOCwzLjdjMS40LjUsMi4zLDEuOSwyLjMsNHMtMS40LDQuOC01LDQuOGgtNVY1LjVoNC42LDBaTTQ4OS45LDEyLjRoMS44YzEuNiwwLDIuMS0uOSwyLjEtMi40cy0uNC0yLjEtMi41LTIuMWgtMS41djQuNWgwWk00ODkuOSwxOS45aDJjMS43LDAsMi40LS45LDIuNC0yLjVzLS44LTIuNS0yLjctMi41aC0xLjd2NS4xaDBaIi8+CiAgPC9nPgogIDxsaW5lIGNsYXNzPSJzdDEiIHgxPSI0OTIuMSIgeTE9IjU2LjYiIHgyPSIzNjIuOCIgeTI9IjU2LjYiLz4KPC9zdmc+);
}
.lineMap .lightBlueLine.noHover {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+WcluWxpF8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUwNS40IDI1OS4xIj4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQyKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICM5MDkwOTA7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlOiAjOTA5MDkwOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kOwogICAgICAgIHN0cm9rZS13aWR0aDogMjBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBvbHlsaW5lIGNsYXNzPSJzdDIiIHBvaW50cz0iMTAgMjQ5LjEgNDkxLjggMjQ5LjEgNDkxLjggNzQuNiIvPgogIDxyZWN0IGNsYXNzPSJzdDEiIHg9IjQ3OCIgeT0iMCIgd2lkdGg9IjI3LjQiIGhlaWdodD0iMjcuNCIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00OTEuNyw1LjVjMy4yLDAsNSwxLjUsNSw0LjRzLS43LDMuMS0xLjgsMy43YzEuNC41LDIuMywxLjksMi4zLDRzLTEuNCw0LjgtNSw0LjhoLTVWNS41aDQuNi0uMVpNNDg5LjksMTIuNGgxLjhjMS42LDAsMi4xLS45LDIuMS0yLjRzLS40LTIuMS0yLjUtMi4xaC0xLjV2NC41aC4xWk00ODkuOSwxOS45aDJjMS43LDAsMi40LS45LDIuNC0yLjVzLS44LTIuNS0yLjctMi41aC0xLjd2NS4xaDBaIi8+CiAgPGxpbmUgY2xhc3M9InN0MiIgeDE9IjQ5Mi4xIiB5MT0iNTYuNiIgeDI9IjM2Mi44IiB5Mj0iNTYuNiIvPgo8L3N2Zz4=);
}
.lineMap .orangeLine {
  left: -30px;
  top: 260px;
  width: 653px;
  height: 482px;
  background-image: url("./img/orangeLine.svg");
}
.lineMap .orangeLine.noHover {
  background-image: url("./img/orangeLineHover.svg");
}
.lineMap .brownLine {
  left: 299px;
  bottom: -10px;
  width: 304px;
  height: 341px;
  background-image: url("./img/brownLine.svg");
}
.lineMap .brownLine.noHover {
  background-image: url("./img/brownLineHover.svg");
}
.lineMap .blueLine {
  left: 440px;
  bottom: -10px;
  width: 159px;
  height: 338px;
  background-image: url("./img/blueLine.svg");
}
.lineMap .blueLine.noHover {
  background-image: url("./img/blueLineHover.svg");
}
.lineMap .purpleLine {
  left: 587px;
  top: 375px;
  width: 493px;
  height: 170.88px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf5ZyW5bGkXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU5NS4zMyAyMDYuMzYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO30uY2xzLTJ7ZmlsbDojNjU1YWI5O30uY2xzLTN7ZmlsbDpub25lO3N0cm9rZTojNjU1YWI5O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MjBweDt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9Il/lnJblsaRfMi0yIj48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik01NDQuMzgsMTkxLjE1SDIyOC43MmMtMy4zOCwwLTYuNjItMS4xNi05LjA1LTMuMjVMMTAsMTAiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjU2Ny45IiB5PSIxNzguOTMiIHdpZHRoPSIyNy40MyIgaGVpZ2h0PSIyNy40MyIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU3NS40OCwyMDEuM2w0LjcyLTE2Ljg4aDIuNzlsNC43NSwxNi44OGgtMy4wMWwtLjg4LTMuNWgtNC41MmwtLjg2LDMuNWgtMi45OVpNNTc5Ljk1LDE5NS4zNmgzLjI4bC0xLjYxLTYuNjUtMS42Niw2LjY1aC0uMDFaIi8+PC9nPjwvc3ZnPg==);
}

.lineMap .grayLine {
  left: 590px;
  bottom: 33px;
  width: 589px;
  height: 330px;
  background-image: url("./img/grayLine.svg");
}

.lineMap .grayLine.noHover {
  background-image: url("./img/grayLineHover.svg");
}

.lineMap .purpleLine.noHover {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+WcluWxpF8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDU5NS4zIDIwNi40Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQyKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICM5MDkwOTA7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlOiAjOTA5MDkwOwogICAgICAgIHN0cm9rZS1saW5lY2FwOiByb3VuZDsKICAgICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kOwogICAgICAgIHN0cm9rZS13aWR0aDogMjBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Il/lnJblsaRfMi0yIj4KICAgIDxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik01NDQuNCwxOTEuMUgyMjguN2MtMy40LDAtNi42LTEuMi05LjEtMy4yTDEwLDEwIi8+CiAgICA8cmVjdCBjbGFzcz0ic3QxIiB4PSI1NjcuOSIgeT0iMTc4LjkiIHdpZHRoPSIyNy40IiBoZWlnaHQ9IjI3LjQiLz4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01NzUuNSwyMDEuM2w0LjctMTYuOWgyLjhsNC44LDE2LjloLTNsLS45LTMuNWgtNC41bC0uOSwzLjVoLTMsMFpNNTgwLDE5NS40aDMuM2wtMS42LTYuNi0xLjcsNi42aDBaIi8+CiAgPC9nPgo8L3N2Zz4=);
}
.allCircleMap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}
.allCircleMap .mapCircle {
  cursor: pointer;
  position: absolute;
  transition: 0.3s all;
}
.allCircleMap .mapCircle:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.allCircleMap .mainCircle {
  width: 104px;
  left: 550px;
  top: 325px;
  filter: drop-shadow(-10px 10px 10px rgba(255, 255, 255, 0.3));
  transition: 0.3s transform;
  transform: scale(0.9);
  box-shadow: none !important;
}
.allCircleMap .mainCircleHover {
  transform: scale(1.1);
}
.allCircleMap .mainCircleAutoPlay {
  animation: scaleMainCircle 1s infinite alternate;
}
.allCircleMap .a1 {
  left: 680px;
  top: 448px;
}
.allCircleMap .a2 {
  left: 759px;
  top: 516px;
}
.allCircleMap .a3 {
  left: 885px;
  top: 516px;
}
.allCircleMap .a4 {
  left: 1010px;
  top: 516px;
}
.allCircleMap .b1 {
  left: 695px;
  top: 359px;
}
.allCircleMap .b2 {
  left: 787px;
  top: 359px;
}
.allCircleMap .b3 {
  left: 880px;
  top: 359px;
}
.allCircleMap .b4 {
  left: 976px;
  top: 359px;
}
.allCircleMap .b5 {
  left: 976px;
  top: 280px;
}
.allCircleMap .b6 {
  left: 976px;
  top: 203px;
}
.allCircleMap .c1 {
  left: 575px;
  top: 237px;
}
.allCircleMap .c2 {
  left: 575px;
  top: 147px;
}
.allCircleMap .c3 {
  left: 480px;
  top: 147px;
}
.allCircleMap .c4 {
  left: 385px;
  top: 147px;
}
.allCircleMap .c5 {
  left: 283px;
  top: 147px;
}
.allCircleMap .c6 {
  left: 180px;
  top: 147px;
}
.allCircleMap .c7 {
  left: 180px;
  top: 65px;
}
.allCircleMap .c8 {
  left: 253px;
  top: -10px;
}
.allCircleMap .c9 {
  left: 360px;
  top: -10px;
}
.allCircleMap .c10 {
  left: 465px;
  top: -10px;
}
.allCircleMap .d1 {
  left: 496px;
  top: 300px;
}
.allCircleMap .d2 {
  left: 345px;
  top: 251px;
}
.allCircleMap .d3 {
  left: 250px;
  top: 251px;
}
.allCircleMap .d4 {
  left: 113px;
  top: 320px;
}
.allCircleMap .d5 {
  left: 113px;
  top: 390px;
}
.allCircleMap .d6 {
  left: 113px;
  top: 450px;
}
.allCircleMap .d7 {
  left: 83px;
  top: 544px;
}
.allCircleMap .d8 {
  left: 39px;
  top: 605px;
}
.allCircleMap .d9 {
  left: -10px;
  top: 675px;
}
.allCircleMap .e1 {
  left: 665px;
  top: 285px;
}
.allCircleMap .e2 {
  left: 762px;
  top: 204px;
}
.allCircleMap .e3 {
  left: 869px;
  top: 204px;
}
.allCircleMap .e4 {
  left: 869px;
  top: 123px;
}
.allCircleMap .e5 {
  left: 869px;
  top: 30px;
}
.allCircleMap .f1 {
  left: 365px;
  top: 370px;
}
.allCircleMap .f2 {
  left: 355px;
  top: 425px;
}
.allCircleMap .f2-1 {
  left: 265px;
  top: 425px;
  flex-wrap: wrap;
}
.allCircleMap .f2-1 span {
  font-size: 12px;
  display: block;
  width: 100%;
}
.allCircleMap .f3 {
  left: 335px;
  top: 500px;
}
.allCircleMap .f4 {
  left: 322px;
  top: 558px;
}
.allCircleMap .f5 {
  left: 303px;
  top: 638px;
}
.allCircleMap .g1 {
  left: 432px;
  top: 519px;
}
.allCircleMap .g2 {
  left: 432px;
  top: 649px;
}
.allCircleMap .h1 {
  left: 582px;
  top: 445px;
}
.allCircleMap .h2 {
  left: 582px;
  top: 500px;
}
.allCircleMap .h3 {
  left: 582px;
  top: 555px;
}
.allCircleMap .h4 {
  left: 582px;
  top: 610px;
}
.allCircleMap .h5 {
  left: 642px;
  top: 643px;
}
.allCircleMap .h6 {
  left: 725px;
  top: 643px;
}
.allCircleMap .h7 {
  left: 825px;
  top: 643px;
}
.allCircleMap .h8 {
  left: 915px;
  top: 643px;
}
.allCircleMap .h9 {
  left: 1015px;
  top: 643px;
}
.allCircleMap .h10 {
  left: 1105px;
  top: 643px;
}
.AmapCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #655ab9;
  color: #000;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  line-height: 15px;
  padding-top: 2px;
}
@media only screen and (max-width: 599px) {
  .AmapCircle {
    width: 35px;
    height: 35px;
    border: 4px solid #655ab9;
    font-size: 13px;
    line-height: 12px;
  }
}
.BmapCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #83a7ff;
  color: #000;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  line-height: 15px;
  padding-top: 2px;
}
@media only screen and (max-width: 599px) {
  .BmapCircle {
    width: 35px;
    height: 35px;
    border: 4px solid #83a7ff;
    font-size: 13px;
    line-height: 12px;
  }
}
.CmapCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #fbce00;
  color: #000;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  line-height: 15px;
  padding-top: 2px;
}
@media only screen and (max-width: 599px) {
  .CmapCircle {
    width: 35px;
    height: 35px;
    border: 4px solid #fbce00;
    font-size: 13px;
    line-height: 12px;
  }
}
.DmapCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #ff844c;
  color: #000;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  line-height: 15px;
  padding-top: 2px;
}
@media only screen and (max-width: 599px) {
  .DmapCircle {
    width: 35px;
    height: 35px;
    border: 4px solid #ff844c;
    font-size: 13px;
    line-height: 12px;
  }
}
.EmapCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #217a29;
  color: #000;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  line-height: 15px;
  padding-top: 2px;
}
@media only screen and (max-width: 599px) {
  .EmapCircle {
    width: 35px;
    height: 35px;
    border: 4px solid #217a29;
    font-size: 13px;
    line-height: 12px;
  }
}
.FmapCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #af791e;
  color: #000;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  line-height: 15px;
  padding-top: 2px;
}
@media only screen and (max-width: 599px) {
  .FmapCircle {
    width: 35px;
    height: 35px;
    border: 4px solid #af791e;
    font-size: 13px;
    line-height: 12px;
  }

  .f2-1 {
    flex-wrap: wrap;
  }
  .f2-1 span {
    font-size: 12px;
  }
}
.GmapCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #336ccb;
  color: #000;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  line-height: 15px;
  padding-top: 2px;
}
@media only screen and (max-width: 599px) {
  .GmapCircle {
    width: 35px;
    height: 35px;
    border: 4px solid #336ccb;
    font-size: 13px;
    line-height: 12px;
  }
}
.HmapCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #a39895;
  color: #000;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  line-height: 15px;
  padding-top: 2px;
}
@media only screen and (max-width: 599px) {
  .HmapCircle {
    width: 35px;
    height: 35px;
    border: 4px solid #a39895;
    font-size: 13px;
    line-height: 12px;
  }
}
.noHover {
  border-color: #909090;
}
.pcHeader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}
@media only screen and (max-width: 599px) {
  .pcHeader {
    display: none;
  }
}
.pcHeader ul {
  display: flex;
  gap: 46px;
}
.pcHeader ul li a {
  transition: 0.5s color;
}
.pcHeader ul li a:hover {
  color: #217a29;
}
.pcHeader ul .currentPage a {
  color: #217a29;
}
.mHeader {
  display: none;
  position: relative;
}
@media only screen and (max-width: 599px) {
  .mHeader {
    display: block;
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
    padding: 17px 20px;
  }
  .mHeader .logo {
    width: 160px;
  }
  .mHeader .burger {
    width: 24px;
    position: absolute;
    right: 20px;
    top: 22px;
  }
  .mHeader .burger div {
    height: 1px;
    position: absolute;
    left: 0;
    background-color: #000;
    width: 100%;
    transition: 0.3s all;
  }
  .mHeader .burger div:nth-child(1) {
    top: 1px;
  }
  .mHeader .burger div:nth-child(2) {
    top: 8px;
  }
  .mHeader .burger div:nth-child(3) {
    top: 15px;
  }
  .mHeader .burgerOpen div:nth-child(1) {
    display: none;
  }
  .mHeader .burgerOpen div:nth-child(2) {
    transform: rotateZ(40deg);
    top: 7px;
  }
  .mHeader .burgerOpen div:nth-child(3) {
    transform: rotateZ(-40deg);
    top: 7px;
  }
}
.mHeader nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  padding: 30px 20px;
  background: linear-gradient(to bottom, #f8f7f5 0%, #f9ecca 100%);
  display: none;
  flex-direction: column;
  justify-content: space-between;
}
.mHeader nav ul {
  display: flex;
  gap: 30px;
  flex-direction: column;
}
.mHeader nav ul li a {
  font-size: 18px;
}
.mHeader nav ul .currentPage a {
  color: #217a29;
}
.mHeader nav .mFooter {
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.mHeader nav .mFooter .footerLogoM {
  width: 280px;
}
.mHeader nav .mFooter .contact {
  font-size: 15px;
  line-height: 28px;
  font-weight: 300;
}
.mHeader nav .mFooter .remind,
.mHeader nav .mFooter .otherInfo {
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
}
.mHeader .navShow {
  display: flex;
}
.headerTitle {
  font-size: 26px;
  font-weight: 700;
}
@media only screen and (max-width: 599px) {
  .headerTitle {
    font-size: 16px;
    font-weight: 500;
  }
}
.pcFooter {
  max-width: 1312px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding-top: 142px;
}
@media only screen and (max-width: 1370px) {
  .pcFooter {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (max-width: 599px) {
  .pcFooter {
    display: none;
  }
}
.pcFooter .footerLeft {
  display: flex;
  gap: 34px;
  align-items: flex-start;
}
.pcFooter .footerLeft img {
  width: 300px;
}
.pcFooter .footerLeft .contact {
  font-size: 15px;
  line-height: 28px;
}
.pcFooter .footerRight {
  font-size: 14px;
  color: #333;
  line-height: 24px;
  max-width: 419px;
}
@media only screen and (max-width: 599px) {
  .aboutBody .pcFooter {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .aboutBody .pcFooter .footerLeft {
    display: flex;
    flex-direction: column;
  }
}
@media only screen and (max-width: 599px) {
  .aboutBody .pcFooter .footerRight {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 599px) {
  .aboutBody .pcFooter .footerRight br.hide {
    display: none;
  }
}
.littleHelper {
  position: fixed;
  width: 400px;
  bottom: 0;
  left: 50%;
  margin-left: 340px;
  z-index: 4;
}
@media only screen and (max-width: 1400px) {
  .littleHelper {
    margin-left: 300px;
  }
}
@media only screen and (max-width: 1370px) {
  .littleHelper {
    margin-left: 280px;
  }
}
@media only screen and (max-width: 599px) {
  .littleHelper {
    margin-left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(5px);
    left: 0;
  }
  .littleHelper::after {
    position: fixed;
    z-index: 1;
    left: 0;
    bottom: 0;
    content: "";
    opacity: 0.8;
    background: linear-gradient(to top, #fadccd, #fcf5e4, #e58b8b);
    width: 100%;
    height: calc(100% - 55px);
    display: block;
  }
}
.littleHelper .mobieHelperTitle {
  display: none;
}
@media only screen and (max-width: 599px) {
  .littleHelper .mobieHelperTitle {
    text-align: center;
    position: fixed;
    width: 100%;
    height: calc(100% - 55px);
    left: 0;
    bottom: 0;
    display: block;
    z-index: 2;
  }
  .littleHelper .mobieHelperTitle .bigTitle {
    font-size: 36px;
    line-height: 46px;
    font-weight: 700;
    margin-top: 60px;
  }
  .littleHelper .mobieHelperTitle .bigTitle span {
    color: #217a29;
  }
  .littleHelper .mobieHelperTitle .middleTitle {
    color: #fff;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    margin-top: 17px;
    font-family: "din-2014-narrow";
  }
  .littleHelper .mobieHelperTitle .smallTitle {
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    margin-top: 30px;
  }
}
.littleHelper .man {
  display: block;
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 10px;
  animation: littleHelperPC 0.5s 1s both ease-out;
}
@media only screen and (max-width: 599px) {
  .littleHelper .man {
    width: 166px;
    right: 50%;
    margin-right: -230px;
  }
}
.littleHelper .manClose {
  animation: littleHelperClosePC 0.5s 1s both ease-out;
}
.littleHelper .dialogue {
  width: 259px;
  background-color: #333;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 30px;
  z-index: 1;
  margin-bottom: 50px;
  animation: littleHelperPC 0.5s 0.5s both cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media only screen and (max-width: 599px) {
  .littleHelper .dialogue {
    text-align: center;
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 10px;
    margin-left: -120px;
  }
}
.littleHelper .dialogue .title {
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  line-height: 29px;
  margin-bottom: 18px;
}
.littleHelper .dialogue .text {
  color: #fff;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  margin-bottom: 15px;
}
.littleHelper .dialogue .action {
  width: 140px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
  color: #217a29;
  font-size: 16px;
  font-weight: 300;
  display: block;
}
@media only screen and (max-width: 599px) {
  .littleHelper .dialogue .action {
    margin: 0 auto;
  }
}
.littleHelper .dialogueClose {
  animation: littleHelperClosePC 0.5s 0.5s both
    cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pcBlock {
  position: relative;
  width: 100%;
  padding-bottom: 80px;
  background-size: cover;
  background-attachment: fixed;
  z-index: 1;
}
@media only screen and (max-width: 1310px) {
  .pcBlock {
    overflow: auto;
  }
}
@media only screen and (max-width: 599px) {
  .pcBlock {
    display: none;
  }
}
.pcBlock .inner {
  max-width: 1312px;
  margin: 0 auto;
}
@media only screen and (max-width: 1370px) {
  .pcBlock .inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (max-width: 1310px) {
  .pcBlock .inner {
    min-width: 1285px;
  }
}
.pcBlock .inner .main {
  margin-top: 20px;
  margin-bottom: 80px;
  display: flex;
  justify-content: space-between;
}
.pcBlock .inner .main .leftInfo {
  width: calc(100% - 1189px);
  display: flex;
  flex-direction: column;
}
.pcBlock .inner .main .leftInfo .leftInfoTop .middleTitle {
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: #fff;
  margin-top: 0;
  white-space: nowrap;
  font-family: "din-2014-narrow";
  letter-spacing: 0;
}
.pcBlock .inner .main .leftInfo .leftInfoTop .smallTitle {
  margin-top: 24px;
  font-weight: 700;
  font-size: 26px;
  line-height: 40px;
  white-space: nowrap;
  color: #595959;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder {
  margin-top: 130px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li {
  display: flex;
  gap: 10px;
  cursor: pointer;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li .circleWord {
  font-size: 15px;
  white-space: nowrap;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li .circle {
  margin-bottom: 10px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li:nth-child(1) .circle {
  color: #fff;
  background-color: #655ab9;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li:nth-child(2) .circle {
  color: #fff;
  background-color: #83a7ff;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li:nth-child(3) .circle {
  color: #fff;
  background-color: #fbce00;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li:nth-child(4) .circle {
  color: #fff;
  background-color: #ff844c;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li:nth-child(5) .circle {
  color: #fff;
  background-color: #217a29;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li:nth-child(6) .circle {
  color: #fff;
  background-color: #af791e;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li:nth-child(7) .circle {
  color: #fff;
  background-color: #336ccb;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.pcBlock .inner .main .leftInfo .leftInfoUnder li:nth-child(8) .circle {
  color: #fff;
  background-color: #a39895;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
  margin-bottom: 0;
}
.pcBlock .inner .main .rightMap {
  width: 1089px;
  position: relative;
  margin-top: 70px;
}
.pcBlock .inner .main .rightMap .mainMap {
  width: 100%;
}
.otherWord {
  position: absolute;
  left: 635px;
  bottom: -8px;
  width: 590px;
}
.mBlock {
  display: none;
}
@media only screen and (max-width: 599px) {
  .mBlock {
    display: block;
    min-height: calc(100vh - 60px);
    background-size: cover;
    margin-top: 60px;
    padding-bottom: 30px;
    position: relative;
    z-index: 1;
  }
}
.mBlock .scrollIcon {
  overflow-x: auto;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
  padding-top: 20px;
}
.mBlock .scrollIcon li {
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
}
.mBlock .scrollIcon li:nth-child(1) .circle {
  color: #fff;
  background-color: #655ab9;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.mBlock .scrollIcon li:nth-child(2) .circle {
  color: #fff;
  background-color: #83a7ff;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.mBlock .scrollIcon li:nth-child(3) .circle {
  color: #fff;
  background-color: #fbce00;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.mBlock .scrollIcon li:nth-child(4) .circle {
  color: #fff;
  background-color: #ff844c;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.mBlock .scrollIcon li:nth-child(5) .circle {
  color: #fff;
  background-color: #217a29;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.mBlock .scrollIcon li:nth-child(6) .circle {
  color: #fff;
  background-color: #af791e;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.mBlock .scrollIcon li:last-child {
  margin-right: 0;
}
.mBlock .scrollIcon li:nth-child(7) .circle {
  color: #fff;
  background-color: #336ccb;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.mBlock .scrollIcon li:nth-child(8) .circle {
  color: #fff;
  background-color: #a39895;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
}
.mBlock .scrollIcon li .circleWord {
  font-size: 15px;
  font-weight: 400;
  margin-left: 4px;
}
.mBlock .openPathInfo {
  width: 110px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #000;
  background-color: rgba(255, 255, 255, 0.8);
  line-height: 34px;
  text-align: center;
  position: fixed;
  right: 20px;
  bottom: 20px;
  font-size: 14px;
  font-weight: 300;
  z-index: 3;
}
.mBlock .mobileMap {
  position: relative;
  width: 100%;
  overflow: auto;
  margin-top: 35px;
  padding-top: 20px;
}
.mBlock .mobileMap .mobileMapContent {
  position: relative;
}
.mBlock .mobileMap .mobileMapContent .mobileMapLineImg {
  width: 960px;
}
.note {
  padding: 100px 0 21px 0;
  background: linear-gradient(to bottom, #ffe1f0, #ffffff, #a4d3ff);
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 599px) {
  .note {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 0;
    background: #fff;
    box-shadow: 2px -4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 10px 10px 0 0;
    padding: 0 20px;
    overflow: auto;
    transition: 0.7s all;
    z-index: 4;
  }
}
@media only screen and (max-width: 599px) {
  .note.openNote {
    height: calc(100% - 120px);
    padding: 40px 20px;
  }
}
.note .closeBtn {
  display: none;
}
@media only screen and (max-width: 599px) {
  .note .closeBtn {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
  }
}
.note .inner {
  margin: 0 auto;
  max-width: 1135px;
}
.note .inner .noteListContainer {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer {
    gap: 20px;
  }
}
.note .inner .noteListContainer .noteList {
  display: flex;
  gap: 74px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList {
    flex-direction: column;
    gap: 0;
  }
}
.note .inner .noteListContainer .noteList:nth-child(1) .listTitleTxt {
  color: #655ab9;
}
.note .inner .noteListContainer .noteList:nth-child(1) .listCircle {
  color: #fff;
  background-color: #655ab9;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 40px;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList:nth-child(1) .listCircle {
    font-size: 22px;
    width: 30px;
    height: 30px;
  }
}
.note .inner .noteListContainer .noteList:nth-child(2) .listTitleTxt {
  color: #336ccb;
}
.note .inner .noteListContainer .noteList:nth-child(2) .listCircle {
  color: #fff;
  background-color: #83a7ff;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 40px;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList:nth-child(2) .listCircle {
    font-size: 22px;
    width: 30px;
    height: 30px;
  }
}
.note .inner .noteListContainer .noteList:nth-child(3) .listTitleTxt {
  color: #fbce00;
}
.note .inner .noteListContainer .noteList:nth-child(3) .listCircle {
  color: #fff;
  background-color: #fbce00;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 40px;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList:nth-child(3) .listCircle {
    font-size: 22px;
    width: 30px;
    height: 30px;
  }
}
.note .inner .noteListContainer .noteList:nth-child(4) .listTitleTxt {
  color: #ff844c;
}
.note .inner .noteListContainer .noteList:nth-child(4) .listCircle {
  color: #fff;
  background-color: #ff844c;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 40px;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList:nth-child(4) .listCircle {
    font-size: 22px;
    width: 30px;
    height: 30px;
  }
}
.note .inner .noteListContainer .noteList:nth-child(5) .listTitleTxt {
  color: #217a29;
}
.note .inner .noteListContainer .noteList:nth-child(5) .listCircle {
  color: #fff;
  background-color: #217a29;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 40px;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList:nth-child(5) .listCircle {
    font-size: 22px;
    width: 30px;
    height: 30px;
  }
}
.note .inner .noteListContainer .noteList:nth-child(6) .listTitleTxt {
  color: #af791e;
}
.note .inner .noteListContainer .noteList:nth-child(6) .listCircle {
  color: #fff;
  background-color: #af791e;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 40px;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList:nth-child(6) .listCircle {
    font-size: 22px;
    width: 30px;
    height: 30px;
  }
}
.note .inner .noteListContainer .noteList:nth-child(7) .listTitleTxt {
  color: #83a7ff;
}
.note .inner .noteListContainer .noteList:nth-child(7) .listCircle {
  color: #fff;
  background-color: #336ccb;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 40px;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList:nth-child(7) .listCircle {
    font-size: 22px;
    width: 30px;
    height: 30px;
  }
}
.note .inner .noteListContainer .noteList:nth-child(8) .listTitleTxt {
  color: #83a7ff;
}
.note .inner .noteListContainer .noteList:nth-child(8) .listCircle {
  color: #fff;
  background-color: #a39895;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 40px;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList:nth-child(8) .listCircle {
    font-size: 22px;
    width: 30px;
    height: 30px;
  }
}
.note .inner .noteListContainer .noteList .listTitle {
  display: flex;
  gap: 12px;
  cursor: pointer;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList .listTitle {
    gap: 8px;
  }
}
.note .inner .noteListContainer .noteList .listTitle .listTitleTxt {
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  color: #343434;
  width: 200px;
  padding-top: 13px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList .listTitle .listTitleTxt {
    font-size: 16px;
    padding-top: 3px;
  }
}
.note .inner .noteListContainer .noteList ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 10px;
  padding-top: 10px;
}
@media only screen and (max-width: 599px) {
  .note .inner .noteListContainer .noteList ul {
    column-gap: 16px;
    row-gap: 14px;
  }
}
.note .inner .noteListContainer .noteList ul li {
  font-size: 16px;
  font-weight: 300;
  width: 135px;
  cursor: pointer;
  transition: 0.3s color;
  line-height: 25px;
}
.note .inner .noteListContainer .noteList ul.listUlA li:hover {
  color: #655ab9;
}
.note .inner .noteListContainer .noteList ul.listUlB li:hover {
  color: #83a7ff;
}
.note .inner .noteListContainer .noteList ul.listUlC li:hover {
  color: #fbce00;
}
.note .inner .noteListContainer .noteList ul.listUlD li:hover {
  color: #ff844c;
}
.note .inner .noteListContainer .noteList ul.listUlE li:hover {
  color: #217a29;
}
.note .inner .noteListContainer .noteList ul.listUlF li:hover {
  color: #af791e;
}
.note .inner .noteListContainer .noteList ul.listUlG li:hover {
  color: #336ccb;
}
.note .inner .noteListContainer .noteList ul.listUlH li:hover {
  color: #a39895;
}
video {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center center;
}
.aboutBody {
  background: linear-gradient(to bottom, #ffe1f0, #ffffff, #a4d3ff);
}
.aboutBody .note {
  background: none;
  padding-top: 0;
  position: static;
  height: auto;
}
.aboutBody .note .innerAbout {
  max-width: 1198px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .aboutBody .note .innerAbout {
    padding: 0 20px;
  }
}
.aboutBody .note .innerAbout .innerAboutTop {
  margin-bottom: 60px;
}
.aboutBody .note .innerAbout .innerAboutContent {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media only screen and (max-width: 768px) {
  .aboutBody .note .innerAbout .innerAboutContent {
    flex-direction: column;
    align-items: center;
  }
}
.aboutBody .note .innerAbout .innerAboutContent .innerAboutTitle {
  font-size: 60px;
  font-weight: 700;
  line-height: 65px;
}
@media only screen and (max-width: 768px) {
  .aboutBody .note .innerAbout .innerAboutContent .innerAboutTitle {
    text-align: center;
    padding-top: 120px;
    font-size: 42px;
    line-height: 50px;
    padding-bottom: 40px;
  }
}
.aboutBody .note .innerAbout .innerAboutContent .innerAboutTitle span {
  color: #fff;
  font-weight: 700;
  font-size: 42px;
}
.aboutBody .note .innerAbout .innerAboutContent .innerAboutWhiteBg {
  background-color: #fff;
  max-width: 754px;
  width: 100%;
  padding: 30px 120px 30px 90px;
  border-radius: 10px;
}
@media only screen and (max-width: 768px) {
  .aboutBody .note .innerAbout .innerAboutContent .innerAboutWhiteBg {
    padding: 30px 20px;
  }
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .contentTitle {
  display: flex;
  align-items: flex-start;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .contentTitle
  span {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  display: block;
  padding-top: 57px;
}
@media only screen and (max-width: 768px) {
  .aboutBody
    .note
    .innerAbout
    .innerAboutContent
    .innerAboutWhiteBg
    .contentTitle
    span {
    padding-top: 0;
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .aboutBody
    .note
    .innerAbout
    .innerAboutContent
    .innerAboutWhiteBg
    .contentTitle
    img {
    display: none;
  }
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWordMargin {
  margin-top: 20px;
}
@media only screen and (max-width: 768px) {
  .aboutBody
    .note
    .innerAbout
    .innerAboutContent
    .innerAboutWhiteBg
    .aboutContetWordMargin {
    margin-top: 0;
  }
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  padding-left: 22px;
}
@media only screen and (max-width: 768px) {
  .aboutBody
    .note
    .innerAbout
    .innerAboutContent
    .innerAboutWhiteBg
    .aboutContetWord {
    padding-left: 0;
  }
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  b {
  display: block;
  font-weight: 700;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .purple
  .icon {
  background-color: #655ab9;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .purple
  span {
  color: #655ab9;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .lightBlue
  .icon {
  background-color: #83a7ff;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .lightBlue
  span {
  color: #83a7ff;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .yellow
  .icon {
  background-color: #fbce00;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .yellow
  span {
  color: #fbce00;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .orange
  .icon {
  background-color: #ff844c;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .orange
  span {
  color: #ff844c;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .green
  .icon {
  background-color: #217a29;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .green
  span {
  color: #217a29;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .brown
  .icon {
  background-color: #af791e;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .brown
  span {
  color: #af791e;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .blue
  .icon {
  background-color: #336ccb;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .blue
  span {
  color: #336ccb;
}

.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .gray
  .icon {
  background-color: #a39895;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .gray
  span {
  color: #a39895;
}

.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .iconTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 5px;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .iconTitle
  .icon {
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.aboutBody
  .note
  .innerAbout
  .innerAboutContent
  .innerAboutWhiteBg
  .aboutContetWord
  .iconTitle
  span {
  font-weight: 700;
  font-size: 18px;
}
@media only screen and (max-width: 768px) {
  .aboutBody
    .note
    .innerAbout
    .innerAboutContent
    .innerAboutWhiteBg
    .aboutContetWord
    .iconTitle
    span {
    line-height: 26px;
  }
}
.aboutBody .note .innerAbout .innerAboutContent .logo {
  width: 400px;
}
@media only screen and (max-width: 768px) {
  .aboutBody .note .innerAbout .innerAboutContent .logo {
    width: 300px;
    margin-bottom: 40px;
  }
}
.tooltipA {
  border-color: #655ab9;
}
.tooltipA .tooltipCircle {
  color: #fff;
  background-color: #655ab9;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.tooltipB {
  border-color: #83a7ff;
}
.tooltipB .tooltipCircle {
  color: #fff;
  background-color: #83a7ff;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.tooltipC {
  border-color: #fbce00;
}
.tooltipC .tooltipCircle {
  color: #fff;
  background-color: #fbce00;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.tooltipD {
  border-color: #ff844c;
}
.tooltipD .tooltipCircle {
  color: #fff;
  background-color: #ff844c;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.tooltipE {
  border-color: #217a29;
}
.tooltipE .tooltipCircle {
  color: #fff;
  background-color: #217a29;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.tooltipF {
  border-color: #af791e;
}
.tooltipF .tooltipCircle {
  color: #fff;
  background-color: #af791e;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.tooltipG {
  border-color: #336ccb;
}
.tooltipG .tooltipCircle {
  color: #fff;
  background-color: #336ccb;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.tooltipH {
  border-color: #a39895;
}
.tooltipH .tooltipCircle {
  color: #fff;
  background-color: #a39895;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.tooltip {
  position: absolute;
  left: 0;
  top: 0;
  width: 333px;
  height: 143px;
  background-color: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border-top-width: 10px;
  border-top-style: solid;
  z-index: 9;
  padding: 16px 20px;
  display: none;
}
.tooltip.tooltipOpen {
  display: block;
}
@media only screen and (max-width: 599px) {
  .tooltip.tooltipOpen {
    display: none;
  }
}
.tooltip .tooltipTop {
  display: flex;
  justify-content: space-between;
}
.tooltip .tooltipTop .tooltipTopLeft {
  display: flex;
  gap: 10px;
}
.tooltip .tooltipTop .tooltipTopLeft .tooltipNum {
  font-weight: 600;
  font-size: 45px;
  white-space: nowrap;
  line-height: 35px;
}
.tooltip .tooltipTop .tooltipTopLeft .hide {
  display: none;
}
.tooltip .tooltipTop .tooltipTopLeft .onlyForMain {
  font-size: 24px;
  font-weight: 500;
  display: none;
}
.tooltip .tooltipTop .tooltipTopLeft .onlyForMainShow {
  display: block;
}
.tooltip .tooltipTop .tooltipTopRight {
  font-size: 14px;
  padding-left: 10px;
  border-left: 1px solid #555;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tooltip .tooltipTop .tooltipTopRight .tooltipDegree {
  font-weight: 800;
  font-size: 14px;
}
.tooltip .tooltipTop .tooltipTopRight .tooltipLearnTime {
  color: #555;
  font-size: 14px;
}
.tooltip .tooltipTop .tooltipTopRight .tooltipLevel {
  color: #555;
  font-size: 14px;
}
.tooltip .tooltipUnderTitle {
  font-weight: 500;
  font-size: 24px;
  margin-top: 5px;
}
.tooltip .tooltipUnderTitleTopMore {
  margin-top: 20px;
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  left: 0;
  top: 0;
  z-index: 10;
  display: none;
}
.mask .inner {
  max-width: 1312px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.mask .inner .lightBoxA {
  border-top: 10px solid #655ab9;
}
.mask .inner .lightBoxA .title .circle {
  color: #fff;
  background-color: #655ab9;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.mask .inner .lightBoxA .contentTop span {
  color: #655ab9;
}
.mask .inner .lightBoxA .contentTop b {
  color: #655ab9;
}
.mask .inner .lightBoxA .num {
  color: #655ab9;
}
.mask .inner .lightBoxB {
  border-top: 10px solid #83a7ff;
}
.mask .inner .lightBoxB .title .circle {
  color: #fff;
  background-color: #83a7ff;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.mask .inner .lightBoxB .contentTop span {
  color: #83a7ff;
}
.mask .inner .lightBoxB .contentTop b {
  color: #83a7ff;
}
.mask .inner .lightBoxB .num {
  color: #83a7ff;
}
.mask .inner .lightBoxC {
  border-top: 10px solid #fbce00;
}
.mask .inner .lightBoxC .title .circle {
  color: #fff;
  background-color: #fbce00;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.mask .inner .lightBoxC .contentTop span {
  color: #fbce00;
}
.mask .inner .lightBoxC .contentTop b {
  color: #fbce00;
}
.mask .inner .lightBoxC .num {
  color: #fbce00;
}
.mask .inner .lightBoxD {
  border-top: 10px solid #ff844c;
}
.mask .inner .lightBoxD .title .circle {
  color: #fff;
  background-color: #ff844c;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.mask .inner .lightBoxD .contentTop span {
  color: #ff844c;
}
.mask .inner .lightBoxD .contentTop b {
  color: #ff844c;
}
.mask .inner .lightBoxD .num {
  color: #ff844c;
}
.mask .inner .lightBoxE {
  border-top: 10px solid #217a29;
}
.mask .inner .lightBoxE .title .circle {
  color: #fff;
  background-color: #217a29;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.mask .inner .lightBoxE .contentTop span {
  color: #217a29;
}
.mask .inner .lightBoxE .contentTop b {
  color: #217a29;
}
.mask .inner .lightBoxE .num {
  color: #217a29;
}
.mask .inner .lightBoxF {
  border-top: 10px solid #af791e;
}
.mask .inner .lightBoxF .title .circle {
  color: #fff;
  background-color: #af791e;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.mask .inner .lightBoxF .contentTop span {
  color: #af791e;
}
.mask .inner .lightBoxF .contentTop b {
  color: #af791e;
}
.mask .inner .lightBoxF .num {
  color: #af791e;
}
.mask .inner .lightBoxG {
  border-top: 10px solid #336ccb;
}
.mask .inner .lightBoxG .title .circle {
  color: #fff;
  background-color: #336ccb;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
.mask .inner .lightBoxG .contentTop span {
  color: #336ccb;
}
.mask .inner .lightBoxG .contentTop b {
  color: #336ccb;
}
.mask .inner .lightBoxG .num {
  color: #336ccb;
}
.mask .inner .lightBoxH {
  border-top: 10px solid #a39895;
}
.mask .inner .lightBoxH .title .circle {
  color: #fff;
  background-color: #a39895;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  font-size: 30px;
  width: 40px;
  height: 40px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBoxA .title .circle,
  .mask .inner .lightBoxB .title .circle,
  .mask .inner .lightBoxC .title .circle,
  .mask .inner .lightBoxD .title .circle,
  .mask .inner .lightBoxE .title .circle,
  .mask .inner .lightBoxF .title .circle,
  .mask .inner .lightBoxG .title .circle,
  .mask .inner .lightBoxH .title .circle {
    margin-bottom: 10px;
  }
}
.mask .inner .lightBoxH .contentTop span {
  color: #a39895;
}
.mask .inner .lightBoxH .contentTop b {
  color: #a39895;
}
.mask .inner .lightBoxH .num {
  color: #a39895;
}
.mask .inner .lightBox {
  height: calc(100% - 60px);
  max-width: 771px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  padding-top: 40px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox {
    width: calc(100% - 42px);
    margin: 0 auto;
    padding-top: 60px;
    border-radius: 10px;
  }
}
.mask .inner .lightBox .titleContainer {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .titleContainer {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.mask .inner .lightBox .titleContainer .title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.mask .inner .lightBox .titleContainer .title .num {
  font-size: 60px;
  font-weight: 600;
  margin-left: 10px;
  line-height: 39px;
  margin-right: 9px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .titleContainer .title .num {
    font-size: 40px;
    margin-bottom: 10px;
  }
}
.mask .inner .lightBox .titleContainer .title .numHide {
  display: none;
}
.mask .inner .lightBox .titleContainer .title .circleHide {
  display: none;
}
.mask .inner .lightBox .titleContainer .title .titleName {
  font-size: 24px;
  line-height: 24px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .titleContainer .title .titleName {
    margin-bottom: 15px;
  }
}
.mask .inner .lightBox .titleContainer .title .titleNameNoMargin {
  margin-left: 0;
}
.mask .inner .lightBox .titleContainer .title .titleRightContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .titleContainer .title .titleRightContainer {
    padding-left: 8px;
    border-left: 1px solid #555;
  }
}
.mask .inner .lightBox .titleContainer .title .titleRightContainer .degree {
  font-weight: 800;
  font-size: 14px;
  border-left: 1px solid #555;
  padding-left: 5px;
  margin-left: 20px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .titleContainer .title .titleRightContainer .degree {
    border: none;
    margin-left: 0;
    padding-left: 0;
  }
}
.mask .inner .lightBox .titleContainer .title .titleRightContainer .degreeHide {
  display: none;
}
.mask .inner .lightBox .titleContainer .title .titleRightContainer .learnTime {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  margin-left: 16px;
}
@media only screen and (max-width: 599px) {
  .mask
    .inner
    .lightBox
    .titleContainer
    .title
    .titleRightContainer
    .learnTimeNoMargin {
    margin-left: 0;
  }
}
.mask .inner .lightBox .titleContainer .title .titleRightContainer .level {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  margin-left: 16px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .titleContainer .title .titleRightContainer .level {
    margin-left: 0;
    width: 100%;
    margin-top: 4px;
  }
}
.mask .inner .lightBox .titleContainer .closeBtn {
  right: 30px;
  top: -20px;
  cursor: pointer;
  position: absolute;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .titleContainer .closeBtn {
    width: 30px;
    top: -48px;
    right: 14px;
  }
}
.mask .inner .lightBox .scrollContent {
  overflow: auto;
  height: calc(100% - 100px);
  margin-top: 40px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .scrollContent {
    margin-top: 30px;
    padding-bottom: 30px;
  }
}
.mask .inner .lightBox .scrollContent .contentInfo {
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .scrollContent .contentInfo {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.mask .inner .lightBox .scrollContent .contentInfo::after {
  width: 100%;
  display: block;
  content: "";
  clear: both;
}
.mask .inner .lightBox .scrollContent .contentInfo .arrow {
  position: relative;
  left: -15px;
  float: left;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .scrollContent .contentInfo .arrow {
    display: none;
  }
}
.mask .inner .lightBox .scrollContent .contentInfo .content {
  float: right;
  width: calc(100% - 113px);
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .scrollContent .contentInfo .content {
    width: 100%;
    float: none;
  }
}
.mask .inner .lightBox .scrollContent .contentInfo .content .contentTop {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  padding-top: 80px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .scrollContent .contentInfo .content .contentTop {
    padding-top: 0;
    font-size: 17px;
    line-height: 28px;
  }
}
.mask .inner .lightBox .scrollContent .contentInfo .content .contentTop span {
  font-weight: 700;
}
.mask .inner .lightBox .scrollContent .contentInfo .content .contentTop b {
  font-weight: 700;
  display: block;
}
.mask .inner .lightBox .scrollContent .contentInfo .content .contentTop ul li {
  list-style: disc;
  margin-left: 20px;
}
.mask .inner .lightBox .scrollContent .contentInfo .source {
  font-size: 15px;
  margin-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #000;
}
.mask .inner .lightBox .scrollContent .contentInfo .source ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mask .inner .lightBox .scrollContent .contentInfo .source ul li {
  font-size: 15px;
}
.mask .inner .lightBox .scrollContent .contentInfo .source ul li a {
  color: #555;
}
.mask .inner .lightBox .scrollContent .contentInfo .source ul li a:hover {
  text-decoration: underline;
}
.mask .inner .lightBox .scrollContent .contentInfo .hide {
  display: none;
}
.mask .inner .lightBox .scrollContent .other {
  border-top: dashed 3px #000;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .scrollContent .other {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 0;
    height: 90px;
    gap: 10px;
  }
}
@media only screen and (max-width: 400px) {
  .mask .inner .lightBox .scrollContent .other {
    margin-bottom: 50px;
  }
}
.mask .inner .lightBox .scrollContent .other .ctrlLight {
  display: flex;
}
.mask .inner .lightBox .scrollContent .other .ctrlLight .pageInfoContainer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  cursor: pointer;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .scrollContent .other .ctrlLight .pageInfoContainer {
    align-items: flex-start;
  }
}
.mask
  .inner
  .lightBox
  .scrollContent
  .other
  .ctrlLight
  .pageInfoContainer
  .pageInfo {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
@media only screen and (max-width: 599px) {
  .mask
    .inner
    .lightBox
    .scrollContent
    .other
    .ctrlLight
    .pageInfoContainer
    .pageInfo {
    flex-wrap: wrap;
  }
}
.mask
  .inner
  .lightBox
  .scrollContent
  .other
  .ctrlLight
  .pageInfoContainer
  .pageInfo
  .num {
  font-size: 26px;
  font-weight: 600;
  line-height: 21px;
}
@media only screen and (max-width: 599px) {
  .mask
    .inner
    .lightBox
    .scrollContent
    .other
    .ctrlLight
    .pageInfoContainer
    .pageInfo
    .num {
    width: 100%;
  }
}
.mask
  .inner
  .lightBox
  .scrollContent
  .other
  .ctrlLight
  .pageInfoContainer
  .pageInfo
  .name {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
}
@media only screen and (max-width: 599px) {
  .mask
    .inner
    .lightBox
    .scrollContent
    .other
    .ctrlLight
    .pageInfoContainer
    .pageInfo
    .name {
    width: 100%;
    line-height: 18px;
  }
}
.mask .inner .lightBox .scrollContent .other .ctrlLight .pageInfoContainerHide {
  display: none;
}
.mask .inner .lightBox .scrollContent .other .prev img {
  margin-right: 4px;
}
@media only screen and (max-width: 599px) {
  .mask .inner .lightBox .scrollContent .other .next {
    text-align: right;
    padding-top: 20px;
  }
  .mask .inner .lightBox .scrollContent .other .prev {
    padding-top: 20px;
  }
  .mask .inner .lightBox .scrollContent .other .prev img,
  .mask .inner .lightBox .scrollContent .other .next img {
    margin-top: 25px;
  }
}
.mask .inner .lightBox .scrollContent .other .next img {
  margin-left: 4px;
}
.maskOpen {
  display: block;
}

.sourceHr {
  margin-top: 30px;
}

.questionContainerHide {
  display: none;
}
.questionTitle {
  font-weight: 700;
  font-size: 18px;
  padding-top: 20px;
  padding-bottom: 18px;
}
.questionUl {
  margin-bottom: 18px;
  background-color: #eeeeee;
  border: 1px solid #655ab9;
  border-radius: 10px;
  padding: 20px;
}
.questionUl li .liQues {
  font-size: 18px;
  margin-bottom: 16px;
}

.questionUl li .liQues span {
  display: inline-block;
  padding-right: 10px;
  font-size: 26px;
  font-weight: 700;
}
.answerCon {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.a {
  font-size: 16px;
  line-height: 22px;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 1);
  transition: 0.3s all;
  margin-left: 42px;
  border: 1px solid #000;
  width: calc(100% - 42px);
}

.a:hover {
  background-color: rgba(101, 90, 185, 0.2);
}
.a.active {
  background-color: #655ab9;
  color: #fff;
}
.reminder {
  margin-top: 18px;
  padding-left: 42px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.reminderHide {
  display: none;
}

@media only screen and (max-width: 599px) {
  .a {
    width: 100%;
    margin-left: 0;
  }
  .reminder {
    padding-left: 0;
  }
}

.ansBoxHide {
  display: none;
}