@charset "utf-8";

@font-face {
  font-family: "stitle";
  src: url("../font/SamsungSharpSans-Bold.eot"); /* IE9 Compat Modes */
  src: local('※'),
    url("../font/SamsungSharpSans-Bold.woff2") format("woff2"), /* Modern Browsers */
    url("../font/SamsungSharpSans-Bold.woff") format("woff"), /* Modern Browsers */
    url("../font/SamsungSharpSans-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../font/SamsungSharpSans-Bold.svg") format("svg"); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 's4';
  src: url('../font/SamsungOne-400v10.eot'); /* IE9 Compat Modes */
  src: local('※'),
    url('../font/SamsungOne-400v10.woff2') format('woff2'), /* Modern Browsers */
    url('../font/SamsungOne-400v10.woff') format('woff'), /* Modern Browsers */
    url('../font/SamsungOne-400v10.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../font/SamsungOne-400v10.svg') format('svg'); /* Legacy iOS */  font-weight: normal;
  font-weight:400;
	font-style: normal;
}

@font-face {
  font-family: 's7';
  src: url('../font/SamsungOne-700v10.eot'); /* IE9 Compat Modes */
  src: local('※'),
    url('../font/SamsungOne-700v10.woff2') format('woff2'), /* Modern Browsers */
    url('../font/SamsungOne-700v10.woff') format('woff'), /* Modern Browsers */
    url('../font/SamsungOne-700v10.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../font/SamsungOne-700v10.svg') format('svg'); /* Legacy iOS */  font-weight: normal;
  font-weight: 700;
	font-style: normal;
}

@font-face {
  font-family: 's8';
  src: url('../font/SamsungOne-800v10.eot'); /* IE9 Compat Modes */
  src: local('※'),
    url('../font/SamsungOne-800v10.woff2') format('woff2'), /* Modern Browsers */
    url('../font/SamsungOne-800v10.woff') format('woff'), /* Modern Browsers */
    url('../font/SamsungOne-800v10.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../font/SamsungOne-800v10.svg') format('svg'); /* Legacy iOS */  font-weight: normal;
  font-weight: 800;
	font-style: normal;
}

/*------------------------------------*\
	common CSS
\*------------------------------------*/

html { width: 100%; height: 100%; font-size: 13px; color: #56616e;}
body, input, textarea, select { font-family: 's4', Tahoma, Geneva, Arial, '나눔고딕', sans-serif;}
a {	color: #0084ff; text-decoration: none;	-webkit-transition: 0.2s opacity;	transition: 0.2s opacity;}
h1, h2, h3, h4, h5, h6, button { font-family: 's7', 'Trebuchet MS', Arial, '나눔고딕', sans-serif;}
a:hover, a:focus { text-decoration: none;	outline: none; opacity: 0.9; color: #074ca1;}
button { border: none; background: none; font-size: 1rem;  cursor: pointer;}
OBJECT { position: absolute; }

::-moz-selection { background-color: #074ca1; color: #FFF;}
::selection { background-color: #074ca1; color: #FFF;}

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

.formGroup { border: none; padding-bottom: .35rem; text-align: left; box-sizing: border-box;}
.formGroup .formRow { margin-bottom: .5rem; padding: .3rem; display: table; width: 100%; table-layout: fixed; box-sizing: border-box;}
.formGroup .formRow:last-child { margin-bottom: 0;}
.formGroup .formRow > label{ display: table-cell; padding-left: .2rem; padding-right: 1rem; white-space: nowrap; text-align: right; vertical-align: middle; min-width: 6rem; font-weight: bold; color: #6d7988;}
.formGroup .formRow > label:first-child { padding-left: 0;}
.formGroup .formRow > .containerItem { display: table-cell; padding-right: 1rem; vertical-align: middle; line-height: 2.5em;}
.formGroup .formRow > .containerItem:last-child { padding-right: 0;}
.formGroup .formRow > .containerItem.rowItem { white-space: nowrap;;}
.formGroup .formRow > .containerItem.rowItem input[type="text"] { width: auto;}
.formGroup .formRow > .containerItem.rowItem input[type="text"] + input { margin-left: 1rem;}
.formGroup .formRow input[type="text"],
.formGroup .formRow input[type="name"],
.formGroup .formRow input[type="password"],
.formGroup .formRow input[type="email"],
.formGroup .formRow select { width: 100%; padding: .4rem .5rem; border: 1px solid #d4d4d4; box-sizing: border-box;}

body { width: 100%; height: 100%;}
.wrap { display: flex; flex-direction: column; margin: 0; padding: 0; height: 100%; overflow: hidden;}

/*------------------------------------*\
	Login CSS
\*------------------------------------*/

.login { position: relative; width: 100%; height: 100%; background: url(../images/login/login_bg.png) no-repeat center / auto 360px; background-attachment: fixed;}

.login .loginContainer  { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 10%; padding-left: 13%; padding-top: 1rem; padding-bottom: 3rem;background: url(../images/login/login_gear.png) no-repeat left bottom / 45% auto; image-rendering: -webkit-optimize-contrast;}
.login .formGroup  { position: relative; padding: 0; width: 34rem; box-shadow: 0 0 2rem #999; background: #ececec;}
.login .formGroup .logo { border: 3px solid transparent; position: absolute; color: #222; top: -4.5rem; left: -100%; white-space: nowrap; margin: 0;}
.login .formGroup .logo img { display: inline-block; margin-bottom: -0.3rem; vertical-align: baseline; image-rendering: -webkit-optimize-contrast;}
.login .formGroup .logo sub { display: inline-block; margin-top: -1rem; font-size: 1rem; font-family: 's4', sans-serif; font-weight: 400; color: #999; letter-spacing: -0.05rem;}
.login .formGroup legend { width: 100%; margin-bottom: 1rem; padding: .5rem 2rem; background-color: #222; color: #fff; border: 1rem solid #222; font-family: 's7',sans-serif; font-size: 1.2rem;}
.login .formGroup legend b { display: block; font-size: 2.2rem;}
.login .formGroup label { width: 0; padding: 0; font-size: 1.1rem;}
.login .formGroup .formRow { margin: 1rem 0; padding: 0 3rem;}
.login .formGroup .formRow:first-of-type { margin-top: 2rem; margin-bottom: 1.5rem;}
.login .formGroup input[type] { padding: .8rem 1.5rem; border: 1px solid #32383e; font-size: 1.2rem;}
.login .formGroup .link { width: calc(100% - 6rem); margin: 1rem auto; border-top: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; display: flex; justify-content: space-between;}
.login .formGroup .link a { display: block; padding: 1rem; color: #256487; font-size: 1.1rem; text-align: center;}
.login .formGroup .link li { background: url(../images/login/bullet.png) no-repeat left; flex-grow: 1;}
.login .formGroup .link li:first-child { background: none;}

.login .containerChk {
	display: inline-block;
	position: relative;
	padding-left: 30px !important;
	white-space: nowrap;
	height: 25px;
	line-height: 35px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.login .containerChk input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.login .checkmark { position: absolute; top: 50%; margin-top: -9px; left: 0; height: 22px; width: 22px; border:1px solid #7b8893; border-radius: 4px; background-color: #eee;}
.login .containerChk:hover input ~ .checkmark { background-color: #ccc; border-color: #7b8893;}
.login .containerChk input:checked ~ .checkmark { background-color: #074ca1; border-color: #074ca1;}
.login .checkmark:after { content: ""; position: absolute; display: none;}
.login .containerChk input:checked ~ .checkmark:after { display: block;}
.login .containerChk .checkmark:after {
	left: 6px;
	top: 1px;
	width: 7px;
	height: 12px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.login .langSel { padding-left: 20%;}
.login select { padding: .5rem 3rem .5rem .5rem; font-size: 1.1rem; background: url(../images/login/arrow_sel.png) no-repeat right .5rem center; -webkit-appearance: none; appearance: none; cursor: pointer; border: none !important;}

.login .loginBtn { display: block; width: 40%; margin: 1.5rem auto; padding: 1rem 0; background-color: #222; color: #fff; text-transform: none; font-size: 20px; border-radius: 2rem;}
.login .loginBtn:hover {transform:scale(1.02); transition: all ease 0.3s ; font-size: 20px; } 

.login fieldset p:last-child { padding: 1em 3rem;}