@charset "utf-8";
@font-face {
    font-family: 'H2MKPB'; /* 내가 지어준 폰트 이름 */
    src: url('../fonts/H2MKPB.TTF.woff') format('woff');
     /* 경로는 폰트 파일 위치에 맞게 조절 */    
}

* { margin:0;  padding:0; box-sizing: border-box;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#fff;}
img { border:0;}

.wrap {	position:fixed; width:100%; height:100%; 
    /* ai물어보기 */
    min-width:1024px; min-height:768px; 
    
}


.logo{position: fixed; z-index: 999; width: 100%; height: 12%; text-align:center; 
 background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
.logo a{position: relative; width: 100%; top: 10px;    
}
.logo a img{position: absolute;top: 0;left: -125px; width: 250px; height: auto;
    animation: loggg 2.5s ease-in 0s forwards;
}
@keyframes loggg {
    0%{
        transform: scale(6);
        margin-top: 340px;
    }   
   
    80%{
        transform: scale(6);
        margin-top: 340px;
     }
    100%{
        transform: scale(1);
        margin-top: 0px;
     }
   
}
/* 인트로 애니    ---------------------------------------------------------------- */

.intro{width: 100%; height: 100%; 
    position: relative;overflow: hidden; 
    animation: openhide 1s ease-in 2.5s forwards;
}
.intro p{position: absolute; top: 50%;left: 0; width: 100%;
    text-align: center; font-size: 30px;
    animation: openp 2.5s ease-in 0s forwards;
}
.intro img{position: absolute;width: 100%; height: 100%;}
#ba1{top: 0%;left: 0; width: 100%; height: 100%;
     animation: open 2.5s ease-in 0s forwards;}
#ba2{bottom: 0%;left: 0; width: 100%; height: 100%;
    animation: open1 2.5s ease-in 0s forwards;
}
@keyframes open {
    0%{transform: translateY(-100vh);}   
    50%{ transform: translateY(0);
     }
    100%{ transform: translateY(0);
     }  
}
@keyframes open1 {
    0%{transform: translateY(100vh);}   
    50%{ transform: translateY(0);
     }
    100%{transform: translateY(0);
     }  
}
@keyframes openp {   
    0%{opacity: 0; 
     }
    80%{opacity: 0; 
     }
    100%{opacity: 1; 
     }   
}
@keyframes openhide {   
    0%{opacity: 1; 
     }
    95%{opacity: 0; height: 100%; 
     }
    100%{opacity: 0; height: 0%;
     }   
}

/* 섹션    ---------------------------------------------------------------- */
.tx1{
    width: 100%; height: 120px;   
    position: absolute; top: 50%; left: 0%;
    background-color: rgba(0,0,0,0.7); color: #ddd;
    text-align: center;   
    white-space: nowrap;
}
.tx1 h2{margin-top: 20px; color: #ddd;font-family: 'H2MKPB', sans-serif;}
.tx1 h3{margin-top: 16px; color: #eee;font-weight: normal;}
.tx2{
    width: 2px; height: 45%;
    position: absolute; bottom: 20%; left: 0%;
    background-color: rgba(0,0,0,0.8);   
    overflow: hidden;
    transition: all 0.5s ease;
    
}



.tx3 {
    text-align: center;
    position: absolute; bottom: 5%; left: 0%;
    width: 100%; height: 100px;
     display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: flex-start;    
    gap: 60px 50px; 
     /* 60px : 위아래 줄 간격.
       20px : 좌우 간격.
    */
    /* border-bottom:1px solid red ; */
}
.tx3 a{margin-bottom: 10px; text-align: center;
    align-items: center;
    font-size: 20px; color: transparent;
    line-height: 25px;
    opacity: 0.5;
    transition: 0.3s; cursor: pointer;
}
.tx3 a img{width: 70px; height: auto; 
}
.tx3 a:hover{opacity: 1; filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.8));
    color: #fff;
}

.blackimg{
   position: absolute;top: 0;left: 0;
   opacity: 1;
}
.contents{display: flex; width: 100%; height: 100%;}
article{    
   flex: 1;
     height: 100%; 
    overflow: hidden;
    position: relative; 
    float: left;   
    transition: 0.4s ease-in-out;
}