*{margin: 0; padding: 0; border: none; box-sizing: border-box; transition: all .5s;}
html, body{width: 100%; overflow-x:hidden;}
body{font-family: 'Noto Sans KR'; width: 100%; overflow-x:hidden}
[data-popup]{cursor: pointer;}
a{color: inherit;}
input, textarea{border: #ccc solid 1px;}
.wrap{max-width: 1600px; padding: 0 30px; margin: 0 auto;}

.mo_only{display: none;}
#header{width: 100%; height: 80px; background: #2c3e50; text-align: center; font-size: 36px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Black Han Sans'; position: fixed; top: 0; left: 0; z-index: 1000; transition: all .5s;}

#main{width: 100%; height: 100vh; display: flex; background: #1abc9c; flex-direction: column; justify-content: center; align-items: center; color: #fff; gap: 40px;}
    #main .face{width: 300px; height: 300px; background:url(../image/main.jpeg); background-size: cover; background-position: center center; border-radius: 100%; border: #000 solid 10px;}
    #main h1{font-size: 40px; font-weight: 900;}
    #main .icon{gap: 40px; font-size: 40px; display: flex;}
    #main .icon i:hover{font-size: 60px; transform: rotate(360deg);}

.section{padding-top: 50px; padding-bottom: 70px;}
.section_title{font-size: 48px; font-weight: bold; text-align: center; margin-bottom: 20px;}
.section_desc{font-size: 18px; text-align: center; margin-bottom: 40px;}

/* Prize */
#prize .list .item:nth-child(1){background:url(../image/portfolio1.jpg); background-size: cover; background-position: center center;}
#prize .list .item:nth-child(2){background:url(../image/portfolio2.jpg); background-size: cover; background-position: center center;}
#prize .list .item:nth-child(3){background:url(../image/prize3.png); background-size: cover; background-position: center center;}
#prize .list .item:nth-child(4){background:url(../image/portfolio5.jpg  ); background-size: cover; background-position: center center;}

.image_list .list{display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: 40px;}
    .image_list .list .item{width: 30%; position: relative; margin-bottom: 90px; transition: all .5s; opacity: 0; transform: translateY(50%);}
    .image_list .list .item::before {content: ""; padding-top: 100%; display: block;}
    .image_list .list .item .content{position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: rgba(0,0,0,0.8); color: #fff;}
        .image_list .list .item .name{font-size: 24px; font-weight: bold;}
        .image_list .list .item .desc{font-size: 12px; color: #ccc; margin-top: 10px;}

#work{background: #1abc9c;}
    #work .section_title{color: #fff;}
    #work .grid2{display: flex; justify-content: space-between; margin-top: 45px; color: #fff; flex-wrap: wrap; justify-content: center; gap: 30px;}
        #work .grid2 .list{width: 40%; font-size: 20px; line-height: 2em;}
        #work .grid2 .list .title{width: 100%; font-weight: bold; font-size: 30px;}
        #work .grid2 .list:nth-child(1){transform: translateX(-200%);}
        #work .grid2 .list:nth-child(2){transform: translateX(200%);}
/* Portfolio */
#portfolio .list .item:nth-child(1){background:url(../image/portfolio3.jpg); background-size: cover; background-position: center center;}
#portfolio .list .item:nth-child(2){background:url(../image/portfolio4.jpg); background-size: cover; background-position: 65% center;}
#portfolio .list .item:nth-child(3){background:url(../image/portfolio7.png); background-size: cover; background-position: center center;}
#portfolio .list .item:nth-child(4){background:url(../image/portfolio8.png); background-size: cover; background-position: center center;}

#popup{width: 80%; position: fixed; left: 50%; height: 80%; top: 10%; background: #fff; padding: 30px; box-shadow: 0px 0px 30px #000; max-width: 900px; transform: translateX(-50%); display: none;}
    #popup i{position: absolute; right: 5%; top: 5%; font-size: 48px; cursor: pointer;}
    #popup iframe{width: 100%; height: 100%;}

footer{width: 100%; height: 90px; display: flex; justify-content: center; align-items: center; background: #2c3d4f; color: #fff; font-size: 18px; flex-direction: column;}

#reply{background: #1abc9c; color: #fff;}
#reply .wrap{text-align: center;}
#reply input{max-width: 800px; width: 90%; height: 40px; border-radius: 10px; margin-bottom: 15px; padding-left: 15px; font-size: 16px;}
#reply textarea{max-width: 800px; width: 90%; height: 300px; padding: 15px; border-radius: 10px; line-height: 2em;}
#reply button{padding: 10px 20px; background: #2c3d4f; border-radius: 10px; color: #fff; margin-top: 15px; font-size: 16px;}

#media .list{line-height: 2em; display: flex; margin: 0 auto;}
    #media .list ul{margin: 0 auto;} 

/* Animation */
.image_list .list .item .content:hover{background: rgba(0,0,0,0.1);}

@keyframes zoom-a {
	0% { background-size: 100% auto; }
	100% { background-size: 120% auto; }
}

@media (max-width:720px){
    .mo_only{display: inline;}
    .image_list .list .item{width: 45%;}

    #media .list ul{font-size:2.5vw;}

    #work .grid2{gap: 20px;}
        #work .grid2 .list{width: 100%; font-size: 3vw;}
        footer{font-size: 16px;}
}

@media (max-width:480px){
    .image_list .list .item{width: 100%;}
    #work .grid2{font-size: 13px;}
    
    
    footer{font-size: 12px;}
}