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



/* 로그인 스타일 */
body{font-family:Comic Sans MS, ;color:#303030;  background:url(/images/common/login_bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
  
.login_top{width:100%;  
position:relative;   
margin:0 auto; 
left:0; right:0; 
height:70px; 
background: linear-gradient(to bottom, #fff, #ededed);
text-align:center;
} 


 .login_top2{width:100%;  
position:relative;   
margin:0 auto; 
left:0; right:0; 
height:35px; 
background: linear-gradient(to bottom, #0b308f, #305ba9 );
text-align:center;  
}    
     
  
      
/* 기본 스타일 */
#login_top{
  width:80%;
  height:120px;
  margin:0 auto; 
  background:url(/images/common/login_top.jpg) no-repeat center; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius:20px;
  margin-top:4%;
  margin-bottom:1.5em;
  position: relative;

  }
  
  .login_top_in{position: absolute;  width:98%; height:100px; border:1px solid #fff;  border-radius:15px; margin-left:1%; margin-top:10px;}  
  .login_top_in>h3{font-size:23px; margin-left:1%; margin-top:2.2%; font-weight:300;display:inline-block; color:#fff; }     
     
     
 #login_bottom{
  width:80%;
  height:100px;
  margin:0 auto; 
  border-radius:20px;
  margin-top:1.5%;
  background:#6984a2;
  text-align:center; 

  }   
#login_bottom>ul{ text-align:center; display: table; margin: auto;padding-top:37px;}  
#login_bottom>ul>li{float:left; display:inline-block; }     
#login_bottom>ul>li>a{ color:#fff; font-size:15px;}
 
#wrap {width:70%;height:100%;margin:0 auto;text-align:center; margin-top: 11%;}   
#header_wrap {width:40%;padding:2em 0 2em 0;height:100%; display:inline-block; background-color:#fff; border-radius:8px;float: left;}
.loginbox{float:left;}
 

/* layout */ 
 
.login_left{width:50%; text-align:center;float:left;}   
.login_left>img{width:430px; padding-left: 1.5em; padding-top: 2em;}  
 
#header {
    text-align:left;
    width: 70%;
    margin: 0 auto;
}
.top{width:100%}
.logo{height:60px;float:left;}
.logo li{padding-left:20px;float:left;}
.logo li a{text-decoration:none;display:block;text-align:center;}
.intra_logo{padding-top: 16px;padding-left: 0;}
.logo img{padding-top: 6px;}


#header>span>a>img{float:left;}
#header>span>a{width:100%; height:100%; display:inline-block;}

/* login */

.intro_loginbox3 {width:70%;padding:1em 0em;text-align:center; display:inline-block;}
.intro_loginbox_text {float:left;display:inline-block; width:100%;} 
.intro_loginbox_btn {display:inline-block; width:100%;  margin-top: 0.3em;}
.intro_loginbox_btn li {width:100%;margin-bottom: 0.5em;}
.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:1em;text-align:center;color:#fff;background: #4b89dc;text-decoration:none;height:100%; line-height:3;}
.intro_loginbox4 {margin:15px 0 15px 0;text-align:left;}
 .btn_login{width:120px;}

#footer{width:80%;margin: 0 auto; height:105px; background:#eeeeee;border-radius:10px; text-align:center; }
#footer>ul{padding-top:40px;text-align:center; display: table; margin:0 auto;}     
#footer>ul>li{float:left; display: inline-block; }   
#footer>ul>li>a{font-size:14px;word-break: keep-all; }  




.footer_top{display:inline-block; width:100%; margin:0 auto; text-align:left;} 
.footer_top>li{display:inline-block;width:49%;float:left;background-color: #2b2b2b; border-radius:8px;} 
.footer_top>li>a{display:block;font-size:1em;text-align:center;color:#fff;text-decoration:none;padding:0.4em 0em;}  
.footer_bottom{display:inline-block;padding:1em 0em;}  
.footer_bottom>li>a:before {line-height:1; padding-right:0.5em; content:"→"; color:#2b2b2b;float:left;} 
.footer_bottom>li>a{display:inline-block;text-decoration:none;font-size:1em;} 


 .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 (max-width:320px){

		#wrap {
    width: 100%;
    margin-top: 5%; 
}
.login_left>img {
    width: 250px;
    margin-left: -2em; 
    padding-top: 1em;
}	     
	.login_left {
    width: 100%;
    text-align: center;
}
#header_wrap {
    width: 90%;
    float: inherit
} 
	.intro_loginbox3 li input {
    width: 100%;
    height: 40px !important;
    text-align: left;
    display: inline-block;
    margin-bottom: 0.3em;
}
	 .intro_loginbox3 li a {
    line-height: 2.5;
}
	
}





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


	#wrap {
    width: 100%;
    margin-top: 5%; 
}
.login_left>img {
    width: 300px;
    margin-left: -2em; 
    padding-top: 1em;
}	     
	.login_left {
    width: 100%;
    text-align: center;
}
#header_wrap {
    width: 70%;
    float: inherit
} 
.intro_loginbox3 li input {
    width: 100%;
    height: 40px !important;
    text-align: left;
    display: inline-block;
    margin-bottom: 0.3em;
}
	 .intro_loginbox3 li a {
    line-height: 2.5;
}
	
}



@media all and (min-width:840px) and (max-width:1040px){  
	#wrap {
    width: 70%;
    margin-top: 5%; 
}
	.login_left {
    width: 100%;
    text-align: center;
}
#header_wrap {
    width: 80%;
    float: inherit
}
.login_left>img {
    width: 350px;
    margin-left: -2em; 
    padding-top: 2em;
}	        
}


@media all and (min-width:1040px) and (max-width:1300px){
	
#wrap { width:100%;}	

	
}  
  

@media all and (min-width:1300px) and (max-width:1600px){
#header_wrap { width: 50%;}
.login_left {
    width: 50%;
    text-align: left;
}
.login_left>img {
    width: 450px;
    padding-left: 0em;
}
}     
     
    

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


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

}