@charset "UTF-8";
/**
 * 전체 레이아웃 css 입니다.
 */

/*
body > #wrap :전체를 감싸는 영역
*/
#wrap {width:100%;position: absolute;height: calc(100%);overflow-y: hidden;}

/*
header
*/
#header {width:100%;background:#fff;z-index:999999;position:relative;}
#header .inner {position:relative; width:calc(95%); margin:0 auto; height:80px; overflow:hidden; background:#fff;} /* width:1560px */
#header .inner .logo {position:absolute; top:17px; left:0;}
#header .inner .gnb {position:absolute; top:30px; right:150px; font-size:0;}
#header .inner .gnb li {display:inline-block; _display:inline; *display:inline; padding:0 30px 0 31px; background:url('../img/gnb_bar.gif') no-repeat 0 center;}
#header .inner .gnb li.gmain {background:none;}
#header .inner .gnb li a {padding-left:28px; line-height:18px; font-size:16px; color:#333; font-weight:400;}
#header .inner .gnb li.gmain a {background:url('../img/icon_home.png') no-repeat 0 center;}
#header .inner .gnb li.gmain a:hover {color:#ff6700;background:url('../img/icon_home_on.png') no-repeat 0 center;}
#header .inner .gnb li.gmain.on a {color:#ff6700;background:url('../img/icon_home_on.png') no-repeat 0 center;}
#header .inner .gnb li.gconfig a {background:url('../img/icon_config.png') no-repeat 0 center;}
#header .inner .gnb li.gconfig a:hover {color:#ff6700;background:url('../img/icon_config_on.png') no-repeat 0 center;}
#header .inner .gnb li.gconfig.on a {color:#ff6700;background:url('../img/icon_config_on.png') no-repeat 0 center;}
#header .inner .gnb li.gprice a {background:url('../img/icon_price.png') no-repeat 0 center;}
#header .inner .gnb li.gprice a:hover {color:#ff6700;background:url('../img/icon_price_on.png') no-repeat 0 center;}
#header .inner .gnb li.gprice.on a {color:#ff6700;background:url('../img/icon_price_on.png') no-repeat 0 center;}
#header .inner .gnb li.gproject a {background:url('../img/icon_project.png') no-repeat 0 center;}
#header .inner .gnb li.gproject a:hover {color:#ff6700;background:url('../img/icon_project_on.png') no-repeat 0 center;}
#header .inner .gnb li.gproject.on a {color:#ff6700;background:url('../img/icon_project_on.png') no-repeat 0 center;}
#header .inner .gnb li.gfeatures a {background:url('../img/icon_features.png') no-repeat 0 center;}
#header .inner .gnb li.gfeatures a:hover {color:#ff6700;background:url('../img/icon_config_on.png') no-repeat 0 center;}
#header .inner .gnb li.gfeatures.on a {color:#ff6700;background:url('../img/icon_config_on.png') no-repeat 0 center;}
#header .inner .gnb li.gsearch a {background:url('../img/icon_serch.png') no-repeat 0 center;}
#header .inner .gnb li.gsearch a:hover {color:#ff6700;background:url('../img/icon_serch_on.png') no-repeat 0 center;}
#header .inner .gnb li.gsearch.on a {color:#ff6700;background:url('../img/icon_serch_on.png') no-repeat 0 center;}
#header .inner .gnb li.gcu a {background:url('../img/icon_help.png') no-repeat 0 center;}
#header .inner .gnb li.gcu a:hover {color:#ff6700;background:url('../img/icon_help_on.png') no-repeat 0 center;}
#header .inner .gnb li.gcu.on a {color:#ff6700;background:url('../img/icon_help_on.png') no-repeat 0 center;}
#header .inner .gnb li.charge a {background:url('../img/icon_charge.png') no-repeat 0 center;}
#header .inner .gnb li.charge a:hover {color:#ff6700;background:url('../img/icon_charge_on.png') no-repeat 0 center;}
#header .inner .gnb li.charge.on a {color:#ff6700;background:url('../img/icon_charge_on.png') no-repeat 0 center;}
#header .inner .gnb li.payment a {background:url('../img/icon_payment.png') no-repeat 0 center;}
#header .inner .gnb li.payment a:hover {color:#ff6700;background:url('../img/icon_payment_on.png') no-repeat 0 center;}
#header .inner .gnb li.payment.on a {color:#ff6700;background:url('../img/icon_payment_on.png') no-repeat 0 center;}



#header .inner .log {position:absolute; top:23px; right:0; font-size:0;}
#header .inner .log a {display:inline-block; _display:inline; *display:inline; margin-left:6px; padding:8px 12px; font-size:13px; line-height:13px; font-weight:500;}
#header .inner .log a.fst {color:#444; border:solid 3px #343432;}
#header .inner .log a.fst:hover {color: #ff6700;border-color: #ff6700}
#header .inner .log a.lst{color: #000;border: solid 3px #000}
#header .inner .log a.lst:hover{color: #ff6700;border-color: #ff6700}
#header .inner .log a.on{color: #ff6700;border-color: #ff6700}

/*
container
*/
#container {width:100%; background:#f8f8f8;padding-top: 80px;margin-bottom: -80px;position: relative;height: 100%;overflow-y: auto;}
#container.intro {width:calc(100%); background:#fff;}	/*1800px*/
#container.function {background:#fff;}

/*
contents
*/
#container #contents {width:1560px; margin:0 auto;}
#container.intro #contents {width:calc(94%);}
#container.price #contents,
#container.member #contents {width:100%;}

/*
footer
*/
#footer {width:100%;position: absolute;bottom: 0;background-color:#fff}
#footer .inner {position:relative; width:calc(95%); margin:0 auto; height:60px; overflow:hidden;} /*width:1560px;*/
#footer .inner .copyright {position:absolute; top:20px; left:0; color:#888; text-transform:uppercase;}
#footer .inner .fmenu {position:absolute; top:20px; right:0; font-size:0; text-align:right; vertical-align:top;}
#footer .inner .fmenu li {display:inline-block; _display:inline; *display:inline; padding:0 12px; background:url(../img/footer_bar.gif) no-repeat left center;}
#footer .inner .fmenu li.fst {background:none;}
#footer .inner .fmenu li.lst {padding-right:0;}
#footer .inner .fmenu a {font-size:12px; line-height:12px; color:#666;}


/**
 * 프로젝트 레이아웃 css 입니다.
 */

 /*
body > #project :전체를 감싸는 영역
*/
#project {position:absolute; top:0; bottom:50px; left:0; right:0;}

/*
prjHeader
*/
#prjHeader {width:100%; height:50px;}
#prjHeader .inner {position:relative;}
#prjHeader .inner > div {position:absolute; top:0; width:190px; height:50px;}

#prjHeader .inner .top_left {left:0;}
#prjHeader .inner .top_left > div {float:left; box-sizing:border-box;}
#prjHeader .inner .top_left > div.category {width:50px; height:50px; border-right:solid 1px #ddd; background:#f5f5f5 url('../img/project/category_off.png') no-repeat 12px 14px;}
#prjHeader .inner .top_left > div.category.on {border-right:solid 1px #44515f; background:#44515f url('../img/project/category_on.png') no-repeat 15px 14px;;}
#prjHeader .inner .top_left > div.category a {display:block; width:100%; line-height:50px; text-indent:-9999px;}
#prjHeader .inner .top_left > div.plogo {width:190px; height:50px; padding-left:20px; padding-top:10px; border-right:solid 1px #ddd;}

#prjHeader .inner .top_right {right:0;}
#prjHeader .inner .top_right > div {float:left; box-sizing:border-box;}
#prjHeader .inner .top_right > div.myname {position:relative; width:140px; border-left:solid 1px #ddd;}
#prjHeader .inner .top_right > div.myname > a {display:block; width:100%; height:50px; background:url('../img/project/top_arr.png') no-repeat 120px center;}
#prjHeader .inner .top_right > div.myname > a > span {display:inline-block; _display:inline; *display:inline; line-height:50px; vertical-align:middle;}
#prjHeader .inner .top_right > div.myname > a > span.pic {width:36px; height:36px; margin:0 8px 0 12px; border-radius:200px; overflow:hidden;}
#prjHeader .inner .top_right > div.myname > a > span.pic img {width:36px; height:36px;}
#prjHeader .inner .top_right > div.myname ol {display:none; position:absolute; top:50px; left:0; width:100%; border:1px solid #ddd; background:#fff; padding:10px 0; z-index:10; box-sizing:border-box;}
#prjHeader .inner .top_right > div.myname ol li {text-align:center;}
#prjHeader .inner .top_right > div.myname ol li a {font-size:12px; color:#24303e; line-height:25px;}
#prjHeader .inner .top_right > div.myname ol li a:hover {color:#f16609;}
#prjHeader .inner .top_right > div.write {width:50px; height:50px; text-align:center; vertical-align:middle; border-left:solid 1px #ddd;}
#prjHeader .inner .top_right > div.write a {display:block; width:100%; line-height:50px;}
#prjHeader .inner .top_right > div.write a img {padding-top:16px;}
#prjHeader .inner .top_right > div.list_btn {width:50px; border-left:solid 1px #ddd; background:#fff url('../img/project/active_off.png') no-repeat 18px 16px;}
#prjHeader .inner .top_right > div.list_btn.on {border-right:solid 1px #24303e; background:#24303e url('../img/project/active_on.png') no-repeat 18px 16px;}
#prjHeader .inner .top_right > div.list_btn a {display:block; width:100%; line-height:50px; text-indent:-9999px;}

/*
prjContainer
*/
#prjContainer {position:absolute; top:50px; bottom:0; left:0; right:0; display:table; width:100%; min-height:94.5%; font-size:0;height:94.5%; }/*94.6%*/
#prjContainer > div {display:table-cell; font-size:12px; vertical-align:top; box-sizing:border-box;}

/*
sideLeft
*/
#sideLeft {width:240px; height:100%; background:url('../img/project/sleft_bg.gif') repeat 0 0;}
#sideLeft.width50 {width:50px !important;}

#sideLeft .sl-menu {width:100%;}
#sideLeft .sl-menu .user_profile {position:relative; width:240px; height:150px; overflow:hidden; background:#44515f;}
#sideLeft .sl-menu .user_profile .upic {position:absolute; top:25px; left:90px; width:60px; height:60px; border-radius:200px; overflow:hidden;}
#sideLeft .sl-menu .user_profile .ulink {position:absolute; top:15px; right:13px; width:20px; height:20px; background:url('../img/project/user_btn_link.png') no-repeat 0 0;}
#sideLeft .sl-menu .user_profile .ulink a {display:block; width:100%; line-height:20px; text-indent:-9999px;}
#sideLeft .sl-menu .user_profile .uinfo {padding-top:95px; text-align:center;}
#sideLeft .sl-menu .user_profile .uinfo p.uname {font-size:16px; color:#fefcfd; font-weight:400; line-height:20px;}
#sideLeft .sl-menu .user_profile .uinfo p.umail {font-size:12px; color:#abaeb4;}

#sideLeft .plnb {padding:20px 10px; border-top:solid 1px #54606e; box-sizing:border-box;}
#sideLeft .plnb li {margin-bottom:1px; border-radius:3px;}
#sideLeft .plnb li a {display:block; width:100%; line-height:38px; padding-left:30px; font-size:14px; color:#fff; box-sizing:border-box;}
#sideLeft .plnb li:hover,
#sideLeft .plnb li.on {background:#f16609;}
#sideLeft .plnb li a.lm1 {background:url('../img/project/icon_lnb1.png') no-repeat 10px center;}
#sideLeft .plnb li a.lastest {background:url('../img/project/icon_lastest.png') no-repeat 8px center;}
#sideLeft .plnb li a.lm2 {background:url('../img/project/icon_lnb2.png') no-repeat 10px center;}
#sideLeft .plnb li a.lm3 {background:url('../img/project/icon_lnb3.png') no-repeat 10px center;}
#sideLeft .plnb li a.lm3.have:after {display:block; clear:both; content:' ';}
#sideLeft .plnb li a.lm3.have span {float:right; display:block; margin:14px 12px 0 0; width:10px; height:10px; background:url('../img/project/notice_new_on.png') no-repeat 0 0;}
#sideLeft .plnb li a.lm3.have:hover span,
#sideLeft .plnb li.on a.lm3.have span {background:url('../img/project/notice_new_off.png') no-repeat 0 0;}
#sideLeft .plnb li a.lm4 {background:url('../img/project/icon_lnb4.png') no-repeat 10px center;}
#sideLeft .plnb li a.lm5 {background:url('../img/project/icon_lnb5.png') no-repeat 10px center;}
#sideLeft .plnb li a.lm6 {background:url('../img/project/icon_lnb6.png') no-repeat 10px center;}
#sideLeft .plnb li a.lm7 {background:url('../img/project/icon_lnb7.png') no-repeat 10px center;}

#sideLeft .plnb.summery {min-width:50px; padding:20px 9px;}
#sideLeft .plnb.summery li a {padding-left:0; line-height:32px; text-indent:-9999px; background-position:8px center;}
#sideLeft .plnb.summery li a.lastest {background-position:6px center;}
#sideLeft .plnb.summery li a.lm3.have span {background:none;}


/*
prjContents
*/
#prjContents {width:auto; height:100%; background:#f0f0f0;}
#prjContents #route {height:30px; height:30px; padding:0 20px; border-top:solid 1px #ddd; border-bottom:solid 1px #ddd; background:#f0f0f0; display:none;}
#prjContents #route:after {display:block; clear:both; content:' ';}
#prjContents #route .nav {float:left; font-size:12px; color:#888;}
#prjContents #route .nav span.gt {display:inline-block; _display:inline; *display:inline; width:16px; line-height:30px; background:url('../img/project/nav_arr.png') no-repeat center center;}
#prjContents #route .nav em {color:#666; font-weight:400;}
#prjContents #route .use {float:right; font-size:12px; color:#888;}
#prjContents #route .use span {color:#444;}

#prjContents .topTitle {width:100%; height:72px; line-height:72px; overflow:hidden; padding:0 20px; border-bottom:solid 1px #ddd; background:#fafafa; box-sizing:border-box;}
#prjContents .topTitle h2.mtit {float:left; line-height:72px; font-size:20px; color:#222; padding-left:35px; background:url('../img/project/icon_tit.png') no-repeat 0 center;}
#prjContents .topTitle .msch {float:right; position:relative;}
#prjContents .topTitle .msch .refresh {position:absolute; top:16px; right:186px;}
#prjContents .topTitle .msch .search {position:absolute; top:16px; right:0; width:180px; height:36px; background:url('../img/project/tit_search_bg.png') no-repeat 0 0;}
#prjContents .topTitle .msch .search input[type=text] {float:left; width:144px; height:36px; line-height:36px; padding-left:12px; border:0; outline-style:none; font-size:12px; color:#999; background:transparent; box-sizing:border-box;}
#prjContents .topTitle .msch .search input[type=image] {float:left;}

#prjContents .cInner {min-width:800px; padding:20px 20px 40px; box-sizing:border-box;}

.popMaskDoing {position:absolute; display: block; top:0px; left:0px; width:100%; height:100%; text-align: center; background-color: #3c3c3c; opacity: 0.5;}
.popMaskDoing a {display:inline-block;margin-top:19%;}
.popMaskDoing span {color:#fff;font-size:16px;}

/*
sideRight
*/
#sideRight {width:240px; height:100%; background:url('../img/project/sright_bg.gif') repeat-y 0 0;}
#sideRight dl {width:240px;}
#sideRight dl dt {padding-left:10px; height:32px; line-height:32px; font-size:13px; color:#fff; background:#24303e}
#sideRight dl dd {position:relative; padding:12px; border-bottom:solid 1px #ddd; box-sizing:border-box;}
#sideRight dl dd .alist_pic {position:absolute; top:12px; left:12px; display:block; width:40px; height:40px; border-radius:200px; overflow:hidden;}
#sideRight dl dd .alist_info {padding-left:50px; text-align:left;}
#sideRight dl dd .alist_info .atit a {font-size:14px; color:#222; line-height:20px; font-weight:400;}
#sideRight dl dd .alist_info .asub {font-size:13px; color:#666;}
#sideRight dl dd .alist_info .aby {margin-top:3px; font-size:12px; color:#888;}
#sideRight dl dd .alist_info .aby span {margin-right:6px; display:inline-block; _display:inline; *display:inline; padding-right:10px; background:url('../img/project/name_bar.gif') no-repeat right center;}