/** fonts used for the icons **/ 
@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('/font/fontomas-webfont.eot');
    src: url('/font/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/fontomas-webfont.woff') format('woff'),
         url('/font/fontomas-webfont.ttf') format('truetype'),
         url('/font/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, form, input, p, th, td
{
    margin:0;
    padding:0;
}
html, body
{
    margin:0;
    padding:0;
    height:100%;
}
table
{
    border-collapse:collapse;
    border-spacing:0;
}
body
{
    font-family: "Nanum Gothic";
    font-size:15px;
    color:#1d3c41;
    overflow-y:scroll;
}
A {color: #444444}
A:link {font-size: 12px; color: #5B5B5B; text-decoration:none}
A:visited {font-size: 12px; color: #5B5B5B; text-decoration:none}
A:active {font-size: 12px; color: #5B5B5B; text-decoration:underline}
A:hover {font-size: 12px; color: #0000ff; text-decoration:underline}
.container
{
    width:100%;
    height:100%;
    position:relative;
}
.codrops-top
{
    text-align:left;
    position:relative;
    line-height: 30px;
}

.codrops-main
{
    width:100%;
}
.topbackcss{
    height:67px;
    width:100%;
     background-image:url("http://asp.hosanna21.com/sns/Image/hosanna/login/top-bg.png");
}  
#txttop{
    font-family: sans-serif;
   margin-top:40px;
   color:#fff;
   font-size:24px;
}

#wrapper
{
    margin-top:0px;
    padding-top:40px;
    position:relative;
    background: rgb(119,187,222);
}

.animate
{
    
    text-align:left;
} 
   #wrapper h1
    {
        font-size:48px;
        color:rgb(6,106,117);
        padding: 10px 0 10px 0px;
        font-weight:bold;
        text-align:center;
    }
    #wrapper a{
	color: rgb(95, 155, 198);
	text-decoration: underline;
    }
    #wrapper p{
        margin-left:15px;
        margin-top:10px;
    }
    #wrapper label{
	color: rgb(64, 92, 96);
	position: relative;
    display:block;
    }
    #wrapper .itext
    {
    height:30px;
    font-size:18px;
	padding: 3px 5px 3px 32px;	
	border: 1px solid rgb(178, 178, 178);
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
     }
 /*styling both submit buttons */

#wrapper p.button input{
	width: 100px;
    height:73px;
    cursor: pointer;	
	background: rgb(61, 157, 179);
	font-family: 'Arial Narrow',Arial,sans-serif;
	color: #fff;
	font-size: 24px;
    font-weight:600;	
	border: 1px solid rgb(28, 108, 122);	
	margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	   -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	        box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}
#wrapper p.button input:hover{
	background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
	background: rgb(40, 137, 154);
	position: relative;
	top: 1px;
	border: 1px solid rgb(12, 76, 87);	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	   -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	        box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
#wrapper p.keeplogin{
    margin-left:0px;
    text-align:left;
}

    #wrapper p.keeplogin input
    {
        width:20px;
        font-size:12px;
        border:none;
        float:left;
    }
    #wrapper p.keeplogin label
    {
        margin-top:20px;
        font-size:12px;
    }
p.btn
{
    display: inline-block;
    width:100%;
    height:35px;
    margin-top:3px;
    padding-top:17px;
    //padding: 17px 30px 9px 30px;
    background: rgb(173, 230, 249);

}
#wrapper p.change_link
{
    color:rgb(127,124,124);
    padding: 17px 30px 45px 30px;
    font-size:12px;
    width:300px;
    text-align:left;
    border-top: 1px solid rgb(219,229,232);
}
#wrapper p.change_link a {
	display: inline-block;
    font-size:14px;
	font-weight: bold;
	background: rgb(247, 248, 241);
	padding: 2px 6px;
	color: rgb(29, 162, 193);
	margin-left: 10px;
	text-decoration: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid rgb(203, 213, 214);
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s  linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s  linear;
	transition: all 0.4s  linear;
}
#wrapper p.change_link a:hover {
	color: rgb(57, 191, 215);
	background: rgb(247, 247, 247);
	border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
	position: relative;
	top: 1px;
}
#wrapper p.change_link .findpw{
	float:left;
}
#wrapper p.change_link .to_register{
	float:right;
}
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  { 
	color: rgb(190, 188, 188); 
	font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ 
	color: rgb(190, 188, 188);
	font-style: italic;
} 
input {
  outline: none;
}
/** the magic icon trick ! **/
[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
	width: 30px;
}
.njo
{
    font-size:9pt;
    font-family: "Nanum Gothic";
    color:rgb(74, 179, 198);
}
#wrapper p.button2 input{
	width: 100px;
    height:40px;
    cursor: pointer;	
	background: rgb(61, 157, 179);
	font-family: 'Arial Narrow',Arial,sans-serif;
	color: #fff;
	font-size: 15px;
    font-weight:600;	
	border: 1px solid rgb(28, 108, 122);	
	margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	   -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	        box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}