@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');
/* font-family: 'Montserrat', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700&display=swap');
/* font-family: 'Raleway', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
/* font-family: 'Noto Sans KR', sans-serif; */


.hover01 {
    width: 400px; height: 260px; 
    background-color: #000;
    position: relative;
    overflow: hidden;
}
.hover01-header {
    width: 100%; height: 50px;
    padding: 0 20px; box-sizing: border-box;
    background-color: #fff;
    position: absolute; left: 0; bottom: 0; z-index: 10;
    transition: all 0.3s;
    transform: translate(0,50px);
}
h1.hover01-tit {
    float: left;
    font: 20px/50px 'Montserrat', sans-serif; color: darkblue;
    transition: all 0.3s;
    transform: translate(0,50px);
}
.hover01-tit span {font-weight: 600; color: #333;}
.hover01-sns {float: right;}
.hover01-sns li {
    float: left;
    margin-left: 10px; padding-top: 14px;
    transition: all 0.3s;
    transform: translate(0,50px);
}
.hover01-sns li:nth-child(2) {transition-delay: 0.1s;}
.hover01-sns li:nth-child(3) {transition-delay: 0.2s;}
.hover01-sns li span {font-size: 20px; color: #555;}

.hover01-gnb {
    width: 24px; height: 19px;
    position: absolute; right: 20px; top: 20px; z-index: 10;
    cursor: pointer;
}
.hover01-gnb span {
    width: 24px; height: 3px;
    background-color: #fff;
    position: absolute; left: 0; 
    transition: all 0.3s;
}
.hover01-gnb span:nth-child(1) {top: 0;}
.hover01-gnb span:nth-child(2) {top: 8px;}
.hover01-gnb span:nth-child(3) {top: 8px;}
.hover01-gnb span:nth-child(4) {top: 16px;}

.hover01-txt {
    padding: 0 50px; box-sizing: border-box;
    font: 18px/1 'Raleway', sans-serif; color: #fff; text-align: center; letter-spacing: -1px;
    position: absolute; left: 0; top: 120px; z-index: 10;
    transition: all 0.3s;
    opacity: 0;
}
.hover01-txt span {font-size: 14px;}
.hover01-img {transition: all 0.3s;}
.hover01-img img {width: 100%;}

/* hover01 hover */
.hover01:hover .hover01-header {transform: translate(0,0);}
.hover01:hover .hover01-tit {transform: translate(0,0);}
.hover01:hover .hover01-txt {
    top: 90px;
    opacity: 1;   
}
.hover01:hover .hover01-sns li {transform: translate(0, 0);}
.hover01:hover .hover01-img {
    transform: scale(1.1);
    opacity: 0.6;
}

.hover01-gnb:hover span:nth-child(1) {opacity: 0;} 
.hover01-gnb:hover span:nth-child(2) {transform: rotate(45deg);}
.hover01-gnb:hover span:nth-child(3) {transform: rotate(-45deg);}
.hover01-gnb:hover span:nth-child(4) {opacity: 0;}




.hover02 {
    width: 400px; height: 260px;
    margin-top: 50px;
    color: #fff;
    background-color: #000;
    position: relative; left: 200px;
    overflow: hidden;
}
.hover02-tit {
    width: 100%;
    padding: 0 50px; box-sizing: border-box;
    font: 20px/1 'Montserrat', sans-serif; color: deeppink; text-align: center;
    position: absolute; left: 0; top: 80px; z-index: 10;
    transition: all 0.3s;
    opacity: 0;
}
.hover02-tit span {font-weight: 600; color: #fff;}
.hover02-txt {
    width: 100%;
    font: 14px/1 'Raleway', sans-serif; text-align: center;
    position: absolute; left: 0; top: 150px; z-index: 10;
    transition: all 0.3s;
    opacity: 0;
} 
.hover02-txt span {font-size: 12px;}
.hover02-line li {
    background-color: #fff;
    position: absolute; z-index: 10;
    transition: all 0.2s;
    /* transform: scale(0); */
}
.hover02-line li:nth-child(1) {
    width: 0px; height: 5px;
    left: 20px; top: 20px;
}
.hover02-line li:nth-child(2) {
    width: 5px; height: 0px;
    left: 375px; top: 20px;
    transition-delay: 0.2s;
}
.hover02-line li:nth-child(3) {
    width: 0px; height: 5px;
    left: 380px; top: 240px;
    transition-delay: 0.4s;
    transform: rotate(180deg); transform-origin: left top;
}
.hover02-line li:nth-child(4) {
    width: 5px; height: 0px;
    left: 20px; top: 240px;
    transition-delay: 0.6s;
    transform: rotate(180deg); transform-origin: left top;
}
.hover02-img {
    transition: all 0.3s;
    transform: scale(1.1);
    opacity: 0.5;
}


.hover02:hover .hover02-tit {
    top: 100px;
    opacity: 1;
}
.hover02:hover .hover02-txt {
    top: 130px;
    opacity: 1;
}
.hover02:hover li:nth-child(1) {width: 360px;}
.hover02:hover li:nth-child(2) {height: 220px;}
.hover02:hover li:nth-child(3) {width: 360px;}
.hover02:hover li:nth-child(4) {height: 220px;}
.hover02:hover .hover02-img {transform: scale(1);}