@media all and (max-width: 768px){
	/*釉뚮씪�슦�� 李� width媛� 768px 蹂대떎 �옉�븘吏��뒗 �닚媛꾨��꽣 �쟻�슜*/
	/*紐⑤컮�씪*/
			body{
		    min-height: 100vh;
		    width: 100%;
		    background: radial-gradient(#b5b5b5, #000000e0);
		   overflow:hidden;
			}
			.login_box {
		    width: auto;
		    min-height: 450px;
		    position: absolute;
		    top: 15%;
		    left: 10%;
		    bottom: 15%;
		    right: 10%;
		    /* transform: translate(-50%,-50%); */
		    background: #fff;
		    border-radius: 10px;
		    box-shadow: 1px 4px 22px -8px #0004;
		    /* display: flex; */
		    overflow: hidden;
			}
			.login_box .left{
			  width: auto;
			  height: 100%;
			  padding: 25px 25px;
			  float: none;
			  
			}
			.login_box .right{
			  display : none;
			}
			.login {
			        overflow: hidden;
			    width: 100%;
			  
			}
			.left .contact{
		display: flex;
	    align-items: center;
	    justify-content: center;
	    align-self: center;
	    height: 100%;
	
	    margin: auto;
	}	
	

}
@media all and (min-width:768px){
	body{
    min-height: 100vh;
    width: 100%;
    background: radial-gradient(#b5b5b5, #000000e0);
    margin : 0 auto;
   
	}
	.login_box {
	    width: 1050px;
	    height: 600px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    /* background: #fff; */
	    border-radius: 10px;
	    box-shadow: 1px 4px 22px -8px #0004;
	    display: flex;
	    overflow: hidden;
	}
	.login_box .left{
	  width: 41%;
	  height: 100%;
	  padding: 25px 25px;
	  
	}
	.login_box .right{
	  width: 59%;
	  height: 100%  
	}
	.login {
	   /*  height: 1000px; */
	    width: 100%;
	    /* background: radial-gradient(#b5b5b5, #000000);
	    position: relative; */
	}
	.left .contact{
	  display: flex;
	    align-items: center;
	    justify-content: center;
	    align-self: center;
	    height: 100%;
	    width: 73%;
	    margin: auto;
	}
	.main .top{
	  width: auto;
	  height: 100%;
	  padding : 20px;}
	.form_btn_group{
	float : right;
	}
}

img{
  width: 100%;
}

.left .top_link a {
    color: #452A5A;
    font-weight: 400;
}
.left .top_link{
  height: 20px
}

.left h3{
  text-align: center;
  margin-bottom: 40px;
}
.left input {
    border: none;
    width: 80%;
    margin: 15px 0px;
    border-bottom: 1px solid #4f30677d;
    padding: 7px 9px;
    width: 100%;
    overflow: hidden;
    background: transparent;
    font-weight: 600;
    font-size: 14px;
}
.left{
  background: linear-gradient(-45deg, #dcd7e0, #fff);
}
.submit {
    border: none;
    padding: 15px 70px;
    border-radius: 8px;
    display: block;
    margin: auto;
    margin-top: 80px;
    background: #583672;
    color: #fff;
    font-weight: bold;
    -webkit-box-shadow: 0px 9px 15px -11px rgba(88,54,114,1);
    -moz-box-shadow: 0px 9px 15px -11px rgba(88,54,114,1);
    box-shadow: 0px 9px 15px -11px rgba(88,54,114,1);
}

.center{
	text-align : center;
}

.right {
  background: linear-gradient(215deg, #343a4066 0%, rgb(0 0 0 / 30%) 100%), url(/img/tg_main02.jpg);

  background-position: 50% 50%;
  /*background-size : 90%;*/
  color: #fff;
  position: relative;
}

.right .right-text{
  height: 75%;
  position: relative;
  transform: translate(0%, 45%);
}
.right-text h2{
  display: block;
  width: 100%;
  text-align: center;
  font-size: 50px;
  font-weight: 500;
}
.right-text h5{
  display: block;
  width: 80%;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
  margin : 0 auto;
}
.right-img{
	display: block;
	width : 60%;
	margin : 25px auto;
	padding : 0 30px;
}
.right .right-inductor{
  position: absolute;
  width: 70px;
  height: 7px;
  background: #fff0;
  left: 50%;
  bottom: 70px;
  transform: translate(-50%, 0%);
}
.top_link img {
    width: 28px;
    padding-right: 7px;
    margin-top: -3px;
}
/*--------------------------------------硫붿씤 而⑦뀒�씠�꼫---------------------------------------------*/
@media all and (max-width: 768px){
	.main{
	    width: 90%;
	    height: 640px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    background: #fff;
	    border-radius: 10px;
	    box-shadow: 1px 4px 22px -8px #0004;
	    /*display: flex;*/
	    overflow: hidden;
	}
	.k-grid td, .k-grid th{
	padding : 3px 6px;
	}
	.main .top{
	  width: auto;
	  padding : 10px;  }
	.top .button{
	text-align : center;
	margin: 15px;
	}
	.top .calendar{
		margin: 0 auto;
		text-align :center;
		}	  
}
@media all and (min-width:768px){
	.main{
	    width: 90%;
	    /*height: 600px;*/
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    background: #fff;
	    border-radius: 10px;
	    box-shadow: 1px 4px 22px -8px #0004;
	    /*display: flex;*/
	    /*overflow: hidden;*/
	}
	.k-grid td, .k-grid th{
	padding : 18px 14px;
	}
	.k-grid-header .k-header {
    font-weight: bold;
    }
    .top .button{
	float : right;}
	.top .calendar{
		float : left;}
	
}    
.main .bottom{
	  width: auto;
	  height: 100%;
	  clear: both;  
}

.top h5{
  display: block;
  width: 80%;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
  margin : 10px auto;
}
.top .form{
	width : auto;
}
.top .search{
	display : none;
	float : left;
}

.top .statistics{
	display : none;
	float : left;
}

/* --------------------2023.02.20 異붽�------------------------------ */
.k-grid {border-radius: 0 0 10px 10px;}
.k-pager-wrap{border-radius: 0 0 10px 10px !important;padding:4px;}

/*--------------------------------------硫붿씤 議고쉶 �엯�젰 �뤌---------------------------------------------*/

:root {

    --input-color: #99A3BA;
    --input-border: #CDD9ED;
    --input-background: #fff;
    --input-placeholder: #CBD1DC;

    --input-border-focus: #275EFE;

    --group-color: var(--input-color);
    --group-border: var(--input-border);
    --group-background: #EEF4FF;

    --group-color-focus: #fff;
    --group-border-focus: var(--input-border-focus);
    --group-background-focus: #678EFE;

}

.form-field {
    display: block;
    width: 100%;
    padding: 8px 16px;
    line-height: 25px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    /* border-radius: 6px; */
    -webkit-appearance: none;
    color: var(--input-color);
    border: 1px solid var(--input-border);
    background: var(--input-background);
    transition: border .3s ease;}
    
    .form-field::placeholder {
        color: var(--input-placeholder);
    }
    .form-field:focus {
        outline: none;
        border-color: var(--input-border-focus);
    }


.form-group {
    position: relative;
    display: flex;
    width: 100%;}
    
.form-group .form-field {
        position: relative;
        z-index: 1;
        flex: 1 1 auto;
        width: 1%;
        margin-top: 0;
        margin-bottom: 0;
    }
.k-datepicker > input {
        position: relative;
        z-index: 1;
        flex: 1 1 auto;
        width: 1%;
        margin-top: 0;
        margin-bottom: 0;
        background : #fff;
    }    
.form-group > span {
        text-align: center;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 25px;
        color: #686868;
        background: var(--group-background);
        border: 1px solid var(--group-border);
        transition: background .3s ease, border .3s ease, color .3s ;
        font-weight : bold;
    }
    .form-group > span:first-child {
            border-radius: 6px 0 0 6px;
    }
    .form_btn_group > .form-group > span:first-child {
            border-radius: 6px 0 0 6px;
            cursor : pointer;
            background: #effafd;
    }
    .form-group > span:last-child {
            border-radius: 0 6px 6px 0;
            cursor : pointer;
    }
    .form_btn_group > .form-group > span:last-child {
            border-radius: 0 6px 6px 0;
            cursor : pointer;
            color : #666;
    }
/*--------------------------------------硫붿씤 �뙘�뾽 �엯�젰 �뤌---------------------------------------------*/
.bottom h6{
  display: block;
  width: 80%;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  margin : 10px auto;
}
.form-popup li > span{
	font-size : 15px;
	font-weight: bold;
}
.form-popup div > span{
	font-size : 15px;
	font-weight: bold;
	padding: 5px 0;
	display :block;
}

.form-popup_bottom {
	padding: 16px 16px;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    background-color: rgb(242, 242, 242);
    border-radius: 4px;
    
    border-top-color: transparent!important;
    border-color: rgba(0,0,0,.08);
    color: #424242;
    margin-top : 10px;
}
.form-popup div > input{
	  border-color: rgb(0 0 0 / 15%);
	  border-style: solid;
	  border-width: 1px;
	  padding : 10px;
	}
.form-popup div > textarea{
	  border-color: rgb(0 0 0 / 15%);
	  border-style: solid;
	  border-width: 1px;
	  padding : 10px;
	  resize: none;
	}
.form-popup_bottom > input{
	  border-color: rgb(0 0 0 / 15%);
	  border-style: solid;
	  border-width: 1px;
	  padding : 10px;
	}
.form-popup_bottom > textarea{
	  border-color: rgb(0 0 0 / 15%);
	  border-style: solid;
	  border-width: 1px;
	  padding : 10px;
	  resize: none;
	}
.form-bottom {
    margin : 20px 0; 
    width: 100%;}
    
.form-bottom .button > span {
        text-align: center;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 25px;
        color: #686868;
        background: var(--group-background);
        border: 1px solid var(--group-border);
        transition: background .3s ease, border .3s ease, color .3s ;
        display: inline;
        cursor : pointer;
    }

    .form-bottom .button > span:first-child {
            border-radius: 6px 0 0 6px;
           
            background: #effafd;
    }

    .form-bottom > .button > span:last-child {
            border-radius: 0 6px 6px 0;
            background: #f3f3f3;
            color : #666;
    }
/*--------------------------------------PDF 異쒕젰 �뤌---------------------------------------------*/
.pdf{
		width: 80%;
	    margin : 0 auto;
}
.pdf h2{
		width: 100%;
	    text-align : center;
}
.pdf .top{
	  width: auto;
	  height: 100%;
	  padding : 15px;
	  	  
}
.pdf .bottom{
	  width: auto;
	  height: 100%;
	  clear: both;  
}

.calendar .form-pdf > span{
	width : 100%;
}
.form-pdf .k-rounded-md {
	border-radius: 0;
}
.calendar .form-pdf .k-datepicker {
	width : 100%;
}
.form-pdf > span {
        text-align: center;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 25px;
        color: #686868;
        background: var(--group-background);
        border: 1px solid var(--group-border);
        transition: background .3s ease, border .3s ease, color .3s ;
    }
    .form-pdf > span:first-child {
            border-radius: 6px 0 0 6px;
    }
    .button > .form-pdf > span:first-child {
            border-radius: 6px 0 0 6px;
            cursor : pointer;
            background: #effafd;
    }
    .form-pdf > span:last-child {
            border-radius: 0 6px 6px 0;
            cursor : pointer;
    }
    .button > .form-pdf > span:last-child {
            border-radius: 0 6px 6px 0;
            cursor : pointer;
            color : #666;
    } 
.box_l {
	font-weight: bold;
    font-size : 14px;
    border: 1px solid var(--group-border);
    background: var(--group-background);
    border-radius: 6px 0 0 6px;
    padding: 8px;
}

.calendar  > span {
	display : inline;
}
@media all and (max-width: 768px){
	.calendar  > .k-input-md .k-input-inner {
	width : 100px;}
	.pdf .top{
	  padding : 10px;
	  	  
	}
	.pdf .top > .form {
	/* display : inline-block; */
	width : 100%;
	margin : 0 auto;
	}
}
	
@media all and (min-width: 768px){
.calendar  > .k-input-md .k-input-inner {
	width : 200px;}
	.pdf .top > .form {
	display : inline-block;
	width : 100%;
	margin : 0 auto;
	} 
}	
.calendar  > .k-input-inner span{
	background : #999;
	width : 200px;
	height : 20px;
	
}
.calendar  > .k-input-solid{
	padding: 8px;
    
	
}     
.box_r {
	font-weight: bold;
    font-size : 14px;
    border: 1px solid var(--group-border);
    background: var(--group-background);
    border-radius:  0 6px 6px 0;
    padding: 8px;
    cursor: pointer;
}
 
.form-field {
    display: block;
    width: 100%;
    padding: 8px 16px;
    line-height: 25px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    /* border-radius: 6px; */
    -webkit-appearance: none;
    color: var(--input-color);
    border: 1px solid var(--input-border);
    background: var(--input-background);
    transition: border .3s ease;}
    
    .form-field::placeholder {
        color: var(--input-placeholder);
    }
    .form-field:focus {
        outline: none;
        border-color: var(--input-border-focus);
    }
#pdfWrap {
	width : 100%;
	border-top: 2px solid;
    padding: 30px 0 0 0;
}
.page {
	width : 100%;
    margin: 0 auto;
   
}
 div.page table > thead > tr > td {
	font-weight : bold;
	
   
}
.td_n{
	padding :10px 10px 10px 10px;
	/* box-shadow: inset 15px 0px 0 0px #000; */
	text-align : left;
	
}
.td_bl_u {
	border-bottom : 2px solid #333;
}
.td_t {
	font-weight : bold;
	color : #333;
    background: #1111110a;
}
 div.page table > tbody > tr > th{
	color : #999;
	
}
 div.page table{
 width : 100%;
 text-align: center;
  border-collapse : collapse;
 }
 div.page td{
 padding : 10px;
  border: 1px solid #a1a1a13b;
 text-align: center;

 }
.page td:nth-child(1) {
	 width : 30%;
}
.page td:nth-child(2) {
	 text-align:left;
}
/* .page td:nth-child(n+2):nth-child(-n+3) {
				width : 40%;
			} */
			
/* ----------------------------------------tab menu add-on 2023.02.20----------------------------------------------------------------- */
.statistics > span{	
	position: absolute;
    margin-left: 10px;
	border-radius: 6px;
    cursor: pointer;
    background: #effafd;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    line-height: 25px;
    color: #686868;
    background: var(--group-background);
    border: 1px solid var(--group-border);
    transition: background .3s ease, border .3s ease, color .3s;
    font-weight: bold;
}

div.stat_page table{
	width : 100%;
	text-align: center;
	border-collapse : collapse;
	margin-bottom: 25px;
}
 div.stat_page td{
 padding : 10px;
  border: 1px solid #a1a1a13b;
 text-align: center;

 }
.stat_page td:nth-child(2) {
	background: #007bff21;
}
/*
.k-display-inline-flex{	
	position: fixed;
  	min-width: 200px !important;
    left: 35% !important;
    max-width: 300px !important;
    width: 40%;
    margin-top : -70px;
}
*/
.pwLabel {
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
  margin-top: 10px;
}
.inputDiv {
    width: 70%;
    display: flex;
    flex-direction: column;
    margin: auto;
 }
.pwBtn {
    width: 70%;
    height: 40px;
    margin: auto;
    display: block;
    color: #fff;
    font-size: 12px;
    background-color: #007bff;
    border-color: #007bff61;
    border-radius: 4px;
    cursor: pointer;
    outline : 0px !important;
  }