/* img */
.logo img {
  display: block;
  width: 100%;
}
/* head */
#particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  /* z-index: 2; */
}
.particle {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: -38%;
  margin-left: -50%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 6;
  /* -webkit-filter: brightness(0.5); */
}
video {
  width: 100%;
  height: 100%;
}
.webbox {
  width: 100%;
  position: relative;
}

.head {
  position: relative;
  background: url("../images/bbg.jpg");
  background-size: 100% auto;
  padding-bottom: 50%;
}
.topbx {
  position: absolute;
  width: 100%;
  height: 100vh;
}
.tfbox {
  width: 110px;
  position: absolute;
  right: 1%;
  top: 1%;
}
.logobx {
  position: absolute;
  width: 243px;
  left: 1%;
  top: 1%;
}

.slo {
  position: absolute;
  width: 24%;
  left: 50%;
  margin-left: -12%;
  top: 3%;
}
.ffbox {
  position: absolute;
  top: 1%;
  right: 1%;
  width: 200px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.ffbox div {
  margin: 0 1%;
}
.hmcon {
  width: 70%;
  position: absolute;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  top: 9vw;
  left: 50%;
  margin-left: -35%;
}
.hml {
  width: 51%;
}
.hmr {
  width: 45%;
  margin-left: 1%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.scx {
  width: 80%;
}
.scbt {
  width: 20%;
}
.hrbtox {
  width: 67%;
}
.hrrtox {
  position: relative;
  width: 30%;
  margin-left: 3%;
}
.hrt1,
.hrt2,
.hrt3 {
  position: relative;
}
.hrt1 {
  margin-top: 3%;
}
.hrt2 {
  margin: 6% auto;
}
.hrt1::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tobtah.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.hrt2::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tobtbh.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.hrt3::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tobtch.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.hrt1:hover::before,
.hrt2:hover::before,
.hrt3:hover::before {
  opacity: 1;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.hrbx {
  position: absolute;
  width: 80%;
  left: 50%;
  margin-left: -40%;
  bottom: 7%;
}

.hrbx div {
  margin: 10% auto;
  font-size: 0.9vw;
}
.tbbtbox {
  position: absolute;
  width: 70%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  top: 31vw;
  left: 50%;
  margin-left: -35%;
}
.hrb1,
.hrb2,
.hrb3,
.hrb4 {
  position: relative;
  color: #fff;
  text-align: center;
}
.hrb1::after,
.hrb2::after,
.hrb3::after,
.hrb4::after {
  font-size: 0.5em;
  content: "❖";
  position: absolute;
  right: 0;
  top: 7px;
}
.hrb1::before,
.hrb2::before,
.hrb3::before,
.hrb4::before {
  font-size: 0.5em;
  content: "❖";
  position: absolute;
  left: 0;
  top: 7px;
}
.hrb1:hover,
.hrb2:hover,
.hrb3:hover,
.hrb4:hover {
  position: relative;
  color: #79d9ff;
  text-align: center;
}
.logobx {
  width: 12.5%;
}
.tbbtbox div {
  margin: 0 1%;
}
.bnx {
  width: 100%;
}
.tbbtbox div {
  position: relative;
}
.tbbt1::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tbbt1h.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.tbbt2::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tbbt2h.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.tbbt3::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tbbt3h.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.tbbt4::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tbbt4h.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.tbbt5::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tbbt5h.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.tbbt6::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tbbt6h.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.tbbt7::before {
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url("../images/tbbt7h.png");
  background-size: 100% 100%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}

.tbbtbox div:hover::before {
  opacity: 1;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
/* content */
.content {
  position: relative;
  width: 100%;
}
/* topbt */
.dtt {
  position: fixed;
  width: 100%;
  max-width: 2000px;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
}
.topbt {
  position: absolute;
  width: 50px;
  padding-bottom: 60px;
  display: none;
  cursor: pointer;
  background-attachment: scroll;
  background-image: url(../images/top.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 50% 50%;
  background-size: 100% 100%;
  bottom: 10px;
  right: 10px;
  z-index: 11;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.chbox {
  width: 100%;
  padding: 30px 5px;
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
}
.chbox div {
  margin: 0 1%;
}
.pcimg {
  display: block;
}
.mbimg {
  display: none;
}
.rbbox {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.rbupbox {
  display: none;
  position: absolute;
  width: 100%;
  height: 340px;
  overflow: hidden;
  z-index: 1;
  background-color: #dcecf4;

  border: 1px solid #70a9d7;
}
.nsbox {
  width: 100%;
}

.rbutl {
  font-size: 13px;
  color: #7d87ae;
  padding-bottom: 15px;
  padding: 10px 20px;
}
.rbut1 {
  font-size: 18px;
  color: #474952;
  padding-bottom: 5px;
}
.rbut2 {
  font-size: 16px;
  color: #474952;
  padding-bottom: 5px;
}
.rbut3 {
  font-size: 12px;
  color: #8e909b;
}
.rbscbx {
  width: 100%;
  overflow-y: auto;
  height: 310px;
  padding: 10px 0;
}
.rbscbx::-webkit-scrollbar {
  width: 5px;
  background-color: #bac2e5;
}
.rbscbx::-webkit-scrollbar-thumb {
  background-color: #495a74;
}
.nxcbox {
  padding: 10px 20px;
  width: 100%;
}
.nxcbox:hover {
  cursor: pointer;
  background-color: #cae2ee;
}
.rbupbox {
  display: none;
}
.rbupbox.active {
  display: block;
}
.syscont {
  width: 100%;
  min-height: 300px;
}

@media only screen and (max-width: 800px) {
  .hrbx div {
    font-size: 1.5vw;
    margin: 6% auto;
  }
  .tbbtbox {
    position: absolute;
    width: 90%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    top: 40vw;
    left: 50%;
    margin-left: -45%;
  }
  .hmcon {
    width: 90%;
    position: absolute;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    top: 9vw;
    left: 50%;
    margin-left: -45%;
  }
  .head {
    position: relative;
    background: url("../images/bbg.jpg");
    background-size: 100% 100%;
    padding-bottom: 63%;
  }
}
@media only screen and (max-width: 560px) {
  .hrbx div {
    font-size: 4vw;
    margin: 6% auto;
  }
  .hrrtox {
    position: relative;
    width: 34%;
    margin-left: 1%;
  }
  .hrbtox {
    width: 65%;
  }
  .scx {
    width: 70%;
  }
  .scbt {
    width: 29%;
  }
  .hmr {
    width: 98%;
    margin: 0 auto;
  }
  .slo {
    position: relative;
    width: 80%;
    left: 0;
    padding-top: 25%;
    margin: 0 auto;
  }
  .hml {
    width: 100%;
  }
  .tbbtbox div {
    width: 31%;
    margin: 1%;
  }
  .tbbtbox {
    position: relative;
    width: 90%;
    flex-wrap: wrap;
    top: 0;
    left: 0%;
    margin: 5% auto 0 auto;
  }
  .hmcon {
    width: 96%;
    top: 0;
    position: relative;
    flex-wrap: wrap;
    margin: 5% auto 0 auto;

    left: 0%;
  }
  .pcimg {
    display: none;
  }
  .mbimg {
    display: block;
  }
  .ffbox {
    position: absolute;
    top: 1%;
    right: 1%;
    width: 150px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  .logobx {
    width: 42.5%;
  }
  .topbx {
    position: relative;
    height: auto;
  }
  .head {
    position: relative;
    background: url("../images/mbindex_01.jpg");
    background-size: 100% 100%;
    padding-bottom: 0;
  }
}