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

/* 
thin 100
light 300
regular 400
medium 500
bold 700
black 900
font-family: 'Noto Sans KR', sans-serif;
*/

body{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    color: #020202;
    /* background: #ececec; */
}

/* ______________________________ pc 기준으로 */
header{
    width: 30%;
}

.logo{ 
    width: 40px;
    margin-top: 40px;
    margin-left: 10%;
}

nav{
    margin-top: 40px;
    margin-left: 10%;
}
nav ul li a{
    /* font-size: 22px; */
    font-size: 1.5vmax;
    font-weight: 700;
    padding: 4px 0;
    display: inline-block;
}
nav ul li span{
    width: 12px;
    height: 12px;
    /* border: 3px solid #020202; */
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
nav ul li:hover span{
    background: blue;
}
nav ul li .selected span{background: blue;}

section{
    width: 70%;
    position: absolute;
    right: 0;
    top: 110px;
}

/*work-list */
.work_list li{
    display: inline-block;
}
.work_list li a{
    font-size: 28px;
    font-weight: 500;
    color: gray;
    /* border: 3px solid gray; */
    /* border-radius: 20px; */
    padding: 0px 12px 3px;
    margin-left: 4px;
    margin-bottom: 8px;
    display: inline-block;
}
.work_list li:hover a{color: blue;}
.work_list li a.selected{
    color: #fff;
    background: blue;
    /* border: 3px solid #020202; */
}

/* work */
.work_each{
    margin-top: 80px;
    width: 100%;
}
.work_each li ul li a{
    float: left;
    width: 48%;
    /* height: 480px; */
    margin: 0px 1% 2%;
    overflow: hidden;
    border-radius: 40px;
    position: relative;
    transition: all 0.5s ease-out;
}
.work_each li ul li:hover a{
    box-shadow: 0px 8px 18px rgba(166, 166, 166, 0.3);
    bottom: 10px;
}
.work_each h6{
    /* font-size: 14px; */
    font-size: 1vmax;
    font-weight: 400;
    display: inline-block;
    margin-top: 2vmax;
    margin-left: 3vmax;
    border: 2px solid #020202;
    border-radius: 1vmax;
    background: blue;
    color: #fff;
    /* background: #fff;
    color: #020202; */
    padding: 1% 2%;
}
.work_each h2{
    /* font-size: 28px; */
    font-size: 2.2vmax;
    font-weight: 700;
    margin-top: 1.4vmax;
    margin-left: 3vmax;
}
.work_each p{
    width: 90%;
    /* font-size: 16px; */
    font-size: 1.2vmax;
    margin-left: 3vmax;
}
/* .work_each .box1{height: 100%;} */

/* uxui */
.jipay .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(122, 204, 200, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}

.pkm .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(34, 34, 34, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}

/* typography */
.nyfont .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(38, 84, 71, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}

/* web publishing */
.airseoul .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(37, 197, 169, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}
.domino .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(219, 0, 9, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}
.korail .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(0, 84, 166, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}
.yh .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(0, 0, 0, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}

/* graphic design */
.kollabo .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(232, 73, 67, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}
.cogi .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(224, 185, 70, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}

/* painting */
.untitle .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(62, 51, 54, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}
.night .box1{
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    /* background: rgba(106, 118, 130, 0.8); */
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: block;
    margin-top: 60%;
}

.untitle .sub,.night .sub{
    font-size: 0.9vmax;
}












/* ______________________________ tablet */
/* 768 ~ 1199 범위의 해상도 */
@media screen and (min-width: 768px) and (max-width: 1199px){


}

/* ______________________________ mobile */
/* 767 이하 ~ 범위의 해상도 */
@media screen and (max-width: 767px){



}