@charset "utf-8";

/* 컨텐츠 시작 */

/* 로그인 */
.wrap {padding:0 40px;}
.login_bg {background:url(../images/login_bg.png) top center no-repeat;height:100vh;width:100%;z-index:-1;display:table;background-size: cover;}
.login_wrap {margin:0 auto;vertical-align:middle;display:table-cell;}
.login_wrap .login_w {background:#fff;border-radius:10px;width:900px;height:670px;margin:0 auto;box-shadow:0 26px 35px 0 rgba(0,0,0,0.1);padding:15px 0;}

.logo_box {margin-bottom:20px;display:inline-block;}

.head_ul {display:inline-block;float:right;margin-top:5px;}
.head_ul li {display:inline-block;}
.head_ul li a {height:30px;line-height:28px;font-size:14px;color:#666;border:1px solid #ddd;border-radius:30px;display:inline-block;font-weight:400;padding:0 10px;}
.head_ul li a img {padding-top:5px;}
.head_ul li a p {display:inline-block;font-family:'Pretendard';}

.info {background:#e6e6e6;padding:15px 0;}
.info strong {font-size:16px;color:#3d3d3d;font-family:'Pretendard';}
.info p {font-size:14px;color:#666;font-family:'Pretendard';line-height:20px;}

.login {height:100%;display:flex;}
.login_box {width:50%;float:left;padding:20px 20px 0 0;}
.login_box .input_style {width:100%;height:40px;border:1px solid #ddd;border-radius:5px;padding:0 20px;font-size:14px;margin-bottom:3px;}
.btn_box {width:100%;margin-top:5px;}
.btn_box a:hover {background:#000;color:#6bdbff;}
.btn_box button:hover {background:#000;color:#6bdbff;}

.btn_box .login_btn {font-family:'Pretendard';background:#7987eb;font-size:16px;color:#fff;font-weight:300;height:40px;line-height:40px;text-align:center;border-radius:5px;display:block;margin-bottom:5px;}
.btn_box .login_btn:hover, .btn_box .login_btn:focus, .btn_box .login_btn:active {background:#222;color:#fff;}
.btn_box .certificate {background:#003964;}

.login_box .find {text-align:center;margin-top:5px;display: inline-block;width:100%;}
.login_box .find a {position:relative;padding:0 10px;font-size:14px;font-family:'Pretendard';}
.login_box .find a:before {content:"";position:absolute;width:1px;height: 10px;top:3px;left:0;background:#ddd;}
.login_box .find a:first-child:before {display:none;} 

.login_box .join {text-align:center;margin-top:10px;display:inline-block;width:100%;padding-bottom:25px;margin-bottom:25px;border-bottom:1px dashed #d9d9d9;}
.login_box .join a {border:1px solid #ccc;height:30px;line-height:28px;display:inline-block; font-size:14px;font-family:'Pretendard';width:49%;float:left;border-radius:30px;text-align:left;padding:0 15px 0 20px;}
.login_box .join a:last-child {width:49%;margin-left:2%;}
.login_box .join a:hover, .login_box .join a:focus, .login_box .join a:active {background:#222;color:#fff;border:1px solid #222;}
.login_box .join a img {float:right;margin-top:8px;}

.system {background:#f3f3f3;padding:15px 15px;border-radius:5px;}
.system strong {font-family:'Pretendard';position:relative;font-size:14px;color:#ed560c;font-weight:600;padding-left:25px;}
.system strong:before {content:"";position:absolute;width:20px;height: 20px;top:0px;left:0;background:url(../images/system_icon.png) left center no-repeat;}
.system ul {padding-left:15px;}
.system ul {padding-left:15px;}
.system ul li {position:relative;font-family:'Pretendard';font-size:13px;line-height:18px;margin-top:10px;padding-left:10px;}
.system ul li:before {content:"";position:absolute;width:5px;height: 2px;top:7px;left:0;background:#ccc;}

.login_box_right {width:50%;float:left;height:100%;padding-top:20px;}
.login_box_right .lb_w {border-left:1px solid #ddd;padding-left:20px;}
.login_box_right .lb_w .lbr {background:#f5f8ff;border-radius:5px;padding:15px;}
.login_box_right .lb_w .lbr strong {font-family:'Pretendard';position:relative;font-size:16px;color:#ed193b;font-weight:600;padding-left:25px;}
.login_box_right .lb_w .lbr strong:before {content:"";position:absolute;width:19px;height: 19px;top:1px;left:0;background:url(../images/notice.png) left center no-repeat;}
.login_box_right .lb_w .lbr ul {padding-left:30px;margin-top:5px;}
.login_box_right .lb_w .lbr ul li {font-size:14px;line-height:20px;margin-top:5px;display:inline-block;width:100%;}
.login_box_right .lb_w .lbr ul li:last-child {color:#4152d1;}
.login_box_right .lb_w .lbr ul li span {font-family:'Pretendard';width:20px;font-size:18px;float:left;}
.login_box_right .lb_w .lbr ul li p {font-family:'Pretendard';width:calc(100% - 20px);float:left;}
.login_box_right .lb_w .lbr ul li a {height:21px;line-height:22px;border-radius:5px;background:#213042;color:#fff;padding:0 8px;font-size:12px;display: inline-block;margin-left:5px;}
.login_box_right .lb_w .lbr ul li a.blue {background:#4152d1;color:#fff;}
.lbr_btn {margin-top:5px;display:inline-block;width:100%;}
.lbr_btn a {font-family:'Pretendard';background:#666;font-size:14px;color:#fff;font-weight:300;height:40px;line-height:40px;text-align:center;border-radius:5px;display:block;margin-top:5px;}
.lbr_btn a:nth-child(2) {background:#00297d;}
.lbr_btn a:nth-child(3) {background:#ffcc00;color:#000;font-weight:400;}
.lbr_btn a:nth-child(3) img {margin:7px 10px 0 0;}
.lbr_btn a:hover, .lbr_btn a:focus, .lbr_btn a:active {background:#222;color:#fff;}

/* 자동로그아웃 */
.etc {height:100vh;width:100%;z-index:-1;display:table;background:#ccc;}
.etc_wrap {margin:0 auto;vertical-align:middle;display:table-cell;}
.etc_wrap .etc_box {background:#fff;border-radius:10px;width:700px;height:auto;margin:0 auto;padding:30px 0 0 0;overflow:hidden;}
.etc_wrap .etc_box .logo_box {text-align:center;}
.content {text-align:center;}
.content > div {background:#f5f8ff;padding:30px 50px;margin-top:30px;text-align:left;display:inline-block;width:100%;}
.content strong {font-family:'Pretendard';color:#4152d1;display:inline-block;width:100%;font-size:25px;margin-bottom:10px;width:230px;float:left;}
.content p {font-family:'Pretendard';color:#3d3d3d;display:inline-block;width:100%;font-size:16px;font-weight:300;line-height:25px;width:calc(100% - 230px);float:left;}
.content .btn {padding:10px 0 0 230px;display: inline-block;}
.content .btn a {border:1px solid #ccc;height:30px;line-height:28px;display:inline-block; font-size:14px;font-family:'Pretendard';width:200px;border-radius:30px;text-align:left;padding:0 15px 0 20px;background:#fff;}
.content .btn a:hover, .content .btn a:focus, .content .btn a:active {background:#222;color:#fff;border:1px solid #222;}
.content .btn a img {float:right;margin-top:8px;}

/* 오류페이지 */
.content2 {}
.content2 > div {text-align:center;}
.content2 strong {width:100%;float:unset;text-align:center;line-height:30px;}
.content2 p {width:100%;float:unset;text-align:center;font-size:14px;font-weight:400;margin-top:10px;line-height:18px;}
.content2 span {font-family:'Pretendard';color:#e60d36;font-weight:600;}
.content2 .btn {padding:0;display:inline-block;margin-top:10px;}
.content2 .btn a {width:150px;}
.content2 .btn a:first-child {border:1px solid #336bd3;color:#336bd3;}
.content2 .btn a:first-child img {filter: invert(40%) sepia(14%) saturate(4813%) hue-rotate(191deg) brightness(93%) contrast(92%);}
.content2 .btn a:first-child:hover, .content2 .btn a:first-child:focus, .content2 .btn a:first-child:active {background:#336bd3;color:#fff;border:1px solid #336bd3;}
.content2 .btn a:first-child:hover img, .content2 .btn a:first-child:focus img, .content2 .btn a:first-child:active img {filter:brightness(1000%);}


.call_center {padding:5px 30px;display:flow-root;width:100%;background:#4152d1;}
.call_center p {font-family:'Pretendard';float:left;font-size:18px;color:#fff;font-weight:600;}
.call_center span {font-family:'Pretendard';float:right;color:#fff;}