fix

src/views/HomeRecommend.vue

@@ -1,12 +1,19 @@
 <template>
     <div class="homeRecommend_max">
 		<div class="header">
-			<div class="gallery_btn" @click="setLogin">Login</div>
+			<div class="gallery_btn login" @click="setLogin">Login</div>
 			<div class="gallery_btn white" @click="signUp">Sign up</div>
 		</div>
-		<img class="bg" src="@/assets/images/homePage/squareBg.png" alt="">
+		<img class="bg pc" src="@/assets/images/homePage/squareBg.png" alt="">
+		<img class="bg mobile" src="@/assets/images/homePage/squareBgMobile.png" alt="">
 		<div class="beForm">Developed by AiDLab<br />
 			Commercialized by Code-Create</div>
+		<div class="title">
+			<img src="@/assets/images/homePage/recommendtitleMobile.png" alt="">
+			<div class="text">
+				AI-based Interactive Design <br />Assistant for Fashion
+			</div>
+		</div>
 		<div class="learnMore">
 			<img src="@/assets/images/homePage/learnMore.png" alt="">
 			<!-- <div class="title">AiDA</div>
@@ -179,6 +186,10 @@ export default defineComponent({
 		position: relative;
 		z-index: 2;
 		margin-left: auto;
+		@media (max-width: 768px) {
+			padding: .7rem 1.4rem;
+			margin-left: auto;
+		}
 		> .gallery_btn{
 			margin-right: 2rem;
 			border: none;
@@ -190,7 +201,18 @@ export default defineComponent({
 			&:last-child{
 				margin-right: 0;
 			}
-
+			&.login{
+				@media (max-width: 768px) {
+					display: none;
+				}
+			}
+			@media (max-width: 768px) {
+				font-size: .72rem;
+				width: 5.2rem;
+				line-height: 2.4rem;
+				padding: 0;
+				
+			}
 		}
 		
 	}
@@ -202,12 +224,47 @@ export default defineComponent({
 		top: 50%;
 		transform: translate(-50%,-50%);
 		object-fit: cover;
+		display: none;
+		&.pc{
+			@media (min-width: 768px) {
+				display: block;
+			}
+		}
+		&.mobile{
+			@media (max-width: 768px) {
+				display: block;
+			}
+		}
+	}
+	> .title{
+		display: none;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		@media (max-width: 768px) {
+			> img{
+				width: 17rem;
+			}
+			font-size: 1.8rem;
+			color: #fff;
+			display: block;
+		}
 	}
 	> .beForm{
 		position: absolute;
 		font-size: 2.1rem;
 		bottom: 10rem;
 		left: 10rem;
+		@media (max-width: 768px) {
+			display: block;
+			left: 50%;
+			color: #fff;
+			bottom: 1rem;
+			font-size: .8rem;
+			text-align: center;
+			transform: translateX(-50%);
+		}
 	}
 	> .learnMore{
 		position: absolute;
@@ -219,7 +276,9 @@ export default defineComponent({
 		> img{
 			height: 19.5rem;
 			margin-bottom: 2rem;
+			display: none;
 		}
+		
 		// > .title{
 		// 	margin-bottom: .8rem;
 		// 	font-size: 11.8rem;

src/views/Register.vue

@@ -203,6 +203,7 @@ export default defineComponent({
 			@media (max-width: 768px) {
 				width: 5.2rem;
 				padding: 0;
+				display: none;
 			}
 			&.gallery_btn:nth-child(1){
 			    margin-right: 3rem;