@charset "utf-8";

/* wrap */
#wrap {position:relative; /*overflow:hidden; */min-width:1100px; height:100%;}

/* header */
#header {position:fixed; top:0; left:0; z-index:10; display:table; width:100%; min-width:1100px; height:100px; background-color:#1e1e1e;}
#header h1 {display:table-cell; width:260px; vertical-align:middle; text-align:center;}
#header h1 > a {display:inline-block;}

/* gnb */
#header .gnb {display:table-cell; }
#header .gnb .lnb {float:left;}
#header .gnb .lnb > ul {font-size:0; height:100px;}
#header .gnb .lnb li {display:inline-block;}
#header .gnb .lnb li > a {display:table-cell; width:100px; height:100px; font-size:16px; color:#fff; text-align:center; vertical-align:middle;}
#header .gnb .lnb .lnb1 a {background-color:#3c3c3c;}
#header .gnb .lnb .lnb2 a {background-color:#373737;}
#header .gnb .lnb .lnb5 a {background-color:#323232;}
#header .gnb .lnb .lnb3 a {background-color:#2d2d2d;}
#header .gnb .lnb .lnb4 a {background-color:#292929;}
#header .gnb .lnb .lnb1 a:hover {background-color:#323232;}
#header .gnb .lnb .lnb2 a:hover {background-color:#2d2d2d;}
#header .gnb .lnb .lnb5 a:hover {background-color:#272727;}
#header .gnb .lnb .lnb3 a:hover {background-color:#171717;}
#header .gnb .lnb .lnb4 a:hover {background-color:#080808;}
#header .gnb .lnb li a.on,
#header .gnb .lnb li a.on:hover {background-color:#f8511d;}
#header .gnb .lnb li > a:before {content:""; display:block; width:22px; height:20px; margin:0 auto 5px; }
#header .gnb .lnb .lnb1 > a:before {background-position:0 0;}
#header .gnb .lnb .lnb2 > a:before {background-position:-25px 0;}
#header .gnb .lnb .lnb3 > a:before {background-position:-55px 0;}
#header .gnb .lnb .lnb4 > a:before {background-position:-85px 0;}
#header .gnb .lnb .lnb5 > a:before {background-position:-128px 0;}
#header .gnb .user_panel {float:right; width:196px; height:100px; background-color:#f8511d;}
#header .gnb .user_panel .btn_user_panel {position:relative; width:100%; height:100%; padding:10%; text-align:left;}
#header .gnb .user_panel .btn_user_panel:after {content:""; position:absolute; top:30%; right:10%; border-top:4px solid #fff; border-left:4px solid transparent; border-right:4px solid transparent;
transition:cubic-bezier(0.25, 0.46, 0.45, 0.94) transform 250ms;
-webkit-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) transform 250ms;
-moz-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) transform 250ms;
-o-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) transform 250ms;}
#header .gnb .user_panel.on .btn_user_panel:after {
transform:rotate(180deg);
 -webkit-transform:rotate(180deg);
 -moz-transform:rotate(180deg);
 -o-transform:rotate(180deg);
}
.ie8 #header .gnb .user_panel.on .btn_user_panel:after,
.ie9 #header .gnb .user_panel.on .btn_user_panel:after {border-bottom:4px solid #fff; border-top:none;}
#header .gnb .user_panel .btn_user_panel > span {display:block; color:#fff;}
#header .gnb .user_panel .btn_user_panel > span:first-child {margin-bottom:10px;}
#header .gnb .user_panel .logout_article {display:none; width:136px; height:38px; line-height:38px; text-align:left; background-color:#3c3c3c; border-radius:2px;}
#header .gnb .user_panel .logout_article > span {display:inline-block; width:100%; padding-left:25px; line-height:24px; color:#fff;}
#header .gnb .user_panel .logout_article:hover > span {background-color:#282828;}
#header .gnb .user_panel.on .logout_article {display:block;}

/* container */
#container {position:relative; width:100%; min-width:1100px; min-height:100%;}

/* snb  */
#container.on .snb {width:0;}
#container.on .snb .btn_snb {left:-1px;}
#container.on .snb ul.snb_mn {width:0; visibility:hidden;}
#container.on .content {left:0;}
#container .snb {position:absolute; top:100px; left:0; right:0; bottom:0; z-index:8; width:260px; background-color:#2e3135;}
#container .snb .btn_snb {position:absolute; top:3px; left:260px; z-index:8; width:38px; height:53px; background-color:#fff; border:1px solid #dcdcdc; border-radius:0 5px 5px 0;}
#container .snb .btn_snb:after,
#container .snb .btn_snb:before {content:"";}
#container .snb .btn_snb:after,
#container .snb .btn_snb:before,
#container .snb .btn_snb i {display:block; width:20px; height:2px; margin:0 auto; background-color:#707070;}
#container .snb .btn_snb:before,
#container .snb .btn_snb i {margin:0 auto 4px;}
#container .snb ul.snb_mn {position:absolute; top:0; bottom:0; left:0; right:0; z-index:8; overflow-y:auto; width:260px;}
#container .snb ul li{border-bottom: 1px solid #2a2d2f;}
#container .snb .title_group {position:relative; display:block; height:60px; padding: 21px 30px 0 15px; font-weight:400; font-size:16px; vertical-align:middle; color:#fff; margin-left:4px; cursor:pointer;}
#container .snb .title_group:before {content: "";
    		display: inline-block;
   			vertical-align: top;
    		margin: 6px 14px 0 0;
    		border-top: 5px solid #757286;
    		border-left: 5px solid transparent;
    		border-right: 5px solid transparent;
    		border-bottom: 5px solid transparent;
    		transition: all 0.08s ease-in-out;
    		-webkit-transition: all 0.08s ease-in-out;
    		-moz-transition: all 0.08s ease-in-out;}
#container .snb .title_group.on:before  {margin:3px 11px 0 3px; border-right:5px solid transparent; border-left:5px solid #757286;  border-top:5px solid transparent; border-bottom:5px solid transparent;}
		
#container .snb .sub_txt {position:relative; background-color:#2a2d2f;}
#container .snb .sub_txt li {height:38px;}
#container .snb .sub_txt li {position:relative; overflow:hidden; display:block; height:100%;}
#container .snb .sub_txt li a {display:block; padding:0 35px; line-height:40px; color:#fff;}
#container .snb .sub_txt li a:hover {background-color:#27292b;}
#container .snb .sub_txt li .on:before {content:""; position:absolute; top:0; left:0; width:4px; height:40px; background-color:#f8511d;}
#container .snb .sub_txt em {float:right;}
#container .snb .btn { right:30px; width:26px; height:26px; margin-top:-13px; background-color:#959595; border-radius:3px;}
#container .snb .btn_add {position:absolute; top:50%; right:30px; width:26px; height:26px; margin-top:-13px; background-color:#959595; border-radius:3px;}
#container .snb .btn_add:hover {background-color:#777;}
#container .snb .btn_add:after,
#container .snb .btn_add:before {content:""; position:absolute; top:50%; left:50%; display:block; background:#2e3135;}
#container .snb .btn_add:after {width:14px; height:2px; margin:-1px 0 0 -7px;}
#container .snb .btn_add:before {width:2px; height:14px; margin:-7px 0 0 -1px;}
.ie8 #container .snb .btn_add:after,
.ie8 #container .snb .btn_add:before {top:0;}

/* content */
#container .content {position:absolute; top:0; left:260px; right:0; bottom:0; z-index:6;}
#container .content .area {overflow:hidden; position:absolute; top:100px; left:0; right:0; bottom:0;}
#container .content .area > div {position:relative; width:100%; height:100%; background-color:#eaebef;}

/* footer */
#footer {position:fixed; bottom:0; left:0; z-index:1; width:100%; min-width:856px; height:55px; line-height:55px; font-size:12px; color:#959595; text-align:center; background-color:#2a2d2f;}