@charset "utf-8";

/* 폰트 */
@font-face{font-family:'나눔바른고딕'; src:url('../fonts/NanumBarunGothic.eot'); src:local(※),url('../fonts/NanumBarunGothic.woff') format('woff'); }

/* 기본 */
body{margin:0; padding:0; background:#EEEBE9 url(../img/pattern7.png); font-family:나눔바른고딕,맑은고딕;}
img{border:none;}
a{text-decoration:none; color:#000;}


/***********************************************/
/**                PC First CSS               **/
/***********************************************/

/* 위로가기 */
#xt_go_top{position:absolute;cursor:pointer; display:none; transition:background 0.3s, box-shadow 0.3s; left:215px; top:50%; background:#444; color:#fff; font-weight:bold; padding:9px; border-radius:3px;}
#xt_go_top span{display:none; position:absolute; left:35px; top:7px; background:#333; padding:6px 10px; border-radius:3px; white-space:nowrap;}
#xt_go_top:hover{background:#222; box-shadow:1px 1px 1px #999;}
#xt_go_top:hover span{display:block;}

/* 헤더 */
#header{position:fixed; width:200px; height:100%; top:0px; left:0px; background:#272424; z-index:20; box-shadow:0px 0px 7px #333;}
#header .in_header{position:relative; width:100%; height:100%; overflow:hidden; z-index:4;}
#header .main_logo{font-size:25px; margin:0px; text-align:center;}
#header .main_logo .logo_text{display:block; padding:30px 0px; color:#aaa; font-weight:bold; text-shadow:1px 1px 1px #777;}
#header .main_logo .logo_img{padding:10px 0px; max-width:180px; margin-top:20px;}
#header{position:fixed; width:200px; height:100%; top:0px; left:0px; background:#272424; z-index:20; box-shadow:0px 0px 7px #333;}

/* 로그인 */
#login_box{margin:50px 0px; position:relative; width:100%; text-align:center;}
#login_box .login_btn{position:relative; width:28px; margin:4px; display:inline-block; cursor:pointer; height:28px; line-height:31px; border-radius:5px; text-align:center; font-size:13px; color:white; transition:0.3s background;}
#login_box .login_btn a{color:white; display:inline-block;}
#login_box .login_btn_flat{width:100px; display:inline-block; cursor:pointer; height:30px; line-height:30px; border-radius:5px; text-align:center; font-size:15px; color:white; transition:0.3s background;}
#login_box .login_btn_flat i{margin-right:7px;}
#login_box .login_btn_flat a{color:white;}
#login_box .gray_bg{background:#5A5A5A; box-shadow:inset 1px 1px 1px gray,1px 1px 1px black}
#login_box .gray_bg:hover{background:#4A4A4A;}
#login_box .steelblue_bg{background:rgb(78, 105, 132); box-shadow:inset 1px 1px 1px rgb(122, 149, 176),1px 1px 1px black}
#login_box .steelblue_bg:hover{background:rgb(25, 95, 153);}
#login_box .chocolate_bg{background:chocolate; box-shadow:inset 1px 1px 1px rgb(219, 162, 121),1px 1px 1px black}
#login_box .chocolate_bg:hover{background:rgb(210, 71, 30);}
#login_box .tomato_bg{background:tomato;}
#login_box .tomato_bg:hover{background:orangered;}
#login_box .blue_bg{background:cornflowerblue;}
#login_box .blue_bg:hover{background:rgb(65, 110, 255);}
#login_box .language{z-index:10;}
#login_box .language a{position:relative;}
#login_box .language ul{display:none; position:absolute; background:#fff; left:-10px; list-style:none; margin:0; padding:5px 8px 0px 8px; border-radius:5px;}

/* 네비게이션 */
#nav_main{position:relative; background:#272424; z-index:4; border-top:1px solid #111; border-bottom:1px solid #333;}
#nav_main li,#nav_main ul{margin:0px; padding:0px; list-style:none;}
#nav_main .main_li{border-top:1px solid #333; border-bottom:1px solid #111; position:relative;}
#nav_main .main_a{display:block; font-size:15px; white-space:nowrap; color:#6A6867; text-decoration:none; height:50px; line-height:50px; padding-left:13px; cursor:pointer; transition:0.3s color,background;}
#nav_main .main_a i{width:35px; font-size:20px;}
#nav_main .main_a img{vertical-align:middle; margin-top:4px;}
#nav_main .main_a{border-left:8px solid #333;}
#nav_main .nav_wrap:hover .main_a{/*background:#2F2D2D;*/ color:white; border-right:8px solid tomato; border-left:8px solid tomato;}
#nav_main .main_a:hover{background:#2F2D2D;}
/* 2차메뉴버튼 */
#nav_main .sub_nav_btn{display:block; position:absolute; cursor:pointer; top:0px; right:0px; width:50px; height:50px; line-height:50px; color:#777; font-size:13px; font-weight:bold; text-align:center; text-shadow:0px 0px 2px #555;}
#nav_main .sub_nav_btn:hover{color:#eee; background:#272424;}
/* 2차메뉴 */
#nav_main .sub_ul{display:none; border-top:1px solid #333; border-bottom:1px solid #111; background:#2F2D2D; padding:8px 0px;}
#nav_main .sub_a{display:block; font-size:13px; white-space:nowrap; color:#6A6867; text-decoration:none; height:28px; line-height:28px; padding-left:13px; cursor:pointer; transition:0.3s color,background;}
#nav_main .sub_a:hover{color:#eee; background:#272424;}
#nav_main .sub_a i{width:20px; font-size:15px;}
#nav_main .sub_a img{vertical-align:middle;}
/* 선택메뉴 */
#nav_main .selected_nav .main_a{color:white; /*background:#2F2D2D;*/ border-left:8px solid tomato;}
#nav_main .selected_nav2 .sub_a{color:#ddd;}

/* 검색창 */
#search_box{position:relative; z-index:4; padding-top:100px; padding-bottom:20px; margin-bottom:100px; background:#272424;}
#search_box form{text-align:center;}
#search_box .keyword_box{width:120px; height:22px; line-height:22px; outline:none; text-indent:10%; border:none; background:white; border-radius:3px; box-shadow:inset 1px 1px 1px #555, 1px 1px 1px #555;}
#search_box .search_box_widget{margin-left:40px; margin-top:5px;}

/* 헤더하단 (카운터) */ 
#header .in_bottom{position:absolute; bottom:30px; left:0px; z-index:3; width:100%;}
#bottom_content{}

/* 상단부분 */
#top_content{float:left; width:100%;}
#top_content .top_content_in{height:50px; line-height:50px; margin:10px; margin-bottom:0px; background:#272424; border-radius:5px; text-align:center; box-shadow:0px 0px 2px #333;}
#top_content .top_content_in li{display:inline-block; position:relative;}
#top_content .top_content_in ul{margin:0px; padding:0px;}
#top_content .top_content_in i{font-size:28px; color:gray; width:45px; line-height:50px; text-align:center; cursor:pointer; transition:0.3s;}
#top_content .top_content_in i:hover{color:white; background:#3D3D3D;}
#top_content .top_content_in span,
#top_content .top_content_in img{display:none;}
#top_content .top_content_in li:hover span{display:inline-block;}
#top_content .top_content_in li span{position:absolute; z-index:1; left:-5px; bottom:-35px; white-space:nowrap; background:#272424; box-shadow:inset 1px 1px 1px #555,1px 1px 1px #000; color:white; padding:3px 10px; border-radius:3px; height:25px; line-height:25px;}
#top_content .selected_top_nav i{color:white; background:#3F3D3D; box-shadow:inset 1px 1px 1px #555,1px 1px 1px #000;}
#top_content .ss_msg{margin:10px; margin-bottom:0px; height:38px; line-height:38px; text-align:center; box-shadow:0px 0px 4px #ddd;}
#top_content .top_content_in .ss_move_btn{display:none; height:50px; width:30px; background:#353535;}
#top_content .top_content_in .ss_move_btn i{width:30px;}

/* 본문 */
#container{position:relative; margin-left:200px; max-width:1380px;}

/* 게시판,위젯 */
#content{float:left; width:75%;}
#content .content_in{margin:10px; background:white; padding:10px; border-radius:5px; overflow:hidden; box-shadow:0px 0px 5px #cdcdcd; transition:0.4s box-shadow;}
#content .content_in:hover{box-shadow:0px 0px 10px #999;}

/* 사이드부분 */
#side_content{float:left; width:25%;}
#side_content .side_content_in{margin:10px; margin-left:0px; background:white; padding:10px; border-radius:5px; overflow:hidden; box-shadow:0px 0px 5px #cdcdcd; transition:0.4s box-shadow;;}
#side_content .side_content_in:hover{box-shadow:0px 0px 10px #999;}

/* 모바일 메뉴 */
.mobile_menu_bg{display:none; position:fixed; z-index:15; top:0; left:0; width:100%; height:100%; background:black; filter:alpha(opacity=50); opacity:0.5; -moz-opacity:0.5; }
#mobile_open_btn{display:none; position:relative; width:30px; cursor:pointer; height:30px; line-height:35px; border-radius:5px; text-align:center; font-size:13px; color:white; transition:0.3s background;}
.mobile_width{width:160px!important;}

/***********************************************/
/**                  모바일                   **/
/***********************************************/
@media all and (max-width:480px){

.mobile_none{display:none!important;}

/* 헤더 */
#header{width:50px; overflow:hidden;}
#header .main_logo{font-size:23px;}
#header .main_logo .logo_text{padding:20px 0px;}
#header .main_logo .logo_img{max-width:150px;}
#header .in_header{overflow-y:auto;}

/* 네비게이션 */
#nav_main{margin-top:50px;}
#nav_main .main_a i{width:35px;}
#nav_main .main_a img{display:none;}
#nav_main .main_a{border-left:4px solid #333;}
#nav_main .nav_wrap:hover .main_a{border-right:4px solid tomato; border-left:4px solid tomato;}
#nav_main .selected_nav .main_a{border-left:4px solid tomato;}
#nav_main .sub_nav_btn:hover{background:none;}

/* 검색창 */
#search_box .keyword_box{width:120px;}
#search_box .search_box_widget{margin-left:20px; margin-top:5px;}

/* 상단부분 */
#top_content .top_content_in{height:40px; line-height:40px;}
#top_content .top_content_in i{font-size:23px; width:35px; line-height:40px;}
#top_content .top_content_in .ss_move_btn{height:40px; width:25px;}
#top_content .top_content_in .ss_move_btn i{width:25px;}

/* 본문 */
#container{position:relative; margin-left:50px;}

/* 게시판,위젯 */
#content{width:100%;}
#content .content_in{margin-bottom:0px;}

/* 사이드부분 */
#side_content{width:100%;}
#side_content .side_content_in{margin-left:10px;}

/* 모바일버튼 */
#mobile_open_btn{display:inline-block;}

}


/***********************************************/
/**                  태블릿                   **/
/***********************************************/
@media all and (min-width:480px) and (max-width:870px){
/* 위로가기 */
#xt_go_top{left:175px;}

/* 헤더 */
#header{width:160px;}
#header .main_logo{font-size:23px;}
#header .main_logo .logo_text{padding:20px 0px;}
#header .main_logo .logo_img{max-width:150px;}
#header .in_header{overflow-y:auto;}

/* 로그인 */
#login_box{margin:30px 0px;}
#login_box .login_btn_flat{width:100px;}
#login_box .login_btn_flat i{margin-right:7px;}
#login_box .login_btn_flat a{color:white;}

/* 네비게이션 */
#nav_main .main_a i{width:35px;}
#nav_main .main_a img{display:none;}
#nav_main .main_a{border-left:6px solid #333;}
#nav_main .nav_wrap:hover .main_a{border-right:6px solid tomato; border-left:6px solid tomato;}
#nav_main .selected_nav .main_a{border-left:6px solid tomato;}
#nav_main .sub_nav_btn:hover{background:none;}

/* 검색창 */
#search_box .keyword_box{width:120px;}
#search_box .search_box_widget{margin-left:20px; margin-top:5px;}

/* 상단부분 */
#top_content .top_content_in{height:50px; line-height:50px;}
#top_content .top_content_in i{font-size:25px; width:40px; line-height:50px;}

/* 본문 */
#container{position:relative; margin-left:160px;}

/* 게시판,위젯 */
#content{width:100%;}
#content .content_in{margin-bottom:0px;}

/* 사이드부분 */
#side_content{width:100%;}
#side_content .side_content_in{margin-left:10px;}
}