.wrap {width:100%;margin:0 auto;}
.wrap .view-box{width:100%;overflow:hidden;}

/* Layout */
.wrap .view-box .login {
	margin: 0;
	height:500px;
	overflow:hidden;
	margin-bottom:50px;


}

.wrap .view-box .login .login-box {
	background-color: white;
	padding-left:15px;
	padding-right:15px;
	max-width: 540px;
	margin: 0 auto;
	position: relative;
	overflow:hidden;
	top: 80px;
	padding-bottom: 30px;
	border-radius: 5px;

	text-align: center;

    background: #fffaf6;
    border-radius: 4px;
    color: #7e7975;
    box-shadow:
        0 2px 2px rgba(0,0,0,0.2),        
        0 1px 5px rgba(0,0,0,0.2),        
        0 0 0 12px rgba(255,255,255,0.4); 

  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1s;
}

.wrap .view-box .login .login-box .box-header {
padding-top:15px;padding-bottom:15px;
height:42px;overflow:hidden;
border-bottom: 1px solid #EBE6E2;
margin-bottom:10px;
}

.wrap .view-box .login .login-box .box-header h2 {
	text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
    color: #bdb5aa;
	padding-bottom: 8px;
    text-shadow: 0 2px 0 rgba(255,255,255,0.8);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.wrap .view-box .login .login-box .box-header h2 .log-in,
.wrap .view-box .login .login-box .box-header h2 .sign-up {
    display: inline-block;
    text-transform: uppercase;
}

.wrap .view-box .login .login-box .box-header h2 .log-in {
    color: #6c6763;
    padding-right: 2px;
}

.wrap .view-box .login .login-box .box-header h2 .sign-up {
    color: #ffb347;
    padding-left: 2px;
}

.wrap .view-box .login .login-box .input-box {
width:100%;
height:100px;
overflow:hidden;
margin-bottom:15px;
}

.wrap .view-box .login .login-box .input-box .field {
    width:100%;
	height:42px;
	overflow:hidden;
	position:relative;
	margin-bottom: 10px;
}

/*id*/
.wrap .view-box .login .login-box .input-box .field .id-input{
	position:relative;
	width:100%;
	overflow:hidden;
}

.wrap .view-box .login .login-box .input-box .field .id-input i {
    /* Size and position */
    left: 0px;
    top: -9px;
    position: absolute;
    height: 36px;
    width: 40px;

    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 36px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

.wrap .view-box .login .login-box .input-box .field .id-input input {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    /* Size and position */
    width: 100%;
	height:40px;
    padding: 10px 18px 10px 45px;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
}

.wrap .view-box .login .login-box .input-box .field .id-input input:focus {
	outline: none;
	border-color: #665851;
	transition: 0.5s;
	color: #665851;
}

/*pw*/
.wrap .view-box .login .login-box .input-box .field .pw-input{
	position:relative;
	width:100%;
	overflow:hidden;
}

.wrap .view-box .login .login-box .input-box .field .pw-input i {
    /* Size and position */
    left: 0px;
    top: -9px;
    position: absolute;
    height: 36px;
    width: 40px;

    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 36px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

.wrap .view-box .login .login-box .input-box .field .pw-input input {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    /* Size and position */
    width: 100%;
	height:40px;
    padding: 10px 18px 10px 45px;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
}

.wrap .view-box .login .login-box .input-box .field .pw-input input:focus {
	outline: none;
	border-color: #665851;
	transition: 0.5s;
	color: #665851;
}


/*submit*/
.wrap .view-box .login .login-box .submit-box {
width:100%;
height:38px;
margin-bottom:10px;

}

.wrap .view-box .login .login-box .submit-box button {
	margin-top: 0px;
	border: 0;
	border-radius: 2px;
	color: white;
	padding: 10px;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 0.7em;
	letter-spacing: 1px;
	background-color: #665851;
	cursor:pointer;
	outline: none;
}

.wrap .view-box .login .login-box .submit-box button:hover {
	opacity: 0.7;
	transition: 0.5s;
}

.wrap .view-box .login .login-box .submit-box button:hover {
	opacity: 0.7;
	transition: 0.5s;
}

.selected1 {
	color: #665851!important;
	transition: 0.5s;
}


/*bottom*/
.wrap .view-box .login .login-box .box-bottom {
padding-top:13px;padding-bottom:15px;
height:42px;overflow:hidden;
border-top: 1px solid #EBE6E2;
border-bottom: 1px solid #EBE6E2;
margin-top:10px;
text-align:center;
}

.wrap .view-box .login .login-box .box-bottom .box {
    font-size: 15px;
    font-weight: bold;
    color: #bdb5aa;
	padding-bottom: 8px;
    text-shadow: 0 2px 0 rgba(255,255,255,0.8);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.wrap .view-box .login .login-box .box-bottom .box .pw-find,
.wrap .view-box .login .login-box .box-bottom .box .sign-up {
    display: inline-block;
}

.wrap .view-box .login .login-box .box-bottom .box .vline{position:relative;top:-2px;overflow:hidden;padding-left:5px;padding-right:5px;}

.wrap .view-box .login .login-box .box-bottom .box .pw-find {

}

.wrap .view-box .login .login-box .box-bottom .box .pw-find a {
    color: #6c6763;
	text-decoration:none;
}

.wrap .view-box .login .login-box .box-bottom .box .pw-find a:hover {
	text-decoration:underline;
}


.wrap .view-box .login .login-box .box-bottom .box .sign-up {

}

.wrap .view-box .login .login-box .box-bottom .box .sign-up a{
    color: #ffb347;
	text-decoration:none;
}

.wrap .view-box .login .login-box .box-bottom .box .sign-up a:hover {
	text-decoration:underline;
}


.wrap .view-box .login .login-box .social-login {width:100%;overflow:hidden;margin-top:20px;margin-bottom:20px;text-align:center;}
.wrap .view-box .login .login-box .social-login .sns-wrap {overflow:hidden;margin:0 auto;}

.btn-facebook {
    background-color: #385490;
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-twitter {
    background-color: #00a6e5;
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-google-plus {
    background-color: #db4a37;
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-twitter, .btn-facebook, .btn-google-plus {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.btn-twitter:hover, .btn-facebook:hover, .btn-google-plus:hover {
    color: #fff;
}
.input-icon {
    position: relative;
}
.input-icon i {
    color: #ccc;
    display: block;
    font-size: 20px;
    height: 16px;
    margin: 8px 2px 4px 10px;
    position: absolute;
    right: 10px;
    text-align: center;
    width: 16px;
}
.modal-login-2 .modal-content {box-shadow: none;}
.modal-login-2 .orbullet-divider {
    border-right: 1px solid #dfdfe0;
    position: relative;
}
.modal-login-2 .modal-header {background: #f5f5f5}
.kr-ul {margin: 0;font-size: 0.9em;}

@media (max-width: 480px) {
	body {
		background-color: #fff !important
   }
	.modal-login-2 {
		padding: 0;
	}
	.modal-login-2 .panel {
		box-shadow : none;
		border: none;
		border-radius: none;
		background-color: inherit;
	}
	.modal-login-2 .panel-footer {
		background-color: transparent;
	}
	.modal-login-2 h1 {
		font-size: 20px
	}
	.modal-login-2 .btn.btn-primary {
		width: 100%;
		padding: 10px 16px;
		font-size: 18px;
		line-height: 1.33;
		border-radius: 6px;
	}
}


/* SNS LOGIN */
.login-sns{padding-bottom:5px;border-bottom:none}
.sns-wrap {margin:10px 0 0;text-align:center}
.sns-icon {display:inline-block;vertical-align:middle;text-decoration:none}
.sns-icon:hover {text-decoration:none}
.sns-icon .ico {display:block;background:url('http://news.homp.kr/modules/snslogin/plugin/oauth/img/sns_logo.png') no-repeat;vertical-align:middle}
.sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}
.sns-icon .txt i {font-style:normal}

.reg-form .sns-wrap {margin:0;text-align:left}
.reg-form .sns-icon {display:inline-block;vertical-align:middle;text-decoration:none}
.reg-form .sns-icon:hover {text-decoration:none}
.reg-form .sns-icon .ico {display:block;background:url('http://news.homp.kr/modules/snslogin/plugin/oauth/img/sns_logo.png') no-repeat;vertical-align:middle}
.reg-form .sns-icon-not .ico {display:block;background:url('http://news.homp.kr/modules/snslogin/plugin/oauth/img/sns_logo.png') no-repeat;vertical-align:middle}
.reg-form .sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}
.reg-form .sns-icon .txt i {font-style:normal}

/* SNS by COLOR */
.sns-wrap-org .sns-naver {border-color:#18a400;background:#2db400}
.sns-wrap-org .sns-naver .ico {background-position:-29px 0; }
.sns-wrap-org .sns-gg {border-color:#ca2c19;background:#dd5443}
.sns-wrap-org .sns-gg .ico {background-position:-58px 0}
.sns-wrap-org .sns-fb {border-color:#2e5393;background:#3a5897}
.sns-wrap-org .sns-fb .ico {background-position:0 0 }

.sns-wrap-over .sns-icon {border-color:#dcdcdc}
.sns-wrap-over .sns-icon-not {border-color:#8b8b8b}
.sns-wrap-over .sns-naver{border-color:#18a400}
.sns-wrap-over .sns-naver .ico {background-position:-29px 0; }
.sns-wrap-over .sns-gg .ico {background-position:-58px 0}
.sns-wrap-over .sns-gg {border-color:#ca2c19}
.sns-wrap-over .sns-fb .ico {background-position:0 0 }
.sns-wrap-over .sns-fb {border-color:#2e5393}
.sns-wrap-over .sns-kk .ico {background-position:-87px 0}
.sns-wrap-over .sns-kk {border-color:#f2df00}
.reg-form .sns-icon-not {border-color:#8b8b8b}

/* SNS by SIZE */
.sns-wrap-32 .sns-icon {border-width:1px;border-style:solid;overflow:hidden;margin:0 1px}
.sns-wrap-32 .sns-icon .txt {display:inline-block;margin:0 10px 0 0;font-size:0.95em;letter-spacing:-0.1em}
.sns-wrap-32 .sns-icon .ico {width:24px;height:24px}

/* LOGIN LOADING */
.social-login-loading{width:100%;height:auto;text-align:center}
.social-login-loading p{display:inline-block;margin-top:10px;padding:40px 0 0;line-height:30px}


/*üũ¹Ú½º*/
/* Custom Code Here */
.checkbox-style input {
  display: none;
}
.checkbox-style input:checked + label .box {
  -webkit-animation: animOn 0.6s 1 forwards;
          animation: animOn 0.6s 1 forwards;
  background: rgba(0, 0, 0, 0.5);
}
.checkbox-style input:checked + label .box i {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
  opacity: 1;
}
.checkbox-style label {
  min-width: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  min-height: 30px;
  cursor: pointer;
}

.checkbox-style label .label-txt {
color:#708090;
font-weight:normal;
font-size:13px;
padding-left:5px;
}

.checkbox-style label .box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: relative;
  width: 20px;
  height: 20px;
  -webkit-transition: background 200ms ease;
  transition: background 200ms ease;
}
.checkbox-style label .box:hover {
  background: rgba(0, 0, 0, 0.5);
}

.checkbox-style label .box i {  
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  display: inline-block;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transition-delay: 100ms;
          transition-delay: 100ms;
  -webkit-transform: translate(-50%, -50%) scale(2);
          transform: translate(-50%, -50%) scale(2);
}

@-webkit-keyframes animOn {
  40% {
    height: 20px;
    width: 20px;
  }
  60% {
    height: 20px;
    width: 20px;
  }
  75% {
    height: 20px;
    width: 20px;
  }
  100% {
    height: 20px;
    width: 20px;
  }
}

@keyframes animOn {
  40% {
    height: 20px;
    width: 20px;
  }
  60% {
    height: 20px;
    width: 20px;
  }
  75% {
    height: 20px;
    width: 20px;
  }
  100% {
    height: 20px;
    width: 20px;
  }
}
/* end of custom code */