@charset "utf_8";

* {
    margin: 0;
    padding: 0;
    font-style: normal;
    text-decoration: none;
    color: black;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
}

.behind {
    width: 1px;
    height: 1px;
    position: absolute;
    left: 1px;
    overflow: hidden;
    z-index: -1000;
}

li {
    float: left;
    list-style: none;
}

body {
    width: calc(100% - 40px);
    margin: 0 auto;
    height: 100vh;
    background-color: #f4bc25;
}

.wrap {
/*    max-width: calc(100% - 40px);*/
    max-width: 1500px;
    height: 100vh;
    margin: 0 auto;
    background-color: #f4bc25;
    
    position: relative;
}






.box_1 {
    position: absolute;
    top: 10%;
    left: 10%;
}

.box_1 p {
    position: absolute;
    top: 3%;
    left: 27%;
    
    font: bold 31px/31px '';
}

span {
    font-size: 21px;
}

.img_1 {
    width: 500px;
    vertical-align: top;
    
    
}




.box_2 {
    position: absolute;
    top: 10%;
    right: 10%;
}

.box_2 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font: bold 18px/30px '';
}

.img_2 {
    width: 300px;
    vertical-align: top;
}




.box_3 {
    position: absolute;
    top: 12.5%;
    left: 38.3%;
    transform: scale(-)
/*
    bottom: 0px;
    left: 20%;
*/
    
}

.img_3 {
    width: 80px;
    vertical-align: top;
    
    position: absolute;
    left: 0%;
    top: -28%;
    
    animation: img_3 5s infinite ease-in-out;
}

@keyframes img_3 {
    0% {
        transform: rotate(0deg);
    }
    
    50% {
        transform: rotate(30deg);
    }
    
    0% {
        transform: rotate(0deg);
    }
}

.img_4 {
    width: 40px;
    vertical-align: top;
}




.box_cat {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%);
}

.cat {
    width: 300px;
    vertical-align: top;
}

.white {
    width: 50px;
    height: 52px;
    background-color: #fff;
    border-radius: 50px;
    position: absolute;
    
    animation: white 6s infinite ease-in-out;
    
    
}

@keyframes white {
    0% {
        transform: scaleY(100%);
    }
    

    80% {
        transform: scaleY(100%);
    }
    
    82% {
        transform: scaleY(0);
    }
    
    84% {
        transform: scaleY(100%);
    }
    
    0% {
        transform: scaleY(100%);
    }
}

.white_1 {
    top: 38%;
    left: 12%;
}

.white_2 {    
    top: 38%;
    left: 44%;
}




.black {
    width: 30px;
    height: 38px;
    background-color: #171717;
    border-radius: 50px;
    position: absolute;     
}

.black_1 {
    top: 42%;
    left: 16%;
    
    animation: black_1 6s infinite ease-in-out;
}

@keyframes black_1 {
    0% {
        top: 42%;
        left: 16%;
    }
    
    8% {
        top: 42%;
        left: 13.5%;
    }
    
    28% {
        top: 42%;
        left: 13.5%;
    }
    
    35% {
        top: 42%;
        left: 19%;
        
    }
    
    
    81% {
        top: 38%;
        left: 19%;
    }
    
    82% {
        top: 42%;
        left: 16%;
    }
    
    0% {
        
    }
}

.black_2 {
    top: 42%;
    left: 47%;
    
    animation: black_2 6s infinite ease-in-out;
}

@keyframes black_2 {
    0% {
        top: 42%;
        left: 47%;
    }
    
    8% {
        top: 42%;
        left: 45.5%;
    }
    
    28% {
        top: 42%;
        left: 45.5%;
    }
    
    35% {
        top: 42%;
        left: 52%;
        
    }
    
    81% {
        top: 38%;
        left: 51%;
    }
    
    82% {
        top: 42%;
        left: 47%;
    }
    
    0% {
        
    }
}





.main {
    max-width: 1000px;
    height: 300px;
    margin: 0 auto;
    
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    position: relative;
    top: 50%;
    transform: translateY(-45%);
}

.main li {
    width: 240px;
    height: 300px;
    background-color: #171717;
    position: relative;
    border-radius: 10px;
}

.main a {
    display: block;
    width: 100%;
    height: 300px;
}

.main p {
    width: 100%;
    
    font: 17px/27px '';
    text-align: center;
    
    position: absolute;
    top: 60%;
    
}
.main .line {
    width: 30%;
    height: 2px;

    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.main img {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%);
}

.main li:nth-child(1) img {
    
}

.main li:nth-child(1) p {
    color: #ff004c;
}

.main li:nth-child(1) .line {
    background-color: #ff004c;
}

.main li:nth-child(2) img {
    top: 13%;
}

.main li:nth-child(2) p {
    color: #ffffff;
}

.main li:nth-child(2) .line {
    background-color: #ffffff;
}

.main li:nth-child(3) img {
    transform: translate(-50%) scale(0.8);
    top: 16%;
}

.main li:nth-child(3) p {
    color: #635aff;
}

.main li:nth-child(3) .line {
    background-color: #635aff;
}

.main li:nth-child(4) h5 {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    
    color: white;
    font: 40px/0 '';
    letter-spacing: 0.05em;
}

.main li:nth-child(4) p {
    color: #ffffff;
}

.main li:nth-child(4) .line {
    background-color: #ffffff;
}









@media all and (max-width:1080px) {
    .box_1 {
        left: 50%;
        top: 3%;
        transform: translateX(-50%);
    }
    
    .box_2 {
    position: absolute;
    top: 18%;
    right: 50%;
        transform: translateX(85%);
}

.box_2 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font: bold 18px/30px '';
}
    
    .main {
        max-width: 490px;
    }
    
    .main li{
        max-width: 49%;
        height: 200px;
        top: -8%;
        margin-bottom: 10px;
    }
    
    .box_cat {
        bottom: 0px;
    }


}