@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

/* 로그인 스타일 */
body{font-family:Comic Sans MS, ;color:#303030; }
input[type="text"], input[type="password"], .inputTxt{color: #ccc;font-size: 10pt;}
     
/* layout */ 
#wrap {width:50%; height:100%;margin:0 auto;text-align:center; margin-top: 7%;}      
#header_wrap {width:100%; height:100%; display:inline-block;}
.loginbox{float:left;}

/* 윗부분*/
#header {text-align:left; width: 100%;margin: 0 auto;}
#div1{width:100%; display:inline-block; border-bottom:1px solid #aaa;padding:0.7em 0;}    
#div1>p{width:100%; height:100%; display:inline-block; text-align:left; font-size:20pt; font-weight:600;}  
#div2{width:100%; display:inline-block; border-bottom:1px solid #aaa; text-align:center; padding:2.5em 0 0.5em 0;}  
#div2>b{ font-size:23pt; color:#000; font-weight:600; } 
#div2>b>span{color:#429be0; font-size:25pt;font-weight:600;}   
#div2>p{ font-size:13pt; color:#5e5e5e; font-weight:400; padding:1em 0 0.5em 0;}    


/* 중간 로그인부분*/ 
#container{padding:1em 0em;width: 100%;height: 100%; display: inline-block;border-bottom:1px solid #aaa;}  
/* 좌측 이미지*/
#div3{width:50%; display:inline-block; float: left;} 
#div3>img{display:inline-block;}

/* login 박스*/
.intro_loginbox3 {width:50%;text-align:center; display:inline-block; float: right;    margin-top: 6%;}
.intro_loginbox_text {float:left;display:inline-block; width:60%;}    
.intro_loginbox_btn {display:inline-block; width:30%; }  
.intro_loginbox_btn li {width:100%;}
.intro_loginbox3 li input{width:100%;height:50px !important;text-align:left; display:inline-block; margin-bottom:0.3em;}   
.intro_loginbox3 li a{width:100%;display:inline-block;text-decoration:none;font-size:14pt; text-align:center;color:#fff;background: #429be0; text-decoration:none;height:100%; line-height:6.1;}


/* 하단 직원등록*/
#footer{padding:2em 0em; width: 100%;height: auto; display: inline-block;border:1px solid #aaa; margin-top:20px; background:#f3f3f3}  
#div4{width:60%; display:inline-block; text-align:left; float:left;}    
#div4>p{ display:inline-block; margin-left:30px; color:#5e5e5e;}       
#div5{width:30%; display:inline-block; text-align:center; float:right;}    
#div5>a{ display:inline-block; margin-right:30px; color:#fff; padding:0.2em 2.5em;background:#aaaaaa; border:1px solid #6b6b6b;}          





 .btn{background:#fff;width:150px; height:25px;border: 1px solid #ddd;margin-left:10px;} 
 .btn>a{font-size:12px !important;display: block;line-height: 1.8;}    
 
@media all and (min-width:100px) and (max-width:319px){
#wrap {width: 90%;margin-top:1%; }   
#div1{padding: 1em 0;}
#div1>p{font-size: 15pt;} 
#div2{ padding: 1.5em 0 0.5em 0;}
#div2>p{font-size: 11pt;}
#div2>b {font-size: 12pt;} 
#div2>b>span {font-size: 12pt;} 
#container{padding: 0 0 0.5em 0;}   
#div3 {width: 100%;} 
#div3>img { width: 90%;}
.intro_loginbox3{width: 100%;margin-top:1%}
.intro_loginbox_text { width: 66%;}
.intro_loginbox3 li a{font-size: 12pt; line-height: 5.8;} 
.intro_loginbox3 li input{height: 40px !important;} 
#footer{padding: 1em 0em;}
#div4{display:none;}
#div5{width:100%;}
#div5>a{font-size: 12pt;}

}  
  
@media all and (min-width:320px) and (max-width:499px){

#wrap{width: 90%;margin-top:1%; }  
#div1{padding: 1.5em 0;}
#div1>p{font-size: 15pt;} 
#div2{ padding: 1.5em 0 0.5em 0;}
#div2>p{font-size: 11pt;}
#div2>b {font-size: 15pt;} 
#div2>b>span {font-size: 15pt;}
#container{padding: 0;}  
#div3 {width: 100%;} 
#div3>img { width: 90%;}
.intro_loginbox3{width: 100%;margin-top:1%}
.intro_loginbox_text { width: 66%;}
#footer{padding: 1em 0em;}
#div4{display:none;}
#div5{width:100%;}
#div5>a{font-size: 11pt;}

}

 
@media all and (min-width:500px) and (max-width:840px){

#wrap {width: 90%;margin-top:1%; }  
#div1>p{font-size: 17pt;} 
#div2{ padding: 1.5em 0 0.5em 0;}
#div2>p{font-size: 11pt;}
#div2>b {font-size: 19pt;}
#div2>b>span {font-size: 21pt;}
#container{padding: 0;} 
#div3>img { width: 90%;}
.intro_loginbox3{margin-top: 8%;}
#footer{padding: 1em 0em;}
#div4>p{font-size: 11pt;}
#div5>a{font-size: 11pt;}
	
}

 

@media all and (min-width:840px) and (max-width:1040px){  
#wrap {width: 80%;margin-top:1%; }  
#div1>p{font-size: 17pt;} 
#div2{ padding: 1.5em 0 0.5em 0;}
#div2>p{font-size: 11pt;}
#div2>b {font-size: 19pt;}
#div2>b>span {font-size: 21pt;}
#container{padding: 0;} 
#div3>img { width: 80%;}
.intro_loginbox3{margin-top: 8%;}
#footer{padding: 1em 0em;}
#div4>p{font-size: 11pt;}
#div5>a{font-size: 11pt;}
 
} 


@media all and (min-width:1040px) and (max-width:1300px){
	
#wrap {width: 80%;margin-top:3%; }  
#div2{ padding: 1.5em 0 0.5em 0;} 
#footer{padding: 1em 0em;}

}    
   

@media all and (min-width:1300px) and (max-width:1600px){
#wrap {width: 60%;margin-top: 5%; }  
}     
     
    

 
@media all and (min-width : 1600px)and (max-width:2100px) {


}
  
  
 @media all and (min-width : 2100px)and (max-width:2800px) {

}