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;
}


/* 순례스토리 */


.cover {
  padding-top: 36%;
}

.topimg--intro{
  position: fixed;
  width: 100%;
  padding-top: 59%;
  z-index: -10;
  background-position: 82%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media all and (max-width: 500px) {
  .topimg--intro {
    padding-top: 170%;
  }
}
@media all and (min-width: 1300px) {
  .topimg--intro {
    padding-top: 45%;
  }
}

.topimg--intro {
  background-image: url('../img/jjy.jpg');
}
@media all and (max-width: 500px) {
  .topimg--intro {
    background-image: url('../img/jjy.jpg');
  }
}

.headercover {
  width: 100%;
  padding-top: 30%;
}
@media all and (max-width: 500px) {
  .headercover {
    padding-top: 110%;
  }
}
@media all and (min-width: 1300px) {
  .headercover {
    padding-top: 45%;
  }
}

.content {
  background-image: url('../extraimg/paperbackground.png');
  background-repeat: no-repeat;
  position: relative;
  z-index: 10;
  width: 100%;
  height: auto;
}

.content{
    width: 100%;
    margin-top: 16%;
    padding-top: 30%;
    margin-bottom: 0%;
}
 h1{
    font-weight: 800;
    text-align: center;
    margin-bottom: 0%;
    font-size: 1.5rem;
    
}
h2{
    font-size: 2rem;
    font-family:serif;
    font-weight:normal;

    text-align: center;
    margin-bottom: -2%;
    color: rgb(167,146,128);
}

.content2{
    margin: 0;
    font-size: 1.2rem;
    background-color: rgb(255, 255, 255);
    padding-bottom: 13%;
}
.content2 p{
    padding-top: 10%;
    padding-bottom: 10%;
    margin:-1% 7%;
}


  
.content3{
    
    position: relative;
    width: 100%;
    margin-top: -2%;
    background-color: rgb(255, 255, 255);
   
}
.content3 img{
    width: 100%;
}
.content3 h2{
    margin-top: 0;
}
.maptext{
    width: 100%;
    position: absolute;
    margin: 0 auto;
    display: block;
    padding-top: 10%;
}


/* 지도 */
.content4{
  margin-top: -2%;
  background-color: rgb(255, 255, 255);
  width: 100%;
  padding-top: 5%;
}
.pic1 img{
  z-index: 1;
  width: 100%;
}
.pic1{
  z-index: 1;
  width: 100%;
  position: relative;
}
.text4{
  z-index: 99;
  position: absolute;
  margin-top: 71%;
  padding-left: 9%;
  padding-right: 7%;
}
.text4 h3{
  font-size: 1.2rem;
  margin-bottom: 4%;
}
.text4 p{
  margin-left: 6%;
  margin-top: -2%;
}
.gap{
  width: 100%;
  background-color: rgb(255, 255, 255);
  padding-top: 20%;
  margin-top: -2%;
  margin-bottom: -1%;
}

/* 하단 마운틴리더 설명 */
.endwrap{
  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: 4%;
}
.end p{
  color: #808080;
  font-size: 0.7rem;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} 

.s1_arrow{
  display:block; 
  position:absolute; 
  margin-top:156%;
  left:49%;
  animation:arrow_down 1.5s infinite;
}
.scroll-arrow {
  width:8px; 
  height:8px; 
  border-right: 3px solid white; 
  border-bottom: 3px solid white;
transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-o-transform: rotate(45deg);  
-ms-transform: rotate(45deg);
animation: arrow-wave 1s infinite; 
animation-direction: alternate;}

.scroll-arrow:nth-child(1) {animation-delay: 0.1s;}
.scroll-arrow:nth-child(2) {margin-top:6px; animation-delay: 0.2s;}
.scroll-arrow:nth-child(3) {margin-top:6px; animation-delay: 0.3s;}
@keyframes arrow-wave {
0% {opacity: 0;}
50% {opacity: .5;}
100% {opacity: 1;}
}
@keyframes arrow_down{
0%{top:28px;}
50%{top:40px;}
100%{top:28px;}
}