@charset "utf-8";

/* 검증 메시지 */
.confirm { display:none; text-align:left; font-size: 13px; color: #d32f2f; margin-top: -25px;}
.b-notice {color: #005cd9; font-size: 14px; font-weight: bold;}

.login-container { position: relative; width: 100%; height: 100%; }
.login-container .left-area { position: relative; background: url("../../img/user/main_bg.png") no-repeat right; -webkit-background-size: cover; background-size: cover; float: left; width: -webkit-calc(100% - 660px); width: calc(100% - 660px); height: 100%;}
.login-container .left-area .cont { width: 750px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }
.login-container .left-area .cont .logo { margin-bottom: 50px; }
.login-container .left-area .cont .logo img { width: 220px; }
.login-container .left-area .cont .notice { width: 100%; }
.login-container .left-area .cont .notice h2 { font-size: 25px; position: relative; color: #fff; margin-bottom: 20px;}
.login-container .left-area .cont .notice h2 img { width: 30px; height: 30px; position: absolute; top: 0; right: 0; cursor: pointer; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: -o-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s, -o-transform .5s;  }
.login-container .left-area .cont .notice h2 img:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.login-container .left-area .cont .notice ul { border-top: 1px solid #fff; }
.login-container .left-area .cont .notice ul li { width: 100%; }
.login-container .left-area .cont .notice ul li a {background: rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.2); display: block; padding: 15px; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.login-container .left-area .cont .notice ul li:hover a {background: rgba(255,255,255,0.2);}
.login-container .left-area .cont .notice ul li a img { width: 15px; height: 20px; vertical-align: middle; margin-right: 10px; }


.login-container .right-area { float: right; position: relative; width: 660px; height: 100%; background: #fff; padding: 0 150px; display: table;}
.login-container .right-area .login-wrap { display: table-cell; vertical-align: middle; padding-bottom: 80px;}
.login-container .right-area .login-wrap .input-row {margin-bottom: 20px;}
.login-container .right-area .login-wrap .input-row .head {color: #999; font-size: 13px; display: block; margin-bottom: 5px;}
.login-container .right-area .login-wrap .input-row input[type=text],
.login-container .right-area .login-wrap .input-row input[type=password] { display: block; width: 100%; border: none; border-bottom: 1px solid #afafaf; height: 45px; outline: 0; -webkit-transition: background .5s; -o-transition: background .5s; transition: background .5s; letter-spacing: 0; font-size: 15px; padding: 0 5px; -webkit-transition: border-color .5s ease,background .5s ease; -o-transition: border-color .5s ease,background .5s ease; transition: border-color .5s ease,background .5s ease; background: #f8f8f8;}
.login-container .right-area .login-wrap .input-row input[type=text]:hover,
.login-container .right-area .login-wrap .input-row input[type=password]:hover { background: #efefef; }
.login-container .right-area .login-wrap .input-row input[type=text]:focus,
.login-container .right-area .login-wrap .input-row input[type=password]:focus { border-bottom: 1px solid #005cd9; }
.login-container .right-area .login-wrap .input-row input[type=text]:active,
.login-container .right-area .login-wrap .input-row input[type=password]:active { border-bottom: 1px solid #005cd9; }
.login-container .right-area .login-wrap .input-row .input-row .notice { display: block; font-size: 1.3rem; margin-top: 5px; font-weight: 300; }
.login-container .right-area .login-wrap .input-row .input-row.error .notice { color: #d32f2f }
.login-container .right-area .login-wrap .input-row .input-row.error input[type=text],
.login-container .right-area .login-wrap .input-row .input-row.error input[type=password] { border-bottom: 1px solid #d32f2f; }
.login-container .right-area .login-wrap .input-row .input-row.success .notice { color: #4caf50 }
.login-container .right-area .login-wrap .input-row .input-row.success input[type=text],
.login-container .right-area .login-wrap .input-row .input-row.success input[type=password] { border-bottom: 1px solid #4caf50; }
.login-container .right-area .login-wrap .title-area { font-size: 25px; font-weight: 500; text-align: center; margin-bottom: 30px; }

.login-container .right-area .option .check { float: left; }
.login-container .right-area .option .find { float: right; font-size: 1.3rem; line-height: 20px; cursor: default; margin-top: 3px; color: #555; text-align: center; color: #999; }
.login-container .right-area .option .find a { line-height: 20px; display: inline-block; font-weight: 300; cursor: pointer; color: #555; }
.login-container .right-area .option .find a:hover { color: #005cd9; text-decoration: underline; }

.login-container .right-area .login .login-btn { background: #005cd9; font-weight: 500; -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); -webkit-transition: background .25s ease,-webkit-box-shadow .25s ease; transition: background .25s ease,-webkit-box-shadow .25s ease; -o-transition: background .25s ease,box-shadow .25s ease; transition: background .25s ease,box-shadow .25s ease; transition: background .25s ease,box-shadow .25s ease,-webkit-box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 50px; color: #fff; height: 55px; border-radius: 30px; line-height: 55px; font-weight: 400; outline: 0; font-size: 15px; }
.login-container .right-area .login .login-btn:hover { background: #005cd9; -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }

.login-container .right-area .tab-area { margin-bottom: 30px; }
.login-container .right-area .tab-area ul { width: 100%; }
.login-container .right-area .tab-area ul li { width: 50%; float: left; }
.login-container .right-area .tab-area ul li a { display: block; width: 100%; padding: 10px 0; border: 1px solid #dee3eb; text-align: center; font-size: 13px;}
.login-container .right-area .tab-area ul li:first-child a{border-right: 0;}
.login-container .right-area .tab-area ul li:last-child a{border-left: 0;}
.login-container .right-area .tab-area ul li:hover a { background: #f4f4f4; }
.login-container .right-area .tab-area ul li.select a { background: #005cd9; border-color: #005cd9; color: #fff; }


/* notice detail layer pop */
.detail-pop-wrap .pop-area {width: 65%; height: 85%; text-align: left;}
table.detail-table {width: 100%; position: relative;} 
table.detail-table tbody tr.head td { padding: 20px;} 
table.detail-table tbody tr.head td.bul {width: 100px; background: #24252e; text-align: center; color: #fff; font-size: 15px; font-weight: 600; } 
table.detail-table tbody tr.head td.title {background: #f2f2f2; }
table.detail-table tbody tr.head td.title h3 {font-size: 15px; }
table.detail-table tbody tr.cont td {padding: 30px 0; text-align: left; font-size: 13px; color: #666; line-height: 1.8; border-bottom: 1px solid #dee3eb;}

.detail-pop-wrap.notice-detail .pop-area .body-area { height: calc(100% - 50px); overflow-y: auto; max-height: none;}
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table { border-bottom: 1px solid #dee3eb; }
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table tbody tr.cont { height: 60vh; }
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table tbody tr.cont td { vertical-align: top; border-bottom: 0; }
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table tbody tr.cont td.break-line { white-space: pre-wrap; }

/* 첨부파일 */
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table tbody tr.file { border-top: 1px solid #dee3eb; }
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table tbody tr.file td { padding: 10px; background: #eee; font-weight: 600;}
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table tbody tr.file td a {color: #407fd6; font-weight: 400;}
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table tbody tr.file td a:hover { text-decoration: underline; }
.detail-pop-wrap.notice-detail .pop-area .body-area table.detail-table tbody tr.file td:last-child { text-align: left; background: #fff; }

/* 메뉴얼 */
.login-container .right-area .manual { margin-top: 30px; padding-top: 15px; border-top: 1px solid #dee3eb; }
.login-container .right-area .manual ul li:first-child { float: left; }
.login-container .right-area .manual ul li:last-child { float: right; }
.login-container .right-area .manual ul li a { color: #555; }
.login-container .right-area .manual ul li a:hover { color: #407fd6; text-decoration: underline; }


@media all and (max-width: 1500px) {
	.login-container .left-area { width: 55vw; }
	.login-container .left-area .cont { width: 85%; }
	.login-container .right-area { width: 45vw; position: fixed; top: 0; right: 0; padding: 0 7%; }
}

@media all and (max-width: 800px) {
	.login-foot {display:none;}
}

.login-foot { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; background: #f4f4f4; }
.login-foot .img-area { float: left; width: 115px; }
.login-foot .img-area img { width: 100%; position: relative; top: 2px; }
.login-foot .info-area { float: left; width: calc(100% - 115px); font-size: 12px; padding-left: 30px; color: #76797b; }
.login-foot .info-area ul li { display: inline-block; margin-right: 7px; }
.login-foot .info-area .copy { color: #abb0b3; margin-top: 4px; }