.login-ipt-user-icon {
	background-image: url("../images/login-images/user-icon.png");
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.login-ipt-pswd-icon {
    background-image: url("../images/login-images/pswd-icon.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.login-ipt-ver-code-icon {
    background-image: url("../images/login-images/ver-code-icon.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.container-fluid .login_left{
	background-image: url(../images/login_left.png); 
	background-size: cover; 
	background-position: center center; 
	display: block;
}
.col-xl-5 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 41.66667%;
}
.row > div {
  position: relative; 
}

body {
  background-color: #fff; 
}
body {
	font-size: 14px;
	font-family: "Montserrat", sans-serif;
	color: #242934;
}

.login-form {
 border-radius:15px;
  background-color: #fff;
  justify-content: center;
  margin-left: auto;
  margin-right: auto; 
}
.login-form h4 {
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 22px; 
}
.login-form h6 {
    font-size: 14px;
    color: #999; 
}
.login-form .btn {
	text-transform: uppercase;
	font-weight: 700;
	margin-left: auto;
	/* display: block; */
	height: 38px;
	border-radius: 8px 0px 0px 8px;
}
.login-form p {
    font-weight: 600;
    text-align: center;
    margin-bottom: unset; 
}
.login-form .form-group .input-group-text {
    background-color: rgba(189, 196, 194, 0.1);
    border: none;
    color: #889fcc 
}
.login-form .form-group input {
    transition: all 0.3s ease; 
}
.login-form .form-group .form-control::placeholder {
    font-weight: 400; 
}
.login-form .form-group .form-control:focus {
    box-shadow: none; 
}
.login-form .form-group .checkbox {
    display: inline-block; 
    margin:0 !important;
}
.login-form .form-group .checkbox label {
    padding-top: 0;
    margin-top: 0;
    color: #999; 
}
.login-form .form-group .checkbox label span {
    color: rgba(36, 105, 92, 0.5); 
}
.login-form .form-group .link {
    float: right;
    font-weight: 500; 
}
.login-form .form-group .small-group {
    display: flex;
    align-items: center; 
}
.login-form .form-group .small-group .input-group:nth-child(n+2) {
    margin-left: 10px; 
}
.login-form ul.login-social {
    display: flex;
    align-items: center;
    justify-content: center; 
}
.login-form ul.login-social li {
      display: inline-block;
      width: 35px;
      height: 35px;
      background-color: rgba(36, 105, 92, 0.08);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px; 
}
.login-form ul.login-social li a {
      line-height: 1; 
}
.login-form ul.login-social li a svg {
      width: 16px;
      height: auto; 
}
.login-form ul.login-social li:nth-child(n+2) {
      margin-left: 10px; 
}
.login-form .login-social-title {
    position: relative;
    margin-bottom: 20px;
    z-index: 2; 
}
.login-form .login-social-title::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #999;
      z-index: -1; 
}
.login-form .login-social-title h5 {
      font-weight: 600;
      font-size: 16px;
      color: #999;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      padding-left: 10px;
      padding-right: 10px;
      background-color: #fff; 
}

@media (max-width: 575px) {
  .login-form .form-group .link {
    float: unset; 
  }
  .login-form .btn {
    margin-left: unset; 
  } 
}
.height-35 {
  height: 35px !important; 
}

.form-group label {
  margin-bottom: 5px;
  font-weight: 100; 
}
.form-control, .form-select {
  background-color: #fff;
  font-size: 14px !important;
  border-color: #e6edef;
  color: #717171; 
}
.form-control:focus, .form-select:focus {
    border-color: #e6edef;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(171, 140, 228, 0.05); 
}

.theme-form .form-control :focus {
   box-shadow: 0 0 0 0.2rem rgba(171, 140, 228, 0.05); 
}

.theme-form.sm-form .form-group {
   margin-bottom: 14px; 
}
/*======= Button-color css starts  ======= */
.btn-primary {
  background-color: #889fcc !important;
  border-color: #889fcc !important; 
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: #c8c9cc !important;
    border-color: #c8c9cc !important; 
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem #5ec8b4; 
}
.btn-secondary {
  background-color: #ba895d !important;
  border-color: #ba895d !important; 
}
.btn-secondary.disabled, .btn-secondary:disabled {
    background-color: #ba895d !important;
    border-color: #ba895d !important; 
}
.btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem #e8d7c8; 
}
.btn-success {
  background-color: #1b4c43 !important;
  border-color: #1b4c43 !important; 
}
.btn-success.disabled, .btn-success:disabled {
    background-color: #1b4c43 !important;
    border-color: #1b4c43 !important; 
}
.btn-success:focus {
    box-shadow: 0 0 0 0.2rem #44bca6; 
}
.btn-danger {
  background-color: #d22d3d !important;
  border-color: #d22d3d !important; 
}
.btn-danger.disabled, .btn-danger:disabled {
    background-color: #d22d3d !important;
    border-color: #d22d3d !important; 
}
.btn-danger:focus {
    box-shadow: 0 0 0 0.2rem #edabb1; 
}
.btn-info {
  background-color: #717171 !important;
  border-color: #717171 !important; 
}
.btn-info.disabled, .btn-info:disabled {
    background-color: #717171 !important;
    border-color: #717171 !important; 
}
.btn-info:focus {
    box-shadow: 0 0 0 0.2rem #bebebe; 
}
.btn-light {
  background-color: #e6edef !important;
  border-color: #e6edef !important; 
}
.btn-light.disabled, .btn-light:disabled {
    background-color: #e6edef !important;
    border-color: #e6edef !important; 
}
.btn-light:focus {
    box-shadow: 0 0 0 0.2rem white; 
}
.btn-dark {
  background-color: #2c323f !important;
  border-color: #2c323f !important; 
}
.btn-dark.disabled, .btn-dark:disabled {
    background-color: #2c323f !important;
    border-color: #2c323f !important; 
}
.btn-dark:focus {
    box-shadow: 0 0 0 0.2rem #6c7a98; 
}
.btn-warning {
  background-color: #e2c636 !important;
  border-color: #e2c636 !important; 
}
.btn-warning.disabled, .btn-warning:disabled {
    background-color: #e2c636 !important;
    border-color: #e2c636 !important; 
}
.btn-warning:focus {
    box-shadow: 0 0 0 0.2rem #f5ecbc; 
}
.btn-primary-light {
  background-color: rgba(36, 105, 92, 0.1) !important;
  border: none !important;
  color: #24695c;
  transition: 0.5s; 
}
.btn-primary-light:focus, .btn-primary-light:hover {
    background-color: rgba(36, 105, 92, 0.5) !important;
    color: #fff;
    transition: 0.5s; 
}
/*======= Button-color css ends  ======= */









.col-xl-7 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 58.33333%;
}
.p-0 {
	padding: 0 !important;
}
.row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: calc(var(--bs-gutter-y) * -1);
	margin-right: calc(var(--bs-gutter-x) / -2);
	margin-left: calc(var(--bs-gutter-x) / -2);
}
.btn_copyright {
	position: absolute;
	bottom: 0;
	display: inline-block;
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
	width: 100%;
	padding-right: var(--bs-gutter-x, 0.75rem);
	padding-left: var(--bs-gutter-x, 0.75rem);
	margin-right: auto;
	margin-left: auto;
}
.input-group-text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	font-weight:500;
}
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-group {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}
.input-group-text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	width: 40px;
}
.input-group-text i{
	width: 16px;
	margin: 0 auto;
}

.loginbox-language {
	position: absolute !important;
	top: 25px;
	right:25px;
	display: inline-block;
}
.loginbox-language img{
	width: 32px;
	height: 26px;
	border-radius:8px;
}
.loginlogo{
	position: absolute !important;
	top: 25px;
	left:25px;
	display: inline-block;
}
body.ejoin .loginlogo{
	background: url(../images/logo/ejoin.png);
	background-size: 100% 99.9%;
	width: 100px;
	height: 67px;
	margin: 0 auto;
}
body.chungHwaTelecom .loginlogo{
	background: url(../images/logo/chungHwaTelecom1_b.png);
	background-size: 100% 99.9%;
	width: 250px;
	height: 82px;
	margin: 0 auto;
} 


#checkbox1{
	margin-left:-5px !important;
	position:static !important;
}
.link{
	cursor: pointer;
	margin-bottom:12px;
}
#reg_user-edit-form .form-group{
	margin-bottom: 0px !important;
}
#reg_user-edit-form .col-xs-12-padding{
	margin-left:18px;
}
.countriesList{
	/* position: relative; */
	display: flex;
	height: 38px;
	border: 1px solid #e1e1e2;
	border-radius: 8px;
	/* overflow: hidden; */
}
.countriesList .img-span{
	width: 100px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-right: 1px solid #e1e1e2;
}





@media (max-width: 480px) {
    #form_div_id {
		top: 0px;
		width: 100%;
	}
    .loginlogo,.btn_copyright{
        display: none;
    }
    .login-form {
		padding: 10px 30px;
		/* border-radius:0px !important; */
	}
	.reguser-forgetpwdbox .input-group.input-group-lg{
		display: block;
		height: 45px !important;
		margin-top: -10px;
	}
	#id_beforeLoginVer-edit-form .imgcaptcha_container {
		left: -30px !important;
		top: -160px !important;
	}
	#protocol_dialog .modal-dialog{
	    width:calc(100% - 20px) !important;
	    width:-webkit-calc(100% - 20px) !important;
	    width:-moz-calc(100% - 20px) !important;
	}
	.container{
	    padding-top: 5px !important;
	}
	.contentDiv{
	    margin: 5px 0 0 1%  !important;
	    width: 100% !important;
	}
}


@media(max-width:800px){
	.login_left, .login-social-title{
	    display: none !important;
	}
	.login_right{
	    width: 100% !important;
	}
	.login-form {
         padding: 10px 30px;
		 border-radius:15px;
		 background-color: #fff;
		 justify-content: center;
		 margin-left: auto;
		 margin-right: auto; 
     }
    .loginlogo{
         width: 32px !important;
         height: 26px !important;
    }
    .login-card{
         
    }
    .link_div a {
		padding: 0 8px !important;
	}
	.reguser-forgetpwdbox .input-group.input-group-lg{
	    height:50px;
	}
	.countryCode_div .dropdown-menu{
		z-index: 999;
	}
	.countryCode_div .dropdown-menu {
		max-height: 165px;
	}
	.login-card {
	  background-color: rgba(36, 105, 92, 0.1);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin: 0 auto;
	  height:100vh;
	  width:100vw;
	  padding:0px 25px;
	}
	#protocol_dialog .modal-dialog{
	    width:calc(100% - 20px) !important;
	    width:-webkit-calc(100% - 20px) !important;
	    width:-moz-calc(100% - 20px) !important;
	}
	.container{
	    padding-top: 40px;
	}
	.contentDiv{
	    margin: 40px 0 0 10%;
	    width: 100% !important;
	}
	.forgetPwd_login_right,.loginUser_login_right{
		align-items: center;
		display: flex;
		justify-content: center;
		height: 100vh;
	}
	body .authent{
	    top:130px !important;
	    right: -120px !important;
	}
	body .login_div_cls{
		-webkit-transform-origin: 161px 40% !important;
		-ms-transform-origin: 161px 40% !important;
		transform-origin: 161px 40% !important;
	}
}


@media(min-width:1200px){
	.login-card {
	    padding: 1px 12px !important;
    }
    .col-xs-12-padding {
		height: 12px;
		float: left;
	}
	.login-form {
	    padding: 10px 30px;
	    width: 100%;
	}
	.login-form h6 {
        margin-bottom: 15px;
    }
    .reguser-forgetpwdbox{
        margin-top: 20px;
    }
    .countryCode_div .dropdown-menu {
		max-height: 225px;
	}
	.login-card {
	  background-color: rgba(36, 105, 92, 0.1);
	  height: 100vh;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  min-height: 100vh;
	  margin: 0 auto;
	  padding: 30px 12px; 
	}
	
	#protocol_dialog .modal-dialog{
	    width:1137px;
	}
	.container{
	    padding-top: 80px;
	}
	.contentDiv{
	    margin: 80px 0 0 10%;
	    width: 860px;
	}
	.topDiv {
	    width: 100%;
	}
	#id_beforeLoginVer-edit-form .imgcaptcha_container {
		left: 79px !important;
		top: -140px !important;
		background: #e5e6f2;
	}
	body .testtwo {
		left: -120px !important;
	}
	body .login_div_cls{
		-webkit-transform-origin: 161px 40% !important;
		-ms-transform-origin: 161px 40% !important;
		transform-origin: 161px 40% !important;
	}
}





@media(min-width:1920px){
	.login-card {
		padding: 30px 12px;
	}
	.col-xs-12-padding{
	    height: 22px;
		float: left;
	}
	.login-form {
	    padding: 30px;
	    width: 450px;
	}
	.login-form h6 {
        margin-bottom: 25px;
    }
    .reguser-forgetpwdbox{
        margin-top: 20px;
    }
    .countryCode_div .dropdown-menu {
		max-height: 285px;
	}
	.login-card {
	  background-color: rgba(36, 105, 92, 0.1);
	  height: 100vh;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  min-height: 100vh;
	  margin: 0 auto;
	  padding: 30px 12px; 
	}
	#protocol_dialog .modal-dialog{
	    width:1137px;
	}
	.container{
	    padding-top: 80px;
	}
	.contentDiv{
	    margin: 80px 0 0 10%;
	    width: 860px;
	}
	.topDiv {
	    width: 100%;
	}
	body .testtwo {
		left: -120px !important;
	}
}

.cbtn {
	margin-left: -104px !important;
	z-index: 3;
	height: 38px !important;
	font-size: 14px !important;
	width: 104px !important;
}

.input-group-btn {
	display: block !important;
	font-size: 14px;
	font-weight: 400;
	color: rgb(63, 66, 84);
}
.input_group {
	border-collapse: separate;
}
.forgetpwdbox-textbox .form-group, .form-control {
	width: 100%;
}
.input_group {
	position: relative;
	display: table;
	border-collapse: separate;
}
 @keyframes login-ipt-bg1 {
  0% {
    top: -100%;
  }
  25% {
    top: 10%;
  }
  50% {
    top: 0%;
  }
  100% {
    top: 5%;
  }
}


@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

 
 

 

body .test {
	box-shadow: 0px 50px 30px 3px rgba(0, 0, 0, 0.55);
	pointer-events: none;
	-webkit-transform: rotateX(70deg) scale(0.8) !important;
	transform: rotateX(70deg) scale(0.8) !important;
	opacity: .6 !important;
	-webkit-filter: blur(1px);
	filter: blur(1px);
}
.login_div_cls {
	animation: login-ipt-bg1 1s ease-in-out 0s 1 alternate forwards;
}
body .authent {
	box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
	display: none;
	background: #35394a;
	background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
	position: absolute;
	left: 0;
	right: 90px;
	margin: auto;
	width: 280px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	padding-top: 20px;
	top: 200px;
	bottom: 0;
	height: 100px;
	opacity: 0;
}
body .authent {
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
}
body .authent p {
	text-align: center;
	color: white;
}
 
body .login_div_cls {
	opacity: 1;
	-webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
	-webkit-transition-property: -webkit-transform,opacity,box-shadow,top,left;
	transition-property: transform,opacity,box-shadow,top,left;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transform-origin: 161px 100%;
	-ms-transform-origin: 161px 100%;
	transform-origin: 161px 100%;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	position: relative;
	/* border-top: 2px solid #D8312A; */
	/* position: absolute; */
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
	bottom: 0;
	/* padding: 10px 40px 40px 40px; */
	border-radius: 10px;
}

 .modal-backdrop2 {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1042;
	background-color: #000;
}
.modal-backdrop2.fade {
	filter: alpha(opacity=0);
	opacity: 0;
} 
.modal-backdrop2.in {
	filter: alpha(opacity=50);
	opacity: .5;
}