@charset "utf-8";

/*스크롤 영역*/
body::-webkit-scrollbar {display:none}
body {-ms-overflow-style:none}

html, body {
    /* min-width:1280px - removed for responsive */
}

/*헤더 영역*/
#header {position:fixed; top:0; left:0; background:#202020; width:100%; height:59px; border-bottom:1px solid #000; z-index:30}
#header h1.logo {float:left; font-size:0}
#header h1.logo a {display:inline-block; margin-left:20px; color:#fff; font-size:16px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:59px}
#header .util {float:right; font-size:0; margin-right:16px}
#header .util a {display:inline-block; padding:0 8px; color:#bdbdbd; font-size:16px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:59px; transition:color .3s}

/*클릭된 페이지*/
#header .util a:nth-child(1) {color:#ff1744}

#header .util a:hover {color:#ff1744}

/*비주얼 영역*/
#visual {margin-top:59px; height:328px; background:#fbfbfb url(../img/bg-main-bn.png)no-repeat center}
#visual > .main-bn {width:1280px; margin:0 auto; position:relative; text-align:center}
#visual > .main-bn img {display:inline-block; width:62px; height:79px; margin-top:56px}
#visual > .main-bn h2 {color:#111; font-size:72px; font-weight:600; font-family:'Rajdhani','sans-serif'; line-height:100%; letter-spacing:-6px; margin-top:14px}
#visual > .main-bn p {color:#616161; font-size:18px; font-family:'NanumSquareRound'; line-height:100%; letter-spacing:-1px; margin-top:25px}

/*본문 영역(자기 소개)*/
#job-box {width:730px; margin:60px auto}

#job-box h3 {color:#202020; font-size:16px; font-family:'NanumSquareRound'; line-height:100%; letter-spacing:-0.6px}

#job-box .list-box {margin-top:14px; background:#fff; border-radius:6px; box-shadow:2px 6px 16px rgba(0,0,0,.06); position:relative}
#job-box .list-box ul {padding:18px 0}
#job-box .list-box li {color:#202020; font-size:14px; font-family:'NanumSquareRound'; line-height:100%; letter-spacing:-0.6px; padding:8px 0 8px 28px; position:relative}
#job-box .list-box li:before {content:""; position:absolute; left:20px; top:50%; transform:translateY(-50%); width:3px; height:3px; background:#ccc}

/*주요 경력 및 활동사항*/
#job-box .list-career .tag-box {margin-top:20px}
#job-box .list-career .tag-box li {float:left; color:#fff; font-size:14px; font-family:'NanumSquareRound'; line-height:100%; letter-spacing:-0.6px; padding:10px 12px; border-radius:17px; margin:0 6px}
#job-box .list-career .tag-box li:nth-child(1) {background:linear-gradient(to left, #0277bd, #01579b); margin-left:0}
#job-box .list-career .tag-box li:nth-child(2) {background:linear-gradient(to left, #ff3d00, #dd2c00); margin-right:0}

#job-box .list-career .list-box li span.green {color:#2196f3}

/*취득 자격 및 면허*/
#job-box .list-license {margin-top:40px}

/*경진대회 및 공모전 수상*/
#job-box .list-award {margin-top:40px}

/*사용가능 프로그램 및 언어*/
#job-box .list-skill {margin-top:40px}
#job-box .list-skill .list-box ul {font-size:0}
#job-box .list-skill .list-box li {
    display:inline-block;
    color:transparent;
    width:45px;
    height:45px;
    overflow:hidden;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    margin:0 20px
}
#job-box .list-skill .list-box li:nth-child(1) {background-image:url(../img/ico-visual-studio.png)}
#job-box .list-skill .list-box li:nth-child(2) {background-image:url(../img/ico-html5.png)}
#job-box .list-skill .list-box li:nth-child(3) {background-image:url(../img/ico-css3.png)}
#job-box .list-skill .list-box li:nth-child(4) {background-image:url(../img/ico-js.png)}
#job-box .list-skill .list-box li:nth-child(5) {background-image:url(../img/ico-php.png)}
#job-box .list-skill .list-box li:nth-child(6) {background-image:url(../img/ico-Intellij.png)}
#job-box .list-skill .list-box li:nth-child(7) {background-image:url(../img/ico-python.png)}
#job-box .list-skill .list-box li:nth-child(8) {background-image:url(../img/ico-figma.png)}
#job-box .list-skill .list-box li:before {display:none}

/*푸터 영역*/
#footer {margin-top:80px; background:#111; height:156px; text-align:right}
#footer .ft-box {width:1280px; margin:0 auto}
address {display:inline-block; float:left; color:#c0c0c0; font-size:16px; font-weight:400; font-family:'Rajdhani','sans-serif'; line-height:100%; padding-top:38px}
#footer .ft-sns {float:right; color:#fff; padding:32px 0 22px 0}
#footer .ft-sns li {float:left}
#footer .ft-sns li a {display:block; color:transparent; width:26px; height:26px; overflow:hidden; margin:0 10px}
#footer .ft-sns li:nth-child(1) a {background:url(../img/ico-ft-naver-blog.png)no-repeat center / 26px auto; margin-left:0}
#footer .ft-sns li:nth-child(2) a {background:url(../img/ico-ft-instagram.png)no-repeat center / 26px auto}
#footer p.ft-tt1 {color:#eee; font-size:14px; font-weight:100; line-height:100%; letter-spacing:-0.4px}
#footer p.ft-tt2 {padding-top:16px; color:#fff; font-size:12px; font-weight:100; line-height:100%; letter-spacing:-0.4px} 
#footer p.ft-tt2 img {width:12px; vertical-align:-1px}

/*최상단 이동하기 버튼*/
#btn-top {position:fixed; right:24px; bottom:40px; width:46px; height:46px; overflow:hidden; background:url(../img/ico-btn-top.png)no-repeat 0 0 / 46px auto; cursor:pointer; opacity:.3; transition:all .3s}
#btn-top:hover {opacity:1}