@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

html {
  font-size: 62.5%;
}

body,
div,
a,
ul,
li,
img,
table,
tr,
td,
header,
footer,
h1,
h2,
h3,
h4,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #000;
  font-family: Arial, "Noto Sans TC";
  list-style: none;
  border: none;
  border-collapse: collapse;
  box-sizing: border-box;
  letter-spacing: 1px;
}

header {
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  position: fixed;
  top: 0;
  z-index: 5;
}

@media only screen and (max-width: 1280px) {
  header {
    justify-content: flex-start;
  }
}

@media only screen and (max-width: 599px) {
  header {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  }
}

header .burger {
  display: none;
}

@media only screen and (max-width: 1280px) {
  header .burger {
    display: block;
    width: 30px;
    position: absolute;
    right: 30px;
    top: 35px;
    z-index: 3;
  }

  header .burger div {
    position: absolute;
    height: 4px;
    background-color: #000;
    width: 100%;
    top: 0;
    transition: 0.3s all;
  }

  header .burger div:nth-child(2) {
    top: 8px;
  }

  header .burger div:nth-child(3) {
    top: 16px;
  }
}

header .burger.open {
  top: 40px;
}

header .burger.open div {
  transform: rotateZ(43deg);
}

header .burger.open div:nth-child(2) {
  transform: rotateZ(-43deg);
  top: 0;
}

header .burger.open div:last-child {
  display: none;
}

@media only screen and (max-width: 1280px) {
  header .nav {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    padding-top: 50px;
  }
}

header .nav li {
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  width: 150px;
  text-align: center;
  display: inline-block;
  position: relative;
}

header .nav li::after {
  height: 15px;
  width: 1px;
  content: "";
  display: block;
  background-color: #000;
  position: absolute;
  top: 7px;
  right: 0;
}

header .nav li:last-child::after {
  display: none;
}

@media only screen and (max-width: 1280px) {
  header .nav.open {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  header .nav.open li {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
}

@media only screen and (max-width: 1280px) and (max-width: 599px) {
  header .nav.open li {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1280px) {
  header .nav.open li::after {
    display: none;
  }
}

footer {
  background-color: #4baa89;
  display: flex;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
  z-index: 2;
}

html {
  scroll-behavior: smooth;
}

@media only screen and (max-width: 875px) {
  .obj {
    display: none;
  }
}

.kv {
  width: 100%;
  position: relative;
  margin-top: 100px;
  height: 947px;
}

@media only screen and (max-width: 1180px) {
  .kv {
    height: auto;
  }
}

@media only screen and (max-width: 1180px) {
  .kv div {
    display: none;
  }
}

.kv .mobileKv {
  display: none;
  width: 100%;
}

@media only screen and (max-width: 1180px) {
  .kv .mobileKv {
    display: block;
  }
}

.kv .kvBgFront {
  position: absolute;
  background-image: url(./img/kvBgFront.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 947px;
  width: 100%;
  z-index: 3;
}

.kv .kvBgBehind {
  position: absolute;
  background-image: url(./img/kvBgBehind.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  height: 947px;
  width: 100%;
  z-index: 1;
}

.kv .kvInner {
  position: relative;
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  z-index: 2;
}

.kv .kvInner .ww {
  position: fixed;
}

.kv .kvInner .w1 {
  width: 158px;
  top: 362px;
  left: 50%;
  margin-left: -470px;
}

.kv .kvInner .w2 {
  width: 107px;
  top: 380px;
  left: 50%;
  margin-left: -350px;
}

.kv .kvInner .w3 {
  width: 111px;
  top: 385px;
  left: 50%;
  margin-left: -230px;
}

.kv .kvInner .w4 {
  width: 105px;
  top: 378px;
  left: 50%;
  margin-left: -108px;
}

.kv .kvInner .w5 {
  width: 111px;
  top: 380px;
  left: 50%;
  margin-left: 5px;
}

.kv .kvInner .w6 {
  width: 110px;
  top: 380px;
  left: 50%;
  margin-left: 130px;
}

.kv .kvInner .w7 {
  width: 106px;
  top: 380px;
  left: 50%;
  margin-left: 245px;
}

.kv .kvInner .w8 {
  width: 109px;
  top: 380px;
  left: 50%;
  margin-left: 360px;
}

.kv .kvInner .subtitle {
  width: 257px;
  top: 580px;
  left: 50%;
  margin-left: -150px;
}

.kv .kvInner .year {
  width: 85px;
  top: 330px;
  left: 50%;
  margin-left: -330px;
}

.kv .kvInner .line {
  width: 803px;
  top: 495px;
  left: 50%;
  margin-left: -332px;
}

.block {
  position: relative;
  z-index: 2;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 100px;
  padding-bottom: 100px;
}

@media only screen and (max-width: 599px) {
  .block {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.block5 {
  background-image: url(./img/b1.jpg);
}

.block5 .title {
  font-size: 35px;
  font-weight: 900;
  letter-spacing: 5px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 320px;
  height: 73px;
  text-align: center;
  line-height: 71px;
  margin: 0 auto 30px auto;
  scroll-margin-top: 150px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjczIiB2aWV3Qm94PSIwIDAgMzIwIDczIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMzEzLjU2NiAwLjg1NDQ5MkgxLjExMzc3VjY3LjYyMTJIMzEzLjU2NlYwLjg1NDQ5MloiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0zMTkuNTA1IDcyLjA4NUwzMTMuNTY1IDY3LjYyMTJWMC44NTQ0OTJMMzE5LjUwNSA0Ljg3NTk4VjcyLjA4NVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0zMTkuMzMyIDcyLjA4NTFIOS4wODIzNkM5LjA4MjM2IDcyLjA4NTEgNi4wNjMxNCA3Mi4wNjUgNi4wNjMxNCA3Mi4wNDQ5TDEuMTI1OTggNjcuNjMxM0gzMTMuNTc4TDMxOS4zNjkgNzIuMDA0N0MzMTkuMzY5IDcyLjAwNDcgMzE5LjM5NCA3Mi4wODUxIDMxOS4zMzIgNzIuMDg1MVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+Cjwvc3ZnPgo=);
  color: #fff;
}

@media only screen and (max-width: 1560px) {
  .block5 .title {
    font-size: 30px;
    width: 281px;
    height: 64px;
    background-size: cover;
    line-height: 63px;
  }
}

@media only screen and (max-width: 599px) {
  .block5 .title {
    scroll-margin-top: 150px;
  }
}

.block5 .block5InnerUnder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 90px;
  gap: 20px;
}

.block5 .block5InnerUnder a {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding-left: 20px;
  padding-top: 24px;
  font-size: 20px;
  font-weight: 700;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzU2IiBoZWlnaHQ9IjkzIiB2aWV3Qm94PSIwIDAgMzU2IDkzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjM0MSIgaGVpZ2h0PSI3OSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iYmxhY2siLz4KPHBhdGggZD0iTTM0Mi41IDc4LjMwOTlWMS4zMTUxTDM1My41IDEzLjY5MDFWOTAuNjg0OUwzNDIuNSA3OC4zMDk5WiIgZmlsbD0id2hpdGUiIHN0cm9rZT0iYmxhY2siLz4KPHBhdGggZD0iTTExLjIzMTkgOTIuNUwxLjA3ODA1IDgwLjVIMzQ0Ljc2OEwzNTQuOTIyIDkyLjVIMTEuMjMxOVoiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=);
  background-size: cover;
  width: 356px;
  height: 93px;
  transition: 0.5s all cubic-bezier(0.34, 1.96, 0.64, 1);
}

@media only screen and (max-width: 1560px) {
  .block5 .block5InnerUnder a {
    width: 300px;
    height: 78px;
    font-size: 18px;
    padding-top: 20px;
  }
}

@media only screen and (max-width: 599px) {
  .block5 .block5InnerUnder a {
    width: 349px;
    height: 91px;
    padding-top: 25px;
    font-size: 20px;
  }

  .block5 .block5InnerUnder a:hover {
    transform: translateY(0) !important;
  }
}

.block5 .block5InnerUnder a:hover {
  transform: translateY(-30px);
}

.block5 .block5InnerUnder a img {
  margin-top: 5px;
  width: 25px;
  display: block;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5InnerUnder a img {
    width: 20px;
  }
}

@media only screen and (max-width: 599px) {
  .block5 .block5InnerUnder a img {
    width: 30px;
    margin-top: 2px;
  }
}

.block5 .block5Inner {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.block5 .block5Inner .box {
  width: 481px;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box {
    width: 350px;
  }
}

.block5 .block5Inner .box .boxPic {
  width: 100%;
  height: 289px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgxIiBoZWlnaHQ9IjI4OSIgdmlld0JveD0iMCAwIDQ4MSAyODkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iNDY5IiBoZWlnaHQ9IjI3NCIgZmlsbD0id2hpdGUiIHN0cm9rZT0iYmxhY2siLz4KPHBhdGggZD0iTTQ2OS41IDI3NS4zMVYxLjMxNTFMNDgwLjUgMTMuNjkwMVYyODcuNjg1TDQ2OS41IDI3NS4zMVoiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xMS4yMzE5IDI4Ny41TDEuMDc4MDUgMjc1LjVINDY5Ljc2OEw0NzkuOTIyIDI4Ny41SDExLjIzMTlaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K);
  background-size: cover;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box .boxPic {
    height: 210px;
  }
}

.block5 .block5Inner .box .boxPic img {
  margin-left: 20px;
  margin-top: 20px;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box .boxPic img {
    width: 320px;
    margin-left: 10px;
    margin-top: 13px;
  }
}

.block5 .block5Inner .box .boxWord {
  margin-top: 15px;
  background-repeat: no-repeat;
  width: 100%;
  height: 230px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgxIiBoZWlnaHQ9IjIzMCIgdmlld0JveD0iMCAwIDQ4MSAyMzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iNDY5IiBoZWlnaHQ9IjIxNCIgZmlsbD0id2hpdGUiIHN0cm9rZT0iYmxhY2siLz4KPHBhdGggZD0iTTQ2OS41IDIxNi4zMVYxLjMxNTFMNDgwLjUgMTMuNjkwMVYyMjguNjg1TDQ2OS41IDIxNi4zMVoiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xMS4yMzE5IDIyNy41TDEuMDc4MDUgMjE1LjVINDY5Ljc2OEw0NzkuOTIyIDIyNy41SDExLjIzMTlaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K);
  background-size: cover;
  padding: 20px;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box .boxWord {
    height: 167px;
    padding: 15px;
  }
}

@media only screen and (max-width: 599px) {
  .block5 .block5Inner .box .boxWord {
    margin-top: 8px;
  }
}

.block5 .block5Inner .box .boxWord .boxTitle {
  font-size: 25px;
  font-weight: 700;
  padding-bottom: 10px;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box .boxWord .boxTitle {
    padding-bottom: 5px;
    font-size: 20px;
  }
}

.block5 .block5Inner .box .boxWord .boxTexts {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box .boxWord .boxTexts {
    font-size: 16px;
    line-height: 24px;
  }
}

.block5 .block5Inner .box .boxWord .link {
  display: flex;
  margin-top: 15px;
  background-color: #000;
  color: #fff;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  width: 144px;
  height: 47px;
  font-size: 20px;
  gap: 10px;
  position: relative;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box .boxWord .link {
    width: 120px;
    height: 34px;
    font-size: 14px;
    gap: 5px;
    margin-top: 7px;
  }
}

.block5 .block5Inner .box .boxWord .link:hover::after {
  top: 0;
  left: 0;
}

.block5 .block5Inner .box .boxWord .link::after {
  position: absolute;
  left: 5px;
  top: 5px;
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  transition: 0.5s all cubic-bezier(0.34, 1.96, 0.64, 1);
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box .boxWord .link::after {
    left: 3px;
    top: 3px;
  }
}

.block5 .block5Inner .box .boxWord .link span {
  position: relative;
  z-index: 2;
}

.block5 .block5Inner .box .boxWord .link img {
  position: relative;
  z-index: 2;
  width: 20px;
}

@media only screen and (max-width: 1560px) {
  .block5 .block5Inner .box .boxWord .link img {
    width: 15px;
    margin-top: 2px;
  }
}

.block4 {
  background-image: url(./img/b2.jpg);
  padding-bottom: 150px;
}

.block4 .title {
  font-size: 35px;
  font-weight: 900;
  letter-spacing: 5px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 320px;
  height: 73px;
  text-align: center;
  line-height: 71px;
  margin: 0 auto 30px auto;
  scroll-margin-top: 150px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjczIiB2aWV3Qm94PSIwIDAgMzIwIDczIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMzEzLjU2NiAwLjg1NDQ5MkgxLjExMzc3VjY3LjYyMTJIMzEzLjU2NlYwLjg1NDQ5MloiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0zMTkuNTA1IDcyLjA4NUwzMTMuNTY1IDY3LjYyMTJWMC44NTQ0OTJMMzE5LjUwNSA0Ljg3NTk4VjcyLjA4NVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0zMTkuMzMyIDcyLjA4NTFIOS4wODIzNkM5LjA4MjM2IDcyLjA4NTEgNi4wNjMxNCA3Mi4wNjUgNi4wNjMxNCA3Mi4wNDQ5TDEuMTI1OTggNjcuNjMxM0gzMTMuNTc4TDMxOS4zNjkgNzIuMDA0N0MzMTkuMzY5IDcyLjAwNDcgMzE5LjM5NCA3Mi4wODUxIDMxOS4zMzIgNzIuMDg1MVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+Cjwvc3ZnPgo=);
  color: #fff;
}

@media only screen and (max-width: 1560px) {
  .block4 .title {
    font-size: 30px;
    width: 281px;
    height: 64px;
    background-size: cover;
    line-height: 63px;
  }
}

@media only screen and (max-width: 599px) {
  .block4 .title {
    scroll-margin-top: 150px;
  }
}

.block4 .tableTitle {
  display: block;
  margin: 0 auto;
}

@media only screen and (max-width: 1560px) {
  .block4 .tableTitle {
    width: 750px;
  }
}

@media only screen and (max-width: 599px) {
  .block4 .tableTitle {
    width: 100%;
  }
}

.block4 .subtitle {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
}

@media only screen and (max-width: 1560px) {
  .block4 .subtitle {
    font-size: 35px;
  }
}

.block4 .subtitle span {
  font-size: 25px;
  font-weight: 400;
}

@media only screen and (max-width: 1560px) {
  .block4 .subtitle span {
    font-size: 20px;
  }
}

.block4 .onLiveBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 40px auto;
  font-size: 35px;
  font-weight: 700;
  text-align: center;
  width: 319px;
  height: 69px;
  line-height: 69px;
  border: 1px solid #000;
  background-color: #fff;
  box-shadow: 0 5px 0 #000;
  transition: 0.5s all cubic-bezier(0.34, 1.96, 0.64, 1);
}

@media only screen and (max-width: 1560px) {
  .block4 .onLiveBtn {
    width: 280px;
    height: 55px;
    gap: 5px;
    font-size: 25px;
  }

  .block4 .onLiveBtn img {
    width: 25px;
  }
}

.block4 .onLiveBtn:hover {
  box-shadow: 0 0 0 #000;
}

.block4 .bike {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media only screen and (max-width: 1560px) {
  .block4 .bike {
    width: 200px;
  }
}

@media only screen and (max-width: 599px) {
  .block4 .bike {
    width: 100px;
  }
}

.block4 table {
  width: 815px;
  margin: 0 auto;
  table-layout: fixed;
  border-spacing: 0 10px;
  position: relative;
  z-index: 2;
}

@media only screen and (max-width: 1560px) {
  .block4 table {
    width: 700px;
  }
}

@media only screen and (max-width: 1180px) {
  .block4 table {
    width: 100%;
  }
}

.block4 table thead tr {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODE2IiBoZWlnaHQ9IjY3IiB2aWV3Qm94PSIwIDAgODE2IDY3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9Ijc5OSIgaGVpZ2h0PSI1OCIgZmlsbD0iI0ZGQzgwOSIgc3Ryb2tlPSJibGFjayIvPgo8bGluZSB4MT0iMTU2LjUiIHkxPSIyLjE0OTE0ZS0wOCIgeDI9IjE1Ni41IiB5Mj0iNTkiIHN0cm9rZT0iYmxhY2siLz4KPGxpbmUgeDE9IjQzOS41IiB5MT0iMi4xNDkxNGUtMDgiIHgyPSI0MzkuNSIgeTI9IjU5IiBzdHJva2U9ImJsYWNrIi8+CjxwYXRoIGQ9Ik03OTguNSA1OC42ODIyVjAuNzg2NTgxTDgxMy41IDcuODE3ODNWNjUuNzEzNEw3OTguNSA1OC42ODIyWiIgZmlsbD0iI0ZGQzgwOSIgc3Ryb2tlPSJibGFjayIvPgo8cGF0aCBkPSJNMTAuMjA3MSA2Ni41TDIuMjA3MTEgNTguNUg3OTguMzc5TDgxMy45MzUgNjYuNUgxMC4yMDcxWiIgZmlsbD0iI0ZGQzgwOSIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K);
  background-repeat: no-repeat;
}

@media only screen and (max-width: 1560px) {
  .block4 table thead tr {
    background-size: 700px;
  }
}

@media only screen and (max-width: 1180px) {
  .block4 table thead tr {
    background-image: none;
  }
}

.block4 table thead tr th {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  padding-left: 15px;
  padding-top: 13px;
  padding-bottom: 38px;
}

@media only screen and (max-width: 1560px) {
  .block4 table thead tr th {
    padding-bottom: 30px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 1180px) {
  .block4 table thead tr th {
    display: none;
  }
}

.block4 table thead tr th:nth-child(1) {
  width: calc(154px - 15px);
}

@media only screen and (max-width: 1560px) {
  .block4 table thead tr th:nth-child(1) {
    width: calc(134px - 15px);
  }
}

.block4 table thead tr th:nth-child(2) {
  width: calc(283px - 15px);
}

@media only screen and (max-width: 1560px) {
  .block4 table thead tr th:nth-child(2) {
    width: calc(243px - 15px);
  }
}

.block4 table tbody tr {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODE1IiBoZWlnaHQ9IjYxIiB2aWV3Qm94PSIwIDAgODE1IDYxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC41IDAuNUg3OTkuNVY1MC41SDAuNVYwLjVaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8cGF0aCBkPSJNNzk4LjUgNDkuNzI4VjAuNzg3ODkxTDgxNC41IDguMzE3M1Y2MC4wODA5TDc5OC41IDQ5LjcyOFoiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xMi42NzU0IDU5LjVMMS40MjUzOSA1MC41SDc5OS44NDRMODEyLjg5NCA1OS41SDEyLjY3NTRaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8bGluZSB4MT0iNDM5LjUiIHkxPSIyLjE4NTU3ZS0wOCIgeDI9IjQzOS41IiB5Mj0iNTEiIHN0cm9rZT0iYmxhY2siLz4KPGxpbmUgeDE9IjE1Ni41IiB5MT0iMi4xODU1N2UtMDgiIHgyPSIxNTYuNSIgeTI9IjUxIiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=);
  background-repeat: no-repeat;
}

@media only screen and (max-width: 1560px) {
  .block4 table tbody tr {
    background-size: 700px;
  }
}

@media only screen and (max-width: 1180px) {
  .block4 table tbody tr {
    background-image: none;
    border: 1px solid #000;
    display: block;
    margin-bottom: 10px;
  }
}

.block4 table tbody tr td {
  font-size: 20px;
  font-weight: 400;
  padding-left: 15px;
  padding-top: 13px;
  padding-bottom: 30px;
}

@media only screen and (max-width: 1560px) {
  .block4 table tbody tr td {
    padding-bottom: 30px;
    padding-top: 7px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 1180px) {
  .block4 table tbody tr td {
    display: block;
    width: 100% !important;
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px solid #909090;
  }
}

.block4 table tbody tr td:nth-child(1) {
  width: calc(154px - 15px);
}

@media only screen and (max-width: 1560px) {
  .block4 table tbody tr td:nth-child(1) {
    width: calc(134px - 15px);
  }
}

@media only screen and (max-width: 1180px) {
  .block4 table tbody tr td:nth-child(1)::before {
    content: "時間：";
  }
}

.block4 table tbody tr td:nth-child(2) {
  width: calc(283px - 15px);
}

@media only screen and (max-width: 1560px) {
  .block4 table tbody tr td:nth-child(2) {
    width: calc(243px - 15px);
  }
}

@media only screen and (max-width: 1180px) {
  .block4 table tbody tr td:nth-child(2)::before {
    content: "內容：";
  }
}

@media only screen and (max-width: 1180px) {
  .block4 table tbody tr td:nth-child(3)::before {
    content: "講者：";
  }
}

.block4 table tbody .towCol {
  padding-left: 15px;
  padding-top: 13px;
  padding-bottom: 28px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODE1IiBoZWlnaHQ9IjYxIiB2aWV3Qm94PSIwIDAgODE1IDYxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC41IDAuNUg3OTkuNVY1MC41SDAuNVYwLjVaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8cGF0aCBkPSJNNzk4LjUgNDkuNzI4VjAuNzg3ODkxTDgxNC41IDguMzE3M1Y2MC4wODA5TDc5OC41IDQ5LjcyOFoiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xMi42NzU0IDU5LjVMMS40MjUzOSA1MC41SDc5OS44NDRMODEyLjg5NCA1OS41SDEyLjY3NTRaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8bGluZSB4MT0iMTU2LjUiIHkxPSIyLjE4NTU3ZS0wOCIgeDI9IjE1Ni41IiB5Mj0iNTEiIHN0cm9rZT0iYmxhY2siLz4KPC9zdmc+Cg==);
}

@media only screen and (max-width: 1180px) {
  .block4 table tbody .towCol {
    background-image: none;
    padding: 0;
  }
}

.block4 table tbody .towCol td:nth-child(1) {
  width: calc(154px - 15px);
}

.block4 table tbody .towCol td:nth-child(2) {
  width: auto;
}

.block3 {
  background-image: url(./img/b1.jpg);
}

.block3 .title {
  font-size: 35px;
  font-weight: 900;
  letter-spacing: 5px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 320px;
  height: 73px;
  text-align: center;
  line-height: 71px;
  margin: 0 auto 30px auto;
  scroll-margin-top: 150px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjczIiB2aWV3Qm94PSIwIDAgMzIwIDczIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMzEzLjU2NiAwLjg1MDA5OEgxLjExMzc3VjY3LjI2MDFIMzEzLjU2NlYwLjg1MDA5OFoiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0zMTkuNTA1IDcxLjcwMDFMMzEzLjU2NSA2Ny4yNjAxVjAuODUwMDk4TDMxOS41MDUgNC44NTAxVjcxLjcwMDFaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8cGF0aCBkPSJNMzE5LjMzMiA3MS43SDkuMDgyMzZDOS4wODIzNiA3MS43IDYuMDYzMTQgNzEuNjggNi4wNjMxNCA3MS42NkwxLjEyNTk4IDY3LjI3SDMxMy41NzhMMzE5LjM2OSA3MS42MkMzMTkuMzY5IDcxLjYyIDMxOS4zOTQgNzEuNyAzMTkuMzMyIDcxLjdaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8L3N2Zz4K);
}

@media only screen and (max-width: 1560px) {
  .block3 .title {
    font-size: 30px;
    width: 281px;
    height: 64px;
    background-size: cover;
    line-height: 63px;
  }
}

@media only screen and (max-width: 599px) {
  .block3 .title {
    scroll-margin-top: 150px;
  }
}

.block3 .block3Inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner {
    gap: 25px;
  }
}

.block3 .block3Inner .box {
  width: 355px;
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner .box {
    width: 260px;
  }
}

.block3 .block3Inner .box .name {
  font-size: 30px;
  font-weight: 900;
  background-color: #fbcc2c;
  border: 1px solid #000;
  padding: 2px 10px;
  display: inline-block;
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner .box .name {
    font-size: 20px;
  }
}

.block3 .block3Inner .box .flagpole {
  width: 6px;
  height: 12px;
  background-color: #000;
}

.block3 .block3Inner .box .picBorder {
  width: 100%;
  height: 340px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzU2IiBoZWlnaHQ9IjM0MSIgdmlld0JveD0iMCAwIDM1NiAzNDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iMS41IiB3aWR0aD0iMzQ2IiBoZWlnaHQ9IjMzMCIgZmlsbD0iI0ZCQ0MyQyIgc3Ryb2tlPSJibGFjayIvPgo8cGF0aCBkPSJNMzU1IDEwLjk1OUwzNDUgMlYzMzMuNDg0TDM1NSAzNDBWMTAuOTU5WiIgZmlsbD0iI0ZCQ0MyQyIgc3Ryb2tlPSJibGFjayIvPgo8cGF0aCBkPSJNNy43NTExNyAzMzkuNUwxLjk3NzQ3IDMzMS41SDM0NC42NjFMMzUzLjY4MyAzMzkuNUg3Ljc1MTE3WiIgZmlsbD0iI0ZGQzgwOSIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K);
  background-position: left top;
  position: relative;
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner .box .picBorder {
    height: 249px;
    background-size: cover;
  }
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner .box .picBorder img {
    width: 252px;
  }
}

.block3 .block3Inner .box .picBorder .picTitle {
  position: absolute;
  font-weight: 700;
  font-size: 20px;
  background-color: #fff;
  border: 1px solid #000;
  padding: 0 5px;
  bottom: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  left: 13px;
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner .box .picBorder .picTitle {
    font-size: 16px;
  }
}

.block3 .block3Inner .box .picBorder .picTitle img {
  width: auto;
}

.block3 .block3Inner .box .link {
  display: flex;
  margin-top: 15px;
  background-color: #000;
  color: #fff;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  width: 144px;
  height: 47px;
  font-size: 20px;
  gap: 10px;
  position: relative;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner .box .link {
    width: 120px;
    height: 34px;
    font-size: 14px;
    gap: 5px;
    margin-top: 7px;
  }
}

.block3 .block3Inner .box .link:hover::after {
  top: 0;
  left: 0;
}

.block3 .block3Inner .box .link::after {
  position: absolute;
  left: 5px;
  top: 5px;
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  transition: 0.5s all cubic-bezier(0.34, 1.96, 0.64, 1);
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner .box .link::after {
    left: 3px;
    top: 3px;
  }
}

.block3 .block3Inner .box .link span {
  position: relative;
  z-index: 2;
}

.block3 .block3Inner .box .link img {
  position: relative;
  z-index: 2;
  width: 20px;
}

@media only screen and (max-width: 1560px) {
  .block3 .block3Inner .box .link img {
    width: 15px;
    margin-top: 2px;
  }
}

.block3 .block3Inner .box .link::after {
  z-index: -1;
}

.block2 {
  background-image: url(./img/b2.jpg);
}

.block2 .title {
  font-size: 35px;
  font-weight: 900;
  letter-spacing: 5px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 320px;
  height: 73px;
  text-align: center;
  line-height: 71px;
  margin: 0 auto 30px auto;
  scroll-margin-top: 150px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjczIiB2aWV3Qm94PSIwIDAgMzIwIDczIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMzEzLjU2NiAwLjg1NDQ5MkgxLjExMzc3VjY3LjYyMTJIMzEzLjU2NlYwLjg1NDQ5MloiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0zMTkuNTA1IDcyLjA4NUwzMTMuNTY1IDY3LjYyMTJWMC44NTQ0OTJMMzE5LjUwNSA0Ljg3NTk4VjcyLjA4NVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0zMTkuMzMyIDcyLjA4NTFIOS4wODIzNkM5LjA4MjM2IDcyLjA4NTEgNi4wNjMxNCA3Mi4wNjUgNi4wNjMxNCA3Mi4wNDQ5TDEuMTI1OTggNjcuNjMxM0gzMTMuNTc4TDMxOS4zNjkgNzIuMDA0N0MzMTkuMzY5IDcyLjAwNDcgMzE5LjM5NCA3Mi4wODUxIDMxOS4zMzIgNzIuMDg1MVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+Cjwvc3ZnPgo=);
  color: #fff;
}

@media only screen and (max-width: 1560px) {
  .block2 .title {
    font-size: 30px;
    width: 281px;
    height: 64px;
    background-size: cover;
    line-height: 63px;
  }
}

@media only screen and (max-width: 599px) {
  .block2 .title {
    scroll-margin-top: 150px;
  }
}

.block2 .nurse {
  position: absolute;
  left: 50%;
  margin-left: -550px;
  top: 200px;
}

@media only screen and (max-width: 1560px) {
  .block2 .nurse {
    width: 120px;
    margin-left: -470px;
    top: 180px;
  }
}

.block2 .soccer {
  position: absolute;
  left: 50%;
  margin-left: 400px;
  top: 500px;
}

@media only screen and (max-width: 1560px) {
  .block2 .soccer {
    width: 250px;
    margin-left: 330px;
  }
}

.block2 .block2Inner {
  width: 687px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media only screen and (max-width: 1560px) {
  .block2 .block2Inner {
    width: 600px;
  }
}

@media only screen and (max-width: 599px) {
  .block2 .block2Inner {
    width: 360px;
  }
}

.block2 .block2Inner .box {
  width: 100%;
  height: 382px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjg5IiBoZWlnaHQ9IjM4NyIgdmlld0JveD0iMCAwIDY4OSAzODciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjEuNSIgeT0iNC41IiB3aWR0aD0iNjcyIiBoZWlnaHQ9IjM3MCIgZmlsbD0iI0Q5RDlEOSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxwYXRoIGQ9Ik02ODcgMTVMNjc1IDRWMzc2TDY4NyAzODRWMTVaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiLz4KPHBhdGggZD0iTTkuNzYzODQgMzgzLjVMMy45NDU2NiAzNzUuNUg2NzIuOTM0TDY4Mi4wMjUgMzgzLjVIOS43NjM4NFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMyIvPgo8L3N2Zz4K);
  padding: 40px 50px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: 0.5s all cubic-bezier(0.34, 1.96, 0.64, 1);
}

@media only screen and (max-width: 1560px) {
  .block2 .block2Inner .box {
    height: 334px;
    background-size: cover;
  }
}

@media only screen and (max-width: 599px) {
  .block2 .block2Inner .box {
    height: 200px;
    padding: 20px 23px 20px 20px;
  }
}

.block2 .block2Inner .box:hover {
  transform: translateY(-30px);
}

.block2 .block2Inner .box .bigWord {
  display: flex;
  justify-content: space-between;
}

.block2 .block2Inner .box .bigWord div {
  font-size: 65px;
  width: 30%;
  padding-bottom: 30px;
  padding-top: 30px;
  font-weight: 900;
  background-color: #fff;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 599px) {
  .block2 .block2Inner .box .bigWord div {
    font-size: 40px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
}

.block2 .block2Inner .box .boxWordContainer {
  display: flex;
  justify-content: space-between;
}

.block2 .block2Inner .box .boxWord {
  font-size: 50px;
  font-weight: 900;
  display: flex;
  gap: 7px;
  cursor: pointer;
}

@media only screen and (max-width: 1560px) {
  .block2 .block2Inner .box .boxWord {
    font-size: 40px;
  }

  .block2 .block2Inner .box .boxWord img {
    width: 40px;
    position: relative;
    top: 3px;
  }
}

@media only screen and (max-width: 1560px) and (max-width: 599px) {
  .block2 .block2Inner .box .boxWord img {
    width: 30px;
  }
}

@media only screen and (max-width: 599px) {
  .block2 .block2Inner .box .boxWord {
    font-size: 20px;
    padding-top: 15px;
  }
}

.block1Padding {
  padding-top: 200px;
}

.block1Padding .innerOnlive {
  display: flex;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

@media only screen and (max-width: 599px) {
  .block1Padding .innerOnlive {
    flex-wrap: wrap;
  }
}

.block1Padding .innerOnlive .onlive {
  width: 68%;
}

@media only screen and (max-width: 599px) {
  .block1Padding .innerOnlive .onlive {
    width: 100%;
  }
}

.block1Padding .innerOnlive .onlive iframe {
  width: 100%;
  height: 560px;
}

@media only screen and (max-width: 599px) {
  .block1Padding .innerOnlive .onlive iframe {
    height: 300px;
  }
}

.block1Padding .innerOnlive .slido {
  width: 30%;
}

@media only screen and (max-width: 599px) {
  .block1Padding .innerOnlive .slido {
    width: 100%;
  }
}

.block1Padding .innerOnlive .slido iframe {
  width: 100%;
  height: 560px;
}

@media only screen and (max-width: 599px) {
  .block1Padding .innerOnlive .slido iframe {
    height: 460px;
  }
}

.block1 {
  background-image: url(./img/b1.jpg);
  padding-bottom: 180px;
}

@media only screen and (max-width: 599px) {
  .block1 {
    padding-bottom: 80px;
  }
}

.block1 .title {
  font-size: 35px;
  font-weight: 900;
  letter-spacing: 5px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 320px;
  height: 73px;
  text-align: center;
  line-height: 71px;
  margin: 0 auto 30px auto;
  scroll-margin-top: 150px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjczIiB2aWV3Qm94PSIwIDAgMzIwIDczIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMzEzLjU2NiAwLjg1MDA5OEgxLjExMzc3VjY3LjI2MDFIMzEzLjU2NlYwLjg1MDA5OFoiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0zMTkuNTA1IDcxLjcwMDFMMzEzLjU2NSA2Ny4yNjAxVjAuODUwMDk4TDMxOS41MDUgNC44NTAxVjcxLjcwMDFaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8cGF0aCBkPSJNMzE5LjMzMiA3MS43SDkuMDgyMzZDOS4wODIzNiA3MS43IDYuMDYzMTQgNzEuNjggNi4wNjMxNCA3MS42NkwxLjEyNTk4IDY3LjI3SDMxMy41NzhMMzE5LjM2OSA3MS42MkMzMTkuMzY5IDcxLjYyIDMxOS4zOTQgNzEuNyAzMTkuMzMyIDcxLjdaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8L3N2Zz4K);
}

@media only screen and (max-width: 1560px) {
  .block1 .title {
    font-size: 30px;
    width: 281px;
    height: 64px;
    background-size: cover;
    line-height: 63px;
  }
}

@media only screen and (max-width: 599px) {
  .block1 .title {
    scroll-margin-top: 150px;
  }
}

.block1 .woman {
  left: 50%;
  top: 400px;
  margin-left: -820px;
  position: absolute;
}

@media only screen and (max-width: 1560px) {
  .block1 .woman {
    width: 280px;
    margin-left: -650px;
  }
}

.block1 .grass {
  left: 50%;
  top: 630px;
  margin-left: 380px;
  position: absolute;
  z-index: 1;
}

@media only screen and (max-width: 1560px) {
  .block1 .grass {
    width: 230px;
    margin-left: 330px;
    top: 590px;
  }
}

.block1 .block1Inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.block1 .block1Inner .box {
  cursor: pointer;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDM4IiBoZWlnaHQ9IjQxOCIgdmlld0JveD0iMCAwIDQzOCA0MTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iMS41IiB3aWR0aD0iNDI2IiBoZWlnaHQ9IjQwNSIgZmlsbD0iI0ZCQ0MyQyIgc3Ryb2tlPSJibGFjayIvPgo8cGF0aCBkPSJNNDM3IDEzTDQyNSAyVjQwOUw0MzcgNDE3VjEzWiIgZmlsbD0iI0ZCQ0MyQyIgc3Ryb2tlPSJibGFjayIvPgo8cGF0aCBkPSJNOS4yNTQ2MSA0MTYuNUwxLjk4MTg5IDQwNi41SDQyNC4zMTFMNDM1LjY3NSA0MTYuNUg5LjI1NDYxWiIgZmlsbD0iI0JBRThGRiIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K);
  background-size: cover;
  width: 437px;
  height: 416px;
  background-repeat: no-repeat;
  padding: 40px 50px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  transition: 0.5s all cubic-bezier(0.34, 1.96, 0.64, 1);
}

@media only screen and (max-width: 1560px) {
  .block1 .block1Inner .box {
    width: 360px;
    height: 343px;
    background-size: cover;
  }
}

.block1 .block1Inner .box:hover {
  transform: translateY(-30px);
}

.block1 .block1Inner .box > img {
  width: 206px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1560px) {
  .block1 .block1Inner .box > img {
    width: 150px;
  }
}

.block1 .block1Inner .box .boxUl {
  width: 100%;
}

.block1 .block1Inner .box .boxUl li {
  display: flex;
  gap: 7px;
  width: 100%;
  margin-bottom: 10px;
}

.block1 .block1Inner .box .boxUl li:last-child {
  margin-bottom: 30px;
}

@media only screen and (max-width: 1560px) {
  .block1 .block1Inner .box .boxUl li:last-child {
    margin-bottom: 15px;
  }
}

.block1 .block1Inner .box .boxUl li div {
  font-size: 22px;
  font-weight: 900;
  background-color: #fff;
  border: 1px solid #000;
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
}

@media only screen and (max-width: 1560px) {
  .block1 .block1Inner .box .boxUl li div {
    font-size: 18px;
    height: 30px;
    padding: 0 7px;
    line-height: 30px;
  }
}

.block1 .block1Inner .box .boxUl li div:nth-child(2) {
  width: 100%;
}

@media only screen and (max-width: 1560px) {
  .block1 .block1Inner .box .boxUl {
    margin-bottom: 20px;
  }
}

.block1 .block1Inner .box .boxWord {
  font-size: 65px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

@media only screen and (max-width: 1560px) {
  .block1 .block1Inner .box .boxWord {
    font-size: 45px;
  }
}

.block1 .downloadPdf {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 63px;
  gap: 7px;
  background-color: #fff;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  border: 1px solid #000;
  width: 900px;
  margin: 0 auto;
  box-shadow: 0 10px 0 #000;
  transition: 0.5s all cubic-bezier(0.34, 1.96, 0.64, 1);
}

@media only screen and (max-width: 1560px) {
  .block1 .downloadPdf {
    width: 745px;
    font-size: 20px;
  }
}

@media only screen and (max-width: 599px) {
  .block1 .downloadPdf {
    width: calc(100% - 40px);
  }
}

.block1 .downloadPdf:hover {
  box-shadow: 0 0 0 #000;
}

.overhidden {
  overflow: hidden;
}

.lightBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  top: 0;
  left: 0;
  background-color: #fff;
}

@media only screen and (max-width: 768px) {
  .lightBox {
    flex-wrap: wrap;
  }
}

.lightBox .lightBoxTitle {
  width: 362px;
  height: 100%;
  background-image: url(./img/b1.jpg);
  font-size: 120px;
  display: flex;
  justify-content: center;
  font-weight: 900;
  line-height: 140px;
  letter-spacing: 5px;
  padding-top: 30px;
}

@media only screen and (max-width: 768px) {
  .lightBox .lightBoxTitle {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
    font-size: 50px;
    line-height: 65px;
  }
}

.lightBox .lightInner {
  padding: 50px 150px;
  height: 100%;
  overflow: auto;
  width: calc(100% - 362px);
  clear: both;
}

@media only screen and (max-width: 1560px) {
  .lightBox .lightInner {
    padding: 50px 70px;
  }
}

@media only screen and (max-width: 768px) {
  .lightBox .lightInner {
    width: 100%;
    height: calc(100vh - 150px);
    padding: 20px 20px 180px 20px;
  }
}

.lightBox .lightInner .intrduceWord {
  margin-bottom: 50px;
}

.lightBox .lightInner .tagContainer {
  margin-top: 30px;
}

.lightBox .lightInner .tagContainer .tag {
  width: 193px;
  height: 72px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTk0IiBoZWlnaHQ9IjczIiB2aWV3Qm94PSIwIDAgMTk0IDczIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTg4IDFIMVY2N0gxODhWMVoiIGZpbGw9IiM0ODkyNEIiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPHBhdGggZD0iTTE5Mi44IDcxLjcwMDFMMTg4IDY3LjI2MDFWMC44NTAwOThMMTkyLjggNC44NTAxVjcxLjcwMDFaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8cGF0aCBkPSJNMTkyIDcxLjY2MDFMNy4zNDAxNiA3MS43QzcuMzQwMTYgNzEuNyA0LjkwMDE2IDcxLjY4IDQuOTAwMTYgNzEuNjZMMC45MTAxNTYgNjcuMjdIMTg3LjVMMTkyIDcxLjY2MDFaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8L3N2Zz4K);
  font-size: 35px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

@media only screen and (max-width: 1560px) {
  .lightBox .lightInner .tagContainer .tag {
    font-size: 27px;
    width: 150px;
    height: 56px;
    background-size: cover;
  }
}

@media only screen and (max-width: 599px) {
  .lightBox .lightInner .tagContainer .tag {
    font-size: 20px;
    width: 120px;
    height: 45px;
    padding-bottom: 4px;
  }
}

.lightBox .lightInner .tagContainer .tagWord {
  font-size: 20px;
  font-weight: 400;
  padding-top: 15px;
  padding-bottom: 40px;
}

@media only screen and (max-width: 599px) {
  .lightBox .lightInner .tagContainer .tagWord {
    font-size: 16px;
  }
}

.lightBox .lightInner .tagContainer .tagWordMoreBottom {
  padding-bottom: 70px;
}

.lightBox .lightInner table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: separate;
  border-spacing: 10px;
}

.lightBox .lightInner table thead tr th {
  font-size: 16px;
  font-weight: 400;
  color: #505050;
  text-align: left;
  padding-left: 20px;
}

@media only screen and (max-width: 1560px) {
  .lightBox .lightInner table thead tr th {
    font-size: 14px;
    padding-left: 10px;
  }
}

.lightBox .lightInner table tbody tr td {
  height: 55px;
  background-color: #eff6df;
  border-radius: 3px;
  line-height: 55px;
  font-size: 20px;
  font-weight: 400;
  padding-left: 20px;
}

@media only screen and (max-width: 1560px) {
  .lightBox .lightInner table tbody tr td {
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
  }
}

@media only screen and (max-width: 599px) {
  .lightBox .lightInner table tbody tr td {
    line-height: 30px;
  }
}

.lightBox .lightInner table tbody tr td:nth-child(1) {
  width: 55px;
  background-color: #f1f1f1;
  text-align: center;
  padding-left: 0;
}

@media only screen and (max-width: 1560px) {
  .lightBox .lightInner table tbody tr td:nth-child(1) {
    width: 45px;
  }
}

.lightBox .lightInner table tbody tr .deepGreen {
  background-color: #48924b !important;
  color: #fff;
}

.lightBox .lightInner .smallSay {
  color: #909090;
  display: block;
  padding-bottom: 40px;
  font-size: 14px;
}

.lightBox .lightInner article {
  font-size: 25px;
  font-weight: 400;
  line-height: 34px;
  margin-bottom: 100px;
}

@media only screen and (max-width: 1560px) {
  .lightBox .lightInner article {
    font-size: 20px;
    line-height: 28px;
  }
}

@media only screen and (max-width: 599px) {
  .lightBox .lightInner article {
    margin-bottom: 50px;
  }
}

.lightBox .lightInner article b {
  display: block;
  padding-bottom: 5px;
}

.lightBox .lightInner .pieChartPC {
  display: block;
  max-width: 100%;
}

@media only screen and (max-width: 875px) {
  .lightBox .lightInner .pieChartPC {
    display: none;
  }
}

.lightBox .lightInner .pieChart {
  display: none;
  margin: 40px auto 0 auto;
  max-width: 100%;
}

@media only screen and (max-width: 875px) {
  .lightBox .lightInner .pieChart {
    display: block;
  }
}

.lightBox .lightInner .backBtn {
  float: right;
  margin-top: 60px;
}

.chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 35px;
  gap: 20px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  padding-bottom: 30px;
}

@media only screen and (max-width: 400px) {
  .chart {
    gap: 10px;
  }
}

.chart .chartList {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart .chartList .colorBoxCon {
  height: 120px;
  width: 100px;
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
}

@media only screen and (max-width: 599px) {
  .chart .chartList .colorBoxCon {
    width: 60px;
  }
}

.chart .chartList .colorBoxCon .number {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0;
  font-size: 18px;
  margin-bottom: 5px;
  width: 100%;
  color: #48924b;
}

.chart .chartList .colorBoxCon .colorBox {
  background-color: #48924b;
  width: 100%;
}

.chart .chartList .tt {
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  padding-top: 10px;
  letter-spacing: 0;
  line-height: 20px;
}

.chart1 .chartList:nth-child(1) .colorBox {
  height: calc(52% * 1.4);
}

.chart1 .chartList:nth-child(2) .colorBox {
  height: calc(47% * 1.4);
}

.chart1 .chartList:nth-child(3) .colorBox {
  height: calc(39% * 1.4);
}

.chart1 .chartList:nth-child(4) .colorBox {
  height: calc(36% * 1.4);
}

.chart1 .chartList:nth-child(5) .colorBox {
  height: calc(9.8% * 1.4);
}

@media only screen and (max-width: 1380px) {
  .chart1 .chartList .tt {
    height: 70px;
  }
}

@media only screen and (max-width: 599px) {
  .chart1 .chartList .tt {
    height: 110px;
  }
}

.chart2 .chartList:nth-child(1) .colorBox {
  height: calc(46.2% * 1.4);
}

.chart2 .chartList:nth-child(2) .colorBox {
  height: calc(28.4% * 1.4);
}

.chart2 .chartList:nth-child(3) .colorBox {
  height: calc(14.6% * 1.4);
}

@media only screen and (max-width: 599px) {
  .chart2 .chartList .tt {
    height: 50px;
  }
}

.chart3 .chartList:nth-child(1) .colorBox {
  height: calc(67.5% * 1.4);
}

.chart3 .chartList:nth-child(2) .colorBox {
  height: calc(63.1% * 1.4);
}

.chart3 .chartList:nth-child(3) .colorBox {
  height: calc(50.5% * 1.4);
}

.chart3 .chartList:nth-child(4) .colorBox {
  height: calc(46% * 1.4);
}

.chart3 .chartList:nth-child(5) .colorBox {
  height: calc(40.4% * 1.4);
}

@media only screen and (max-width: 1380px) {
  .chart3 .chartList .tt {
    height: 50px;
  }
}

.chart4 .chartList:nth-child(1) .colorBox {
  height: calc(37.7% * 1.4);
}

.chart4 .chartList:nth-child(2) .colorBox {
  height: calc(30% * 1.4);
}

.chart4 .chartList:nth-child(3) .colorBox {
  height: calc(28% * 1.4);
}

.chart4 .chartList:nth-child(4) .colorBox {
  height: calc(19.7% * 1.4);
}

@media only screen and (max-width: 599px) {
  .chart4 .chartList .tt {
    height: 50px;
  }
}

.chart5 .chartList:nth-child(1) .colorBox {
  height: calc(28.4% * 1.4);
}

.chart5 .chartList:nth-child(2) .colorBox {
  height: calc(19.9% * 1.4);
}

.chart5 .chartList:nth-child(3) .colorBox {
  height: calc(13.9% * 1.4);
}

.chart5 .chartList:nth-child(4) .colorBox {
  height: calc(5.1% * 1.4);
}

@media only screen and (max-width: 599px) {
  .chart5 .chartList .tt {
    height: 35px;
  }
}

.hide {
  display: none !important;
}

.ww {
  transition: 0.7s all cubic-bezier(0.47, 1.64, 0.41, 0.8);
  opacity: 0;
  transform: scale(2);
}

.line {
  transition: 1s all;
  opacity: 0;
  transform: scale(1);
}

.ww.show {
  opacity: 1;
  transform: scale(1);
}

.jump {
  opacity: 0;
  transform: translateY(-100px);
  transition: 0.5s all cubic-bezier(0.34, 1.96, 0.64, 1);
}

.jumpDown {
  opacity: 1;
  transform: translateY(0px);
}

.ww.flyTop {
  opacity: 0;
  transform: translateY(-50px);
}