@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;700&family=Roboto:wght@100;400;700&display=swap');

body{
/* font-family: 'Noto Sans KR', sans-serif; */
font-family: 'Roboto', sans-serif;
width: 100%;
margin: 0 auto;
font-size: 1rem;
color: #222;
position: relative;
height: 100%;
}

*{
margin: 0;
padding: 0;
}

li{
list-style: none;
}

a:link , a:visited{
text-decoration: none;
color: inherit;
}

img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

.clearfix::after{
content: '';
clear: both;
display: block;
line-height: 0;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1.12rem; }
h5 { font-size: .83rem; }
h6 { font-size: .75rem; }



/* 메인 인트로 */
.main{
    width: 100%;
    height: 100%;
}

.main-img{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    top: 0;
}
.main-bg{
width: 100%;
height: 100%;
object-fit: cover;
}
.main-btn{
    width: 313px;
    height: 73px;
    position: absolute;
    bottom: 60px;
    right: -80px;
    cursor: pointer;
    transition: .4s;
}

.main-btn:hover{
    position: absolute;
    right: 0;
}


.emoji{
    width: 59px;
    height: 59px;
    position: absolute;
    top: 320px;
    left: 516px;
}
.emoji>img{
    animation: swing 2.5s infinite;
}

@keyframes swing {
    0%{
        transform: rotate(0deg);
    }
    20%{
        transform: rotate(13deg);
    }
    24%{
        transform: rotate(-13deg);
    }
    28%{
        transform: rotate(13deg);
    }
    32%{
        transform: rotate(-13deg);
    }
    36%{
        transform: rotate(0deg);
    }
}

.ob1{
    width: 280px;
    height: 280px;
    position: absolute;
    top: 175px;
    left: 1160px;
    animation: bounce 4s infinite;
}

@keyframes bounce {
    30%{
        top: 130px;
        left: 1200px;
    }
    40%{
        transform: rotate(13deg);
    }
    80%{
        top: 175px;
    }
}

.ob2{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 587px;
    left: 1145px;
    animation: bounce2 4s infinite;
}

@keyframes bounce2 {
    30%{
        top: 540px;
        left: 1250px;
    }
    40%{
        transform: rotate(40deg);
    }
    80%{
        top: 587px;
    }
}

.ob3{
    width: 130px;
    height: 130px;
    position: absolute;
    top: 901px;
    left: 1239px;
    animation: bounce3 4s infinite;
}

@keyframes bounce3 {
    30%{
        top: 850px;
        left: 1400px;
    }
    40%{
        transform: rotate(20deg);
    }
    80%{
        left: 1239px;
    }
}

.ob4{
    width: 130px;
    height: 130px;
    position: absolute;
    top: 632px;
    left: 393px;
    animation: bounce4 4s infinite;
}

@keyframes bounce4 {
    30%{
        top: 610px;
        left: 300px;
    }
    40%{
        transform: rotate(80deg);
    }
    80%{
        top: 632px;
    }
}

.ob5{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 594px;
    left: 1552px;
    animation: bounce5 4s infinite;
}

@keyframes bounce5 {
    30%{
        top: 500px;
        left: 1600px;
    }
    40%{
        transform: rotate(110deg);
    }
    80%{
        top: 594px;
    }
}


.main-img>.home-key{
    width: 300px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    position: absolute;
    bottom: 68px;
    left: 115px;
    cursor: pointer;
}


.main-img>.home-key>li{
    float: left;
    margin-right: 48px;
    width: 44px;
    height: 44px;
}


.main-img>.home-key>.key-txt>li{
    float: left;
    margin-right: 30px;
}
    
.key-txt>li:hover{
color: aquamarine;
}




/* profile */

.back{
    width: 61px;
    height: 61px;
    position: absolute;
    top: 30px;
    left: 38px;
    cursor: pointer;
}
.profile{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portfolio>li{     
    position: absolute;
    top: 0;
}

.main-btn2{
    width: 313px;
    height: 73px;
    position: absolute;
    bottom: 60px;
    right: -80px;
    cursor: pointer;
    transition: .4s;
}

.main-btn2:hover{
    position: absolute;
    right: 0;
}





/* 프로젝트 슬라이드 */
.slide-txt1{
    position: absolute;
    top: 100px;
    left: 327px;
    cursor: pointer;
}
.slide-txt1>a>div, .slide-txt2>a>div, .slide-txt3>a>div, .slide-txt4>a>div, .slide-txt5>a>div {
    width: 137px;
    height: 53px;
    color: white;
    border: 1px solid white;
    border-radius: 20px;
    padding: 12px 0 0 20px;
    box-sizing: border-box;
    transition: .3s;
}
.slide-txt1>a>div:hover, .slide-txt2>a>div:hover, .slide-txt3>a>div:hover, .slide-txt4>a>div:hover, .slide-txt5>a>div:hover { 
background-color: #fff;
color: #000;
}

.slide-txt1>a>div>img, .slide-txt2>a>div>img, .slide-txt3>a>div>img, .slide-txt4>a>div>img, .slide-txt5>a>div>img {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 17px;
    top: 17px;
}

.slide-txt1>a>div:hover img, .slide-txt2>a>div:hover img, .slide-txt3>a>div:hover img, .slide-txt4>a>div:hover img, .slide-txt5>a>div:hover img { 
    filter: invert();
}






.slide-txt2{
    position: absolute;
    top: 150px;
    right: 600px;
    cursor: pointer;
}

.slide-txt2>a>img{
    transition: .3s;
}
.slide-txt2>a>img:hover{ 
    filter: drop-shadow(4px 8px 8px hsl(0deg 0% 0% / 0.25));
}


.slide-txt3{
    position: absolute;
    top: 100px;
    right: 500px;
    cursor: pointer;

}

.slide-txt3>a>img{
    transition: .3s;
}
.slide-txt3>a>img:hover{ 
    filter: drop-shadow(4px 8px 8px hsl(0deg 0% 0% / 0.25));
}


.slide-txt4{
    position: absolute;
    top: 90px;
    left: 260px;
    cursor: pointer;
}

.slide-txt4>a>img{
    transition: .3s;
}
.slide-txt4>a>img:hover{ 
    filter: drop-shadow(4px 8px 8px hsl(0deg 0% 0% / 0.25));
}


.slide-txt5{
    position: absolute;
    top: 90px;
    left: 260px;
    cursor: pointer;
}

.slide-txt5>a>img{
    transition: .3s;
}
.slide-txt5>a>img:hover{ 
    filter: drop-shadow(4px 8px 8px hsl(0deg 0% 0% / 0.25));
}

@keyframes bouncetxt {
    0%{
        opacity: 0;
    }


    100%{
        opacity: 1;
    }
}









.swiper-slide>.home-key>.key-txt>li{
float: left;
margin-right: 30px;
height: 35px;
}

.swiper-slide>.home-key{
    text-align: center;
    font-size: 1.250rem;
    color: #fff;
    position: absolute;
    top: 50px;
    right: 48px;
    cursor: pointer;
}


.swiper-slide>.home-key>a>li{
    float: left;
    margin-right: 48px;
    width: 44px;
    height: 44px;
}


.swiper-slide>.home-key>.key-txt>a>li:hover{
    border-bottom: 4px solid #fff;
}


.project{
    position: absolute;
    top: 175px;
    left: 74px;
}

.project>span{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #fff;
    color: #C69D9C;

    position: absolute;
    top: 0;
}