body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    font-family: 'Pretendard';
    overflow-x: hidden;
  }
  nav{
   z-index: 100;
   position: fixed; 
   width: 100%;
   margin-top:0;
   background-color: rgb(11, 13, 50);
  }
  
  .nav-header{
    width: 100%;
    margin-top: 5%;
    margin-bottom: 0%;
  
  }
  .nav-header img{
    display: block;
    margin: 0 auto;  
    width: 54%;
  }
  
  .nav-menu{
    width: 100%;
  }
  .nav-item{
    display: flex;
    list-style-type: none;
    padding-left: 0;
  }
  .navmenu{
    margin: 0 auto;
    ppadding-bottom: 5%;
  } 
  .nav-menu a{
    font-size: 1.1rem;
   color: rgb(255, 255, 255);
   text-align: center;
   text-decoration:none;
  }
  .nav-menu a:link { 
  
    text-align: center;
    text-decoration:none;
    color: rgb(255, 255, 255);
  }
  .nav-menu a:visited{
  
   color: rgb(255, 255, 255);
   text-align: center;
   text-decoration:none;
  }
  .nav-menu a:active{
  
   color: rgb(255, 255, 255);
   text-align: center;
   text-decoration:none;
  }
/* / */
  .main{

    position: relative;
    padding-top: 40%;
    width: 100%;
    height: 100vh;
  }
  .main img{
    z-index: 1;
    width: 100%;
  }
  .headline {
    position: absolute;
    margin-top: 25%;
    width: 100%;
    text-align: center;
  }
  .headline img{
    width: 80%;
  }
  
.main3-1 {
    margin-top:26%;
    position: relative;
    width: 100%;
    height: 100vh;
}
.main3-1 img{
  
    z-index: 1;
    width: 100%;
}
  
.main2 {
    margin-top:-45%;
    position: relative;
    width: 100%;
    height: 100vh;
}
.main2 img{
  
    z-index: 1;
    width: 100%;
}
.main3 {
  position: relative;
  width: 100%;
}
.main3 img{
  margin-top: -1%;
  z-index: 1;
  width: 100%;
}

  
.texts{
 top: -25%;
 width: 100%;    
 position: absolute;
}
.texts p{
 margin-left: 10%;
 width: 57%;
 line-height: 2rem;
 letter-spacing: 0.05rem;
 color:white;
}
.texts3 {
  top: 0%;
  width: 100%;    
  position: absolute;
  text-align: left;
 }
 
 .texts3 p{
  margin-left: 5%;
  width: 90%;
  line-height: 2rem;
  letter-spacing: 0.05rem;
  font-weight: 500;
  color:rgb(42, 22, 6);
 }

 @media (max-width: 378px) {  

  .map{
    margin-top: 20%;
    width: 100%;    
    position: absolute;
  }
  .map img{
    margin-left:5%;
    width: 50%;
    
  }

  .main2 {
    margin-top:-28%;
    position: relative;
    width: 100%;
    height: 100vh;
}
.main2 img{
    z-index: 1;
    width: 100%;
}

.texts{
  top: -25%;
  width: 100%;    
  position: absolute;
 }
 .texts p{
  margin-left: 9%;
  width: 58%;
  line-height: 2rem;
  letter-spacing: 0.05rem;
  color:white;
 }
 .main3-1 {
  margin-top:66%;
  position: relative;
  width: 100%;
  height: 100vh;
}
.main3-1 img{

  z-index: 1;
  width: 100%;
}

}




.map{
  top:5%;
  width: 100%;    
  position: absolute;
}
.map img{
  margin-left:5%;
  width: 50%;
  
}
.map2{
  top:16%;
  width: 100%;    
  position: absolute;
}
.map2 img{
  margin-left:8%;
  width: 85%; 
}




@media (max-width: 378px) {

  .sub1 img{
   margin-top: 7%;
   width: 45%;
   margin-left:50%;
   margin-bottom: 5%;
   display: block;
  }

  .main{

    position: relative;
    padding-top: 31%;
    width: 100%;
    height: 100vh;
    margin-bottom: 10%;
  }
  .main img{
    padding-top: 6%;
    z-index: 1;
    width: 100%;
  }

  


}

.sub1{
 top: 17%;
  width: 100%;    
  position: absolute;
}
.sub1 img{
 width: 45%;
 margin-left:50%;
 margin-bottom: 5%;
 display: block;
}
.sub2{
  margin-top: 157%;
  width: 100%;    
  position: absolute;
}
.sub2 img{
  margin-left: 48%;
  width: 44%;
}
.sub3{
  margin-top: 185%;
  width: 100%;    
  position: absolute;
}
.sub3 img{
  margin-left: 10%;
  width: 50%;
}

.sub4{
  margin-top: -13%;
  width: 100%;    
  position: absolute;
}
.sub4 img{
  margin-left: 10%;
  width: 45%;
}
.sub5{
  margin-top: 40%;
  width: 100%;    
  position: absolute;
}
.sub5 img{
  margin-left: 30%;
  width: 60%;
}




.texts2{
  margin-top: 73%;
  width: 100%;    
  position: absolute;
  text-align: center;
 }
 .texts2 p{
  width: 100%;
  line-height: 2rem;
  letter-spacing: 0.05rem;
  color:white;
  font-size: 1.2rem;
 }



 .endwrap{
  margin-top: -2%;
  z-index: 3;
  background: rgb(17, 18, 37);
  width: 100%;
  display:  flex;
  justify-content : center;
}
.end h1{
  text-align: left;
  color:rgb(255, 255, 255);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  margin-bottom: 5%;
}
.end{
  width: 90%;
  text-align: left;
  margin-bottom: 6%;
  margin-top: 3%;
}
.end p{
  color: #808080;
  font-size: 0.7rem;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} 


@media (max-width: 300px){
.sub4{
  margin-top: -13%;
  width: 50%;    
  position: absolute;
}
.sub4 img{
  margin-left: 10%;
  width: 30%;
}
.sub5{
  margin-top: 40%;
  width: 60%;    
  position: absolute;
}
.sub5 img{
  margin-left: 60%;
  width: 35%;
}
}

@media (max-width: 300px){

  .main2 {
    margin-top:-60%;
    position: relative;
    width: 100%;
    height: 100vh;
  }
  .main2 img{
    z-index: 1;
    width: 100%;
  }
  .map{
    margin-top: 20%;
    width: 100%;    
    position: absolute;
  }
  .map img{
    margin-left:5%;
    width: 50%;
    
  }
    
.texts{
  top: -25%;
  width: 100%;    
  position: absolute;
 }
 .texts p{
  margin-left: 10%;
  width: 76%;
  line-height: 2rem;
  letter-spacing: 0.03rem;
  color:white;
 }

 

.sub1{
  top: 17%;
   width: 100%;    
   position: absolute;
 }
 .sub1 img{
  width: 40%;
  margin-left:50%;
  margin-bottom: 5%;
  display: block;
 }
 .sub2{
   margin-top: 157%;
   width: 100%;    
   position: absolute;
 }
 .sub2 img{
   margin-left: 48%;
   width: 40%;
 }
 .sub3{
   margin-top: 185%;
   width: 100%;    
   position: absolute;
 }
 .sub3 img{
   margin-left: 10%;
   width: 50%;
 }
 

   
.main3-1 {
  margin-top:10%;
  position: relative;
  width: 100%;
  height: 100vh;
}
.main3-1 img{

  z-index: 1;
  width: 100%;
}
.main3 {
  position: relative;
  width: 100%;
}
.main3 img{
  margin-top: -8%;
  z-index: 1;
  width: 100%;
}

.map2{
  top:16%;
  width: 100%;    
  position: absolute;
}
.map2 img{
  margin-left:8%;
  width: 80%; 
}
.texts3 {
  top: 0%;
  width: 100%;    
  position: absolute;
  text-align: left;
 }
 
 .texts3 p{
  font-size: 0.7rem;
  margin-left: 5%;
  width: 90%;
  line-height: 1rem;
  letter-spacing: 0.05rem;
  font-weight: 500;
  color:rgb(42, 22, 6);
 }



}