@charset "UTF-8";

@font-face {
    font-family: "SpoqaHanSans";
    src: url('./font/Spoqa Han Sans Regular.ttf');
}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, header, nav, section, footer { margin: 0; padding: 0; border: 0;}
ol, ul { list-style: none;}
a, a:hover {color: #333; text-decoration: none;}
table, thead, tbody, tr, th, td {border-collapse: collapse;}
button, input[type="button"] {border: none; outline: 0; cursor: pointer; background-color: transparent; transition: background 0.3s, color 0.3s, border 0.3s;}


html, body {height: 100%;}

#login_wrap {width: 100%; height: 100%; display: flex; flex-direction: column; font-family: "SpoqaHanSans";}
#login_main {flex: none; height: 580px; background-color: #263c4e; position: relative;}
#login_main:after {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(../img/login_bg.png); background-repeat: no-repeat; background-position: top; animation: light 5s infinite;}
#login_notice {display: flex; justify-content: center; align-items: center; height: 100%;}
#login_footer {flex: none; height: 120px; margin-top: auto; background-color: #edeff1; display: flex; align-items: center; justify-content: center;}
.row {width: 1050px; margin: 0 auto;}

#login_main .row {height: 100%; position: relative; z-index: 9;}
#login_main .login {display: flex; height: 100%; flex-wrap: nowrap; align-items: center;}
#login_main .login > div {flex: none; width: 50%;}

#login_main .login .login_left {color: #fff;}
#login_main .login .login_left > .bar {display: block; width: 62px; height: 2px; background-color: #6c7781;}
#login_main .login .login_left > h1 {font-size: 48px; margin: 22px 0; line-height: 1.2;}

#login_main .login .login_left .btn_wrap {margin-top: 80px;}
#login_main .login .login_left .btn_wrap > button  {width: 197px; height: 62px; border-radius: 5px; font-size: 18px; font-family: "SpoqaHanSans";}
#login_main .login .login_left .btn_wrap > .btn_down {background-color: #00a88e; color: #fff}
#login_main .login .login_left .btn_wrap > .btn_down:hover {background-color: #14c1a6;}
#login_main .login .login_left .btn_wrap > .btn_manual {background-color: transparent; border: 1px solid #00a88e; color: #00a88e; margin-left: 10px;}
#login_main .login .login_left .btn_wrap > .btn_manual:hover {border: 1px solid #fff; color: #fff}

#login_main .login .login_right {width: 350px; overflow: hidden; opacity: 0; transform: translateY(10px); animation: start 0.5s 0.5s 1; animation-fill-mode: forwards;}
#login_main .login .login_right .input_box {margin-top: 33px; position: relative;}
#login_main .login .login_right .input_box > .title {font-size: 16px; color: #fff;}
#login_main .login .login_right .input_box > input {border: 0; background-color: transparent; width: 100%; padding: 10px 0; color: #fff; border-bottom: 1px solid #ccc; outline: 0; transition: border 0.3s;}
#login_main .login .login_right .input_box > input:focus {border-bottom: 1px solid #00a88e;}
#login_main .login .login_right .input_box .btn_sms {padding: 5px 10px; background-color: transparent; border: 1px solid #ccc; color: #ccc; position: absolute; top: 22px; right: 0;}
#login_main .login .login_right .btn_login {width: 350px; height: 50px; background-color: #00a88e; color: #fff; font-size: 16px; margin-top: 32px;}
#login_main .login .login_right .btn_login:hover {background-color: rgba(62,86,103, 0.6);}
#login_main .login .login_right .btn_join {color: #fff; float: right; margin-top: 10px;}

#login_main .login #findPasswordBtn {color: #fff; margin-top: 10px; cursor: pointer;}

#login_notice .notice {display: flex; align-items: center; opacity: 0; transform: translateY(10px); animation: start 0.5s 0.8s 1; animation-fill-mode: forwards; }
#login_notice .notice .notice_box {flex: none; width: 40%;}
#login_notice .notice .notice_box > h2 {margin-bottom: 25px; color: #00a88e; font-size: 24px;}
#login_notice .notice .notice_box > div {}
#login_notice .notice .notice_box .left {border-right: 1px dashed #ccc;}
#login_notice .notice .notice_box .left .list {display: flex; flex-direction: column; height: 13vh;}
#login_notice .notice .notice_box .left .list > li {flex: auto; width: 90%; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center;}
#login_notice .notice .notice_box .left .list > li .date {margin-right: 10px;}
#login_notice .notice .important_notice_list {flex: none; width: 58%; margin-left: auto; font-size: 14px;}
#login_notice .notice .important_notice_list > li {display: flex; align-items: center; margin-bottom: 10px;}
#login_notice .notice .important_notice_list > li:last-child {margin-bottom: 0; font-size: 12px; color: red;}
#login_notice .notice .important_notice_list > li .icon_box {flex: none; width: 100px; height: 100px; background-repeat: no-repeat; background-position: center;}
#login_notice .notice .important_notice_list > li:first-child .icon_box {background-image: url(../img/icon_video1.png);}
#login_notice .notice .important_notice_list > li:nth-child(2) .icon_box {background-image: url(../img/icon_video2.png);}
#login_notice .notice .important_notice_list > li .important_content {line-height: 1.5;}
#login_notice .notice .important_notice_list > li .important_content > h3 {margin-bottom: 5px;}
#login_notice .notice .important_notice_list > li .important_content > span {color: #00a88e;}
/* #login_notice .notice .notice_box .right {box-sizing: border-box; padding-left: 70px;} */
/* #login_notice .notice .notice_box .right > .title {line-height: 1;} */
/* #login_notice .notice .notice_box .right > .date {font-size: 13px; color: #666;} */
/* #login_notice .notice .notice_box .right > p {width: 80%; font-size: 14px; color: #666; word-break: keep-all; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} */

#login_footer > p {margin-left: 15px; font-size: 14px;}

.join_pop {width: 350px; height: 450px; background-color: #fff; box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); box-sizing: border-box; padding: 15px; border-radius: 3px; display: none; position: relative; font-family: "SpoqaHanSans";}
.join_pop > h2.title {margin-bottom: 10px;}
.join_pop .btn_close {width: 40px; height: 40px; background-image: url(../img/btn_close.png); background-repeat: no-repeat; background-position: center; background-size: 50%; position: absolute; top: 0; right: 0;}
.join_pop .join_box {display: flex; flex-wrap: nowrap; height: 92%; overflow: hidden;}
.join_pop .join_box .box {flex: none; width: 100%; height: 100%; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px);}
.join_pop .join_box .box {flex: none; width: 100%; height: 100%; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px);}
.join_pop .join_box .box.on {animation: start 0.5s 1; animation-fill-mode: forwards;}

.join_pop .join_box .box > h3 {font-size: 14px; margin: 10px 0; font-weight: normal; color: #00a88e;}
.join_pop .join_box .box > h3 > .ball {display: inline-block; width: 20px; height: 20px; line-height: 20px; font-size: 12px; text-align: center; border-radius: 50%; background-color: #00a88e; color: #fff; margin-right: 5px;}
.join_pop .join_box .box .input_box {margin-top: 10px; position: relative;}
.join_pop .join_box .box .input_box > h3 {font-size: 12px; color: #666;}
.join_pop .join_box .box .input_box > input, .join_pop .join_box .box .input_box > select {border: 0; background-color: transparent; width: 100%; padding: 10px 0; color: #333; border-bottom: 1px solid #ccc; outline: 0; transition: border 0.3s;}
.join_pop .join_box .box .input_box > input:focus, .join_pop .join_box .box .input_box > select:focus {border-bottom: 1px solid #00a88e;}
.join_pop .join_box .box .input_box .btn_id_check {padding: 5px 10px; border: 1px solid #ddd; font-size: 12px; color: #666; position: absolute; top: 16px; right: 0;}
.join_pop .join_box .box .btn_wrap {margin-top:auto; text-align: right; margin-bottom: 10px;}
.join_pop .join_box .box .btn_wrap > button {width: 50px; height: 50px; background-color: #00a88e; border-radius: 50%; font-size: 12px; color: #fff;}
.join_pop .join_box .box .btn_wrap > button.btn_prev {background-color: #999;}


/* 공통 테이블 스타일 */
.table_style {box-sizing: border-box; padding: 0 15px !important; color: #fff;}
.table_style table {width: 100%; table-layout: fixed; border-collapse: collapse; margin: 10px 0; font-size: 13px; color: #fff;}
.table_style table tbody tr:nth-child(2n-1) {background-color: #232426; border-radius: 5px; }
.table_style table tbody tr td:first-child {border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.table_style table tbody tr td:last-child {border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.table_style table th {text-align: center !important; padding: 15px 0; white-space: nowrap; font-weight: normal;}
.table_style table td { box-sizing: border-box; padding: 5px 10px; word-break: break-word; text-align: center;}
.table_style table td:last-child {border-right: 0;}
.table_style table td select, .table_style table td input, .table_style table td textarea {width: 95%; border: none; background-color: transparent; color: #999; outline: 0;}
.table_style table td select:focus, .table_style table td input:focus {color: #fff;}
.table_style table td select option, .table_style table td select optgroup {background-color: #282828;}
.table_style table td textarea {border: 1px solid #333;}
.table_style table td input {width: 95%; border-bottom: 1px solid #333;}
.table_style table td input[type="checkbox"], .table_style table td input[type="radio"] {width: auto; vertical-align: sub;}
.table_style table td button {display: inline-block; vertical-align: middle;}
.table_style .btn_t {width: auto; height: 18px; border-radius: 3px; background-color: #333; color: #fff; font-size: 11px; padding: 0 3px; margin-right: 5px;}
.table_style .btn_t:last-child {margin-right: 0;}
.btn_style {width: 100%; height: 40px; background-color: #0078d4; color: #fff; border-radius: 2px; margin: 5px 0;}
.btn_style:hover {background-color: #006abb;}
.btn_style2 {padding: 5px 10px; background-color: #0078d4; color: #fff; margin: 5px 5px; border-radius: 2px; font-size: 13px !important; white-space: nowrap;}
.btn_style2:hover {background-color: #006abb;}
.btn_Dstyle {border: 1px solid #ccc !important; background-color: transparent; border-radius: 2px !important; margin: 5px 5px; padding: 5px 10px !important; font-size: 13px !important; color: #fff; box-shadow: none !important; white-space: nowrap;}
.btn_Dstyle:hover {background-color: #fff; color: #333;}
.btn_Dstyle2 {padding: 5px 10px; background-color: #aaa; color: #333; margin: 5px 5px; border-radius: 2px; font-size: 13px !important; white-space: nowrap;}
.btn_Dstyle2:hover {background-color: #ddd;}
.btn_Gstyle {width: 100%; height: 40px; background-color: #aaa; color: #333; border-radius: 2px; margin: 5px 0;}
.btn_Gstyle:hover {background-color: #ddd;}
.btn_Bstyle {width: 100%; height: 40px; background-color: transparent; color: #fff; border: 1px solid #fff; border-radius: 2px; margin: 5px 0;}
.btn_Bstyle:hover {background-color: #fff; color: #333;}
.btn_Bstyle2 {width: 100%; height: 40px; background-color: transparent; color: #fff; border: 1px solid #000; border-radius: 2px; margin: 5px 0;}
.btn_Bstyle2:hover {background-color: #666;}
.box {display: flex; flex-flow: nowrap; justify-content: space-between;}
.table_style .box_style {display: flex; flex-flow: wrap; justify-content: space-between; padding-top: 15px;}
.table_style  h3.title {margin: 18px 0; color: #999; font-size: 14px;}
.table_style .text {font-size: 13px; color: #999; margin: 5px 0;}
.table_style .box_style .info_box {flex: 0 0 49%; min-height: 50px; border-radius: 5px; background-color: #232426; margin-bottom: 10px; box-sizing: border-box; padding: 3px 10px; font-size: 13px; color: #fff; display: flex; justify-content: space-between; align-items: center;}
.table_style .box_style .info_box.wd100 {flex: 0 0 100%;}
.table_style .box_style .info_box span.title {display: inline-block; white-space: nowrap; margin-right: 5px;}
.table_style .box_style .info_box input, .table_style .box_style .info_box select, .table_style .box_style .info_box textarea {width: 70%; border: none; background-color: transparent; color: #999; outline: 0;}
.table_style .box_style .info_box input {border-bottom: 1px solid #333;}
.table_style .box_style .info_box textarea {border: 1px solid #333;}
.table_style .box_style .info_box input:focus, .table_style .box_style .info_box select:focus {color: #fff;}
.table_style .box_style .info_box select option, .table_style .box_style .info_box select optgroup {background-color: #282828;}
.table_style .box_style .info_box label {white-space: nowrap; margin: 0 10px 0 15px;}
.table_style .box_style .info_box label input[type="radio"] {width: auto; vertical-align: bottom;}
.table_style .box_style .info_box .box2 {flex: auto; display: flex; align-items: center; justify-content: space-evenly;}
.table_style .box_style .info_box .box2 label {white-space: nowrap;}
.btn_close {width: 50px; height: 50px; background-image: url(../img/btn_close_w.png); background-size: 30%; background-color: transparent !important; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; right: 0; margin: 0; padding: 0; border-radius: 0; border: 0;}
#excelBtn, #xls_down_btn {background-color: #1f6e43; color: #fff;}

/* 팝업 상단(제목, 닫기) */
.ui-dialog {padding: 0; border: 0 !important; border-radius: 0; background-color: #282828;}
.ui-dialog-titlebar {border-radius: 0; background-color: #0078d4; color: #fff; font-weight: normal; padding: .7em 1em !important;}
.ui-dialog-titlebar .ui-dialog-title {font-size: 15px;}
.ui-dialog .ui-dialog-titlebar-close {width: 50px; height: 100%; background-image: url(../img/btn_close_w.png); background-size: 30%; background-color: transparent !important; background-repeat: no-repeat; background-position: center; top: 0; right: 0; margin: 0; padding: 0; border-radius: 0; border: 0;}
.ui-dialog .ui-dialog-titlebar-close > span {display: none;}
.ui-dialog .ui-dialog-titlebar-close:hover {background-color: #ddd;}
.ui-widget-header {border: 0;}
.ui-dialog[aria-describedby="webSearchWrap"] {bottom: initial !important;}

@keyframes light {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

@keyframes start {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 2000px) {
    #login_main {height: 700px;}
    #login_footer {height: 200px;}
    #login_notice .notice .notice_box .left .list {height: 16vh;}
    #login_notice .notice .notice_box .right > p {-webkit-line-clamp: 8;}
}

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #login_notice {
  	display: block;
  }
  #login_notice .notice > h2 {
  	margin-top: 20px;
  }
  #login_notice .notice .notice_box .right > p {
  	height: 26%;
  }
}