/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
	blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
	em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
	b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
	details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
	output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup,
	menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* start editing from here */
a {
	text-decoration: none;
}

.txt-rt {
	text-align: right;
} /* text align right */
.txt-lt {
	text-align: left;
} /* text align left */
.txt-center {
	text-align: center;
} /* text align center */
.float-rt {
	float: right;
} /* float right */
.float-lt {
	float: left;
} /* float left */
.clear {
	clear: both;
} /* clear float */
.pos-relative {
	position: relative;
} /* Position Relative */
.pos-absolute {
	position: absolute;
} /* Position Absolute */
.vertical-base {
	vertical-align: baseline;
} /* vertical align baseline */
.vertical-top {
	vertical-align: top;
} /* vertical align top */
nav.vertical ul li {
	display: block;
} /* vertical menu */
nav.horizontal ul li {
	display: inline-block;
} /* horizontal menu */
img {
	max-width: 100%;
}
/*end reset*/
/****-----start-body----****/
body {
	font-family: 'Open Sans', sans-serif;	
	margin: 0;
	padding: 0;
}

/*�솕�뜝�룞�삕�뜝�룞�삕泥� �뜝�룞�삕�뜝占�*/
.container{
	background: url(images/login/img_Login_Gb.png) no-repeat center center fixed;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	width: 100%;	
	height: 100%;
}

.container::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: inherit;
}


/*---login-form1--------*/
.login{
	width: 500px;
	height: 375px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin:-188px 0 0 -250px;
}

.idRequest{
	width: 500px;
	height: 375px;
	position: absolute;
	left: 50%;
	top: 20%;
	margin:-188px 0 0 -250px;
}

/*USERLOGIN TricoERP */
.logoText{
	width: 500px;
	height: 30px;

}

/*USERLOGIN*/
.userlogin{
	width: 100px;
	height: 100%;
	font-weight: 1000;
	font-size:25px;
	color: #fff;
}
/*TricoERP */
.tricoerp{
	position: absolute;
	left: 150px;
	width: 100px;
	height: 100%;
	font-weight: 1000;
	font-size:20px;
	color: #25EEF3;
	margin:-25px 0 0 0;	
}
/*�뜝�떥源띿삕�뜝�떥�슱�삕�뜝�룞�삕 �뜝�룞�삕�뜝�룞�삕�뜝�룞�삕�뜝占� */
.loginBox {
	background: #fff;
	width: 500px;
	height: 450px;
	top: 30px;
	border-radius: 10px;
	margin: 10px 0 0 0;
	padding: 20px 25px 20px 25px;
}
.loginBoxT {
	background: #fff;
	width: 500px;
	height: 280px;
	top: 30px;
	border-radius: 10px;
	margin: 10px 0 0 0;
	padding: 20px 25px 20px 25px;
}
.idRequestBox {
	background: #fff;
	width: 500px;
	height: 870px;
	top: 30px;
	border-radius: 10px;
	margin: 10px 0 0 0;
	padding: 20px 25px 20px 25px;
}
/*CI */
.componyCi {
	background: url(images/login/ci_image.png) no-repeat;
	width: 500px;
	height: 70px; 
}

/*�뜝�떥源띿삕�뜝�룞�삕 �뜝�룞�삕�뜝�룞�삕�뜝�룞�삕�듃 �뜝�룞�삕�뜝�룞�삕 */
.loginComp {
	width: 500px;
	height: 130px;
	align: center;
}
.requestComp {
	width: 500px;
	height: 550px;
	align: center;
}
.loginCompT {
	width: 500px;
	height: 50px;
	align: center;
}

/*ID PASSWORD */
.loginText{
	width:150px; 
	height:45px;
	text-align:right;
	vertical-align:middle;	
	font-weight: 1000;
	font-size:20px;
	color: #002187;
	margin: 20px 0 10px 0;
}
.loginTextT{
	width:100px; 
	height:45px;
	text-align:right;
	vertical-align:middle;	
	font-weight: 1000;
	font-size:20px;
	color: #002187;
	margin: 40px 0 10px 0;
}
/*ID PASSWORD �뜝�룞�삕�뜝�룞�삕�뜝�룞�삕�듃*/
.loginInput{	 
	text-align:left;
	width: 330px;	
	height: 50px;
	padding: 15px 0 10px 15px;
	position: absolute;
	margin: -75px 0 10px 0;
	left: 200px;
}
.loginInputHalf{	 
		text-align:left;
		width: 150px;	
		height: 50px;
		padding: 15px 0 10px 15px;
		position: absolute;
		margin: -75px 0 10px 0;
		left: 200px;
	}
.loginInputT{	 
	text-align:left;
	width: 330px;	
	height: 50px;
	padding: 15px 0 10px 15px;
	position: absolute;
	margin: -75px 0 10px 0;
	left: 150px;
}

/*copyright */
.copyright {
	width: 100%;
	height: 100px;
	font-weight: 100;
	font-size:15px;
	color: #fff;
	text-align: center;	
	margin: 10px 25px 0 25px;
}


input[type="text"], input[type="password"] {
	width: 90%;	
	height: 40px;
	color: #858282;
	font-size: 15px;	
	background: #F6F6F6;
	font-weight: 500;
	border: none;
}

input[type="text"]:focus{
	background: white;
	outline: 1px solid #2F5597;
}
input[type="password"]:focus{
	background: white;
	outline: 1px solid #2F5597;
}

.submit input[type="submit"] {
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	outline: none;
	padding: 10px 10px;
	width: 95%;
	border: none;
	background: #2F5597;
	margin: 30px 0 0 15px;
}

input[type="submit"]:hover {
	background: #3162C7;
}


.submit input[type="button"] {
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	outline: none;
	padding: 10px 10px;
	width: 95%;
	border: none;
	background: #2F5597;
	margin: 30px 0 0 15px;
}

input[type="button"]:hover {
	background: #3162C7;
}

/* remember */
.remember-me-label {
	margin: 3px 0 0 285px;
	float: left;
	position: relative;
	color: #858282;
	font-size: 15px;
	outline: none;
	font-weight: 500;
}

.remember-me {
	width: 80px;
	height: 26px;
	background: #2F5597;
	float: left;
	position: relative;
	border-radius: 50px;
	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px
		rgba(255, 255, 255, 0.2);
	margin: 0 0 0 10px;
}

.remember-me:after {
	content: 'OFF';
	color: #000;
	position: absolute;
	right: 10px;
	z-index: 0;
	font: 12px/26px Arial, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}

.remember-me:before {
	content: 'ON';
	color: #27ae60;
	position: absolute;
	left: 10px;
	z-index: 0;
	font: 12px/26px Arial, sans-serif;
	font-weight: bold;
}

.remember-me label {
	display: block;
	width: 34px;
	height: 20px;
	cursor: pointer;
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 1;
	background: #fcfff4;
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	border-radius: 50px;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.remember-me input[type=checkbox] {
	visibility: hidden;
}

.remember-me input[type=checkbox]:checked+label {
	left: 43px;
}


/*-----start-responsive-design------*/
/*
@media ( max-width :1280px) {
	.login {
		margin: 2% auto 6%;
		width: 35%;
	}
	.login-company {
		margin: 0 12% 0 0;
	}
}
*/
@media ( max-width :1024px) {
	.login {
		width: 500px;
		height: 375px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin:-188px 0 0 -300px;
	}	
}

@media ( max-width :768px) {
	.login {
		width: 300px;
		height: 375px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin:-188px 0 0 -200px;
	}	
	/*�뜝�떥源띿삕�뜝�떥�슱�삕�뜝�룞�삕 �뜝�룞�삕�뜝�룞�삕�뜝�룞�삕�뜝占� */
	.loginBox {
		background: #fff;
		width: 300px;
		height: 350px;
		top: 30px;
		border-radius: 10px;
		margin: 10px 0 0 0;
		padding: 20px 25px 20px 25px;
	}
	.loginBoxT {
		background: #fff;
		width: 300px;
		height: 280px;
		top: 30px;
		border-radius: 10px;
		margin: 10px 0 0 0;
		padding: 20px 25px 20px 25px;
	}
	
	/*�뜝�떥源띿삕�뜝�룞�삕 �뜝�룞�삕�뜝�룞�삕�뜝�룞�삕�듃 �뜝�룞�삕�뜝�룞�삕 */
	.loginComp {
		width: 300px;
		height: 130px;
		align: center;
	}
	.loginCompT {
		width: 300px;
		height: 50px;
		align: center;
	}
	
	/*ID PASSWORD */
	.loginText{
		width:100px; 
		height:45px;
		text-align:right;
		vertical-align:middle;	
		font-weight: 1000;
		font-size:15px;
		color: #002187;
		margin: 20px 0 10px 0;
	}
	.loginTextT{
		width:80px; 
		height:45px;
		text-align:right;
		vertical-align:middle;	
		font-weight: 1000;
		font-size:15px;
		color: #002187;
		margin: 30px 0 10px 0;
	}
	/*ID PASSWORD �뜝�룞�삕�뜝�룞�삕�뜝�룞�삕�듃*/
	.loginInput{	 
		text-align:left;
		width: 190px;	
		height: 50px;
		padding: 15px 0 10px 15px;
		position: absolute;
		margin: -75px 0 10px 0;
		left: 130px;
	}	
	.loginInputT{	 
		text-align:left;
		width: 190px;	
		height: 50px;
		padding: 15px 0 10px 15px;
		position: absolute;
		margin: -75px 0 10px 0;
		left: 110px;
	}
	/* remember */
	.remember-me-label {
		margin: 3px 0 0 115px;
		float: left;
		position: relative;
		color: #858282;
		font-size: 15px;
		outline: none;
		font-weight: 500;
	}
	
	.submit input[type="submit"] {
		font-size: 30px;
		font-weight: 500;
		color: #fff;
		cursor: pointer;
		outline: none;
		padding: 10px 10px;
		width: 87%;
		border: none;
		background: #2F5597;
		margin: 30px 0 0 15px;
	}
}


@media ( max-width :640px) {
	.login {
		width: 300px;
		height: 375px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin:-188px 0 0 -190px;
	}	
	.loginInputT{	 
		text-align:center;
		width: 190px;	
		height: 50px;
		padding: 15px 0 10px 15px;
		position: absolute;
		margin: -75px 0 10px 0;
		left: 110px;
	}
	.loginTextT{
		width:100px; 
		height:45px;
		text-align:right;
		vertical-align:middle;	
		font-weight: 1000;
		font-size:20px;
		color: #002187;
		margin: 30px 0 10px 0;
	}
    .submit input[type="submit"] {
		font-size: 30px;
		font-weight: 500;
		color: #fff;
		cursor: pointer;
		outline: none;
		padding: 10px 10px;
		width: 87%;
		border: none;
		background: #2F5597;
		margin: 30px 0 0 15px;
	}
}


@media ( max-width :480px) {
	.login {
		width: 300px;
		height: 375px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin:-188px 0 0 -190px;
	}	
}