* {margin:0; padding:0; border:0;}
body {font-family: 'corbel';}
#wrap {width:100%; margin:0 auto;}
/*img {-ms-interpolation-mode:bicubic; } ����ȵ�*/
li {list-style:none;}
a {text-decoration:none;}

@font-face {font-family: 'NanumGothic';  src: url('../fonts/NanumGothic.ttf') format('truetype');}
@font-face {font-family: 'NanumGothic';  src: url('../fonts/NanumGothic.otf') format('otf');}
@font-face {font-family: 'NanumGothic';  src: url('../fonts/NanumGothic.woff') format('woff');}

@font-face {font-family: 'NanumGothicBold';  src: url('../fonts/NanumGothicBold.ttf') format('truetype');}
@font-face {font-family: 'NanumGothicBold';  src: url('../fonts/NanumGothicBold.otf') format('otf');}
@font-face {font-family: 'NanumGothicBold';  src: url('../fonts/NanumGothicBold.woff') format('woff');}

@font-face {font-family: 'NBG';  src: url('../fonts/NanumGothicBold.ttf') format('truetype');}
@font-face {font-family: 'NBG';  src: url('../fonts/NanumGothicBold.otf') format('otf');}
@font-face {font-family: 'NBG';  src: url('../fonts/NanumGothicBold.woff') format('woff');}

@font-face {font-family: 'AuctionGothic Medium';  src: url('../auction.exe') format('truetype');}
@font-face {font-family: 'AuctionGothic Medium';  src: url('../auction.exe') format('otf');}
@font-face {font-family: 'AuctionGothic Medium';  src: url('../auction.exe') format('woff');}

@font-face {font-family: 'AuctionGothic Bold';  src: url('../auction.exe') format('truetype');}
@font-face {font-family: 'AuctionGothic Bold';  src: url('../auction.exe') format('otf');}
@font-face {font-family: 'AuctionGothic Bold';  src: url('../auction.exe') format('woff');}


/************************************************************************************/
@media all and (max-width:359px){

li {list-style:none;} /*added here again for ie-browser*/

/*-- general --*/
.small_letter_kor {font:normal 11px 'NanumGothic'; color:#666; line-height:13px;}
.small_letter_eng {font:normal 11px 'NanumGothic'; color:#666; letter-spacing:-0.2pt; line-height:12px;}
.mid_letter_kor {font:normal 12px 'NanumGothicBold;}
.mid_letter_eng {font:normal 13px 'NanumGothicBold';}
.big_letter {font:normal 15px 'NanumGothicBold',NanumGothic; letter-spacing:-0.2pt; line-height:19px; display:block;}

a {text-decoration:none;}

/******* header *******/
header {width:100%; height:90px; position:fixed; border-bottom:1px solid #d5d5d5; top:0; background-color:#f5f4f4; z-index:100;}
		header #header_wrap {width:95%; margin:0 auto;}

				/*** 1st ***/
				header .name {float:left; margin:2%;}
				/*** 2nd ***/
				header .check_port li {margin-top:15px; font-size:10px; float:right;}
				/*** 3rd ***/
				header .big_box {width:100%; height:90px; float:right;}
						header .big_box #v1 {font-weight:bold; padding-top:8px;} /*phone#: class doesn't work in this case*/
						header .big_box #v2 {margin-top:-30px; width:61%; float:right;} /*class doesn't work in this case*/
								/*** icons ***/
								header .big_box #v2 .small_box {width:34px; height:35px; background-color:#7d85b9; font:bold 24px 'consolas'; line-height:35px; text-align:center; margin-right:5px; margin-left:30px; color:#fff; display:block; float:left;}
										.small_box a {background-color:#7d85b9; color:#fff; text-decoration:none;}
										.small_box a:hover {background-color:blue;} /*why doesn't this work?*/
										.small_box a:visited {background-color:#7d85b9;}
								header .icon_side {opacity:0;} /*class doesn't work in this case*/
								header .big_box #v2 .bt_top {width:34px; height:34px; margin-left:10px; border:1px solid #ddd; border-bottom:none;}
										header .big_box #v2 .bt_top img {width:34px; height:34px; float:right;}

				header ul dl dt {float:left; /*margin-top:10px; doesn't work here*/}
				header ul dl dd {color:#369; /*margin-left:20px;doesn't work here*/ float:left;}


/******* contents *******/
#contents_wrap {width:95%; margin:0 auto; padding-top:80px; background-color:#fff;}
		#contents_wrap ul {width:100%; margin:0 auto;}
		#contents_wrap li {float:left;}

				/*** left: co_tit_profile & my pic ***/
				#contents_wrap li.title_my_profile img {width:17%; position:absolute; left:2.5%; top:190px; opacity:0;}
				#contents_wrap li.my_pic img {width:70%; position:absolute; left:15%; top:175px; margin:0 auto;}
				/*** co_works ***/		
				#contents_wrap ul.co_works {width:95%; position:absolute; right:2.5%; top:1470px;}
						.tit_co_big_letter {font:bold 13px 'NanumGothic',�������; display:block; margin-top:10px;}
						.tit_co_small_letter {font:normal 11px 'NanumGothic',�������; line-height:15px; display:block; margin-top:5px;}
				
				#contents_wrap li.icon_skills img {width:92.5%; position:absolute; right:5%; top:1380px;}
				
				/*** right: top_intro ***/
				#contents_wrap .intro_con_right {width:100%;}
						#contents_wrap .intro_con_right ul li {width:100%; float:right;}/*need this for bottom contents*/
							   /** big_title **/
							   .intro_con_right img {width:100%; margin-top:35px;}
				#contents_wrap .intro_con_right .intro_kor {width:95%; position:absolute; left:2.5%; top:450px;}
				#contents_wrap .intro_con_right .intro_eng {width:95%; position:absolute; left:2.5%; top:910px;}
						.intro_con_right .mid_letter_kor, .intro_con_right .mid_letter_eng {margin:10px 0 2px 0;}

				/*** portfolio & project detail ***/
				#section_2 {background-color:#fff;}
				/**ports img**/
				#section_2 li img {width:100%; margin-top:1640px;}
				/** article **/
				#section_2 ul {width:100%;}/*need this and put ul completely!!*/
						ul li.article_kor {width:100%; margin-top:10px;}/*we must add li*/
						ul li.article_eng {width:100%; margin-top:-80px}
						ul li.mid_letter_kor {margin:10px 0 5px 0;}
								
/******* footer *******/
footer {width:100%; height:65px; position:fixed; border-top:2px solid #d5d5d5; bottom:0; background-color:#eaeaea; z-index:100; padding:10px;}
		footer div {width:80%; margin-left:10px;}
				footer span {float:left; font-size:11px; line-height:12px;}
				footer p {float:right; margin-top:-20px; margin-right:-45px;}
						footer p a {float:left; width:36px;}
						footer p img {width:25px; float:right; margin-left:-10px;}

}

/************************************************************************************/
@media all and (min-width:360px) and (max-width:599px){

li {list-style:none;} /*added here again for ie-browser*/

/*-- general --*/
.small_letter_kor {font:normal 11px 'NanumGothic',�������; color:#666; line-height:13px;}
.small_letter_eng {font:normal 11px 'NanumGothic',�������; color:#666; letter-spacing:0.1pt; line-height:12px;}
.mid_letter_kor {font:normal 13px 'NanumGothicBold',�������; letter-spacing:-0.2pt;}
.mid_letter_eng {font:normal 14px 'NanumGothicBold',�������; letter-spacing:-0.2pt;}
.big_letter {font:normal 17px 'NanumGothicBold',NanumGothic; letter-spacing:-0.5pt; line-height:19px; display:block;}

a {text-decoration:none;}

/******* header *******/
header {width:100%; height:100px; position:fixed; border-bottom:1px solid #d5d5d5; top:0; background-color:#f5f4f4; z-index:100;}
		header #header_wrap {width:90%; margin:0 auto;}

				/*** 1st ***/
				header .name {float:left; margin:2% 3% 0 0;}
				/*** 2nd ***/
				header .check_port li {margin-top:5%; float:right;}
				/*** 3rd ***/
				header .big_box {width:100%; height:94px; float:right; position:absolute; left:5%; top:50px;}
						header .big_box #v1 {font-weight:bold; margin-top:25px;} /*phone#: class doesn't work in this case*/
						header .big_box #v2 {margin-top:-28px; margin-left:10px; width:61%; float:right;} /*class doesn't work in this case*/
								/*** icons ***/
								header .big_box #v2 .small_box {width:38px; height:40px; background-color:#7d85b9; font:bold 25px 'consolas'; line-height:37px; text-align:center; margin-right:5px; color:#fff; display:block; float:left; margin-left:30px;}
										.small_box a {background-color:#7d85b9; color:#fff; text-decoration:none;}
										.small_box a:hover {background-color:blue;} /*why doesn't this work?*/
										.small_box a:visited {background-color:#7d85b9;}
								header .big_box #v2 .bt_top {width:38px; height:38px; margin-left:20px; border:1px solid #ddd; border-bottom:none;}
										header .big_box #v2 .bt_top img {width:38px; height:38px; float:right;}

				header ul dl dt {float:left; /*margin-top:10px; doesn't work here*/}
				header ul dl dd {color:#369; /*margin-left:20px;doesn't work here*/ float:left;}


/******* contents *******/
#contents_wrap {width:90%; margin:0 auto; padding-top:80px; background-color:#fff;}
		#contents_wrap ul {width:100%; margin:0 auto;}
		#contents_wrap li {float:left;}

				/*** left: co_tit_profile & my pic ***/
				#contents_wrap li.title_my_profile img {width:17%; position:absolute; left:5%; top:190px; opacity:0;}
				#contents_wrap li.my_pic img {width:70%; position:absolute; left:15%; top:180px; margin:0 auto;}
				/*** co_works ***/		
				#contents_wrap ul.co_works {width:90%; position:absolute; right:5%; top:1450px;}
						.tit_co_big_letter {font:bold 14px 'NanumGothic',�������; display:block; margin-top:10px;/*need this*/ letter-spacing:-0.2pt;}
						.tit_co_small_letter {font:normal 12px 'NanumGothic',�������; line-height:15px; display:block; margin-top:5px;}
				
				#contents_wrap li.icon_skills img {width:90%; position:absolute; right:5%; top:1350px;}
				
				/*** right: top_intro ***/
				#contents_wrap .intro_con_right {width:100%;}
						#contents_wrap .intro_con_right ul li {width:100%; float:right;}/*need this for bottom contents*/
							   /** big_title **/
							   .intro_con_right img {width:100%; margin-top:40px;} /*big_title*/
				#contents_wrap .intro_con_right .intro_kor {width:90%; position:absolute; left:5%; top:480px;}
				#contents_wrap .intro_con_right .intro_eng {width:90%; position:absolute; left:5%; top:920px;}
						.intro_con_right .mid_letter_kor, .intro_con_right .mid_letter_eng {margin:10px 0 2px 0;}

				/*** portfolio & project detail ***/
				#section_2 {background-color:#fff;}
				/**ports img**/
				#section_2 li img {width:100%; margin-top:1300px;}
				/** article **/
				#section_2 ul {width:100%;}/*need this and put ul completely!!*/
						ul li.article_kor {width:100%; margin-top:10px;}/*we must add li*/
						ul li.article_eng {width:100%; margin-top:-80px}
						ul li.mid_letter_kor {margin:10px 0 5px 0;}
								
						

/******* footer *******/
footer {width:100%; height:55px; position:fixed; border-top:2px solid #d5d5d5; bottom:0; background-color:#eaeaea; z-index:100; padding:5px;}
		footer div {width:80%; margin-left:15px;}
				footer span {float:left; font-size:11px; line-height:12px;}
				footer p {float:right; margin-top:-20px; margin-right:-45px;}
						footer p a {float:left; width:36px;}
						footer p img {width:25px; float:right; margin-left:-10px;}

}

/************************************************************************************/
@media all and (min-width:600px) and (max-width:979px) {

li {list-style:none;} /*added here again for ie-browser*/

/*-- general --*/
.small_letter_kor {font:normal 12px 'NanumGothic',�������; color:#666; line-height:14px;}
.small_letter_eng {font:normal 12px 'NanumGothic',�������; color:#666; letter-spacing:0.1pt; line-height:13px;}
.mid_letter_kor {font:bold 14px 'NanumGothic',�������; letter-spacing:-0.2pt;}
.mid_letter_eng {font:bold 15px 'NanumGothic',�������;}
.big_letter {font:bold 20px 'consolas',NanumGothic; letter-spacing:-0.5pt; line-height:24px; display:block;}

a {text-decoration:none;}

/******* header *******/
header {width:100%; height:84px; position:fixed; border-bottom:1px solid #d5d5d5; top:0; background-color:#f5f4f4; z-index:100;}
		header #header_wrap {width:90%; margin:0 auto;}

				/*** 1st ***/
				header .name {float:left; margin:1% 3% 0 0;}
				/*** 2nd ***/
				header .check_port li {margin-top:4%; float:left;}
				/*** 3rd ***/
				header .big_box {width:34%; height:96px; float:right;}
						header .big_box #v1 {font-weight:bold; margin-top:12px;} /*phone#: class doesn't work in this case*/
						header .big_box #v2 {margin-top:15px;} /*class doesn't work in this case*/
								/*** icons ***/
								.small_box {width:45px; height:47px; background-color:#7d85b9; font:bold 32px 'consolas'; line-height:48px; text-align:center; margin-top:-6px; margin-right:5px; color:#fff; float:left; display:block;}
										.small_box a {background-color:#7d85b9; color:#fff; text-decoration:none;}
										.small_box a:hover {background-color:blue;} /*why doesn't this work?*/
										.small_box a:visited {background-color:#7d85b9;}
								header .big_box #v2 .bt_top {width:45px; height:46px; margin-left:40px; margin-top:-6px; border:1px solid #ddd; border-bottom:none;}
								header .big_box #v2 .bt_top img {width:45px; height:46px; float:right;}

				header ul dl dt {float:left; /*margin-top:10px; doesn't work here*/}
				header ul dl dd {color:#369; /*margin-left:20px;doesn't work here*/ float:left;}


/******* contents *******/
#contents_wrap {width:90%; margin:0 auto; padding-top:80px; background-color:#fff;}
		#contents_wrap ul {width:100%; margin:0 auto;}
		#contents_wrap li {float:left;}

				/*** left: co_tit_profile & my pic ***/
				#contents_wrap li.title_my_profile img {width:18%; position:absolute; left:5%; top:110px;}
				#contents_wrap li.my_pic img {width:25%; position:absolute; left:5%; top:150px; float:left;}
				/*** co_works ***/		
				#contents_wrap ul.co_works {width:60%; position:absolute; right:5%; top:180px; float:right;}
						.tit_co_big_letter {font:bold 14px 'NanumGothic',�������; letter-spacing:-0.5pt; margin-top:10px;}
						.tit_co_small_letter {font:normal 12px 'NanumGothic',�������; line-height:13px; display:block;}
				
				#contents_wrap li.icon_skills img {width:100%; margin-top:30px;}
				
				/*** right: top_intro ***/
				#contents_wrap .intro_con_right {width:100%;}
						#contents_wrap .intro_con_right ul li {width:100%;}/*need this for bottom contents*/
							   /** big_title **/
							   .intro_con_right img {width:67%; float:right; margin-top:40px;}
				#contents_wrap .intro_con_right .intro_kor {width:47%; float:left; margin-top:280px;}
				#contents_wrap .intro_con_right .intro_eng {width:49%; float:right; margin-top:280px;}
						.intro_con_right .mid_letter_kor, .intro_con_right .mid_letter_eng {margin:15px 0 5px 0;}

				/*** portfolio & project detail ***/
				#section_2 {background-color:#fff;}
				/**ports img**/
				#section_2 li img {width:100%; margin-top:20px;}
				/** article **/
				#section_2 ul {width:100%; margin-top:20px;}/*need this and put ul completely!!*/
						ul li.article_kor {width:43%; padding-right:2%; border-right:1px solid #ddd; float:left;}/*we must add li*/
						ul li.article_eng {width:49%; margin-left:3%; float:right;}
								ul li.mid_letter_kor {margin:10px 0 5px 0;}
						

/******* Footer Start *******/
		footer {width:100%; height:60px; position:fixed; border-top:2px solid #d5d5d5; bottom:0; background-color:#eaeaea; z-index:100; padding:5px;}
				footer div {width:85%; margin:0 auto;}
				footer div span {float:left; font-size:11px; margin-left:-20px;}
						footer p {float:right;}
						footer p a {float:left; width:36px;}
						footer p img {width:32px; margin-top:-30px; margin-left:10px; padding-bottom:2%;}
								footer p a img {opacity:0.8; -webkit-opacity:0.8; -ms-opacity:0.8; -moz-opacity:0.8; -o-opacity:0.8;}										
								footer p a img:hover {opacity:1; -webkit-opacity:1; -ms-opacity:1; -moz-opacity:1; -o-opacity:1;}

}


/************************************************************************************/
@media all and (min-width:980px) and (max-width:1499px) {

li {list-style:none;} /*added here again for ie-browser*/

/*-- general --*/
.small_letter_kor {font:normal 13px 'NanumGothic',�������; color:#666; line-height:15px;}
.small_letter_eng {font:normal 13px 'NanumGothic',�������; color:#666; letter-spacing:0.1pt; line-height:13px;}
.mid_letter_kor {font:bold 17px 'NanumGothic',�������; letter-spacing:-0.2pt;}
.mid_letter_eng {font:bold 18px 'NanumGothic',�������; letter-spacing:-0.2pt;}
.big_letter {font:bold 25px 'consolas',NanumGothic; letter-spacing:-0.5pt; line-height:25px; display:block;}

a {text-decoration:none;}

/******* header *******/
header {width:100%; height:96px; position:fixed; border-bottom:1px solid #d5d5d5; top:0; background-color:#f5f4f4; z-index:100;}
		header #header_wrap {width:90%; margin:0 auto;}

				/*** 1st ***/
				header .name {float:left; margin:1% 3% 0 0;}
				/*** 2nd ***/
				header .check_port li {margin-top:4%; float:left;}
				/*** 3rd ***/
				header .big_box {width:35%; height:96px; float:right; border-left:1px solid #d5d5d5; border-right:1px solid #d5d5d5;}
						header .big_box #v1 {font-weight:bold; margin:12px 0 0 20px;} /*phone#: class doesn't work in this case*/
						header .big_box #v2 {border-top:1px solid #d5d5d5; margin-top:15px;} /*class doesn't work in this case*/
								/*** icons ***/
								.small_box {width:52px; height:54px; background-color:#7d85b9; font:bold 35px 'consolas'; line-height:55px; text-align:center; margin:0 auto; color:#fff; float:left; display:block;}
										.small_box a {background-color:#7d85b9; color:#fff; text-decoration:none;}
										.small_box a:hover {background-color:blue;} /*why doesn't this work?*/
										.small_box a:visited {background-color:#7d85b9;}
								header .icon_side {} /*class doesn't work in this case*/
								header .big_box #v2 .bt_top {width:52px; height:52px; margin-left:20px; margin-top:0; border-left:1px solid #ddd; /***border-right:1px solid #ddd;***/}
								header .big_box #v2 .bt_top img {width:52px; height:52px;}

				header ul dl dt {float:left; /*margin-top:10px; doesn't work here*/}
				header ul dl dd {color:#369; /*margin-left:20px;doesn't work here*/ float:left; margin-top:8px; margin-left:8px;}


/******* contents *******/
#contents_wrap {width:90%; margin:0 auto; padding-top:80px; background-color:#fff;}
		#contents_wrap ul {width:100%; margin:0 auto;}
		#contents_wrap li {float:left;}

				/*** left: co_tit_profile & my pic ***/
				#contents_wrap li.title_my_profile img {width:13%; position:absolute; left:5%; top:110px;}
				#contents_wrap li.my_pic img {width:28%; position:absolute; left:5%; top:160px; float:left;}
				/*** co_works ***/		
				#contents_wrap ul.co_works {width:30%; position:absolute; left:5%; top:640px;}
						.tit_co_big_letter {font:bold 16px 'NanumGothic',�������; display:block; margin-top:5px;/*need this*/ letter-spacing:-0.2pt;}
						.tit_co_small_letter {font:normal 13px 'NanumGothic',�������; line-height:15px; display:block; margin-top:5px;}
				
				#contents_wrap li.icon_skills img {width:100%; margin-top:30px;}
				
				/*** right: top_intro ***/
				#contents_wrap .intro_con_right {width:60%; float:right;}
						#contents_wrap .intro_con_right ul li {width:100%; float:right;}/*need this for bottom contents*/
							   /** big_title **/
							   .intro_con_right img {width:100%; float:right; margin-top:70px; margin-bottom:20px;}
				#contents_wrap .intro_con_right .intro_kor {width:45%; float:left;}
				#contents_wrap .intro_con_right .intro_eng {width:47%; float:right;}
						.intro_con_right .mid_letter_kor, .intro_con_right .mid_letter_eng {margin:15px 0 5px 0;}

				/*** portfolio & project detail ***/
				#section_2 {background-color:#fff;}
				/**ports img**/
				#section_2 li img {width:100%; margin-top:20px;}
				/** article **/
				#section_2 ul {width:100%; margin-top:20px;}/*need this and put ul completely!!*/
						ul li.article_kor {width:43%; padding-right:2%; /***border-right:1px solid #ddd;***/ float:left;}/*we must add li*/
						ul li.article_eng {width:49%; margin-left:3%; float:right;}
								ul li.mid_letter_kor {margin:10px 0 5px 0;}
						

		/******* Footer Start *******/
		footer {width:100%; height:50px; position:fixed; border-top:2px solid #d5d5d5; bottom:0; background-color:#eaeaea; z-index:100; padding:10px;}
				footer div {width:90%; margin:0 auto;}
				footer div span {float:left; font-size:13px; margin-top:5px;}
						footer p {margin:5px 0 0 5px; float:right;}
						footer p a {float:left; width:36px;}
						footer p img {width:32px;}
								footer p a img {opacity:0.8; -webkit-opacity:0.8; -ms-opacity:0.8; -moz-opacity:0.8; -o-opacity:0.8;}										
								footer p a img:hover {opacity:1; -webkit-opacity:1; -ms-opacity:1; -moz-opacity:1; -o-opacity:1;}
}

/************************************************************************************/
@media all and (min-width:1500px) and (max-width:1919px) {

li {list-style:none;} /*added here again for ie-browser*/

/*-- general --*/
.small_letter_kor {font:normal 13px 'NanumGothic',�������; color:#666; line-height:16px;}
.small_letter_eng {font:normal 13px 'NanumGothic',�������; color:#666; letter-spacing:0.1pt; line-height:14px;}
.mid_letter_kor {font:bold 17px 'NanumGothic',�������; letter-spacing:-0.5pt;}
.mid_letter_eng {font:bold 18px 'NanumGothic',�������; letter-spacing:-0.2pt;}
.big_letter {font:bold 25px 'consolas',NanumGothic; letter-spacing:-0.2pt; line-height:25px; display:block;}

a {text-decoration:none;}

/******* header *******/
header {width:100%; height:93px; position:fixed; border-bottom:1px solid #d5d5d5; top:0; background-color:#f5f4f4; z-index:100;}
		header #header_wrap {width:85%; margin:0 auto;}

				/*** 1st ***/
				header .name {float:left; margin:1% 3% 0 0;}
				/*** 2nd ***/
				header .check_port li {margin-top:3%; float:left;}
				/*** 3rd ***/
				header .big_box {width:30%; height:93px; float:right; border-left:1px solid #d5d5d5; /***border-right:1px solid #ddd;***/}
						header .big_box #v1 {font-weight:bold; margin:10px 0 0 20px;} /*class doesn't work in this case*/
						header .big_box #v2 {border-top:1px solid #d5d5d5; margin-top:10px;} /*class doesn't work in this case*/
								/*** icons ***/
								.small_box {width:54px; height:56px; background-color:#7d85b9; font:bold 35px 'consolas'; line-height:55px; text-align:center; margin:0 auto; color:#fff; float:left; display:block;}
										.small_box a {background-color:#7d85b9; color:#fff; text-decoration:none;}
										.small_box a:hover {background-color:blue;} /*why doesn't this work?*/
										.small_box a:visited {background-color:#7d85b9;}
								header .big_box #v2 .bt_top {width:54px; height:56px; margin-left:40px; margin-top:0; border-left:1px solid #ddd; border-right:1px solid #ddd;}
								header .big_box #v2 .bt_top img {width:54px; height:56px;}

				header ul dl dt {float:left; /*margin-top:10px; doesn't work here*/}
				header ul dl dd {color:#369; /*margin-left:20px;doesn't work here*/ float:left; margin-top:10px; margin-left:10px;}/*icon_side*/


/******* contents *******/
#contents_wrap {width:85%; margin:0 auto; padding-top:80px; background-color:#fff;}
		#contents_wrap ul {width:100%; margin:0 auto;}
		#contents_wrap li {float:left;}

				/*** left: intro_con ***/
				#contents_wrap .intro_con_left li.title_my_profile img {width:12%; position:absolute; left:7.5%; top:110px;}
				#contents_wrap .intro_con_left li.my_pic img {width:28%; position:absolute; left:7.5%; top:170px; float:left;}
				/*** left: co_works ***/		
				#contents_wrap ul.co_works {width:30%; position:absolute; left:7.5%; top:740px;}
						.tit_co_big_letter {font:bold 16px 'NanumGothic',�������; display:block; margin-top:15px;/*need this*/ letter-spacing:-0.2pt;}
						.tit_co_small_letter {font:normal 13px 'NanumGothic',�������; line-height:15px; display:block; margin-top:5px;}

				#contents_wrap li.icon_skills img {width:100%; margin-top:30px;}

				/*** right: intro_con ***/
				#contents_wrap .intro_con_right {width:60%; float:right;}
						#contents_wrap .intro_con_right ul li {width:100%; float:right;}/*need this for bottom contents*/
							   /** big_title **/
							   .intro_con_right img {width:100%; float:right; margin-top:70px; margin-bottom:20px;}
				#contents_wrap .intro_con_right .intro_kor {width:45%; float:left;}
				#contents_wrap .intro_con_right .intro_eng {width:47%; float:right;}
						.intro_con_right .mid_letter_kor, .intro_con_right .mid_letter_eng {margin:15px 0 5px 0;}

				/*** portfolio & project detail ***/
				#section_2 {background-color:#fff;}
				/**ports img**/
				#section_2 li img {width:100%; margin-top:25px;}
				/** article **/
				#section_2 ul {width:100%; margin-top:25px;}/*need this and put ul completely!!*/
						ul li.article_kor {width:43%; padding-right:2%; /***border-right:1px solid #ddd;***/ float:left;}/*we must add li*/
						ul li.article_eng {width:49%; margin-left:3%; float:right;}
								ul li.mid_letter_kor {margin:10px 0 5px 0;}
						

		/******* Footer Start *******/
		footer {width:100%; height:50px; position:fixed; border-top:2px solid #d5d5d5; bottom:0; background-color:#eaeaea; z-index:100; padding:10px;}
				footer div {width:90%; margin:0 auto;}
				footer div span {float:left; font-size:13px; margin-top:5px;}
						footer p {margin:5px 0 0 5px; float:right;}
						footer p a{float:left; width:36px;}
						footer p img {width:32px;}
								footer p a img {opacity:0.8; -webkit-opacity:0.8; -ms-opacity:0.8; -moz-opacity:0.8; -o-opacity:0.8;}										
								footer p a img:hover {opacity:1; -webkit-opacity:1; -ms-opacity:1; -moz-opacity:1; -o-opacity:1;}

}


/************************************************************************************/
@media all and (min-width:1920px) {

li {list-style:none;} /*added here again for ie-browser*/

/*-- general --*/
.small_letter_kor {font:normal 13px 'NanumGothic',�������; color:#666; line-height:16px;}
.small_letter_eng {font:normal 13px 'NanumGothic',�������; color:#666; letter-spacing:0.1pt; line-height:14px;}
.mid_letter_kor {font:bold 17px 'NanumGothic',�������; letter-spacing:-0.5pt;}
.mid_letter_eng {font:bold 18px 'NanumGothic',�������; letter-spacing:-0.2pt;}
.big_letter {font:bold 25px 'consolas',NanumGothic; letter-spacing:-0.2pt; line-height:25px; display:block;}

a {text-decoration:none;}

/******* header *******/
header {width:100%; height:93px; position:fixed; border-bottom:1px solid #d5d5d5; top:0; background-color:#f5f4f4; z-index:100;}
		header #header_wrap {width:85%; margin:0 auto;}

				/*** 1st ***/
				header .name {float:left; margin:1% 3% 0 0;}
				/*** 2nd ***/
				header .check_port li {margin-top:3%; float:left;}
				/*** 3rd ***/
				header .big_box {width:30%; height:93px; float:right; border-left:1px solid #d5d5d5; border-right:1px solid #d5d5d5;}
						header .big_box #v1 {font-weight:bold; margin:10px 0 0 20px;} /*class doesn't work in this case*/
						header .big_box #v2 {border-top:1px solid #d5d5d5; margin-top:10px;} /*class doesn't work in this case*/
								/*** icons ***/
								.small_box {width:54px; height:56px; background-color:#7d85b9; font:bold 35px 'consolas'; line-height:55px; text-align:center; margin:0 auto; color:#fff; float:left; display:block;}
										.small_box a {background-color:#7d85b9; color:#fff; text-decoration:none;}
										.small_box a:hover {background-color:blue;} /*why doesn't this work?*/
										.small_box a:visited {background-color:#7d85b9;}
								header .big_box #v2 .bt_top {width:54px; height:56px; margin-left:40px; margin-top:0; border-left:1px solid #ddd; border-right:1px solid #ddd;}
								header .big_box #v2 .bt_top img {width:54px; height:56px;}

				header ul dl dt {float:left; /*margin-top:10px; doesn't work here*/}
				header ul dl dd {color:#369; /*margin-left:20px;doesn't work here*/ float:left; margin-top:10px; margin-left:10px;}/*icon_side*/


/******* contents *******/
#contents_wrap {width:85%; margin:0 auto; padding-top:80px; background-color:#fff;}
		#contents_wrap ul {width:100%; margin:0 auto;}
		#contents_wrap li {float:left;}

				/*** left: intro_con ***/
				#contents_wrap .intro_con_left li.title_my_profile img {width:12%; position:absolute; left:7.5%; top:110px;}
				#contents_wrap .intro_con_left li.my_pic img {width:28%; position:absolute; left:7.5%; top:170px; float:left;}
				/*** left: co_works ***/		
				#contents_wrap .intro_con_left ul ul.co_works {width:30%; position:absolute; left:7.5%; top:800px;}
						.tit_co_big_letter {font:bold 16px 'NanumGothic',�������; display:block; margin-top:15px;/*need this*/ letter-spacing:-0.2pt;}
						.tit_co_small_letter {font:normal 13px 'NanumGothic',�������; line-height:15px; display:block; margin-top:5px;}

				#contents_wrap li.icon_skills img {width:100%; margin-top:30px;}

				/*** right: intro_con ***/
				#contents_wrap .intro_con_right {width:60%; float:right;}
						#contents_wrap .intro_con_right ul li {width:100%; float:right;}/*need this for bottom contents*/
							   /** big_title **/
							   .intro_con_right img {width:100%; float:right; margin-top:70px; margin-bottom:20px;}
				#contents_wrap .intro_con_right .intro_kor {width:45%; float:left;}
				#contents_wrap .intro_con_right .intro_eng {width:47%; float:right;}
						.intro_con_right .mid_letter_kor, .intro_con_right .mid_letter_eng {margin:15px 0 5px 0;}

				/*** portfolio & project detail ***/
				#section_2 {background-color:#fff;}
				/**ports img**/
				#section_2 li img {width:100%; margin-top:25px;}
				/** article **/
				#section_2 ul {width:100%; margin-top:25px;}/*need this and put ul completely!!*/
						ul li.article_kor {width:43%; padding-right:2%; /***border-right:1px solid #ddd;***/ float:left;}/*we must add li*/
						ul li.article_eng {width:49%; margin-left:3%; float:right;}
								ul li.mid_letter_kor {margin:10px 0 5px 0;}
						

		/******* Footer Start *******/
		footer {width:100%; height:54px; position:fixed; border-top:2px solid #d5d5d5; bottom:0; background-color:#eaeaea; z-index:100; padding:10px;}
				footer div {width:90%; margin:0 auto;}
				footer div span {float:left; font-size:13px; margin-top:5px;}
						footer p {margin:5px 0 0 5px; float:right;}
						footer p a{float:left; width:36px;}
						footer p img {width:32px;}
								footer p a img {opacity:0.8; -webkit-opacity:0.8; -ms-opacity:0.8; -moz-opacity:0.8; -o-opacity:0.8;}										
								footer p a img:hover {opacity:1; -webkit-opacity:1; -ms-opacity:1; -moz-opacity:1; -o-opacity:1;}

}