@font-face {

  font-family: Helvetica;

  src: url('Helvetica-Condensed-Light.ttf');

}



@font-face {

  font-family: comic;

  src: url('comic.ttf');

}



* {

  margin: 0;

  padding: 0;

  list-style: none;

  outline: none;

  text-decoration: none;

  font-family: Helvetica;

}



img {

  object-fit: cover;

}



header {

  width: 100%;

  box-sizing: border-box;

  padding: 0 50px;

  background: #fff;

}



.had {

  padding: 25px 0;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}



.hadLeft {

  display: flex;

  align-items: center;

  gap: 70px;

}



.logo {

  display: block;

}



.logo img {

  display: block;

  width: 195px;

}



.logo h6 {

  font-size: 14px;

  font-weight: normal;

  font-family: comic;

  color: #999;

  letter-spacing: 1px;

}



.hadSch {

  display: flex;

  width: 550px;

  height: 55px;

  box-sizing: border-box;

  border: 1px solid #007DFF;

  background: #007DFF;

}



.hadSch input {

  border: none;

  height: 100%;

  background: #fff;

  box-sizing: border-box;

  padding: 0 15px;

  width: calc(100% - 60px);

  font-size: 16px;

}



.hadSch button {

  box-sizing: border-box;

  border: none;

  background: none;

  width: 60px;

  cursor: pointer;

}



.hadSch button img {

  display: block;

  width: 32px;

  margin: 0 auto;

}


.lang {
  position: relative;
  padding: 5px 20px;
  background: #333;
  color: #fff;
  text-align: center;
  cursor: pointer;
}



.lang h4,
.lang a {

  display: block;

  /* padding: 10px 20px;

  background: #333; */

  color: #fff;
  padding: 8px 0;

}

.lagBox {
  position: absolute;
  min-width: 100%;
  top: 99%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 0;
  background: #333;
  box-sizing: border-box;
  border: 1px solid #333;
  display: none;
}

.lang a:hover {
  background: #fff;
  color: #333;
}



.hadNav {

  width: 100%;

  background: #204E92;

}



.hadNav>div {

  width: 1080px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 0;

}



.hadNav ul {

  display: flex;

  gap: 50px;

}


.hadNav li {
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px 0;
}



.hadNav a {

  font-size: 20px;

  color: #fff;

}

.hadNav img {
  display: block;
  width: 25px;
  transition: .4s;
}


.hadNav li:hover img {
  transform: rotateX(180deg);
}

.hadSon {
  min-width: 100%;
  padding: 20px 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #204E92;
  z-index: 3;
  box-shadow: 0 5px 8px #323234;
  display: none;
}

.hadNav li:hover .hadSon {
  display: block;
}

.hadSon a {
  display: block;
  text-align: center;
  padding: 5px 20px;
  white-space: nowrap;
  margin: 5px 0;
}

.hadSon a:hover {
  background: #3367b6;
}



.quate {

  display: block;

  padding: 10px 30px;

  background: #FFBA00;

  color: #fff;

  border-radius: 20px;

  font-weight: 600;

}





.swiper {

  width: 100%;

  height: 100%;

}



.swiper-slide {

  text-align: center;

  font-size: 18px;

  background: #fff;



  /* Center slide text vertically */

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  -webkit-justify-content: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-align-items: center;

  align-items: center;

}



.swiper-slide img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



footer {

  width: 100%;

  background: #65666A;

}



.fot {

  width: 1080px;

  margin: 0 auto;

  padding: 30px 0;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

}



.fot a,
.fot h4,
.fot p{

  box-sizing: border-box;

  padding-left: 20px;

  color: #fff;

  font-size: 18px;

  font-weight: normal;

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 0 0 15px;

}

.fotCont img {
  display: block;
  filter: grayscale(0%) brightness(1000%);
  width: 24px;
}

.appList {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.appList a {
  font-size: 14px;
}


.icp {

  background: #58585A;

  padding: 15px 0;

}



.icp>div {

  width: 1080px;

  margin: 0 auto;

  /* display: flex;

  gap: 10px; */
  text-align: center;

}



.icp>div h6,

.icp>div a {

  display: block;

  color: #fff;

  font-size: 16px;

  font-weight: normal;

}



/* 左边栏 */

.catalog {

  width: 100%;

  box-sizing: border-box;

  padding: 0 50px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin: 30px 0 0;

}



.catNav {

  width: 270px;

  text-indent: 1rem;

}



.catNav h4 {

  display: flex;

  justify-content: space-between;

  align-items: center;

  box-sizing: border-box;

  padding: 10px;

  background: #00B7FF;

  color: #fff;

  font-weight: normal;

  box-sizing: border-box;

}



.catNav h4.active img {

  transform: rotate(180deg);

}



.catNav a {

  display: block;

  border-bottom: 1px solid #939393;

  background: #21292E;

  padding: 10px;

  color: #eee;

  box-sizing: border-box;

}



.catNav a:hover {

  background: #00B7FF;

}



.catCont {

  width: calc(100% - 340px);

}







@media screen and (max-width:1440px) {



  .catNav {

    width: 240px;

    text-indent: 0.5rem;

  }



  .catCont {

    width: calc(100% - 300px);

  }



}







@media screen and (max-width:1280px) {



  .hadLeft {

    gap: 40px;

  }



  .logo img {

    width: 160px;

  }



  .hadSch {

    width: 390px;

    height: 45px;

  }



  .hadNav>div {

    width: 90%;

  }



  .hadNav a {

    font-size: 18px;

  }



  .quate {

    padding: 5px 20px;

    font-weight: 300;

  }



  .fot,

  .icp>div {

    width: 90%;

  }



  .fot {

    padding: 20px 0 50px;

  }



  .catNav {

    width: 220px;

    text-indent: 0.5rem;

  }



  .catCont {

    width: calc(100% - 250px);

  }

  .hadNav ul {
    gap: 30px;
  }



}





@media screen and (max-width:1024px) {



  .hadNav>div {
    width: 95%;
  }


  .hadNav ul {
    gap: 10px;
  }


  header,

  .catalog {

    padding: 0 5%;

  }



  .hadLeft {

    gap: 20px;

  }



  .hadSch {

    width: 290px;

    height: 40px;

  }



  .logo img {

    width: 130px;

  }



  .logo h6 {

    font-size: 12px;

  }



  .hadNav a {

    font-size: 16px;

  }



  .lang a {

    padding: 6px 15px;

  }



  .icp>div h6,

  .icp>div a {

    font-size: 13px;

  }



  .catNav {

    width: 180px;

    text-indent: 0.5rem;

  }



  .catCont {

    width: calc(100% - 200px);

  }



  .catNav a {

    font-size: 13px;

  }





}



.menu,

.monile {

  display: none;

}



@media screen and (max-width:768px) {


  #header {
    position: sticky;
    width: 100%;
    background: #333;
    z-index: 3;
    top: 0;
    left: 0;
  }


  .hadSch,

  .lang,

  .hadNav {

    display: none;

  }



  .had {

    padding: 15px 0;

    align-items: center;

  }



  .logo img {

    width: 90px;

  }



  .menu {

    display: block;

  }



  .monile {

    width: 100%;

    height: 100%;

    box-sizing: border-box;

    padding: 20px 10px;

    position: fixed;

    left: 0;

    top: 80px;

    background: #fff;

    z-index: 3;

  }



  .monile .hadSch {

    display: flex;

    width: 90%;

    margin: 0 auto;

  }



  .choice {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 0 0 15px;

    box-sizing: border-box;

    padding: 0 10px;

  }



  .choice a,
  .lingo {

    padding: 5px;

    box-sizing: border-box;

    color: #204E92;

    font-size: 20px;

    background: none;

    display: block;

  }

  .lingo {
    position: relative;
  }


  .lingUl {
    position: absolute;
    background: #fff;
    bottom: 100%;
    min-width: 100%;
    right: 0;
    box-sizing: border-box;
    padding: 10px 0;
    border: 1px solid #d6e7ff;
    text-align: center;
    display: none;
    z-index: 1;
  }

  .lingUl a {
    font-size: 16px;
    white-space: nowrap;
  }



  .moNav {

    margin: 30px 0;

    width: 100%;

    box-sizing: border-box;

    padding: 0 15px;

  }


  .moNav li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }


  .moNav a {

    display: block;

    color: #204E92;

    font-size: 20px;

    margin: 0 0 20px;

  }


  .moNav li img {
    display: block;
    width: 28px;
    transition: .4s;
  }


  .moNav li.active img {
    transform: rotateX(180deg);
  }



  .hadSon {
    width: 100%;
    left: 0;
    transform: translateX(0);
    background: #fff;
    box-shadow: none;
    position: relative;
    top: 0;
    padding: 0 0 10px;
  }



  .hadSon a {
    text-align: left;
    margin: 0 !important;
  }

  .hadSon a:hover {
    background: none;
  }


  .catalog {

    flex-wrap: wrap;

  }



  .catalog>div {

    width: 100%;

  }



  .catNav {

    margin: 0 0 20px;

  }



  .catNav>div>div {

    display: none;

  }



  .icp>div a,

  .icp>div hr {

    display: none;

  }



  .fot {

    padding: 15px 0;

    grid-template-columns: repeat(1, 1fr);

    gap: 20px;

  }

  .fot a,
  .fot h4,
  .fot p {

    padding-left: 0;
    gap: 5px;
    font-size: 12px;
  }

  .fotCont img,
  .appList img {
    width: 20px;
  }

  .appList {
    gap: 10px;
  }

  .fotApp h4 img {
    display: block;
    width: 26px;
  }





}