File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="w1400">
<section class="join-logo">
<h1>회원가입</h1>
</section>
<section class="join-b">
<div class="join-b-button">
<input type="radio" id="one" v-model="selectedMembership" value="one">
<label for="one" class="radio-t t1"
:style="{ backgroundColor: selectedMembership === 'one' ? '#86868644' : '#e2ecfc' }">기관회원
<img src="../../../../resources/jpg/join-bt2.png" alt=""></label>
<input type="radio" id="two" v-model="selectedMembership" value="two">
<label for="two" class="radio-t t2"
:style="{ backgroundColor: selectedMembership === 'two' ? '#86868644' : '#e6fff1' }">일반회원
<img src="../../../../resources/jpg/join-bt.png" alt=""></label>
</div>
</section>
<div v-if="selectedMembership === 'one'">
<div class="login-info2">
<div>
<h3>회사소개</h3>
<hr>
</div>
<div class="login-info-grid">
<div class="login-info-grid-1">
<section class="join-sec0">
<div>
<p id="logoImg" ref="logoImg">logo</p>
<img id="logoImg" ref="logoImg" style="height:250px;" />
<input type="file" accept="image/*" name="logoImg" id="logoImg" ref="logoImg"
@change="logoUpload" />
</div>
</section>
</div>
<div class="login-info-grid-2">
<section class="join-sec1 joinsub0">
<div class="join-sec-sub ">
<span>사업자등록번호</span>
</div>
<div>
<input type="text" v-model="company['company_id']" placeholder="사업자등록번호를 입력하세요.">
</div>
<div>
<button @click="companyIdCheck">중복확인</button>
</div>
<!-- <div v-if="this.companyIdCheck_boolean" style="color:chartreuse"></div>
<div v-else style="color:red">사업자등록번호: 이미 등록되어있는 사업자등록번호 입니다.</div> -->
</section>
<section class="join-sec1 joinsub0-1">
<div class="join-sec-sub ">
<span>회사명</span>
</div>
<div>
<input type="text" v-model="company['company_nm']" placeholder="회사명을 입력해주세요.">
</div>
</section>
<section class="join-sec2 joinsub">
<div class="join-sec-sub">
<span>우리회사 키워드</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec3 joinsub j-s-3">
<div class="join-sec-sub">
<span>회사소개글</span>
</div>
<div class="join-sub-input">
<input type="text" v-model="company['company_info']">
</div>
</section>
<section class="join-sec4 joinsub">
<div class="join-sec-sub join-sec-1">
<span>회사소개서 첨부파일</span>
</div>
<div class="join-sub-input">
<input type="file" name="companyProfile" id="companyProfile" ref="companyProfile"
@change="companyProfileUpload"/>
</div>
</section>
</div>
</div>
</div>
<div class="login-info">
<div>
<h3>회원정보</h3>
<p>※ 기업회원의 경우 담당자 1인만 가입할 수 있습니다. 이미 가입한 기업은 중복 계정 생성이 불가합니다.
</p>
<hr>
</div>
<section class="join-sec1 joinsub0">
<div class="join-sec-sub ">
<span>아이디</span>
</div>
<div>
<input type="text" v-model="user['user_id']" placeholder="아이디를 입력하세요.">
</div>
<div>
<button @click="userIdCheck">중복확인</button>
</div>
</section>
<section class="join-sec3 joinsub">
<div class="join-sec-sub">
<span>비밀번호</span>
</div>
<div class="join-sub-input">
<input type="text" v-model="user['user_pw']" @change="passwordSyncCheck()" placeholder="비밀번호 입력">
</div>
</section>
<section class="join-sec4 joinsub">
<div class="join-sec-sub">
<span>비밀번호 확인</span>
</div>
<div class="join-sub-input">
<input type="text" v-model="pwCheck" @change="passwordSyncCheck()" placeholder="비밀번호 확인">
</div>
<div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
<div v-else style="color:red">비밀번호 불일치</div>
</section>
<section class="join-sec5 joinsub">
<div class="join-sec-sub">
<span>담당자명<span>(필수)</span></span>
</div>
<div>
<input type="text" v-model="user['user_nm']">
</div>
</section>
<section class="join-sec4 joinsub">
<div class="join-sec-sub join-sec-1">
<span>담당자 명함</span>
</div>
<div class="join-sub-input">
<input type="file" accept="image/*" name="imgFile" id="businessCardImg" ref="businessCardImg"
@change="businessCardUpload" />
</div>
</section>
<section class="join-sec6">
<div class="join-sec-sub">
<span>이메일<span>(필수)</span></span>
</div>
<div class="email-sec">
<div>
<input type="text" name="email_id" id="email_id" v-model="email_id">
</div>
<div>@</div>
<div>
<input v-if="select_email_dns==null" type="text" name="email_dns" id="email_dns" v-model="email_dns">
<input v-else type="text" name="email_dns" id="email_dns" v-model="select_email_dns">
</div>
<div>
<select name="email_sel" id="email_sel" v-model="select_email_dns">
<option :value=null>직접 입력</option>
<option value="naver.com">naver.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="gmail.com">google.com</option>
</select>
</div>
</div>
</section>
</div>
</div>
<div v-else>
<div class="login-info">
<div>
<h3>회원정보</h3>
<hr>
</div>
<section class="join-sec1 joinsub0">
<div class="join-sec-sub ">
<span>아이디</span>
</div>
<div>
<input type="text" v-model="user['user_id']" placeholder="아이디를 입력하세요.">
</div>
<div>
<button>중복확인</button>
</div>
</section>
<!-- <section class="join-sec2 joinsub">
<div class="join-sec-sub">
<span>기관업체</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section> -->
<section class="join-sec3 joinsub">
<div class="join-sec-sub">
<span>비밀번호</span>
</div>
<div class="join-sub-input">
<input type="text" v-model="user['user_pw']">
</div>
</section>
<section class="join-sec4 joinsub">
<div class="join-sec-sub">
<span>비밀번호 확인</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec5 joinsub">
<div class="join-sec-sub">
<span>이름</span>
</div>
<div>
<input type="text" v-model="user['user_nm']">
</div>
</section>
<section class="join-sec6">
<div class="join-sec-sub">
<span>이메일</span>
</div>
<div class="email-sec">
<div>
<input type="text" name="email_id" id="email_id" v-model="email_id">
</div>
<div>@</div>
<div>
<input type="text" name="email_dns" id="email_dns" v-model="email_dns">
</div>
<div>
<select name="email_sel" id="email_sel">
<option value="">직접 입력</option>
<option value="naver.com">naver</option>
<option value="hanmail.net">daum</option>
<option value="gmail.com">google</option>
</select>
</div>
</div>
</section>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------->
<div class="join-w1400">
<section class="join-email-bt">
<input type="checkbox">
<span>E-mail 구독서비스를 신청하시겠습니까?</span>
</section>
<section class="join-end-bt">
<button>이전</button>
<button @click="commonFileInsert">회원가입</button>
</section>
</div>
</div>
<!-- 회원가입 완료 모달 -->
<div class="joinmodal" v-if="isVisible">
<section class="join-modal-a">
<div>
<h1>회원가입 안내</h1>
</div>
<div>
<p>회원가입이 완료되었습니다.
승인 결과는 작성해주신 이메일로 발송될 예정입니다.
회원가입 승인 전까지 특정 서비스는 이용하실 수 없으며,
승인 이후 모든 서비스를 이용하실 수 있습니다.
또한, 해당 기업은 같은 기업명으로 중복 계정 생성이 불가합니다.
</p>
</div>
<div>
<button @click="hideDiv">확인</button>
</div>
</section>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
company:{
company_id:null,
company_nm:null,
company_info:null,
file_id:null,
},
user:{
user_id:null,
user_pw:null,
user_eml:null,
user_auth:null,
},
file:null,
keyword:{
},
logo_img:null,
business_card_img:null,
company_profile:null,
//기업 ID 중복 확인
companyIdCheck_boolean:null,
//사용자 ID 중복 확인
userIdCheck_boolean:null,
//PW 확인
pwCheck:null,
passwordCheckFlag:null,
email_id:null,
email_dns:null,
select_email_dns:null,
selectedMembership: 'one',
isVisible: false,
}
},
methods: {
//비밀번호 매칭 확인
passwordSyncCheck: function () {
console.log("this.user.user_pw : ", this.user.user_pw);
console.log("this.pwCheck : ", this.pwCheck);
if (this.user.user_pw != this.pwCheck) this.passwordCheckFlag = false;
else this.passwordCheckFlag = true;
},
//company ID 중복 검사
companyIdCheck: function() {
const vm = this;
axios({
url: '/company/companySelectOne.json',
method: 'post',
herders: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.company
}).then( function (response) {
// console.log("idCheck - response : ", response.data);
if(response.data != null) {
alert("중복된 사업자등록번호 입니다.");
vm.companyIdCheck_boolean = false;
return false;
} else {
alert("사용가능한 사업자등록번호 입니다.");
vm.companyIdCheck_boolean = true;
return true;
}
}).catch( function (error) {
console.log("companyIdCheck - error : ", error);
alert("중복검사 오류, 다시 시도해주세요.");
});
},
//user ID 중복 검사
userIdCheck: function() {
const vm = this;
axios({
url: '/user/userSelectOne.json',
method: 'post',
herders: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.user
}).then( function (response) {
// console.log("idCheck - response : ", response.data);
if(response.data != null) {
alert("중복된 ID 입니다.");
vm.userIdCheck_boolean = false;
return false;
} else {
alert("사용가능한 ID 입니다.");
vm.userIdCheck_boolean = true;
return true;
}
}).catch( function (error) {
console.log("userIdCheck - error : ", error);
alert("중복검사 오류, 다시 시도해주세요.");
});
},
userInsert: function () {
const vm = this;
axios({
url: "/user/userInsert.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.user,
}).then(function (response) {
console.log("userInsert - response: ", response.data);
vm.isVisible = true;
vm.loginPage();
}).catch(function (error) {
console.log("userInsert - error : ", error);
});
},
//회원가입 등록
companyInsert: function () {
const vm = this;
axios({
url: "/company/companyInsert.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.company,
}).then(function (response) {
console.log("companyInsert - response: ", response.data);
vm.userInsert();
}).catch(function (error) {
console.log("companyInsert - error : ", error);
});
},
joinInsert:function(){
if(this.selectedMembership=="one"){
this.companyInsert();
}
else{
this.userInsert();
}
},
//file 등록
commonFileInsert: function () {
const vm = this;
//this.post를 문자열로 변경 후, 바이너리 형태로 변형한 다음, FormData에 담을 필요 없음
//vm.formData.append('params', new Blob([JSON.stringify(this.post)],{type: 'application/json'}));
//문자열로만 변경한 후, FormData에 담기
vm.file.append('params', JSON.stringify(this.company));
// if (this.joinInsertCheck()) {
// return;
// };
axios({
url: "/commonFile/commonFileInsert.file",
method: "post",
headers: {
"Content-Type": "multipart/form-data; charset=UTF-8",
},
data: vm.file,
}).then(function (response) {
console.log("commonFileInsert - response : ", response.data);
vm.company["file_id"] = response.data;
console.log("ok check : ");
// vm.joinInsert();
}).catch(function (error) {
console.log("commonFileInsert - error : ", error);
});
},
//로고 이미지 등록
logoUpload: function (e) {
const vm = this;
for (const file of e.target.files) {
vm.file.append('logo_img', file);
var reader = new FileReader();
reader.onload = function (e) {
var output = document.getElementById("logoImg");
output.src = reader.result;
};
reader.readAsDataURL(file);
}
},
//명함 이미지 등록
businessCardUpload: function (e) {
const vm = this;
for (const file of e.target.files) {
vm.file.append('business_card_img', file);
var reader = new FileReader();
reader.onload = function (e) {
var output = document.getElementById("businessCardImg");
output.src = reader.result;
};
reader.readAsDataURL(file);
}
},
companyProfileUpload: function (e) {
const vm = this;
for (const file of e.target.files) {
vm.file.append('company_profile', file);
}
},
// companyProfileUpload: function (e) {
// const vm = this;
// vm.company_profile = new FormData()
// for (const file of e.target.files) {
// vm.company_profile.append('company_profile', file);
// }
// },
//유효성 검사
joinInsertCheck: function () {
if (COMMON_UTIL.isEmpty(this.post["main_number"]) == true) {
alert("구간을 선택해주세요");
// this.$refs["main_number"].focus();
return true;
}
if (COMMON_UTIL.isEmpty(this.post["sub_number"]) == true) {
alert("구간번호를 입력해주세요");
// this.$refs["sub_number"].focus();
return true;
}
if (COMMON_UTIL.isEmpty(this.post["season"]) == true) {
alert("계절을 선택해주세요");
// this.$refs["season"].focus();
return true;
}
// if(COMMON_UTIL.isEmpty(this.post["main_number"])==true){
// alert("항공뷰 ID를 입력해주세요");
// this.$refs["main_number"].focus();
// }
},
showDiv: function () {
this.isVisible = true;
},
hideDiv: function () {
this.isVisible = false;
}
},
watch: {
"email_id":function(){
this.user["user_eml"]=this.email_id+"@"+this.email_dns;
},
"email_dns":function(){
this.user["user_eml"]=this.email_id+"@"+this.email_dns;
},
"select_email_dns":function(){
this.user["user_eml"]=this.email_id+"@"+this.select_email_dns;
},
},
computed: {
},
mounted() {
console.log('Join mounted');
this.file = new FormData()
}
}
</script>
<style scoped>
/* 모달 */
.joinmodal {
width: 100%;
height: 100%;
background-color: #33333324;
margin: 0 auto;
text-align: center;
padding: 3rem;
position: fixed;
top: 0;
left: 0;
}
.join-modal-a {
position: fixed;
top: 50%;
left: 50%;
padding: 4rem;
border-radius: 2rem;
background-color: #f9f9f9;
transform: translate(-50%, -50%);
/* margin: 0 auto; */
box-shadow: 2px 2px 5px #86868644;
width: 25%;
}
.join-modal-a h1 {
font-size: 2rem;
padding: 3rem 0 0 0;
}
.join-modal-a p {
width: 85%;
margin: 0 auto;
font-size: 1.5rem;
padding: 3rem;
text-align: left;
}
.join-modal-a button {
width: 20%;
background-color: #3f87f7;
border-radius: 1.5rem;
color: white;
font-family: "Pretendard-Regular";
}
/* ----------------------------------- */
.join-b {
width: 100%;
/* border: 1px solid red; */
}
.join-logo {
padding: 6rem;
}
.login-info p {
color: rgb(255, 0, 0);
padding: 0 1rem;
font-size: 1.5rem;
}
.join-logo h1 {
font-family: SBaggroM;
color: #0e0077;
font-size: 4rem;
}
.join-b-button {
width: 50%;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
gap: 6rem;
flex-direction: row;
/* padding: 9rem; */
}
.join-b-button input[type="radio"] {
display: none;
}
.join-b-button button {
height: 20rem;
display: grid;
grid-template-columns: 1fr;
border-radius: 2rem;
text-align: center;
box-shadow: 2px 2px 5px #86868644;
/* padding: 1rem; */
}
.join-b-button button p {
padding: 3rem 0 0;
/* padding: 3rem 0rem 1rem 3rem; */
font-size: 3rem;
font-family: SBaggroM;
color: #014099;
}
.join-b-button button img {
width: 200px;
height: 100px;
text-align: center;
margin: 0 auto;
/* border: 1px solid red; */
background-position: center;
}
.background {
background-color: #000000;
}
.join-b-button button:nth-child(1).background {
background-color: #000000;
}
.light {
z-index: 1;
background-color: #ff0000;
}
.join-b-button button:nth-child(2) {
background-color: #e6fff1;
}
.join-b-button button:nth-child(2) img {
width: 100px;
}
.join-b-button button:nth-child(2) p {
color: #0e5e2e;
}
.radio-t {
padding: 3rem;
height: 25rem;
font-size: 3rem;
border-radius: 2rem;
font-family: SBaggroM;
margin: 0 auto;
box-shadow: 2px 2px 5px #33333330;
text-align: center;
}
.t1 {
padding: 6rem 0;
color: #014099;
background-color: #e2ecfc;
}
.t1 img {
padding: 1rem;
width: 90%;
margin: 0 auto;
}
.t2 img {
padding: 1rem;
width: 50%;
margin: 0 auto;
}
.t2 {
padding: 6rem 0;
color: #0e5e2e;
background-color: #e6fff1;
}
/* 공통요소-------------------------------------------------------------------------*/
hr {
margin: 1rem 0 3rem 0;
border: 1px solid #cbcbcb;
}
section div span {
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* float: left; */
color: #3f87f7;
padding: 1rem 1rem 1rem 5rem;
}
section div span span {
padding: 0rem;
color: #a6a6a6;
}
section div input {
width: 100%;
padding: 1rem;
border: 1px solid #cbcbcb;
color: #cbcbcb;
border-radius: 0.5rem;
}
section div button {
width: 100%;
padding: 1rem;
cursor: pointer;
border-radius: 0.5rem;
}
section div select {
width: 100%;
padding: 1rem;
border: 1px solid #cbcbcb;
border-radius: 0.5rem;
color: #6b6b6b;
font-family: "Pretendard-Regular";
}
/* -------------------------------------------------------------------------------- */
.login-info,
.login-info2 {
width: 50%;
margin: 0 auto;
}
.login-info2 {
display: block;
}
.login-info2.Chacked {
display: none;
}
.login-info h3,
.login-info2 h3 {
color: #0e0077;
font-size: 2rem;
font-family: "Pretendard-Regular";
padding: 3rem 1rem 1rem 1rem;
}
.joinsub0 {
padding: 1rem;
display: grid;
grid-template-columns: 200px 2fr 1fr;
gap: 1rem;
}
.j-s-3 {
display: grid;
grid-template-rows: 30rem;
}
.j-s-3 input {
height: 100%;
}
.join-sec1 button {
font-size: 1.5rem;
color: white;
font-family: "Pretendard-Regular";
background-color: #3f87f7;
}
.joinsub {
padding: 1rem;
display: grid;
grid-template-columns: 200px 2fr;
gap: 1rem;
}
.join-sec6 {
padding: 1rem;
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}
.join-sec6 div:nth-child(3) {
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.login-info-grid {
display: grid;
grid-template-columns: 100px 1fr;
}
.join-sec0 {
display: grid;
padding: 2rem;
grid-row: 1 / span 3;
}
.join-sec0 div p {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
color: #333;
font-size: 2.5rem;
font-family: "Pretendard-Regular";
background-color: #b5b5b5;
/* border: 1px solid red; */
box-shadow: 2px 2px 5px #33333328;
}
.joinsub0-1 {
padding: 1rem;
display: grid;
grid-template-columns: 200px 2fr;
}
.join-w1400 {
width: 50%;
margin: 0 auto;
}
.join-email-bt {
font-size: 1.6rem;
padding: 3rem 3rem 3rem 0rem;
}
.join-email-bt input[type=checkbox] {
margin: 1rem;
/* border: 1px solid red; */
transform: scale(1.5);
}
.join-email-bt span {
color: #898989;
font-family: "Pretendard-Regular";
}
.join-end-bt {
display: grid;
grid-template-columns: 25% 73%;
gap: 1rem;
padding: 6rem 0rem 6rem 0rem;
}
.join-end-bt button {
padding: 2rem;
cursor: pointer;
border-radius: 1.2rem;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.join-end-bt button:nth-child(2) {
background-color: #3f87f7;
color: white;
}
.login-info2 {
width: 50%;
}
.email-sec {
display: grid;
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
@media all and (max-width:479px) {
.join-logo h1 {
font-size: 3rem;
}
.join-b {
/* border: 1px solid red; */
width: 100%;
}
.join-b-button {
padding: 2rem;
gap: 2rem;
width: 100%;
}
.login-info {
width: 90%;
}
.login-info2 {
width: 90%;
}
hr {
display: none;
}
.joinsub0 {
grid-template-columns: 1fr;
}
.joinsub {
grid-template-columns: 1fr;
}
.join-sec6 {
grid-template-columns: 1fr;
}
.login-info-grid {
grid-template-columns: 1fr;
}
.join-sec0 {
place-items: center;
}
.joinsub0-1 {
grid-template-columns: 1fr;
}
.j-s-3 input {
height: 100%;
}
.join-w1400 {
width: 100%;
padding: 1rem;
}
.login-info h3,
.login-info2 h3 {
font-size: 1.8rem;
text-align: center;
}
section div {}
section div input {
width: 100%;
/* border: 1px solid red; */
}
.join-email-bt {
text-align: center;
}
.email-sec {
display: grid;
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
.join-sec-sub {
margin: 0 auto;
}
.join-sec-1 span br {
display: none;
}
.j-s-3 {
display: grid;
gap: 0;
height: 50rem;
grid-template-rows: 4rem;
}
}
@media all and (min-width: 479px) and (max-width: 767px) {
.join-logo h1 {
font-size: 2.2rem;
}
.login-info,
.login-info2 {
width: 100%;
padding: 1rem;
}
.join-b-button {
padding: 4rem;
/* gap: 1rem; */
width: 100%;
}
.login-info {
width: 100%;
}
.joinsub0 {
grid-template-columns: 1fr;
}
.joinsub {
grid-template-columns: 1fr;
}
.join-sec6 {
grid-template-columns: 1fr;
}
.login-info-grid {
grid-template-columns: 1fr;
}
.join-sec0 {
place-items: center;
}
.joinsub0-1 {
grid-template-columns: 1fr;
}
.j-s-3 input {
height: 100%;
}
.join-w1400 {
width: 100%;
padding: 1rem;
}
.login-info h3,
.login-info2 h3 {
font-size: 1.8rem;
text-align: center;
}
section div {}
section div input {
width: 100%;
/* border: 1px solid red; */
}
.join-email-bt {
text-align: center;
}
.email-sec {
display: grid;
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
.join-sec-sub {
margin: 0 auto;
}
.join-sec-1 span br {
display: none;
}
.j-s-3 {
display: grid;
gap: 0;
height: 50rem;
grid-template-rows: 4rem;
}
}
@media all and (min-width: 767px) and (max-width: 1023px) {
.join-b-button {
width: 80%;
}
.login-info {
width: 80%;
padding: 3rem 0;
}
.email-sec {
width: 100%;
display: grid;
/* border: 1px solid red; */
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
.login-info2 {
width: 80%;
}
.join-w1400 {
width: 80%;
}
}
@media all and (min-width: 1023px) and (max-width: 1268px) {
.email-sec {
width: 100%;
display: grid;
/* border: 1px solid red; */
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
.login-info2 {
width: 50%;
}
}
</style>