@charset "utf-8";


/*전체설정*/

* {
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    list-style: none;

}

@font-face {
    font-family: 'OTEnjoystoriesBA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SlowSlow';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_10@1.0/SlowSlow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 모바일 수평 스크롤 금지+메타써도안될때 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

#wrap {
    width: 100%;
    height: 100vh;
    background-image: url(../img/backimg.jpg);
    background-size: cover;
}

#header {
    height: 45vh;
    position: relative;

}



.pr {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);


}

.enter {
    display: none;
}

span {
    font: bold 10em/1.2 'OTEnjoystoriesBA';
    color: #8ed3ff;
    /*#8ed3ff #ffb66d*/
    text-shadow: 0px 5px 10px #fff;

}

.pr > li:nth-child(2) {
    font: bold 2em/1.1 'OTEnjoystoriesBA';
    color: #484848;
    /*    animation: name 1s 1;*/

}

/*서서히 나타나게하고싶당
@keyframes name {
  0% {
    opacity: 0.0;
    left: 0;
    color: black;
  }

  15% {
    left: 0;
    color: #ffffff;
  }

  100% {
    left: 80px;
    color: #3db4ff;
  }
}
*/
/**************section******************/



section {
    height: 55vh;
    overflow: hidden;
    background: url(../img/colud.png) center;
    background-size: cover;
    




}

/**********************************/
article {
    max-width: 1024px;

    overflow: hidden;
    margin: 20px auto 50px;
    padding: 0 10px;



}



#pp {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    grid-gap: 20px;



}

#pp > li {
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 4;


}

#pp > li > a {
    display: block;
    margin: 0 auto;
}


.pp1 {
    background: url(../img/icon1.PNG) center;
    background-size: cover;
    width: 60%;

}

.pp2 {
    background: url(../img/icon2.PNG) center;
    background-size: cover;
    width: 60%;

}

.pp3 {
    background: url(../img/icon3.PNG) center no-repeat;
    background-size: contain;

    width: 60%;

}

#pp > li > a::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.text {
    width: 100%;
    overflow: hidden;
    margin: 10px 0 20px 0;
    position: relative;
    color: black;
    font: 2em/1.2 'SlowSlow';


}

.text a {
    color: black;
}

.text > li > a:hover {
    color: #3db4ff;
    font: 1em/1.2 'SlowSlow';

}


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

/*********모바일***********/
@media all and (max-width:767px) {
     #header {
        
        height: 30vh;
    }
    section {
        height: 70vh;
        overflow: inherit;
    }
    span {
        font: bold 8em/1.2 'OTEnjoystoriesBA';
     
    
    }
    .pr > li:nth-child(2) {
        display: none;

        
    }
    #pp {

        grid-template-columns: 1fr 1fr;
        transform: translateY(10px);

    }
 

    
}