:root {
    --accent: rgb(232, 232, 30); 
    --white:whitesmoke;
    --black: rgb(0, 0, 0);
    --blue: dodgerblue;
    --red: #ff0000;
    --darkpink:#d64b80;
    --darkgreen: #00bbbb;
    --lightgreen: #7aa605;
    --grey-dark-color: #cac2c2;
    --grey-light-color: #ede9e5;  
    --background-color:  rgb(0, 0, 0); 
    --gold:gold;
  
    
 }

*{
   margin: 0; 
   padding: 0;
   box-sizing: border-box;
}

a{
    text-decoration: none;
    color: var(--black);
}
html{
   font-size: 1rem;
   scroll-behavior: smooth; 
   scroll-snap-type: y mandatory;
   scroll-padding-top: 70px;

}
body{
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Noto Sans KR', sans-serif;

    /* background-image: linear-gradient(rgba(0,0,0, 0.3),rgba(0,0,0, 0.3)),url(images/lib9.jpg); */
   
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
display: none;

}

/* 스크롤바 */

li{
    list-style: none;
}
.darkpink{ color: var(--darkpink);}
.darkgreen{ color: var(--darkgreen);}
.gold{color: gold;}


/* sliding  외 호버용 */
.h1{
    width: auto; 
    position: absolute;
     /*  위치지정 */
    top: 27%; 
    /* hover 높이랑 통일하라  */
    left: 50%;
    font-size: 1.6em;
    transform: translate(-50%, -50%);
    color: var(--white); 
    /* border: 1px solid blue;   */
}
/* sliding  외 호버용 */
.h1:hover{
    position: absolute; 
    /*  위치지정 */
    top: 27%;
    /* hover 높이랑 통일하라  */
    left: 50%;
    font-size: 1.6em;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;   
    color: var(--blue);
       
}
/* sliding 용 외 */
.contents-front{
    display:block;
    text-align: left;
    width: 90%;
    height: 100vh;
    /* padding-left: 30%; */
    margin: 0px auto;     
    outline: 0px solid gold;
}
/* sliding 용 외 */
.contents-front p{
    display: block;
    position: relative;
    top:15em;
    color: var(--white);
}
/* sliding 용 외끝 */



.main-front{
    display:block;
    text-align: left;
    /* white-space: nowrap; */
    width: 87%;
    height: 100vh;
    /* padding-left: 30%; */
    margin: 90px auto;     
    outline: 1px solid gold;
   
}
.h3{ 

    margin-left: 20%;
    color: var(--blue);
    font-size: 1.6em;
    font-weight: 700;
}
  .main-front p{
    display:block;  
    font-size: 1em;
    text-align: left;
    width: 60%;     /* 윗 폭의 비율 % */  
    margin-left: 20%;
    color: var(--white);
    border: 0px solid  #ff0000;
   
  }
  
  .main-front button {
     src: url();
     /* background: none; */
     border: 1px solid black;
     width: 10rem;     /* button 폭 */  
     margin-left: 20%;
     padding: 10px 20px;
     border-radius: 15px;
     margin-top: 20px;
     outline: none;
     cursor: pointer;
     transition: all 0.4s;
 
  }
  .main-front .btn1:hover {
    background-color: var(--lightgreen);
    
 }
 .main-front .btn2:hover {
   background-color:var(--lightgreen);
   
}
 .main-front .btn3:hover {
    background-color: var(--lightgreen);
    
 }
 .main-front .btn4:hover {
   background-color:var(--lightgreen);
   
}
.btn1{
    src: url();
    /* background: none; */
    border: 1px solid black;
 
    padding: 1px 1px;
    border-radius: 10px;
    margin-top: 10px;
    outline: none;
    cursor: pointer;
    transition: all 0.4s;
    background:none;
 }
 .btn2{
   src: url();
   /* background: none; */
   border: 1px solid black;
 
   padding: 1px 1px;
   border-radius: 7px;
   margin-top: 10px;
   outline: none;
   cursor: pointer;
   transition: all 0.4s;
   background:none;
 }

 .btn3{
    src: url();
    /* background: none; */
    border: 1px solid black;
 
    padding: 1px 1px;
    border-radius: 10px;
    margin-top: 10px;
    outline: none;
    cursor: pointer;
    transition: all 0.4s;
    background-color: var(--darkgreen);
 }
 .btn4{
   src: url();
   /* background: none; */
   border: 1px solid black;
 
   padding: 1px 1px;
   border-radius: 7px;
   margin-top: 10px;
   outline: none;
   cursor: pointer;
   transition: all 0.4s;
   background-color: var(--darkpink);
 }



@media(max-width:800px){
    body{
        font-size: 0.9em;
    }
   
    
    .h3{ 
        position: relative;        
        margin-left: 20%;
        color: var(--blue);
        font-size: 1.3em;
        font-weight: 700;
    }
      /* .main-front p{
        display:block;
        text-align: left;
        width: 94%;     
        margin-left: 3%;
        color: var(--white);
        border: 0px solid  #ff0000;
               
      } */
      .main-front button {
        src: url();
        /* background: none; */
        border: 1px solid black;
        width: 10rem;     /* button 폭 */  
        margin-left: 4%;
        padding: 5px 5px;
        border-radius: 20px;
        /* margin-top: 30px; */
        outline: none;
        cursor: pointer;
        transition: all 0.4s;
    
     }   
  
   
    
    .contents-front{
        display:block;
        text-align: left;
        width: 100%;
        height: 100vh;
        margin: 20px auto;     
        outline: 0px solid gold;
    }
    .contents-front p{
        display: block;
        position: relative;
        top:15em;
        color: var(--white);
    }
  
    .hamburger{
        display: block;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    } 
    .hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu{
        
        position: fixed;
        left: -100%;
        top: 65px;
        gap: 0;
        flex-direction: column;
        background-color: rgb(0, 0, 0, 0.9); 
        /* background-color:var(--background-color); */
        width: 100%;
        text-align: center;
        transition: .7s;
        border-radius: 5px;
        
    }
    
    
    .nav-link{
        width: 100%;
        transition: 0.3s ease;
        padding: 10px 100px;
        font-size: 1.1em;
        font-weight: 600;
        /* border: 1px solid gold; */
        
    }
    
    .nav-item{
        width:100%;
        padding:10px;
        margin: 3px 0;         
        /* border: 1px solid red;              */
    }
    .nav-item:hover{
        /* background-color: var(--accent); */
        border-radius: 7px;
    }
    
    .nav-menu.active{
        left: 0;
    }

}