@charset "utf-8";

/* default settings */
* { 
margin: 0; 
padding: 0; 
font-family: inherit; 
font-size: inherit; 
line-height: inherit; 
color: inherit; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}

html, body { 
width: 100%; 
height: 100%; 
}

html { 
-ms-text-size-adjust:100%; 
-webkit-text-size-adjust:100%; 
}

body { 
background: #f7f7f7; 
font-family: Arial, Roboto, "Helvetica Neue", "Apple Gothic", sans-serif;  
font-size: 16px; 
line-height: 1.2; 
}

button, input { 
font-family: inherit; 
vertical-align: baseline; 
-moz-appearance: none; 
-webkit-appearance: none; 
appearance: none; 
-webkit-border-radius: 0; 
}

header, main { display: block; }

a { color: #1428a0; text-decoration: none; }

button { 
background: transparent; 
border: 0; 
text-transform: uppercase; 
cursor: pointer; 
}

input[type=button], input[type=reset], input[type=submit] { cursor: pointer; }

input[type=text]::-ms-clear {display:none;} /* 시스템 X 버튼 삭제 */

input:-webkit-autofill { 
  -webkit-box-shadow: 0 0 0 1000px #fff inset; 
  -moz-box-shadow: 0 0 0 1000px #fff inset; 
  box-shadow: 0 0 0 1000px #fff inset; } /* 크롬 자동 채우기 기능 시 색상 변경 방지 */

@media (max-width: 900px) { 
	body { font-size:15px; }
	input:-webkit-autofill { 
                   -webkit-box-shadow: 0 0 0 1000px #f7f7f7 inset; 
                   -moz-box-shadow: 0 0 0 1000px #f7f7f7 inset; 
                   box-shadow: 0 0 0 1000px #f7f7f7 inset; }
}

/* common Layout */
html, body, wrapper, header, main { min-width: 240px; }
header, main { width: 100%;}
h1 { color: #000; font-size: 20px; font-weight: bold; }

@media (max-width: 900px) { 
	header { 
                     width:100%; 
                     height: 50px; 
                     line-height: 50px; 
                     border-bottom: 1px solid #e1e1e1; 
                     background: #f7f7f7; text-align: center; 
            }
	h1 { font-size: 19px; text-align: center; }
}

/* button 확인됨*/

.ssg-button { 
  min-height: 3.125em;  
  min-width: 180px; 
  padding: .5em 1.5em; 
  background: transparent; 
  border: 1px solid #e1e1e1; 
  border-radius: .5em; 
  color: #000; 
  font-weight: bold; 
  font-size: 1em; 
  line-height: 1.2; 
  letter-spacing: .01em; 
  word-break:break-word; 
  text-transform: uppercase; 
  position: relative; 
  display: inline-block; 
  cursor: pointer;  
  vertical-align: middle; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  align-items: center; 
  text-align: center; 
  box-sizing: border-box; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  font-style: inherit; 
  font-variant: inherit; 
  font-family: inherit; 
  text-decoration: none; 
}

/* input, select, textarea 확인됨*/
.input-container { display: block; position: relative; z-index: 1; margin: 2.215em 0; }

.input-container > label { 
  position: absolute; 
  top: -3px; 
  left: auto; 
  max-width: 100%; 
  height: 2.7em; 
  line-height: 2.7em; 
  color: #767676; 
  font-size: 1.142em; 
  cursor: text; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  -webkit-transition: all .2s; 
  transition: all .2s;
  pointer-events: none; 
  -webkit-font-smoothing: antialiased; 
  -webkit-transform: translate3d(0, 3px, 0) scale(1); 	
  transform: translate3d(0, 3px, 0) scale(1); 
  -webkit-transform-origin: left top; 
  transform-origin: left top; 
}

.input-container.focus > label { color: #1428a0; font-size: 0.875em; }
.input-container.focus > label, .input-container.active > label { top: -1.9em; left: auto; font-size: 0.875em; }
.input-container > input, .input-container > select { height: 2.7em; line-height: 1.2; font-size: 1.142em; }
.input-container > select: : -ms-expand { display: none; }
.input-container > input { padding: 0; }

.input-container > input { 
  display: block; 
  width: 100%; 
  color: #000; 
  border: none; 
  border-bottom: 1px solid #DDD; 
  background-color: transparent; 
  box-sizing: border-box; 
}
.input-container > select {color:#fff;}
.input-container .selectfield label{ width:90%; height:2.6em; background:#fff; color:#c8c8c8; opacity:1; }
@media (max-width: 900px) { 
	.input-container > select {color:#f7f7f7;}
	.input-container.selectfield label{ background:#f7f7f7; }
}

.input-container.active > select {color:#000;}
.input-container > input:focus { outline: 0; border-color: #1428a0; border-width: 2px;  color: #1428a0; }



/* radio 확인됨 */
.ssg-radio{ width: 100%; box-sizing: border-box; clear: both; margin-bottom:.625em; padding-left:1.875em; background:url(/accounts/v1/resources/images/v2/ico_check.png) no-repeat right bottom; background-size:0;}

.ssg-radio input::-ms-check { display: none; } 

.ssg-radio label { 
  cursor: pointer; 
  -webkit-font-smoothing:antialiased; 
  margin-left:-1.6em; 
  line-height:1.3; 
  box-sizing: border-box; 
  vertical-align:-webkit-baseline-middle;  
}

.ssg-radio input[type=checkbox]:not(old) { 
  margin:0;  
  padding:0; 
  margin-left:-28px; 
  background-color:transparent; 
  border:none; 
  border:0; 
  border-color:transparent; 
  vertical-align:bottom; 
  width:1.375em; 
  height:1.375em;  
  position:relative; 
  z-index:2; 
}

.ssg-radio input[type=checkbox]:not(old) + label {  word-wrap: break-word; }

.ssg-radio input[type=checkbox]:not(old) + label > span { 
  display: inline-block; 
  width: 1.375em; 
  height:1.375em; 
  margin:0 .5em 0 0; 
  border-radius: 3px; 
  vertical-align:bottom; 
}

.ssg-radio input[type=checkbox]:not(old) + label > span { background:transparent; border:2px solid #bdc3c9; }


.ssg-radio input[type=checkbox]:not(old):checked + label > span { 
  background:#1428a0 url('pictures/checked.png') no-repeat center center; 
  background-size:.875em; 
  border-color: #1428a0; 
}
.ssg-radio input[type=checkbox]:disabled + label { opacity: 0.6; }
.ssg-radio input[type=checkbox]:disabled { opacity: 0; }


/********** logIn **********/ 
.loginUI { background-color:#f7f7f7; background-repeat:no-repeat; background-position:top center; } 
.loginUI .wrapper:before { 
           content: ''; 
           position: fixed; 
           left: 0; 
           top: 0; 
           right: 0; 
           bottom: 0; 
           background: #000; 
           opacity: .1; 
           z-index: 1; 
}
.loginUI header { position: fixed; left: auto; right: auto; top: 0; z-index: 3; }
.loginUI main { position: relative; left: 0; top: 0; right: 0; bottom: 0; padding: 120px 0 0; z-index: 2; }
.loginUI .main-inner { position: relative; width: 600px; margin: auto; padding: 60px; background: #fff; }
.loginUI h2 { margin-bottom: 10px; color: #1428a0; font-weight: bold; font-size: 40px; }
.loginUI .input-container + .error-msg { margin-top:-1.9em; font-size: .875em; color: #d0021b; }
.loginUI #rememberID {margin-top:-16px;}
.loginUI .login-button { width: 100%; margin: 3.75em 0 2.5em; text-align: center; }
.loginUI .login-button .ssg-button { margin: 0; background: transparent; border: 2px solid #000; color: #000; }

@media (max-width: 900px) {
	.loginUI {background-image:none !important;} 
	.loginUI header { position: relative; z-index: 3; }
	.loginUI main{ width:100%; padding: 0; }
	.loginUI .main-inner { width: 100%; height: auto; padding: 20px 30px 45px; background: #f7f7f7; }
	.loginUI .ssg-contents { max-width: 600px; margin: auto; }
	.loginUI h2 { display: none; }
	
}

@media (min-width: 901px) { 
	.loginUI header { display:none; }
	.loginUI main { padding-top: 90px; }	
}