@import url("https://fonts.googleapis.com/css?family=Exo:400,700");

* {
  margin: 0px;
  padding: 0px;
}

body {
 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}




.closeMenu {
  display: none;
}

.displayMenu {
  display: none;
}

/******************************************************/

/* 
.div-menu .ul-menu {
  list-style: none;
  display: flex;
  position: absolute;
  top: -1.1vw;
  left: 0vw;
  width: 100%;
  height: 4.1vw;
  z-index: 500;
}

.div-menu .ul-menu li {
  position: relative;
  display: flex;
  padding-right: 2vw;
  padding-top: 1.5vw;
  font-size: 0.9vw;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.div-menu .ul-menu li a {
  color: rgb(140, 140, 140);
  text-decoration: none;
  transition: all 0.8s ease-in-out;
  position: relative;
  top: -0.3vw;
  padding: 0.3vw 0.5vw;
} */



.area {
  position: relative;
  background-image: url(../PIC/cart7.jpg);
  filter: brightness(25%);
  background-size: 100%;
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
  width: 100%;
  height: 100vh;
  z-index: 2;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.485);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

.img-style {
  position: absolute;
  height: 45vw;
  width: 30vw;
  top: 2vw;
  left: 4vw;
  z-index: 300;
}

/*************************************************************/
/*******************************************************************/
/***************************************************************************/

body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  background-color: rgb(245, 245, 245);
}

/****************************************************************************/
/*******************************************************************************/
/******************************************************/

.img-head {
  height: 8vw;
  width: 8vw;
  top: -1vw;
  left: 3vw;
  position: absolute;
  z-index: 200;
}

/*******************************************************************************/
/******************************************************/
.div-menu {
  position: absolute;
  top:3vw;
  left: 25vw;
  z-index: 80;
  font-family: garamond;
  transition: all 0.4s ease-in-out;
}

.div-menu .ul-menu {
  display: flex;
  /* border: 2PX solid red; */
  padding-right: 1vw;

}

.div-menu .ul-menu li {
  margin-right: 2vw;
  list-style: none;
  width: max-content;
  font-size: 1.1vw;
}

.div-menu .ul-menu li a {
  text-decoration: none;
    color: white;
    transition: all 0.4s ease-in-out;
}

.div-menu ul li:hover a {
  color: rgb(17, 209, 17);
    padding-bottom: 1vw;
    border-bottom: 2px solid rgb(17, 209, 17);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.div-menu .ul-menu .liCarto a {
  position: relative;
  top: 0.1vw;
  color: rgb(86, 85, 85);
  padding: 0.3vw 1vw 0.3vw 1vw;
  /* transition: all 0.5s ease-in-out; */
  box-shadow: 0.08vw 0.08vw 0.2vw rgb(130, 130, 130);
  background-color: rgb(236, 236, 236);
}

.div-menu .ul-menu .liCarto a:hover {
      color: rgb(17, 209, 17);
      padding-bottom: 1vw;
      box-shadow: none;
      background-color: transparent;
      border-bottom: 2px solid rgb(17, 209, 17);
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  
}

/****************************************************************************/
/*******************************************************************************/

.context {
  position: absolute;
  top: 4vw;
  left: 27vw;
  width: 60vw;
  height: auto;
  padding-bottom: 3vw;
  z-index: 5;
  overflow: hidden;
  padding-top: 4vw;
}

.context .ulcontext {
  display: flex;
  width: 100%;
  position: relative;
}

.context .ulcontext .licontext {
  position: relative;
  height: 100%;
  list-style: none;
  display: none;
}

.context .ulcontext .licontext.ul-list {
  display: block;
  transition: all 2s ease-in-out;
  animation: ulslide 1s ease-in-out;
}

@keyframes ulslide {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.context .ulcontext .licontext p {
  color: white;
  font-size: 5.2vw;
  width: 60vw;
  font-family: garamond;
  font-weight: 1000;
  letter-spacing: 0.05vw;
  line-height: 4.7vw;
}

.context .ulcontext .licontext .imgcart {
  position: relative;
  height: 11vw;
  width: 11vw;
  left: 15vw;
  top: -1vw;
}

.p-con {
  position: absolute;
  font-size: 1vw;
  font-weight: 600;
  background-color:  rgb(17, 110, 55)   ;
  width: 11vw;
  z-index: 6;
  top: 40vw;
  left: 43vw;
  color: rgb(255, 255, 255);
  margin: 1vw 1vw 1vw 0vw;
  box-shadow: rgba(55, 62, 58, 0.2) 0 -25px 18px -14px inset,
    rgba(174, 177, 174, 0.15) 0 1px 2px, rgba(179, 181, 180, 0.15) 0 2px 4px,
    rgba(228, 228, 228, 0.15) 0 4px 8px, rgba(255, 255, 255, 0.15) 0 8px 16px,
    rgba(255, 255, 255, 0.15) 0 16px 32px;
  cursor: pointer;
  font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif;
  padding: 0.7vw 0vw;
  text-align: center;
  transition: all 250ms;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.p-con:hover {
  box-shadow: rgba(55, 62, 58, 0.2) 0 -25px 18px -14px inset,
    rgba(174, 177, 174, 0.15) 0 1px 2px, rgba(179, 181, 180, 0.15) 0 2px 4px,
    rgba(228, 228, 228, 0.15) 0 4px 8px, rgba(255, 255, 255, 0.15) 0 8px 16px,
    rgba(255, 255, 255, 0.15) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}

.p-con:hover {
  color: rgb(79, 79, 79);
}

.log {
  position: absolute;
  height: 22vw;
  width: 27vw;
  top: 29.5vw;
  left: 72vw;
  z-index: 10;
  display: none;
}
/****************************************************************************/
/*******************************************************************************/
.divbtn {
  position: relative;
  top: -2.3vw;
  z-index: 700;
  left: 13vw;
  justify-content: space-between;
  font-family: garamond;
}

.btn {
  position: relative;
  margin: 1vw 1vw 1vw 0vw;
  background-color: #444444;
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 0.7vw 1.7vw;
  text-align: center;
  transition: all 0.5s ease-in-out;
  border-bottom: 3px solid  rgb(17, 110, 55);
  border-left: 3px solid  rgb(17, 110, 55);
  border-right: 3px solid  rgb(17, 110, 55);
  font-size: 0.8vw;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 10px;
  font-family: garamond;


              box-shadow: 0.1vw 0.1vw 0.10vw #93FFC5, -0.1vw -0.1vw 0.1vw #93FFC5;

}

.btn:hover {
  position: relative;
  background-color: #ffffff;
  color: rgb(4, 4, 4);
  border: 1px solid black;
  border-radius: 50px;
}

.slideBtnPrev {
  display: none;
}

.slideBtnNext {
  display: none;
}

/***************************************************/

.lien-sociaux {
  display: block;
  position: absolute;
  z-index: 600;
  top: 30vw;
  right: 0vw;
  /* border: 2px solid blue; */
}

.lien-sociaux ul {
  list-style: none;
  position: relative;
  left: -1.5vw;
}

.lien-sociaux ul li {
  margin-bottom: 0.8vw;
  position: relative;
  background-color: white;
  border-radius: 50%;
  height: max-content;
}
.lien-sociaux ul li a {
  position: relative;
}

.lien-sociaux ul li img {
  transition: all 0.5s ease-in-out;
  position: relative;
  top: 0.1vw;
  scale: 1.3;
}
.lien-sociaux ul li:hover img {
  scale: 1.7;
  border-radius: 50%;
}
/***************************************************/

/***************************************************/
.imgUP {
  position: fixed;
  right: 2vw;
  bottom: 8vh;
  height: 3vw;
  width: 3vw;
  z-index: 800;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  display: none;

  animation: imgUP 2s ease-in-out 0.1s infinite;
}

@keyframes imgUP {
  0% {
    bottom: 7.5vh;
    scale: 1.2;
  }

  50% {
    bottom: 8vh;
    scale: 1;
  }

  100% {
    bottom: 8.2vh;
    scale: 1.2;
  }
}

.imgUP:hover {
  /* box-shadow: 0.1vw 0.1vw 0.5vw black; */
}

/**********************************************************************************************/
/************************************************************************************************************************************/
/************************************************************************************************************************************/
/************************************************************************************************************************************/
/**********************************************************************************************/
/**********************************************************************************************/

.divmap {
  position: relative;
  top: -4.6vw;
  background-color: rgb(255, 255, 255);
  display: block;
  border-top: none;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.h-map {
  color: rgb(83, 82, 82);
  font-size: 2vw;
  font-weight: normal;
  padding: 2vw 4vw;
  line-height: 3vw;
  
}

.div-h-1 {
  position: relative;
  height: 70vw;
  width: 100%;
  font-weight: 300;
  color: rgb(0, 0, 0);
  z-index: 50;
  border: 2px solid black;
}

.h-map {
  position: absolute;
  top: 8vw;
  left: 2vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 4.5vw;
  width: 55vw;
  line-height: 4.5vw;
  font-weight: 700;
  word-spacing: 0vw;
  text-align: left;
}

.ul-map {
  position: absolute;
  top: 22vw;
  left: 9vw;
  list-style: none;
  overflow: hidden;
}

.ul-map li {
  font-size: 1.4vw;
  width: 50vw;
  line-height: 1.8vw;
  display: none;
}

.ul-map li.li-list {
  display: block;
  transition: all 2s ease-in-out;
  animation: lislide 1s ease-in-out;
}

@keyframes lislide {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.img-ul-map {
  width: 1.3vw;
  height: 1.3vw;
}

.div-p {
  position: absolute;
  top: 6vw;
  left: 60vw;
  height: 45vw;
  width: 37vw;
  border: 1px solid rgb(144, 144, 144);
  box-shadow: 0.1vw 0.1vw 0.4vw;
  transition: all 1s ease-in-out;

  animation: appearMap-divP ease-in-out;
  animation-timeline: view();
  animation-range: entry 0%;
}


@keyframes appearMap-divP {
  from {
    opacity: 0;
    left: 150vw;
  }

  to {
    opacity: 1;
    left: 60vw;
  }
}

.div-p:hover {
  background-color: #373737;
  color: rgb(238, 238, 238);
  border-radius: 50px;
  transform: scale(1) rotate(2deg);
}


.div-p:hover .p-map{
  color: white;
}

.p-map {
  padding: 3vw 2vw;
  font-size: 1.3vw;
  line-height: 2.3vw;
  word-spacing: 0.4vw;
  letter-spacing: 0.04vw;
  color: rgb(84, 84, 84);
  transition: all 0.9s ease-in-out;
}

.h2-services {
  position: absolute;
  top: 29vw;
  left: 9vw;
  font-size: 1.7vw;
  color: rgb(108, 108, 108);
}

.map-type {
  position: relative;
  top: 35vw;
  left: 2.5vw;
  width: 55vw;
  height: 13vw;
}

.ul-map-type {
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;

  animation: appearMap linear;
  animation-timeline: view();
  animation-range: entry 0%;
}

@keyframes appearMap {
  from {
    opacity: 0;
    scale: 0.5;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    scale: 1;
    transform: translateX(0);
  }
}

.ul-map-type li {
  position: relative;
  /* border: 2px solid #93FFC5; */
  width: 32%;
  padding: 0vw 0.5vw;
                box-shadow: 0.1vw 0.1vw 0.3vw rgb(187, 185, 185), -0.1vw -0.1vw 0.3vw rgb(185, 182, 182);

}

.ul-map-type li:nth-child(2) {
  margin-left: 1vw;
}

.ul-map-type li:nth-child(3) {
  margin-left: 1vw;
}

.ul-map-type li:hover {
  position: relative;
  border: 2px solid rgb(46, 44, 44);
  padding: 0vw 0.5vw;
  transition: all 0.3s ease-in-out;
  border-radius: 20px;
}

.ul-map-type li img {
  position: absolute;
  height: 5vw;
  width: 5vw;
  top: 0.5vw;
  left: 11.5vw;
}

.ul-map-type li p {
  position: relative;
  font-size: 1.7vw;
  padding: 1vw 1vw;
  width: 60%;
}

.ul-map-type li span {
  font-size: 0.9vw;
  position: relative;
  top: 2vw;
  color: #535353;
}

.map-type2 {
  position: relative;
  top: 39vw;
  left: 2.5vw;
  width: 55vw;
  height: 13vw;
}

.ul-map-type2 {
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;

  animation: appearMap linear;
  animation-timeline: view();
  animation-range: entry 0%;
}

.ul-map-type2 li {
  position: relative;
  /* border: 2px solid #93FFC5; */
  width: 32%;
  padding: 0vw 0.5vw;
              box-shadow: 0.1vw 0.1vw 0.3vw rgb(187, 185, 185), -0.1vw -0.1vw 0.3vw rgb(185, 182, 182);

}


.ul-map-type2 li:nth-child(2) {
  margin-left: 1vw;
}

.ul-map-type2 li:nth-child(3) {
  margin-left: 1vw;
}

.ul-map-type2 li:hover {
  position: relative;
  border: 2px solid rgb(46, 44, 44);
  padding: 0vw 0.5vw;
  transition: all 0.3s ease-in-out;
  border-radius: 20px;
}

.ul-map-type2 li img {
  position: absolute;
  height: 5vw;
  width: 5vw;
  top: 0.5vw;
  left: 11vw;
}

.ul-map-type2 li p {
  position: relative;
  width: 60%;
  font-size: 1.7vw;
  padding: 1vw 1vw;
}

.ul-map-type2 li span {
  font-size: 0.9vw;
  position: relative;
  top: 1vw;
  color: #535353;
}

/**************/

/**************/

.slide-map {
  position: relative;
  background-color: #ffffffb3;
  height: 160vw;
  z-index: 2;
}

.p-apercu {
  position: relative;
  top: 0vw;
  text-align: center;
  font-size: 3vw;
  font-weight: 700;
  color: #2a2a2a;
  /* background-color: #373737; */
  padding: 3vw 1vw;


   /* background: linear-gradient( 180deg, #373737 90%,rgb(255, 255, 255)
    ); */
}

.p-apercu:hover {
  color: #aaaaaa;
  transition: all 0.5vw ease-in;
}

.lesBtn {
  position: relative;
  top: 5vw;
  text-align: center;
  z-index: 600;
}

.lesBtn button {
  margin-right: 1vw;
  padding: 0.7vw 0.7vw;
  width: 6vw;
  border: none;
  box-shadow: 0.1vw 0.1vw 0.5vw rgb(0, 0, 0);
  transition: all 0.5s ease-in-out;
  background-color: #5f6162da;
  border: 1px solid white;
  color: white;
  font-weight: 600;
}

.lesBtn button:hover {
  background-color: #93ffc5;
  scale: 1.1;
  border-radius: 50px;
  border: 4px solid white;
  padding: 0.4vw 0.4vw;
  color: #000000;
}

#dotMap {
  position: relative;
  top: 7vw;
  text-align: center;
  left: -0.46vw;
  height: 2vw;
  width: 100%;
}

#choose img {
  height: 1.2vw;
  width: 1.2vw;
  position: relative;
  border-radius: 50%;
  border: 0.23vw solid white;
  transition: all 0.5s ease-in-out;
}

#choose img:hover {
  border: 0.23vw solid rgba(238, 68, 68, 0.979);
  scale: 1.4;
}

.aMap {
  position: relative;
  text-decoration: none;
  color: rgb(22, 22, 22);
  font-size: 1vw;
  left: 15vw;
  top: 9vw;
  padding: 0.2vw;
  /* border: 2px solid green; */
  transition: all 0.5s ease-in-out;
}

.spmap {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  left: 15vw;
  top: 9vw;
  background-color: #93ffc5;
  color: rgb(47, 47, 47);
  cursor: pointer;
  padding: 0.7vw 1vw;
  text-align: center;
  transition: all 0.4s ease-in-out;


  animation: imgchoose 2s ease-in-out 0.1s infinite;
}



@keyframes imgchoose {
  0% {
    bottom: 7.5vh;
    scale: 1.2;
  }

  50% {
    bottom: 8vh;
    scale: 1;
  }

  100% {
    bottom: 8.2vh;
    scale: 1.2;
  }
}

.spmap:hover {
  transform: scale(1.05) rotate(-1deg);
}

.aThema {
  position: relative;
  text-decoration: none;
  color: rgb(22, 22, 22);
  font-size: 1vw;
  left: 10vw;
  top: 53vw;
  padding: 0.2vw;
  /* border: 2px solid green; */
  transition: all 0.5s ease-in-out;
}

.spThema {
   position: relative;
  text-decoration: none;
  font-weight: 600;
  left: 10vw;
  top: 53vw;
  background-color: #93ffc5;
  color: rgb(47, 47, 47);
  cursor: pointer;
  padding: 0.7vw 1vw;
  text-align: center;
  transition: all 0.4s ease-in-out;


  animation: imgchoose 2s ease-in-out 0.1s infinite;
}

.spThema:hover {
 scale: 1.1;
 color: #93ffc5d1;
}

#container {
  display: flex;
  position: relative;
  left: 0vw;
  top: 10vw;
  width: 100%;
  height: 98vw;
  overflow: hidden;
}


#container .imgMap p {
  color: white;
  position: absolute;
  top: 4vw;
  left: 1vw;
}

.imgmap1 {
  height: 96vw;
  width: 72vw;
  position: relative;
  left: 20%;
}

.imgmap2 {
  height: 65vw;
  width: 92vw;
  position: relative;
  left: 4%;
}

.imgmap3 {
  height: 70vw;
  width: 90vw;
  position: relative;
  left: 5%;
}

.imgmap4 {
  height: 70vw;
  width: 90vw;
  position: relative;
  left: 5%;
  /* border: 6px solid white; */
}

.imgmap5 {
  height: 70vw;
  width: 90vw;
  position: relative;
  left: 5%;
  /* border: 6px solid white; */
}

.imgmap6 {
  height: 70vw;
  width: 90vw;
  position: relative;
  left: 5%;
  /* border: 6px solid white; */
}

.imgmap7 {
  height: 70vw;
  width: 90vw;
  position: relative;
  left: 5%;
  /* border: 6px solid white; */
}

/************************************************************************************/
/************************************************************************************/

/****************************************************************************/
/*******************************************************************************/

.divtopo {
  display: none;
  position: relative;
  margin-bottom: 25vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


  
}

.div-h-2 {
  position: relative;
  top: 2vw;
  width: 80%;
  height: 40vw;
  left: 6vw;
  /* border: 0.3px solid rgb(3, 135, 216); */
  padding: 4vw 4vw 10.2vw 4vw;
  border-radius: 50px;
  border-top: none;


              box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

}

.div-h-2 a {
  text-decoration: none;
  position: relative;
  top: 4vw;
  left: 50vw;
  transition: all 0.5s ease-in-out;
  font-weight: 600;
}

.div-h-2 a:hover {
  background-color: black;
  color: white;
  width: 6vw;
  padding: 1vw;
}

.h-2 {
  position: relative;
  font-size: 3.3vw;
  width: 55vw;
  line-height: 3.2vw;
  font-weight: 700;
  word-spacing: 0.7vw;
  padding-bottom: 1vw;
  color: #4b4b4b;
}

.p-topo,
.p-topo2 {
  font-size: 1.2vw;
  width: 80%;
  position: relative;
  left: 0vw;
}

.sp-topo {
  color: #029044;
}

.div-h-2 h3 {
  font-size: 1.3vw;
  font-weight: 400;
  padding-top: 3vw;
  color: #4b4b4b;
  position: relative;
  top: 2.5vw;
  margin-bottom: 3vw;
}

.div-h-2 ul {
  padding: 1vw 1vw;
  display: flex;
  margin-bottom: 3vw;
}

.div-h-2 ul li {
  position: relative;
  width: 30%;
  height: auto;
  margin-left: 3%;
  padding: 1vw 1vw 1vw 1vw;
  list-style: none;
  border: 1px solid rgb(209, 209, 209);
  border-radius: 1px;
  box-shadow: 0.1vw 0.1vw 0.3vw;
}

.div-h-2 ul li:first-child {
  margin-left: 0%;
}

.img-li-topo {
  height: 4vw;
  width: 4vw;
}

.img-li-topo2 {
  height: 0.8vw;
  width: 0.8vw;
}

.div-h-2 ul li p {
  position: absolute;
  width: 10vw;
  top: 2vw;
  left: 7vw;
  font-size: 0.8vw;
}

.div-btn {
  position: relative;
  width: 70%;
  top: 57vw;
  left: 14.5vw;
  display: flex;
  justify-content: center;
  z-index: 3;
}

.div-btn button {
  margin-right: 1vw;
  padding: 0.7vw 0.7vw;
  width: 6vw;
  border: none;
  box-shadow: 0.1vw 0.1vw 0.5vw rgb(0, 0, 0);
  transition: all 0.5s ease-in-out;
  background-color: #5f6162da;
  border: 1px solid white;
  color: white;
  font-weight: 600;
}

.div-btn button:hover {
  background-color: #93ffc5;
  scale: 1.1;
  border-radius: 50px;
  border: 4px solid white;
  padding: 0.4vw 0.4vw;
  color: #000000;
}

#dotTopo {
  position: relative;
  top: 60vw;
  text-align: center;
  left: -0.9vw;
  height: 2vw;
  width: 100%;
  z-index: 800;
}

#select img {
  height: 1.2vw;
  width: 1.2vw;
  position: relative;
  border-radius: 50%;
  border: 0.23vw solid white;
  transition: all 0.5s ease-in-out;
}

#select img:hover {
  border: 0.23vw solid rgba(238, 68, 68, 0.979);
  scale: 1.4;
}

#container2 {
  position: relative;
  left: 0vw;
  top: 55vw;
  width: 99.5%;
  height: 120vw;
  overflow: hidden;
  background-color: white;
  padding-top: 4vw;
}

#container2 .imgTopo {
  height: 99.5%;
  width: 99.5%;
  padding-bottom: 4vw;
}

#container2 .imgTopo p {
  color: rgb(0, 0, 0);
  position: absolute;
  top: 4vw;
  right: 10vw;
}

.imgtopo1 {
  height: 85vw;
  width: 60vw;
  position: relative;
  left: 20%;
}

.imgtopo2 {
  height: 96vw;
  width: 72vw;
  position: relative;
  left: 16%;
}

.imgtopo3 {
  height: 65vw;
  width: 90vw;
  position: relative;
  left: 4%;
}

.imgtopo4 {
  height: 65vw;
  width: 90vw;
  position: relative;
  left: 4%;
  border: 6px solid white;
}

.imgtopo5 {
  height: 77vw;
  width: 55vw;
  position: relative;
  left: 1%;
  border: 6px solid white;
}

.imgtopo6 {
  height: 50vw;
  width: 70vw;
  position: relative;
  left: 1%;
  border: 6px solid white;
}

.imgtopo7 {
  height: 77vw;
  width: 60vw;
  position: relative;
  left: 1%;
  border: 6px solid white;
}

.imgT {
  height: 20vw;
  width: 20vw;
  position: absolute;
  right: 20vw;
  top: 5vw;
  z-index: 300;
  box-shadow: 0.1vw 0.1vw 0.5vw rgb(57, 57, 57);
}

.imgT2 {
  height: 33vw;
  width: 25vw;
  position: absolute;
  right: 0vw;
  top: 15vw;
  z-index: 330;
  box-shadow: 0.1vw 0.1vw 0.5vw rgb(57, 57, 57);
}

.imgT3 {
  height: 20vw;
  width: 20vw;
  position: absolute;
  right: 15vw;
  top: 40vw;
  z-index: 340;
  box-shadow: 0.1vw 0.1vw 0.5vw rgb(57, 57, 57);
}

.div-ul-right {
  position: relative;
  top: 7vw;
  left: 3.2%;
  width: 92.5%;
  height: 50vw;
  /* border: 2px solid rebeccapurple; */
  margin-bottom: 80vw;
}

.div-ul-right h2 {
  position: relative;
  width: 50%;
  left: 4vw;
  border-bottom: 2px solid #029044;
  color: #029044;
  padding-bottom: 1vw;
  font-size: 2.1vw;
}

.div-ul-right ul {
  /* list-style: url(../PIC/circlemini.png); */
  list-style: none;
  position: relative;
  top: 4vw;
  left: 6vw;
}

.div-ul-right ul li {
  position: relative;
  /* background-color: white; */
  padding-top: 2vw;
  padding-left: 3vw;
  padding-bottom: 2vw;
  margin-bottom: 1vw;
  height: 8vw;
  width: 25%;
  left: 4vw;
  transition: all 0.5s ease-in-out;
  /* border: 1px solid black; */
  border-bottom: 1px solid black;
}



.div-ul-right ul li h3 {
  color: #646161;
  font-size: 1.6vw;
}



.div-ul-right ul li p {
  position: relative;
  top: 2vw;
  left: 0vw;
  text-align: center;
  width: 80%;
}

#liTop{
  height: 10vw;
}



.liTop p {
  position: relative;
  width: 10vw;
  margin-right: 2vw;
  padding: 0.5vw 0.5vw;
  text-align: center;
  color: rgb(69, 69, 69);
  border-radius: 20px;
  margin-bottom: 0.3vw;
              box-shadow: 0.1vw 0.1vw 0.1vw rgb(187, 185, 185), -0.1vw -0.1vw 0.1vw rgb(185, 182, 182);

  transition: all 0.5s ease-in-out;
}

.liTop p:hover {
  background-color: white;
  color: #3a3a3a;
}

/***********************************************/
/************************************/
.div-pic-right {
  position: relative;
  top: 13vw;
  height: 50vw;
  width: 85vw;
  overflow: hidden;
  margin-bottom: 27vw;
}

.right-pic {
  width: 100%;
  height: 100%;
}

/********************************************/
/****************************/
/* .div-topo-green{
    width: 100%;
    height: 50vw;
    background-color: aqua;
} */

/************************************************************************************/
/************************************************************************************/

.divana {
  position: relative;
  background-color: rgb(255, 255, 255);
  display: none;
  padding-bottom: 50vw;
  top: -5vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.h-ana {
  position: relative;
  font-size: 3.7vw;
  top: 9vw;
  left: 15vw;
  width: 45vw;
  line-height: 3vw;
  letter-spacing: 0.07vw;
  font-weight: 700;
  word-spacing: 0.5vw;
  border-radius: 10px;
  z-index: 400;
  color: rgb(72, 72, 72);
}


.pAna{
  position: relative;
  width: 40%;
  top: 10vw;
  left: 15vw;
}

.imgUp {
  position: absolute;
  height: 40vw;
  width: 45vw;
  top: 0vw;
  left: 54vw;
  z-index: 500;
}

.img-down {
  position: absolute;
  top: 30vw;
  left: 40%;
  height: 4vw;
  width: 5vw;
  border: 1px solid black;
  border-radius: 50%;
  padding: 0.3vw 0.3vw;
  z-index: 300;
  box-shadow: 0.1vw 0.1vw 0.1vw rgb(90, 89, 89);

  transition: all 1s ease-in-out;
  /* animation: imgDown 0.7s ease 0.1s infinite; */
}


.sp-ana {
  color: #029044;
}

.slideBtnAnaPrev {
  display: none;
}

.slideBtnAnaNext {
  display: none;
}

.ul-ana {
  position: relative;
  top: 23vw;
  list-style: none;
  display: flex;
  justify-content: center;
  height: 32vw;
  /* border: 2px solid black; */
  background-color: rgb(255, 255, 255);
}

.ul-ana li {
  position: relative;
  top: 27%;
  margin-right: 2vw;
  height: 15vw;
  width: 20%;
  /* background-color: #002c3e; */
  background-color: transparent;
  box-shadow: 0.1vw 0.1vw 0.3vw;
}



.ul-ana li p {
  color: rgb(34, 33, 33);
  position: relative;
  top: 2.5vw;
  left: 2.5vw;
  text-align: center;
  font-weight: 700;
  line-height: 1.4vw;
  word-spacing: 0.1vw;
  letter-spacing: 0.1vw;
  width: 15vw;
}

.ul-ana li img {
  position: relative;
  height: 7vw;
  width: 7vw;
  top: 1.5vw;
  left: 6vw;
}

.h3-ana {
  position: absolute;
  z-index: 300;
  left: 9vw;
  top: 75vw;
  font-weight: 200;
  font-size: 1.4vw;
  color: rgb(255, 255, 255);
  background-color: black;
  padding: 1vw 0.5vw;
}

.div-bull-ana {
  position: relative;
  top: 30vw;
  width: 97vw;
  left: 1vw;
  overflow: hidden;
}

.p-ana {
  position: relative;
  top: -2vw;
  left: 4vw;
  width: 25vw;
  font-weight: 400;
}

.div-bull-ana ul {
  display: flex;
  list-style: none;
  margin-bottom: 27vw;
}

.div-bull-ana ul li {
  margin: 8vw 0vw 4vw 2vw;
}

.textpic-1 {
  position: relative;
  border: 1px solid #0b9ae6;
  width: 30vw;
  height: 33vw;
}

.pic-ana-1 {
  height: 25vw;
  width: 30vw;
  position: relative;
  left: -1.2vw;
  top: -4vw;
  box-shadow: 0.1vw 0.1vw 0.3vw;
  transition: all 0.5s ease-in-out;
}

.pic-ana-1:hover {
  transform: scale(1.05) rotate(2deg);
}

.textpic-2 {
  position: relative;
  border: 1px solid #0b9ae6;
  width: 30vw;
  height: 33vw;
}

.pic-ana-2 {
  height: 25vw;
  width: 30vw;
  position: relative;
  left: -1.2vw;
  top: -4vw;
  box-shadow: 0.1vw 0.1vw 0.3vw;
  transition: all 0.5s ease-in-out;
}

.pic-ana-2:hover {
  transform: scale(1.05) rotate(2deg);
}

.textpic-3 {
  position: relative;
  border: 1px solid #0b9ae6;
  width: 30vw;
  height: 33vw;
}

.textpic-4 {
  position: relative;
  border: 1px solid black;
  width: 30vw;
  height: 33vw;
}

/************************************************************************************/
/************************************************************************************/

/************************************************************************************/
/************************************************************************************/

.divthema {
  position: relative;
  background-color: rgb(255, 255, 255);
  display: none;
  top: -4.9vw;
  height: 60vw;
  margin-bottom: 210vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.divTextThema {
  position: relative;
  left: 53%;
  top: 10vw;
  width: 46%;
  height: 40vw;
}

.h-thema {
  /* font-family: "Poppins", sans-serif; */
  position: relative;
  font-size: 2.5vw;
  width: 100%;
  line-height: 3vw;
  font-weight: 700;
  word-spacing: 0vw;
  z-index: 400;
  color: rgb(76, 76, 76);
  margin-bottom: 2vw;
}

#btnTextThema {
  margin: 1vw 1vw 1vw 0vw;
  padding: 0.7vw 1.7vw;
  position: relative;
  background-color: #ffffff;
  color: rgb(4, 4, 4);
  border: 2px solid black;
  border-radius: 50px;
  text-align: center;
  font-size: 0.8vw;
  transition: all 0.5s ease-in-out;
}

#btnTextThema:hover {
  position: relative;
  margin: 1vw 1vw 1vw 0vw;
  background-color: #444444;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif;
  padding: 0.7vw 1.7vw;
  text-align: center;
  border-bottom: 3px solid #93ffc5;
  border-left: 3px solid #93ffc5;
  border-right: 3px solid #93ffc5;
  font-size: 0.8vw;
  border-radius: 10px;
}

#pthema {
  font-size: 1.3vw;
  line-height: 1.5vw;
  word-spacing: 0.1vw;
  letter-spacing: 0.1vw;
  display: none;
}

.picthema {
  position: absolute;
  top: 4vw;
  left: 1vw;
  width: 50%;
  height: 45vw;
  overflow: hidden;
  border-top-left-radius: 30%;
  border-bottom-right-radius: 30%;
}

.picthemaslide {
  width: 100%;
  display: flex;
  position: relative;
}

.flopthema {
  height: 45vw;
  width: 100%;
  position: relative;
  filter: brightness(25%);
  animation: slidethema 50s ease-in-out 5s infinite;
}

@keyframes slidethema {
  0% {
    left: 0;
  }

  5% {
    left: 0;
  }

  10% {
    left: -100%;
  }

  15% {
    left: -100%;
  }

  20% {
    left: -200%;
  }

  25% {
    left: -200%;
  }

  30% {
    left: -300%;
  }

  35% {
    left: -300%;
  }

  40% {
    left: -400%;
  }

  45% {
    left: -400%;
  }

  50% {
    left: -500%;
  }

  55% {
    left: -500%;
  }

  60% {
    left: -400%;
  }

  65% {
    left: -400%;
  }

  70% {
    left: -300%;
  }

  75% {
    left: -300%;
  }

  80% {
    left: -200%;
  }

  85% {
    left: -200%;
  }

  90% {
    left: -100%;
  }

  95% {
    left: -100%;
  }

  100% {
    left: -0%;
  }
}

.h2-thema {
  position: relative;
  top: 18vw;
  left: 5vw;
  font-weight: 200;
  z-index: 400;
  color: rgb(45, 42, 42);
  font-size: 1.8vw;
  background-color: #93ffc5;
  padding: 1vw 0.5vw;
  width: 15vw;
}

.ul-thema-2 {
  position: relative;
  width: 88%;
  top: 30vw;
  left: 9vw;
  z-index: 400;
  display: flex;
  list-style: none;
}

.li-2 {
  position: relative;
  margin-right: 2vw;
  width: 33%;
  height: 11vw;
}

.pic-2 {
  position: relative;
  top: 2vw;
  height: 5vw;
  width: 5vw;
}

.p-pic-2 {
  position: relative;
  top: -5vw;
  left: 6vw;
  width: 15vw;
  font-size: 1.3vw;
  font-weight: 700;
  color: #029044;
  padding: 0.5vw 0.5vw;
  letter-spacing: 0.1vw;
}

.ul-thema-2 li h5 {
  position: absolute;
  top: 6vw;
  left: 6.5vw;
  width: 20vw;
  font-weight: 600;
  color: #717171;
  line-height: 1vw;
  letter-spacing: 0.04vw;
}

.ul-thema-3 {
  position: relative;
  width: 60%;
  top: 38vw;
  left: 9vw;
  z-index: 400;
  display: flex;
  list-style: none;
}

.li-3 {
  position: relative;
  margin-right: 9vw;
  width: 33%;
  height: 13vw;
}

.pic-3 {
  position: relative;
  top: 2vw;
  height: 5vw;
  width: 5vw;
}

.p-pic-3 {
  position: relative;
  top: -5vw;
  left: 6vw;
  width: 23vw;
  font-size: 1.3vw;
  font-weight: 700;
  color: #029044;
  padding: 0.5vw 0.5vw;
  letter-spacing: 0.1vw;
}

.ul-thema-3 li h5 {
  position: absolute;
  top: 6vw;
  left: 6.5vw;
  width: 20vw;
  font-weight: 600;
  color: #717171;
  line-height: 1vw;
  letter-spacing: 0.04vw;
}

/************************************************************************************/
/************************************************************************************/

.divsig {
  position: relative;
  background-color: rgb(255, 255, 255);
  display: none;
  top: -4.7vw;
  margin-bottom: 18vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.h-sig {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: absolute;
  font-size: 3vw;
  top: 8vw;
  left: 30vw;
  width: 50vw;
  padding-right: 11vw;
  line-height: 3vw;
  font-weight: 900;
  word-spacing: 0.3vw;
  border-radius: 10px;
  letter-spacing: 0.05vw;
  z-index: 400;
  color: rgb(73, 72, 72);
}

.div-h-sig {
  font-weight: 300;
}

.p-sig {
  position: absolute;
  top: 21vw;
  color: rgb(50, 49, 49);
  font-weight: 300;
  left: 30vw;
  width: 60vw;
  z-index: 400;
  line-height: 1.7vw;
  word-spacing: 0.3vw;
  letter-spacing: 0.07vw;
  font-size: 1.3vw;
}

.spSig {
  color: #068a1c;
  position: relative;
  font-weight: 700;
}

.flat {
  height: 36vw;
  width: 30vw;
  position: absolute;
  top: 14vw;
  left: -2vw;
  z-index: 500;
}

.splash {
  position: absolute;
  height: 35vw;
  width: 85vw;
  top: 2vw;
  left: 10vw;
}

.blur-sig {
  position: relative;
  height: 55vw;
  width: 100%;
  top: 0vw;
  z-index: 300;

 
}

.blur2-sig {
  position: absolute;
  height: 86vw;
  width: 100%;
  top: 50vw;
  z-index: 300;

  background-image: url(../PIC/aigene.jpg);
  background-size: cover;
  filter: brightness(15%);
}

.p-ul-sig {
  z-index: 400;
  position: relative;
  top: 0vw;
  width: max-content;
  left: 4vw;
  font-weight: 700;
  color: rgb(255, 255, 255);
  font-size: 2vw;
  border-bottom: 1px solid white;
  padding-bottom: 0.3vw;
}

.ul-sig {
  position: relative;
  top: -4vw;
  left: 0;
  padding-top: 8vw;
  height: 52vw;
  z-index: 400;
  display: flex;
  width: 300%;

  transition: all 2s ease-in-out;
  animation: slidesig 50s ease-in-out 5s infinite;
}

@keyframes slidesig {
  0% {
    left: 0;
  }

  10% {
    left: 0;
  }

  20% {
    left: -100%;
  }

  30% {
    left: -100%;
  }

  40% {
    left: -100%;
  }

  50% {
    left: -200%;
  }

  60% {
    left: -200%;
  }

  70% {
    left: -200%;
  }

  80% {
    left: -100%;
  }

  90% {
    left: -100%;
  }

  100% {
    left: 0%;
  }
}

.ul-sig li {
  position: relative;
  color: #ffffff;
  font-size: 1.4vw;
  line-height: 3vw;
  list-style: none;
  height: 20vw;
  width: 100%;
}

.ul-sig li img {
  position: relative;
  height: 18vw;
  width: 18vw;
  left: 8vw;
  top: 23%;
}

.ul-sig li p {
  line-height: 2vw;
  position: relative;
  top: -9vw;
  left: 6vw;
  font-size: 1.7vw;
  text-align: center;
  font-weight: 700;
  padding-bottom: 1vw;
}

.ul-sig li h5 {
  line-height: 2vw;
  position: relative;
  top: -9vw;
  width: 50%;
  text-align: center;
  left: 30vw;
  font-weight: 200;
}

.ul-sig li a {
  position: relative;
  text-decoration: none;
  color: #93FFC5;
  left: 48%;
  top: -7vw;
  font-weight: 700;
  letter-spacing: 0.07vw;
  padding: 0.3vw 0.7vw;
}

.ul-sig li a:hover {
  background-color: #93ffc5;
  transition: all 0.8s ease-in-out;
  color: rgb(0, 0, 0);
  padding: 0.3vw 0.7vw;
}

/************************************************************************************/
/************************************************************************************/

.divtele {
  position: relative;
  background-color: rgb(255, 255, 255);
  display: none;
  top: -8vw;
  margin-bottom: 40vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.h-tele {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  font-size: 1.9vw;
  top: 6vw;
  left: 20vw;
  padding-top: 6vw;
  width: 50vw;
  line-height: 2.3vw;
  font-weight: 900;
  word-spacing: 0.5vw;
  z-index: 400;
  color: rgb(65, 63, 63);
}

.div-h-tele {
  font-weight: 300;
  color: rgb(0, 0, 0);
}

.img-tele {
  position: relative;
  height: 45vw;
  width: 100%;
  z-index: 100;
  background-color: #2e2e2e;
}

.p-tele {
  position: relative;
  top: 20vw;
  color: #dfdfdf;
  left: 10vw;
  z-index: 400;
  right: 30vw;
}

.blur-tele2 {
  position: absolute;
  height: 48vw;
  width: 100%;
  top: 32vw;
  z-index: 300;
  background-image: url(../PIC/leaf.jpg);
  background-size: 80%;
  filter: brightness(10%);


}

.p-ul-tele {
  z-index: 400;
  position: relative;
  top: 12.5vw;
  font-weight: 700;
  color: rgb(255, 255, 255);
  background-color: #000000;
  width: max-content;
  padding: 1vw 1vw;
  font-size: 1.8vw;
  left: 8vw;
}

.ul-tele {
  position: relative;
  width: 100%;
  top: 15vw;
  left: 1vw;
  z-index: 400;
  display: flex;
  list-style: none;
}

.ul-tele li {
  position: relative;
  margin-right: 2vw;
  width: 43%;
  height: 17vw;
  border: 0.5px solid rgb(166, 164, 164);
  transition: all 0.5s ease-in-out;
}

.ul-tele li:hover {
  background-color: white;
  border-radius: 20px;
}

.ul-tele li:hover P {
  color: black;
}

.ul-tele li:hover h5 {
  color: black;
  font-weight: 400;
}

.ul-tele li img {
  position: relative;
  top: 2vw;
  height: 5vw;
  width: 5vw;
}

.ul-tele li p {
  position: relative;
  top: -5vw;
  left: 6vw;
  width: 15vw;
  font-size: 1.1vw;
  font-weight: 700;
  color: #ffffff;
  padding: 0.5vw 0.5vw;
  letter-spacing: 0.1vw;
}

.ul-tele li h5 {
  line-height: 1.1vw;
  position: relative;
  top: -4vw;
  left: 6.5vw;
  width: 15vw;
  font-weight: 200;
  color: white;
  letter-spacing: 0.1vw;
}

.ul-tele2 {
  position: relative;
  width: 88%;
  top: 20vw;
  left: 1vw;
  z-index: 400;
  display: flex;
  list-style: none;
}

.ul-tele2 li {
  position: relative;
  margin-right: 2vw;
  width: 26%;
  height: 17vw;
  top: -2vw;
  border: 0.5px solid rgb(166, 164, 164);
  transition: all 0.5s ease-in-out;
}

.ul-tele2 li:hover {
  background-color: white;
  border-radius: 20px;
}

.ul-tele2 li:hover P {
  color: black;
}

.ul-tele2 li:hover h5 {
  color: black;
  font-weight: 400;
}

.ul-tele2 li img {
  position: relative;
  top: 2vw;
  height: 5vw;
  width: 5vw;
}

.ul-tele2 li p {
  position: relative;
  top: -5vw;
  left: 6vw;
  width: 15vw;
  font-size: 1.1vw;
  font-weight: 700;
  color: #ffffff;
  padding: 0.5vw 0.5vw;
  letter-spacing: 0.1vw;
}

.ul-tele2 li h5 {
  line-height: 1.1vw;
  position: relative;
  top: -4vw;
  left: 6.5vw;
  width: 15vw;
  font-weight: 200;
  color: white;
  letter-spacing: 0.1vw;
}

.btnTele {
  position: relative;
  width: 70%;
  top: 38vw;
  left: 14.5vw;
  display: flex;
  justify-content: center;
  z-index: 400;
}

.btnTele button {
  margin-right: 1vw;
  padding: 0.7vw 0.7vw;
  width: 6vw;
  border: none;
  box-shadow: 0.1vw 0.1vw 0.5vw rgb(0, 0, 0);
  transition: all 0.5s ease-in-out;
  background-color: #5f6162da;
  border: 1px solid white;
  color: white;
  font-weight: 600;
}

.btnTele button:hover {
  background-color: #93ffc5;
  scale: 1.1;
  border-radius: 50px;
  border: 4px solid white;
  padding: 0.4vw 0.4vw;
  color: #000000;
}

#dotTele {
  position: relative;
  top: 39vw;
  text-align: center;
  left: -0.9vw;
  height: 2vw;
  width: 100%;
  z-index: 4000;
}

#tick img {
  height: 1.2vw;
  width: 1.2vw;
  position: relative;
  border-radius: 50%;
  border: 0.23vw solid white;
  transition: all 0.5s ease-in-out;
}

#tick img:hover {
  border: 0.23vw solid rgba(238, 68, 68, 0.979);
  scale: 1.4;
}

.aTele {
 position: relative;
  text-decoration: none;
  color: rgb(22, 22, 22);
  font-size: 1vw;
  left: 1vw;
  top: 42vw;
  z-index: 500;
  padding: 0.2vw;
  /* border: 2px solid green; */
  transition: all 0.5s ease-in-out;
}

.spTele {
    position: relative;
  text-decoration: none;
  font-weight: 600;
  left: 1vw;
  top: 42vw;
  z-index: 500;
  background-color: #93ffc5;
  color: rgb(47, 47, 47);
  cursor: pointer;
  padding: 0.7vw 1vw;
  text-align: center;
  transition: all 0.4s ease-in-out;


  animation: imgchoose 2s ease-in-out 0.1s infinite;
}

.spTele:hover {
  background-color: rgba(0, 0, 0, 0.741);
  padding: 0.7vw 1.3vw;
  color: white;
  border-radius: 50px;
  box-shadow: 0.1vw 0.1vw 0.5vw white;
  font-weight: 600;
}

#container3 {
  position: relative;
  left: 0vw;
  top: 40vw;
  width: 99.5%;
  height: 135vw;
  overflow: hidden;
  background-color: white;
  padding-top: 4vw;
}

#container3 .imgTopo {
  height: 99.5%;
  width: 99.5%;
  padding-bottom: 4vw;
}

#container3 .imgTele p {
  position: absolute;
  top: 4vw;
  right: 2vw;
  width: 18vw;
  padding: 2vw 1vw;
  background-color: #848484;
  color: white;
  line-height: 1.6vw;
  letter-spacing: 0.05vw;
  border-radius: 30px;
  transition: all 0.5s ease-in-out;
}

#container3 .imgTele p:hover {
  background-color: #373636;
  color: white;
  scale: 1.1;
  top: 6vw;
}

.imgtele1 {
  height: 45vw;
  width: 35vw;
  position: relative;
  left: 1%;
}

.imgtele11 {
  height: 45vw;
  width: 35vw;
  position: relative;
  left: 4%;
  top: ;
}

.imgtele111 {
  height: 45vw;
  width: 35vw;
  position: absolute;
  left: 1%;
  top: 55vw;
}

.imgtele2 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 1%;
}

.imgtele22 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 4%;
  top: ;
}

.imgtele222 {
  height: 35vw;
  width: 35vw;
  position: absolute;
  left: 1%;
  top: 45vw;
}

.imgtele3 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 1%;
}

.imgtele33 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 8%;
  top: ;
}

.imgtele333 {
  height: 35vw;
  width: 35vw;
  position: absolute;
  left: 1%;
  top: 45vw;
}

.imgtele4 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 1%;
}

.imgtele44 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 8%;
  top: ;
}

.imgtele444 {
  height: 35vw;
  width: 35vw;
  position: absolute;
  left: 1%;
  top: 45vw;
}

.imgtele5 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 1%;
}

.imgtele55 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 8%;
  top: ;
}

.imgtele555 {
  height: 35vw;
  width: 35vw;
  position: absolute;
  left: 1%;
  top: 45vw;
}

.imgtele6 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 1%;
}

.imgtele66 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 8%;
  top: ;
}

.imgtele666 {
  height: 35vw;
  width: 35vw;
  position: absolute;
  left: 1%;
  top: 45vw;
}

.imgtele7 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 1%;
}

.imgtele77 {
  height: 35vw;
  width: 35vw;
  position: relative;
  left: 8%;
  top: ;
}

.imgtele777 {
  height: 35vw;
  width: 35vw;
  position: absolute;
  left: 1%;
  top: 45vw;
}

/************************************************************************************/
/************************************************************************************/

.divphoto {
  position: relative;
  background-color: rgb(255, 255, 255);
  display: none;
  top: -4.7vw;
  margin-bottom: 2vw;
  padding-bottom: 50vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.h-photo {
  /* font-family: "Poppins", sans-serif; */
  position: absolute;
  font-size: 2vw;
  top: 12vw;
  left: 15vw;
  width: 45vw;
  line-height: 2.5vw;
  font-weight: 700;
  word-spacing: 0.5vw;
  border-radius: 10px;
  z-index: 400;
  color: rgb(60, 60, 60);
}

.imgDronePhoto {
  height: 30vw;
  width: 30vw;
  position: absolute;
  top: 7vw;
  left: 55vw;
  z-index: 600;
}

.div-h-photo {
  font-weight: 300;
  color: rgb(0, 0, 0);
}


.p-photo {
  position: absolute;
  font-size: 1.6vw;
  top: 30vw;
  color: #ffffff;
  left: 8vw;
  z-index: 400;
  right: 30vw;
  width: 10vw;
  padding: 1vw 0.5vw;
  background-color: #00c2ff;
}

.p-ul-photo {
  z-index: 400;
  position: relative;
  top: 34vw;
  font-weight: 700;
  color: rgb(255, 255, 255);
  background-color: #747070;
  width: max-content;
  padding: 1vw 0.5vw;
  font-size: 1.4vw;
  left: 15vw;
  z-index: 500;
  cursor: pointer;
  border-radius: 20px;
}

.divHide {
  width: 80vw;
  position: relative;
  left: 10vw;
  top: 35vw;
  overflow: hidden;
  height: 40vw;
  margin-bottom: 25vw;
  border-radius: 80px;


                box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

}

.imgDesign {
  position: absolute;
  height: 50vw;
  width: 175vw;
  left: 10vw;
  top: 50vw;
}

.ul-photo {
  position: relative;
  top: -3vw;
  left: 0;
  padding-top: 8vw;
  height: 52vw;
  z-index: 400;
  display: flex;
  width: 300%;

  transition: all 1s ease-in-out;
  animation: slidephoto 50s ease-in-out 5s infinite;

}

@keyframes slidephoto {
  0% {
    left: 0;
  }

  10% {
    left: 0;
  }

  20% {
    left: -100%;
  }

  30% {
    left: -100%;
  }

  40% {
    left: -100%;
  }

  50% {
    left: -200%;
  }

  60% {
    left: -200%;
  }

  70% {
    left: -200%;
  }

  80% {
    left: -100%;
  }

  90% {
    left: -100%;
  }

  100% {
    left: 0%;
  }
}

.ul-photo li {
  position: relative;
  color: #ffffff;
  font-size: 1.7vw;
  line-height: 3vw;
  list-style: none;
  height: 20vw;
  width: 100%;
  
}
/*
                        .ul-photo li:nth-child(1){
                            animation-name: opacityphoto;
                            animation-duration: 10s;
                            animation-timing-function: ease;
                            animation-delay: 1s;
                            animation-iteration-count: infinite;
                        }


                        

                        @keyframes  opacityphoto{
                            from{
                                position: relative;
                                opacity: 0;

                            }
                            
                            to{
                                position: relative;
                                opacity: 1;
                            }
                        
                        }







                        .ul-photo li:nth-child(2){
                            animation-name: opacityphoto2;
                            animation-duration: 11s;
                            animation-timing-function: ease;
                            animation-delay: 8.5s;
                            animation-iteration-count: infinite;
                        }



                                        
                                        @keyframes  opacityphoto2{
                                            from{
                                                position: relative;
                                                opacity: 0;

                                            }
                                            
                                            to{
                                                position: relative;
                                                opacity: 1;
                                            }
                                        
                                        }



                        .ul-photo li:nth-child(3){
                            animation-name: opacityphoto3;
                            animation-duration: 11s;
                            animation-timing-function: ease;
                            animation-delay: 17s;
                            animation-iteration-count: infinite;
                            
                        }



                                        
                                        @keyframes  opacityphoto3{
                                            from{
                                                position: relative;
                                                opacity: 0;

                                            }
                                            
                                            to{
                                                position: relative;
                                                opacity: 1;
                                            }
                                        
                                        }

                                        */

.ul-photo li img {
  position: relative;
  height: 15vw;
  width: 15vw;
  left: 2vw;
  top: 19%;
}

.ul-photo li p {
  line-height: 3.5vw;
  position: relative;
  top: -10vw;
  left: 5vw;
  font-size: 2.7vw;
  text-align: center;
  font-weight: 700;
  padding-bottom: 1vw;
  color: #292929;
}

.ul-photo li h5 {
  line-height: 2vw;
  position: relative;
  top: -7vw;
  width: 70%;
  text-align: center;
  left: 17vw;
  font-weight: 400;
  color: rgb(46, 46, 46);
  word-spacing: 0.2vw;
  letter-spacing: 0.15vw;
}

/************************************************************************************/
/************************************************************************************/
/************************************************************************************/
/******************************************************************************************/
.total-foot {
  position: relative;
  height: 35vw;
  width: 100%;
  top: 0vw;
  margin-top: -38vw;
  background-color: #373737;
  /*border: 2px solid black;*/
  color: white;
  border-top-left-radius: 150%;
  overflow: hidden;
  display: block;
  z-index: 700;
  border-top: 1px solid white;
}
.foot-ser {
  margin: 30px 0px 0px 0px;
  position: absolute;
  width: 23vw;
  left: 28vw;
  top: 11vw;
}

.foot-ser p {
  position: relative;
  font-weight: 700;
  color: white;
  text-align: center;
  font-size: 1.1vw;
  left: -3vw;
}

.foot-ser ul li {
  position: relative;
  top: 1.5vw;
  font-size: 1vw;
  line-height: 1.8vw;
  list-style: url(../PIC/right-1.png);
  margin-left: 2vw;
}
.foot-ser ul li:hover {
  scale: 1.2;
  position: relative;
  left: 2.3vw;
}

.foot-ser ul li a {
  text-decoration: none;
  color: white;
}

.foot-ser ul li:hover a {
  color: #93ffc5;
}

.foot-contact {
  position: absolute;
  left: 53vw;
  top: 22vw;
  font-size: 0.9vw;
}

.foot-contact p {
  font-weight: 800;
  color: white;
  text-align: center;
  font-size: 1.2vw;
}

.foot-contact ul {
  position: relative;
  list-style-type: none;
  text-decoration: none;
  left: 0vw;
}

.foot-contact ul li {
  position: relative;
  top: 1.5vw;
  left: 2.9vw;
  line-height: 2vw;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.1vw;
  font-weight: lighter;
}

.foot-contact ul li:hover {
  scale: 1.1;
  cursor: pointer;
  left: 3.8vw;
  position: relative;
}

.foot-contact ul li a {
  text-decoration: none;
  color: white;
  font-weight: 600;
}

.foot-contact ul li:hover a {
  color: rgb(255, 123, 0);
}

.foot-leg {
  position: absolute;
  left: 55vw;
  top: 8vw;
  font-size: 0.9vw;
  height: ;
}

.foot-leg p {
  font-weight: 700;
  color: white;
  text-align: center;
  font-size: 1.2vw;
}

.foot-leg ul li:hover {
  scale: 1.2;
  position: relative;
  left: 2vw;
  cursor: pointer;
  color: #93ffc5;
}

.foot-leg ul li {
  position: relative;
  top: 2vw;
  left: 1vw;
  font-size: 0.8vw;
  line-height: 1.5vw;
  list-style: url(../PIC/right-1.png);
}

.foot-lien {
  position: absolute;
  left: 79.5vw;
  top: 19vw;
}

.foot-lien p {
  font-weight: 700;
  color: white;
  text-align: center;
  font-size: 1.1vw;
}

.foot-lien ul {
  list-style: none;
  display: flex;
  position: relative;
  left: -0.9vw;
}

.foot-lien ul li {
  position: relative;
  top: 0.8vw;
  left: 1.5vw;
  padding-right: 0vw;
  margin-right: 0.5vw;
}

.foot-lien ul li:hover {
  scale: 1.2;
}

.foot-lien ul li a {
}

.foot-lien ul li:hover a {
}

.fb2 {
  background-image: url(PIC/face.png);
}
/*******************************************************************************************/
/**********************************************************************************************/

.div-text {
  position: relative;
  left: 12vw;
  top: 21vw;
  height: 250px;
}
.div-text ul {
  list-style: none;
}

.div-text li {
  font-size: 2.5vw;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
  line-height: 2.7vw;
  letter-spacing: 0.1vw;
}
.span01 {
  color: #48f126;
  font-weight: 700;
  font-size: 2.5vw;
  font-weight: 900;
}

.span02 {
  font-weight: 700;
  font-size: 2.5vw;
  font-weight: 900;
}

.foot-img {
  position: absolute;
  height: 15vw;
  width: 15vw;
  left: 78vw;
  top: 5vw;
}

/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/

@media screen and (max-width: 720px) {
  .area {
    position: relative;
    background-image: url(../PIC/look.jpeg);
    background-size: cover;
    filter: brightness(25%);
    background-size: 100%;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 110vw;
    z-index: 2;
  }

  .img-head {
    height: 20vw;
    width: 20vw;
    top: 0vw;
    left: 3vw;
    position: absolute;
    z-index: 200;
  }


  .imgUP{
    height: 7vw;
    width: 7vw;
  }

  .closeMenu {
    position: absolute;
    top: 4vw;
    left: 8vw;
    z-index: 700;
    display: block;
    background-color: transparent;
    border: none;

  }

  .displayMenu {
    position: absolute;
    top: 5vw;
    right: 4vw;
    z-index: 900;
    background-color: transparent;
    border: none;
    display: block;
  }

  .closeMenu img {
    height: 7vw;
    width: 7vw;
    border: 2px solid red;
    border-radius: 50px;
  }

  .displayMenu img {
    height: 6vw;
    width: 6vw;
  }
  /******************************************************/
  .div-menu {
    display:none ;
    position: absolute;
    z-index: 800;
    background-color: rgba(0, 0, 0, 0.433);
    backdrop-filter: blur(9px);
    height: 125vh;
    width: 100%;
    top: 0vw;
    left: 0vw;
    transition: all 0.5s ease-in-out;
  }

  .div-menu .ul-menu {
    list-style: none;
    display: block;
    position: relative;
    top: 15vw;
    left: 13vw;
    /* left: 101vw; */
    width: 75vw;
    height: 105vw;
    background-color: rgba(61, 61, 61, 0.708);
    border: 1px solid white;
    backdrop-filter: blur(12px);
    font-family: garamond; 

    transition: all 0.4s ease-in-out;
  }


  .ul-menu.display{
    display: block;
    transition: all 0.3s ease-in-out;
    animation: displayMenuCarto 1s ease-in-out;
  
  }
  
  @keyframes displayMenuCarto {
    0% {
      opacity: 0;
      scale: 0.5;
    }
  
    100% {
      opacity: 1;
      scale: 1;
    }
  }
  

  .div-menu .ul-menu li {
    position: relative;
    display: flex;
    margin-top: 4vw;
    left: 3vw;
    width: 90%;
    /* border: 2px solid blue; */
    overflow: hidden;
  
  }

  .liCarto{
    position: relative;
    top: 0vw;
    color: rgb(78, 78, 78);
    padding: 2vw 1vw 0.8vw 1vw;
    border-top: none;
    /* transition: all 0.5s ease-in-out; */
    box-shadow: 0.08vw 0.08vw 0.2vw rgb(130, 130, 130);
    background-color: rgb(255, 255, 255);
  }

  .div-menu .ul-menu li a {
    color: rgb(199, 199, 199);
  text-decoration: none;
  border: 2px solid green;
  position: relative;
  height: 105%;
  width: 105%;
  top: -1vw;
  padding-left: 4vw;
  font-size: 4vw;
  font-weight: 600;
  padding-top: 2vw;
  padding-bottom: 1vw;
  border-bottom: 1px solid white;
  }

  .context {
    position: absolute;
    top: 18vw;
    left: 0vw;
    width: 100%;
    height: auto;
    padding-bottom: 3vw;
    z-index: 5;
    overflow: hidden;
    padding-top: 4vw;
    /* border: 2px solid rebeccapurple; */
  }

  .context .ulcontext .licontext p {
    color: white;
    font-size: 8vw;
    width: 90vw;
    font-family: "garamond", serif;
    font-weight: 900;
    letter-spacing: 0.05vw;
    line-height: 8vw;
    position: relative;
    left: 8vw;
    text-align: center;
  }

  .context .ulcontext .licontext .imgcart {
    position: relative;
    height: 17vw;
    width: 17vw;
    left: 43vw;
    top: -1vw;
  }

  .p-con {
    position: absolute;
    font-size: 3.5vw;
    background-color: #00c2ff;
    width: 25vw;
    z-index: 6;
    top: 88vw;
    left: 38vw;
    color: white;
    margin: 1vw 1vw 1vw 0vw;
    box-shadow: rgba(55, 62, 58, 0.2) 0 -25px 18px -14px inset,
      rgba(174, 177, 174, 0.15) 0 1px 2px, rgba(179, 181, 180, 0.15) 0 2px 4px,
      rgba(228, 228, 228, 0.15) 0 4px 8px, rgba(255, 255, 255, 0.15) 0 8px 16px,
      rgba(255, 255, 255, 0.15) 0 16px 32px;
    cursor: pointer;
    font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto,
      sans-serif;
    padding: 0.7vw 0vw;
    text-align: center;
    transition: all 250ms;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }


.img-head2{
  display: none;
}



  /**********************************************************************************************************/

  .lien-sociaux {
    display: block;
    position: absolute;
    left: 2vw;
    top: 65vw;
    width: 30vw;
  }

  .lien-sociaux ul {
    list-style: none;
   
  }

  .lien-sociaux ul li {
    margin-left: 1vw;
    margin-bottom: 3vw;
    height: 7vw;
    width: 7vw;
  }

 
 .lien-sociaux ul li img{
  height: 7vw;
  width: 7vw;
 }

  .lien-sociaux ul li:hover {
    scale: 1.1;
  }








  .divbtn {
    position: relative;
    /* border: 2px solid red; */
    left: 7.2vw;
    width: 85vw;
    top: 1.8vw;
    overflow: hidden;
  }

  .divBtnSlide {
    position: relative;
    /* border: 3px solid green; */
    display: flex;
    width: 171vw;
    /* left: -85.5vw; */
  }

  .btn {
    font-size: 2.9vw;
    padding: 0.3vw 1vw;
    position: relative;
    margin-left: 2vw;


                  box-shadow: 0.1vw 0.1vw 0.10vw #2a2c2b, -0.1vw -0.1vw 0.1vw #1f2020;

  }

  .divPrevNext {
    /* border: 2px solid green; */
    position: relative;
    z-index: 700;
    top: 6vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
  }

  .slideBtnPrev {
    display: block;
    border-radius: 50%;
    padding: 2vw;
    border: none;
                box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }

  .slideBtnNext {
    display: block;
     border-radius: 50%;
    padding: 2vw;
     border: none;
                box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }

  .imgSlideBtnPrev {
    display: flex;
    justify-content: center;
  }

  .imgSlideBtnNExt {
    display: flex;
    justify-content: center;
  }

  /************************************************************************************************************************************/
  /**********************************************************************************************/
  /**********************DivMap************************************************************************/

  .divmap {
    position: relative;
    top: 8vw;
    background-color: rgb(255, 255, 255);
    display: block;
    border-radius: 50px;
  }

  .div-h-1 {
    position: relative;
    height: 400vw;
    width: 100%;
    font-weight: 300;
    color: rgb(0, 0, 0);
    z-index: 50; border: none;
    /* border: 2px solid black; */
  }

  .h-map {
    position: absolute;
    top: 10vw;
    left: 2vw;
    font-family: "Poppins", sans-serif;
    font-size: 8vw;
    width: 90vw;
    line-height: 9vw;
    font-weight: 900;
    word-spacing: 0vw;
    text-align: left;
    margin-top: 10vw;
  }

  .ul-map {
    position: absolute;
    top: 45vw;
    left: 9vw;
    list-style: none;
    overflow: hidden;
  }

  .ul-map li {
    font-size: 4vw;
    width: 88vw;
    line-height: 4vw;
    display: none;
  }

  .img-ul-map {
    width: 2vw;
    height: 2vw;
  }

  .div-p {
    position: absolute;
    top: 63vw;
    left:2.5vw;
    height: 130vw;
    width: 93vw;
    border: 1px solid rgb(144, 144, 144);
    box-shadow: 0.1vw 0.1vw 0.4vw;
    transition: all 1s ease-in-out;

  background-color: #373737;
  border-radius: 50px;
  transform: scale(1) rotate(2deg);


    animation: appearMap-divP2 ease-in-out;
  animation-timeline: view();
  animation-range: entry 0%;
  }

  .p-map {
    padding: 3vw 2vw;
    font-size: 3.7vw;
    line-height: 6.5vw;
    word-spacing: 0.7vw;
    letter-spacing: 0.06vw;
    color: white;
    padding: 6vw;
  }

  .h2-services {
    position: absolute;
    top: 205vw;
    transition: all 0.4s ease-in-out;
    left: 9vw;
    font-size: 4.7vw;
    color: rgb(108, 108, 108);
  }

  .map-type {
    position: relative;
    top: 220vw;
    left: 1vw;
    width: 97%;
    height: 75vw;
    /* border: 2px solid blue; */
  }

  .ul-map-type {
    list-style: none;
    width: 100%;
    height: 100%;
    display: inline-block;
  }

  .ul-map-type li {
    position: relative;
    width: 45%;
    height: 41vw;
    padding: 0vw 0.5vw;
    float: left;
                    box-shadow: 0.1vw 0.1vw 0.3vw rgb(187, 185, 185), -0.1vw -0.1vw 0.3vw rgb(185, 182, 182);

  }

  .ul-map-type li:nth-child(1) {
    margin-left: 2vw;
  }

  .ul-map-type li:nth-child(2) {
    margin-left: 2vw;
  }

  .ul-map-type li:nth-child(3) {
    margin-left: 2vw;
    margin-top: 2vw;
  }

  .ul-map-type li img {
    position: absolute;
    height: 10vw;
    width: 10vw;
    top: 2vw;
    left: 29vw;
  }

  .ul-map-type li p {
    position: relative;
    top: 2vw;
    left: 2vw;
    font-size: 4vw;
    padding: 1vw 1vw;
    width: 30vw;
  }

  .ul-map-type li span {
    position: relative;
    top: 3vw;
    left: 1vw;
    font-size: 3vw;
    color: #535353;
    line-height: 2vw;
  }

  .map-type2 {
    position: relative;
    top: 188vw;
    left: -0.8vw;
    width: 97%;
    height: 75vw;
    /* border: 2px solid blue; */
  }

  .ul-map-type2 {
    list-style: none;
    width: 100%;
    height: 100%;
    display: inline-block;
  }

  .ul-map-type2 li {
    position: relative;
    width: 45%;
    height: 41vw;
    padding: 0vw 0.5vw;
    float: right;

                        box-shadow: 0.1vw 0.1vw 0.3vw rgb(187, 185, 185), -0.1vw -0.1vw 0.3vw rgb(185, 182, 182);

  }

  .ul-map-type2 li:nth-child(1) {
    margin-left: 18vw;
    right: 2vw;
  }

  .ul-map-type2 li:nth-child(2) {
    margin-left: 0vw;
    margin-top: 2vw;
    left: -2vw;
  }

  .ul-map-type2 li:nth-child(3) {
    margin-left: 0vw;
    margin-top: 2vw;
    right: 4vw;
  }

  .ul-map-type2 li img {
    position: absolute;
    height: 10vw;
    width: 10vw;
    top: 2vw;
    left: 29vw;
  }

  .ul-map-type2 li p {
    position: relative;
    top: 2vw;
    left: 2vw;
    font-size: 4vw;
    padding: 1vw 1vw;
    width: 30vw;
  }

  .ul-map-type2 li span {
    position: relative;
    top: 3vw;
    left: 1vw;
    font-size: 3vw;
    color: #535353;
    line-height: 2vw;
  }

  /**************/

  /**************/

  .slide-map {
    position: relative;
    height: 240vw;
    z-index: 2;
  }

  .p-apercu {
    position: relative;
    top: 0vw;
    text-align: center;
    font-size: 6vw;
    font-weight: 700;
    color: #ffffff;
    background-color: #000000;
    padding: 4vw 1vw;
  }

  .lesBtn button {
    margin-right: 2vw;
    padding: 1vw 1vw;
    width: 25vw;
    border: none;
    box-shadow: 0.1vw 0.1vw 0.5vw rgb(0, 0, 0);
    transition: all 0.5s ease-in-out;
    background-color: #5f6162da;
    border: 1px solid white;
    color: white;
    font-weight: 600;
    font-size: 4.3vw;
  }

  #dotMap {
    position: relative;
    top: 10vw;
    text-align: center;
    left: -0.46vw;
    height: 2vw;
    width: 100%;
  }

  #choose img {
    height: 5vw;
    width: 5vw;
    position: relative;
    border-radius: 50%;
    border: 0.23vw solid white;
    transition: all 0.5s ease-in-out;
  }

  .aMap {
    position: relative;
    text-decoration: none;
    color: rgb(39, 37, 37);
    font-size: 3.7vw;
    left: 1vw;
    top: 25vw;
    padding: 0.2vw;
    /* border: 2px solid green; */
    transition: all 0.5s ease-in-out;
  }

  .spmap {
    position: relative;
    left: 1vw;
    top: 25vw;
    font-size: 3.7vw;
    background-color: #93ffc5;
    color: #565656;
    padding: 0.5vw 1vw;
    text-decoration: none;
    cursor: pointer;
    z-index: 800;
    transition: all 0.4s ease-in-out;
  }

  .spmap:hover {
    background-color: rgba(0, 0, 0, 0.741);
    padding: 0.7vw 1.3vw;
    color: white;
    border-radius: 50px;
    box-shadow: 0.1vw 0.1vw 0.5vw white;
    font-weight: 600;
  }

  .aThema {
    position: relative;
    text-decoration: none;
    color: rgb(92, 91, 91);
    font-size: 3.7vw;
    left: 1vw;
    top: 69vw;
    padding: 0.2vw;
    /* border: 2px solid green; */
    transition: all 0.5s ease-in-out;
    z-index: 800;
  }

  .spThema {
    position: relative;
    left: 1vw;
    top: 69.5vw;
    font-size: 3.7vw;
    background-color: rgb(240, 240, 82);
    color: #ff2727;
    padding: 0.5vw 1vw;
    text-decoration: none;
    cursor: pointer;
    z-index: 800;
    transition: all 0.4s ease-in-out;
  }

  .spThema:hover {
    background-color: rgba(0, 0, 0, 0.741);
    padding: 1.3vw 2vw;
    color: white;
    border-radius: 50px;
    box-shadow: 0.1vw 0.1vw 0.5vw white;
    font-weight: 600;
  }

  #container {
    display: flex;
    position: relative;
    left: 0vw;
    top: 30vw;
    width: 100%;
    height: 170vw;
    overflow: hidden;
    /* border: 3px solid green ; */
  }

  .imgmap1 {
    height: 150vw;
    width: 98vw;
    position: relative;
    left: 1%;
  }

  .imgmap2 {
    height: 75vw;
    width: 97vw;
    position: relative;
    left: 1%;
  }

  .imgmap3 {
    height: 90vw;
    width: 97vw;
    position: relative;
    left: 1%;
  }

  .imgmap4 {
    height: 75vw;
    width: 97vw;
    position: relative;
    left: 1%;
    border: 6px solid white;
  }

  .imgmap5 {
    height: 90vw;
    width: 96vw;
    position: relative;
    left: 1%;
    border: 6px solid white;
  }

  .imgmap6 {
    height: 85vw;
    width: 96vw;
    position: relative;
    left: 1%;
    border: 6px solid white;
  }

  .imgmap7 {
    height: 90vw;
    width: 98vw;
    position: relative;
    left: 1%;
  }

  /************************************************************************************/
  /************************************************************************************/
  /****************************************************************************/
  /*******************************************************************************/

  .divtopo {
    display: none;
    position: relative;
    margin-bottom: -0vw;
    padding-bottom: 60vw;
  }

  .div-h-2 {
    position: relative;
    top: 7vw;
    width: 94%;
    height: 140vw;
    left: 1.3vw;
    /* border: 0.3px solid rgb(3, 135, 216); */
    border: none;
    padding: 8vw 1vw 70.2vw 1vw;
    margin-bottom: 0vw;
  }

  .div-h-2 a {
    text-decoration: none;
    position: relative;
    top: 9vw;
    left: 67vw;
    transition: all 0.5s ease-in-out;
    font-weight: 600;
  }

  .h-2 {
    font-family: "Poppins", sans-serif;
    position: relative;
    font-size: 7vw;
    width: 90vw;
    line-height: 7vw;
    font-weight: 900;
    word-spacing: 1vw;
    padding-bottom: 3vw;
    color: #4b4b4b;
    left: 3vw;
  }

  .p-topo,
  .p-topo2 {
    font-size: 2.5vw;
    width: 90%;
    position: relative;
    left: 3vw;
  }

  .sp-topo {
    color: blue;
    font-weight: 700;
  }

  .div-h-2 h3 {
    position: relative;
    top: 8vw;
    font-size: 4vw;
    font-weight: 600;
    padding-top: 3vw;
    color: #4b4b4b;
    width: 90%;
    left: 3vw;
  }

  .div-h-2 ul {
    position: relative;
    top: 25vw;
    left: 3vw;
    width: 88%;
    padding: 1vw 1vw;
    display: block;
    margin-bottom: 45vw;
    /* border: 3px solid orange; */
  }

  .div-h-2 ul li {
    position: relative;
    width: 90%;
    height: 20vw;
    margin-left: 4vw;
    margin-bottom: 2vw;
    padding: 1vw 1vw 1vw 1vw;
    list-style: none;
    border: 1px solid rgb(209, 209, 209);
    border-radius: 1px;
    box-shadow: 0.1vw 0.1vw 0.3vw;
  }

  .div-h-2 ul li:first-child {
    margin-left: 4vw;
  }

  .img-li-topo {
    height: 18vw;
    width: 18vw;
  }

  .img-li-topo2 {
    height: 2vw;
    width: 2vw;
  }

  .div-h-2 ul li p {
    position: absolute;
    width: 53vw;
    top: 5vw;
    left: 25vw;
    font-size: 3vw;
  }

  .div-ul-right {
    position: relative;
    top: 0vw;
    left: 2%;
    width: 95%;
    height: 250vw;
  }



  .imgT{
    left: 15vw;
    top: 250vw;
    height: 50vw;
    width: 40vw;
  }

  .imgT2{
    left: 44vw;
    top: 280vw;
    height: 50vw;
    width: 40vw;
  }

  .imgT3{
    left: 15vw;
    top: 315vw;
    height: 50vw;
    width: 50vw;
  }

  .div-ul-right h2 {
    margin-bottom: 5vw;
    font-size: 4.3vw;
    position: relative;
    top: 19vw;
    width: 70vw;
    border: none;
  }

  .div-ul-right ul {
    list-style: none;
    position: relative;
    top: 28vw;
    left: -4vw;
  }



  .div-ul-right ul li {
    /* border: 1px solid rgb(142, 141, 141); */
    padding-top: 2vw;
    padding-bottom: 20vw;
    padding-left: 8vw;
    border-right: none;
    height: 12vw;
    width: 92%;
    margin-bottom: 12vw;
  }

  .div-ul-right ul li p {
    position: relative;
    top: 5vw;
    padding-left: 0vw;
    width: 80vw;
  }

  .div-ul-right ul li h3 {
    color: #646161;
    font-size: 5vw;
  }

  #liTop{
  height: 20vw;
}


  .liTop p {
    position: relative;
    float: left;
    margin-right: 2vw;
    padding: 0.3vw 0.5vw;
    text-align: center;
    /* background-color: #00c2ff; */
    color: rgb(95, 93, 93);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    margin-bottom: 1.2vw;

                  box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }

  .div-btn {
    position: relative;
    width: 70%;
    top: 40vw;
    left: 14.5vw;
    display: flex;
    justify-content: center;
    z-index: 3;
  }

  .div-btn button {
    margin-right: 2vw;
    padding: 1vw 1vw;
    width: 25vw;
    border: none;
    box-shadow: 0.1vw 0.1vw 0.5vw rgb(0, 0, 0);
    transition: all 0.5s ease-in-out;
    background-color: #5f6162da;
    border: 1px solid white;
    color: white;
    font-weight: 600;
    font-size: 4.3vw;
  }

  .div-btn button:hover {
    background-color: #93ffc5;
    scale: 1.1;
    border-radius: 50px;
    border: 4px solid white;
    padding: 0.4vw 0.4vw;
    color: #000000;
  }

  #dotTopo {
    position: relative;
    top: 48vw;
    text-align: center;
    left: -0.9vw;
    height: 2vw;
    width: 100%;
  }

  #select img {
    height: 5vw;
    width: 5vw;
    position: relative;
    border-radius: 50%;
    border: 0.23vw solid white;
    transition: all 0.5s ease-in-out;
  }

  #select img:hover {
    border: 0.23vw solid rgba(238, 68, 68, 0.979);
    scale: 1.4;
  }

  #container2 {
    display: flex;
    position: relative;
    left: 0vw;
    top: 75vw;
    width: 100%;
    height: 190vw;
    overflow: hidden;
  }

  .imgtopo1 {
    height: 150vw;
    width: 98vw;
    position: relative;
    left: 1%;
  }

  .imgtopo2 {
    height: 150vw;
    width: 98vw;
    position: relative;
    left: 1%;
  }

  .imgtopo3 {
    height: 80vw;
    width: 97vw;
    position: relative;
    left: 1%;
  }

  .imgtopo4 {
    height: 75vw;
    width: 97vw;
    position: relative;
    left: 1%;
    border: 6px solid white;
  }

  .imgtopo5 {
    height: 140vw;
    width: 96vw;
    position: relative;
    left: 1%;
    border: 6px solid white;
  }

  .imgtopo6 {
    height: 85vw;
    width: 96vw;
    position: relative;
    left: 1%;
    border: 6px solid white;
  }

  .imgtopo7 {
    height: 150vw;
    width: 98vw;
    position: relative;
    left: 1%;
  }

  /************************************************************************************/
  /************************************************************************************/

  .divana {
    position: relative;
    background-color: rgb(255, 255, 255);
    display: none;
    top: 7vw;
    border-radius: 50px;
    /* margin-bottom: 60vw; */
  }

  .h-ana {
    font-family: "Poppins", sans-serif;
    position: relative;
    font-size: 4.5vw;
    top: 17vw;
    left: 10vw;
    width: 90vw;
    line-height: 6vw;
    letter-spacing: 0.1vw;
    font-weight: 900;
    word-spacing: 0.8vw;
    border-radius: 10px;
    z-index: 400;
    color: #373737;
    backdrop-filter: blur(1px);
  }


  .pAna{
  position: relative;
  width: 70%;
  top: 20vw;
  left: 15vw;
}

  .imgUp {
    position: absolute;
    height: 50vw;
    width: 55vw;
    top: 0vw;
    left: 45vw;
    z-index: 300;
    display: none;
  }

  .img-down {
    position: absolute;
    top: 50vw;
    left: 45%;
    height: 6vw;
    width: 7vw;
    border: none;
    /* border: 1px solid black; */
    border-radius: 50%;
    padding: 0.3vw 0.3vw;
    z-index: 300;
            box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

    animation: imgDown 0.7s ease 0.1s infinite;
  }

  @keyframes imgDown {
    0% {
      top: 50vw;
      scale: 0.3;
    }

    20% {
      top: 50.5vw;
      scale: 0.6;
    }

    40% {
      top: 51vw;
      scale: 0.9;
    }

    60% {
      top: 51.5vw;
      scale: 1.2;
    }

    80% {
      top: 52vw;
      scale: 1.3;
    }

    100% {
      top: 52.5vw;
      scale: 1.4;
    }
  }

  .divAnaPrevNext {
    /* border: 2px solid green; */
    position: relative;
    z-index: 700;
    top: 50vw;
    display: flex;
    justify-content: center;
    gap: 8vw;
  }

  .slideBtnAnaPrev {
    display: block;
    transition: all 0.5s ease-in-out;
    border: none;
    background-color: transparent;
    
  }

  .slideBtnAnaPrev:hover {
    scale: 1.1;
    background-color: #c0bfbf;
  }

  .slideBtnAnaNext {
    display: block;
    transition: all 0.5s ease-in-out;
    border: none;
    background-color: transparent;
  }

  .slideBtnAnaNext:hover {
    scale: 1.1;
    background-color: #c0bfbf;
  }

  .imgSlideBtnAnaPrev {
    height: 8vw;
    width: 8vw;
    position: relative;
    top: 5%;
    left: 4%;

    border-radius: 50%;
    padding: 1vw;
    

                box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }

  .imgSlideBtnAnaNext {
    height: 8vw;
    width: 8vw;
    position: relative;
    top: 5%;
    left: 4%;

    border-radius: 50%;
    padding: 1vw;
    

                box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }

  .ul-ana {
    position: relative;
    top: 35vw;
    left: 0vw;
    list-style: none;
    display: flex;
    box-shadow: 0.5vw 0.5vw 0.6vw rgb(173, 169, 169);
    height: 100vw;
    width: 100%;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    /* border: 2px solid green; */
  }

  .h3-ana {
    position: absolute;
    z-index: 300;
    left: 4vw;
    top: 183vw;
    font-weight: 700;
    font-size: 5.5vw;
    color: rgb(255, 10, 10);
    background-color: transparent;
    padding: 1vw 0.5vw;
  }

  .ul-ana li {
    position: relative;
    top: 27%;
    left: 0vw;
    height: 50vw;
    width: 100%;
    margin: 0vw 12vw;
    /* background-color: #002c3e; */
    background-color: #ffffffd7;
    color: black;
    box-shadow: 0.1vw 0.1vw 0.3vw;
    align-items: center;

    padding: 1vw;
    

                box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }

  /* 
                .ul-ana li:nth-child(2){
                    margin-left: 22vw;
                }

                .ul-ana li:nth-child(4){
                    margin-left: 22vw;
                }

                .ul-ana li:nth-child(4){
                    margin-left: 22vw;
                } */

  .ul-ana li img {
    position: relative;
    height: 25vw;
    width: 25vw;
    top: 3vw;
    left: 33%;
  }

  .ul-ana li p {
    color: rgb(46, 45, 45);
    position: relative;
    text-align: none;
    top: 9vw;
    left: 8vw;
    font-weight: 700;
    line-height: 5vw;
    word-spacing: 0.3vw;
    letter-spacing: 0.3vw;
    font-size: 3.7vw;
    width: 60vw;
  }

  .div-bull-ana {
    position: relative;
    top: 50vw;
    width: 97vw;
    height: 270vw;
    left: 1vw;
    overflow: hidden;
  }

  .div-bull-ana ul {
    display: block;
    list-style: none;
    margin-bottom: 27vw;
    /* border: 3px solid green; */
  }

  .div-bull-ana ul li {
    margin: 8vw 0vw 4vw 9vw;
  }

  .p-ana {
    position: relative;
    top: 2vw;
    left: 4vw;
    width: 75vw;
    font-size: 4vw;
    font-weight: 400;
  }

  .textpic-1 {
    position: relative;
    border: 1px solid #0b9ae6;
    width: 80vw;
    height: 63vw;
  }

  .pic-ana-1 {
    height: 35vw;
    width: 57vw;
    position: relative;
    left: -3vw;
    top: -4vw;
    box-shadow: 0.1vw 0.1vw 0.3vw;
    transition: all 0.5s ease-in-out;
  }

  .pic-ana-2 {
    height: 35vw;
    width: 57vw;
    position: relative;
    left: -1.2vw;
    top: -4vw;
    box-shadow: 0.1vw 0.1vw 0.3vw;
    transition: all 0.5s ease-in-out;
  }

  .textpic-2 {
    position: relative;
    border: 1px solid #0b9ae6;
    width: 80vw;
    height: 63vw;
  }

  .textpic-3 {
    position: relative;
    border: 1px solid black;
    width: 80vw;
    height: 63vw;
  }

  /************************************************************************************/
  /************************************************************************************/

  /************************************************************************************/
  /************************************************************************************/

  .divthema {
    position: relative;
    background-color: rgb(255, 255, 255);
    display: none;
    top: 8vw;
    height: 720vw;
    margin-bottom: 20vw;
    border-radius: 50px;
  }

  .divTextThema {
    position: relative;
    left: 8%;
    top: 20vw;
    width: 86%;
    height: 40vw;
  }

  .h-thema {
    font-family: "Poppins", sans-serif;
    position: relative;
    font-size: 4.5vw;
    width: 100%;
    line-height: 7vw;
    font-weight: 900;
    word-spacing: 0vw;
    z-index: 400;
    color: rgb(76, 76, 76);
    margin-bottom: 2vw;
  }

  #btnTextThema {
    margin: 1vw 1vw 1vw 0vw;
    padding: 0.7vw 1.7vw;
    position: relative;
    background-color: #ffffff;
    color: rgb(4, 4, 4);
    border: 2px solid black;
    border-radius: 50px;
    text-align: center;
    font-size: 2.5vw;
    transition: all 0.5s ease-in-out;
  }

  #btnTextThema:hover {
    position: relative;
    top: 2vw;
    margin: 1vw 1vw 1vw 0vw;
    background-color: #444444;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto,
      sans-serif;
    padding: 0.7vw 1.7vw;
    text-align: center;
    border-bottom: 3px solid #0b9ae6;
    border-left: 3px solid #0b9ae6;
    border-right: 3px solid #0b9ae6;
    font-size: 3.7vw;
    border-radius: 10px;
  }

  #pthema {
    font-size: 3.7vw;
    line-height: 4vw;
    word-spacing: 0.1vw;
    letter-spacing: 0.1vw;
    display: none;
    position: relative;
    left: 4vw;
    width: 70vw;
    top: 4vw;
  }

  .picthema {
    position: relative;
    top: 70vw;
    left: -0.9vw;
    width: 101%;
    height: 80vw;
    overflow: hidden;
    border-top-left-radius: 0%;
    border-bottom-right-radius: 0%;
    border: 3px solid burlywood;
  }

  .picthemaslide {
    width: 101%;
    display: flex;
    position: relative;
  }

  .flopthema {
    height: 80vw;
    width: 100%;
    position: relative;
    filter: brightness(25%);
    animation: slidethema 50s ease-in-out 5s infinite;
  }

  @keyframes slidethema {
    0% {
      left: 0;
    }

    5% {
      left: 0;
    }

    10% {
      left: -100%;
    }

    15% {
      left: -100%;
    }

    20% {
      left: -200%;
    }

    25% {
      left: -200%;
    }

    30% {
      left: -300%;
    }

    35% {
      left: -300%;
    }

    40% {
      left: -400%;
    }

    45% {
      left: -400%;
    }

    50% {
      left: -500%;
    }

    55% {
      left: -500%;
    }

    60% {
      left: -400%;
    }

    65% {
      left: -400%;
    }

    70% {
      left: -300%;
    }

    75% {
      left: -300%;
    }

    80% {
      left: -200%;
    }

    85% {
      left: -200%;
    }

    90% {
      left: -100%;
    }

    95% {
      left: -100%;
    }

    100% {
      left: -0%;
    }
  }

  .h2-thema {
    position: relative;
    top: 100vw;
    left: 5vw;
    font-weight: 200;
    z-index: 400;
    color: #373737;
    font-size: 4vw;
    background-color: #93ffc5;
    padding: 1vw 0.5vw;
    width: 30vw;
  }

  .ul-thema-2 {
    position: relative;
    width: 98%;
    height: 150vw;
    top: 115vw;
    left: 3.5vw;
    z-index: 400;
    display: block;
    list-style: none;
    /* border: 3px solid palevioletred; */
  }

  .li-2 {
    position: relative;
    margin-right: 2vw;
    width: 46%;
    height: 65vw;
    float: left;
    /* border: 3px solid green; */
    margin-bottom: 2vw;

                box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }

  .pic-2 {
    position: relative;
    top: 2vw;
    height: 15vw;
    width: 15vw;
  }

  .p-pic-2 {
    position: relative;
    top: -12vw;
    left: 17vw;
    width: 35vw;
    font-size: 3.7vw;
    font-weight: 700;
    color: #029044;
    padding: 0.5vw 0.5vw;
    letter-spacing: 0.1vw;
  }

  #p-pic-2 {
    width: 20vw;
  }

  .ul-thema-2 li h5 {
    position: absolute;
    top: 22vw;
    left: 4vw;
    width: 40vw;
    font-weight: 600;
    color: #717171;
    line-height: 4.7vw;
    font-size: 2.5vw;
    letter-spacing: 0.04vw;
  }



  #expert{
    width: 30vw;
  }

  #deg{
    width: 35vw;
  }


  .ul-thema-3 {
    position: relative;
    width: 98%;
    height: 150vw;
    top: 32.7vw;
    left: 1.1vw;
    z-index: 400;
    display: block;
    list-style: none;
    /* border: 3px solid palevioletred; */
  }

  .li-3 {
    position: relative;
    margin-right: 2vw;
    width: 46%;
    height: 65vw;
    float: left;
    /* border: 3px solid green; */
    margin-bottom: 2vw;

                box-shadow: 0.1vw 0.1vw 1vw rgb(187, 185, 185), -0.1vw -0.1vw 1vw rgb(185, 182, 182);

  }

  .li-3:nth-child(1) {
    margin-left: 50.3vw;
  }

  .li-3:nth-child(2) {
    margin-left: 2.3vw;
  }

  .pic-3 {
    position: relative;
    top: 2vw;
    height: 15vw;
    width: 15vw;
  }

  .p-pic-3 {
    position: relative;
    top: -12vw;
    left: 17vw;
    width: 35vw;
    font-size: 3.7vw;
    font-weight: 700;
    color: #029044;
    padding: 0.5vw 0.5vw;
    letter-spacing: 0.1vw;
  }

  .ul-thema-3 li h5 {
    position: absolute;
    top: 27vw;
    left: 6vw;
    width: 40vw;
    font-weight: 600;
    color: #717171;
    line-height: 4.7vw;
    font-size: 2.5vw;
    letter-spacing: 0.04vw;
  }

  .aThema {
    position: relative;
    text-decoration: none;
    color: rgb(92, 91, 91);
    font-size: 3.7vw;
    left: 1vw;
    top: 69vw;
    padding: 0.2vw;
    /* border: 2px solid green; */
    transition: all 0.5s ease-in-out;
    z-index: 800;
  }

  .spThema {
    position: relative;
    left: 1vw;
    top: 69.5vw;
    font-size: 3.7vw;
    background-color: #93FFC5;
    color: #373737;
    padding: 0.5vw 1vw;
    text-decoration: none;
    cursor: pointer;
    z-index: 800;
    transition: all 0.4s ease-in-out;
  }

  .spThema:hover {
    background-color: rgba(0, 0, 0, 0.741);
    padding: 1.3vw 2vw;
    color: white;
    border-radius: 50px;
    box-shadow: 0.1vw 0.1vw 0.5vw white;
    font-weight: 600;
  }

  /************************************************************************************/
  /************************************************************************************/

  .divtele {
    position: relative;
    background-color: rgb(255, 255, 255);
    display: none;
    height: 900vw;
    top: 8vw;
    margin-bottom: 40vw;
    border-radius: 50px;
  }

  .h-tele {
    font-family: "Poppins", sans-serif;
    position: relative;
    font-size: 4vw;
    top: 10vw;
    left: 8vw;
    width: 91vw;
    line-height: 6vw;
    font-weight: 900;
    word-spacing: 0.6vw;
    z-index: 400;
    color: rgb(98, 96, 96);
  }

  .div-h-tele {
    font-weight: 300;
    color: rgb(0, 0, 0);
    height: 50vw;
  }

  .img-tele {
    position: relative;
    height: 45vw;
    width: 100%;
    z-index: 100;
    background-color: #2e2e2e;
  }

  .p-tele {
    position: relative;
    top: 20vw;
    color: #dfdfdf;
    left: 10vw;
    z-index: 400;
    right: 30vw;
  }

  .blur-tele2 {
    position: absolute;
    height: 290vw;
    width: 100%;
    top: 70vw;
    z-index: 300;
    background-image: url(../PIC/leaf.jpg);
    background-size: 80%;
    filter: brightness(10%);
  }

  .p-ul-tele {
    z-index: 400;
    position: relative;
    top: 13vw;
    font-weight: 700;
    color: rgb(255, 255, 255);
    background-color: #000000;
    width: max-content;
    padding: 1vw 1vw;
    font-size: 3.7vw;
    left: 8vw;
  }

  .ul-tele {
    position: relative;
    width: 100%;
    height: 70vw;
    top: 30vw;
    left: 1vw;
    z-index: 400;
    display: block;
    list-style: none;
    /* border: 3px solid rebeccapurple; */
  }

  .ul-tele li {
    position: relative;
    margin-right: 2vw;
    margin-left: 2vw;
    margin-bottom: 2vw;
    width: 45%;
    height: 64vw;
    border: 0.5px solid rgb(166, 164, 164);
    transition: all 0.5s ease-in-out;
    float: left;
    border-radius: 20px;
  }

  .ul-tele li:hover {
    background-color: white;
    border-radius: 20px;
  }

  .ul-tele li:hover P {
    color: black;
  }

  .ul-tele li:hover h5 {
    color: black;
    font-weight: 400;
  }

  .ul-tele li img {
    position: relative;
    top: 4vw;
    height: 12vw;
    width: 12vw;
  }

  .ul-tele li p {
    position: relative;
    top: -8vw;
    left: 13vw;
    line-height: 4.7vw;
    width: 35vw;
    font-size: 3.5vw;
    font-weight: 700;
    color: #ffffff;
    padding: 0.5vw 0.5vw;
    letter-spacing: 0.1vw;
  }

  .ul-tele li h5 {
    line-height: 3.3vw;
    position: relative;
    top: -4vw;
    left: 6.5vw;
    width: 35vw;
    font-weight: 200;
    color: white;
    letter-spacing: 0.1vw;
    font-size: 2.4vw;
  }

  .ul-tele2 {
    position: relative;
    width: 100%;
    height: 70vw;
    top: 32vw;
    left: 1vw;
    z-index: 400;
    display: block;
    list-style: none;
    /* border: 3px solid rebeccapurple; */
  }

  .ul-tele2 li {
    position: relative;
    margin-right: 2vw;
    margin-left: 2vw;
    margin-bottom: 2vw;
    width: 45%;
    height: 64vw;
    border: 0.5px solid rgb(166, 164, 164);
    transition: all 0.5s ease-in-out;
    float: left;
        border-radius: 20px;

  }

  .ul-tele2 li:hover {
    background-color: white;
    border-radius: 20px;
  }

  .ul-tele2 li:hover P {
    color: black;
  }

  .ul-tele2 li:hover h5 {
    color: black;
    font-weight: 400;
  }

  .ul-tele2 li img {
    position: relative;
    top: 4vw;
    height: 12vw;
    width: 12vw;
  }

  .ul-tele2 li p {
    position: relative;
    top: -8vw;
    left: 13vw;
    line-height: 4.7vw;
    width: 35vw;
    font-size: 3.5vw;
    font-weight: 700;
    color: #ffffff;
    padding: 0.5vw 0.5vw;
    letter-spacing: 0.1vw;
  }

  .ul-tele2 li h5 {
    line-height: 3.3vw;
    position: relative;
    top: -4vw;
    left: 6.5vw;
    width: 35vw;
    font-weight: 200;
    color: white;
    letter-spacing: 0.1vw;
    font-size: 2.4vw;
  }

  .btnTele {
    position: relative;
    width: 70%;
    top: 68vw;
    left: 14.5vw;
    display: flex;
    justify-content: center;
    z-index: 3;
  }

  .btnTele button {
    margin-right: 2vw;
    padding: 1vw 1vw;
    width: 25vw;
    border: none;
    box-shadow: 0.1vw 0.1vw 0.5vw rgb(0, 0, 0);
    transition: all 0.5s ease-in-out;
    background-color: #5f6162da;
    border: 1px solid white;
    color: white;
    font-weight: 600;
    font-size: 4.3vw;
  }

  .btnTele button:hover {
    background-color: 93ffc5;
    scale: 1.1;
    border-radius: 50px;
    border: 4px solid white;
    padding: 0.4vw 0.4vw;
    color: #000000;
  }

  #dotTele {
    position: relative;
    top: 76vw;
    text-align: center;
    left: -0.9vw;
    height: 2vw;
    width: 100%;
  }

  #tick img {
    height: 5vw;
    width: 5vw;
    position: relative;
    border-radius: 50%;
    border: 0.23vw solid white;
    transition: all 0.5s ease-in-out;
  }

  #tick img:hover {
    border: 0.23vw solid rgba(238, 68, 68, 0.979);
    scale: 1.4;
  }

  .aTele {
    position: relative;
    text-decoration: none;
    color: #575858;
    font-size: 3.7vw;
    left: 1vw;
    top: 90vw;
    padding: 0.2vw;
    /* border: 2px solid green; */
    transition: all 0.5s ease-in-out;
    z-index: 800;
  }

  .spTele {
    position: relative;
    left: 1vw;
    top: 90.5vw;
    font-size: 3.7vw;
    background-color: #93FFC5;
    color: #4d4d4d;
    padding: 0.5vw 1vw;
    text-decoration: none;
    cursor: pointer;
    z-index: 800;
    transition: all 0.4s ease-in-out;
  }

  .spTele:hover {
    background-color: rgba(0, 0, 0, 0.741);
    padding: 1.3vw 2vw;
    color: white;
    border-radius: 50px;
    box-shadow: 0.1vw 0.1vw 0.5vw white;
    font-weight: 600;
  }

  #container3 {
    position: relative;
    left: 0vw;
    top: 90vw;
    width: 99.5%;
    height: 420vw;
    overflow: hidden;
    background-color: white;
    padding-top: 4vw;
    /* border: 3px solid orange; */
  }

  #container3 .imgTopo {
    height: 99.5%;
    width: 99.5%;
    padding-bottom: 4vw;
  }

  #container3 .imgTele p {
    color: rgb(255, 255, 255);
    position: absolute;
    top: 2vw;
    left: 2vw;
    width: 90vw;
    height: 37vw;
    font-size: 2.7vw;
    line-height: 3.7vw;
    padding: 3vw 3vw;
    letter-spacing: 0.2vw;
  }

  #container3 .imgTele p:hover {
    background-color: #373636;
    color: white;
    scale: 1.05;
    top: 2vw;
  }

  .imgtele1 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 45vw;
  }

  .imgtele11 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele111 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 65vw;
  }

  .imgtele2 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 45vw;
  }

  .imgtele22 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele222 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 65vw;
  }

  .imgtele3 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 45vw;
  }

  .imgtele33 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele333 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 65vw;
  }

  .imgtele4 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 45vw;
  }

  .imgtele44 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele444 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele5 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 45vw;
  }

  .imgtele55 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele555 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele6 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 45vw;
  }

  .imgtele66 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele666 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 65vw;
  }

  .imgtele7 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 45vw;
  }

  .imgtele77 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 55vw;
  }

  .imgtele777 {
    height: 115vw;
    width: 95vw;
    position: relative;
    left: 2.3%;
    top: 65vw;
  }

  /************************************************************************************/
  /************************************************************************************/

  .divsig {
    position: relative;
    background-color: rgb(255, 255, 255);
    display: none;
    top: 8vw;
    margin-bottom: 20vw;


        border-radius: 50px;
        /* border: 2px solid red; */

  }

  .h-sig {
    font-family: "Poppins", sans-serif;
    position: absolute;
    font-size: 4.5vw;
    top: 12vw;
    left: 8vw;
    width: 90vw;
    padding-right: 11vw;
    line-height: 6vw;
    font-weight: 900;
    word-spacing: 0.5vw;
    border-radius: 10px;
    letter-spacing: 0.1vw;
    z-index: 400;
    color: rgb(73, 72, 72);
  }

  .div-h-sig {
    font-weight: 300;
    border-radius: 50px;
    margin-bottom: 80vw;
  }

  .p-sig {
    position: absolute;
    top: 40vw;
    color: rgb(50, 49, 49);
    font-weight: 300;
    left: 10vw;
    width: 55vw;
    z-index: 400;
    line-height: 3.5vw;
    word-spacing: 0.5vw;
    letter-spacing: 0.1vw;
    font-size: 3vw;
  }

  .spSig {
    color: #48f126;
    position: relative;
    font-weight: 700;
  }

  .flat {
    height: 60vw;
    width: 50vw;
    position: absolute;
    top: 40vw;
    left: 55vw;
    z-index: 500;
  }

  .splash {
    position: absolute;
    height: 35vw;
    width: 85vw;
    top: 2vw;
    left: 10vw;
  }

  .blur2-sig {
    position: absolute;
    height: 110vw;
    width: 100%;
    top: 100vw;
    z-index: 300;

    background-image: url(../PIC/aigene.jpg);
    background-size: cover;
    filter: brightness(10%);
  }

  .p-ul-sig {
    z-index: 400;
    position: relative;
    top: -29vw;
    width: max-content;
    left: 4vw;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-size: 3.7vw;
    border-bottom: 1px solid white;
    padding-bottom: 0.3vw;
  }

  .ul-sig {
    position: relative;
    top: -15vw;
    left: 0;
    padding-top: 8vw;
    height: 52vw;
    z-index: 400;
    display: flex;
    width: 300%;

    transition: all 2s ease-in-out;
    animation: slidesig 50s ease-in-out 5s infinite;
  }

  @keyframes slidesig {
    0% {
      left: 0;
    }

    10% {
      left: 0;
    }

    20% {
      left: -100%;
    }

    30% {
      left: -100%;
    }

    40% {
      left: -100%;
    }

    50% {
      left: -200%;
    }

    60% {
      left: -200%;
    }

    70% {
      left: -200%;
    }

    80% {
      left: -100%;
    }

    90% {
      left: -100%;
    }

    100% {
      left: 0%;
    }
  }

  .ul-sig li {
    position: relative;
    color: #ffffff;
    font-size: 1.4vw;
    line-height: 3vw;
    list-style: none;
    height: 20vw;
    width: 100%;
  }

  .ul-sig li img {
    position: relative;
    height: 25vw;
    width: 25vw;
    left: 38vw;
    top: -60%;
  }

  .ul-sig li p {
    line-height: 2vw;
    position: relative;
    top: -9vw;
    left: 0vw;
    font-size: 4vw;
    text-align: center;
    font-weight: 700;
    padding-bottom: 1vw;
  }

  .ul-sig li h5 {
    line-height: 4vw;
    position: relative;
    top: -5vw;
    width: 60%;
    text-align: center;
    left: 20vw;
    font-weight: 200;
    font-size: 3vw;
  }

  .ul-sig li a {
    position: relative;
    text-decoration: none;
    color: #0b9ae6;
    left: 38%;
    top: 0vw;
    font-weight: 700;
    letter-spacing: 0.07vw;
    padding: 0.3vw 0.7vw;
    font-size: 2.8vw;
  }

  .ul-sig li a:hover {
    background-color: #0b9ae6;
    transition: all 0.8s ease-in-out;
    color: white;
    padding: 0.3vw 0.7vw;
  }

  /************************************************************************************/
  /************************************************************************************/

  .divphoto {
    position: relative;
    background-color: rgb(255, 255, 255);
    display: none;
    top: 8vw;
    height: 200vw;
    border-radius: 50px;
    margin-bottom: 0vw;
    padding-bottom: 0vw;
  }

  .h-photo {
    font-family: "Poppins", sans-serif;
    position: absolute;
    font-size: 4.5vw;
    top: 10vw;
    left: 8vw;
    width: 65vw;
    line-height: 6vw;
    font-weight: 900;
    word-spacing: 0.6vw;
    border-radius: 10px;
    z-index: 400;
    color: #5b5a5a;
  }

  .imgDronePhoto {
    height: 35vw;
    width: 35vw;
    position: absolute;
    top: 7vw;
    left: 70vw;
    z-index: 600;
  }

  .div-h-photo {
    font-weight: 300;
    color: rgb(0, 0, 0);
  }


  .p-photo {
    position: absolute;
    font-size: 2.3vw;
    top: 40vw;
    color: #ffffff;
    left: 8vw;
    z-index: 400;
    right: 30vw;
    width: 20vw;
    padding: 1vw 0.5vw;
    background-color: #00c2ff;
  }

  .p-ul-photo {
    z-index: 400;
    position: relative;
    top: -80vw;
    font-weight: 700;
    color: rgb(255, 255, 255);
    background-color: #4b4b4b;
    width: max-content;
    padding: 1vw 0.5vw;
    font-size: 2.3vw;
    left: 80vw;
    cursor: pointer;
  }

  .divHide {
    width: 90vw;
    position: relative;
    left: 5vw;
    top: 60vw;
    overflow: hidden;
    height: 70vw;
    margin-bottom: 25vw;
    border-radius: 0px;
  }

  .imgDesign {
    position: absolute;
    height: 65vw;
    width: 200vw;
    left: 3vw;
    top: 80vw;
  }

  .ul-photo {
    position: relative;
    top: -3vw;
    left: 0;
    padding-top: 8vw;
    height: 52vw;
    z-index: 400;
    display: flex;
    width: 300%;

    transition: all 1s ease-in-out;
    animation: slidephoto 50s ease-in-out 5s infinite;
  }

  @keyframes slidephoto {
    0% {
      left: 0;
    }

    10% {
      left: 0;
    }

    20% {
      left: -100%;
    }

    30% {
      left: -100%;
    }

    40% {
      left: -100%;
    }

    50% {
      left: -200%;
    }

    60% {
      left: -200%;
    }

    70% {
      left: -200%;
    }

    80% {
      left: -100%;
    }

    90% {
      left: -100%;
    }

    100% {
      left: 0%;
    }
  }

  .ul-photo li {
    position: relative;
    color: #ffffff;
    font-size: 1.7vw;
    line-height: 3vw;
    list-style: none;
    height: 20vw;
    width: 100%;
  }
  /*
                        .ul-photo li:nth-child(1){
                            animation-name: opacityphoto;
                            animation-duration: 10s;
                            animation-timing-function: ease;
                            animation-delay: 1s;
                            animation-iteration-count: infinite;
                        }


                        

                        @keyframes  opacityphoto{
                            from{
                                position: relative;
                                opacity: 0;

                            }
                            
                            to{
                                position: relative;
                                opacity: 1;
                            }
                        
                        }







                        .ul-photo li:nth-child(2){
                            animation-name: opacityphoto2;
                            animation-duration: 11s;
                            animation-timing-function: ease;
                            animation-delay: 8.5s;
                            animation-iteration-count: infinite;
                        }



                                        
                                        @keyframes  opacityphoto2{
                                            from{
                                                position: relative;
                                                opacity: 0;

                                            }
                                            
                                            to{
                                                position: relative;
                                                opacity: 1;
                                            }
                                        
                                        }



                        .ul-photo li:nth-child(3){
                            animation-name: opacityphoto3;
                            animation-duration: 11s;
                            animation-timing-function: ease;
                            animation-delay: 17s;
                            animation-iteration-count: infinite;
                            
                        }



                                        
                                        @keyframes  opacityphoto3{
                                            from{
                                                position: relative;
                                                opacity: 0;

                                            }
                                            
                                            to{
                                                position: relative;
                                                opacity: 1;
                                            }
                                        
                                        }

                                        */

  .ul-photo li img {
    position: relative;
    height: 30vw;
    width: 30vw;
    left: 30%;
    top: 5%;
  }

  .ul-photo li p {
    line-height: 3.5vw;
    position: relative;
    top: 1vw;
    left:0vw;
    font-size: 4vw;
    text-align: center;
    font-weight: 700;
    padding-bottom: 1vw;
    color: #434242;
  }

  .ul-photo li h5 {
    line-height: 3vw;
    position: relative;
    top: 2vw;
    width: 65%;
    text-align: center;
    left: 15vw;
    font-weight: 400;
    color: rgb(150, 150, 150);
    word-spacing: 0.2vw;
    letter-spacing: 0.15vw;
    font-size: 2.8vw;
  }

  /************************************************************************************/
  /******************************************************************************************/
  .total-foot {
    position: relative;
    display: flex;
    height: 220vw;
    width: 100%;
    background-color: rgb(56, 56, 56);
    /*border: 2px solid black;*/
    color: white;
    border-top-left-radius: 0%;
    backdrop-filter: blur(7px);
    overflow: hidden;
    margin-top: -50vw;
    top: 30vw;
  }

  .foot-ser {
    position: absolute;
    width: 85vw;
    left: 14vw;
    top: 8vw;
  }

  .foot-ser p {
    position: relative;
    font-weight: 700;
    color: white;
    text-align: center;
    font-size: 4vw;
    left: -13vw;
  }

  .foot-ser ul li {
    position: relative;
    top: 4vw;
    font-size: 3.3vw;
    line-height: 5vw;
    list-style: url(../PIC/next-blue.png);
    font-weight: lighter;
  }

  .foot-ser ul li:hover {
    position: relative;
    scale: 1.1;
    left: 4vw;
  }

  .foot-ser ul li:hover a {
    color: #93ffc5;
  }

  .foot-contact {
    position: absolute;
    left: 15vw;
    top: 120vw;
    font-size: 0.9vw;
  }

  .foot-contact p {
    position: relative;
    font-weight: 700;
    color: white;
    text-align: center;
    font-size: 4vw;
    top: 10vw;
    left: 2vw;
  }

  .foot-contact ul {
    position: relative;
    list-style-type: none;
    text-decoration: none;
    left: 2.2vw;
    top: 13vw;
  }

  .foot-contact ul li {
    line-height: 5vw;
    color: #ffffff;
    text-decoration: none;
    font-size: 3.3vw;
  }

  .foot-contact ul li:hover {
    left: 2vw;
  }

  .foot-leg {
    position: absolute;
    left: 16vw;
    top: 80vw;
    font-size: 0.9vw;
    height: ;
  }

  .foot-leg p {
    position: relative;
    left: 2.5vw;
    font-weight: 700;
    color: white;
    text-align: center;
    font-size: 4.5vw;
  }

  .foot-leg ul {
    position: relative;
    top: 4vw;
  }

  .foot-leg ul li {
    font-size: 3.3vw;
    line-height: 5vw;
    list-style: url(../PIC/next-blue.png);
    font-weight: lighter;
  }

  .foot-lien {
    position: absolute;
    left: 8vw;
    top: 170vw;
  }

  .foot-lien p {
    position: relative;
    font-weight: 700;
    color: white;
    text-align: center;
    font-size: 4vw;
    left: 15vw;
  }

  .foot-lien ul {
    list-style: none;
    display: flex;
    position: relative;
    left: 16vw;
    top: 4vw;
  }

  .foot-lien ul li {
    position: relative;
    top: -3vw;
    left: -2.5vw;
    padding-right: 0vw;
    font-size: 1.6vw;
  }

  .foot-lien ul li:hover {
    scale: 1.1;
  }

  .foot-img {
    position: absolute;
    left: 77.5vw;
    top: -1vw;
    height: 20vw;
    width: 20vw;
  }

  .div-text {
    position: relative;
    top: 100vw;
    left: 70vw;
    border: none;
  }

  .div-text li {
    font-size: 3.3vw;
    line-height: 4vw;
  }
  .span01 {
    font-size: 3.3vw;
  }

  .span02 {
    font-size: 3.3vw;
  }

  .img-fb2 {
    height: 6vw;
    width: 6vw;
  }

  .img-fb3 {
    height: 5vw;
    width: 5vw;
  }
}