@charset "utf-8";
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); /*font-family: 'Noto Sans KR', sans-serif;*/

html {height: 100%;}
body {width: 100%; height: 100%; min-height: 100vh; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -2px; display: flex; display: -webkit-box; display: -ms-flexbox; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
body * {font-family: 'Noto Sans KR', sans-serif;}

#wrap {position: relative; width: 100%; height: 100vh; background: #134290 url(/resources/images/admin/login_bg.png) no-repeat bottom 60px right 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}

#content {background: #fff; text-align: center; padding: 40px; border-radius: 10px; width: 1100px; height: 780px; font-size: 18px; box-sizing: border-box;}
#content h1	{font-size: 20px; font-weight: 400; margin-bottom: 40px;}

#content2 {background: #fff; text-align: center; padding: 40px; border-radius: 10px; width: 600px; height:550px; font-size: 18px; box-sizing: border-box;}
#content2 h1 {font-size: 20px; font-weight: 400; margin-bottom: 40px;}

#login {position: relative;}
#login .loginLeft,
#login .loginRight {width: 50%; float: left; box-sizing: border-box;}

#login fieldset	{display: block; margin-top: 30px;}
#login fieldset:after {content: ""; display: block; clear: both;}
#login input[type="text"],
#login input[type="password"] {display: block; border-radius: 5px; color: #a6a6a6; font-size: 18px; border: 1px solid #ddd; height: 60px; line-height: 60px; text-indent: 10px; margin-bottom: 15px; width: 100%;}
#login input::placeholder {color: #a6a6a6; letter-spacing: -2px;}
#login button {display: block; width: 100%; height: 60px; text-align: center; color: #fff; background: #134290; font-size: 20px; border-radius: 5px; letter-spacing: -2px;}
#login button:hover {background: #0d3880;}
#login h2 {font-size: 30px; color: #000; font-weight: 400; line-height: normal;}

#login .loginLeft {padding-right: 40px;}
#login .loginList {display: inline-block; width: 100%; margin-top: 10px; padding-bottom: 30px; border-bottom: 1px solid #ddd;}
#login .loginList ul {float: left;}
#login .loginList ul li {position: relative; float: left;}
#login .loginList ul li:after {content: ""; position: absolute; top: 4px; right: -2px; width: 1px; height: 15px; background: #8a8a8a;}
#login .loginList ul li:last-child::after {display: none;}
#login .loginList ul li a {color: #8a8a8a; font-size: 16px; padding: 0 10px;}
#login .loginList ul li a:hover {text-decoration: none; color: #333;}
#login .loginList ul li:first-child a {padding-left: 0;}
#login .loginList ul li:last-child a {padding-right: 0;}
#login .loginList .saveId {float: right;}
#login .loginList .saveId label {font-size: 16px; color: #a6a6a6; cursor: pointer; font-weight: 400;}
#login .loginList .saveId label input {margin: 0 4px 0 0; zoom: 1.3;}
#login .loginMsg {display: inline-block; width: 100%; margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; text-align: left;}
#login .loginMsg p {color: #8a8a8a; font-size: 16px; margin: 5px 0 5px;}
#login .loginCert {padding-top: 30px;}
#login .loginCert p {color: #8a8a8a; font-size: 16px; margin: 5px 0 30px;}
#login .certList {display: inline-block; width: 100%; margin-bottom: 25px;}
#login .certList li {float: left; width: 49%;}
#login .certList li.cert01 {margin-right: 1%;}
#login .certList li.cert02 {margin-left: 1%;}
#login .certList li.cert01 button {background: #007d3c;}
#login .certList li.cert01 button:hover {background: #016632;}
#login .certList li.cert02 button {background: #f39800;}
#login .certList li.cert02 button:hover {background: #e49005;}

#login .loginRight {padding-left: 40px;}
#login .loginNoti {width: 100%; height: 520px; background: #f4f4f4; border-radius: 10px; padding: 30px; box-sizing: border-box; margin-top: 30px;}
#login .loginNoti ul li {position: relative; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 25px; padding-left: 20px;}
#login .loginNoti ul li:before {content: ""; position: absolute; top: 6px; left: 0; width: 6px; height: 6px; background: #5c5c5c; border-radius: 50%;}
#login .loginNoti ul li:last-child {margin-bottom: 0;}
#login .leftBtm ul {float: right;}
#login .leftBtm ul li {position: relative; float: left;}
#login .leftBtm ul li:first-child::after {content: ""; position: absolute; top: 4px; right: -2px; width: 1px; height: 15px; background: #8a8a8a;}
#login .leftBtm ul li a {color: #8a8a8a; font-size: 16px; padding: 0 10px;}
#login .leftBtm ul li a:hover {text-decoration: none; color: #333;}
#login .leftBtm ul li:last-child a {padding-right: 0;}

/*modal 공통*/
.modal {display: none; position: fixed; z-index: 999; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
.modal-content {background-color: #fefefe; margin: auto;  border: 1px solid #888; width: 80%; border-radius: 10px;}
.modal-header {position: relative; padding: 20px; border-bottom: 1px solid #ddd;}
.modal-header .modal-title {margin: 0 10px; font-size: 20px; font-weight: 400;}
.modal-body {padding: 20px;}
.modal-header .close {position: absolute; top: 15px; right: 20px; color: #aaa; float: right; font-size: 28px; font-weight: bold;}
.modal-header .close:hover,
.modal-header .close:focus {color: #000; text-decoration: none; cursor: pointer;}

/*인증서 등록 modal*/
#certModal {text-align: center;}
#certModal .modal-content {width: 420px;}
#certModal .modal-header .close {top: 20px; color: #000; opacity: 1; font-weight: 400;}
#certModal .modal-header h2 {font-size: 24px; font-weight: 400;}
#certModal input[type="text"],
#certModal input[type="password"] {width: 100%; letter-spacing: -2px; height: 50px; font-size: 18px; margin-bottom: 15px;}
#certModal .modal-body {padding: 30px;}
#certModal .modal-footer {/*display: none;*/}
#certRegist {width: 100%; height: 50px; color: #fff; background: #134290; font-size: 18px; border-radius: 5px; letter-spacing: -2px;}

/*비밀번호 변경 modal*/
#changePwModal {text-align: center;}
#changePwModal .modal-content {width: 700px;}
#changePwModal .modal-header .close {top: 20px; color: #000; opacity: 1; font-weight: 400; display: none;}
#changePwModal .modal-header h2 {font-size: 24px; font-weight: 400;}
#changePwModal .modal-body {padding: 30px;}
#changePwModal .pw_noti {position: relative; text-align: left; font-size: 16px; margin-bottom: 10px; padding-left: 10px;}
#changePwModal .pw_noti:before {content: ""; position: absolute; top: 4px; left: 0; width: 3px; height: 16px; background: #0f449e;}
#changePwModal .pw_box {border: 1px solid #ddd; padding: 20px 20px 10px;}
#changePwModal .pw_box .pw_tip {padding-bottom: 10px; text-align: left; font-size: 15px;}
#changePwModal .pw_box .pw_tip li {position: relative; padding-left: 15px;}
#changePwModal .pw_box .pw_tip li:before {content: ""; position: absolute; top: 9px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #0f449e;}
#changePwModal label {width: 20%; float: left; line-height: 50px; font-size: 16px; text-align: right; padding-right: 20px;}
#changePwModal input[type="password"] {width: 80%; float: left; letter-spacing: -2px; height: 50px; font-size: 16px; margin-bottom: 10px;}
#changePwModal .pw_btn {margin-top: 30px;}
#changePwModal .pw_btn .btn {width: 150px; height: 50px; margin: 0 5px; color: #fff; font-size: 16px; border-radius: 5px; letter-spacing: -2px;}
#changePwModal .pw_btn .btn.btn01 {background: #134290;}
#changePwModal .pw_btn .btn.btn02 {background: #484848;}
#changePwModal .pw_btn .btn.btn02 p {display: none;}

.news-tab-cont > li > a > div {display: none;}

/*반응형*//*반응형*//*반응형*//*반응형*/
@media all and (max-width: 1100px) {
	body {min-height: auto;}
	#wrap {display: inline-block; width: 100%; height: auto;}
	#content {width: 100%; height: 100%; padding: 20px 30px; border-radius: 0;}
	#content2 {width: 100%; height: 100%; padding: 20px 30px; border-radius: 0;}
	#login .loginLeft {padding-right: 20px;}
	#login .loginRight {padding-left: 20px;}
	#certModal .modal-content {width: 60%;}
}

@media all and (max-width: 1000px) {
	#content {font-size: 16px;}
	#content h1 {margin-bottom: 20px;}
	#content2 {font-size: 16px;}
	#content2 h1 {margin-bottom: 20px;}
	#login h2 {font-size: 26px;}
	#login fieldset,
	#login .loginNoti {margin-top: 20px;}
	#login .loginNoti {height: 460px; margin-bottom: 30px;}
	#login .loginCert {padding-top: 20px;}
	#login button {font-size: 18px; height: 50px;}
	#login input[type="text"],
	#login input[type="password"] {height: 50px; line-height: 50px; font-size: 16px;}
	#login .loginNoti ul li {margin-bottom: 20px;}
}	

@media all and (max-width: 900px) {
	#login .loginLeft,
	#login .loginRight {width: 100%; padding: 0;}
	#login .loginRight {margin-top: 20px; border-top: 1px solid #ddd; padding-top: 30px;}
}

@media all and (max-width: 800px) {
	#certModal .modal-content {width: 70%;}
	#changePwModal .modal-content {width: 90%;}
}

@media all and (max-width: 700px) {
	#changePwModal label {float: none; width: 100%; text-align: left;}
	#changePwModal input[type="password"] {width: 100%; float: none;}
}

@media all and (max-width: 500px) {
	#content {padding: 10px 20px;}
	#content h1 img {width: 180px;}
	#content2 {padding: 10px 20px;}
	#content2 h1 img {width: 180px;}
	
	#login .loginNoti {height: auto;}
	#login .loginNoti ul li:nth-child(5) {margin-bottom: 0;}
	#login .loginNoti ul li:nth-child(6),
	#login .loginNoti ul li:nth-child(7),
	#login .loginNoti ul li:nth-child(8),
	#login .loginNoti ul li:nth-child(9),
	#login .loginNoti ul li:last-child {display: none;}
	#login h2 {font-size: 22px;}
	#login input[type="text"],
	#login input[type="password"] {height: 45px; line-height: 45px; font-size: 15px;}
	#login button {font-size: 16px; height: 45px;}
	#login .loginList ul {width: 100%;}
	#login .loginNoti ul li {margin-bottom: 15px;}
	#login .loginCert p,
	#login .loginList ul li a,
	#login .loginList .saveId label,
	#login .leftBtm ul li a {font-size: 14px;}
	#login .loginList .saveId label input {zoom: 1;}
	
	#certModal .modal-content {width: 95%;}
	#certModal .modal-header h2 {font-size: 20px;}
	#certModal .modal-header .close {font-size: 24px;}
	#certModal .modal-body {padding: 20px;}
	#certModal input[type="text"],
	#certModal input[type="password"],
	#certRegist {font-size: 16px; height: 45px;}
	
	#changePwModal .pw_noti,
	#changePwModal label,
	#changePwModal input[type="password"],
	#changePwModal .pw_box .pw_tip {font-size: 14px;}
	#changePwModal label {line-height: 30px;}
	#changePwModal input[type="password"] {height: 40px;}
	#changePwModal .pw_btn {margin-top: 20px;}
	#changePwModal .pw_btn .btn {width: 100px; height: 40px; font-size: 14px; margin: 0 2px;}
	
}

/*height 반응형*/
@media all and (max-height: 780px) {
	#content {height: 100%;}
	#content2 {height: 100%;}
}