@charset "utf-8";
.wrap { width: 100%;  min-width: 1600px; position: relative; min-height: 100%; overflow-x: hidden;} 

/*-------------------------------------------------------------------
 로그인 영역
-------------------------------------------------------------------*/
.login_wrap {min-width: 1400px; margin: auto; border: 1px solid; padding: 80px 0;}

/* 로그인 */
.member { width: 600px; height: auto; margin: 200px auto;}
.member .login_box {border: 1px solid #e0e0e0; width: 100%; height: auto;  padding: 40px 50px; box-sizing: border-box; background-color: #fff; font-size: 12px;}
.login_box .input_form { margin: 0 auto;}
.input_box .input_log {width: 100%; height: 50px; box-sizing: border-box; border: 1px #d2d2d2 solid; font-size: 16px; position: relative; padding-left: 10px;}

/*-------------------------------------------------------------------
 Header - TOP
-------------------------------------------------------------------*/
.header { position: relative; width: 100%; height: 70px; background-color: #fff; white-space: nowrap; border-bottom: 1px solid #ccc; } 
.header::after { content: ""; display: block; clear: both; } 
.header > h1 { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); } 
.header > h1 > img { width: 210px; height: auto; } 

/* profile */
.profile { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } 
.profile > li { display: inline-block; margin-right: 5px; vertical-align: middle; } 
.profile > li:last-child { margin-right: 0; } 
.profile > li.name span { font-size: 16px; font-weight: 500; color: #333; } 
.profile > li.name em { font-size: 20px; font-weight: 600; } 

.info_link { background-color: #fff; border: 1px solid #337aff; border-radius: 4px; overflow: hidden; } 
.info_link::after { content: ""; display: block; clear: both; } 
.info_link li { float: left; border-right: 1px solid #337aff; transition: all 0.3s; } 
.info_link li:last-child { border-right: 0; } 
.info_link li a { color: #337aff; font-weight: 500; padding: 8px 12px; display: inline-block; transition: all 0.3s; } 
.info_link li:hover { background-color: #edf4ff; } 
.info_link li a:hover { font-weight: 600; } 

/*-------------------------------------------------------------------
 SNB - LEFT
-------------------------------------------------------------------*/
.snb_left { background-color: #fff; position: absolute; left: 0; top: 70px; width: 270px;height: calc(100% - 70px); transition: all 0.5s ease; visibility: visible; } 
.aside { display: inline-block; width: 100%; padding: 20px 0 20px 20px; overflow: hidden; } 

/* 1depth */
.accordion { width: 100%; height: 100%; height: 700px; border: 1px solid #dfe2ef; border-radius: 10px; overflow-y: auto; background-color: #f3f4f8; } 
.accordion > li > .link { width: 100%; height: 40px; cursor: pointer; display: inline-block; color: #575757; border-bottom: 1px solid #dfe2ef; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } 
.accordion > li > .link > a { position: relative; display: inline-block; height: 100%; width: 100%; font-weight: 600; text-align: center; line-height: 40px; text-align: left; padding: 0 15px; } 
.accordion > li > .link > a::after { content: ""; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); background-image: url(../../images/renewal_image/menu_open.png); background-size: 50%; transition: all 0.4s ease; opacity: 1; width: 22px; height: 22px; display: inline-block; background-position: center center; background-repeat: no-repeat; } 
.accordion > li.open > .depth2 { border-bottom: 1px solid #dfe2ef; background-color: #fff; } 
.accordion > li.open > .depth2 > li:last-child a { border-bottom: 0; } 
.accordion > li.open .link > a::after { content: ""; opacity: 1; background-image: url(../../images/renewal_image/menu_open.png); top: 50%; right: 15px; transform: translateY(-50%) rotate(180deg); } 

/* 2depth */
.depth2 { display: none; font-size: 14px; position: relative; } 
.depth2 > li { width: 100%; } 
.depth2 > li > a { display: inline-block; font-weight: 500; height: 100%; padding:8px 30px 8px 20px; width: 100%; line-height: 1.3; -webkit-transition: all 0.3s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; font-size: 13px; color: #444; border-bottom: 1px dashed #dfe2ef; position: relative; } 
.depth2 > li.open > a { color: #337aff; border-bottom: 1px dashed #ccc !important; } 
.depth2 > li.open > a::after { content: ""; opacity: 1; background-image: url(../../images/renewal_image/depth2_close.png); top: 50%; right: 15px; transform: translateY(-50%) rotate(180deg); } 
.depth2 > li.open > .depth3 { border-bottom: 1px dashed #dfe2ef; } 

.depth2 > li.dpNo > a::after { display: none; } 
.depth2 > li.dpNo.open:last-child > a { border-bottom: 0 !important; } 

/* 스크롤바 커스텀 */
.snb_left ::-webkit-scrollbar { width: 6px; border-radius: 4px; } 
.snb_left .accordion::-webkit-scrollbar-thumb { border-radius: 4px; background: #d8d8d8 } 

/*-------------------------------------------------------------------
 Content 업무영역 - RIGHT
-------------------------------------------------------------------*/
.content_right { position: relative; height: 100%; width: calc(100% - 270px); margin-left: 270px; transition: all 0.5s ease; } 

.content_right .snb_key { position: absolute; left: 0; top: 0; width: 50px; height: 389px; overflow: hidden; text-indent: -9999px; } 
.content_right .snb_key:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../../images/renewal_image/snb_key.png); background-repeat: no-repeat; } 
.main_container.active .content_right .snb_key:before { background-image: url(../../images/renewal_image/snb_key_off.png); } 
.content_right .snb_key:focus {outline: 0;}
.main_container.active .snb_left { visibility: hidden; left: -270px; } 
.main_container.active .content_right { width: 100%; margin-left: 0; } 

.content_right .contArea { height: 100%; margin-left: 20px; margin-right: 20px; padding-bottom: 40px;} 

/* location */
.location { text-align: right; } 
.location ul { padding: 15px 0; } 
.location ul { background: url(../../images/renewal_image/tip.png) repeat-x left bottom; } 
.location ul li { display: inline-block; margin-right: 15px; } 
.location ul li::after { content: ">"; position: relative; right: -10px; color: #bbb; } 
.location ul li:last-child::after { display: none; } 
.location ul li strong { font-weight: 600; } 

/* wrap_search */
.wrap_search { margin: 10px 0; border: 1px solid #d7e5fc; box-sizing: border-box; border-radius: 4px; position: relative; overflow: hidden;}  
.wrap_search::after { content: ""; display: block; clear: both; } 
.wrap_search .search_box { width: 100%;  float: left; } 
.wrap_search .search_box .search_row { border-top: 1px solid #d7e5fc; } 
.wrap_search .search_box .search_row::after { content: ""; display: block; clear: both; } 
.wrap_search .search_box .search_row:first-child { border-top: 0; } 
.wrap_search .search_box dl { float: left; width: 100%; display: flex; flex-direction: row; border-left: 1px solid #d7e5fc; } 
.wrap_search .search_box dl:first-child { border-left: 0; } 
.wrap_search .search_box dl::after { content: ""; display: block; clear: both; } 
.wrap_search .search_box dt { float: left; width: 200px; padding: 5px 15px; background-color: #edf4ff; font-weight: 500; display: flex; align-items: center; line-height: 30px; } 
.wrap_search .search_box dd { float: left; width: calc(100% - 200px); padding: 5px 15px; background: #fff; display: flex; align-items: center; border-left: 1px solid #d7e5fc; line-height: 30px; } 

/*-------------------------------------------------------------------
 TEXT - STYLE
-------------------------------------------------------------------*/
.titleA { font-weight: 600; font-size: 22px; padding: 20px 0; display: block;}
.title_login { font-weight: 600; font-size: 38px; padding: 20px 0 40px; display: block; text-align: center;}  
/*-------------------------------------------------------------------
 BTN - STYLE
-------------------------------------------------------------------*/
.top_btn_box { display: block; text-align: right; position: relative; margin-bottom: 10px;}
.btm_btn_box { display: block; text-align: right; position: relative; margin-top: 20px;} 

.xs_btnA { display: inline-block; font-size: 13px; font-weight: 500; padding: 0 10px; line-height: 26px; background-color: #fff; border: 1px solid #337aff; border-radius: 4px; color: #337aff !important; vertical-align: middle;} 
.btnB { display: inline-block; font-weight: 500; padding: 4px 15px; line-height: 26px; background-color: #fff; border: 1px solid #337aff; border-radius: 4px; color: #337aff !important; vertical-align: middle;} 

.xs_btnA:hover,
.btnB:hover {text-decoration: none !important;}
.xs_btnA:focus,
.btnB:focus { outline: 2px dotted #337aff; outline-offset:2px; } 

/* 버튼 색상칩 */
.bg_col_a {background-color: #fff !important; border-color: #f23b3b !important; color: #f23b3b !important;}
.bg_col_a:focus { outline-color:#f23b3b;}

.bg_col_b {background-color: #fff !important; border-color: #36454F !important; color: #36454F !important;}
.bg_col_b:focus { outline-color:#36454F;}

/* 특정 아이콘 BTN */
.add_btn{display: inline-block;width: 25px;height: 25px;border: 1px solid #337aff;background: url(../../images/renewal_image/icon_plus.png) center center no-repeat #fff;transition: 0.3s; border-radius: 4px; background-size: 50%;}
.add_btn:hover {background: url(../../images/renewal_image/icon_plus_over.png)center center no-repeat #337aff; background-size: 50%;}
.add_btn:focus { outline: 2px dotted #337aff; outline-offset:2px; } 

.remove_btn{display: inline-block;width: 25px;height: 25px;border: 1px solid #f23b3b;background: url(../../images/renewal_image/icon_minus.png) center center no-repeat #fff;transition: 0.3s; border-radius: 4px; background-size: 50%;}
.remove_btn:hover {background: url(../../images/renewal_image/icon_minus_over.png)center center no-repeat #f23b3b; background-size: 50%;}
.remove_btn:focus { outline: 2px dotted #f23b3b; outline-offset:2px; } 

.login_Btn {margin-top: 20px; width: 100%; height: 50px; background: #337aff; font-size: 18px; color: #fff !important; text-align: center; display: inline-block; line-height: 50px; cursor: pointer; border-radius: 4px;}
.login_Btn:focus { outline: 2px dotted #337aff; outline-offset:2px; } 

/* 버튼 비활성화  */
button:disabled {background-color: #ddd; border: 1px solid #ddd; color: #666 !important;}