@charset "utf-8";
/* CSS Document */
/* font */
@font-face{font-family:DaxWide-Bold;src:url('../font/DaxWide-Bold.woff');src:local('※'),url('../font/DaxWide-Bold.woff')format('woff')}
@font-face{font-family:DaxWide-Regular;src:url('../font/DaxWide-Regular.woff');src:local('※'),url('../font/DaxWide-Regular.woff')format('woff')}
@font-face{font-family:NanumGothicBold.woff;src:url('../font/NanumGothicBold.woff');src:local('※'),url('../font/NanumGothicBold.woff')format('woff')}
@font-face{font-family:NanumGothic.woff;src:url('../font/NanumGothic.woff');src:local('※'),url('../font/NanumGothic.woff')format('woff')}
html {overflow-x:hidden}

/* flaot clear */
.clfix:after {content:"."; display:block; height:0px; clear:both; visibility:hidden}
.clfix {display:inline-block}
.clfix {display:block}
* html .clfix {height:1%} /* Hides from IE-mac */
.clfix {zoom:1} /*for IE 5.5-7*/

/* hidden */
.hidden {height:0; text-indent:100%; overflow:hidden; white-space:nowrap}

/* position */
.rel {position:relative; z-index:100}
.fix {position:fixed; z-index:1000}

/* font */
.ft15 {height:15px; line-height:20px; font-size:15px; font-weight:bold; color:#dcdcdc}
.ft20 {height:20px; line-height:20px; font-size:20px; font-weight:bold; color:#dcdcdc}
.ft30 {height:30px; line-height:30px; font-size:30px; font-weight:bold; color:#dcdcdc}
.ft50 {height:20px; line-height:50px; font-size:50px; font-weight:bold; color:#333}

/* color */
.dark {color:#333333; border-color:#333333}
.gray {color:#333; border-color:#333}

/* visual */
#visual {position:absolute; top:0; right:0; font-size:20px}

/* div layout */
#wrap {width:100%}
#headerWrap {top:0; left:0; width:100%; height:100px; background:#000000; opacity:0.8}
#contentWrap {width:100%; height:100%}
#footerWrap {bottom:0; left:0; width:100%; height:90px; background:#000000; opacity:0.8}
#header, #footer {width:980px; margin:0 auto}

/* header */
#header {padding-top:20px; height:80px}
#header h1 {float:left; height:48px; padding-right:30px; margin:0 30px 0 15px; border-right:1px solid #dcdcdc}
#header .gnb {float:left}
#header .gnb li {float:left; width:70px; margin-right:30px; text-align:center}
#header .gnb li a {display:block; height:48px; text-decoration:none}
#header .gnb li a img {vertical-align:top}
#header .gnb li a span.txt_menu {display:block; margin-top:5px; font-size:15px; color:#dcdcdc; opacity:0.2}
#header .gnb li a:hover span.txt_menu {opacity:1 !important}
#header .gnb li.last {margin-right:0}
#header .date {float:left; height:48px; padding-left:30px; margin-left:30px; border-left:1px solid #dcdcdc}
#header .date em {font-size:12px; color:#dcdcdc}
#header .date img {margin-right:30px; vertical-align:middle}

/* navi */
#navi {position:fixed; top:50%; left:50%; margin-top:-27px; margin-left:520px}
#navi .prev {padding-bottom:10px; visibility:hidden}
#navi .next {padding-top:10px}
#navi .hr {height:1px; background:#dcdcdc}

/* content */
#contentWrap > div {min-height:800px; padding:100px 0 90px 0}
#contentWrap > div > div {width:980px; margin:0 auto; padding-top:50px}
#contentWrap h2 {float:left; position:relative;top:30px;width:256px;height:250px; padding-top:240px; margin-right:64px; text-align:center}
#contentWrap #layout_Home {background:#ffffff}
#contentWrap #layout_About {background:#FCC}
#contentWrap #layout_Portfolio {background:#CF9}
#contentWrap #layout_Skills {background:#c2f9ee}
#contentWrap #layout_Study {background:#FF9}
#contentWrap #layout_Contact {background:#d4ecfe}
#contentWrap #layout_Visual {background:#ddd0ee} 
#contentWrap .content {float:left; width:660px}
#contentWrap .content .title {padding-bottom:5px; border-bottom:1px solid}
#contentWrap .content .title em {font-weight:bold}

/* content : h2 */
.home h2 {background:url(../image/icon/common/h2_home.png) no-repeat; color:#333333}
.about h2 {background:url(../image/icon/common/h2_about.png) no-repeat}
.portfolio h2 {background:url(../image/icon/common/h2_portfolio.png) no-repeat}
.skills h2 {background:url(../image/icon/common/h2_skills.png) no-repeat; color:#333333}
.study h2 {background:url(../image/icon/common/h2_study.png) no-repeat}
.contact h2 {background:url(../image/icon/common/h2_contact.png) no-repeat}
.visual h2 {background:url(../image/icon/common/h2_test.png) no-repeat}

/* content : Home */
.home .content .title em {color:#666}
.home .content {color:#333333}
.home .screen {text-align:center; width:650px; height:200px; line-height:200px; margin:20px 0; border:5px solid #333333; border-radius:5px 5px 5px 5px; box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.4)}
.home .screen span {height:200px; line-height:200px; color:#333333}
.home .screen em {color:#333333}
.home ul.keyboard {margin-top:11px}
.home ul.keyboard li {float:left; text-align:center; background:#666666; color:#fff; width:50px; height:50px; line-height:50px; margin-right:11px; font-size:20px; border-radius:5px 5px 5px 5px; box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.4); cursor:pointer}
.home ul.keyboard li:hover {background:#333333}
.home ul.keyboard li:active {color:#ffc000}
.home ul.keyboard li.last {margin-right:0}

/* content : About */
.about .content .title em {color:#CC0033}

/* content : Portfolio */
.portfolio .content .title em {color:#060}
.portfolio .year_move {position:absolute; top:428px; left:0}
.portfolio .year_move p {float:left;}
.portfolio .year_move p.prev {margin-left:73px}
.portfolio .year_move p.prev a {padding-right:20px; border-right:1px solid #dcdcdc}
.portfolio .year_move p.next a {margin-left:20px}
.portfolio .year_move p a {display:block; width:34px; height:60px}
.portfolio .year_move p span.year {position:absolute; top:17px; color:#999}
.portfolio .year_move p.prev span.year {left:0}
.portfolio .year_move p.next span.year {right:-73px}

/* content : Skills */
.skills .content .title em {color:#03C}

/* content : Study */
.study .content .title em {color:#F63}

/* content : Contact */
.contact .content .title em {color:#06F}

/* content : Visual */
.visual .content .title em {color:#639}

/* box layout : Common */
.line {padding-top:20px}
.line .block {float:left; margin-right:20px; width:150px; background:#ffffff; border-radius:5px 5px 5px 5px; box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.4)}
.line .block.last {margin-right:0}
.line .block li.logo {display:block}
.line .block li.logo a {display:block; padding:25px}
.line .block li.desc {overflow:hidden; height:0px; background:#dcdcdc}
.line .block li.desc ul {width:120px; margin:10px 15px}
.line .block li.name {height:35px; line-height:20px; padding:5px; background:#dcdcdc; text-align:center; color:#333333; font-size:15px; font-weight:bold; border-top:1px solid #999999; border-radius:0 0 5px 5px}
.line .block li.name .name_desc {font-size:9px; font-weight:normal; color:#999999}

/* accordion : About */
.about ul.accordion {width:660px; height:500px; overflow:hidden; border-radius:5px 5px 5px 5px; box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.4)}
.about ul.accordion > li {float:left; width:128px; height:464px; margin-right:2px; padding:18px; background:#ffffff; box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.4)}
.about ul.accordion > li.on {background:#C03}
.about ul.accordion > li p {text-align:center}
.about ul.accordion > li p.about_title {color:#FCC; margin-top:50px}
.about ul.accordion > li.first {width:292px; border-radius:5px 0px 0px 5px}
.about ul.accordion > li.last {margin-right:0; border-radius:0px 5px 5px 0px}
.about ul.accordion ul.about_detail {margin-top:50px}
.about ul.accordion ul.about_detail li {height:25px; line-height:25px; overflow:hidden; color:#ccc; border-bottom:1px solid #ccc}
.about ul.accordion ul.about_detail li:hover {color:#fff}
.about ul.accordion ul.about_detail li em {float:right; display:none}
.about ul.accordion li.on ul.about_detail li em {display:block}

/* box layout : Portfolio */
.portfolio .line .block li.desc ul li {height:20px; line-height:20px; border-bottom:1px solid #999999; background:#dcdcdc}
.portfolio .line .block li.desc ul li.last {border:none}
.portfolio .line .block li.desc ul li:hover {color:#0070c0}
.portfolio .line .block li.desc ul li em {float:right}
.portfolio .line .block li.desc ul li em a {text-decoration:none; color:#cc0066}

/* box layout : Skills */
.skills .line .block li.desc ul li {text-align:center; height:20px; line-height:20px; border-bottom:1px solid #999999; background:#dcdcdc}
.skills .line .block li.desc ul li.percent {height:40px; line-height:40px; border:none; font-size:30px; color:#0070c0}
.skills .line .block li.desc ul li.per_box {border-bottom:none}
.skills .line .block li.desc ul li.per_box span {float:left; margin-right:5px; margin-bottom:5px; width:18px; height:18px; background:#0070c0; border:1px solid #333333; text-indent:100%; overflow:hidden; white-space:nowrap}
.skills .line .block li.desc ul li.per_box span.white {background-color:#ffffff}
.skills .line .block li.desc ul li.per_box span.per_last {margin-right:0}

/* box layout : Study */
.study .line .block li.desc ul li {text-align:center; height:20px; line-height:20px; border-bottom:1px solid #999999; background:#dcdcdc}
.study .line .block li.desc ul li.percent {height:40px; line-height:40px; border:none; font-size:30px; color:#0070c0}
.study .line .block li.desc ul li.per_box {border-bottom:none}
.study .line .block li.desc ul li.per_box span {float:left; margin-right:5px; margin-bottom:5px; width:18px; height:18px; background:#0070c0; border:1px solid #333333; text-indent:100%; overflow:hidden; white-space:nowrap}
.study .line .block li.desc ul li.per_box span.white {background-color:#ffffff}
.study .line .block li.desc ul li.per_box span.per_last {margin-right:0}

/* box layout : Contact */
.contact .line .mid_slide {float:left; width:320px; margin-right:20px}
.contact .line .mid_slide li {height:75px; padding:0 10px; background:#ffffff; text-align:center}
.contact .line .mid_slide li a {text-decoration:none; color:#cc0066}
.contact .line .mid_slide li.top img {margin-top:11px}
.contact .line .mid_slide li.top {border-radius:5px 5px 0px 0px}
.contact .line .mid_slide li.mid {height:0px; line-height:45px; overflow:hidden; color:#0070C0; font-size:20px; background:#ffffff; text-align:center;}
.contact .line .mid_slide li.bottom {border-radius:0px 0px 5px 5px; box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.4)}
.contact .line .last {margin-right:0}

/* shortcut Top */
#top {position:fixed; bottom:110px; left:50%; margin-left:520px; color:#333333; visibility:hidden}
#top a {display:block; width:30px; height:30px; line-height:30px; text-align:center; text-decoration:none; color:#333333; background:#ffffff; border-radius:5px 5px 5px 5px; box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.4); opacity:0.8}
#top a:hover {color:#ffffff; background:#000000; opacity:0.8}

/* FOOTER AREA */
#footer {text-align:center}
#footer .copyright {margin-top:35px}
#footer .version {float:right}