Commit @c3a4e4bb4b6d4d8d8d438114a1a537fe231062fc

최정임 05-28

250528 최정임 사용자 메인 css수정

@c3a4e4bb4b6d4d8d8d438114a1a537fe231062fc

c3a4e4b

client/resources/css/common.css (added)

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

...	...	@@ -0,0 +1,12 @@
	1	+@charset "utf-8";
	2	+
	3	+.flex{display: flex; }
	4	+.justify-between{justify-content: space-between;}
	5	+.justify-start{justify-content: start;}
	6	+
	7	+.align-center{align-items: center;}
	8	+
	9	+
	10	+.mb20{margin-bottom: 2rem;}
	11	+.mb15{margin-bottom: 1.5rem;}
	12	+.mb30{margin-bottom: 3rem;}(파일 끝에 줄바꿈 문자 없음)

c3a4e4b

client/resources/css/header.css (added)

+++ client/resources/css/header.css

...	...	@@ -0,0 +1,162 @@
	1	+@charset "utf-8";
	2	+.logo {
	3	+ width: 150px;
	4	+}
	5	+.user-wrap {
	6	+ display: flex;
	7	+ flex-direction: column;
	8	+ min-height: 100vh;
	9	+ font-size: 1.7rem;
	10	+
	11	+}
	12	+
	13	+.user-wrap header {
	14	+ width: 100%;
	15	+ background-color: #fff;
	16	+ border-bottom: 1px solid #C6C6C6;
	17	+ position: relative;
	18	+ z-index: 2;
	19	+ margin-bottom: 3rem;
	20	+
	21	+}
	22	+
	23	+.user-wrap header.company-header {
	24	+ width: 100%;
	25	+ background-color: rgba(0, 0, 0, 0.5);
	26	+ position: absolute;
	27	+ z-index: 2;
	28	+ border-bottom: 1px solid #aaa;
	29	+}
	30	+.header-wrap{
	31	+ width: 1400px;
	32	+ margin: 0 auto;}
	33	+.company-sub-menu {
	34	+ background-color: rgba(0, 0, 0, 0.5)
	35	+}
	36	+
	37	+.company-sub-menu li>a,
	38	+.company-sub-menu li>p {
	39	+ border: 1px solid #fff;
	40	+ color: #fff;
	41	+}
	42	+
	43	+.msub-menu {
	44	+ display: none;
	45	+}
	46	+
	47	+.msub-menu li>a,
	48	+.msub-menu li>p {
	49	+ display: block;
	50	+ width: 100%;
	51	+ border: 0;
	52	+ padding: 1rem;
	53	+ font-size: 1.6rem;
	54	+ text-align: left;
	55	+}
	56	+
	57	+.msub-menu.show,
	58	+.sub-menu.show {
	59	+ display: block;
	60	+}
	61	+
	62	+.msub-menu.show {
	63	+ border-bottom: 1px solid #eee;
	64	+}
	65	+.main-menu{
	66	+ &:hover{
	67	+ &::before{
	68	+ content: '';
	69	+ position: absolute;
	70	+ display: block;
	71	+ top: 88px;
	72	+ left: 0;
	73	+ width: 100%;
	74	+ height: 150px;
	75	+ background: #fff;
	76	+ z-index: 1;
	77	+ }
	78	+ }
	79	+
	80	+}
	81	+.main-menu>li>a,
	82	+.main-menu>li>p {
	83	+ display: block;
	84	+ text-align: center;
	85	+ font-size: 1.8rem;
	86	+ font-weight: 700;
	87	+ height: 6rem;
	88	+ line-height: 6rem;
	89	+}
	90	+.main-menu > li {
	91	+ position: relative;
	92	+ min-width: 160px;
	93	+ &:hover {
	94	+ &::after {
	95	+ position: absolute;
	96	+ bottom: calc(var(--krds-spacer-4) * -1);
	97	+ left: 50%;
	98	+ bottom: 0;
	99	+ content: "";
	100	+ transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
	101	+ width: 0;
	102	+ height: 0.4rem;
	103	+ background-color: var(--green);
	104	+ transform: translateX(-50%);
	105	+ }
	106	+ }
	107	+
	108	+ &:hover::after {
	109	+ width: 100%;
	110	+ }
	111	+}
	112	+header.company-header .main-menu>li>a,
	113	+header.company-header .main-menu>li>p {
	114	+ color: var(--white);
	115	+}
	116	+
	117	+
	118	+
	119	+.main-menu>li:hover>a,
	120	+.main-menu>li:hover>p,
	121	+.user-wrap header.company-header .main-menu>li:hover>a,
	122	+.user-wrap header.company-header .main-menu>li:hover>p {
	123	+ color: var(--green);
	124	+}
	125	+
	126	+.pc-menu{
	127	+
	128	+}
	129	+
	130	+.sub-menu {
	131	+ width: 100%;
	132	+ height: 150px;
	133	+ position: absolute;
	134	+ background-color: #fff;
	135	+ min-width: 160px;
	136	+ z-index: 1;
	137	+ display: none;
	138	+ padding: 0 !important;
	139	+ left: 0;
	140	+ bottom: -2px;
	141	+ transform: translateY(100%);
	142	+}
	143	+
	144	+.sub-menu-inner{
	145	+ display: block;
	146	+ width: 100%;
	147	+}
	148	+
	149	+.sub-menu li>a,
	150	+.sub-menu li>p {
	151	+ display: block;
	152	+ width: 100%;
	153	+ border-radius: 0 10px 0 10px;
	154	+ padding: 1.3rem 0;
	155	+ font-size: 1.6rem;
	156	+ text-align: center;
	157	+ font-weight: 700;
	158	+ &:hover{
	159	+ color: var(--green);
	160	+ }
	161	+}
	162	+.mobile-menu{display: none;}(파일 끝에 줄바꿈 문자 없음)

c3a4e4b

client/resources/css/header_column.css (added)

+++ client/resources/css/header_column.css

...	...	@@ -0,0 +1,221 @@
	1	+@charset "utf-8";
	2	+.logo {
	3	+ width: 150px;
	4	+ height: 80px;
	5	+}
	6	+.user-wrap {
	7	+ display: flex;
	8	+ justify-content: space-between;
	9	+ min-height: 100vh;
	10	+ font-size: 1.7rem;
	11	+}
	12	+
	13	+.user-wrap header {
	14	+ width: 30rem;
	15	+ padding: 2rem 0 0 2rem;
	16	+ background-color: #fff;
	17	+ border-right: 1px solid #C6C6C6;
	18	+ position: fixed;
	19	+ top: 0;
	20	+ bottom: 0;
	21	+ z-index: 200;
	22	+ .header{
	23	+ display: block;
	24	+ }
	25	+}
	26	+.main-menu{display: block;
	27	+ &::before{
	28	+
	29	+ }
	30	+ &:hover{
	31	+ }
	32	+ > li{padding: 2rem 0; height: 6rem;}
	33	+}
	34	+
	35	+.main-menu>li>a,
	36	+.main-menu>li>p {
	37	+ display: block;
	38	+ font-size: 1.8rem;
	39	+ font-family: "yungju";
	40	+ text-align: left;
	41	+}
	42	+
	43	+header.company-header .main-menu>li>a,
	44	+header.company-header .main-menu>li>p {
	45	+ color: var(--white);
	46	+}
	47	+
	48	+.main-menu>li.active>a,
	49	+.main-menu>li.active>p {
	50	+ border-bottom: 2px solid var(--green);
	51	+ color: var(--green);
	52	+}
	53	+
	54	+.main-menu>li:hover>a,
	55	+.main-menu>li:hover>p,
	56	+.user-wrap header.company-header .main-menu>li:hover>a,
	57	+.user-wrap header.company-header .main-menu>li:hover>p {
	58	+ color: var(--green);
	59	+
	60	+}
	61	+
	62	+.sub-menu {
	63	+ position: absolute;
	64	+ background-color: #fff;
	65	+ min-width: 160px;
	66	+ height: 100%;
	67	+ z-index: 1;
	68	+ display: none;
	69	+ left: 30rem;
	70	+ top: 0;
	71	+ padding-top: 11rem;
	72	+}
	73	+
	74	+.sub-menu-inner{
	75	+ li{
	76	+ /* max-width: 25%; */
	77	+ padding-left: 10px;
	78	+ }
	79	+}
	80	+
	81	+.sub-menu li>a,
	82	+.sub-menu li>p {
	83	+ display: block;
	84	+ width: 100%;
	85	+ border-radius: 0 10px 0 10px;
	86	+ padding: 1rem;
	87	+ font-size: 1.6rem;
	88	+ text-align: left;
	89	+ font-weight: 600;
	90	+ &:hover{
	91	+ color: var(--green);
	92	+ }
	93	+}
	94	+
	95	+
	96	+.company-sub-menu {
	97	+ background-color: rgba(0, 0, 0, 0.5)
	98	+}
	99	+
	100	+.company-sub-menu li>a,
	101	+.company-sub-menu li>p {
	102	+ border: 1px solid #fff;
	103	+ color: #fff;
	104	+}
	105	+
	106	+.msub-menu {
	107	+ display: none;
	108	+}
	109	+
	110	+.msub-menu li>a,
	111	+.msub-menu li>p {
	112	+ display: block;
	113	+ width: 100%;
	114	+ border: 0;
	115	+ padding: 1rem;
	116	+ font-size: 1.6rem;
	117	+ text-align: left;
	118	+}
	119	+
	120	+.msub-menu.show,
	121	+.sub-menu.show {
	122	+ display: block;
	123	+}
	124	+
	125	+.msub-menu.show {
	126	+ border-bottom: 1px solid #eee;
	127	+}
	128	+.sub-sub-menu{
	129	+ padding: 0;
	130	+}
	131	+.sub-sub-menu>li{
	132	+ padding: 0;
	133	+ p{
	134	+ padding: 1rem 0 1rem 2rem;
	135	+ font-weight: 500;
	136	+ }
	137	+}
	138	+.sub-sub-menu>li>a {
	139	+ display: block;
	140	+ width: 100%;
	141	+ font-size: 1.6rem;
	142	+ text-align: center;
	143	+}
	144	+
	145	+.sub-menu>li>a:hover,
	146	+.sub-sub-menu>li>a:hover {
	147	+ background-color: var(--sky-green);
	148	+}
	149	+
	150	+/*
	151	+.user-wrap nav ul.main-menu li{
	152	+ position: relative;
	153	+}
	154	+.user-wrap ul.main-menu > li{
	155	+ padding: 2rem 3.5rem;
	156	+}
	157	+.user-wrap ul.main-menu > li > a,
	158	+.user-wrap ul.main-menu > li > p{
	159	+ display: block;
	160	+ font-size: 1.8rem;
	161	+ font-family: "yungju";
	162	+
	163	+}
	164	+
	165	+.user-wrap ul.main-menu > li > p.active {
	166	+ border-bottom: 3px solid var(--green);
	167	+ color: var(--green);
	168	+}
	169	+
	170	+
	171	+.user-wrap nav ul.sub-menu {
	172	+ overflow: hidden;
	173	+ position: absolute;
	174	+ width: 100%;
	175	+ background-color: #fff;
	176	+ z-index: 4;
	177	+ bottom: -2px;
	178	+ left: 0;
	179	+ transform: translateY(100%);
	180	+ transition: max-height 1.8s ease-in-out, opacity 0.5s ease-in-out;
	181	+}
	182	+
	183	+.user-wrap nav ul.sub-menu li a {
	184	+ display: block;
	185	+ text-align: center;
	186	+ font-size: 1.6rem;
	187	+ padding: 5px 0;
	188	+}
	189	+
	190	+.navbg {
	191	+ overflow: hidden;
	192	+ background-color: #fff;
	193	+ border-bottom: 1px solid var(--sky-green);
	194	+ box-shadow: 0 5px 10px var(--light);
	195	+ position: absolute;
	196	+ bottom: 0;
	197	+ left: 0;
	198	+ transform: translateY(100%);
	199	+ width: 100%;
	200	+ z-index: 3;
	201	+ transition: height 0.6s ease-in-out;
	202	+} */
	203	+
	204	+/* 메인 */
	205	+
	206	+.user-wrap .main-warp {
	207	+ flex-grow: 1;
	208	+ margin-left: 16rem;
	209	+ margin-top: 3rem;
	210	+}
	211	+.user-info-wrap{margin-right: 2rem;}
	212	+
	213	+.page {
	214	+ width: 100%;
	215	+ height: 100vh;
	216	+}
	217	+
	218	+.content-page {
	219	+ width: 100%;
	220	+ height: calc(100% - 66px);
	221	+}(파일 끝에 줄바꿈 문자 없음)

c4a3378

c3a4e4b

client/resources/scss/common/base/_reset.scss

--- client/resources/scss/common/base/_reset.scss

+++ client/resources/scss/common/base/_reset.scss


 	word-break: keep-all;
 	word-wrap: break-word;
 	-webkit-tap-highlight-color : transparent;
-	overflow: hidden;
+	// overflow: hidden;
 
 	// scroll-behavior: smooth;
 }

 
 #root {
 	width: 100%;
-	height: 100%;
+	// height: 100%;
 }
 
 *:focus {

 	min-width: 100%;
 }
 img {
-	max-width: 100%;
+	// max-width: 100%;
 	vertical-align: top;
 }
 ul,

c4a3378

c3a4e4b

client/views/index.html

--- client/views/index.html

+++ client/views/index.html


   <!-- 공통css -->
   <link rel="stylesheet" href="/client/resources/lib/swiper/swiper-bundle.min.css">
   <link rel="stylesheet" href="/client/build/assets/css/app.css">
+  <link rel="stylesheet" href="/client/resources/css/header.css">
+  <link rel="stylesheet" href="/client/resources/css/common.css">
+  <!-- <link rel="stylesheet" href="/client/resources/css/header_column.css"> -->
+  <link rel="stylesheet" href="/client/views/themes/tema_v2/css/component.css">
+  <link rel="stylesheet" href="/client/views/themes/tema_v2/css/main.css">
+  <link rel="stylesheet" href="/client/views/themes/tema_v2/css/style.css">
  
   <!-- 스크립트 -->
   <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

c4a3378

c3a4e4b

client/views/layout/UserHeader.vue

--- client/views/layout/UserHeader.vue

+++ client/views/layout/UserHeader.vue


           <!-- <p class="white detail-text">문의전화</p> -->
           <p>☎ 054)639-6161~3</p>
         </div>
-        <div class="user-info mobile-menu">
+        <UserMenu />
+        <div class="user-info ">
           <div class="flex align-center">
             <button class="user-name cursor" @click="fnLink">
               {{ mbrNm }}님

             <button v-else class="logout-btn" @click="fnlogin">로그인</button>
           </div>
         </div>
-        <UserMenu />
         <!-- <div class="flex justify-end align-center user-info-wrap">
 
           <div class="user-info pc-menu">

c4a3378

c3a4e4b

client/views/pages/user/portal/main/Main.vue

--- client/views/pages/user/portal/main/Main.vue

+++ client/views/pages/user/portal/main/Main.vue

...	...	@@ -15,89 +15,79 @@
15	15	<div class="swiper-button-prev button"></div>
16	16	<div class="swiper-button-next button"></div>
17	17	</div>
18		- <div class="gd-4 pr0 ">
19		-
20		- <!-- 검색창 -->
21		- <div class="community-zone mb20">
22		- <div class="box-out-title flex justify-between align-center">
23		-
24		- </div>
25		- <div class="search-bar text-ct" tabindex="0">
26		- <div class="box">
27		- <p>통합검색</p>
28		- <div class="bar"></div>
29		- <input type="text" class="search-input" placeholder="검색어를 입력하세요." v-model="search.searchText"
30		- @keyup.enter="totalSearch" />
31		- <button class="icon-button search-button" @click="totalSearch">
32		- <svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
	18	+ <!-- 검색창 -->
	19	+ <div class="search-top-box">
	20	+ <div class="sch-form-wrap">
	21	+ <div class="sch-input">
	22	+ <input type="text" id="keyword_search" class="form-control" placeholder="키워드 입력" title="키워드 입력">
	23	+ <button type="button" class=" btn-ico ico-sch btn-exec">
	24	+ <span class="sr-only">검색</span>
33	25	</button>
34	26	</div>
35	27	</div>
36	28	</div>
37		- <div class="">
38		-
39		- <div class="box-out-title flex justify-between align-center">
40		- <p>공지사항(목록형)</p>
41		- <router-link to="/portal/BBS_MNG_000000000000027/list.page" class=" flex align-center">
42		- <p class="mr5">바로가기</p>
43		- <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
44		- </router-link>
	29	+
	30	+ </div>
	31	+
	32	+ <div class="mb30">
	33	+
	34	+ <div class="box-out-title flex justify-between align-center">
	35	+ <p>공지사항(목록형)</p>
	36	+ <router-link to="/portal/BBS_MNG_000000000000027/list.page" class=" flex align-center">
	37	+ <p class="mr5">바로가기</p>
	38	+ <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
	39	+ </router-link>
	40	+ </div>
	41	+ <div class="box">
	42	+ <div class="tab-nav mb15">
	43	+ <ul class="flex align-center" style="gap: 30px;">
	44	+ <li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
	45	+ ' ': true,
	46	+ activeTab: activeTab === item.cd,
	47	+ }" @click="showTab(item.cd)">
	48	+ <p>{{ item.cdNm }}</p>
	49	+ </li>
	50	+ </ul>
45	51	</div>
46		- <div class="box">
47		- <div class="tab-nav mb15">
48		- <ul class="flex align-center" style="gap: 30px;">
49		- <li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
50		- ' ': true,
51		- activeTab: activeTab === item.cd,
52		- }" @click="showTab(item.cd)">
53		- <p>{{ item.cdNm }}</p>
54		- </li>
55		- </ul>
56		- </div>
57		- <div class="tab-content">
58		- <div>
59		- <div class="list_news flex justify-between" style="gap: 20px;">
60		- <ul>
61		- <li class="leli">
62		- <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
63		- <span>2025.01.08</span>
64		- </li>
65		- <li class="leli">
66		- <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
67		- <span>2025.01.08</span>
68		- </li>
69		- <li class="leli">
70		- <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
71		- <span>2025.01.08</span>
72		- </li>
73		- </ul>
74		- <ul>
75		- <li class="leli">
76		- <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
77		- <span>2025.01.08</span>
78		- </li>
79		- <li class="leli">
80		- <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
81		- <span>2025.01.08</span>
82		- </li>
83		- <li class="leli">
84		- <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
85		- <span>2025.01.08</span>
86		- </li>
87		- </ul>
88		- </div>
	52	+ <div class="tab-content">
	53	+ <div>
	54	+ <div class="list_news flex justify-between" style="gap: 20px;">
	55	+ <ul>
	56	+ <li class="leli">
	57	+ <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
	58	+ <span>2025.01.08</span>
	59	+ </li>
	60	+ <li class="leli">
	61	+ <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
	62	+ <span>2025.01.08</span>
	63	+ </li>
	64	+ <li class="leli">
	65	+ <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
	66	+ <span>2025.01.08</span>
	67	+ </li>
	68	+ </ul>
	69	+ <ul>
	70	+ <li class="leli">
	71	+ <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
	72	+ <span>2025.01.08</span>
	73	+ </li>
	74	+ <li class="leli">
	75	+ <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
	76	+ <span>2025.01.08</span>
	77	+ </li>
	78	+ <li class="leli">
	79	+ <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
	80	+ <span>2025.01.08</span>
	81	+ </li>
	82	+ </ul>
89	83	</div>
90	84	</div>
91		-
92	85	</div>
	86	+
93	87	</div>
94		-
95	88	</div>
96		-
97		-
98		- </div>
99	89	<!-- 바로가기 -->
100		- <div class="community-zone mb20">
	90	+ <div class="community-zone mb30">
101	91	<div class="box-out-title flex justify-between align-center">
102	92	<p>바로가기</p>
103	93	</div>

c4a3378

c3a4e4b

client/views/themes/tema_v2/css/component.css

--- client/views/themes/tema_v2/css/component.css

+++ client/views/themes/tema_v2/css/component.css


 
 /* box */
 .content {
-    width: 100%;
-    height: 100%;
+    width: 1400px;
+    margin: 0 auto;
 }
 
 .row {

     
   }
   li.swiper-slide{height: 383px;}
-  .swiper-slide{height: 296px;}
+  .swiper-slide{height: 296px; }
   .swiper-slide img {
     width: 100%;
     height: 100%;
     background-color: #aaa;
     text-align: center;
   }
+ .community-zone{position: relative; overflow: hidden;
+    .search-top-box{
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        top: 50%;
+        z-index: 100;
+    }
+} 
 .visual-zone {
-    position: relative;
+    background-color: aliceblue;
+    height: 25rem;
     .button {
       font-size: 0;
       border: none;

       z-index: 1;
 
     }
-    .swiper-slide{height: 100%;}
+    .swiper-slide{height: 100%;
+    }
     /* 이전 버튼 (prev) */
     .swiper-button-prev {
         left: 20x;

   
     /* 다음 버튼 (next) */
     .swiper-button-next {
-        right: 20px;
+        right: 10px;
       &::after {
         content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
         background-image: url(../img/next.svg);

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,8 +2,8 @@
2	2
3	3	/* box */
4	4	.content {
5		- width: 100%;
6		- height: 100%;
	5	+ width: 1400px;
	6	+ margin: 0 auto;
7	7	}
8	8
9	9	.row {
...	...	@@ -926,15 +926,25 @@
926	926
927	927	}
928	928	li.swiper-slide{height: 383px;}
929		- .swiper-slide{height: 296px;}
	929	+ .swiper-slide{height: 296px; }
930	930	.swiper-slide img {
931	931	width: 100%;
932	932	height: 100%;
933	933	background-color: #aaa;
934	934	text-align: center;
935	935	}
	936	+ .community-zone{position: relative; overflow: hidden;
	937	+ .search-top-box{
	938	+ position: absolute;
	939	+ left: 50%;
	940	+ transform: translateX(-50%) translateY(-50%);
	941	+ top: 50%;
	942	+ z-index: 100;
	943	+ }
	944	+}
936	945	.visual-zone {
937		- position: relative;
	946	+ background-color: aliceblue;
	947	+ height: 25rem;
938	948	.button {
939	949	font-size: 0;
940	950	border: none;
...	...	@@ -951,7 +961,8 @@
951	961	z-index: 1;
952	962
953	963	}
954		- .swiper-slide{height: 100%;}
	964	+ .swiper-slide{height: 100%;
	965	+ }
955	966	/* 이전 버튼 (prev) */
956	967	.swiper-button-prev {
957	968	left: 20x;
...	...	@@ -971,7 +982,7 @@
971	982
972	983	/* 다음 버튼 (next) */
973	984	.swiper-button-next {
974		- right: 20px;
	985	+ right: 10px;
975	986	&::after {
976	987	content: ''; /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
977	988	background-image: url(../img/next.svg);

...	...	@@ -9,7 +9,7 @@
9	9	word-break: keep-all;
10	10	word-wrap: break-word;
11	11	-webkit-tap-highlight-color : transparent;
12		- overflow: hidden;
	12	+ // overflow: hidden;
13	13
14	14	// scroll-behavior: smooth;
15	15	}
...	...	@@ -23,7 +23,7 @@
23	23
24	24	#root {
25	25	width: 100%;
26		- height: 100%;
	26	+ // height: 100%;
27	27	}
28	28
29	29	*:focus {
...	...	@@ -130,7 +130,7 @@
130	130	min-width: 100%;
131	131	}
132	132	img {
133		- max-width: 100%;
	133	+ // max-width: 100%;
134	134	vertical-align: top;
135	135	}
136	136	ul,

...	...	@@ -11,6 +11,12 @@
11	11	<!-- 공통css -->
12	12	<link rel="stylesheet" href="/client/resources/lib/swiper/swiper-bundle.min.css">
13	13	<link rel="stylesheet" href="/client/build/assets/css/app.css">
	14	+ <link rel="stylesheet" href="/client/resources/css/header.css">
	15	+ <link rel="stylesheet" href="/client/resources/css/common.css">
	16	+ <!-- <link rel="stylesheet" href="/client/resources/css/header_column.css"> -->
	17	+ <link rel="stylesheet" href="/client/views/themes/tema_v2/css/component.css">
	18	+ <link rel="stylesheet" href="/client/views/themes/tema_v2/css/main.css">
	19	+ <link rel="stylesheet" href="/client/views/themes/tema_v2/css/style.css">
14	20
15	21	<!-- 스크립트 -->
16	22	<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

...	...	@@ -12,7 +12,8 @@
12	12	<!-- <p class="white detail-text">문의전화</p> -->
13	13	<p>☎ 054)639-6161~3</p>
14	14	</div>
15		- <div class="user-info mobile-menu">
	15	+ <UserMenu />
	16	+ <div class="user-info ">
16	17	<div class="flex align-center">
17	18	<button class="user-name cursor" @click="fnLink">
18	19	{{ mbrNm }}님
...	...	@@ -21,7 +22,6 @@
21	22	<button v-else class="logout-btn" @click="fnlogin">로그인</button>
22	23	</div>
23	24	</div>
24		- <UserMenu />
25	25	<!-- <div class="flex justify-end align-center user-info-wrap">
26	26
27	27	<div class="user-info pc-menu">

Delete comment