@import url("sub.css");

/* 회원가입 탭 */
.join-info {
	padding: 80px 20px 70px;
	margin-bottom: 200px;
}
.join-info .txt {
	font-size: 40px;
	text-align: center;
	font-family: 'Cafe24Ohsquareair';
	margin-bottom: 60px;
}
.join-info .flex {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	font-family: "NanumSquare";
}
.join-info .flex a {
	flex: 1;
    text-align: center;
	color: #fff;
	font-size: 30px;
	padding: 215px 0 39px;
}
.join-info .flex a:first-child {
	background: #1D224F url("../images/join-speaker.svg")no-repeat 50% 90px;
	margin-right: 50px;
}
.join-info .flex a:last-child {
	background: #1D224F url("../images/join-basic.svg")no-repeat 50% 90px;
}
.join-info .flex a span {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3;
    display: block;
    margin-top: 20px;
}




/* 연사 회원가입 */
.join-form .btn-form {
	position: relative;
}
.join-form .btn-form input[type=text] {
	width: calc(100% - 210px);
}
.join-form .btn-form button {
    position: absolute;
    right: 10px;
    top: 10px;
	width: 200px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    background: #181927;
    font-size: 18px;
    font-weight: 300;
}

@media screen and (max-width: 1280px){
	.join-info .txt {
		font-size: 35px;
	}
}
@media screen and (max-width: 1024px){
	.join-info {
		margin-bottom: 120px;
		padding: 50px 20px 40px;
	}
	.join-info .txt {
		font-size: 25px;
	}
	.join-info .flex a {
		font-size: 25px;
		padding: 175px 0 50px;
		background-size: auto 70px!important;
	}
	.join-info .flex a:first-child {
		margin-right: 25px;
	}
	.join-info .flex a span {
    	font-size: 17px;
    }

	.join-form .btn-form input[type=text] {
	    width: calc(100% - 155px);
	}
	.join-form .btn-form button {
		width: 145px;
	}
}
@media screen and (max-width: 768px){
	.join-info {
		margin-bottom: 60px;
	}
	.join-info .txt {
	    font-size: 20px;
	    margin-bottom: 30px;
	}
	.join-info .txt span {
		display: block;
	}
	.join-info .flex {
		display: block;
	}
	.join-info .flex a { 
		display: block;
		font-size: 18px;
		padding: 110px 0 40px;
		background-size: auto 50px!important;
		background-position: 50% 45px!important;
	}
	.join-info .flex a:first-child {
		margin: 15px 0;
	}
	.join-info .flex a span {
	    font-size: 15px;
	}

	.join-form .btn-form button {
	    width: 120px;
	    font-size: 17px;
	    top: 5px;
	    right: 5px;
	}
	.join-form .btn-form input[type=text] {
	    width: calc(100% - 125px);
	    padding: 0 15px;
	}
}