@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

a:any-link {
    text-decoration: none;


}

.hidden {
    position: absolute;
    left: -9999px;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
   overflow-x: hidden;
}




header {
    min-width: 1168px;
    width: 100%;
    height: 200px;
}

header > video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

}


#head {
    width: 100%;
    height: 200px;
    position: relative;


}


#hLeft {
    width: 376px;
    height: 200px;
    float: left;
    z-index: 999;

}

#hMiddle {
    width: 1168px;
    height: 200px;
    float: left;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

}

#hLogo {
   position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

}

#lnb {
    width: 1168px;
    margin: 0 auto;
    height: 70px;
    position: relative;
    z-index: 999;
    top: -30px;
}

#lnb > ul{
    padding-top: 30px;
    width: 100%;
    left: 50%;
    height: 70px;
    position:relative;
    transform: translateX(-50%);

}

#lnb>ul>li {
    float: left;
    text-align: center;
    position:relative;
}

#lnb>ul>li:nth-child(odd) {
  
    width: 234px;
    height: 70px;


}


#lnb>ul>li:nth-child(even) {

    width: 233px;
    height: 70px;
}

#lnb>ul>li>ul>li{
    height: 50px;
    vertical-align: top;
}

.sub1,
.sub2,
.sub3,
.sub4{
  position: absolute;
  /*Z값 설정: 기본설정은 0*/
  left: 0;
  top: 60%;
  background-color: rgba(255,255,255,0.2);
  overflow: hidden;
  transition: all 0.2s;
    border-radius: 10px;
    z-index: 1;
   

}



.sub1 a,.sub2 a,.sub3 a,.sub4 a{
 color: #fffdc1;
    text-shadow: -1px -1px 2px black,
         1px -1px 2px black, 
        -1px 1px 2px black, 
        1px 1px 2px black;


}

.sub1{
    width: 234px;
height: 100px; 
}
.sub2{
     width: 233px;
height: 300px; 
}
.sub3{
     width: 234px;
height: 150px; 
}
.sub4{
     width: 233px;
height: 100px; 
    
}




#hRight {
    width: 376px;
    height: 200px;
    float: left;
    position: absolute;
    right: 0;
        top:0;

}

#lnb >ul>li>a{
    display: block;
    vertical-align:top;
}

#lnb >ul>li>a>img{

}


.hambtn{
    width: 48px;
    height: 48px;
bottom: 0;
    left: 17%;
  cursor: pointer;
  /*버튼화*/
  position: absolute;


}



.line1,
.line2,
.line3 {
  position: absolute;
  width: 60%;
  height: 3px;
  background-color: #fff;
  transition: all 0.5s;
}

.line1 {
  top: 0;
}

.deg45 {
  /*역슬래시 모양으로*/
  transform: translateY(11px) rotate(45deg) scale(1.3, 1);
}

.line2 {
  top: 11px;
}

.hide {
  /*숨김(Y축 기준으로 회전)*/
  transform: rotateY(90deg);
}

.line3 {
  bottom: 22px;
}

.deg-45 {
  /*슬래시 모양으로*/
  transform: translateY(-11px) rotate(-45deg) scaleX(1.3);
}


#gnb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#gnb ul {
    width: 310px;
height: 40px;
background-image: url(../img/gnbul.png);

}

#gnb li {
    width: 65px;
    height: 30px;
    float: left;
    margin: 0 5px 0 5px;
    text-align: center;

}

#gnb li:first-child {
    margin-left: 0;
}

#gnb li:last-child {
    margin-right: 0;
}

#gnb li:nth-child(3) {
    width: 75px;
    height: 30px;
}

#gnb li a {
    color: aliceblue;
}


#searchimg{
position: absolute;    
}

section {

    position: relative;
    width: 100%;
    height: calc(100vh - 200px);

}

#main {
    width: 1168px;
    margin: 0 auto;
    height: 100vh;
    overflow: hidden;
    background-color: #000000;
    position: relative;
}

article {

    position: absolute;
    top: -10%;

}


section li {
    position: absolute;
    z-index: 1;
    color: aliceblue;
    width: 250px;
    height: 250px;

 
}

@keyframes shake1 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5px,0 ); }
    50% { transform: translate(0, 5px); }
    75% { transform: translate(0, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes shake2 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5px,-5px ); }
    50% { transform: translate(0, 5px); }
    75% { transform: translate(-5px, -5px); }
    100% { transform: translate(0, 0); }
}

@keyframes shake3{
    0% { transform: translate(0, 0); }
    25% { transform: translate(5px,0 ); }
    50% { transform: translate(0, 0); }
    75% { transform: translate(5px, 0); }
    100% { transform: translate(0, 0); }
}


@keyframes shake4 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(0,5px ); }
    50% { transform: translate(0, -5px); }
    75% { transform: translate(0, 5px); }
    100% { transform: translate(0, 0); }
}


@keyframes shake5 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(5px,0 ); }
    50% { transform: translate(-5px, -5px); }
    75% { transform: translate(5px, 5px); }
    100% { transform: translate(0, 0); }
}






section li:first-child {
    position: absolute;
    top: 5%;
    left: 20%;
       animation: shake1 3s infinite;

}

section li:first-child:hover {
   background-image: url(../img/secli1c.png),url(../img/hoversecli1.png);
    background-position: center;

}



section li:nth-child(2) {
    position: absolute;
    top: 40%;
    left: 20%;
    animation: shake2 3s infinite;

}
section li:nth-child(2):hover {
   background-image: url(../img/secli2c.png),url(../img/hoversecli2.png);

}

section li:nth-child(3) {
    position: absolute;
    top: 60%;
    left: 45%;
    animation: shake3 3s infinite;


}

section li:nth-child(3):hover {
   background-image: url(../img/secli3c.png),url(../img/hoversecli3.png);

}

section li:nth-child(4) {
    position: absolute;
    top: 40%;
    right: 20%;
    animation: shake4 3s infinite;
}

section li:nth-child(4):hover {
   background-image: url(../img/secli4c.png),url(../img/hoversecli4.png);

}
section li:last-child {
    position: absolute;
    top: 5%;
    right: 20%;
    animation: shake5 3s infinite;

}

section li:nth-child(5):hover {
   background-image: url(../img/secli5c.png),url(../img/hoversecli5.png);

}