@charset "utf-8";
/* 초기화코드 */
*{margin:0; padding:0;}
ul, ol, dl{list-style:none}
img{max-width:100%; border:0;}
input{border:none;}
a{text-decoration:none; color:#333;}
body{background:url(../images/body_bg.jpg) repeat-x #323532; font-family:"맑은 고딕", "돋움", "굴림"; font-size:12px;}

/* 전체레이아웃 */
#wrap{width:1200px; margin:0 auto; position:relative; background:#fff;}
#header{width:178px; float:left; padding: 0 32px 0 33px;}
#main{margin:0 220px 0 243px; border-left:1px solid #ddd; border-right:1px solid #ddd; min-height:1127px; box-sizing:border-box; *margin:0 221px 0 244px;}
#aside{width:220px; position:absolute; top:0; right:0; background:#323532;}
#footer{height:120px; border-top:1px solid #ddd; overflow:auto;}

/* 헤더영역 */
#header > h1{margin-top:33px;}

/* 내비게이션 */
.nav{margin-top:29px;}
.nav li{background:url(../images/blit_arrow.png) no-repeat 168px 17px;}
.nav a{display:block; width:100%; height:44px; line-height:44px; border-bottom:1px solid #cdcdcd; font-weight:bold; padding-left:4pxs; box-sizing: border-box; font-size:14px;}
.nav a:hover{text-align:center; padding:0; color:#fff;}
.nav li:nth-child(1) a:hover{background:#ed779e;}
.nav li:nth-child(2) a:hover{background:#f8af5a;}
.nav li:nth-child(3) a:hover{background:#35baae;}
.nav li:nth-child(4) a:hover{background:#b9b9da;}
.nav li:nth-child(5) a:hover{background:#c5d656;}
.nav li:nth-child(6) a:hover{background:#ed779e;}

/* 전화번호 */
#tellnum{border-bottom:1px solid #cdcdcd; padding:19px 0 18px 0;}

/* We Follow */
#flow{margin-top:25px; width:178px; overflow:auto;}
#flow > h3{height:22px; font-size:13px; float:left;}
#flow > span{float:right; *margin-top:6px;}
#flow > ul{clear:both;}
#flow li{float:left; margin:0 6px 6px 0;}
#flow li:nth-child(4n){margin-right:0;}
#flow > ul img{display:block;}

/* What's New */
#news{margin-top:18px; width:178px; overflow:auto;}
#news > h3{height:22px; font-size:13px; float:left;}
#news > span{float:right; *margin-top:6px;}
#news > ul{clear:both;}
#news li {font-size:12px; line-height:19px; height:19px; background:url(../images/blit_list.png) no-repeat 0px 8px; padding-left:8px; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} 
#news li > a{color:#777; font-family:"돋움", "굴림", "맑은 고딕";}
#news li > a:hover{color:#222;}

/* BLOG */
#blog{margin-top:21px; overflow:auto;}
#blog > h3{height:24px; font-size:13px; float:left;}
#blog span{float:right; *margin-top:6px;}
#blog > div{color:#777; margin-bottom:5px;}
#blog strong{display:block; padding:4px 0 3px 0; color:#555;}

/* 메인 영역 */

/* 메인 비주얼 */
#main_visual{width:100%; text-align:center; background:#323532;}
#main_visual img{display:block;}

/* 검색영역 */
#search_area{background:#323532; padding:15px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.search_box{background:#fff; padding:11px; height:27px;}
.search_box span{font-size:14px; float:left; padding:3px 0 0 5px;}
.search_box .input_box{margin-left:110px; background:#000; height:27px; border-radius:3px; -ms-border-radius:3px;}
.search_box .input_box input{float:left; width:80%; color:#ffffff; height:27px; border:none; padding-left:10px; float:left;  line-height:27px; background:transparent; .margin-left:-110px;}
.search_box .input_box img{float:right;}

/* 어비폰트영역 */
#ub_font{padding:30px 30px 20px 30px; border-bottom:1px solid #e9e9e9; overflow:auto;}
#ub_font h2{margin-bottom:10px; font-size:17px; position:relative;}
#ub_font > h2 > a{position:absolute; right:0; top:0;}
#ub_font .now{font-size:12px; color:#666; margin-right:80px; line-height:16px;}
#ub_font ul{margin-top:20px;}
#ub_font li{float:left; width:63px; padding:5px; text-align:center;}
#ub_font span{font-size:11px; color:#666; padding-top:5px; display:block;}

/* 주식, 유투브 영역 */
#content{padding:30px 30px 15px 10px; box-sizing:border-box; overflow:auto; position:relative;}

/* 주식영역 */
#stock {width:48%; float:left;}
#stock h2 {font-size:17px; position:relative;}
#stock h2 > a{position:absolute; top:0; right:0;}
#stock .now {font-size:12px; margin:10px 0; float:right;}
#stock .now strong {color:#f00;}
#stock table {border-top:1px solid #444; border-bottom:1px solid #444; font-size:11px; text-align:center;}
#stock th {border-bottom:1px solid #444; background:#242724; height:24px; border-right:1px solid #444; height:24px; color:#eee;}
#stock td {height:24px; border-right:1px solid #444; color:#555;}
#stock .no_border {border-right:none;}
#stock ul{margin-top:10px;}
#stock li{font-size:12px; line-height:20px; padding-left:10px; background:url(../images/blit_list.png) no-repeat 2px 7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#stock li > a:hover{color:#0066CC;}

/* 유투브영역 */
#youtube {width:48%; float:right;}
#youtube h2 {font-size:17px; position:relative;}
#youtube h2 > a{position:absolute; top:0; right:0;}
#youtube .now {font-size:12px; color:#666; margin:10px 0;}
#youtube ul {margin-top:10px;}
#youtube ul li {font-size:12px; line-height:18px; padding-left:10px; background:url(../images/blit_list.png) no-repeat 2px 7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#youtube li > a:hover{color:#0066CC;}

/* 우측 영역 */
#aside li img{margin-bottom:1px; display:block;}

/* 푸터 영역 */
#foot_logo {float:left; width:243px;}
#foot_logo img {margin:25px 0 0 60px;}
#foot_area {float:left; border-left:1px solid #e9e9e9; height:120px;}
.foot_menu {margin:15px 0 0 30px;}
.foot_menu a{font-size:12px; color:#999; margin-right:12px; line-height:14px;}
.foot_menu a strong {color:#222;}
.foot_copy {font-size:12px; color:#999; margin:10px 0 0 30px; line-height:14px;}
#footer .right_area{background:#323532; float:right; width:220px; height:120px; border-left:1px solid #e9e9e9;}

/* 미디어 쿼리 */
@media screen and (max-width:1280px){
	#wrap{width:95%;}
}

@media screen and (max-width:1024px){
	
	#wrap{width:100%;}
	
	#main{margin:0 0 0 243px; border:none; min-height:0;}
	
	#ub_font{background:#333333;}
	#ub_font h2{color:#FFFFFF;}
	#ub_font .now{color:#ccc;}
	
	#aside{position:relative; margin:0 0 10px 243px; width:auto; height:190px; background:#FFFFFF;}
	#aside li{float:left; height:190px; overflow:hidden; margin:0 10px 0 0; width:32.3%; box-sizing:border-box;}
	#aside li:nth-child(3){width:32.4%; margin-right:0;}
	
	#footer{clear:both;}
	.right_area{display:none;}
	
}

@media screen and (max-width:768px){
	
	#search_area{padding:5px;}
	
	#ub_font ul{width:100%;}
	#ub_font li{width:16.66%;}
	
	#aside li{width:28.3%;}
	
}

@media screen and (max-width:600px){
	
	#wrap{margin-top:10px;}
	#header{width:100%; padding:0;}
	#header > h1 {margin:0; text-align:center; padding:10px 0;}
	
	.nav{margin-top:0; background:url(../images/body_bg.jpg); overflow:auto;}
	.nav li{background:none; float:left; width:33.3%; border-bottom:1px solid #fff; border-right:1px solid #fff; box-sizing:border-box; text-shadow:0 1px 8px black;}
	.nav li:nth-child(3n){width:33.4%; border-right:none;}
	.nav a{padding-left:0; font-size:14px; text-align:center; border:none;}
	
	#flow{margin-top:10px; width:100%; overflow:auto; padding:0 10px; box-sizing:border-box;}
	#flow > h3{height:22px; font-size:12px; float:left;}
	#flow > ul{clear:both;}
	#flow li{float:left; margin:0 6px 0 0;}
	#flow li:nth-child(4n){margin-right:6px;}
	
	
	#news{margin-top:10px; width:100%; overflow:auto; margin-bottom:10px;}
	#news > h3{font-size:12px; float:left; padding-left:10px;}
	#news li {line-height:24px; height:24px; background:url(../images/blit_list.png) no-repeat 12px 12px; padding-left:20px; border-bottom:1px solid #ddd;} 


	#ub_font{padding:10px;}
	#ub_font li{width:16.66%; box-sizing:border-box;}
	
	
	#content{padding:10px; box-sizing:border-box;}
	#stock {width:100%;}
	#stock h2 {font-size:18px;}
	#stock table{border-top:1px solid #ed779e; border-bottom:1px solid #ed779e;}
	#stock th {border-top:1px solid #ed779e; background:#ed779e; border-right:1px solid #ed779e; color:#fff;}
	#stock td {border-right:1px solid #ed779e;}
	
	#foot_logo {display:none;}
	#foot_area {float:left; border-left:1px solid #e9e9e9; height:120px; text-align:center;}
	
	
	#main{width:100%; margin:0; clear:both;}
	#aside{width:100%; margin:0;}
	
	#tellnum{display:none;}
	#blog{display:none;}
	#youtube{display:none;}
	
	#flow span, #news span, #stock > h2 > a, #ub_font > h2 > a{display:none;}
	
}

@media screen and (max-width:480px){
	
	
	#flow > ul{margin:0;}
	#flow li{margin:0; width:8.33%;}
	#flow li:nth-child(4n){margin-right:0;}
	#flow li:nth-child(12n){width:8.33%}
	
	
	
	#ub_font{padding:20px 10px 10px 10px; width:95%;}
	#ub_font .now{margin:0;}
	#ub_font li{display:none;}
	#ub_font li:nth-child(1){display:block; width:25%;}
	#ub_font li:nth-child(2){display:block; width:25%;}
	#ub_font li:nth-child(3){display:block; width:25%;}
	#ub_font li:nth-child(4){display:block; width:25%;}	
	
	
	
	
	
	#aside{width:100%; margin:0;}
	
	
	
}