custom.css

*{color:#333;line-height: 1; padding: 0; margin: 0;}
.wrap{width: 90%; padding: 0 5% 80px;
    background-color: #e6e6e6; min-width: 750px;}

/*layout*/
.header{padding-top:50px; width:100%;}
.header #nav{
    margin-left:20%;
    width: 80%; height: 30px;
    border-top: 1px solid #b2b2b2;
}

.header, .main{border-bottom: 1px solid #666;}
h2{font: 50px/1.2 'Roboto', sans-serif;
    font-weight: 700;}
section{padding: 30px 0;}

/*section.about .top*/
.main .about{position: relative;}
.about::after{
    display: block;
    content: '';
    position: absolute;
    width: 80%; height: 1px;
    background-color: #b2b2b2;
    bottom: 0; right: 0;
}
.about .top{width: 100%; display: flex; flex-wrap: wrap;align-items: flex-end;}
.about .top > div {
    font: 28px/1.2 'Roboto', sans-serif;
    font-weight: 100;
}
.about .top .top_left{font-weight: 100; width: 20%;}
.about .top .top_left > h2{color:#f15a24}
.about .top .top_right .contact{position: absolute; bottom: 0; right: 20%;}
.about .top .top_right{font-weight: 700; position: relative;width: 80%;}

/*section.about .bottom*/
.about .bottom{
    position: relative;
    padding: 0 25% 0 20%;
}
.about .bottom p{
    font: 15px/1.6 'Nanum Gothic', sans-serif;
    color: #666;
    margin-top: 30px;
}
.about .bottom .goal{position: absolute; top: 0; right: 0;}

section.contact > h3.subTitle, section.goal > h3.subTitle{
    padding-left: 15px;
    font: 18px/1 'Roboto', sans-serif;
    position: relative;
}
section.contact > h3.subTitle::before, section.goal > h3.subTitle::before{
    display: block;
    content: '';
    width: 400px; height: 1px;
    background-color: #b2b2b2;
    position: absolute;
    top: 8px; right: 100%;
}
section.contact > h3.subTitle::after, section.goal > h3.subTitle::after{
    display: block;
    content: '';
    width: 10px; height: 10px; border-radius: 50% 50%;
    background-color: #f15a24;
    position: absolute;
    right: 100%; top: 4px;
}
section.contact ul, section.goal ul {margin-top: 10px; padding-left: 15px;}
section.contact ul li, section.goal ul li{
    list-style: none;
    font: 13px 'Nanum Gothic', sans-serif;
    color: #666;
    padding-top: 7px;
}

/*section.likes*/
.likes{display: flex;}
.likes h3.subTitle{
    padding-left: 15px;
    font: 18px/1 'Roboto', sans-serif;
    position: relative;
    width: 20%;
}
.likes h3.subTitle::after{
    display: block;
    content: '';
    width: 10px; height: 10px; border-radius: 50% 50%;
    background-color: #f15a24;
    position: absolute;
    right: 100%; top: 4px;
}

.likes ul{
    display: inline-flex;
    width: 80%;
    padding-bottom: 30px;
    border-bottom: 1px solid #b2b2b2;
}
.likes ul li{
    list-style: none;
    margin-right: 10px;
    flex:1;
}
.likes ul li dl dt{
    position: relative;
    width: 100%; height: 0;
    padding-bottom: 66%;
    overflow: hidden;
}
.likes ul li dl dt img{
    position: absolute;
    width: 100%; height: auto;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.likes ul li dl dd{font: 13px/1 'Nanum Gothic', sans-serif; color:#999;
    margin-top:10px}

/*
reset.css 파일 연결하기
이미지에 그림자 효과넣기
본문 노토산스로 바꾸기
여백 체크하기
반응형 레이아웃
.contact, .goal 애니메이션입히기
마우스 스크롤 효과
헤더에 이메일 링크달기
*/