@charset "utf-8";

/* 공통 */
body {background:#eef5f9 !important; font-size:12px;}

.no-hover:hover {background:none !important; cursor:default !important;}

.box-center {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%)}

.logo-sm, .logo-lg {width:auto; height:auto; max-width:100%; max-height:100%;}

/* modal */
.modal {padding:0 !important; background:transparent !important;}
.modal .panel {margin-bottom:0 !important;}
.modal .close-modal {display:none !important; left:0; right:auto; margin-left:10px;}

.msg_sound_only,
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.form-control {border: 1px solid #ddd !important;border-radius: 2px !important;}

.w-10 {width:10% !important; min-width:10% !important;}
.w-20 {width:20% !important; min-width:20% !important;}
.w-30 {width:30% !important; min-width:30% !important;}
.w-40 {width:40% !important; min-width:40% !important;}
.w-50 {width:50% !important; min-width:50% !important;}
.w-60 {width:60% !important; min-width:60% !important;}
.w-70 {width:60% !important; min-width:60% !important;}
.w-80 {width:80% !important; min-width:80% !important;}
.w-90 {width:90% !important; min-width:90% !important;}
.w-100 {width:100% !important; min-width:100% !important;}

.form-control {background-color:transparent !important; -webkit-background-color:transparent !important}

/*----------------------------------------------------
            bg-Color
---------------------------------------------------
.bg-darker-9 {background-color:rgba(0,0,0,.9) !important;}
.bg-darker-8 {background-color:rgba(0,0,0,.8) !important;}
.bg-darker-7 {background-color:rgba(0,0,0,.7) !important;}
.bg-darker-6 {background-color:rgba(0,0,0,.6) !important;}
.bg-darker-5 {background-color:rgba(0,0,0,.5) !important;}
.bg-darker-4 {background-color:rgba(0,0,0,.4) !important;}
.bg-darker-3 {background-color:rgba(0,0,0,.3) !important;}
.bg-darker-2 {background-color:rgba(0,0,0,.2) !important;}
.bg-darker-1 {background-color:rgba(0,0,0,.1) !important;}

.bg-lighter-9 {background-color:rgba(255,255,255,.9) !important;}
.bg-lighter-8 {background-color:rgba(255,255,255,.8) !important;}
.bg-lighter-7 {background-color:rgba(255,255,255,.7) !important;}
.bg-lighter-6 {background-color:rgba(255,255,255,.6) !important;}
.bg-lighter-5 {background-color:rgba(255,255,255,.5) !important;}
.bg-lighter-4 {background-color:rgba(255,255,255,.4) !important;}
.bg-lighter-3 {background-color:rgba(255,255,255,.3) !important;}
.bg-lighter-2 {background-color:rgba(255,255,255,.2) !important;}
.bg-lighter-1 {background-color:rgba(255,255,255,.1) !important;}

.bg-black {background-color:#000 !important}
.bg-gray1 {background-color:#111 !important}
.bg-gray2 {background-color:#222 !important}
.bg-gray3 {background-color:#333 !important}
.bg-gray4 {background-color:#444 !important}
.bg-gray5 {background-color:#555 !important}
.bg-gray6 {background-color:#666 !important}
.bg-gray7 {background-color:#777 !important}
.bg-gray8 {background-color:#888 !important}
.bg-gray9 {background-color:#999 !important}
.bg-graya {background-color:#aaa !important}
.bg-grayb {background-color:#bbb !important}
.bg-grayc {background-color:#ccc !important}
.bg-grayd {background-color:#ddd !important}
.bg-graye {background-color:#eee !important}
.bg-white {background-color:#fff !important}

-*/
/*----------------------------------------------------
         버튼
----------------------------------------------------*/
.btn-new {display:inline-block; width:14px; height:14px; line-height:14px; font-size:10px; text-align:center; vertical-align:middle; background:#ec3713; color:#fff; border-radius:2px; overflow:hidden; margin-top:-1px; font-family:'Open Sans', sans-serif;}

/*----------------------------------------------------
    [ div --> 테이블 ]

<article class="table-div table-bordere"> 
    <div class="t-head">
        <ul>
               <li>내용</li>
               <li>내용</li>                     
               <li>내용</li>
        </ul>
    </div>
    <div class="t-body">         
        <ul>
               <li>내용</li>
               <li>내용</li>                     
               <li>내용</li>
        </ul>
    </div>
</article>
----------------------------------------------------*/    
.table-div {display:table; border-collapse:collapse; width:100%; padding:0; background:#fff; font-size:12px; color:#555; border-top:1px solid #ddd;}

.table-div .t-head {display:table-header-group;}
.table-div .t-body {display:table-row-group;}

.table-div div ul {display:table-row; }
.table-div div ul li {display:table-cell; text-align:center; padding:10px; font-size:1em;line-height:1.5em;border-bottom:1px solid #ddd;}


.table-div .t-head ul li {background:#f3f3f3; font-size:0.9em; line-height:1.0em; color:#999; border-bottom:2px solid #ddd !important;}
.table-div .t-body ul li {}

.table-div.table-bordered {border-left:1px solid #ddd;}
.table-div.table-bordered div li {border-right:1px solid #ddd; }

.table-div.table-hover .t-body ul:hover {background-color:#f8f8f8;}


/*----------------------------------------------------
    Login
------------------------------------------------------*/
#login-wr {width:800px; height:auto; background-color:#fff; text-align:center; box-shadow:1px 1px 1px 1px #ddd; padding:20px;}
#login-wr > form {width:50%; float:left;}
#login-wr .login_notice {width:48%; float:left; margin-right:2%; display: table-cell; max-height:541px; overflow: hidden; overflow-y: auto;}
#login-wr .login_notice img {width:auto; height:auto; max-width:100%; max-height:541px;}
#login-wr > form {padding-left:20px;}
#login-wr .logo {padding:0 20%;}
#login-wr .logo a {color:#555;}
#login-wr .logo a:hover {text-decoration:none;}
.loginBox {margin-top:40px;}
.loginBox input[type='text'], .loginBox input[type='password'], .loginBox input[type='submit'] {height:40px; border:1px solid #ddd; border-radius:0; padding:8px; box-sizing:border-box;}
.loginBox input[type='password'], .loginBox .btn-login {margin-top:16px;}
.loginBox input::-ms-input-placeholder { color:#ddd; } /* placeholder css */
.loginBox input::-webkit-input-placeholder { color:#ddd; } /* placeholder css */
.loginBox input::-moz-placeholder { color:#ddd; } /* placeholder css */
.loginBox .btn-login {border:none; background:#2eb6cd; color:white; height:40px; border-radius:0; box-sizing:border-box;}
.loginBox .find-wr, .loginBox .find-wr a {color:#777;}
.loginBox .find-wr {margin-top:10px; margin-bottom:5px; display:inline-block; width:100%;}
.loginBox .find-wr .checkbox {margin-top:0; margin-bottom:0; vertical-align:middle; padding:5px 0; line-height:1.5;}
.loginBox .find-wr input[type=checkbox] {margin-top:3px}
.joinBox .btn {display:inline-block; padding:0; border-radius:0; background:none; border:none; margin-top:8px;}
.joinBox .btn-join {color:#2eb6cd; line-height:37.5px; border:1px solid #2eb6cd; box-sizing:border-box; margin-bottom:8px;}
.loginBox .btn-login:hover {color:white;}
.joinBox .btn-join:hover {color:#2eb6cd;}
#login-wr .btn:hover {box-shadow:0px 3px 3px 0 rgba(0,0,0,0.2); transition-duration:0.2s}

.loginBox input[type=checkbox] ~ label:before {content:""; display:inline-block; width:16px; height:16px; border:1px solid #ccc; background:#fff; cursor:pointer; position:absolute; left:0; top:1px;}
.loginBox input[type=checkbox]:checked ~ label:before {background-image:url('../img/common/icon-check.png'); background-size:cover;}
.loginBox input[type=checkbox] ~ label {font-weight:normal; margin-bottom:0; padding-left:25px; position:relative; color:#777;}

.sns-wrap .btn {text-align:left;}

/*media query for small screen devices */
@media screen and (max-width:799px) {
	#login-wr {width:100%;}
}
@media screen and (max-width:480px) {
	#login-wr {width:100%; padding:30px;}
	#login-wr .login_notice, #login-wr > form {width:100%;}
	#login-wr .login_notice {padding-right:0; padding-bottom:15px;}
	#login-wr > form {padding-left:0; padding-top:15px;}
    .sns-wrap .social_link {border-radius:2px; overflow:hidden;}
    .sns-wrap .sns-google {background-color:#4285f4 !important;}
	.sns-wrap .sns-naver {background-color:#00c73c !important;}
    .sns-wrap .sns-kakao {background-color:#ffeb00 !important;}
}


/*-------------------------------
    아이디/비밀번호 찾기
---------------------------------*/
#find-wr {width:400px; background-color:#fff; text-align:center; box-shadow:1px 1px 1px 1px #ddd; padding:40px;}
#find-wr h3 {margin-top:0; margin-bottom:0; font-weight:bold;}
.inputBox {margin-top:40px;}

.inputBox input[type='text'], 
.inputBox input[type='email'], 
.inputBox input[type='submit'] {height:40px; border:1px solid #ddd; border-radius:0; padding:8px; box-sizing:border-box; font-size:12px;}

.inputBox input, 
.inputBox .btn-login {margin-bottom:16px;}

.inputBox input::-ms-input-placeholder { color:#ddd; } /* placeholder css */
.inputBox input::-webkit-input-placeholder { color:#ddd; } /* placeholder css */
.inputBox input::-moz-placeholder { color:#ddd; } /* placeholder css */

.inputBox .btn-login {border:none; background:#2eb6cd; color:white; height:40px; border-radius:0; box-sizing:border-box;}

.inputBox .find-wr {color:#777;}
.inputBox .find-wr {margin-top:10px; margin-bottom:5px; display:inline-block; width:100%;}
.inputBox .find-wr .checkbox {margin-top:0; margin-bottom:0; vertical-align:middle; padding:5px 0; line-height:1.5;}
.inputBox .find-wr input[type=checkbox] {margin-top:3px}

.inputBox .btn-login:hover {color:white;}

#find-wr .btn:hover {box-shadow:0px 3px 3px 0 rgba(0,0,0,0.2); transition-duration:0.2s}
#find-wr .logo {margin-top:10px; padding:0 30%;}

/*media query for small screen devices */
@media screen and (max-width:480px) {
	#find-wr {width:100%; padding:30px;}
}

/*-------------------------------
    회원가입
---------------------------------*/
#regi_form {width:400px; background-color:#fff; text-align:center; box-shadow:1px 1px 1px 1px #ddd; padding:40px; color:#777;}
#regi_form h3 {margin-top:0; margin-bottom:0; font-weight:bold;}

#regi_form input[type='text'], 
#regi_form input[type='email'], 
#regi_form input[type='password'] {height:40px; border:1px solid #ddd; border-radius:0; padding:8px; box-sizing:border-box; font-size:12px;}

#regi_form input::-ms-input-placeholder { color:#ccc; } /* placeholder css */
#regi_form input::-webkit-input-placeholder { color:#ccc; } /* placeholder css */
#regi_form input::-moz-placeholder { color:#ccc; } /* placeholder css */

#regi_form input[type=checkbox] ~ label:before {content:""; display:inline-block; width:16px; height:16px; border:1px solid #ccc; background:#fff; cursor:pointer; position:absolute; left:0;}
#regi_form input[type=checkbox]:checked ~ label:before {background-image:url('../img/common/icon-check.png'); background-size:cover;}
#regi_form input[type=checkbox] ~ label {font-weight:normal; margin-bottom:0; padding-left:25px; position:relative; color:#777;}
#regi_form input[type=checkbox] ~ label a {color:#2eb6cd; border-bottom:1px solid transparent}
#regi_form input[type=checkbox] ~ label a:hover {text-decoration:none; border-bottom-color:#2eb6cd}

#regi_form .btn {border:none; height:40px; border-radius:0; box-sizing:border-box; line-height:26px}

#regi_form .btn:hover {box-shadow:0px 3px 3px 0 rgba(0,0,0,0.2); transition-duration:0.2s; color:white;}

#regi_form p {font-size:12px;}
#regi_form .logo {margin-top:10px; padding:0 30%;}

#regi_form .btn {display:inline-block; padding:0; border-radius:0; background:none; border:none; margin-top:8px;}
#regi_form .btn-login {border:none; background:#2eb6cd; color:white; height:40px; border-radius:0; box-sizing:border-box; line-height:40px;}

/* Media query for tablets */
@media screen and (max-width:700px) {

}

/*media query for small screen devices */
@media screen and (max-width:480px) {
	#regi_form {width:100%; padding:30px !important}
}


/*----------------------------------------------
    상단 타이틀
-----------------------------------------------*/

#content_wr {position:relative; box-sizing:border-box; width:100%; height:100%; padding-left:240px; display:inline-block; z-index:0;}
#content_title {position:relative; background:#177dff !important; padding:0px; padding-left:20px; color:#fff; display:inline-block; width:100%; height:auto; box-sizing:border-box; z-index:9;}

#content_title #mobile_menu {display:none;}

#content_title #notice_line {float:left;}
#content_title #notice_line {width:70%; padding:10px 0; color:#fff;}
#content_title #notice_line .notice-icon {float:left; display:inline-block; width:23px; height:30px; line-height:30px; font-size:20px; overflow:hidden;}
#content_title #notice_line .notice_wr {float:left; width:90%; height:100%; overflow:hidden;}

#content_title #content_menu {float:right; position:relative; padding:10px;}
/*#content_menu > .btn {height:50px; line-height:50px; padding:0 15px; border-radius:0; background-color:transparent; color:rgba(0,0,0,.8); float:left;}
#content_menu > a.btn {text-decoration:none; text-decoration:none; height:35px; width:35px; background:none; border-radius:50%; margin-right:10px; color:#fff; line-height:30px; vertical-align:middle; text-align:center; padding:0; margin-top:5px;color:rgba(45, 50, 62, 0.8);}
#content_menu > a.btn span {line-height:35px;}*/
 
#content_menu > button {position:relative; display:inline-block; width:auto; border:0;}
#content_menu .dropdown-toggle { color:#fff; padding:0; padding-left:20px; padding-right:10px; float:left; border:0;}
#content_menu .dropdown-toggle i {margin-top:-2px;}
#content_menu .dropdown-toggle[aria-expanded='true'] .caret {transform:rotate(180deg); transition:0.2s;}

#content_menu .dropdown-menu {left:auto;  top:40px;  right:-8px;width:157px; border-color:#ddd; padding:0; z-index:999999; border:1px solid rgba(0,0,0,.12);}

/*#content_menu .dropdown-menu li a { padding:0 20px; height:40px; line-height:40px; position:relative; z-index:2;}
#content_menu .dropdown-menu a span {float:left;}
#content_menu .dropdown-menu li a:hover {background-color:rgba(0,0,0,.12)}
#content_menu .dropdown-menu li span.fs16 {line-height:40px; margin-right:5px;}
#hd_menu ~ div > .btn {border-radius:2px;}
*/

/* 담당직원 */

.staff-wr {position:relative; float:right; border-left:1px solid rgba(0,0,0,.1);}
.staff-wr button {background:none; box-shadow:none !important;}
.staff-wr .staff-img {position:relative; width:30px; height:30px; margin:0; padding:0; border-radius:50%;  overflow:hidden; display:inline-block; background-size:contain; background-position:center; background-image:url(/SW/img/header/profile.png); vertical-align:middle; line-height:30px; margin-right:5px;}
.staff-wr h4 {display:inline-block; padding:0; margin:0; line-height:30px; vertical-align:middle; font-size:13px; padding-right:10px; color:rgba(255,255,255,0.6);}
.staff-wr .dropdown-menu{width:250px !important;}
.staff-wr .dropdown-menu li {padding:20px; overflow:hidden;}

.staff-wr h5 { font-size:13px; line-height:20px; color:#555; display:block; word-break:break-all; margin:0;margin-bottom:5px;}
.staff-wr h6 { font-size:22px; line-height:32px; color:#333; display:block; font-weight:bold; color:#177dff; word-break:break-all; margin:0; }
.staff-wr h7 {font-size:13px; line-height:20px; color:#aaa; display:block; word-break:break-all; margin:0;}


/* 메뉴 */
#content_menu a {display:inline-block; padding:5px 10px; margin:0; line-height:16px; color:#fff; min-width:50px; border-left:1px solid rgba(0,0,0,.1); vertical-align:middle;}


/*-------------------------------
	왼쪽레이아웃
---------------------------------*/
/* header */ 
header {position:fixed; width:240px; height:100%; background:#fff; z-index:10; box-shadow:1px 0 20px rgba(0,0,0,.08); overflow:hidden; overflow-y: auto;}

/* 로고 */
.hd_logo {position:relative;display:block; text-align:center; padding:20px 30px;border-bottom:1px solid rgba(0,0,0,0.1);}
.hd_logo img {max-width:100%; height:auto; max-height: 60px;}

/* 프로필 */
.hd_myinfo {position:relative; padding:20px 20px; border-bottom:1px solid rgba(0,0,0,0.1); background: #333;}
.hd_myinfo div {overflow:hidden;}
.hd_myinfo ul {padding:0; margin:0; font-size:15px; line-height:26px; color:#eee;}

.hd_myinfo .mbri-user {font-size:20px; line-height:26px; vertical-align:middle; min-width:20px;}
.hd_myinfo .myicon-text, .hd_myinfo .myicon {display:inline-block; color:#ccc; padding:5px; float:right; font-size:11px; line-height:16px; margin-left:3px; cursor: pointer; text-decoration: none;} 
.hd_myinfo .myicon-text:hover, .hd_myinfo .myicon:hover {background:#ffffff10; color:#177dff;} 


/* 메뉴 */
#hd_menu {position:relative; overflow:hidden; overflow-y:auto; padding:0;}

.lnb-li {position:relative; padding:0; border-bottom:1px solid rgba(0,0,0,0.1);} 
#webhard.lnb-li {border-bottom:0;} 

.lnb-li .lnb-a {width:100%; display:block; padding: 15px 20px; text-decoration:none; color:#777; font-size:13px;}
.lnb-li .menu-icon {display:inline-block; font-size:16px; margin:0; padding:0; vertical-align:middle; color:#bbb; min-width:23px;}

.lnb-li.active .lnb-a {color:#353535; background:#e6e6e6; }         
.lnb-li.active .lnb-a:before { background:#177dff; opacity:1!important; position:absolute;  z-index:1;  width:3px;  height:100%;  content:'';  left:0;  top:0;    }
.lnb-li.active .menu-icon {color:#177dff;}


/* 웹하드 */
.hd_webhard {position:relative; padding:0; border-bottom:1px solid rgba(0,0,0,0.1);}
#webhard {padding:0px;}
#webhard .menu-more {position:absolute; top:15px; right:20px;}
#webhard .menu-more[aria-expanded='true'] .caret {transform:rotate(-180deg)}

#wh-menu {position:relative; padding: 0 15px; padding-bottom: 10px;  margin: 0;}
#wh-menu .hd_2dul {margin: 0;}

#wh-menu .progress-wr {display:block; margin: 10px 0; background:#eef5f9;  padding:10px; }
#wh-menu .progress-wr #use_space {font-size:12px;  color:#177dff}
#wh-menu .progress-wr #all_space {font-size:12px; color:#999;}
#wh-menu .progress-wr .progress {border-radius:100px; background:rgba(0,0,0,0.24); height:5px; margin-bottom:0;}
#wh-menu .progress-wr .progress-bar {background-color:#177dff;}

#wh-menu li {position:relative; padding:12px 20px; }    
#wh-menu li a {width:100%; display:block; text-decoration:none; font-size: 13px;  color: #777;}
#wh-menu li a.menu-more {position:absolute; width:auto; top:10px; right:10px; display:inline-block; font-size:16px; margin:0; padding:0; vertical-align:middle; color:#bbb; min-width:20px;}
#wh-menu li a.menu-more[aria-expanded='true'] .caret { transform:rotate(-180deg);}
#wh-menu li.active {color:#353535; background:#e6e6e6; }         
#wh-menu li.active  a.menu-icon {color:#177dff; min-width: 20px;} 
#wh-menu li.active:before { background:#177dff; opacity:1!important; position:absolute;  z-index:1;  width:3px;  height:100%;  content:'';  left:0;  top:0;    }
 
 
/* menu-folder tree */
#treeview .list-group {margin:0; padding:10px 0; width:100%; background:#f4f4f4;}
#treeview .list-group li:first-child {border-top:0;}
#treeview .list-group li {border-bottom:0; padding:0px; padding-left:35px; height:36px; width:100%; line-height:36px; background: #f4f4f4; font-size: 12px; color:#999; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#treeview .list-group-item .icon {width:auto; margin-right:0;}
#treeview .list-group-item .expand-icon {font-size:8px;position:absolute; margin-left:-14px; margin-top:14px;}
#treeview .list-group-item .node-icon {margin-right:20px;}
#treeview .list-group-item .node-icon:after {position:absolute; top: 10px; content:""; background:url('../img/header/folder.svg'); background-size:contain; background-repeat:no-repeat; background-position:center right; width:16px; height:16px; display:inline-block;z-index:1}
#treeview .list-group-item.node-selected {background-color:#e6e6e6; color: #555;}
#treeview .list-group-item:hover {background-color:#e6e6e6; }

 
/* 배너 */
.banner_wr {position:relative; padding: 5px;}
.banner_wr a {display: block;  overflow: hidden; }
.banner_wr img {max-width: 100%;}
 

/*------------------------------------------------------------------
    footer 
------------------------------------------------------------------*/
footer {position:relative; border-top:1px solid #ddd; padding:20px; box-sizing:border-box; display:inline-block; width:100%; margin-top:20px; overflow:hidden;}

footer #ft_logo {display:inline-block; text-align:left; margin:0; margin-top:7px;}
footer #ft_logo img {width:100%;}

footer ul {display:inline-block; width:100%;}
footer ul li {float:left; padding-right:15px; font-size:0.9em; line-height:20px; color:#999;}
footer ul li strong {font-weight:normal;color:#bbb;} 
footer ul li:after {content:"/"; font-size:9px; padding-left:7px; color:#ccc;} 

footer .copyright {color:#aaa; font-size:0.8em; margin-top:5px;}

#ft_info {line-height:1.7em;}

footer .ft_cs h5 {font-size:0.8em; color:#bbb; margin:0;}
footer .ft_cs strong {font-size:1.7em; display:block; margin: 5px 0;}
footer .ft_cs p {font-size:0.9em; line-height: 20px; color:#777;}

#top_btn {position:fixed; bottom:20px; right:20px; width:50px; line-height:46px; border:2px solid #333; color:#333; text-align:center; font-size:15px; z-index:90; background:rgba(0,0,0,0.5); }

/* sub_content */
#sub_content {width:100%; padding:30px; display:block;}
#sub_title {width:100%; height:60px; background:white; border-bottom:1px solid #ddd; line-height:60px; padding:0 30px;}

/* Media query for tablets */
@media screen and (max-width:768px) {
	header {margin-left:-240px; transition:0.4s; box-shadow:none;}
	#content_wr {padding-left:0; overflow-x:hidden}
	#content_wr > * {transition:0.4s;}
	#content_title #mobile_menu {display:inline-block; float:left; cursor:pointer; padding:12px; padding-left:0;}
	#mobile_menu .bar1, #mobile_menu .bar2, #mobile_menu .bar3 {width:20px; height:3px; background-color:#2d323e; margin:3px 0; transition:0.4s; border-radius:1px;}
	.change .bar1 {-webkit-transform:rotate(-45deg) translate(-5px, 3px); transform:rotate(-45deg) translate(-5px, 3px);}
	.change .bar2 {opacity:0}
	.change .bar3 {-webkit-transform:rotate(45deg) translate(-5px, -4px); transform:rotate(45deg) translate(-5px, -4px);}
	#content_title #notice_line {width:45%;}
	#content_title #notice_line .notice_wr {width:90%;}
    
    #content {width:100% !important}
    #sub_content {padding:15px;}
    
    footer {padding:15px;}
    footer .container-fluid {padding:0;}
    footer .container-fluid #ft_logo {display:none;}
    footer .container-fluid .ft_info {padding:0;}
    footer .container-fluid .ft_cs {display:none;}
    
    footer #ft_logo img {margin-bottom:10px;}
    footer .ft_cs {display:none;}

}

/*media query for small screen devices */
@media screen and (max-width:480px) {
	#content_title #notice_line {display:none;}
}