@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {
    font-family: 'SEBANG_Gothic_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 초기화 */
html {overflow-y:scroll; min-width:1600px;}
body {margin:0;padding:0;font-size:0.75em;font-family: 'Noto Sans KR', sans-serif;background:#fff;height:100%;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: 'Noto Sans KR', sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul{margin:0;padding:0;list-style:none}
li,dt,dd,ol{margin:0;padding:0}
ol{list-style-position:inside}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;font-size:1em}
button,input[type="submit"] {cursor:pointer}
input, button {border-radius:3px;}
textarea, select {font-family: 'Noto Sans KR', sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

h2{font-size: 1.083em;font-weight: bold;margin:10px 0}

/* 로그인화면 */
.icar_main {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  background:#0f2657;
}

.icar_login {
  width: 1400px;
  height:700px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.icar_login .logo {
  width:145px;
  height:140px;
  border-radius:20px;
  background-color:#fff;
  position:relative;
  margin-bottom:50px;
  animation:ball 0.5s ease-in;
}
@keyframes ball {
  0% {
    left:-300px;
  }
  95% {
  }
  to {
    left:0;
  }
}
.icar_login .logo img {width:70%; position:absolute; top:50%; transform:translate(-50%,-50%); left:50%;}
.icar_login .titlebox img {
  width:65%;
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}
.icar_login .titlebox {
  width:45%; color:#fff; padding:15px 0;
  float:left;
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.icar_login .titlebox h3 {font-family: 'SEBANG_Gothic_Bold'; letter-spacing:5px; font-size:54px;}
.icar_login .titlebox p {font-size:34px; font-weight:300; letter-spacing:1px; margin-top:-15px}
.icar_login .formbox {padding:80px 60px; width:43%; float:right;background:#fff; border-radius:30px}
.icar_login:after {clear:both; content:""; display:block}
.icar_login .formbox p {font-size:30px; font-weight:bold; letter-spacing:-0.6px; font-family: 'GmarketSansMedium'; color:#333; margin-bottom:25px}
.icar_login .formbox input {display: block; margin:10px 0;}
.icar_login:after {clear:both; content:""; display:block;}
.icar_login .formbox input {width:100%; height:50px; font-size:17px; padding-left:12px; border:1px solid #aaa;}
.icar_login .formbox button {width:100%; height:60px; background:#0FADD1; color:#fff; border:0; font-size:21px; font-weight:bold; margin-top:40px; border-radius:5px}

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}


.formbox {
  background: #191c29;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
}


.formbox::before {
  content: "";
  width: 104%;
  height: 104%;
  border-radius: 35px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -2%;
    left: -2%;
    animation: spin 2.5s linear infinite;
}

.formbox::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}


.header {display:flex; align-items:center; justify-content:space-between; padding:18px 100px; background:#fff; border-bottom:1px solid #e5e5e5; position:relative;}
.header div {width:auto; float:none;}
.header_logo img {width:150px}
.header_btn {height:auto; padding-top:0; text-align:right;}
.header_btn .btn {border:1px solid #ddd; background:#fff; font-weight:600; color:#555; font-size:14px; padding:8px 16px; border-radius:4px; margin-left:8px}
.header_btn .btn:hover {background:#f5f5f5; color:#333}

/* 관리자 모뎀제어 페이지 */
.tbl_head {margin-bottom:20px;}
.tbl_head:after {content:""; display:block; clear:both;}
.tbl_left {float:left;}
.tbl_left div {display:inline-block; font-size:14px; font-weight:600; color:#444; background:#fff; border:1px solid #e0e0e0; border-radius:4px; line-height:38px; height:38px; padding:0 16px; letter-spacing:0; font-family:'Noto Sans KR', sans-serif;}
.tbl_right {float:right;}
.tbl_right select {display:inline-block; width:auto; height:38px; min-width:120px; border:1px solid #ddd; border-radius:4px; padding:0 32px 0 12px; font-size:14px; margin-left:6px; vertical-align:middle;}
.tbl_right input {display:inline-block; width:220px; height:38px; border:1px solid #ddd; border-radius:4px; padding:0 12px; font-size:14px; margin-left:6px; vertical-align:middle;}
.tbl_right .btn {display:inline-block; height:38px; line-height:36px; border:0; border-radius:4px; padding:0 22px; font-size:14px; font-weight:600; margin-left:6px; vertical-align:middle; white-space:nowrap;}
.tbl_right #sch_submit {background:#fff; color:#0FADD1; border:1px solid #0FADD1; line-height:36px;}
.tbl_right #sch_submit:hover {background:#e9f8fb;}
.tbl_right .modal_serveradd {background:#0FADD1; color:#fff;}
.tbl_right .modal_serveradd:hover {background:#0c94b3;}

/* 페이징 */
.pg_wrap {clear:both;margin:0 0 20px;padding:20px 0 0;text-align:center}
.pg {display:inline-block}
.pg_page, .pg_current {color:#9f9f9f;display:inline-block;float:left;padding: 0 13px;line-height:30px;text-decoration: none;border: 1px solid #ddd;margin-left:-1px}
.pg a:focus, .pg a:hover {background-color:#f3f3f3}
.pg a:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px;}
.pg a:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px;}
.pg_page {background:#fff;text-decoration:none}
.pg_start {background:url(../img/page_1.png) 50% 50% no-repeat;width:32px;text-indent:-999px;overflow:hidden}
.pg_prev {background:url(../img/page_2.png) 50% 50% no-repeat;width:32px;text-indent:-999px;overflow:hidden}
.pg_next {background:url(../img/page_3.png) 50% 50% no-repeat;width:32px;text-indent:-999px;overflow:hidden}
.pg_end {background:url(../img/page_4.png) 50% 50% no-repeat;width:32px;text-indent:-999px;overflow:hidden}
.pg_current {display:inline-block;background:#3f51b5;color:#fff;font-weight:normal}

.view_open {cursor: pointer;}

/* 모달 페이징 */
#notice_tb {border-collapse:collapse; margin-bottom: 10px;}
#notice_tb th, td {padding: 3px 10px;}
.off-screen {display: none;}
#nav {width: 500px;	text-align: center;}
#nav a {
	display: inline-block;
	padding: 3px 5px;
	margin-right: 10px;
	font-family:Tahoma;
	background: #ccc;
	color: #000;
	text-decoration: none;
}
#nav a.active {background: #333; color: #fff;}


/*내용*/
#content_wrap {padding:50px 100px; height:100%; background:#f5f5f5;
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}
#content_wrap .table {background:#fff; border-radius:15px}
#content_wrap .table th {padding:15px 20px;}
.empty_table {padding:150px 0 !important; text-align:center;}