@charset "utf-8";
@font-face {
    font-family: "Jalnan";
    src: url(../font/Jalnan.ttf) format('truetype');
}


* {
    margin: 0 auto;
    padding: 0 auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #222328;
}

.behind {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    left: -1px;
    top: 0;
}

.hidden {
    visibility: hidden;
    width: 0;
    height: 0;
    font: 0/0 '';
    overflow: hidden;
}

header {
    width: 100%;
    height: 100vh;
}

header > video {
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

header>div {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
}

h1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font: bold 5em/1.2 'Jalnan';
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.copy {
    width: 443px;
    color: #fff;
    font: 600 1.2em/1 '나눔고딕';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 320px;
    transition: all 0.3s ease-in-out;
}

article {
    max-width: 1024px;
    overflow: hidden;
}

.contents>ul {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 20px;
    padding: 0 10px;
    overflow: hidden;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
}

.contents>ul>li {
    width: 140px;
    height: 140px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}

.contents>ul>li:hover .hover1 {
    position: absolute;
    z-index: 1;
}
.contents>ul>li:hover .hover2 {
    position: absolute;
    z-index: 1;
}
.contents>ul>li:hover .hover3 {
    position: absolute;
    z-index: 1;
}
.contents>ul>li:hover .hover4 {
    position: absolute;
    z-index: 1;
}
.contents>ul>li:hover .hover5 {
    position: absolute;
    z-index: 1;
}
.contents>ul>li:hover .hover6 {
    position: absolute;
    z-index: 1;
}


.contents img {
    width: 110px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.contents>ul>li:nth-child(1) img {
    width: 60px;
}

.contents>ul>li:nth-child(5) img {
    width: 90px;
}



/*hover1*/
.hover1 {
    width: 100px;
    height: 140px;
    background-color: floralwhite;
    border-radius: 50%;
    position: absolute;
    opacity: 0.9;
    z-index: -1;
}


.hover1>li {
    text-align: center;
    font: 600 1em/1 '나눔고딕';
}

.hover1>li>a:hover {
    color: cornflowerblue;
}

.hover1>li:nth-child(1) {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.hover1>li:nth-child(2) {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
}

/*hover2*/
.hover2 {
    width: 100px;
    height: 140px;
    background-color: floralwhite;
    border-radius: 50%;
    position: absolute;
    opacity: 0.9;
    z-index: -1;
}


.hover2>li {
    text-align: center;
    font: 600 1em/1 '나눔고딕';
}

.hover2>li>a:hover {
    color: cornflowerblue;
}

.hover2>li:nth-child(1) {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.hover2>li:nth-child(2) {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
}

/*hover3*/
.hover3 {
    width: 100px;
    height: 140px;
    background-color: floralwhite;
    border-radius: 50%;
    position: absolute;
    opacity: 0.9;
    z-index: -1;
}


.hover3>li {
    text-align: center;
    font: 600 1em/1 '나눔고딕';
}

.hover3>li>a:hover {
    color: cornflowerblue;
}

.hover3>li:nth-child(1) {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.hover3>li:nth-child(2) {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
}

/*hover4*/
.hover4 {
    width: 100px;
    height: 140px;
    background-color: floralwhite;
    border-radius: 50%;
    position: absolute;
    opacity: 0.9;
    z-index: -1;
}


.hover4>li {
    text-align: center;
    font: 600 1em/1 '나눔고딕';
}

.hover4>li>a:hover {
    color: cornflowerblue;
}

.hover4>li:nth-child(1) {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.hover4>li:nth-child(2) {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
}

/*hover5*/
.hover5 {
    width: 100px;
    height: 140px;
    background-color: floralwhite;
    border-radius: 50%;
    position: absolute;
    opacity: 0.9;
    z-index: -1;
}


.hover5>li {
    text-align: center;
    font: 600 1em/1 '나눔고딕';
}

.hover5>li>a:hover {
    color: cornflowerblue;
}

.hover5>li:nth-child(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/*hover6*/
.hover6 {
    width: 100px;
    height: 140px;
    background-color: floralwhite;
    border-radius: 50%;
    position: absolute;
    opacity: 0.9;
    z-index: -1;
}


.hover6>li {
    text-align: center;
    font: 600 1em/1 '나눔고딕';
}

.hover6>li>a:hover {
    color: cornflowerblue;
}

.hover6>li:nth-child(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}






/*******태블릿*******/
@media all and (min-width:768px) {    
    h1 {
        left: 20%;
        transition: all 0.3s ease-in-out;
    }
    
    .copy {
        width: 170px;
        font: 600 1.2em/1.6 '나눔고딕';
        position: absolute;
        left: 16%;
        transition: all 0.3s ease-in-out;
    }
    
    .contents>ul {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 30px;
    padding: 0;
    position: absolute;
    top: 20%;
    left: 65%;
    transition: all 0.3s ease-in-out;
}
}


/*********pc*********/
@media all and (min-width:1024px) {
    .copy {
        width: 170px;
        font: 600 1.2em/1.6 '나눔고딕';
        position: absolute;
        left: 18%;
        transition: all 0.3s ease-in-out;
    }
    
    .contents>ul {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 50px;
    padding: 0;
        bottom: 35%;
    left: 60%;
    transition: all 0.3s ease-in-out;
}
    
    .contents>ul>li {
    width: 170px;
    height: 170px;
}
    
        /*hover1*/
    .hover1 {
    width: 130px;
    height: 170px;
}
    .hover1>li {
    font: bold 1em/1 '나눔고딕';
}

.hover1>li:nth-child(1) {
    top: 60px;
}

.hover1>li:nth-child(2) {
    top: 100px;
}
    
    
    /*hover2*/
    .hover2 {
    width: 130px;
    height: 170px;
}
    .hover2>li {
    font: bold 1em/1 '나눔고딕';
}

.hover2>li:nth-child(1) {
    top: 60px;
}

.hover2>li:nth-child(2) {
    top: 100px;
}
    
        /*hover3*/
    .hover3 {
    width: 130px;
    height: 170px;
}
    .hover3>li {
    font: bold 1em/1 '나눔고딕';
}

.hover3>li:nth-child(1) {
    top: 60px;
}

.hover3>li:nth-child(2) {
    top: 100px;
}
    
            /*hover4*/
    .hover4 {
    width: 130px;
    height: 170px;
}
    .hover4>li {
    font: bold 1em/1 '나눔고딕';
}

.hover4>li:nth-child(1) {
    top: 60px;
}

.hover4>li:nth-child(2) {
    top: 100px;
}
    
                /*hover5*/
    .hover5 {
    width: 130px;
    height: 170px;
}
    .hover5>li {
    font: bold 1em/1 '나눔고딕';
}

.hover5>li:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    
                /*hover6*/
    .hover6 {
    width: 130px;
    height: 170px;
}
    .hover6>li {
    font: bold 1em/1 '나눔고딕';
}

.hover6>li:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    
}