@charset "utf-8";

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NanumGothic.eot);
    src: url(../fonts/NanumGothic.eot?#ief         url(../fonts/NanumGothic.woff) format('woff'),ix) format('embedded-opentype'),

         url(../fonts/NanumGothic.ttf) format('truetype');
}

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NanumGothicBold.eot);
    src: url(../fonts/NanumGothicBold.eot?#iefix) format('embedded-opentype'),
         url(../fonts/NanumGothicBold.woff) format('woff'),
         url(../fonts/NanumGothicBold.ttf) format('truetype');
}

body { 
    background: #fff;
}

@-ms-viewport {
  width: device-width;
  height: device-height; 
}

#login_panel {
  display: none;
  margin:0 0 20px 0; 
}

.login-main { padding:0 40px; position:relative; width:100%; }
.login-main h3 { margin-bottom:30px; font-size:22px; color:#333; font-weight:normal; }
.login-main .form-group input,
.login-main .form-group select { font-size:12px; color:#999 !important; font-weight:normal; }
.login-main .btn-primary { background:#00c0f3; border:0; }
.login-main .comment { background:#dcdcdc; color:#717476; font-size:11px; margin-top:70px; padding:15px; line-height:1.8em; }
.login-container .text { width:100%; position:absolute; bottom:30px; z-index:999; color:#fff; text-align:center; text-shadow:1px 1px 1px #000; padding:5px 500px 0 10px; }
*:first-child+html .text { left:-20%; }
.login-container .text h1 { font-size:65px; font-weight:600; }
.login-container .text p { font-size:45px; font-weight:600; line-height:1.2em; }

@media only screen and (max-height:820px), all and (max-device-height:820px){
	.login-main h3 { margin-bottom:30px; }
}

@media only screen and (max-width: 620px), all and (max-device-width: 620px) { /* 테블릿 세로모드 */
	.login-main h3 { margin-bottom:20px; font-size:22px; }	
}

@media only screen and (max-height: 600px), all and (max-device-height: 600px) { /* 안드로이드 모바일 가로모드 */
	.login-main h3 { font-size:20px; margin-bottom:10px; }
}

@media only screen and (max-height: 575px), all and (max-device-height: 575px) { /* 테블릿 가로모드 */
	.login-main h3 { margin-bottom:10px; }
	.login-main .form-group { margin-bottom:8px; }
	.login-main .comment { font-size:10px; margin-top:20px; padding:10px 15px; line-height:1.5em; }
}

@media only screen and (min-height: 250px) and (max-width: 450px), (min-device-height: 250px) and (max-device-width: 450px) { /* 안드로이드 세로모드 */
	.login-main h3 { font-size:20px; margin-bottom:10px; }
	.login-main .form-group { margin-bottom:8px; }
	.login-main .comment { font-size:10px; margin-top:20px; padding:10px 15px; line-height:1.5em; }	
}

div#background_branding_container {
  position: fixed;
  left: 0px;
  top: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
  
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s;
  transition-property: opacity;
  transition-duration: 1s;
}

img#background_background_image {
  position: fixed;
  width: 100%;
  height: 100%;
}

div#background_page_overlay {
  position: fixed;
  left: 0px; /* ltr */
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  opacity: 1;
  background: #F7F7F7 no-repeat top left fixed;
}

.login_panel {
  background: #fff;
  position: fixed;
  right: 0px;  /* ltr */
  float: right;  /* ltr */
  height: 100%;
  width: 500px;
  margin: 0px;
  padding: 0px;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.login_workload_logo_container {
  padding: 40px;
  margin-bottom: 80px;
  width: auto;
  height: auto;
  
  transition: margin 0.6s;
  -moz-transition: margin 0.6s;
  -webkit-transition: margin 0.6s;
  -o-transition: margin 0.6s;
  transition-property: margin;
  transition-duration: 0.6s;
}

.login_cred_container {
  width: 100%;
  height: auto;
  margin-bottom: 60px;
  position: relative;
  display: block;
  padding: 0px;
  
  transition: margin 0.6s;
  -moz-transition: margin 0.6s;
  -webkit-transition: margin 0.6s;
  -o-transition: margin 0.6s;
  transition-property: margin;
  transition-duration: 0.6s;
}

@media only screen and (max-height: 820px), (max-device-height: 820px) {
  .login_workload_logo_container {
    margin-bottom: 30px;
  }
}

@media only screen and (max-height: 600px), (max-device-height: 600px) {  /* 안드로이드 모바일 가로모드 */
  .login_workload_logo_container {
	padding: 30px 40px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-height: 575px), (max-device-height: 575px) {  /* 테블릿 가로모드 */
  .login_workload_logo_container {
	padding: 30px 40px;
    margin-bottom: -10px;
  }
}

@media only screen and (max-width: 600px), (max-device-width: 600px) {
  div#background_branding_container {
    opacity: 0;
    display: none;
  }
}

/* Horizontal phone oorientation */
@media only screen and (max-width: 620px), (max-device-width: 620px) {	/* 테블릿 세로모드 & 안드로이드 모바일 가로모드 */
  html {
    background: #FFFFFF;
    overflow: hidden;
  }
  div#background_branding_container {
    opacity: 0;
    z-index: -999;
    display: none;
  }
  div#background_page_overlay {
    display: none;
    z-index: -999;
  }
  .login_panel {
    position: relative;
    float: none;
    height: 100%;
    width: 100%;
    min-width: 360px;
    margin: 0px;
    padding: 0px;
    z-index: 1;
    padding-top: 0px;
    overflow: auto;
  }
  img.workload_img {
    max-width: 280px;
    height: 30px;
    width: auto;
  }
}

/* cellphone resolution vertical orientation resolution. */
@media only screen and (min-height: 250px) and (max-width: 450px), (min-device-height: 250px) and (max-device-width: 450px) {	/* 안드로이드 세로모드 */
  html {
    background: #fff;
    overflow: hidden;
  }
  div#background_branding_container {
    opacity: 0;
    z-index: -999;
    display: none;
  }
  #background_background_image {
    display: none;
  }
  div#background_page_overlay {
    display: none;
    z-index: -999;
  }
  .login_panel {
    /* position: relative; */
    float: none;
    height: 100%;
    width: 100%;
    min-width: 220px;
    margin: 0px;
    padding: 0px;
    z-index: 1;
    padding-top: 0px;
    overflow: auto;
  }
  img.workload_img {
    max-width: 100%;
    height: 30px;
    width: auto;
  }
  .login_workload_logo_container {
	padding: 30px 40px;
    margin-bottom: -10px;
    max-width: 100%;
  }
}

@media only screen and (max-width: 300px), (max-device-width: 300px) {
}

@media only screen and (max-width: 270px), (max-device-width: 270px) {
 .login_panel {
    width: 100%;
    min-width: 100%;
  }
  img.workload_img {
    max-width: 100%;
    width: auto;
  }
  .login_workload_logo_container {
    max-width: 100%;
  }
}


/*************** Slide/Fade in from left to right. *****************/
/* Supported browsers IE10+, Chrome, Firefox, Safari, Android 4.0+ */
.slide
{
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: commonFadeInFrames, slideLTransformFrames;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 0.5s;
    -moz-animation-name: commonFadeInFrames, slideLTransformFrames;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: 0.5s;
    -ms-animation-name: commonFadeInFrames, slideLTransformFrames;
    -ms-animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-name: commonFadeInFrames, slideLTransformFrames;
    animation-fill-mode: both;
}
@-webkit-keyframes slideLTransformFrames
{
    from { -webkit-transform:translate(-40px, 0px); -webkit-animation-timing-function: cubic-bezier(0,0,0,1); }
    to { -webkit-transform:translate(0px, 0px); }
}
@-moz-keyframes slideLTransformFrames
{
    from { -moz-transform:translate(-40px, 0px); -moz-animation-timing-function: cubic-bezier(0,0,0,1); }
    to { -moz-transform:translate(0px, 0px); }
}
@-ms-keyframes slideLTransformFrames
{
    from { -ms-transform:translate(-40px, 0px); -ms-animation-timing-function: cubic-bezier(0,0,0,1); }
    to { -ms-transform:translate(0px, 0px); }
}
@keyframes slideLTransformFrames
{
    from { transform:translate(-40px, 0px); animation-timing-function: cubic-bezier(0,0,0,1); }
    to { transform:translate(0px, 0px); }
}

/* Common keyframe definitions for many fade in animations */
@-webkit-keyframes commonFadeInFrames
{
    from { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0,0,1,1); }
    to { opacity: 1; }
}
@-moz-keyframes commonFadeInFrames
{
    from { opacity: 0; -moz-animation-timing-function: cubic-bezier(0,0,1,1); }
    to { opacity: 1; }
}
@-ms-keyframes commonFadeInFrames
{
    from { opacity: 0; -ms-animation-timing-function: cubic-bezier(0,0,1,1); }
    to { opacity: 1; }
}
@keyframes commonFadeInFrames
{
    from { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
    to { opacity: 1; }
}