@charset "utf-8";
/*reset*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
a{display: inline-block;text-decoration: none;color: inherit;}
em,i{font-style: normal}

/*common*/
.ir{display: block;text-indent: -9999px}
.full-ct{}
.in-ct{margin: 0 auto;padding: 0 80px;width: 1200px}
.clearfix:after{content: "";display: block;clear: both}
.ellipsis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.fll{float: left;}
.flr{float: right;}
.hide_tit{position: absolute;left: -9999px;}
.sub_tit{margin: 100px auto 0;width: 330px;height: 66px;background-repeat: no-repeat}
.info_tit{margin: 60px auto 0;width: 230px;height: 32px;background-repeat: no-repeat;text-indent: -9999px}
.tit_wrap{position: relative;}
.tit_wrap:after{content: "";position: absolute;bottom: 60px;left: 0;width: 100%;height: 1px;background-color: #575757;}
::selection{color: #fff;background-color: #d3c022}

/*layout*/
.wrap{font-family: 'Noto Sans KR', sans-serif;}
header{position: absolute;z-index: 30;width: 100%;}
.container{position: relative;z-index: 20;}
footer{}

/* slideMenu */
.sidemenu{position: absolute;left: 0;top: 0;z-index: 5;width: 320px;height: 100%;background-color: #fff;}
.sidemenu .nav{}
.sidemenu .nav .list_wrap{margin-top: 50px;text-align: center;}
.sidemenu .list_tit{display: block;padding: 1em;color: #241739;font-size: 24px;}
.side_close{display: none;position: fixed;top: 0;left: 320px;z-index: 999;width: 50px;height: 50px;background-color: #bbb;}
.side_close .ir{margin: 8px;width: 30px;height: 30px;background-image: url(../imgs/close_01.png)}
.side_close.on{display: block;}
.wrap{position: relative;z-index: 10;height: 100%;color: #fff;}

/*Header*/
.logo {position: absolute;z-index: 21;top: 20px;left: 20px;width: 142px;height: 96px;}
.logo .ir{height: 100%;background-image: url(../imgs/logo.png);}
header{position: absolute;width: 100%;height: 62px;}
#btnHamburger{position: absolute;top: 5px;right: 10px;z-index: 50;padding: 10px;height: 30px;}
#btnHamburger .bars{display: block;width: 30px;}
#btnHamburger .bars .bar{display: block;margin: 6px 0;height: 4px;background-color: #fff;}

/* VIDEO SIZE SET */
.bg_cover {position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%;}

/* Container */
.section.even{background-color: #241739;}
/* home */
#home_section{background-image: url(../imgs/home_bg.jpg);background-repeat: no-repeat;background-size: 100% 100%}
.home_cnt{}
.home_tit{position: absolute; top: 28%;left: 0;width: 100%;}
.home_tit .ir{margin: auto;width: 410px;height: 202px;background-image: url(../imgs/home_title.png);}
.home_name{position: absolute;bottom: 22%;left: 0;width: 100%;text-align: center;}
.home_name .name{}
.home_name .ir{margin: auto;width: 280px;height: 32px;background-image: url(../imgs/home_name.png);}
.name_bar{position: absolute;top: -250%;left: 50%;width: 1px;height: 40px;background-color: #fff;}
.home_scroll{position: absolute;bottom: 6%;left: 0;width: 100%;text-align: center;}
.home_scroll {cursor: pointer;}
.scroll_ico {display: block;margin: auto;width: 26px;height: 42px;background-image: url(../imgs/mouse_scroll.png);}
.scroll_tit{display: block;padding-top: 10px;font-weight: 300;}
/*profile*/
#profile_section .sub_tit{background-image: url(../imgs/sub_tit_01.png)}
.prof_wrap {margin: 80px 0 0; padding-bottom: 80px;}
.prof_wrap .info_tit {position: relative;margin: 0 0 50px 0;height: 50px}
#profile .info_tit:before {content: ""; position: absolute; top: 44px; left: 0; right: 0; height: 1px; background-color: #575757;}
.prof_cnt {width: 50%; text-align: center;}
.prof_top .name_info {display: inline-block;margin: 0 auto 10px; font-size: 40px;font-weight: 100; text-align: right; letter-spacing: -1px}
.prof_top .name_txt {display: block;}
.prof_top .thumb {display: inline-block; width: 300px; height: 334px}
.my_photo {width: 100%;}
.prof_btm {margin-top: 120px;}
.prof_info {display: inline-block;}
.prof_info .detail {float: left; font-size: 1.25em; line-height: 2.5;}
.prof_info .detail_tit {clear: both; padding-right: 20px; width: 100px; text-align: right; color: #a990b3; letter-spacing: 1px;}
.prof_info .detail_txt {width: auto; font-weight: 300; text-align: left;}
.skill_hb {position: relative; width: 50%;}
.skill_area {margin: auto;padding-top:10px;width: 500px;}
.skill_area .info_tit {margin-left: -30px;width: 150px;background-image: url(../imgs/info_tit_00.png)}
.skill_cnt {text-align: center;}
.skill_cnt .skill_list {float: left; margin-top: 20px; width: 100%; text-align: left;}
.skill_cnt .first_list {margin-top: 6px;}
.skill_list .subject {display: inline-block; font-size: 1.25em; margin-bottom: 4px;}
.skill_list .per {float: right; font-size: 1.25em; line-height: 1;}
.skill_list .bar_now {width: 0%; height: 12px; background-color: #d3c022;}
.skill_list .bar_100 {margin-top: 4px; width: 100%; height: 12px; background-color: #999;}
.hobby_area {margin-top: 60px;}
.hobby_area .info_tit {margin-left: 20px;width: 200px;background-image: url(../imgs/info_tit_01.png)}
.hobby_area .hobby {text-align: center;}
.hobby_list {float: left; width: 25%;}
.hobby_ico {display: block; margin: auto;}
.hobby_txt {display: inline-block; padding-top: 10px; font-weight: 300;}
.hobby_list.line2 {margin-top: 40px;}

/* career */
#career_section{background-image: url(../imgs/bg_02.png);background-repeat: no-repeat;background-size: 100%}
#career_section .sub_tit{background-image: url(../imgs/sub_tit_02.png)}
#career_section .info_tit{background-image: url(../imgs/info_tit_02.png)}
.career_wrap {position: relative;margin-bottom: 120px;}
.career_wrap:after {content: ""; position: absolute; top: 10px; bottom: 20px; left: 50%; width: 1px; transform: translateX(-50%); background-color: #575757;}
.career_wrap .icon {position: relative; margin: 80px 0;}
.career_wrap .icon:before {content: ""; position: absolute; z-index: 1; top: 5px; left: 50%; width: 14px; height: 14px; background-color: #dbd00f; transform: translateX(-50%) rotate(-45deg)}
.career_wrap .text_wrap {width: 50%;letter-spacing: -1px; line-height: 1.8;text-align: left}
.career_wrap .text_wrap.fll .text_inner {padding-right: 50px}
.career_wrap .text_wrap.flr .text_inner {padding-left: 50px}
.career_wrap .date {padding-top: 10px;color: #78cef1;font-size: 42px;font-weight: 300}
.career_info {display: block;font-size: 18px;}
.career_info.tit {text-align: right;}
.career_info .bold {font-size: 28px; font-weight: normal;line-height: 0;}
.career_wrap .text_area{padding-top: 8px;}
.career_wrap .text_area .desc {display: block;color: #bbb; font-size: 15px;}
.career_wrap .text_area .desc_txt {padding-left: 12px}
.career_wrap .text_area .line_br {margin-bottom: 20px}

/* project */
#project_section{}
#project_section .sub_tit{width: 368px;background-image: url(../imgs/sub_tit_03.png)}
#project_section .info_tit{width: 610px;height: 30px;background-image: url(../imgs/info_tit_03.png)}
.proj_wrap{font-weight: 100;}
.proj{}
.proj_list{padding-bottom: 50px;border-bottom: 1px solid #575757;}
.proj_list.list_02{margin-bottom: 100px;}
.proj_int{position: relative;padding-top: 70px;text-align: center;}
.proj_int .tit{color: #d3c022;font-size: 28px;font-weight: 700}
.proj_int .ex{padding-top: 16px;font-size: 24px;}
.quote{position: absolute;width: 22px;height: 18px;background-image: url(../imgs/quote_02.png);background-repeat: no-repeat}
.quote.q1{top: 56px;left: 30%;background-image: url(../imgs/quote_02.png)}
.quote.q2{bottom: -10px;right: 31%;background-image: url(../imgs/quote_03.png)}
/* 내용시작부분 */
.proj_info_wrap{padding-top: 70px;}
.proj_info_wrap .thumb{width: 50%;text-align: center;}
.proj_info_wrap .thumb .img{}
.proj_info_wrap .info{padding-top: 32px;width: 50%;}
.proj_info_wrap .text_wrap{}
.proj_text{font-size: 20px;}
.proj_text .tit{float: left;width: 32%;padding-top: 8px;_color: #78cef1;font-weight: 700;}
.proj_text .ex{float: left;padding-top: 8px;}
.proj_text .tit.first{padding-top: 0}
.proj_text .ex.first{padding-top: 0}
.proj_text .ex .font{padding-right: 20px;}
.proj_text .ex .color{padding-right: 20px;}
.proj_text .ex .color_block{display: inline-block;margin-left: 6px;width: 18px;height: 18px}
.proj_text .ex .color_01{background-color: #2faeff;}
.proj_text .ex .color_02{background-color: #222;}
.proj_text .ex .color_03{background-color: #fff;}
.site_wrap{margin-left: 50px;width: 50%;text-align: center;}
.proj_info_wrap .go_site{margin-top: 60px;width: 100%;background-color: #3f2864;border: 1px solid #3f2864;color: #fff;font-size: 20px;font-weight: 400;line-height: 2;transition: 0.6s;}
.proj_info_wrap .go_site:hover{padding: 0;background-color: #fff;color: #3f2864;}

/* contacts */
#contacts_section{background-image: url(../imgs/bg_03.png);background-repeat: no-repeat;background-size: 100%}
#contacts_section .tit_wrap:after{left: 25%;bottom: -20px;width: 50%;background-color: #888;}
#contacts_section .sub_tit{margin-top: 0;width: 450px;background-image: url(../imgs/sub_tit_04.png)}
#contacts_section .info_tit{width: 340px;height: 62px;background-image: url(../imgs/info_tit_04.png)}
.cont_area{padding-top: 50px;text-align: center;}
.cont_area .mail{color: #dbd00f;font-size: 2.25em;font-weight: 100;}

/* navigation custom */
#fp-nav ul li{margin: 6px;}
#fp-nav ul li a{background-color: #fff;overflow: hidden;width: 8px!important;height: 8px!important;border-radius: 6px;border: 2px solid #fff;}
#fp-nav ul li a.active{background-color: transparent;}
#fp-nav ul li a span{display: none;}