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

img{
  width: 100%;
}

.bk-slider {
  position: relative;
  width: 100vw;
  height: auto;
  padding: 50px 0 100px;
}

.swiper {
  width: 100%;
  overflow: visible;
}

.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  background: white;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.slide_bg1{
  position: relative;
  background: url(../images/npc1bg.png) no-repeat;
  background-size: 100% auto;
  height: 26.9vw;  
}

.slide_bg2{
  position: relative;
  background: url(../images/npc2bg.png) no-repeat;
  background-size: 100% auto;
  height: 26.9vw;  
}

.slide_bg3{
  position: relative;
  background: url(../images/npc3bg.png) no-repeat;
  background-size: 100% auto;
  height: 26.9vw;  
}

.swiper-slide.swiper-slide-active {
  transform: scale(1.4);
  z-index: 2;
  opacity: 1;
}

/* ARROWS */
.swiper-button-prev,
.swiper-button-next {
  color: #ffd400;
}

.swiper-button-prev{
  margin-left: 15vw;
}
.swiper-button-next{
  margin-right: 15vw;
}

.slide_box{
  width: 40vw;
   height: 37vh;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}

.spoken{
  width: 3vw;
  /* height: 34.7vh; */
  margin-left: 1vw;
  margin-top: -5vh;
}


.profile{
  width: 18vw; 
  display: flex;
  flex-direction:column;
  align-items: start;
}

.namebox{
  width: 10.5vw;
  display: flex;
  flex-direction:column;
  align-items: start;
}

.name{
  width: 10.5vw;
  padding-left: 0.3vw;
  padding-bottom: 1vh;
}

.cv{
  width: 9vw;
  padding-bottom: 1vh;
}

.cv1{}

.introduction{
  width: 18vw;
  padding-bottom: 0.5vh;
}

.skill{
  display: flex;
  flex-direction: row;
  align-items:center;
}

.skillicon{
  width: 5vw;
}

.skilltext{
  width: 6vw;
  margin-top: -0.8vh;
  padding-left: 0.3vw;
}

@media (max-width: 768px) {

  .swiper {
    width: 100%;
    height: 59vh;
    /* overflow: visible; */
  }
  .slide_bg1{
    position: relative;
    background: url(../images/npc1bgm.png) no-repeat;
    background-size: 100% auto;
    height: 44vh !important;  
  }
  
  .slide_bg2{
    position: relative;
    background: url(../images/npc2bgm.png) no-repeat;
    background-size: 100% auto;
    height: 44vh !important;  
  }
  
  .slide_bg3{
    position: relative;
    background: url(../images/npc3bgm.png) no-repeat;
    background-size: 100% auto;
    height: 44vh !important;  
  }
     
  .swiper-button-prev{
    margin-left: 1vw;
  }
  .swiper-button-next{
    margin-right: 1vw;
  }
  
  .slide_box{
    height: 32vh;
    display: flex;
   flex-direction: column;
    width: 56vw;
  }
  
  .spoken{
    width: 7.5vw;
    margin-left: -44vw;
  }
  
  
  .profile{
    width: 52vw;   
    margin-top: 24vw; 
  }

  .namebox {
    width: 52vw;
    display: flex;
    flex-direction: row;
    align-items: normal;
  }

  .name{
    width: 30vw;
  }
  
  .cv{
    width: 22vw;
    /* height: 2.5vh; */
  }
  .cv img{
    
    width: 100%;
  }

  .cv1{
    margin-left: -4.5vw;
  }

  .cv2{
    margin-left: -11vw;
  }
  .cv3{
    margin-left: 2vw;
  }
  
  .introduction{
    width: 52vw;
  }
  
  .skill{
    position: absolute;
    top: 48vw;
    left: 43vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
  }
  
  .skillicon{
    width: 16vw;
  }
  
  .skilltext{
    width: 17vw;
    margin-top: 0.2vh;
  }

  .skilltext-left{
    margin-left: 9.8vw;
  }

}