Commit @fa84e1e779b57309de1aaa198b963c1c70e26ff4

kimgkdud898 2023-10-26

231026김하영 통합지원센터란 레이아웃

@fa84e1e779b57309de1aaa198b963c1c70e26ff4

1ff73b9

fa84e1e

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


 .mat-span span {
   background-color: #d4d4d4;
   color: rgb(90, 90, 90);
-  padding: 1rem 2rem 1rem 2rem;
+  padding: 1rem 1.5rem 1rem 1.5rem;
   margin: 0.2rem;
   border-radius: 0.5rem;
   font-size: 1.3rem;

fa84e1e

client/resources/jpg/intro.png (Binary) (added)

+++ client/resources/jpg/intro.png

Binary file is not shown

1ff73b9

fa84e1e

client/views/layout/Menu.vue

--- client/views/layout/Menu.vue

+++ client/views/layout/Menu.vue

...	...	@@ -56,9 +56,9 @@
56	56	menuItems: [
57	57	{
58	58	text: "통합지원센터 소개",
59		- link: "/",
	59	+ link: "/Introduction.page",
60	60	subMenu: [
61		- { text: "통합지원센터란?", link: "" },
	61	+ { text: "통합지원센터란?", link: "/Introduction.page" },
62	62	{ text: "협력 기업", link: "" }
63	63	]
64	64	},

1ff73b9

fa84e1e

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import Data from "../pages/Data/Data.vue";
 import Login from "../pages/login/Login.vue";
 import Join from "../pages/Join/Join.vue";
+import Introduction from "../pages/introduction/Introduction.vue";
 
 const routes = [
   /* 메인화면 */

   { path: "/Matching.page", name: "Matching", component: Matching },
   { path: "/Login.page", name: "Login", component: Login },
   { path: "/Join.page", name: "Join", component: Join },
+  { path: "/Introduction.page", name: "Introduction", component: Introduction },
 ];
 
 const AppRouter = createRouter({

fa84e1e

client/views/pages/introduction/Introduction.vue (added)

+++ client/views/pages/introduction/Introduction.vue

...	...	@@ -0,0 +1,59 @@
	1	+<template>
	2	+ <div class="w1400">
	3	+ <div class="intro">
	4	+ <section class="intro-logo">
	5	+ <h1>통합지원센터란?</h1>
	6	+ <hr>
	7	+ </section>
	8	+
	9	+ <section class="intro-img">
	10	+ <div>
	11	+ <img src="../../../resources/jpg/intro.png" alt="">
	12	+ </div>
	13	+ </section>
	14	+ </div>
	15	+ </div>
	16	+</template>
	17	+
	18	+<script>
	19	+export default {
	20	+ data() {
	21	+ return {
	22	+ }
	23	+ },
	24	+ methods: {
	25	+
	26	+ },
	27	+ watch: {
	28	+
	29	+ },
	30	+ computed: {
	31	+
	32	+ },
	33	+ mounted() {
	34	+ console.log('Login mounted');
	35	+ }
	36	+}
	37	+</script>
	38	+
	39	+<style scoped>
	40	+.intro {
	41	+ width: 100%;
	42	+ padding: 6rem;
	43	+}
	44	+
	45	+.intro-logo {
	46	+ width: 100%;
	47	+ padding: 6rem 2rem;
	48	+
	49	+}
	50	+
	51	+.intro-logo h1 {
	52	+ font-size: 3rem;
	53	+ font-family: SBaggroM;
	54	+ font-weight: 500;
	55	+ color: #2c407f;
	56	+}
	57	+</style>
	58	+
	59	+

1ff73b9

fa84e1e

client/views/pages/join/Join.vue

--- client/views/pages/join/Join.vue

+++ client/views/pages/join/Join.vue


         <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' ? 'gray' : '#e2ecfc'}">기관회원
+                <label for="one" class="radio-t t1"
+                    :style="{ backgroundColor: selectedMembership === 'one' ? 'gray' : '#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' ? 'gray' : '#e2ecfc'}">일반회원
+                <label for="two" class="radio-t t2"
+                    :style="{ backgroundColor: selectedMembership === 'two' ? 'gray' : '#e2ecfc' }">일반회원
                     <img src="../../../resources/jpg/join-bt.png" alt=""></label>
 
             </div>

                     </div>
                     <div class="email-sec">
 
-                    <div>
-                        <input type="text" name="email_id" id="email_id">
-                    </div>
-                    <div>@</div>
-                    <div>
-                        <input type="text" name="email_dns" id="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>
+                            <input type="text" name="email_id" id="email_id">
+                        </div>
+                        <div>@</div>
+                        <div>
+                            <input type="text" name="email_dns" id="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>

                         </section>
                     </div>
                 </div>
-    
+
 
             </div>
         </div>

                     </div>
                     <div class="email-sec">
 
-                    <div>
-                        <input type="text" name="email_id" id="email_id">
-                    </div>
-                    <div>@</div>
-                    <div>
-                        <input type="text" name="email_dns" id="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>
+                            <input type="text" name="email_id" id="email_id">
+                        </div>
+                        <div>@</div>
+                        <div>
+                            <input type="text" name="email_dns" id="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>

 
 
 }
-.login-info2{
+
+.login-info2 {
     width: 50%;
 }
 
-.email-sec{
+.email-sec {
     display: grid;
-    
+
     grid-template-columns: 1fr 30px 1fr 1fr;
 }
-.email-sec div{
+
+.email-sec div {
     /* padding: 2rem; */
     padding: 1rem 0;
     font-size: 1.5rem;

     text-align: center;
     gap: 1rem;
 }
-.email-sec div:nth-child(2){
+
+.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: 1rem;
-   gap: 1rem;
-   width: 100%;
-  }
-.login-info{
-    width: 100%;
-}
-hr{
-    display: none;
-}
+@media all and (max-width:479px) {
+    .join-logo h1 {
+        font-size: 3rem;
+    }
 
-.joinsub0{
-    grid-template-columns: 1fr;
-}
-.joinsub{
+    .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;
+    .join-sec6 {
 
-}
-.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;
-}
+        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{
+    .join-logo h1 {
         font-size: 2.2rem;
     }
 
-    .login-info, .login-info2{
+    .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{
+    .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;
+    .join-sec6 {
 
-}
-.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;
-}
+        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%;
+    .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%;
+    }
 }
-.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%;
-}
+
+@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>

1ff73b9

fa84e1e

client/views/pages/matching/Matching.vue

--- client/views/pages/matching/Matching.vue

+++ client/views/pages/matching/Matching.vue

...	...	@@ -380,4 +380,12 @@
380	380	console.log('Matching mounted');
381	381	}
382	382	}
383		-</script> (No newline at end of file)
	383	+</script>
	384	+
	385	+<style scoped>
	386	+@media all and (max-width:479px) {
	387	+ .mat-span span {
	388	+ padding: 1rem 1.5rem 1rem 1.5rem;
	389	+ }
	390	+}
	391	+</style> (No newline at end of file)

Add a comment

Open 0
Closed 0

List

...	...	@@ -30,7 +30,7 @@
30	30	.mat-span span {
31	31	background-color: #d4d4d4;
32	32	color: rgb(90, 90, 90);
33		- padding: 1rem 2rem 1rem 2rem;
	33	+ padding: 1rem 1.5rem 1rem 1.5rem;
34	34	margin: 0.2rem;
35	35	border-radius: 0.5rem;
36	36	font-size: 1.3rem;

...	...	@@ -5,6 +5,7 @@
5	5	import Data from "../pages/Data/Data.vue";
6	6	import Login from "../pages/login/Login.vue";
7	7	import Join from "../pages/Join/Join.vue";
	8	+import Introduction from "../pages/introduction/Introduction.vue";
8	9
9	10	const routes = [
10	11	/* 메인화면 */
...	...	@@ -13,6 +14,7 @@
13	14	{ path: "/Matching.page", name: "Matching", component: Matching },
14	15	{ path: "/Login.page", name: "Login", component: Login },
15	16	{ path: "/Join.page", name: "Join", component: Join },
	17	+ { path: "/Introduction.page", name: "Introduction", component: Introduction },
16	18	];
17	19
18	20	const AppRouter = createRouter({

...	...	@@ -6,10 +6,12 @@
6	6	<section class="join-b">
7	7	<div class="join-b-button">
8	8	<input type="radio" id="one" v-model="selectedMembership" value="one">
9		- <label for="one" class="radio-t t1" :style="{backgroundColor: selectedMembership === 'one' ? 'gray' : '#e2ecfc'}">기관회원
	9	+ <label for="one" class="radio-t t1"
	10	+ :style="{ backgroundColor: selectedMembership === 'one' ? 'gray' : '#e2ecfc' }">기관회원
10	11	<img src="../../../resources/jpg/join-bt2.png" alt=""></label>
11	12	<input type="radio" id="two" v-model="selectedMembership" value="two">
12		- <label for="two" class="radio-t t2" :style="{backgroundColor: selectedMembership === 'two' ? 'gray' : '#e2ecfc'}">일반회원
	13	+ <label for="two" class="radio-t t2"
	14	+ :style="{ backgroundColor: selectedMembership === 'two' ? 'gray' : '#e2ecfc' }">일반회원
13	15	<img src="../../../resources/jpg/join-bt.png" alt=""></label>
14	16
15	17	</div>
...	...	@@ -86,21 +88,21 @@
86	88	</div>
87	89	<div class="email-sec">
88	90
89		- <div>
90		- <input type="text" name="email_id" id="email_id">
91		- </div>
92		- <div>@</div>
93		- <div>
94		- <input type="text" name="email_dns" id="email_dns">
95		- </div>
96		- <div>
97		- <select name="email_sel" id="email_sel">
98		- <option value="">직접 입력</option>
99		- <option value="naver.com">naver</option>
100		- <option value="hanmail.net">daum</option>
101		- <option value="gmail.com">google</option>
102		- </select>
103		- </div>
	91	+ <div>
	92	+ <input type="text" name="email_id" id="email_id">
	93	+ </div>
	94	+ <div>@</div>
	95	+ <div>
	96	+ <input type="text" name="email_dns" id="email_dns">
	97	+ </div>
	98	+ <div>
	99	+ <select name="email_sel" id="email_sel">
	100	+ <option value="">직접 입력</option>
	101	+ <option value="naver.com">naver</option>
	102	+ <option value="hanmail.net">daum</option>
	103	+ <option value="gmail.com">google</option>
	104	+ </select>
	105	+ </div>
104	106	</div>
105	107
106	108	</section>
...	...	@@ -166,7 +168,7 @@
166	168	</section>
167	169	</div>
168	170	</div>
169		-
	171	+
170	172
171	173	</div>
172	174	</div>
...	...	@@ -242,21 +244,21 @@
242	244	</div>
243	245	<div class="email-sec">
244	246
245		- <div>
246		- <input type="text" name="email_id" id="email_id">
247		- </div>
248		- <div>@</div>
249		- <div>
250		- <input type="text" name="email_dns" id="email_dns">
251		- </div>
252		- <div>
253		- <select name="email_sel" id="email_sel">
254		- <option value="">직접 입력</option>
255		- <option value="naver.com">naver</option>
256		- <option value="hanmail.net">daum</option>
257		- <option value="gmail.com">google</option>
258		- </select>
259		- </div>
	247	+ <div>
	248	+ <input type="text" name="email_id" id="email_id">
	249	+ </div>
	250	+ <div>@</div>
	251	+ <div>
	252	+ <input type="text" name="email_dns" id="email_dns">
	253	+ </div>
	254	+ <div>
	255	+ <select name="email_sel" id="email_sel">
	256	+ <option value="">직접 입력</option>
	257	+ <option value="naver.com">naver</option>
	258	+ <option value="hanmail.net">daum</option>
	259	+ <option value="gmail.com">google</option>
	260	+ </select>
	261	+ </div>
260	262	</div>
261	263
262	264	</section>
...	...	@@ -629,16 +631,18 @@
629	631
630	632
631	633	}
632		-.login-info2{
	634	+
	635	+.login-info2 {
633	636	width: 50%;
634	637	}
635	638
636		-.email-sec{
	639	+.email-sec {
637	640	display: grid;
638		-
	641	+
639	642	grid-template-columns: 1fr 30px 1fr 1fr;
640	643	}
641		-.email-sec div{
	644	+
	645	+.email-sec div {
642	646	/* padding: 2rem; */
643	647	padding: 1rem 0;
644	648	font-size: 1.5rem;
...	...	@@ -647,257 +651,313 @@
647	651	text-align: center;
648	652	gap: 1rem;
649	653	}
650		-.email-sec div:nth-child(2){
	654	+
	655	+.email-sec div:nth-child(2) {
651	656	padding: 2rem 0;
652	657	}
653	658
654	659
655	660
656	661
657		-@media all and (max-width:479px){
658		-.join-logo h1{
659		- font-size: 3rem;
660		-}
661		-
662		- .join-b{
663		- /* border: 1px solid red; */
664		- width: 100%;
665		- }
666		- .join-b-button{
667		- padding: 1rem;
668		- gap: 1rem;
669		- width: 100%;
670		- }
671		-.login-info{
672		- width: 100%;
673		-}
674		-hr{
675		- display: none;
676		-}
	662	+@media all and (max-width:479px) {
	663	+ .join-logo h1 {
	664	+ font-size: 3rem;
	665	+ }
677	666
678		-.joinsub0{
679		- grid-template-columns: 1fr;
680		-}
681		-.joinsub{
	667	+ .join-b {
	668	+ /* border: 1px solid red; */
	669	+ width: 100%;
	670	+ }
	671	+
	672	+
	673	+
	674	+ .join-b-button {
	675	+ padding: 2rem;
	676	+ gap: 2rem;
	677	+ width: 100%;
	678	+ }
	679	+
	680	+ .login-info {
	681	+ width: 90%;
	682	+ }
	683	+
	684	+ .login-info2 {
	685	+ width: 90%;
	686	+ }
	687	+
	688	+ hr {
	689	+ display: none;
	690	+ }
	691	+
	692	+ .joinsub0 {
	693	+ grid-template-columns: 1fr;
	694	+ }
	695	+
	696	+ .joinsub {
682	697	grid-template-columns: 1fr;
683	698
684		-}
685		-.join-sec6{
	699	+ }
686	700
687		- grid-template-columns: 1fr;
	701	+ .join-sec6 {
688	702
689		-}
690		-.login-info-grid{
691		- grid-template-columns: 1fr;
692		-}
693		-.join-sec0{
694		- place-items: center;
695		-}
696		-.joinsub0-1{
697		- grid-template-columns: 1fr;
698		-
699		-}
700		-.j-s-3 input{
701		- height: 100%;
702		-}
703		-.join-w1400{
704		- width: 100%;
705		- padding: 1rem;
706		-}
707		-.login-info h3, .login-info2 h3{
708		- font-size:1.8rem ;
709		- text-align: center;
710		-}
711		-section div{
712		-
713		-}
714		-section div input{
715		- width: 100%;
716		- /* border: 1px solid red; */
717		-}
718		-.join-email-bt{
719		- text-align: center;
720		-}
721		-.email-sec{
722		- display: grid;
723		-
724		- grid-template-columns: 1fr 30px 1fr 1fr;
725		-}
726		-.email-sec div{
727		- /* padding: 2rem; */
728		- padding: 1rem 0;
729		- font-size: 1.5rem;
730		- font-family: "Pretendard-Regular";
731		- /* border: 1px solid red; */
732		- text-align: center;
733		- gap: 1rem;
734		-}
735		-.email-sec div:nth-child(2){
736		- padding: 2rem 0;
737		-}
738		-.join-sec-sub{
739		- margin: 0 auto;
740		-}
741		-.join-sec-1 span br{
742		- display: none;
743		-}
744		-.j-s-3{
745		- display: grid;
746		- gap: 0;
747		- height: 50rem;
748		- grid-template-rows: 4rem;
749		-}
	703	+ grid-template-columns: 1fr;
	704	+
	705	+ }
	706	+
	707	+ .login-info-grid {
	708	+ grid-template-columns: 1fr;
	709	+ }
	710	+
	711	+ .join-sec0 {
	712	+ place-items: center;
	713	+ }
	714	+
	715	+ .joinsub0-1 {
	716	+ grid-template-columns: 1fr;
	717	+
	718	+ }
	719	+
	720	+ .j-s-3 input {
	721	+ height: 100%;
	722	+ }
	723	+
	724	+ .join-w1400 {
	725	+ width: 100%;
	726	+ padding: 1rem;
	727	+ }
	728	+
	729	+ .login-info h3,
	730	+ .login-info2 h3 {
	731	+ font-size: 1.8rem;
	732	+ text-align: center;
	733	+ }
	734	+
	735	+ section div {}
	736	+
	737	+ section div input {
	738	+ width: 100%;
	739	+ /* border: 1px solid red; */
	740	+ }
	741	+
	742	+ .join-email-bt {
	743	+ text-align: center;
	744	+ }
	745	+
	746	+ .email-sec {
	747	+ display: grid;
	748	+
	749	+ grid-template-columns: 1fr 30px 1fr 1fr;
	750	+ }
	751	+
	752	+ .email-sec div {
	753	+ /* padding: 2rem; */
	754	+ padding: 1rem 0;
	755	+ font-size: 1.5rem;
	756	+ font-family: "Pretendard-Regular";
	757	+ /* border: 1px solid red; */
	758	+ text-align: center;
	759	+ gap: 1rem;
	760	+ }
	761	+
	762	+ .email-sec div:nth-child(2) {
	763	+ padding: 2rem 0;
	764	+ }
	765	+
	766	+ .join-sec-sub {
	767	+ margin: 0 auto;
	768	+ }
	769	+
	770	+ .join-sec-1 span br {
	771	+ display: none;
	772	+ }
	773	+
	774	+ .j-s-3 {
	775	+ display: grid;
	776	+ gap: 0;
	777	+ height: 50rem;
	778	+ grid-template-rows: 4rem;
	779	+ }
	780	+
750	781
751	782	}
752	783
753	784	@media all and (min-width: 479px) and (max-width: 767px) {
754		- .join-logo h1{
	785	+ .join-logo h1 {
755	786	font-size: 2.2rem;
756	787	}
757	788
758		- .login-info, .login-info2{
	789	+ .login-info,
	790	+ .login-info2 {
759	791	width: 100%;
760	792	padding: 1rem;
761	793	}
762		- .join-b-button{
763		- padding: 4rem;
764		- /* gap: 1rem; */
765		- width: 100%;
766		- }
767		-.login-info{
768		- width: 100%;
769		-}
770	794
771		-.joinsub0{
772		- grid-template-columns: 1fr;
773		-}
774		-.joinsub{
	795	+ .join-b-button {
	796	+ padding: 4rem;
	797	+ /* gap: 1rem; */
	798	+ width: 100%;
	799	+ }
	800	+
	801	+ .login-info {
	802	+ width: 100%;
	803	+ }
	804	+
	805	+ .joinsub0 {
	806	+ grid-template-columns: 1fr;
	807	+ }
	808	+
	809	+ .joinsub {
775	810	grid-template-columns: 1fr;
776	811
777		-}
778		-.join-sec6{
	812	+ }
779	813
780		- grid-template-columns: 1fr;
	814	+ .join-sec6 {
781	815
782		-}
783		-.login-info-grid{
784		- grid-template-columns: 1fr;
785		-}
786		-.join-sec0{
787		- place-items: center;
788		-}
789		-.joinsub0-1{
790		- grid-template-columns: 1fr;
791		-
792		-}
793		-.j-s-3 input{
794		- height: 100%;
795		-}
796		-.join-w1400{
797		- width: 100%;
798		- padding: 1rem;
799		-}
800		-.login-info h3, .login-info2 h3{
801		- font-size:1.8rem ;
802		- text-align: center;
803		-}
804		-section div{
805		-
806		-}
807		-section div input{
808		- width: 100%;
809		- /* border: 1px solid red; */
810		-}
811		-.join-email-bt{
812		- text-align: center;
813		-}
814		-.email-sec{
815		- display: grid;
816		-
817		- grid-template-columns: 1fr 30px 1fr 1fr;
818		-}
819		-.email-sec div{
820		- /* padding: 2rem; */
821		- padding: 1rem 0;
822		- font-size: 1.5rem;
823		- font-family: "Pretendard-Regular";
824		- /* border: 1px solid red; */
825		- text-align: center;
826		- gap: 1rem;
827		-}
828		-.email-sec div:nth-child(2){
829		- padding: 2rem 0;
830		-}
831		-.join-sec-sub{
832		- margin: 0 auto;
833		-}
834		-.join-sec-1 span br{
835		- display: none;
836		-}
837		-.j-s-3{
838		- display: grid;
839		- gap: 0;
840		- height: 50rem;
841		- grid-template-rows: 4rem;
842		-}
	816	+ grid-template-columns: 1fr;
	817	+
	818	+ }
	819	+
	820	+ .login-info-grid {
	821	+ grid-template-columns: 1fr;
	822	+ }
	823	+
	824	+ .join-sec0 {
	825	+ place-items: center;
	826	+ }
	827	+
	828	+ .joinsub0-1 {
	829	+ grid-template-columns: 1fr;
	830	+
	831	+ }
	832	+
	833	+ .j-s-3 input {
	834	+ height: 100%;
	835	+ }
	836	+
	837	+ .join-w1400 {
	838	+ width: 100%;
	839	+ padding: 1rem;
	840	+ }
	841	+
	842	+ .login-info h3,
	843	+ .login-info2 h3 {
	844	+ font-size: 1.8rem;
	845	+ text-align: center;
	846	+ }
	847	+
	848	+ section div {}
	849	+
	850	+ section div input {
	851	+ width: 100%;
	852	+ /* border: 1px solid red; */
	853	+ }
	854	+
	855	+ .join-email-bt {
	856	+ text-align: center;
	857	+ }
	858	+
	859	+ .email-sec {
	860	+ display: grid;
	861	+
	862	+ grid-template-columns: 1fr 30px 1fr 1fr;
	863	+ }
	864	+
	865	+ .email-sec div {
	866	+ /* padding: 2rem; */
	867	+ padding: 1rem 0;
	868	+ font-size: 1.5rem;
	869	+ font-family: "Pretendard-Regular";
	870	+ /* border: 1px solid red; */
	871	+ text-align: center;
	872	+ gap: 1rem;
	873	+ }
	874	+
	875	+ .email-sec div:nth-child(2) {
	876	+ padding: 2rem 0;
	877	+ }
	878	+
	879	+ .join-sec-sub {
	880	+ margin: 0 auto;
	881	+ }
	882	+
	883	+ .join-sec-1 span br {
	884	+ display: none;
	885	+ }
	886	+
	887	+ .j-s-3 {
	888	+ display: grid;
	889	+ gap: 0;
	890	+ height: 50rem;
	891	+ grid-template-rows: 4rem;
	892	+ }
843	893	}
844	894
845	895	@media all and (min-width: 767px) and (max-width: 1023px) {
846		-.join-b-button{
847		- width: 80%;
	896	+ .join-b-button {
	897	+ width: 80%;
	898	+ }
	899	+
	900	+ .login-info {
	901	+ width: 80%;
	902	+ padding: 3rem 0;
	903	+ }
	904	+
	905	+ .email-sec {
	906	+ width: 100%;
	907	+ display: grid;
	908	+ /* border: 1px solid red; */
	909	+
	910	+ grid-template-columns: 1fr 30px 1fr 1fr;
	911	+ }
	912	+
	913	+ .email-sec div {
	914	+ /* padding: 2rem; */
	915	+ padding: 1rem 0;
	916	+ font-size: 1.5rem;
	917	+ font-family: "Pretendard-Regular";
	918	+ /* border: 1px solid red; */
	919	+ text-align: center;
	920	+ gap: 1rem;
	921	+ }
	922	+
	923	+ .email-sec div:nth-child(2) {
	924	+ padding: 2rem 0;
	925	+ }
	926	+
	927	+ .login-info2 {
	928	+ width: 80%;
	929	+ }
	930	+
	931	+ .join-w1400 {
	932	+ width: 80%;
	933	+ }
848	934	}
849		-.login-info{
850		- width: 80%;
851		- padding: 3rem 0;
852		-}
853		-.email-sec{
854		- width: 100%;
855		- display: grid;
856		- /* border: 1px solid red; */
857		-
858		- grid-template-columns: 1fr 30px 1fr 1fr;
859		-}
860		-.email-sec div{
861		- /* padding: 2rem; */
862		- padding: 1rem 0;
863		- font-size: 1.5rem;
864		- font-family: "Pretendard-Regular";
865		- /* border: 1px solid red; */
866		- text-align: center;
867		- gap: 1rem;
868		-}
869		-.email-sec div:nth-child(2){
870		- padding: 2rem 0;
871		-}
872		-.login-info2{
873		- width: 80%;
874		-}
875		-.join-w1400{
876		- width: 80%;
877		-}
878		-}
879		-@media all and (min-width: 1023px) and (max-width: 1268px){
880		-.email-sec{
881		- width: 100%;
882		- display: grid;
883		- /* border: 1px solid red; */
884		-
885		- grid-template-columns: 1fr 30px 1fr 1fr;
886		-}
887		-.email-sec div{
888		- /* padding: 2rem; */
889		- padding: 1rem 0;
890		- font-size: 1.5rem;
891		- font-family: "Pretendard-Regular";
892		- /* border: 1px solid red; */
893		- text-align: center;
894		- gap: 1rem;
895		-}
896		-.email-sec div:nth-child(2){
897		- padding: 2rem 0;
898		-}
899		-.login-info2{
900		- width: 50%;
901		-}
	935	+
	936	+@media all and (min-width: 1023px) and (max-width: 1268px) {
	937	+ .email-sec {
	938	+ width: 100%;
	939	+ display: grid;
	940	+ /* border: 1px solid red; */
	941	+
	942	+ grid-template-columns: 1fr 30px 1fr 1fr;
	943	+ }
	944	+
	945	+ .email-sec div {
	946	+ /* padding: 2rem; */
	947	+ padding: 1rem 0;
	948	+ font-size: 1.5rem;
	949	+ font-family: "Pretendard-Regular";
	950	+ /* border: 1px solid red; */
	951	+ text-align: center;
	952	+ gap: 1rem;
	953	+ }
	954	+
	955	+ .email-sec div:nth-child(2) {
	956	+ padding: 2rem 0;
	957	+ }
	958	+
	959	+ .login-info2 {
	960	+ width: 50%;
	961	+ }
902	962	}
903	963	</style> (No newline at end of file)

Delete comment