* {margin: 0; padding: 0; font-family: 'Noto Sans KR'; list-style: none;}
.rt_top {
    position: fixed;
    z-index: 9;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #ddd url(../img/top.png) no-repeat center / contain;
    border-radius: 50%;
    display: none;
    cursor: pointer;
}
.wrap {
    min-width: 1200px;
    
} 
.header {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0px;
    left:0;
    background: #fff;
    box-shadow: 2px 0 2px 0 #888;
    text-align: center;
    padding: 0 150px;
    box-sizing: border-box;
    z-index: 9999;
    position: fixed;
}
.header > ul {
    list-style: none;
    /* width: 100%; */
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    float: right;
}
.header li {
    /* width: calc(100% / 6); */
    font-size: 18px;
    font-weight: 300;
    color: #0d0B0B;
    float: left;
    padding: 0 20px;
    box-sizing: border-box;
    line-height: 50px;
    cursor: pointer;
}
.header_active {
    color: #4989a5 !important;
    font-weight: 900 !important;
}
/* .header li:hover {
    border-bottom: 2px solid rgb(195, 36, 57);
    transition: all 0.5s;
} */
.main {
    width: 100%;
    /* height: 100vh; */
}
.section {
    width: 100%;
    /* height: 100vh; */
    /* background: #2e464c; */
    /* padding: 20px 50px; */
    box-sizing: border-box;
}
.home {
    background: url(../img/laptop-3539661_1920.jpg) no-repeat center / cover;
    /* background: #2e464c; */
    position: relative;
    height: 100vh;
}
/* .home_bg {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
} */
.home_txt {
    position: absolute;
    top:250px;
    left: 50%;
    transform: translateX(-50%);
}
.home_txt > p {
    font-size: 30px;
    font-weight: 300;
    color: #0d0B0B;
}
.home_txt > h1 {
    font-size: 50px;
    font-weight: 900;
    color: #0d0B0B;
}
.home_txt > h2 {
    font-size: 45px;
    font-weight: 500;
    color: #0d0B0B;    
    border-bottom: 2px solid #0d0B0B;
}
.title {
    text-align: center;
    color: #0d0B0B;
    font-size: 30px;
    font-weight: 900;
    padding-bottom: 50px;
}
.about_box {
    overflow: hidden;
}
.about_box > .photo_box {
    width: 50%;
    position: relative;
    float: left;
    opacity: 0;
    left: -20%;
}
.photo {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* background: url(../img/IMG_0386-1.jpg) no-repeat center / cover; */
    background: url(../img/student-849825_640.jpg) no-repeat center / cover;
    /* background: red; */
    margin: 0 auto;
}
.about_box > .desc {
    color: #0d0B0B;
    width: 50%;
    font-size: 13px;
    /* text-align: center; */
    position: relative;
    float: right;
    opacity: 0;
    left: 20%;
}
.about_box {
    padding: 50px 50px;
    box-sizing: border-box;
}


.html5, .css3, .js, .jq, .ps, .ai {
    /* width: 250px; */
    height: 10vw;
    margin: 0 auto;
}
.html5 {
    background: url(../img/html5.png) no-repeat center / contain;
}
.css3 {
    background: url(../img/css3.png) no-repeat center / contain;
}
.js {
    background: url(../img/javascript.png) no-repeat center / contain;
}
.jq {
    background: url(../img/jquery.png) no-repeat center / contain;
}
.ps {
    background: url(../img/ps.png) no-repeat center / contain;
}
.ai {
    background: url(../img/ai.png) no-repeat center / contain;
}
.skills_box {
    /* border-top: #262626; */
    overflow: hidden;
    background: #f7f7f7;
    padding: 70px;
}
.skills_box > .desc {
    transform: scale(0);
    transition: all 0.5s;
}
.skills_box > .desc li {
    width: calc((100% - (20px * 5)) / 6);
    overflow: hidden;
    float: left;
    margin-right: 20px;
    font-size: 18px;
    color: #0d0B0B;
    text-align: center;
}
.skills_box > .desc li:last-child {
    margin-right: 0;
}
.gauge {
    width: 60%;
    height: 10px;
    /* border: 1px solid #0d0B0B; */
    background: #ddd;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 20px 0;
}
.percent {
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    background: #4989a5;
    width: 0;
}
.desc {
    overflow: hidden;
}
/* .skills_box > .desc li:nth-child(1) .percent {
    width: 97%;
}
.skills_box > .desc li:nth-child(2) .percent {
    width: 95%;
}
.skills_box > .desc li:nth-child(3) .percent {
    width: 80%;
}
.skills_box > .desc li:nth-child(4) .percent {
    width: 85%;
}
.skills_box > .desc li:nth-child(5) .percent {
    width: 90%;
}
.skills_box > .desc li:nth-child(6) .percent {
    width: 90%;
} */

.portfolio_box {
    padding: 70px;
    overflow: hidden;
}
.portfolio_category {
    width: 411px;
    /* background: red; */
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 20px 0;
}
.portfolio_category > ul {
    overflow: hidden;
}
.portfolio_category li {
    float: left;
    padding: 10px 20px;
    box-sizing: border-box;
    margin: 0 10px;
    border: 1px solid #4989a5;
    /* background: #4989a5; */
    border-radius: 10px;
    /* color: #00467F; */
    color: #4989a5;
    cursor: pointer;
    box-sizing: border-box;
}
.portfolio_active {
    color: #fff !important;
    background: #4989a5;
}
.contents_box {
    /* width: 100%; */
    overflow: hidden;
    margin: 0 auto;
}
.contents_box img {
    width: 100%;
}
.contents_box > ul {
    width: 920px;
    overflow: hidden;
    margin: 0 auto;
}
.contents_box > ul > li {
    float: left;
    /* width: 300px; */
    /* height: 300px; */
    box-sizing: border-box;
    text-align: center;
    line-height: 50px;
    padding: 25px 25px 0 25px;
    position: relative;
    transform: scale(1.3);
    opacity:0;
    transition: all 0.7s;
}
.img_box {
    width: 250px;
    height: 250px;
    overflow: hidden;
}
.hover_bg {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(73,137,165,0.5);
    display: none;
    cursor: pointer;
}
.hover_bg > p {
    color: #fff;
    font-weight: 900;
    padding: 120px 0;
    box-sizing: border-box;
}

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    padding:70px 0 20px 0; 
    top:0;
    left:0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    box-sizing: border-box;
    display: none;
}
.popup_detail {
    position: relative;
    width: 800px;
    height: 100%;
    top:0;
    left:0;
    background: #fff;
    margin: 0 auto;
    /* border-radius: 20px; */
    padding: 80px 40px 30px 40px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
}
.btn_close {
    position: absolute;
    top: 20px;
    right: 20px;
    /* background: red; */
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    cursor: pointer;
}
.line {
    width: 100%;
    height: 3px;
    background: #888;
    position: absolute;
    top: 20px;
    right:0;
}
.line:nth-child(1) {
    transform: rotate(45deg);
}
.line:nth-child(2) {
    transform: rotate(-45deg);
}
.popup_contents {
    width: 100%;
    font-size: 0;
}
.p_title {
    font-size: 23px;
    font-weight: 900;
}
.p_sub_title {
    color: #4989a5;
    /* text-decoration: underline; */
    font-size: 17px;
    font-weight: 900;
}
.p_sub_title > a {
    color: #4989a5;
    /* text-decoration: underline; */
    font-size: 17px;
    font-weight: 900;
}
.popup_contents > ul {
    padding: 20px 0;
}
.popup_contents li {
    font-size: 15px;
    margin: 10px 0;
}
.popup_contents li > .color {
    background: red;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: baseline;
    margin-right: 3px;
}
.popup:nth-child(8) li > .color:nth-of-type(1) {
    background: #ff143c;
}
.popup:nth-child(8) li > .color:nth-of-type(2) {
    background: #1382ff;
}
.popup:nth-child(8) li > .color:nth-of-type(3) {
    background: #888;
}

.popup:nth-child(9) li > .color:nth-of-type(1) {
    background: #ff3131;
}
.popup:nth-child(9) li > .color:nth-of-type(2) {
    background: #fb468d;
}
.popup:nth-child(9) li > .color:nth-of-type(3) {
    background: #000;
}

.popup:nth-child(10) li > .color:nth-of-type(1) {
    background: #c70101;
}
.popup:nth-child(10) li > .color:nth-of-type(2) {
    background: #000000;
}
.popup:nth-child(10) li > .color:nth-of-type(3) {
    background: #888;
}

.popup_contents li > p {
    display: inline-block;
    font-size: 15px;
    font-weight: 900;
    width: 120px;
    border-left: 5px solid #4989a5;
    padding-left: 10px;
}
.popup_contents > p {
    font-size: 15px;
    padding-bottom: 20px;
}
.popup_contents img {
    width: 100%;
}



/* contact 영역 */
.contact_box {
    height: 500px;
    background: url(../img/apple-devices-1839874_1920.jpg) no-repeat center fixed;
    position: relative;
    overflow: hidden;
}
.contact_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    padding: 70px;
    box-sizing: border-box;
}
.contact_bg > .title {
    color: #fff;
}
.contact_box li {
    overflow: hidden;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
}
.icon, .text {
    display: inline-block;
    vertical-align: middle;
}
.icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
}
.icon > img {
    width: 30px;
}
.text {
    width: 200px;
    padding-left:20px;
    line-height: 50px;
    /* font-weight: 900; */
}
.text a {
    text-decoration: none;
    color: #fff;
}


/* 폰트관련 */
/* noto-sans-kr-100 - korean_latin */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/noto-sans-kr-v12-korean_latin-100.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans KR Thin'), local('NotoSansKR-Thin'),
         url('../fonts/noto-sans-kr-v12-korean_latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/noto-sans-kr-v12-korean_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-100.woff') format('woff'), /* Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/noto-sans-kr-v12-korean_latin-100.svg#NotoSansKR') format('svg'); /* Legacy iOS */
  }
  /* noto-sans-kr-300 - korean_latin */
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/noto-sans-kr-v12-korean_latin-300.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans KR Light'), local('NotoSansKR-Light'),
         url('../fonts/noto-sans-kr-v12-korean_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/noto-sans-kr-v12-korean_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/noto-sans-kr-v12-korean_latin-300.svg#NotoSansKR') format('svg'); /* Legacy iOS */
  }
  /* noto-sans-kr-regular - korean_latin */
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/noto-sans-kr-v12-korean_latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
         url('../fonts/noto-sans-kr-v12-korean_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/noto-sans-kr-v12-korean_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/noto-sans-kr-v12-korean_latin-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */
  }
  /* noto-sans-kr-500 - korean_latin */
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/noto-sans-kr-v12-korean_latin-500.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'),
         url('../fonts/noto-sans-kr-v12-korean_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/noto-sans-kr-v12-korean_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/noto-sans-kr-v12-korean_latin-500.svg#NotoSansKR') format('svg'); /* Legacy iOS */
  }
  /* noto-sans-kr-700 - korean_latin */
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/noto-sans-kr-v12-korean_latin-700.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
         url('../fonts/noto-sans-kr-v12-korean_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/noto-sans-kr-v12-korean_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/noto-sans-kr-v12-korean_latin-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */
  }
  /* noto-sans-kr-900 - korean_latin */
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/noto-sans-kr-v12-korean_latin-900.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans KR Black'), local('NotoSansKR-Black'),
         url('../fonts/noto-sans-kr-v12-korean_latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/noto-sans-kr-v12-korean_latin-900.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-900.woff') format('woff'), /* Modern Browsers */
         url('../fonts/noto-sans-kr-v12-korean_latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/noto-sans-kr-v12-korean_latin-900.svg#NotoSansKR') format('svg'); /* Legacy iOS */
  }