/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Montserrat:wght@400;500&family=Noto+Sans+KR:wght@100;300;400;500&display=swap');
@font-face { font-family: 'LeferiBaseType-BoldA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiBaseType-BoldA.woff') format('woff'); font-weight: normal; font-style: normal; }

body{ font-family: 'Noto Sans KR', sans-serif; color: #333; height: 100vh; width: 100%; text-align: center; margin:0; }
*{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6{ margin:0; }


/* background-img */
.img{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background:url('tile.jpg') no-repeat center center; background-size: cover; z-index:-100; }
.img:before{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.3); }


/* header */
header{ position: fixed; top: 0; left: 0; right: 0; height: 60px; width: 100%; border-bottom: 1px solid lightgray; background-color: #f8f8f8; z-index:1; }
.hd input[class=hd-back]{ display: none; }
.hd-tit{ font-family: 'LeferiBaseType-BoldA'; font-size: 25px; line-height: 60px; width: 1500px; height: inherit; display: inline-block; }
.hd-tit span{ color: royalblue; }


/* section : download-enter */
section{ width: 100%; }
.wrap{ margin:60px 0 80px 0; width: 1500px;  display: inline-block; }
.wrap-heading{color: #fff; font-size: 35px; margin-bottom: 13px;}
.wrap-heading span{ color: royalblue;}

.numinfo{ margin:0; font-size: 12px; font-weight: 100; color: #fff; }
.numfix:after{ content:''; height: 0.5px; background-color: rgba(255, 255, 255, 0.7);
    width: 100px; display: inline-block; vertical-align: middle; margin:10px }

.tile-info{ margin-top:20px; margin-bottom: 50px; animation:showing 0.5s linear; animation-fill-mode: both; }
.tile-info-content{ width: 1300px; background-color: rgba(255, 255, 255, 0.9);
    display: inline-block; padding:8px; border-radius: 10px;  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);  transition: 0.5s; border:7px solid transparent; }
.tile-info-content:hover{ border:7px solid royalblue; }
.tile-info-content p{ display: inline-block; font-size: 15px;  line-height: 1.5em; }


.list-enter{  width: inherit; padding:0; margin:0;  display: inline-block; animation:showing 0.5s 0.5s linear; animation-fill-mode: both; }
.list-enter li{ display: inline-block; list-style: none; border-radius: 8px; margin:3px; 
    font-size: 14px; width: 650px; padding:10px; text-align: center; 
    background-color: rgba(255, 255, 255, 0.9); cursor: pointer; transition: 0.5s; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; }
.list-enter li:hover{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); background-color: royalblue; color: #fff; } 
.list-enter li:after{ content:'\f105'; position: absolute; font-family: fontawesome; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 20px; }
.list-enter li:hover:after{ color: #fff; }


/* footer */
.footer{ position: fixed; bottom: 0; width: 100%; height: 60px; background-color: #f8f8f8; 
    border-top:1px solid lightgray; text-align-last: left; }
.footer-info{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1700px; height: inherit; }

.footer-info p{ float:left; font-size: 8px; }
.footer-info span{margin-right: 10px; font-size: 8px; color: #444; font-weight: 200; }
.footer-info span em{ display: block; font-style: normal; margin-left:40px; }
.footer-info span:last-child{ display: block; color: #999; }

.footer-info .footer-cmb{  float:right; width: 200px; font-size: 10px;  border:1px solid lightgray; height: 25px; margin-top:18px; }


/* keyframes */
@keyframes showing{
    0%{ opacity: 0; transform: translateY(-20px); }
    100%{ opacity: 1; transform: translateY(0); }
}