.login-banner .banner{
	width: 100%;
	height: 288px;
	position: relative;
	margin: 50px 0;
}
.login-banner .banner-color{
	width: 100%;
	height: 100%;
	border-radius: 50px;
	background: linear-gradient(142deg, #009fe3 0%, #037fff 100%);
}
.login-banner .banner-top{
	position: absolute;
	left: 0;
	background: #fff;
}
.login-banner h2{
	font-family: var(--third-family);
	font-weight: 700;
	font-size: 128px;
	color: var(--h-gray);
}
.login-banner .banner-top{
    padding: 0 40px 40px 0;
    border-radius: 0 0 50px 0;
}
.login-banner .banner-top::before{
	content: '';
    position: absolute;
    right: -50px;
    height: 50px;
    width: 50px;
    background: url(img/elem1.png) center;
    transform: rotate(270deg);
}
.login-banner .banner-top::after{
	content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    height: 50px;
    width: 50px;
    background: url(img/elem1.png) center;
    transform: rotate(270deg);
}
.login-banner .banner-top.second{
	top: 135px;
    padding-bottom: 0;
	border-radius: 0;
}
.login-banner .banner-top.second h2{
	margin-bottom: 10px;
}
.login-banner .banner-top.second::after{
	right: -50px;
    left: auto;
    bottom: 4px;
    transform: rotate(180deg);
}
.login-banner .banner-top.second::before{
	right: -50px;
    left: auto;
    top: 32px;
    transform: rotate(270deg);
}
.login-banner .right_bottom_text{
	position: absolute;
	right: 0;
	bottom: 0;
	background: #fff;
	padding: 25px 0 0 20px;
	border-radius: 25px 0 0 0;
}
.login-banner .right_bottom_text a{
	color: var(--h-gray);
	margin-right: 7px;
	padding-right: 7px;
	border-right: 1px solid var(--h-gray);
}
.login-banner .right_bottom_text a:last-child{
	margin-right: 0;
	padding-right:0;
	border-right: 0;
}
.login-banner .right_bottom_text::before{
	content: '';
    position: absolute;
    left: -25px;
    height: 25px;
    width: 25px;
    background: url(img/elem2.png) center;
    transform: rotate(90deg);
    bottom: -1px;
}
.login-banner .right_bottom_text::after{
	content: '';
    position: absolute;
    top: -50px;
    right: 0;
    height: 50px;
    width: 50px;
    background: url(img/elem1.png) center;
    transform: rotate(90deg);
}
.login-form{
	margin: 100px 0;
}
.login-form .form-bottom{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
body .login-form .form-bottom label{
	flex-direction: row;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	color: var(--gray);
	align-items: center;
}
.login-form .bot{
	display: flex;
    align-items: center;
    gap: 50px;
}
body .forgot-password-form label{
	margin-bottom: 0;
}
.forgot-password-form .form-bottom{
	margin-top: 30px;
}
.login-form{
	margin: 100px 0;
}
.login-form .form-bottom{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
body .login-form .form-bottom label{
	flex-direction: row;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	color: var(--gray);
	align-items: center;
}
.login-form .bot{
	display: flex;
    align-items: center;
    gap: 50px;
}
body .forgot-password-form label{
	margin-bottom: 0;
}
.forgot-password-form .form-bottom{
	margin-top: 30px;
}
.register-form{
	margin: 100px 0;
}
.register-form .form-bottom{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
body .register-form .form-bottom label{
	flex-direction: row;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	color: var(--gray);
	align-items: center;
}
.register-form .bot{
	display: flex;
    align-items: center;
    gap: 50px;
}

.register-form .form-bottom{
	margin-top: 30px;
}
.forgot-password-form{
	margin: 100px 0;
}
.forgot-password-form .form-bottom{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
body .forgot-password-form .form-bottom label{
	flex-direction: row;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	color: var(--gray);
	align-items: center;
}
.forgot-password-form .bot{
	display: flex;
    align-items: center;
    gap: 50px;
}
body .forgot-password-form label{
	margin-bottom: 0;
}
.forgot-password-form .form-bottom{
	margin-top: 30px;
}
@media screen and (max-width: 1600px) {
	.login-banner .banner-top.second {
	    top: 130px;
	}
	.login-banner .banner-top.second::before{
		top: 0px;
	}
	.login-banner .banner{
		height: 250px;
	}
	.login-banner .banner-top.second::after{
		bottom: 0px;
	}
}
@media screen and (max-width: 1400px) {
	.login-banner .banner {
        height: 191px;
    }
    body .login-banner .banner-top.second::before {
        right: -50px !important;
    }
}
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 960px) {
	.login-banner .banner {
        height: 188px;
    }
}
@media screen and (max-width: 768px) {
	.login-banner .banner-top{
		position: relative;
		padding: 0 0 20px 0;
		background: transparent;
	}
	.login-banner .banner-top.second{
		position: relative;
    	top: 0 !important;
	}
	.login-banner .right_bottom_text {
	    position: relative;
	    padding:0;
	}
	.login-banner .banner-color{
		z-index: -1;
		top: 0;
		position: absolute;
	}
	.login-banner .banner-top::before{
		display: none;
	}
	.login-banner .banner-top::after,.login-banner .banner-top.second::after{
		display: none;
	}
	.login-banner .banner-color {
        z-index: -1;
        top: 0;
        position: absolute;
        border-radius: 20px;
    }
    .login-banner .banner {
        height: auto;
        padding: 20px 0 0;
        /* word-wrap: break-word; */
    }
    .login-banner .right_bottom_text {
        position: relative;
        padding: 10px 0 0 10px;
    }
    .login-banner h2 {
	    font-family: var(--third-family);
	    font-weight: 700;
	    font-size: 128px;
	    color: #fff;
	    padding-left: 10px;
	}
	.banner-top p{
		color: #fff;
		padding-left: 10px;
	}
}