@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');
}

select {
    width: 100%;
    height: 29px;
    font-size: 18px;
    background: #fff url(/img/sign/arrow-11ac3759173420c67a33d132ea4f6ae2.png) 100% 50% no-repeat;
    color: black;
    -webkit-appearance: none;
    display: inline-block;
    text-align: start;
    border: none;
    cursor: default;
    font-family: inter-Lite;
	-moz-appearance: none; 
	appearance: none;
}


select option{
	color: black;
	background-color: white;
	font-weight: 500;
}

body{
	background-image: url('/img/sign/sign_1-65430ad7f918da540048292b61b88f0d.png'),url('/img/sign/sign2-5dcd521288ea40b221096c072804f304.png');
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	background-position: 5% 90%, 100% 100%;
	background-size: 19% 36%, 36% 80%;
	height: 100vh;
}


.main-text {
    /* padding-top: 100px; */
    text-align: center;
    font-family: inter-SemiBold;
    font-size: 36px;
    color: #27272F;
    height: 20vh;
    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;
    
}

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

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

.form-group{
	/* margin-top: 150px; */
	width: 100%;
}

.join_title{
	width:35%;
	text-align: center;
}

.form-text{
	
	font-family: inter-Lite;
	font-size: 18px;
	
}
.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.int_id {
    padding-right: 40px;
    width:50%;
}

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

@media all and (max-width: 1200px) {

	body {
	background: none;
}
	.content{
	width: 800px;
	}
	
}


@media all and (max-height: 870px) {

	.box{
	height: 40px;
	}

	select{
	height: 23px;
	}
	
	.int{
	height: 20px;
	}
	
	
	.btnGroup{
	margin-top: 3vh;
	}
	
	.main-text{
	height: 15vh;
	}
	
	.input-group{
	margin-bottom: 2.5vh;
	}
	
}

@media all and (max-width: 768px) {

	body {
	background: none;
}
	.content{
	width: 500px;
	}
	.input-group{
	flex-direction: column;
	}
	.join_title{
		text-align: left;
		margin: 10px;
		width: 65%;
	}
	
	.box.int_id {
    padding-right: 10px;
    width:65%;
}
	
}

@media all and (max-width: 768px) {

	body {
	background: none;
}
	.content{
	width: 100%;
	}
	.input-group{
	flex-direction: column;
	}
	.join_title{
		text-align: left;
		margin: 10px;
		width: 80%;
	}
	.main-text{
		font-size: 32px;
	}
	
	.box.int_id {
    padding-right: 10px;
    width: 80%;
}

	
}