@charset "utf-8";
@import url('/2015/css/common.css');

/* Common */
.partition {position:relative; margin-top:50px; padding-top:50px; width:83%; min-width:300px; border-top:1px solid #e0e0e0}
h3 + .partition {margin-top:0px; padding-top:0px; border:0px}
.partition h4 {height:22px; line-height:21px; font-size:20px; color:#333; font-weight:normal} 
.partition h5 {margin-top:20px; height:16px; line-height:15px; font-size:14px; color:#00abeb; font-weight:normal}
.partition ul {margin-top:8px}
.partition ul li {padding-left:5px}

/* Portfolio */
.company.partition {background:none}
.company h4.logo {position:absolute; top:93px; right:0px; width:36%; max-width:224px; height:auto; line-height:auto}
.company h4.logo img {width:100%}
h3 + .company h4.logo {top:43px}
.company p.period,
.company p.work_position {padding-left:5px}
.company  ul.project a {text-decoration:underline}
.company  ul.project li {line-height:150%}
.company  ul.project li dl {padding-top:20px}
.company  ul.project li:first-child dl {padding-top:0px}
.company  ul.project li dl dt {color:#000}

/* Profile */
.profile .mypic {width:60%; max-width:400px; min-width:300px}
.profile .mypic img {width:100%}
.profile em {font-weight:bold; font-style:normal}
.profile li {line-height:180%}

/* Bookmark */
.partition.bookmark {background:url('/2015/images/bg_jbDesign.png') right 80px no-repeat}
.bookmark li {line-height:180%}
.bookmark li a:hover {text-decoration:underline}

/* Template */
.partition.template {}

	/* Layer Popup */
.layer_pop {display:none; position:fixed; top:0px; left:0px !important; width:100%; height:100%; z-index:510}
.layer_pop .shadow {position:absolute; top:0px; left:0px; width:100%; height:100%; background:#393939; opacity:0.2; filter:alpha(opacity=20); z-index:500}
.layer_pop .pop_body {position:relative; top:50%; margin:0px auto; margin-top:-250px; padding-bottom:15px; width:45%; min-width:270px; background:#fff; z-index:520; *zoom:1; opacity:1.0; filter:alpha(opacity=100)}
.layer_pop .pop_body:after {content:""; display:block; clear:both}
.layer_pop .pop_body h6 {height:45px; line-height:43px; text-indent:20px; white-space:nowrap; font-size:16px; color:#fff; background:url('../images/popup/bg_title.gif') repeat-x}
.layer_pop .pop_body .pop_contents {min-height:300px; max-height:300px; padding-top:15px; background:#fff; overflow-x:hidden; overflow-y:auto; *zoom:1}
.layer_pop .pop_body .pop_contents:after {content:""; display:block; clear:both}
*:first-child+html .layer_pop .pop_body .pop_contents {padding-top:15px}	 /* IE7 Hack 추가 */
.layer_pop .pop_body .btn_area {margin:15px auto 0px; width:96%; text-align:right}
.layer_pop a.close_pop {position:absolute; top:15px; right:15px}

#webtoon.layer_pop .pop_body .pop_contents {text-align:center}
#webtoon.layer_pop .pop_body .pop_contents img {position:relative; width:75%; min-width:260px; z-index:540}


/* Layer Pop */
.layer {display:none;position:absolute; left:42%;width:420px;height:500px;border:8px solid #000;background:#fff;float:left;z-index:10000}
.layer p {margin:0px;padding:0px;width:100%;float:left}
.layer .top {padding-bottom:5px;height:14px;line-height:14px;text-align:right;background:#000}
.layer .top a:link {vertical-align:top;font-weight:bold;color:#fff}
.layer .info {margin:0px;padding:0px;width:100%;height:481px;overflow:auto}


	/* Button */
.btn_area a, .btn_area a > span  {display:inline-block; background:url('../images/popup/bg_btn.gif') no-repeat}
.btn_area a  {padding-right:15px}
.btn_area a > span {padding-left:15px; white-space:nowrap}
.btn_area a {height:26px; background-position:right -48px}
.btn_area a > span {height:26px; color:#fff; font-weight:bold; line-height:25px; background-position:0px -48px}
.btn_area a:hover > span,
.btn_area a:focus > span {color:#e7ffaf}



@media screen and (max-width:768px) {
	.partition.bookmark {background-size:40%; background-position:right 50px}
	
}

@media screen and (max-width:712px) {
}

	/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width:480px) {
	body {min-width:280px}
	/* Common */
	.partition {padding-left:3%; padding-right:3%; width:94%; min-width:280px}	
	h3 + .partition {margin-top:50px}
	
	/* Portfolio */		
	.company h4#n2m, .company h4#groundzero, .company h4#cbsi, .company h4#artchannel, .company h4#niceculture {display:none}
	.company h4.logo {position:relative; top:0px; left:0px; width:224px}
	h3 + .company h4.logo {top:0px}
	
	/* Profile */
	.partition.profile {padding-bottom:80px}
	h3 + .partition.profile {margin-top:20px}
	.profile .mypic {margin:0px auto; width:85%; min-width:250px}
	
	/* Bookmark, Template */	
	.partition.bookmark , .partition.template {background-position:99% 0px !important}
	.bookmark h4#jbBookmark,
	.template h4#jbTemp {display:none}
	
	/* Layer Popup */
	.layer_pop {position:absolute; top:120px}		
	.layer_pop .shadow {display:none}
	
	.layer_pop .pop_body {border:2px solid #252f3a}
}

@media screen and (max-width:320px) {
	body {}
}