@charset "UTF-8";

@font-face {
    font-family: 'inter-SemiBold';
    src: url('/font/Inter-SemiBold-a2c4e8821556fa8b48d943a39f9da10c.ttf') format('truetype');
}

@font-face {
    font-family: 'inter-Lite';
    src: url('/font/Inter-Light-bd68bbe6f33671b4e0aff5e4e44511d2.ttf') format('truetype');
}

@font-face {
    font-family: 'inter';
    src: url('/font/Inter-Regular-851660f90f21dba5ec35b1765fdd426a.ttf') format('truetype');
}

.radio{
	font-family: inter-Lite;
	font-size: 18px;
}

.radio label{
	cursor: pointer;
}

.forgot-group{
	display: flex;
	width: 65%;
	justify-content: space-between;
}

.forgot-text{
	font-family: inter-Lite;
	font-size: 18px;
}

.sign-text-group{
	text-align: center;
	padding-top: 2vh;
}

.sign-text{
	font-family: inter;
	font-size: 18px;
	color: #9C9C9C;
}

.sign-text a{
	color: #FC0989;
}


.two-text{
	text-align: center;
	color: #27272F;
	height: 10vh;
	display: flex;
	justify-content: center;
	align-items: center;
	
	padding-bottom: 25px;
}

.login_fom{
	padding-top: 20px;
}

.two-text p{
	font-family: inter;
	font-size: 26px;
}

.three-img{
	text-align: center;
}

.four-text{
	height: 10vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.four-text p{
	
	font-family: inter-Lite;
	font-size: 18px;
	color: #27272F;
}


.five-text{
	height: 10vh;
	display: flex;
	justify-content: center;
	align-items: baseline;
	text-align: center;
}

.five-text p{
	color: #9B9B9B;
	font-family: inter-Lite;
	font-size: 18px;
}

body{
	background-image: url('/img/login/login_1-4ad9599965cb8ff54dc168140c4371b9.png'),url('/img/login/login_2-2ef4a8bf5b94bfc6af92f96f18507164.png');
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	background-position: 0% 100%, 100% 100%;
	background-size: 21% 73%, 20% 40%;
	height: 100vh;
}


.main-text {
    /* padding-top: 100px; */
    text-align: center;
    font-family: inter-SemiBold;
    font-size: 36px;
    color: #27272F;
    height: 15vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.wrapper {
    position: relative;
    height: 90vh;
}

.content {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 800px;
    height: 70vh;
    /* display: flex; */
    align-items: flex-start;
    justify-content: center;
    flex-flow: wrap;
    /* margin-top: 5vh; */
    margin-top: 3vh;
    
}

.input-group{
	align-items: center;
	margin-bottom: 3vh;
	display: flex;
	width: 100%;
	flex-direction: column;
}

input::placeholder{
	font-size: 18px;
	font-family: inter-Lite;
}

.form-group{
	/* margin-top: 150px; */
	width: 100%;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	/* padding-top: 3vh; */
}

.join_title{
	width:65%;
	margin: 5px;
	/* text-align: center; */
}

.form-text{
	
	font-family: inter-Lite;
	font-size: 18px;
	color: #27272F;
	
}
.int {
    display: block;
    position: relative;
    width: 100%;
    height: 29px;
    border: none;
    background: #fff;
    font-size: 18px;
}

.box {
    display: block;
    width: 100%;
    height: 51px;
    border: solid 1px #dadada;
    padding: 10px 14px 10px 14px;
    box-sizing: border-box;
    background: #fff;
    position: relative;
}


.box_group{
	text-align: center;
	margin-top: 7vh;
	width: 100%;
}

.box.int_id {
    /* padding-right: 40px; */
    width:65%;
}

.signBtn{
	font-size: 20px;
    font-family: inter-SemiBold;
    color: white;
    width: 30%;
    height: 55px;
    border-radius: 10px;
    background: #27272F;
    cursor: pointer;
    letter-spacing: 2px;
}




input[type=radio] {
  --active: #275efe;
  --active-inner: #fff;
  --focus: 2px rgba(39, 94, 254, 0.3);
  --border: #bbc1e1;
  --border-hover: #275efe;
  --background: #fff;
  --disabled: #f6f8ff;
  --disabled-inner: #e1e6f9;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 21px;
  outline: none;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
  cursor: pointer;
  border: 1px solid black;
  background: var(--b, var(--background));
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

input[type=radio]:after {
  content: "";
  display: block;
  left: 0;
  top: 0;
  position: absolute;
  transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}

input[type=radio]:checked {
  --b: var(--active);
  --bc: var(--active);
  --d-o: 0.3s;
  --d-t: 0.6s;
  --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
}

input[type=radio]:disabled {
  --b: var(--disabled);
  cursor: not-allowed;
  opacity: 0.9;
}

input[type=radio]:disabled:checked {
  --b: var(--disabled-inner);
  --bc: var(--border);
}

input[type=radio]:disabled + label {
  cursor: not-allowed;
}

input[type=radio]:hover:not(:checked):not(:disabled) {
  --bc: var(--border-hover);
}

input[type=radio]:focus {
  box-shadow: 0 0 0 var(--focus);
}

input[type=radio]:not(.switch) {
  width: 21px;
}

input[type=radio]:not(.switch):after {
  opacity: var(--o, 0);
  background: #19F6D0;
}

input[type=radio]:not(.switch):checked {
  --o: 1;
  background: white;
}

input[type=radio] {
  border-radius: 50%;
}
input[type=radio]:after {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--active-inner);
  opacity: 0;
  transform: scale(var(--s, 0.7));
}
input[type=radio]:checked {
  --s: 0.5;
}


@media all and (max-height: 1000px) and (min-width: 2000px) {
	
	
	body{
	
	background-position: 0% 100%, 95% 100%;
	background-size: 20% 73%, 17% 40%;
}
	
}

@media all and (max-width: 900px){
	body{
	background: none;
	}
}


@media all and (max-width: 768px) {
	
		body {
	background: none;
}
	
	.content{
		width: 100%;
	}
	
	.radio{
		font-size: 12px;
	}
	.forgot-text{
		font-size: 12px;
	}
	.join_title{
		width: 80%;
	}
	.box.int_id{
		width: 80%;
	}
	
	input::placeholder{
	font-size: 15px;
}
	.forgot-group{
		width:80%;
	}
}