.ixpo img,
.tpmk img,
.slogn img,
.lobx img,
.clatl img,
.fbt img,
.clasimg img,
.fuimg img,
.ixpom img,
.fuimgw img,
.upclas img,
.dwalc img,
.dwart img,
.membt img,
.memslogn img,
.mimat img,
.mimaf img,
.mempo img,
.sandbtbx img,
.mimatl img,
.mimatl2 img,
.mimatl3 img,
.hbt img {
  width: 100%;
  display: block;
}
.fuimg:hover,
.clasimg:hover,
.swiper-pagination-bullet:hover,
.fuimgw:hover,
.tmvbx:hover,
.askx:hover,
.upclas:hover,
.previous:hover,
.dwba:hover,
.dwbb:hover,
.clasbtmo:hover,
.dwb:hover,
.membt:hover,
.login:hover,
.sandbtbx:hover,
.sanbt:hover,
.okbt:hover,
.hbt:hover {
  transform: scale(0.98);
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  filter: brightness(1.1);
  cursor: pointer;
}
.dwb:hover {
  color: #ff6f00;
}
.topbt {
  position: fixed;
  width: 60px;
  padding-bottom: 60px;
  overflow: hidden;
  display: block;
  cursor: pointer;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/topbt.png);
  background-position: 50% 50%;
  background-size: 100% auto;
  right: 3px;
  bottom: 25%;
  z-index: 8;
}
.hbtbx {
  position: absolute;
  padding: 2.5%;
  width: 40%;
  left: 50%;
  bottom: 0%;
  margin-left: -19%;
  background: url("../images/tbbg.png");
  background-size: 100% 100%;
  z-index: 55;
}
.hbox {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.hbt {
  width: 48%;
  margin: 0 1%;
}
.on {
  display: block;
}
.tmvbx {
  position: absolute;
  width: 112px;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  background: url("../images/mvp.png");
  padding-bottom: 112px;
  top: 30%;
  left: 50%;
  margin-left: -56px;
  z-index: 5;
}
.tmvbx::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  background-image: url(../images/mvl.png);
  top: 0;
  left: 0;
  -webkit-animation: rotate 2s linear infinite 300ms 0 ease;
  -moz-animation: rotate 2s linear infinite 300ms 0 ease;
  -ms-animation: rotate 2s linear infinite 300ms 0 ease;
  animation: rotate 2s linear infinite 300ms 0 ease;
  -moz-animation: rotate 2s linear infinite;
  -webkit-animation: rotate 2s linear infinite;
  -o-animation: rotate 2s linear infinite;
  -ms-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}
/* rightbtn */
/*右懸浮*/
.p_bx {
  position: fixed;
  width: 260px;
  height: 540px;
  right: 0;
  top: 60%;
  margin-top: -355px;
  z-index: 9;
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.lf_bx {
  position: absolute;
  width: 298px;
  height: 100%;
  pointer-events: none;
  right: 0;
  top: 0;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-image: url(../images/lf_bx.png);
  background-position: 100% 0%;
  background-size: 100% auto;
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.lf_bx2 {
  position: absolute;
  width: 174px;
  right: 0;
  top: 39.00709219858156%;
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.lf_b1,
.lf_b2,
.lf_b3 {
  position: relative;
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.lf_bx2 > .lf_b1 {
  padding-bottom: 12%;
  background-image: url(../images/m_r_01.png);
  background-position: 100% 0%;
  background-size: 100% auto;
}
.lf_bx2 > .lf_b2 {
  margin-top: -1px;
  background-image: url(../images/m_r_02.png), url(../images/m_r_02.png);
  background-position: 100% 100%, 100% 100%;
  background-size: 100% auto, 100% 100%;
}
.lf_bx2 > .lf_b2 > div {
  width: 96.666666%;
  padding: 0.2rem 0 0;
  min-height: 100px;
}
.lf_bx2 > .lf_b3 {
  padding-bottom: 12%; /*33*/
  background-image: url(../images/m_r_03.png);
  background-position: 100% 100%;
  background-size: 100% auto;
  top: -1px;
}
.po_bx {
  position: absolute;
  width: 30px;
  height: 29px;
  top: 20px;
  left: -29px;
  cursor: pointer;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 100% auto;
  background-image: url(../images/po_c.png);
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.po_bx.op {
  background-image: url(../images/po_o.png);
}
.community_bx {
  position: relative;
  width: 90%;
  padding: 1rem 0 0.8rem;
  text-align: center;
  margin: 0 auto;
}
.community_bx > a {
  position: relative;
  width: 50px;
  padding-bottom: 50px;
  display: inline-block;
  margin: 0.1rem 0.25rem;
  cursor: pointer;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.fb_bt {
  background-image: url(../images/fb_bt.png);
}
.yt_bt {
  background-image: url(../images/yt_bt.png);
}
.line_bt {
  background-image: url(../images/line_bt.png);
}
.bh_bt {
  background-image: url(../images/bh_bt.png);
}
.lf_b2 .rbta {
  position: relative;
  width: 80%;
  padding-bottom: 25%;
  margin: 0 auto;
  border-radius: 0.4rem;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-image: url(../images/rbtt1.png);
  background-size: 100% auto;
  top: -0.3rem;
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.lf_b2 .rbtb {
  position: relative;
  width: 80%;
  padding-bottom: 25%;
  margin: 0 auto;
  border-radius: 0.4rem;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-image: url(../images/rbtt2.png);
  background-size: 100% auto;
  top: -0.3rem;
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.lf_b2 .ios_bt,
.lf_b2 .google_bt {
  position: relative;
  width: 82%;
  padding-bottom: 26.786%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-size: 95% auto;
  background-color: #000;
  border-radius: 0.4rem;
  display: block;
  cursor: pointer;
  margin: 0 auto;
  border: 1px solid #57858b;
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.lf_b2 .ios_bt {
  background-image: url(../images/ios_bt.png);
  margin-bottom: 0.5rem;
}
.lf_b2 .google_bt {
  background-image: url(../images/google_bt.png);
}
.lf_b2 .ios_bt:hover,
.lf_b2 .google_bt:hover {
  border: 1px solid #59b3be;
  background-color: #59b3be;
}
.askx {
  width: 70px;
  margin: 0 auto;
}
.po_bx,.askx img {
    animation: changeColor 1.8s linear infinite alternate;
}

    /**/
    .p_bx.op {
        width: 0px;
    }
.p_bx.op .lf_bx {
  right: -299px;
}
.p_bx.op .lf_bx2 {
  right: -173px;
}
/* topbx */

.topbx {
  position: fixed;
  width: 100%;
  height: 150px;
  background-image: -webkit-linear-gradient(
    top,
    rgb(0, 0, 0),
    transparent 100%
  );
  z-index: 99;
}
.lobx {
  position: absolute;
  padding: 10px;
  width: 149px;
  margin-left: 1%;
}
.tbox {
  position: absolute;
  z-index: 9;
  width: 55%;
  right: 3%;
  display: flex;
  /* align-items: center; */
  align-content: center;
  justify-content: center;
}
.tbox > div {
  position: relative;
  margin: 0 0.5% 0 0.5%;
  color: #f7f6ea;
  font-size: 1.8rem;

  text-align: center;
  width: 15.666666666666667%;
  cursor: pointer;
}
.memtbox {
  position: absolute;
  z-index: 9;
  width: 650px;
  right: 0%;
  display: flex;
  /* align-items: center; */
  align-content: center;
  justify-content: center;
}

.bta {
  font-size: 1vw;
  margin: 5% auto;
  padding-bottom: 5%;
  border-bottom: 0.5px dashed rgba(237, 235, 205, 0.2);
}
.bta:hover {
  color: #fce875;
}
.tbt1:hover .tbtm,
.tbt2:hover .tbtm,
.tbt3:hover .tbtm {
  color: #ffe600;
}
.tbtm {
  position: absolute;
  width: 100%;
  padding-bottom: 5%;
  margin-top: 10%;
  z-index: 2;
}
.mtbtm {
  width: 100%;
  padding-bottom: 5%;
  margin-top: 2%;
  z-index: 2;
}
.mtbtm:hover {
  color: #eed602;
}
.tbtm:hover {
  color: #eed602;
}
.tbt {
  width: 100%;
  z-index: 1;
  margin-top: -34%;
  padding: 35% 0 10% 0;
  background: url("../images/tbtbgg.png");
  background-size: 100% 100%;
  display: none;
  -webkit-animation: slide-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.tbt1 {
}
.tbt2 {
}
.tbt3 {
}
.tbt4 {
}
.tbt5 {
}
.tbt6 {
}
* 公告 */ .newsbx {
  float: right;
  position: relative;
  width: 48.72%;
}
.news_mu {
  position: relative;
  width: 100%;
  height: 3.5rem;
  padding: 0 1rem;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/ns1.png);
  background-position: 0% 100%;
  background-size: 100% 2px;
}
/*.ns2{
	position:relative;
	width:10px;
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-image:url(../images/ns2.png);
	background-position:50% 50%;
	}*/
.news_mu a {
  position: relative;
  line-height: 3.5rem;
}
.news_mu .n1 {
  float: left;
}
.news_mu .n1 a {
  position: relative;
  display: inline-block;
  padding: 0 0.8rem;
  margin-right: 10px;
  font-size: 1.75rem;
  color: #8f8773;
}
.news_mu .n1 a.on {
  color: #427eae;
  /*font-weight:500;*/
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/n_on.png);
  background-position: 50% 100%;
}
.news_mu .n1 a.on:hover {
  color: #574d41;
}
.news_mu .n1 a::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 3.5rem;
  display: inline-block;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/ns2.png);
  background-position: 50% 50%;
  right: -10px;
  top: 0;
}
.news_mu .n1 a:last-child::after {
  display: none;
}
.news_mu .n1 a:hover {
  color: #60b4bd;
}
.news_mu .n2 {
  float: right;
}
.news_mu .n2 > a {
  display: block;
  padding: 0 0.8rem;
  font-size: 1.33rem;
  color: #ff8400;
}
.news_mu .n2 a:hover {
  color: #ff3c00;
} /**/
.newsbx .n3 {
  position: relative;
  width: 98%;
  display: block;
  padding: 1rem 1rem 0;
  margin: 0 auto;
}
.newsbx .n3 ul {
  min-height: 300px;
  padding-left: 8px;
}
.newsbx .n3 ul li {
  position: relative;
  padding: 0 6.8rem 0 7.1rem;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/ns3.png);
  background-position: 0% 100%;
  background-size: 100% 1px;
  transition: all 0.5s;
}
.tnw:before {
  content: url(../images/topnews.png);
  position: absolute;
  width: 15px;
  height: 15px;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  left: -16px;
  top: 15px;
}
.nw,
.ac,
.st,
.rd {
  position: absolute;
  width: 73px;
  height: 34px;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  left: 0.1rem;
  top: 0.5rem;
}
.nw {
  background-image: url(../images/ico_a.png);
}
.ac {
  background-image: url(../images/ico_b.png);
}
.st {
  background-image: url(../images/ico_c.png);
}
.rd {
  background-image: url(../images/ico_d.png);
}
.nbox {
  position: relative;
  width: 100%;
  display: block;
  font-size: 1.5rem;
  line-height: 3.75rem;
  color: #423b34;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all 0.5s;
}
.nbox:link,
.nbox:visited,
.nbox:active {
  color: #423b34;
}
.nbox:hover {
  color: #4699a2;
}
.date {
  position: absolute;
  font-size: 1.25rem;
  line-height: 3.75rem;
  color: #7b756d;
  top: 0;
  right: 0.3rem;
  transition: all 0.5s;
}
/**/

.h_tit {
  position: relative;
  width: 900px;
  padding-bottom: 100px;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
  margin: 0 auto;
}
.h_t1 {
  background-image: url(../images/tit_1.png);
}
.h_t2 {
  background-image: url(../images/tit_2.png);
}
.h_t3 {
  background-image: url(../images/tit_3.png);
}
/**/
.gap1 {
  position: relative;
  width: 100%;
  padding-bottom: 0%;
}
.hbg_2t {
  position: absolute;
  width: 100%;
  padding-bottom: 5.65%;
  pointer-events: none;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/hbg_2_01.png);
  background-position: 50% 100%;
  background-size: 100% auto;
  left: 0;
  bottom: -1px;
  z-index: 2;
}
.hbg_2_1,
.hbg_2_2 {
  position: relative;
  width: 100%;
  display: block;
  background-attachment: scroll;
  background-size: 100% auto;
  /**/
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.hbg_2_1 {
  padding: 0.8rem 0 5rem;
  /*min-height:456px;*/
  background-color: #fcf9f2;
  background-image: url(../images/hbg_2_02.png);
  background-repeat: no-repeat;
  background-position: 50% 100%;
}
.hbg_2_2 {
  /*min-height:1070px;1207*/
  background-image: url(../images/hbg_2_04.jpg), url(../images/hbg_2_03.png);
  background-repeat: no-repeat, repeat-y;
  background-position: 50% 100%, 50% 0%;
}
/**/
/* head */
.hbg {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 48.5%;
  background-color: #16130e;
  background-attachment: scroll;
  background-image: url(../images/bg_01.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 100% auto;
  overflow: hidden;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  z-index: -1;
}
.hbg1 {
  position: relative;
  width: 100%;
  display: block;
  background-attachment: scroll;
  background-size: 100% auto;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.hbg1 {
  padding: 5.8rem 0 10rem;
  background-color: #e9f4f8;
  background-image: url(../images/bg_02.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 100%;
}

.hbg2 {
  position: relative;
  display: block;
  width: 100%;

  background-color: #fcf9f2;
  background: url(../images/bg_03.jpg) no-repeat;
  background-size: 100% 100%;
  background-position: 50% 100%;
}
.hbg3 {
  display: block;
  width: 100%;
  padding-bottom: 8%;
  background-color: #fcf9f2;
  background: url(../images/bg_04.jpg) no-repeat;
  background-size: 100% 100%;
  background-position: 50% 100%;
}
.hbg4 {
  display: block;
  width: 100%;
  margin-top: -1%;
  background-color: #fcf9f2;
  background: url(../images/bg_05.jpg) no-repeat;
  background-size: 100% 100%;
  background-position: 50% 100%;
}
.hfoot {
  display: block;
  width: 100%;
  padding: 35rem 0 0;
  background-color: #fcf9f2;
  background: url(../images/bg_06.jpg) no-repeat;
  background-size: 100% 100%;
  background-position: 50% 100%;
}
.ixpo {
  width: 80%;
  position: absolute;
  left: 50%;
  margin-left: -40%;
}
.tpmk {
  position: absolute;
  display: block;
  width: 100%;
  bottom: -2px;
  z-index: 2;
}
.slogn {
    position: absolute;
    width: 50%;
    left: 23.6%;
    margin-left: 0%;
    bottom: 17%;
}
.slogn2 {
    position: absolute;
    width: 100%;
    left: 0;
    margin-left: -25%;
    bottom: 10%;
    animation: 9s linear 0s infinite normal none running toright;
    z-index: 99;
}
    .slogn2 img {
        width: 15%;
    }

.memslogn {
  position: absolute;
  width: 50%;
  left: 50%;
  margin-left: -25%;
  bottom: 10%;
}
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.h_content {
  position: relative;
  width: 1450px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.bnbx .bn2 .swiper-slide img {
  /* position: absolute; */
  width: 100%;
  display: block;
  top: 0;
  left: 0;
}
#bnbb {
  position: relative;
  margin-top: 2%;
}
.bnbx {
  position: relative;
  width: 48.72%;
  padding-bottom: 30%;
  margin: 0.8rem 0 0;
}
.bnbx .bn1 {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/bnbx.png);
  background-position: 50% 5%;
  background-size: 100% auto;
  top: 0;
  left: 0;
  z-index: 2;
}
.bnbx .bn2 {
  position: absolute;
  width: 98%;
  top: 2.8%;
  left: 1.67%;
}
.bnbx .bn2 .swiper-pagination-bullet {
  width: 4.6%;
  height: auto;
  padding-bottom: 4.7%;
  margin: 0 0.1rem;
  background: none;
  opacity: 1;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/bn_1.png);
  background-position: 50% 50%;
  background-size: 100% auto;
}
.bnbx .bn2 .swiper-pagination-bullet-active {
  background-image: url(../images/bn_2.png);
}
.newsbx {
  width: 48.72%;
  min-height: 300px;
  margin-left: 2rem;
}
/* bg2 */
.h_tit {
  position: relative;
  width: 925px;
  padding-bottom: 147px;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  margin: 0 auto;
}
.h_t1 {
  background-image: url(../images/tlt1.png);
}
.h_t2 {
  background-image: url(../images/tlt2.png);
}
.artc {
  position: relative;
  width: 100%;
  margin-top: -4%;
}
/* bg3 */
.classbx {
  width: 65%;
  padding-top: 6%;
  margin: 0 auto;
  display: flex;
  /* align-items: center; */
  align-content: center;
  justify-content: center;
}
.fbbx {
  width: 80%;
  margin: 0 2%;
}
.clbx {
  width: 80%;
  margin: 0 2%;
}
.clatl {
  width: 60%;
  margin: 3rem auto;
}
.fbcn {
  width: 100%;
}
.clascx {
  width: 100%;
  padding-bottom: 2%;
}
.clasimg {
  width: 90%;
  margin: 1% auto;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.clasmore {
  position: relative;
  width: 90%;
  margin: 0 auto;
}
.clasbtmo {
  position: absolute;
  width: 121px;
  right: 0;
}
.fbt {
  width: 100%;
}
.fbc {
  width: 100%;
  background: url("../images/fbb_02.png");
  background-size: 100% auto;
}
.fbf {
  width: 100%;
}
.fmc {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
}
/* bg4 */
.fubx {
  width: 65%;
  margin: 0 auto;
  padding: 2% 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.fubxw {
  display: none;
  width: 100%;
}
.fuimg {
  width: 20%;
  margin: 0 1%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.fuimgw {
  width: 90%;
  margin: 1em auto 0 auto;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.ixpom {
  width: 100%;
  display: none;
  position: absolute;
}
/* dw */
.dwbx {
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.dwabx {
  width: 100%;
  display: flex;
  /* align-items: center; */
  align-content: center;
  justify-content: center;
}
.dwbbx {
  margin-top: 3%;
  width: 100%;
  display: flex;
  /* align-items: center; */
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.dwbc {
  width: 32%;
  margin: 0 0.5%;
}
.dwbca {
  width: 32%;
  margin: 0 0.5%;
}
.dwbt {
  width: 100%;
  padding: 10px;
  text-align: center;
  background: url("../images/dwtlb.png");
  background-size: 100% 100%;
  color: #ffc168;
}
.dwbm {
  width: 90%;
  padding: 10px;
  margin: 0 auto;
}
.dwbmbx {
  width: 90%;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid rgba(117, 116, 96, 0.3);
}
.dwal {
  width: 40%;
  padding: 2% 5% 0 5%;
}
.dwalt {
  width: 90%;
  margin: 5% auto 0 auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.dwalc {
  width: 100%;
}
.dwar {
  width: 58%;
  margin-left: 2%;
}
.dwba,
.dwbb {
  color: #ffda5f;
  padding: 10px;
  font-size: 1.5rem;
  width: 49%;
  margin: 0 0.5%;
  border-radius: 5px;
  text-align: center;
  background-color: #35342e;
}
.dwart {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.dwartx {
  position: absolute;
  width: 100%;
  color: #ffeebf;
  text-align: center;
}
.dwtxl {
  width: 100%;
  height: 54px;
  color: #ffc168;
  background: url("../images/dwtla.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.dwarc {
  width: 100%;
  padding: 10px;
}

.donut {
    position: absolute;
    width: 10%;
    margin-top: 35%;
    margin-left: 15%;
    overflow: hidden;
    pointer-events: none;
}
.donut img {
    width: 100%;
}
    .monsterbox {
    position: absolute;
    width: 100%;
    margin-top: 33%;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.monsters {
    width: 100%;
    float: right;
    display: flex;
    flex-direction: row-reverse;
}

.monster {
    width: 100%;
    height: 0;
    padding-bottom: 12.0833%;
    display: flex;

}

.monster99 {
    width: 16%;
    margin-left: -15%;
    padding-bottom: 12.0833%;
    background-image: url(../images/monster_99.png);
}

.monster02 {
    width: 16%;
    padding-bottom: 22.0833%;
    background-image: url(../images/monster_02.png);
}
.monster03 {
    width: 16%;
    padding-bottom: 32.0833%;
    background-image: url(../images/monster_03.png);
}
.monster04 {
    width: 16%;
    padding-bottom: 22.0833%;
    background-image: url(../images/monster_04.png);
}
.monster05 {
    width: 16%;
    padding-bottom: 32.0833%;
    background-image: url(../images/monster_08.png);
}
.monster06 {
    width: 100%;
    padding-bottom: 26.0833%;
    background-image: url(../images/monster_06.png);
    margin-left: 32%;
}
.monster07 {
    width: 100%;
    padding-bottom: 15.0833%;
    background-image: url(../images/monster_07.png);
    margin-left: 6%;
}
.monster08 {
    width: 100%;
    padding-bottom: 22.0833%;
    background-image: url(../images/monster_05.png);
    margin-left: 3%;
}
.monster09 {
    width: 100%;
    padding-bottom: 15.0833%;
    background-image: url(../images/monster_09.png);
    margin-left: 1%;
}
.monster99, .monster02, .monster03, .monster04, .monster05, .monster06, .monster07, .monster08, .monster09 {
    display: block;
    height: 0;
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    animation-name: bouncing;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    transform-origin: 50% 100%;
}

/* 动画 */
.floating {
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: 3.5s;
    -webkit-animation-duration: 3.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}


/* ANIMA */
@keyframes bouncing {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(3%) scaleY(0.95);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes toright {
    100% {
        transform: translateX(200%);
    }
}

@keyframes moveAndFloat {
    0% {
        transform: translateX(0) translateY(0);
    }


    50% {
        transform: translateX(50vw) translateY(-80%);
    }

    100% {
        transform: translateX(125vw) translateY(0);
    }

}

@keyframes floating {
    0% {
        /* transform: translateY(0%); */
    }

    50% {
        transform: translateY(4%);
    }

    100% {
        /* transform: translateY(0%); */
    }
}


@keyframes changeColor {
    0% {
        filter: brightness(150%) ;
    }

    100% {
        filter: brightness(50%) ;
    }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(48px);
    transform: translateY(48px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(48px);
    transform: translateY(48px);
  }
}
@media only screen and (max-width: 1440px) {
  .clasimg {
    width: 90%;
    margin: 6% auto;
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
  }
  .fmc {
    width: 95%;
  }
  .fbbx,
  .clbx {
    width: 48%;
  }
}
@media only screen and (max-width: 1400px) {
  .h_content {
    width: 95%;
    margin: 0 auto;
  }
  .classbx {
    width: 95%;
  }
  .clatl {
    width: 90%;
  }
}
@media only screen and (max-width: 1250px) {
  .nw,
  .ac,
  .st,
  .rd {
    width: 60px;
    height: 30px;
    top: 0.54rem;
  }
  .nbox {
    font-size: 1.3rem;
    line-height: 3rem;
  }
}
@media only screen and (max-width: 1000px) {
  .h_tit {
    width: 90%;
  }
  .fmc {
    width: 95%;
  }
  .news_mu .n2 > a {
    display: block;
    padding: 0rem;
    font-size: 0.5rem;
    color: #ff8400;
  }
}

@media only screen and (max-width: 800px) {
  .memtbox {
    width: 50%;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 780px) {
    .slogn {
        /*
        display: none;
            */
    }
    .slogn2 {
        display: none;
        /*
        margin-left: -10%;
        bottom: 46%;
        animation-name: floating;
        -webkit-animation-name: floating;
        animation-duration: 4.5s;
        -webkit-animation-duration: 4.5s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
            */
    }
        .slogn2 img {
            width: 75%;
        }
        .hbtbx {
        display: none;
        /*
        position: absolute;
        padding: 5%;
        width: 90%;
        left: 50%;
        bottom: 4%;
        margin-left: -45%;
        background: url("../images/tbbg.png");
        background-size: 100% 100%;*/
    }
  .memslogn {
    position: absolute;
    width: 90%;
    left: 50%;
    margin-left: -45%;
    bottom: 10%;
  }
  .p_bx.op .lf_bx2 {
    right: -151px;
  }
  .lf_bx {
    position: absolute;
    width: 250px;
    height: 100%;
    pointer-events: none;
    right: 0;
    top: 21%;
  }
  .lf_bx2 {
    position: absolute;
    width: 150px;
    right: 0;
    top: 39.00709219858156%;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
  }
  .tmvbx {
    top: 38%;
  }
  .tbox {
    display: none;
  }
  .fubxw {
    display: block;
  }
  .fubx {
    display: none;
  }
  .fbbx,
  .clbx {
    width: 98%;
  }
  .fmc {
    width: 72%;
  }

  .classbx {
    display: block;
  }
  .h_tit {
    width: 100%;
  }
  .nbox {
    line-height: 3.2rem;
  }
  .newsbx .n3 {
    width: 99%;
  }
  .news_mu {
    padding: 0rem;
  }
  .newsbx {
    width: 98%;
    margin: 0 auto;
  }
  .bnbx {
    width: 95%;
    margin: 0 auto;
    padding-bottom: 65%;
  }
  .h_content {
    display: block;
  }
  .hbg {
    padding-bottom: 150%;
    background-image: url(../images/mbbg1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0%;
  }
  .ixpom {
    display: block;
  }
  .ixpo {
    display: none;
  }
    .slogn {
        width: 95%;
        margin-left: -26%;
        bottom: 6%;
    }
  .hbg1 {
    padding: 1.8rem 0 0rem;
  }
}

@media only screen and (max-width: 430px) {
    .p_bx {
        top: 50%;        
    }

    .topbx {
    position: fixed;
    width: 100%;
    height: 150px;
    background-image: -webkit-linear-gradient(
      top,
      rgb(0, 0, 0),
      transparent 30%
    );
    z-index: 99;
  }
  .dwbt {
    background-size: 100% 100%;
  }
  .dwbc {
    width: 49%;
  }
  .dwbca {
    width: 100%;
  }
  .dwbm {
    width: 98%;
  }
  .dwalt {
    width: 98%;
  }
  .dwal,
  .dwar {
    width: 95%;
    margin: 0 auto;
  }
  .dwbx,
  .dwabx {
    display: block;
  }
  .hfoot {
    padding: 10rem 0 0;
  }
  .clasimg {
    width: 100%;
  }
  .h_t1 {
    background-image: url(../images/tlt1.png);
    background-position: 65% 50%;
    background-size: 140% auto;
  }
  .h_t2 {
    background-image: url(../images/tlt1.png);
    background-position: 65% 50%;
    background-size: 140% auto;
  }
  .fmc {
    width: 95%;
  }
  .news_mu .n1 a {
    padding: 0 0.35rem;
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 470px) {
  .memtbox {
    width: 64%;
    flex-wrap: wrap;
  }
}