Commit @d468db628d2382a78043d0a4bbc0dd31ef48acc2

kimgkdud898 2023-11-03

231103김하영

@d468db628d2382a78043d0a4bbc0dd31ef48acc2

799ba68

client/resources/css/Data.css (deleted)

--- client/resources/css/Data.css

...	...	@@ -1,203 +0,0 @@
	1	-@charset "utf-8";
	2	-.data-main {
	3	- width: 100%;
	4	-}
	5	-
	6	-.data-b {
	7	- width: 100%;
	8	-}
	9	-.data-b-b {
	10	- width: 100%;
	11	- padding: 6rem;
	12	- font-size: 4rem;
	13	- color: #0e0077;
	14	-
	15	- font-family: SBaggroM;
	16	-}
	17	-.data-text img {
	18	- width: 80px;
	19	-}
	20	-.data-text p {
	21	- position: relative;
	22	-}
	23	-.data-text p::before {
	24	- content: "";
	25	- position: absolute;
	26	- top: -30px;
	27	- background-size: 60px 30px;
	28	- background-image: url("../jpg/tdata-img-text.png");
	29	- width: 60px;
	30	- height: 30px;
	31	-}
	32	-
	33	-.data-b-main {
	34	- width: 100%;
	35	-}
	36	-
	37	-.data-b-grid {
	38	- width: 100%;
	39	- padding: 3rem;
	40	- display: grid;
	41	- grid-template-columns: 1fr 1fr 1fr;
	42	-}
	43	-
	44	-.data-table {
	45	- width: 100%;
	46	-}
	47	-.da1 {
	48	- width: 80%;
	49	- height: 40rem;
	50	- margin: 0 auto;
	51	- display: grid;
	52	- grid-template-columns: 1fr;
	53	- align-content: start;
	54	-}
	55	-.da1 h2 {
	56	- font-family: SBaggroM;
	57	- font-weight: 500;
	58	- font-size: 2rem;
	59	-}
	60	-.da1 h2 span {
	61	- font-size: 4rem;
	62	-}
	63	-.data-b-1 {
	64	- /* background-color: #007aff; */
	65	- background: url(../jpg/data-img.png) no-repeat center center;
	66	- background-size: cover;
	67	- position: relative;
	68	- text-align: center;
	69	- /* border-radius: 2rem; */
	70	-}
	71	-.data-b-1 h2 {
	72	- text-align: left;
	73	- padding: 3rem;
	74	- color: #014099;
	75	-}
	76	-.data-b-1 p {
	77	- font-size: 2rem;
	78	- padding: 3rem;
	79	- padding-top: 5rem;
	80	- width: 100%;
	81	- font-family: SBaggroM;
	82	- font-weight: 400;
	83	- text-align: left;
	84	- color: #014099;
	85	- cursor: pointer;
	86	-}
	87	-
	88	-.data-b-1::after {
	89	- position: absolute;
	90	- content: "";
	91	- width: 90px;
	92	- height: 90px;
	93	- right: -90px;
	94	- top: 40%;
	95	-
	96	- background-color: #e2ecfc;
	97	- border-radius: 45px;
	98	- transform: translateX(-50%);
	99	- z-index: -1;
	100	-}
	101	-.data-b-2 {
	102	- background: url(../jpg/data-img3.png) no-repeat center center;
	103	- background-size: cover;
	104	- position: relative;
	105	- text-align: center;
	106	- cursor: pointer;
	107	-}
	108	-.data-b-2 h2 {
	109	- text-align: center;
	110	- padding: 3rem;
	111	- color: #0e5e2e;
	112	-}
	113	-.data-b-2 p {
	114	- font-size: 2rem;
	115	- padding: 3rem;
	116	-
	117	- padding-top: 5rem;
	118	- font-family: SBaggroM;
	119	- text-align: center;
	120	- color: #1a8445;
	121	-}
	122	-.data-b-2 p span {
	123	- font-size: 3.5rem;
	124	- color: #0e5e2e;
	125	-}
	126	-
	127	-.data-b-3 {
	128	- background: url(../jpg/data-img2.png) no-repeat center center;
	129	- background-size: cover;
	130	- position: relative;
	131	- text-align: center;
	132	- cursor: pointer;
	133	-
	134	- /* border: 1px solid red; */
	135	-}
	136	-.data-b-3::after {
	137	- position: absolute;
	138	- content: "";
	139	- width: 90px;
	140	- height: 90px;
	141	- left: 0px;
	142	- top: 40%;
	143	-
	144	- background-color: #f8e7cd;
	145	- border-radius: 45px;
	146	- transform: translateX(-50%);
	147	- z-index: -1;
	148	-}
	149	-
	150	-.data-b-3 h2 {
	151	- text-align: right;
	152	- padding: 3rem;
	153	- color: #c26400;
	154	-}
	155	-
	156	-.data-b-3 p {
	157	- font-size: 2rem;
	158	- padding: 3rem;
	159	- padding-top: 5rem;
	160	- width: 100%;
	161	-
	162	- font-family: SBaggroM;
	163	- text-align: right;
	164	- color: #e07e27;
	165	-}
	166	-.data-b-3 p span {
	167	- font-size: 3.5rem;
	168	- color: #c26400;
	169	-}
	170	-
	171	-
	172	-.data-table-tr {
	173	- padding: 12rem 6.5rem;
	174	-}
	175	-.data-table-tr th {
	176	- font-size: 1.5rem;
	177	- background-color: #007aff;
	178	- color: white;
	179	- padding: 1.1rem;
	180	- font-family: "Pretendard-Regular";
	181	-}
	182	-.data-table-tr td {
	183	- background-color: white;
	184	- padding: 2rem;
	185	- border-top: 1px solid rgb(187, 187, 187);
	186	- text-align: center;
	187	- font-size: 1.5rem;
	188	- font-weight: 500;
	189	- color: #333;
	190	- cursor: pointer;
	191	- font-family: "Pretendard-Regular";
	192	-}
	193	-.data-table-tr td:nth-child(2) {
	194	- text-align: left;
	195	-}
	196	-
	197	-
	198	-
	199	-.input:focus,
	200	-.input:focus-visible {
	201	- border-color: #3898ec;
	202	- outline: none;
	203	-}

799ba68

d468db6

client/resources/css/Main.css

--- client/resources/css/Main.css

+++ client/resources/css/Main.css


-@charset "utf-8";
+/* 메인 CSS */
 
 table {
   width: 100%;

 }
 
 /* 메뉴 */
-.sub-nav,
-.toggle {
-  opacity: 0;
-}
-.header-wrap {
-  display: flex;
-  justify-content: space-between;
-  box-shadow: 2px 2px 2px #33333300;
-
-  align-items: center;
-  position: relative;
-  flex-wrap: wrap;
-}
-
-.sub-menu {
-  flex: 0 0 72%;
-}
-
-.sub-menu ul {
-  display: flex;
-  justify-content: end;
-}
-.sub-menu ul li a {
-  display: block;
-  color: #2c407f;
-  line-height: 40px;
-  margin-left: 50px;
-  font-size: 1.5rem;
-  text-align: right;
-  font-weight: 600;
-}
 
 /* 메인 */
 .main-box {
   width: 100%;
   background: linear-gradient(#425fed, #5dadf6);
 }
+
 .main-box-wrap {
-  padding: 5rem;
+  padding: 5rem 0;
   display: grid;
   grid-template-columns: 0.8fr 1fr;
 }
+
 .main-text {
   color: white;
 }
+
 .main-text p {
   width: 45rem;
   font-family: SBaggroM;

   font-size: 3rem;
   line-height: 200%;
 }
+
 .main-text span {
   font-size: 5.7rem;
   font-weight: 300 !important;
   text-shadow: 2px 2px 2px #33333382;
 }
+
 .main-benner {
   flex: 0 0 60%;
   height: 338px;

   background-size: cover;
   box-shadow: 2px 2px 4px #33333382;
 }
+
 .main-notice {
   grid-column: 1/3;
   padding: 0 0 5rem;
 }
+
 .main-notice h2 {
   font-size: 1.8rem;
   color: white;
   padding: 1rem;
 }
+
 .main-notice h2 i {
   margin-right: 1rem;
 }
+
 .main-notice ul {
   border-radius: 0.5rem;
   border: 1px solid white;
   background-color: #00000034;
   padding: 0.5rem 2rem;
 }
+
 .main-notice ul li {
   color: white;
   font-size: 1.5rem;
   padding: 0.5rem;
 }
+
 .main-notice ul li:nth-child(1) {
   border-bottom: 1px dotted white;
 }

   height: 100%;
   padding: 60px;
 }
+
 .main-puzzle-container {
   margin: 0 auto;
   display: grid;
   overflow: visible;
   grid-template-columns: 1fr 1fr 1fr;
 }
+
 .main-puzzle-container > div:nth-child(4) {
   position: relative;
 }
+
 .main-puzzle-container > div:nth-child(4)::after {
   position: absolute;
   content: "";

   transform: translateX(-50%);
   z-index: -1;
 }
+
 .main-grid-name {
   width: 100%;
   height: 7rem;

   background-size: cover;
   position: relative;
 }
+
 .main-grid-name::after {
   position: absolute;
   content: "";

 }
 
 .main-grid-name h3 {
-  width: 100%;
+  width: 77%;
   height: 7rem;
   padding-left: 1rem;
   line-height: 7rem;

 .m-p-table {
   overflow: hidden;
 }
+
 .m-p-table td {
   padding: 1rem;
   font-size: 1.6rem;

   font-family: "Pretendard-Regular";
   font-weight: 700;
 }
+
 .m-p-table td p {
   font-size: 1.4rem;
   padding-top: 1rem;

   background-size: 123px 123px;
   margin: 0 auto;
 }
+
 .main-wrap-grid-2 button,
 .main-wrap-grid-3 button,
 .main-wrap-grid-4 button,

   width: 100%;
   padding-bottom: 2.8rem;
 }
+
 .main-wrap-grid-4 div img {
   width: 110px !important;
   text-align: center;

 .main-wrap-grid-1 div img,
 .main-wrap-grid-2 div img,
 /* .m-p-c-4 d/iv jpg, */
-.main-wrap-grid-3 div img ,
+.main-wrap-grid-3 div img,
 .main-wrap-grid-5 div img {
   width: 80px !important;
   text-align: center;

   background: url(../jpg/m3.png) no-repeat center right;
   background-size: cover;
 }
+
 .main-wrap-grid-4 {
   background: url(../jpg/m4.png) no-repeat;
 }
+
 .main-wrap-grid-5 {
   background: url(../jpg/main-pu2.png) no-repeat center center;
   background-size: cover;

   background: url(../jpg/123.png) no-repeat center center;
   background-size: cover;
 }
+
 .mmain-wrap-news {
   width: 100%;
   height: 100%;
   padding: 30px;
 }
+
 .main-wrap-news-hidden {
   width: 100%;
   margin: 0 auto;
 }
+
 .main-wrap-news h3 {
   width: 100%;
   padding: 30px;

   padding: 3rem;
   background-color: #ededed;
 }
+
 .main-history-wrap {
   text-align: center;
 }
-.main-history-wrap h3,
+
 .main-history-wrap h1 {
   text-align: center;
   font-size: 3rem;
-  padding: 1rem;
+  padding: 5rem;
   font-family: SBaggroM;
-}
-.main-history-wrap h1 {
   color: #3f87f7;
 }
 

   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }
+
 .main-history-box div {
   height: 300px;
 }

   padding: 6rem;
   justify-content: center;
 }
+
 .main-history-box-1 div,
 .main-history-box-2 div,
 .main-history-box-3 div {
   width: 100%;
   height: 100%;
 }
+
 .main-history-box-1 div span,
 .main-history-box-2 div span,
 .main-history-box-3 div span {
   font-size: 1.8rem;
   font-family: "Pretendard-Regular";
 }
-.main-history-box-1 p:nth-child(2),
-.main-history-box-2 p:nth-child(2),
-.main-history-box-3 p:nth-child(2) {
+
+.main-history-box-1 p:nth-child(2) {
+  width: 10rem;
+  margin: 0 auto;
+  justify-content: center;
+
+  background: url(../jpg/m-h-g.png) no-repeat;
+  height: 10rem;
+  background-size: contain;
+}
+.main-history-box-2 p:nth-child(2) {
   width: 10rem;
   margin: 0 auto;
   justify-content: center;

   height: 10rem;
   background-size: contain;
 }
+
+.main-history-box-3 p:nth-child(2) {
+  width: 10rem;
+  margin: 0 auto;
+  justify-content: center;
+
+  background: url(../jpg/m-h-g-3.png) no-repeat;
+  height: 10rem;
+  background-size: contain;
+}
+
 .main-history-box-1 h3,
 .main-history-box-2 h3,
 .main-history-box-3 h3 {
   padding: 1rem;
-  font-size: 20px;
+  font-size: 1.7rem;
   font-family: "Pretendard-Regular";
 }
 

   width: 100%;
   height: 100%;
 }
+
 .main-partner-wrap {
   width: 100%;
   padding-top: 60px;
   margin: 0 auto;
   text-align: center;
 }
+
 .main-partner-wrap h3,
 .main-partner-wrap h1 {
   text-align: center;
   font-size: 3rem;
 }
+
 .main-partner-wrap h1 {
   font-family: SBaggroM;
 
   color: #3f87f7;
 }
+
 .main-partner-logo {
   width: 100%;
-  display: flex;
+  height: 100px;
+  padding: 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   flex-wrap: nowrap;
   justify-content: space-between;
 }
+
 .main-partner-img {
-  width: 20%;
-  height: 16rem;
-  padding: 1.5rem;
+  width: 100%;
+  justify-content: center;
 }
+
 .lo1 {
   background: url(../jpg/logo/ko-w.png) no-repeat;
+  background-size: 50%;
   background-position: center;
-  background-size: 40%;
 }
 .lo2 {
   background: url(../jpg/logo/keris.gif) no-repeat;
+  background-size: 50%;
   background-position: center;
-  background-size: 40%;
 }
 .lo3 {
   background: url(../jpg/logo/kefa.png) no-repeat;
+  background-size: 50%;
   background-position: center;
-  background-size: 40%;
 }
 .lo4 {
-  background: url(../jpg/logo/ko-go.png) no-repeat;
+  background: url(../jpg/logo/ko-go.jpg) no-repeat;
+  background-size: 50%;
   background-position: center;
-  background-size: 40%;
 }
 .lo5 {
   background: url(../jpg/logo/edutech.png) no-repeat;
+  background-size: 50%;
   background-position: center;
-  background-size: 40%;
 }
-/* 스와이퍼--------------------------------------- */
 
-/*--------------------------------------- */
+/* ------------------------------------------------------------------------------------------------------ */
+
+/* matching css */
+
+.matching-box-wrap {
+  width: 100%;
+  background: linear-gradient(#5dadf6, #2e87da, #5dadf6);
+}
+
+.matching-wrap {
+  padding: 30px 30px;
+  display: grid;
+  width: 100%;
+  /* border: 1px solid red; */
+  justify-content: center;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.matching-wrap div {
+  /* width: 40%; */
+  width: 100%;
+  /* border: 1px solid red; */
+}
+
+.matching-wrap img {
+  width: 100%;
+  margin: 0 auto;
+  /* text-align: center; */
+  justify-content: center;
+}
+
+.matching-text {
+  margin: 0 auto;
+  text-align: center;
+  font-size: 5rem;
+  /* padding-bottom: 50px; */
+  font-family: SBaggroM;
+  margin-top: 25%;
+  color: white;
+}
+
+.matching-box-wrap-one {
+  width: 100%;
+  height: 100%;
+  padding: 3rem;
+  margin: 0 auto;
+  text-align: center;
+  color: #3f87f7;
+  background-color: #e2e2e2;
+}
+
+.matching-box-grid > h3 {
+  font-size: 2.6rem;
+  padding: 3rem;
+  font-family: SBaggroM;
+}
+
+.matching-box-bos {
+  width: 100%;
+  place-items: center;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.matchingbox {
+  width: 90%;
+  padding: 2rem;
+}
+
+.matchingbox h3 {
+  padding: 1rem;
+  font-size: 2rem;
+  color: #3f87f7;
+  font-family: "Pretendard-Regular";
+}
+
+.matchingbox img {
+  /* padding: 2rem; */
+  height: 119px;
+  width: 80%;
+  margin: 0 auto;
+  object-fit: contain;
+}
+
+.matchingbox p:nth-child(3) {
+  text-align: left;
+  color: #333;
+  font-size: 1.5rem;
+  padding: 1rem;
+}
+
+.matchingbox p:nth-child(4) {
+  text-align: right;
+  font-size: 1.5rem;
+  color: #333;
+
+  padding: 1rem;
+}
+
+.matchingbox div {
+  padding: 1rem;
+  background-color: #ffffff;
+  box-shadow: 2px 2px 2px #33333332;
+  position: relative;
+}
+
+.matchingbox div:nth-child(1):before {
+  position: absolute;
+  content: "AA등급";
+  line-height: 40px;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 800;
+  width: 90px;
+  height: 40px;
+  top: -25px;
+  right: -5%;
+  background-color: #3f87f7;
+  border-radius: 45px;
+  transform: translateX(-50%);
+}
+
+.matchingbox-1 {
+  display: flex;
+  box-shadow: 0px 0px 0px white !important;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.matchingbox-1 p {
+  text-align: right;
+  font-size: 1.5rem;
+  padding: 1rem;
+  color: rgb(6, 6, 6);
+}
+
+.matchingbox-text {
+  text-align: right;
+  font-size: 1.3rem;
+  padding: 1rem;
+  font-weight: 700;
+  color: rgb(6, 6, 6);
+}
+
+.matchingbox-text span {
+  font-weight: 400;
+}
+
+.matching-box-main-two {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.matching-box-grid-two {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  margin: 0 auto;
+  place-items: center;
+
+  padding: 3rem;
+}
+
+.matching-box-2 {
+  padding: 2rem;
+  margin: 1rem;
+  background-color: #f9f9f9;
+  box-shadow: 2px 2px 5px #33333332;
+}
+
+.matching-box-2 div {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.matching-box-2 h5 {
+  width: 100%;
+  font-size: 1.5rem;
+  font-family: "Pretendard-Regular";
+}
+
+.matching-box-2 p {
+  width: 100%;
+  font-size: 1.5rem;
+  text-align: right;
+  justify-content: right;
+  font-family: "Pretendard-Regular";
+}
+
+.matchingbox-2 {
+  width: 100%;
+
+  display: flex;
+  padding: 1.5rem 0px;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  flex-direction: row !important;
+}
+
+.matchingbox-2 p {
+  width: 25%;
+}
+.mat-bos {
+  padding: 6rem 6rem 1rem 6rem;
+  width: 100%;
+}
+
+.mat-bos img {
+  width: 50px;
+  /* transform: translateY(10px);/ */
+  z-index: -1;
+}
+
+.mat-bos h1 {
+  font-size: 2.7rem;
+  z-index: 100 !important;
+  font-family: SBaggroM;
+}
+
+.matDtail-sec {
+  width: 100%;
+  padding: 0rem 6rem 6rem 6rem;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.mat-sec1 {
+  display: grid;
+  grid-template-columns: 85% 15%;
+  padding: 2rem 3rem 1rem 3rem;
+  background-color: #f4f4f4;
+  border-top: 1px solid rgb(199, 199, 199);
+}
+
+.mat-sec1 h2 {
+  font-size: 2rem;
+  color: #3f87f7;
+}
+
+.mat-sec1 h2 span {
+  color: #90baff;
+  font-size: 1.5rem;
+}
+
+.mat-sec1 div {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin-top: 3rem;
+  /* text-align: right; */
+  text-align: center;
+  background-color: #3f87f7;
+}
+
+.mat-sec1 div label {
+  color: white;
+  font-size: 1.5rem;
+  margin-right: 1rem;
+}
+
+.mat-sec1 div i {
+  font-size: 1.5rem;
+}
+
+.mat-sec2 {
+  border-top: 1px solid rgb(199, 199, 199);
+  border-bottom: 1px solid rgb(199, 199, 199);
+}
+
+.mat-sec2 div {
+  padding: 2rem 0;
+}
+
+.mat-sec2-end {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.mat-sec2 p {
+  font-size: 1.7rem;
+}
+
+.mat-sec2-end p {
+  font-size: 1.5rem;
+}
+
+.mat-sec2-end p span {
+  color: #3f87f7;
+  margin-right: 1rem;
+}
+
+.mat-sec2-end p:nth-child(2) {
+  text-align: right;
+}
+
+.mat-sec2-bt {
+  text-align: right;
+  width: 100%;
+  padding: 2rem 0;
+}
+
+.mat-sec2-bt button {
+  width: 15%;
+  padding: 1rem;
+  background-color: #3f87f7;
+  color: white;
+  border-radius: 0.5rem;
+  font-family: "Pretendard-Regular";
+}
+/* ---------------------------------------------------------------------------------------------- */
+
+/* Data css */
+
+.data-main {
+  width: 100%;
+}
+
+.data-b {
+  width: 100%;
+}
+.data-b-b {
+  width: 100%;
+  padding: 6rem;
+  font-size: 4rem;
+  color: #0e0077;
+
+  font-family: SBaggroM;
+}
+.data-text img {
+  width: 80px;
+}
+.data-text p {
+  position: relative;
+}
+.data-text p::before {
+  content: "";
+  position: absolute;
+  top: -30px;
+  background-size: 60px 30px;
+  background-image: url("../jpg/tdata-img-text.png");
+  width: 60px;
+  height: 30px;
+}
+
+.data-b-main {
+  width: 100%;
+}
+
+.data-b-grid {
+  width: 100%;
+  padding: 3rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.data-table {
+  width: 100%;
+}
+.da1 {
+  width: 80%;
+  height: 40rem;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-content: start;
+}
+.da1 h2 {
+  font-family: SBaggroM;
+  font-weight: 500;
+  font-size: 2rem;
+}
+.da1 h2 span {
+  font-size: 4rem;
+}
+.data-b-1 {
+  /* background-color: #007aff; */
+  background: url(../jpg/data-img.png) no-repeat center center;
+  background-size: cover;
+  position: relative;
+  text-align: center;
+  /* border-radius: 2rem; */
+}
+.data-b-1 h2 {
+  text-align: left;
+  padding: 3rem;
+  color: #014099;
+}
+.data-b-1 p {
+  font-size: 2rem;
+  padding: 3rem;
+  padding-top: 5rem;
+  width: 100%;
+  font-family: SBaggroM;
+  font-weight: 400;
+  text-align: left;
+  color: #014099;
+  cursor: pointer;
+}
+
+.data-b-1::after {
+  position: absolute;
+  content: "";
+  width: 90px;
+  height: 90px;
+  right: -90px;
+  top: 40%;
+
+  background-color: #e2ecfc;
+  border-radius: 45px;
+  transform: translateX(-50%);
+  z-index: -1;
+}
+.data-b-2 {
+  background: url(../jpg/data-img3.png) no-repeat center center;
+  background-size: cover;
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+}
+.data-b-2 h2 {
+  text-align: center;
+  padding: 3rem;
+  color: #0e5e2e;
+}
+.data-b-2 p {
+  font-size: 2rem;
+  padding: 3rem;
+
+  padding-top: 5rem;
+  font-family: SBaggroM;
+  text-align: center;
+  color: #1a8445;
+}
+.data-b-2 p span {
+  font-size: 3.5rem;
+  color: #0e5e2e;
+}
+
+.data-b-3 {
+  background: url(../jpg/data-img2.png) no-repeat center center;
+  background-size: cover;
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+
+  /* border: 1px solid red; */
+}
+.data-b-3::after {
+  position: absolute;
+  content: "";
+  width: 90px;
+  height: 90px;
+  left: 0px;
+  top: 40%;
+
+  background-color: #f8e7cd;
+  border-radius: 45px;
+  transform: translateX(-50%);
+  z-index: -1;
+}
+
+.data-b-3 h2 {
+  text-align: right;
+  padding: 3rem;
+  color: #c26400;
+}
+
+.data-b-3 p {
+  font-size: 2rem;
+  padding: 3rem;
+  padding-top: 5rem;
+  width: 100%;
+
+  font-family: SBaggroM;
+  text-align: right;
+  color: #e07e27;
+}
+.data-b-3 p span {
+  font-size: 3.5rem;
+  color: #c26400;
+}
+
+.data-table-tr {
+  padding: 12rem 6.5rem;
+}
+.data-table-tr th {
+  font-size: 1.5rem;
+  background-color: #007aff;
+  color: white;
+  padding: 1.1rem;
+  font-family: "Pretendard-Regular";
+}
+.data-table-tr td {
+  background-color: white;
+  padding: 2rem;
+  border-top: 1px solid rgb(187, 187, 187);
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #333;
+  cursor: pointer;
+  font-family: "Pretendard-Regular";
+}
+.data-table-tr td:nth-child(2) {
+  text-align: left;
+}
+
+.input:focus,
+.input:focus-visible {
+  border-color: #3898ec;
+  outline: none;
+}
+.data-t p {
+  width: 80%;
+  padding: 0rem 0rem 1rem 3rem !important;
+}
+
+.data-t2 p {
+  padding: 0rem 0rem 0rem 0rem !important;
+  margin: 0 auto;
+}
+
+.guide-logo-bt {
+  float: right;
+  /* margin: 0 auto; */
+  font-size: 3rem;
+  width: 70%;
+  padding-right: 3rem;
+  font-family: SBaggroM;
+  text-align: right;
+
+  cursor: pointer;
+}
+
+.guide-logo-bt a {
+  color: #e07e27;
+}
+/* --------------------------------------------------------------------------------------------------------- */
+
+/* News css */
+.new-logo img {
+  width: 50px;
+  height: 50px;
+  z-index: -1;
+  /* transform: translateY(-40px); */
+}
+
+/* 모달 */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9998;
+}
+
+.modal-content {
+  top: 50%;
+  left: 50%;
+  position: fixed;
+  z-index: 9999;
+  /* bottom: auto; */
+  padding: 4rem;
+  border-radius: 2rem;
+  background-color: #f9f9f9;
+  transform: translate(-50%, -50%);
+  /* margin: 0 auto; */
+  box-shadow: 2px 2px 5px #86868644;
+  width: 70%;
+  margin: 0 auto;
+
+  height: 70%;
+}
+
+.modal-content button {
+  position: relative;
+  /* margin: 50%; */
+  transform: translate(-52%, 0);
+  top: 10%;
+  left: 50%;
+  padding: 2rem 6rem 2rem;
+  background-color: #007aff;
+  border-radius: 2rem;
+
+  color: white;
+  font-family: "Pretendard-Regular";
+}
+
+/* ----------------------------------- */
+.news-bos {
+  width: 100%;
+  display: grid;
+  gap: 3rem;
+  grid-template-columns: 1fr 1fr 1fr;
+  padding: 6rem 6rem 12rem 6rem;
+  /* border: 1px solid red; */
+}
+
+.news-bos-box {
+  display: grid;
+  grid-template-columns: 1fr;
+  margin: 0 auto;
+  border-radius: 2rem;
+  padding: 2rem;
+  background-color: #f7f7f7;
+  box-shadow: 2px 2px 5px #8484847c;
+}
+
+.news-bos-box div {
+  padding: 1rem;
+}
+
+.modal-img {
+  width: 100%;
+  height: 195px;
+  /* border: 1px solid/ red; */
+}
+
+.news-bos-box div h3 {
+  font-size: 1.7rem;
+  padding: 1rem;
+}
+
+.news-bos-box img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 2.5rem;
+  box-shadow: 2px 2px 5px #8484847c;
+}
+
+.news-box-end {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.news-box-sed p {
+  font-size: 1.5rem;
+  /* padding: 1rem; */
+  /* background-color: aquamarine; */
+}
+
+.news-box-end p {
+  font-size: 1.5rem;
+  color: #3f87f7;
+  /* padding: 1rem; */
+}
+
+.news-box-end p span {
+  color: #333;
+}
+
+.news-box-end p:nth-child(2) {
+  text-align: right;
+}
+/* ---------------------------------------------------------------- */
+/* Notice css */
+.noti-bos {
+  width: 100%;
+}
+
+.noti-sec {
+  width: 100%;
+  padding: 12rem 3rem;
+}
+
+.noti-sec-table table {
+  background-color: white;
+  border-bottom: 1px solid #cccccc;
+}
+
+.noti-sec-table th {
+  padding: 1.5rem;
+  color: white;
+  background-color: #007aff;
+  font-size: 1.5rem;
+}
+
+.noti-sec-table td {
+  padding: 1.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  border-bottom: 1px solid #cccccc;
+  text-align: center;
+}
+/* ----------------------------------------------------------------------- */
+/* Guide css */
+.guide-bos {
+  width: 100%;
+  height: 100%;
+}
+
+.guide-logo {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 80% 20%;
+}
+
+.guide-logo-bt {
+  background-color: hsl(217, 92%, 61%);
+  margin: 0 auto;
+  padding: 1.5rem;
+  border-radius: 2rem;
+  text-align: center;
+}
+
+.guide-logo-bt i,
+.guide-logo-bt a {
+  color: white;
+}
+
+.guide-sec {
+  padding: 3rem;
+}
+/* ------------------------------------------------------------------------------ */
+/* Technology css */
+
+.tech-logo {
+  padding: 6rem 2rem 2rem 2rem;
+  width: 85%;
+}
+
+.tech-logo h1 {
+  font-size: 4rem;
+  font-family: SBaggroM;
+  font-weight: 500;
+  color: #0e0077;
+  /* position: relative; */
+}
+
+.tech-logo img {
+  width: 10rem;
+}
+
+.tech-bos {
+  width: 90%;
+  margin: 0 auto;
+  /* place-items: center; */
+
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 4rem;
+  padding: 6rem 3rem 6rem 3rem;
+  text-align: center;
+  /* border: 1px solid red; */
+}
+
+.tech-box-sec {
+  padding: 2rem;
+  /* border-radius: 2rem; */
+  background-color: #f9f9f9;
+  box-shadow: 2px 2px 5px rgba(191, 191, 191, 0.447);
+  /* border: 1px solid rgb(191, 191, 191); */
+}
+
+.tech-box-sec-h3 {
+  padding: 1rem;
+  font-size: 1.7rem;
+  font-family: "Pretendard-Regular";
+}
+
+.tech-box-sec div img {
+  /* border: 1px solid blue; */
+  box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
+  width: 85%;
+  height: 15rem;
+  margin: 0 auto;
+  background-size: cover;
+  border-radius: 1.5rem;
+}
+
+.tech-box-sec div p {
+  width: 85%;
+  padding: 1rem;
+  margin: 0 auto;
+  font-size: 1.5rem;
+  font-family: "Pretendard-Regular";
+}
+
+.tech-box-sec div button {
+  width: 85%;
+  border-radius: 2rem;
+  padding: 2rem;
+  font-size: 1.5rem;
+  color: white;
+  font-family: "Pretendard-Regular";
+
+  background-color: #3f87f7;
+}
+
+.tech-logo {
+  padding: 6rem 2rem 2rem 2rem;
+  width: 85%;
+}
+
+.tech-logo h1 {
+  font-size: 4rem;
+  font-family: SBaggroM;
+  font-weight: 500;
+  color: #0e0077;
+  /* position: relative; */
+}
+
+.tech-logo img {
+  width: 10rem;
+}
+
+.tech-sec {
+  width: 100%;
+  padding: 2rem;
+}
+
+.tech-sec1 {
+  display: grid;
+  grid-template-columns: 85% 15%;
+  padding: 2rem 3rem 1rem 3rem;
+  background-color: #f4f4f4;
+  border-top: 1px solid rgb(199, 199, 199);
+}
+
+.tech-sec1 h2 {
+  font-size: 2rem;
+  color: #3f87f7;
+}
+
+.tech-sec1 div {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin-top: 3rem;
+  /* text-align: right; */
+  text-align: center;
+  background-color: #3f87f7;
+}
+
+.tech-sec1 div label {
+  color: white;
+  font-size: 1.5rem;
+  margin-right: 1rem;
+}
+
+.tech-sec1 div i {
+  font-size: 1.5rem;
+}
+
+.tech-sec2 {
+  border-top: 1px solid rgb(199, 199, 199);
+  border-bottom: 1px solid rgb(199, 199, 199);
+}
+
+.tech-sec2 section {
+  display: grid;
+  grid-template-columns: 50% 1fr;
+}
+
+.tech-sec2 section div:nth-child(1) {
+  /* background-color: gainsboro; */
+  padding: 6rem;
+  /* border: 1px solid red; */
+
+  /* justify-content: space-between; */
+  text-align: right;
+}
+
+.tech-sec2 section div:nth-child(2) {
+  /* border: 1px solid red; */
+  padding: 6rem;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.tech-sec2 section div:nth-child(2) p {
+  border-top: 1px solid gainsboro;
+  padding: 4rem;
+}
+
+.tech-sec2 section div:nth-child(2) span {
+  color: #3f87f7;
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.tech-sec2 section img {
+  padding: 5rem;
+  margin: 0 auto;
+  box-shadow: 1px 1px 5px 5px #b2b2b236;
+  background-color: rgb(190, 190, 190);
+  /* border: 1px solid red; */
+  width: 50%;
+}
+
+.tech-sec2 div {
+  padding: 2rem 0;
+}
+
+.tech-sec2 p {
+  font-size: 1.7rem;
+}
+
+.tech-sec2-end p {
+  text-align: right;
+  font-size: 1.5rem;
+}
+
+.tech-sec2-end p span {
+  color: #3f87f7;
+  margin-right: 1rem;
+}
+
+.tech-sec2-end p:nth-child(2) {
+  text-align: right;
+}
+
+.tech-sec2-bt {
+  text-align: right;
+  width: 100%;
+  padding: 2rem 0 6rem 0;
+}
+
+.tech-sec2-bt button {
+  width: 15%;
+  padding: 1rem;
+  background-color: #3f87f7;
+  color: white;
+  border-radius: 0.5rem;
+  font-family: "Pretendard-Regular";
+}
+/* --------------------------------------------------------------------------- */
+/* lnfo css */
+.info-box-button {
+  width: 60%;
+  margin: 0 auto;
+  display: grid;
+  padding: 0 0 6rem 0;
+  grid-template-columns: 1fr 1fr;
+}
+
+.info-sec-bt {
+  /* border: 1px solid red; */
+  width: 60%;
+  margin: 0 auto;
+  padding: 6rem;
+  text-align: right;
+}
+
+.info-sec-bt button {
+  width: 30%;
+  padding: 2rem;
+  color: white;
+  border-radius: 1.5rem;
+  background-color: #3f87f7;
+}
+
+.info-box-button button {
+  padding: 3rem 2rem 3rem 2rem;
+  margin-right: 3rem;
+  color: white;
+  border-radius: 2rem;
+}
+
+.info-sec,
+.info-sec-1 {
+  padding: 6rem;
+  margin: 0 auto;
+  border: 1px soli/d #333;
+  width: 60%;
+}
+
+.info-sec div,
+.info-sec-1 div {
+  display: grid;
+
+  border-bottom: 1px solid #333;
+  grid-template-columns: 30% 2fr;
+}
+
+.info-sec div p {
+  padding: 3rem;
+  font-size: 1.5rem;
+}
+
+.info-sec-1 div a {
+  padding: 3rem;
+}
+
+.info-sec-1 div p {
+  padding: 3rem;
+  font-size: 1.5rem;
+
+  /* border-bottom: 1px solid #333; */
+}
+
+.info-sec-1 section {
+  padding: 3rem;
+}
+
+.info-sec-1 section img {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  /* border: 1px solid red; */
+  margin: 0 auto;
+  box-shadow: 2px 2px 5px #33333345;
+}
+
+.info-td {
+  /* border: 1px solid red; */
+  height: 250px;
+}
+
+.info-pw {
+  display: grid;
+  grid-template-columns: 30% 1fr 1fr !important;
+}
+
+.info-pw button {
+  margin: 2rem;
+  border-radius: 0.5rem;
+  background-color: #3f87f7;
+  color: white;
+}
+
+.info-box-button {
+  width: 60%;
+  margin: 0 auto;
+  display: grid;
+  padding: 0 0 6rem 0;
+  grid-template-columns: 1fr 1fr;
+}
+
+.info-sec-bt {
+  /* border: 1px solid red; */
+  width: 60%;
+  margin: 0 auto;
+  padding: 6rem;
+  text-align: right;
+}
+
+.info-sec-bt button {
+  width: 30%;
+  padding: 2rem;
+  color: white;
+  border-radius: 1.5rem;
+  background-color: #3f87f7;
+}
+
+.info-box-button button {
+  padding: 3rem 2rem 3rem 2rem;
+  margin-right: 3rem;
+  color: white;
+  border-radius: 2rem;
+}
+
+.info-sec,
+.info-sec-1 {
+  padding: 6rem;
+  margin: 0 auto;
+  border: 1px soli/d #333;
+  width: 60%;
+}
+
+.info-sec div,
+.info-sec-1 div {
+  display: grid;
+
+  border-bottom: 1px solid #333;
+  grid-template-columns: 30% 2fr;
+}
+
+.info-sec div p {
+  /* border-bottom: 1px solid #333; */
+  padding: 3rem;
+  font-size: 1.5rem;
+}
+
+.info-sec-1 div p {
+  padding: 3rem;
+  font-size: 1.5rem;
+}
+
+.info-sec-1 section {
+  margin: 0 auto;
+  width: 30%;
+  text-align: center;
+}
+
+.info-sec-1 section img {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.info-td {
+  /* border: 1px solid red; */
+  height: 250px;
+}
+
+.info-input {
+  width: 100%;
+  padding: 2rem;
+  border-radius: 0.5rem;
+}
+
+.info-td input {
+  height: 100%;
+  width: 100%;
+  padding: 2rem;
+  border-radius: 0.5rem;
+}
+
+/* Introduction css */
+.intro {
+  width: 100%;
+  padding: 6rem;
+}
+
+.intro-logo {
+  width: 100%;
+  padding: 6rem 2rem;
+}
+
+.intro-logo h1 {
+  font-size: 3rem;
+  font-family: SBaggroM;
+  font-weight: 500;
+  color: #2c407f;
+}
+
+.intro-text {
+  padding: 3rem;
+}
+
+.intro-text h3 {
+  padding: 1rem 1rem 3rem;
+  font-size: 2rem;
+  color: #00335a;
+  font-family: "Pretendard-Regular";
+}
+
+.intro-text i {
+  padding: 1rem;
+  color: #00335a;
+  font-family: "Pretendard-Regular";
+}
+
+.intro-text p {
+  padding: 1rem;
+  font-size: 1.5rem;
+  color: #00335a;
+  font-family: "Pretendard-Regular";
+}
+
+.intro-img {
+  width: 100%;
+  padding: 3rem;
+  display: grid;
+  gap: 0;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.intro-img img {
+  width: 100%;
+}
+
+.intro-img img:nth-child(2) {
+  transform: translateY(-4.8rem);
+}
+
+.intro-img img:nth-child(3) {
+  transform: translateY(-9.7rem);
+}

799ba68

d468db6

client/resources/css/header.css

--- client/resources/css/header.css

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

...	...	@@ -11,6 +11,7 @@
11	11	.b1400 {
12	12	width: 1300px;
13	13	display: flex;
	14	+ padding: 1rem;
14	15	margin: 0 auto;
15	16	/* border: 1px solid red; */
16	17	justify-content: flex-end;
...	...	@@ -66,3 +67,186 @@
66	67	margin-left: 10px;
67	68	/* border: 1px solid #ffffff; */
68	69	}
	70	+.name {
	71	+ padding: 0.5rem;
	72	+ font-size: 1.5rem;
	73	+ font-family: "Pretendard-Regular";
	74	+
	75	+ color: white;
	76	+}
	77	+.b1400 div {
	78	+ margin-right: 2rem;
	79	+}
	80	+
	81	+.mypage button {
	82	+ font-size: 1.5rem !important;
	83	+ padding: 0.5rem;
	84	+}
	85	+
	86	+.header {
	87	+ width: 100%;
	88	+ /* height: 40px; */
	89	+ display: flex;
	90	+ justify-content: flex-end;
	91	+ padding: 0.5rem;
	92	+ float: right;
	93	+ background-color: #3f87f7;
	94	+ /* border: 1px solid red; */
	95	+}
	96	+
	97	+#input {
	98	+ border: 0;
	99	+ background-color: rgba(240, 248, 255, 0);
	100	+ cursor: pointer;
	101	+ /* border: 1px solid red; */
	102	+ /* padding: 1rem; */
	103	+ color: white;
	104	+ font-size: 1.5rem;
	105	+}
	106	+/* 메뉴css */
	107	+.w1400 {
	108	+ width: 100%;
	109	+}
	110	+
	111	+ul.main-menu {
	112	+ display: flex;
	113	+ justify-content: flex-start;
	114	+ align-items: center;
	115	+}
	116	+
	117	+ul.main-menu > li {
	118	+ position: relative;
	119	+}
	120	+
	121	+ul.main-menu > li > a {
	122	+ display: block;
	123	+ padding: 2.5rem;
	124	+ font-size: 1.6rem;
	125	+ font-weight: 500;
	126	+ font-family: "Pretendard-Regular";
	127	+}
	128	+
	129	+ul.sub-menu {
	130	+ height: 0;
	131	+ overflow: hidden;
	132	+ transition: all 0.8s;
	133	+ position: absolute;
	134	+ /* top: 100px; */
	135	+ left: 0;
	136	+ width: 100%;
	137	+ z-index: 100000;
	138	+ background-color: #ffff;
	139	+ /* box-shadow: 0px 2px 2px #3333331b; */
	140	+}
	141	+
	142	+ul.main-menu > li.active ul.sub-menu {
	143	+ height: auto;
	144	+}
	145	+
	146	+ul.sub-menu > li > a {
	147	+ display: block;
	148	+ padding: 10px;
	149	+ font-size: 1.5rem !important;
	150	+ font-weight: 500;
	151	+ font-family: "Pretendard-Regular";
	152	+ padding-bottom: 2rem;
	153	+ text-align: center;
	154	+ font-size: 1.2rem;
	155	+}
	156	+
	157	+#checkbox {
	158	+ display: none;
	159	+}
	160	+
	161	+.toggle {
	162	+ position: relative;
	163	+ width: 30px;
	164	+ cursor: pointer;
	165	+ margin: auto;
	166	+ display: block;
	167	+ height: calc(4px * 3 + 11px * 2);
	168	+}
	169	+
	170	+.bar {
	171	+ position: absolute;
	172	+ left: 0;
	173	+ right: 0;
	174	+ height: 3px;
	175	+ border-radius: calc(4px / 2);
	176	+ background: #2c407f;
	177	+ color: inherit;
	178	+ opacity: 1;
	179	+ transition: none 0.35s cubic-bezier(0.5, -0.35, 0.35, 1.5) 0s;
	180	+}
	181	+
	182	+/*** Spin Animation ***/
	183	+
	184	+.bar--top {
	185	+ bottom: calc(50% + 11px + 4px / 2);
	186	+ transition-property: bottom, transform;
	187	+ transition-delay: calc(0s + 0.35s), 0s;
	188	+}
	189	+
	190	+.bar--middle {
	191	+ top: calc(50% - 4px / 2);
	192	+ transition-property: opacity;
	193	+ transition-delay: calc(0s + 0.35s);
	194	+}
	195	+
	196	+.bar--bottom {
	197	+ top: calc(50% + 11px + 4px / 2);
	198	+ transition-property: top, transform;
	199	+ transition-delay: calc(0s + 0.35s), 0s;
	200	+}
	201	+
	202	+#checkbox:checked + .toggle .bar--top {
	203	+ bottom: calc(50% - 4px / 2);
	204	+ transform: rotate(135deg);
	205	+ transition-delay: 0s, calc(0s + 0.35s);
	206	+}
	207	+
	208	+#checkbox:checked + .toggle .bar--middle {
	209	+ opacity: 0;
	210	+ transition-duration: 0s;
	211	+ transition-delay: calc(0s + 0.35s);
	212	+}
	213	+
	214	+#checkbox:checked + .toggle .bar--bottom {
	215	+ top: calc(50% - 4px / 2);
	216	+ transform: rotate(225deg);
	217	+ transition-delay: 0s, calc(0s + 0.35s);
	218	+}
	219	+
	220	+.sub-nav,
	221	+.toggle {
	222	+ opacity: 0;
	223	+}
	224	+
	225	+.header-wrap {
	226	+ display: flex;
	227	+ justify-content: space-between;
	228	+ box-shadow: 2px 2px 2px #33333300;
	229	+
	230	+ align-items: center;
	231	+ position: relative;
	232	+ flex-wrap: wrap;
	233	+}
	234	+
	235	+.sub-menu {
	236	+ flex: 0 0 72%;
	237	+}
	238	+
	239	+.sub-menu ul {
	240	+ display: flex;
	241	+ justify-content: end;
	242	+}
	243	+
	244	+.sub-menu ul li a {
	245	+ display: block;
	246	+ color: #2c407f;
	247	+ line-height: 40px;
	248	+ margin-left: 50px;
	249	+ font-size: 1.5rem;
	250	+ text-align: right;
	251	+ font-weight: 600;
	252	+}

799ba68

d468db6

client/resources/css/responsive.css

--- client/resources/css/responsive.css

+++ client/resources/css/responsive.css


 }
 
 
-/* 테블릿 세로*/ 
+/* 테블릿 세로*/
 @media all and (min-width: 767px) and (max-width: 1023px) {
  
   html {

   .mat-text {
     font-size: 5rem;
   }
-  
+  /* Matching */
+  .mat-sec1 {
+    grid-template-columns: 75% 25%;
+
+}
+.matching-box img {
+  width: 100%;
+}
+
+.matching-box-bos {
+  width: 100%;
+  grid-template-columns: 1fr 1fr;
+}
+
+.matching-box-grid-two {
+  grid-template-columns: 1fr 1fr;
+}
+
+.mat-sec-b {
+  width: 90%;
+}
+
+.matching-text {
+  margin-top: 25%;
+}
+
+/* introduction */
+.intro-img {
+  grid-template-columns: 1fr;
+}
+/* join */
+.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%;
+}
+/* technology */
+.tech-sec1 {
+  grid-template-columns: 75% 25%;
+}
+
+.tech-logo {
+  width: 100%;
+  text-align: center;
+
+}
+
+.tech-logo img {
+  margin: 0 auto;
+
+}
+
+.tech-bos {
+  width: 90%;
+  grid-template-columns: 1fr 1fr;
+}
+
+
 }
 /* 모바일 가로, 테블릿 세로 */
 @media all and (min-width: 480px) and (max-width: 767px) {

   .router-link:hover {
     background-color: #e0e0e0;
   }
+  .main-puzzle-container{
+    grid-template-columns: 1fr;
+  }
+  .main-history-box{
+    grid-template-columns: 1fr;
+
+  }
+  .main-partner-logo{
+    height: 50rem;
+    grid-template-columns: 1fr;
+    row-gap: 10px;
+  }
+  .main-partner-img{
+    width: 80%;
+    margin: 0 auto;
+  }
+  .main-notice{
+    width: 90%;
+    /* grid-column: 1; */
+  }
   /* 햄버거 끝! */
   .mobile1 {
     flex: 0 0 10%;

   .lo5 {
     background-size: contain;
   }
-
+  /* 매칭서비스 */
+  .mat-b-g-g {
+    grid-template-columns: 1fr;
+  }
+  .mat-sec-a-1 {
+    grid-template-columns: 1fr;
+  }
+  .mat-sec-b {
+    width: 90%;
+  }
+  .mat-text {
+    font-size: 3rem;
+  }
   /* 자료집 */
   .data-main {
     width: 100%;

     text-align: center;
     margin: 0 auto;
   }
+
+  /* news */
+  .news-bos {
+    grid-template-columns: 1fr 1fr;
+
+}
+
+.new-logo {
+    width: 100%;
+    text-align: center;
+
+}
+
+.new-logo img {
+    margin: 0 auto;
+    text-align: center;
+}
+/* matching */
+.mat-bos {
+  width: 100%;
+  padding: 2rem;
+}
+
+.mat-bos h1,
+.mat-bos img {
+  text-align: center;
+  margin: 0 auto;
+}
+
+.mat-sec1 {
+  grid-template-columns: 1fr;
+
+}
+
+.matDtail-sec {
+  width: 100%;
+  padding: 2rem;
+}
+.matching-box img {
+  width: 100%;
+}
+
+.matching-box-bos {
+  grid-template-columns: 1fr;
+}
+
+.matching-box-grid-two {
+  grid-template-columns: 1fr;
+}
+
+.mat-sec-b {
+  width: 90%;
+}
+
+.matching-text {
+  font-size: 3rem;
+}
+
+.matching-text {
+  margin-top: 25%;
+}
+/* join */
+.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;
+}
+/* inrtoduction */
+.intro {
+  width: 100%;
+  padding: 3rem;
+
+}
+
+.intro-logo {
+  width: 100%;
+}
+
+.intro-text {
+  width: 100%;
+  padding: 2rem;
+}
+
+.intro-img {
+  grid-template-columns: 1fr;
+}
+/* technology */
+.tech-logo {
+  width: 100%;
+  text-align: center;
+
+}
+
+.tech-logo img {
+  margin: 0 auto;
+
+}
+
+.tech-bos {
+  width: 90%;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+}
+.tech-logo,
+    .tech-logo img {
+        /* width: 100%; */
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .tech-sec1 {
+        grid-template-columns: 1fr;
+    }
+
+    .tech-sec2 section {
+
+        grid-template-columns: 1fr;
+    }
+
+    .tech-sec2 section img {
+        padding: 0rem;
+    }
+
+    .tech-sec2 section div:nth-child(1) {
+        padding: 5rem 2rem;
+    }
 }
 
 /* 모바일 가로, 테블릿 세로 */

     height: 10px;
  
   }
+  .mobile1 {
+    flex: 0 0 10%;
+    text-align: center;
+    font-size: 3rem;
+    color: #2c407f;
+    /* border: 1px solid red; */
+}
+
+/* 메뉴 반응형 */
+.sub-nav {
+    position: relative;
+    height: 100%;
+    opacity: 1;
+}
+
+
+
+.logo-toggle {
+    width: 100%;
+    display: flex;
+}
+
+.logo {
+    flex: 0 0 80%;
+    transform: translateY(0px);
+}
+
+.logo span {
+    font-family: "Pretendard-Regular";
+    width: 100%;
+    text-align: center;
+    font-size: 1.7rem;
+    flex: 0 0 90%;
+    margin: 1rem;
+    /* border: 1px solid red; */
+}
+
+.main-menu-1 {
+    display: none !important;
+}
+
+.main-sub-menu {
+    flex: 0 0 100% !important;
+    flex-direction: column;
+    justify-content: end;
+    list-style: none;
+    padding: 5rem;
+    display: none;
+}
+
+.main-sub-menu.open {
+    display: block;
+}
 
   .main-menu-1 {
     display: none !important;

   .main-sub-menu.open {
     display: block;
   }
-  .m-text {
-    display: none;
+  .main-box-wrap{
+    width: 90%;
+    margin: 0 auto;
+    grid-template-columns: 1fr;
   }
-  .m-text p {
-    font-size: 1rem;
+  .main-benner{
+    width: 90%;
+   
   }
-  .m-b {
-    background: url(../jpg/main.png) no-repeat center center;
-    background-size: cover;
-    height: auto;
+  .main-puzzle-container{
+    grid-template-columns: 1fr;
   }
-  .m-text span {
-    font-size: 25px;
-  }
+  .main-history-box{
+    grid-template-columns: 1fr;
 
-  .m-p {
-    padding: 3rem;
   }
-  .m-b-b {
-    flex-direction: column;
-    padding-top: 0;
-    height: 40rem;
-  }
-  .m-benner {
-    width: 100%;
-    flex: 100%;
-    background-size: cover;
-    box-shadow: 0px 0px 0px;
-    display: none;
-  }
-  .m-p-container {
+  .main-partner-logo{
+    height: 50rem;
     grid-template-columns: 1fr;
+    row-gap: 10px;
   }
-  .m-h-g {
-    grid-template-columns: 1fr;
+  .main-partner-img{
+    width: 80%;
+    margin: 0 auto;
   }
-  .m-pa-pa {
-    width: 100%;
-    flex-direction: column;
-  }
-  .m-pa-pa div {
-    justify-content: center;
-  }
-  .m-p-c-3 {
-    background: url(../jpg/m3-1.png) no-repeat;
-    background-size: cover;
-  }
-  .m-pa-logo {
-    width: 100%;
-    align-items: center;
-    height: 5rem;
-    margin: 2rem;
-  }
-  .lo1,
-  .lo2,
-  .lo3,
-  .lo4,
-  .lo5 {
-    background-size: contain;
+  .main-notice{
+    width: 90%;
+    grid-column: 1;
   }
   .call p {
     flex: 0 0 100%;

     margin-top: 30px;
     margin-left: -213px;
   }
- 
-  
+  /* 매칭서비스 */
+  .mat-b-g-g {
+    grid-template-columns: 1fr;
+  }
+  .mat-sec-a-1 {
+    grid-template-columns: 1fr;
+    width: 100%;
+  }
+  .mat-text {
+    /* display: none; */
+    padding-top: 3rem;
+    font-size: 2rem;
+  }
 
   /* 자료집 */
   .data-main {

   .mat-span{
     grid-template-columns: 1fr;
   }
+
+  /* news */
+  .news-bos {
+    grid-template-columns: 1fr;
+
+}
+
+.new-logo {
+    width: 100%;
+    text-align: center;
+
+}
+
+.new-logo img {
+    margin: 0 auto;
+    text-align: center;
+}
+
+.modal-content {
+    height: 50%;
+    width: 90%;
+}
+
+
+/* technology */
+.tech-logo {
+  width: 100%;
+  text-align: center;
+
+}
+
+.tech-logo img {
+  margin: 0 auto;
+
+}
+
+.tech-bos {
+  width: 90%;
+  grid-template-columns: 1fr;
+}
+
+.tech-logo,
+.tech-logo img {
+    /* width: 100%; */
+    margin: 0 auto;
+    text-align: center;
+}
+
+.tech-sec1 {
+    grid-template-columns: 1fr;
+}
+
+.tech-sec2 section {
+
+    grid-template-columns: 1fr;
+}
+
+.tech-sec2 section img {
+    padding: 0rem;
+}
+
+.tech-sec2 section div:nth-child(1) {
+    padding: 5rem 2rem;
+}
+
+/* introduction */
+.intro {
+  width: 100%;
+  padding: 3rem;
+
+}
+
+.intro-logo {
+  width: 100%;
+}
+
+.intro-text {
+  width: 100%;
+  padding: 2rem;
+}
+
+.intro-img {
+  grid-template-columns: 1fr;
+}
+
+/* join */
+.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;
+    }
+/* matching */
+.matching-box img {
+  width: 100%;
+}
+
+.matching-span span {
+  padding: 1rem 1.5rem 1rem 1.5rem;
+}
+
+.matching-box-bos {
+  grid-template-columns: 1fr;
+}
+
+.matching-box-grid-two {
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+
+.matching-text {
+  /* display: none; */
+  padding-top: 3rem;
+  font-size: 2rem;
+}
+
+.matching-text {
+  margin-top: 25%;
+}
+.mat-bos {
+  width: 100%;
+  padding: 2rem;
+}
+
+.mat-bos h1,
+.mat-bos img {
+  text-align: center;
+  margin: 0 auto;
+}
+
+.mat-sec1 {
+  grid-template-columns: 1fr;
+}
+
+.matDtail-sec {
+  width: 100%;
+  padding: 2rem;
+}
+
+.mat-span span {
+  padding: 1rem 1.5rem 1rem 1.5rem;
+}
   
 }
+@media all and (min-width: 250px) and (max-width: 480px) 
+ {
+.w1400{
+  width: 100%;
+  padding: 1rem;
+  margin: 0 auto;
+}
+.main-notice{
+  width: 50%;
+}.main-text{
+  width: 50%;
+}
+.main-text p{
+  font-size: 1.2rem;
+}
+.main-text span{
+  font-size: 1.8rem;
+}
+.main-benner{
+  width: 50%;
+  background-position: center;
+}
+.main-content-wrap{
+  padding: 0px;
+}
+.main-grid-name::after{
+  display: none;
+}
+}

799ba68

client/resources/jpg/PNG/hss자산 5dfd.png (Binary) (deleted)

--- client/resources/jpg/PNG/hss자산 5dfd.png

Binary file is not shown

799ba68

client/resources/jpg/PNG/ps4301.tmp (deleted)

--- client/resources/jpg/PNG/ps4301.tmp

@@ -1,0 +0,0 @@

799ba68

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

--- client/resources/jpg/intro.png

Binary file is not shown

799ba68

client/resources/jpg/m2.png (Binary) (deleted)

--- client/resources/jpg/m2.png

Binary file is not shown

799ba68

d468db6

client/views/index.html

--- client/views/index.html

+++ client/views/index.html


     <link rel="stylesheet" href="/client/resources/css/common.css">
     <link rel="stylesheet" href="/client/resources/css/footer.css">
     <link rel="stylesheet" href="/client/resources/css/header.css">
-    <link rel="stylesheet" href="/client/resources/css/matching.css">
-    <link rel="stylesheet" href="/client/resources/css/Data.css">
     <link rel="stylesheet" href="/client/resources/css/responsive.css">
 
     <script type="text/javascript" charset="utf-8" src="/client/smarteditor2-2.8.2.3/js/HuskyEZCreator.js"></script>
     <script src="https://kit.fontawesome.com/9f862d56b3.js" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-    
+
 
     <title>KERIS</title>
 

799ba68

d468db6

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


 }
 </script>
 
-<style scoped>
-.name {
-    padding: 0.5rem;
-    font-size: 1.5rem;
-    font-family: "Pretendard-Regular";
-
-    color: white;
-}
-
-.b1400 {
-    padding: 1rem;
-    /* border: 1px solid red; */
-}
-
-.b1400 div {
-    margin-right: 2rem;
-}
-
-.mypage button {
-    font-size: 1.5rem !important;
-    padding: 0.5rem;
-}
-
-.header {
-    width: 100%;
-    /* height: 40px; */
-    display: flex;
-    justify-content: flex-end;
-    padding: 0.5rem;
-    float: right;
-    background-color: #3f87f7;
-    /* border: 1px solid red; */
-}
-
-#input {
-    border: 0;
-    background-color: rgba(240, 248, 255, 0);
-    cursor: pointer;
-    /* border: 1px solid red; */
-    /* padding: 1rem; */
-    color: white;
-    font-size: 1.5rem;
-}
-</style>
+<style scoped></style>

799ba68

d468db6

client/views/layout/Menu.vue

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

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


     }
 }
 </script>
-
-<style scoped>
-ul.main-menu {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-ul.main-menu>li {
-    position: relative;
-}
-
-ul.main-menu>li>a {
-    display: block;
-    padding: 2.5rem;
-    font-size: 1.6rem;
-    font-weight: 500;
-    font-family: "Pretendard-Regular";
-
-}
-
-ul.sub-menu {
-    height: 0;
-    overflow: hidden;
-    transition: all 0.8s;
-    position: absolute;
-    /* top: 100px; */
-    left: 0;
-    width: 100%;
-    z-index: 100000;
-    background-color: #ffff;
-    /* box-shadow: 0px 2px 2px #3333331b; */
-}
-
-ul.main-menu>li.active ul.sub-menu {
-    height: auto;
-}
-
-
-ul.sub-menu>li>a {
-    display: block;
-    padding: 10px;
-    font-size: 1.5rem !important;
-    font-weight: 500;
-    font-family: "Pretendard-Regular";
-    padding-bottom: 2rem;
-    text-align: center;
-    font-size: 1.2rem;
-}
-
-
-
-
-
-#checkbox {
-    display: none;
-}
-
-.toggle {
-    position: relative;
-    width: 30px;
-    cursor: pointer;
-    margin: auto;
-    display: block;
-    height: calc(4px * 3 + 11px * 2);
-}
-
-.bar {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 3px;
-    border-radius: calc(4px / 2);
-    background: #2c407f;
-    color: inherit;
-    opacity: 1;
-    transition: none 0.35s cubic-bezier(.5, -0.35, .35, 1.5) 0s;
-}
-
-/***** Spin Animation *****/
-
-.bar--top {
-    bottom: calc(50% + 11px + 4px/ 2);
-    transition-property: bottom, transform;
-    transition-delay: calc(0s + 0.35s), 0s;
-}
-
-.bar--middle {
-    top: calc(50% - 4px/ 2);
-    transition-property: opacity;
-    transition-delay: calc(0s + 0.35s);
-}
-
-.bar--bottom {
-    top: calc(50% + 11px + 4px/ 2);
-    transition-property: top, transform;
-    transition-delay: calc(0s + 0.35s), 0s;
-}
-
-#checkbox:checked+.toggle .bar--top {
-    bottom: calc(50% - 4px/ 2);
-    transform: rotate(135deg);
-    transition-delay: 0s, calc(0s + 0.35s);
-}
-
-#checkbox:checked+.toggle .bar--middle {
-    opacity: 0;
-    transition-duration: 0s;
-    transition-delay: calc(0s + 0.35s);
-}
-
-#checkbox:checked+.toggle .bar--bottom {
-    top: calc(50% - 4px/ 2);
-    transform: rotate(225deg);
-    transition-delay: 0s, calc(0s + 0.35s);
-}
-</style>

799ba68

d468db6

client/views/pages/user/Data/Data.vue

--- client/views/pages/user/Data/Data.vue

+++ client/views/pages/user/Data/Data.vue


                 <div class="w1400">
                     <div class="data-select">
                         <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
-                            <option :value = null selected>전체</option>
+                            <option :value=null selected>전체</option>
                             <option value="title">제목</option>
                             <option value="user">작성자</option>
                             <option value="조회순">조회순</option>
                         </select>
                         <div class="input-group">
-                            <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
+                            <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
+                                @keyup.enter="postSelectList()">
                             <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
                         </div>
                     </div>

         }
     },
     methods: {
-        postSelectList: function() {
+        postSelectList: function () {
             const vm = this;
-            
+
             axios({
                 url: '/post/postSelectList.json',
                 method: 'post',

                     'Content-Type': "application/json; charset=UTF-8",
                 },
                 data: vm.postListSearch
-            }).then(function(response) {
+            }).then(function (response) {
                 vm.postList = response.data.postSelectList;
                 vm.postListCount = response.data.postSelectListCount;
                 vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
-            }).catch(function(error) {
+            }).catch(function (error) {
                 alert('자료집 목록 조회 오류, 관리자에게 문의하세요.');
             })
         },

         yyyymmdd: function (date) {
             return COMMON_UTIL.yyyymmdd(date);
         },
-        
+
         //게시글 상세조회 페이지로 이동
         postSelectOnePage: function (item) {
-            this.$router.push({ path: '/', query: {'post_id': item.post_id}});
+            this.$router.push({ path: '/', query: { 'post_id': item.post_id } });
         },
     },
     watch: {

 }
 </script>
 
-<style scoped>
-.data-t p {
-    width: 80%;
-    padding: 0rem 0rem 1rem 3rem !important;
-
-}
-
-.data-t2 p {
-
-    padding: 0rem 0rem 0rem 0rem !important;
-    margin: 0 auto;
-}
-
-.guide-logo-bt {
-    float: right;
-    /* margin: 0 auto; */
-    font-size: 3rem;
-    width: 70%;
-    padding-right: 3rem;
-    font-family: SBaggroM;
-    text-align: right;
-
-    cursor: pointer;
-}
-
-.guide-logo-bt a {
-    color: #e07e27;
-}
-</style>

799ba68

d468db6

client/views/pages/user/Data/Guide.vue

--- client/views/pages/user/Data/Guide.vue

+++ client/views/pages/user/Data/Guide.vue


     }
 }
 </script>
-<style scoped>
-div {
-    background-color: white;
-    width: 100%;
-    height: 100%;
-}
 
-.guide-bos {
-    width: 100%;
-    height: 100%;
-}
-
-.guide-logo {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 80% 20%;
-}
-
-.guide-logo-bt {
-    background-color: hsl(217, 92%, 61%);
-    margin: 0 auto;
-    padding: 1.5rem;
-    border-radius: 2rem;
-    text-align: center;
-}
-
-.guide-logo-bt i,
-.guide-logo-bt a {
-
-    color: white;
-}
-
-.guide-sec {
-    padding: 3rem;
-}
-</style>
 
 

799ba68

d468db6

client/views/pages/user/Data/Technology.vue

--- client/views/pages/user/Data/Technology.vue

+++ client/views/pages/user/Data/Technology.vue


 }
 </script>
 
-<style scoped>
-.tech-logo {
-    padding: 6rem 2rem 2rem 2rem;
-    width: 85%;
-}
-
-.tech-logo h1 {
-    font-size: 4rem;
-    font-family: SBaggroM;
-    font-weight: 500;
-    color: #0e0077;
-    /* position: relative; */
-
-}
-
-.tech-logo img {
-    width: 10rem;
-}
-
-
-
-.tech-bos {
-    width: 90%;
-    margin: 0 auto;
-    /* place-items: center; */
-
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 4rem;
-    padding: 6rem 3rem 6rem 3rem;
-    text-align: center;
-    /* border: 1px solid red; */
-}
-
-.tech-box-sec {
-    padding: 2rem;
-    /* border-radius: 2rem; */
-    background-color: #f9f9f9;
-    box-shadow: 2px 2px 5px rgba(191, 191, 191, 0.447);
-    /* border: 1px solid rgb(191, 191, 191); */
-}
-
-.tech-box-sec-h3 {
-    padding: 1rem;
-    font-size: 1.7rem;
-    font-family: "Pretendard-Regular";
-
-}
-
-.tech-box-sec div img {
-    /* border: 1px solid blue; */
-    box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
-    width: 85%;
-    height: 15rem;
-    margin: 0 auto;
-    background-size: cover;
-    border-radius: 1.5rem;
-}
-
-.tech-box-sec div p {
-    width: 85%;
-    padding: 1rem;
-    margin: 0 auto;
-    font-size: 1.5rem;
-    font-family: "Pretendard-Regular";
-
-}
-
-.tech-box-sec div button {
-    width: 85%;
-    border-radius: 2rem;
-    padding: 2rem;
-    font-size: 1.5rem;
-    color: white;
-    font-family: "Pretendard-Regular";
-
-    background-color: #3f87f7;
-}
-
-@media all and (max-width: 479px) {
-    .tech-logo {
-        width: 100%;
-        text-align: center;
-
-    }
-
-    .tech-logo img {
-        margin: 0 auto;
-
-    }
-
-    .tech-bos {
-        width: 90%;
-        grid-template-columns: 1fr;
-    }
-
-}
-
-@media all and (min-width: 480px) and (max-width: 767px) {
-    .tech-logo {
-        width: 100%;
-        text-align: center;
-
-    }
-
-    .tech-logo img {
-        margin: 0 auto;
-
-    }
-
-    .tech-bos {
-        width: 90%;
-        gap: 1rem;
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-@media all and (min-width: 767px) and (max-width: 1023px) {
-    .tech-logo {
-        width: 100%;
-        text-align: center;
-
-    }
-
-    .tech-logo img {
-        margin: 0 auto;
-
-    }
-
-    .tech-bos {
-        width: 90%;
-        grid-template-columns: 1fr 1fr;
-    }
-}
-</style>
 
 

799ba68

d468db6

client/views/pages/user/Data/TechnologyOne.vue

--- client/views/pages/user/Data/TechnologyOne.vue

+++ client/views/pages/user/Data/TechnologyOne.vue


 }
 </script>
 <style scoped>
-.tech-logo {
-    padding: 6rem 2rem 2rem 2rem;
-    width: 85%;
-}
-
-.tech-logo h1 {
-    font-size: 4rem;
-    font-family: SBaggroM;
-    font-weight: 500;
-    color: #0e0077;
-    /* position: relative; */
-
-}
-
-.tech-logo img {
-    width: 10rem;
-}
-
-.tech-sec {
-    width: 100%;
-    padding: 2rem;
-}
-
-.tech-sec1 {
-    display: grid;
-    grid-template-columns: 85% 15%;
-    padding: 2rem 3rem 1rem 3rem;
-    background-color: #f4f4f4;
-    border-top: 1px solid rgb(199, 199, 199);
-}
-
-.tech-sec1 h2 {
-    font-size: 2rem;
-    color: #3f87f7;
-}
-
-
-.tech-sec1 div {
-    padding: 1rem;
-    border-radius: 0.5rem;
-    margin-top: 3rem;
-    /* text-align: right; */
-    text-align: center;
-    background-color: #3f87f7;
-
-}
-
-.tech-sec1 div label {
-    color: white;
-    font-size: 1.5rem;
-    margin-right: 1rem;
-}
-
-.tech-sec1 div i {
-    font-size: 1.5rem;
-}
-
-.tech-sec2 {
-
-    border-top: 1px solid rgb(199, 199, 199);
-    border-bottom: 1px solid rgb(199, 199, 199);
-}
-
-.tech-sec2 section {
-    display: grid;
-    grid-template-columns: 50% 1fr;
-}
-
-.tech-sec2 section div:nth-child(1) {
-    /* background-color: gainsboro; */
-    padding: 6rem;
-    /* border: 1px solid red; */
-
-    /* justify-content: space-between; */
-    text-align: right;
-}
-
-.tech-sec2 section div:nth-child(2) {
-    /* border: 1px solid red; */
-    padding: 6rem;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.tech-sec2 section div:nth-child(2) p {
-    border-top: 1px solid gainsboro;
-    padding: 4rem;
-}
-
-.tech-sec2 section div:nth-child(2) span {
-    color: #3f87f7;
-    font-size: 2rem;
-    font-weight: 700;
-}
-
-.tech-sec2 section img {
-    padding: 5rem;
-    margin: 0 auto;
-    box-shadow: 1px 1px 5px 5px #b2b2b236;
-    background-color: rgb(190, 190, 190);
-    /* border: 1px solid red; */
-    width: 50%;
-}
-
-.tech-sec2 div {
-    padding: 2rem 0;
-}
-
-
-
-.tech-sec2 p {
-    font-size: 1.7rem;
-
-}
-
-.tech-sec2-end p {
-    text-align: right;
-    font-size: 1.5rem;
-}
-
-.tech-sec2-end p span {
-    color: #3f87f7;
-    margin-right: 1rem;
-}
-
-.tech-sec2-end p:nth-child(2) {
-    text-align: right;
-}
-
-
-.tech-sec2-bt {
-    text-align: right;
-    width: 100%;
-    padding: 2rem 0 6rem 0;
-}
-
-.tech-sec2-bt button {
-    width: 15%;
-    padding: 1rem;
-    background-color: #3f87f7;
-    color: white;
-    border-radius: 0.5rem;
-    font-family: "Pretendard-Regular";
-
-}
-
-@media all and (max-width: 479px) {
-
-    .tech-logo,
-    .tech-logo img {
-        /* width: 100%; */
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .tech-sec1 {
-        grid-template-columns: 1fr;
-    }
-
-    .tech-sec2 section {
-
-        grid-template-columns: 1fr;
-    }
-
-    .tech-sec2 section img {
-        padding: 0rem;
-    }
-
-    .tech-sec2 section div:nth-child(1) {
-        padding: 5rem 2rem;
-    }
-}
-
-@media all and (min-width: 480px) and (max-width: 767px) {
-
-    .tech-logo,
-    .tech-logo img {
-        /* width: 100%; */
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .tech-sec1 {
-        grid-template-columns: 1fr;
-    }
-
-    .tech-sec2 section {
-
-        grid-template-columns: 1fr;
-    }
-
-    .tech-sec2 section img {
-        padding: 0rem;
-    }
-
-    .tech-sec2 section div:nth-child(1) {
-        padding: 5rem 2rem;
-    }
-}
-
-@media all and (min-width: 767px) and (max-width: 1023px) {
-    .tech-sec1 {
-        grid-template-columns: 75% 25%;
-    }
-}
-
 @media all and (min-width: 1023px) and (max-width: 1268px) {
     .tech-sec1 {
         grid-template-columns: 80% 20%;

799ba68

d468db6

client/views/pages/user/community/News.vue

--- client/views/pages/user/community/News.vue

+++ client/views/pages/user/community/News.vue


 }
 </script>
 
-<style scoped>
-.new-logo img {
-    width: 50px;
-    height: 50px;
-    z-index: -1;
-    /* transform: translateY(-40px); */
-}
-
-/* 모달 */
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
-}
-
-.modal-content {
-    top: 50%;
-    left: 50%;
-    position: fixed;
-    z-index: 9999;
-    /* bottom: auto; */
-    padding: 4rem;
-    border-radius: 2rem;
-    background-color: #f9f9f9;
-    transform: translate(-50%, -50%);
-    /* margin: 0 auto; */
-    box-shadow: 2px 2px 5px #86868644;
-    width: 70%;
-    margin: 0 auto;
-
-    height: 70%;
-}
-
-.modal-content button {
-    position: relative;
-    /* margin: 50%; */
-    transform: translate(-52%, 0);
-    top: 10%;
-    left: 50%;
-    padding: 2rem 6rem 2rem;
-    background-color: #007aff;
-    border-radius: 2rem;
-
-    color: white;
-    font-family: "Pretendard-Regular";
-
-}
-
-/* ----------------------------------- */
-.news-bos {
-    width: 100%;
-    display: grid;
-    gap: 3rem;
-    grid-template-columns: 1fr 1fr 1fr;
-    padding: 6rem 6rem 12rem 6rem;
-    /* border: 1px solid red; */
-}
-
-.news-bos-box {
-    display: grid;
-    grid-template-columns: 1fr;
-    margin: 0 auto;
-    border-radius: 2rem;
-    padding: 2rem;
-    background-color: #f7f7f7;
-    box-shadow: 2px 2px 5px #8484847c;
-}
-
-.news-bos-box div {
-    padding: 1rem;
-}
-
-.modal-img {
-    width: 100%;
-    height: 195px;
-    /* border: 1px solid/ red; */
-}
-
-.news-bos-box div h3 {
-    font-size: 1.7rem;
-    padding: 1rem;
-}
-
-.news-bos-box img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 2.5rem;
-    box-shadow: 2px 2px 5px #8484847c;
-
-}
-
-.news-box-end {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-
-}
-
-.news-box-sed p {
-    font-size: 1.5rem;
-    /* padding: 1rem; */
-    /* background-color: aquamarine; */
-}
-
-.news-box-end p {
-    font-size: 1.5rem;
-    color: #3f87f7;
-    /* padding: 1rem; */
-}
-
-.news-box-end p span {
-    color: #333;
-
-}
-
-.news-box-end p:nth-child(2) {
-
-    text-align: right;
-}
-
-
-@media all and (max-width: 479px) {
-    .news-bos {
-        grid-template-columns: 1fr;
-
-    }
-
-    .new-logo {
-        width: 100%;
-        text-align: center;
-
-    }
-
-    .new-logo img {
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .modal-content {
-        height: 50%;
-        width: 90%;
-    }
-}
-
-@media all and (min-width: 480px) and (max-width: 767px) {
-    .news-bos {
-        grid-template-columns: 1fr 1fr;
-
-    }
-
-    .new-logo {
-        width: 100%;
-        text-align: center;
-
-    }
-
-    .new-logo img {
-        margin: 0 auto;
-        text-align: center;
-    }
-}
-</style>
-
 

799ba68

d468db6

client/views/pages/user/community/Notice.vue

--- client/views/pages/user/community/Notice.vue

+++ client/views/pages/user/community/Notice.vue


             </section>
             <div class="data-select">
                 <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
-                    <option :value = null selected>전체</option>
+                    <option :value=null selected>전체</option>
                     <option value="title">제목</option>
                     <option value="user">작성자</option>
                     <option value="조회순">조회순</option>
                 </select>
                 <div class="input-group">
-                    <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
+                    <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
+                        @keyup.enter="postSelectList()">
                     <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
                 </div>
             </div>

                             <td>{{ item.view_cnt }}</td>
                         </tr>
                         <tr v-if="postListCount == 0">
-                           <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
+                            <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
                         </tr>
                     </table>
                 </div>

         }
     },
     methods: {
-        postSelectList: function() {
+        postSelectList: function () {
             const vm = this;
-            
+
             axios({
                 url: '/post/postSelectList.json',
                 method: 'post',

                     'Content-Type': "application/json; charset=UTF-8",
                 },
                 data: vm.postListSearch
-            }).then(function(response) {
+            }).then(function (response) {
                 vm.postList = response.data.postSelectList;
                 vm.postListCount = response.data.postSelectListCount;
                 vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
-            }).catch(function(error) {
+            }).catch(function (error) {
                 alert('공지사항 목록 조회 오류, 관리자에게 문의하세요.');
             })
         },

         yyyymmdd: function (date) {
             return COMMON_UTIL.yyyymmdd(date);
         },
-        
+
         //게시글 상세조회 페이지로 이동
         postSelectOnePage: function (item) {
-            this.$router.push({ path: '/', query: {'post_id': item.post_id}});
+            this.$router.push({ path: '/', query: { 'post_id': item.post_id } });
         },
     },
     watch: {

 }
 </script>
 
-<style scoped>
-.noti-bos {
-    width: 100%;
-}
 
-
-
-.noti-sec {
-    width: 100%;
-    padding: 12rem 3rem;
-}
-
-.noti-sec-table table {
-    background-color: white;
-    border-bottom: 1px solid #cccccc;
-
-}
-
-.noti-sec-table th {
-    padding: 1.5rem;
-    color: white;
-    background-color: #007aff;
-    font-size: 1.5rem;
-}
-
-.noti-sec-table td {
-    padding: 1.5rem;
-    font-size: 1.5rem;
-    cursor: pointer;
-    border-bottom: 1px solid #cccccc;
-    text-align: center;
-}
-</style>
 
 

799ba68

d468db6

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

--- client/views/pages/user/introduction/Introduction.vue

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


 }
 </script>
 
-<style scoped>
-.intro {
-    width: 100%;
-    padding: 6rem;
-}
-
-.intro-logo {
-    width: 100%;
-    padding: 6rem 2rem;
-
-}
-
-.intro-logo h1 {
-    font-size: 3rem;
-    font-family: SBaggroM;
-    font-weight: 500;
-    color: #2c407f;
-}
-
-.intro-text {
-    padding: 3rem;
-}
-
-.intro-text h3 {
-    padding: 1rem 1rem 3rem;
-    font-size: 2rem;
-    color: #00335a;
-    font-family: "Pretendard-Regular";
-
-}
-
-.intro-text i {
-    padding: 1rem;
-    color: #00335a;
-    font-family: "Pretendard-Regular";
-
-
-}
-
-.intro-text p {
-    padding: 1rem;
-    font-size: 1.5rem;
-    color: #00335a;
-    font-family: "Pretendard-Regular";
-
-
-}
-
-.intro-img {
-    padding: 3rem;
-    display: grid;
-    gap: 0;
-    grid-template-columns: 1fr 1fr 1fr;
-}
-
-.intro-img img:nth-child(2) {
-    transform: translateY(-4.8rem);
-}
-
-.intro-img img:nth-child(3) {
-    transform: translateY(-9.7rem);
-}
-
-@media all and (max-width: 479px) {
-
-    .intro {
-        width: 100%;
-        padding: 3rem;
-
-    }
-
-    .intro-logo {
-        width: 100%;
-    }
-
-    .intro-text {
-        width: 100%;
-        padding: 2rem;
-    }
-
-    .intro-img {
-        grid-template-columns: 1fr;
-    }
-
-}
-
-@media all and (min-width: 480px) and (max-width: 767px) {
-    .intro {
-        width: 100%;
-        padding: 3rem;
-
-    }
-
-    .intro-logo {
-        width: 100%;
-    }
-
-    .intro-text {
-        width: 100%;
-        padding: 2rem;
-    }
-
-    .intro-img {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media all and (min-width: 767px) and (max-width: 1023px) {
-
-    .intro-img {
-        grid-template-columns: 1fr;
-    }
-}
-</style>
 
 

799ba68

d468db6

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

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

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


                                 <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" />
+                                <input type="file" accept="image/*" name="logoImg" id="logoImg" style="display: none;" />
+                                <label for="logoImg">파일선택</label>
                             </div>
                         </section>
                     </div>

                             </div>
                             <div class="join-sub-input">
                                 <input type="file" name="companyProfile" id="companyProfile" ref="companyProfile"
-                                @change="companyProfileUpload"/>
+                                    @change="companyProfileUpload" />
                             </div>
                         </section>
                     </div>

                     </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>
+                    <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>@</div>
                         <div>
-                            <input v-if="select_email_dns==null" type="text" name="email_dns" id="email_dns" v-model="email_dns">
+                            <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>

                         </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>
+                            <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="">직접 입력</option>

 export default {
     data() {
         return {
-            company:{
-                company_id:null,
-                company_nm:null,
-                company_info:null,
-                file_id:null,
+            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,
+            user: {
+                user_id: null,
+                user_pw: null,
+                user_eml: null,
+                user_auth: null,
             },
-            file:null,
-            keyword:{
+            file: null,
+            keyword: {
 
             },
-            logo_img:null,
-            business_card_img:null,
-            company_profile:null,
+            logo_img: null,
+            business_card_img: null,
+            company_profile: null,
             //기업 ID 중복 확인
-            companyIdCheck_boolean:null,
+            companyIdCheck_boolean: null,
             //사용자 ID 중복 확인
-            userIdCheck_boolean:null,
+            userIdCheck_boolean: null,
             //PW 확인
-            pwCheck:null,
-            passwordCheckFlag:null,
-            email_id:null,
-            email_dns:null,
-            select_email_dns:null,
+            pwCheck: null,
+            passwordCheckFlag: null,
+            email_id: null,
+            email_dns: null,
+            select_email_dns: null,
             selectedMembership: 'company',
             isVisible: false,
         }

             else this.passwordCheckFlag = true;
         },
         //company ID 중복 검사
-        companyIdCheck: function() {
+        companyIdCheck: function () {
             const vm = this;
             axios({
                 url: '/company/companySelectOne.json',
                 method: 'post',
                 herders: {
-                'Content-Type': "application/json; charset=UTF-8",
+                    'Content-Type': "application/json; charset=UTF-8",
                 },
                 data: vm.company
-            }).then( function (response) {
+            }).then(function (response) {
                 // console.log("idCheck - response : ", response.data);
-                if(response.data != null) {
+                if (response.data != null) {
                     alert("중복된 사업자등록번호 입니다.");
                     vm.companyIdCheck_boolean = false;
                     return false;

                     vm.companyIdCheck_boolean = true;
                     return true;
                 }
-            }).catch( function (error) {
+            }).catch(function (error) {
                 console.log("companyIdCheck - error : ", error);
                 alert("중복검사 오류, 다시 시도해주세요.");
             });
         },
 
         //user ID 중복 검사
-        userIdCheck: function() {
+        userIdCheck: function () {
             const vm = this;
             axios({
                 url: '/user/userSelectOne.json',
                 method: 'post',
                 herders: {
-                'Content-Type': "application/json; charset=UTF-8",
+                    'Content-Type': "application/json; charset=UTF-8",
                 },
                 data: vm.user
-            }).then( function (response) {
+            }).then(function (response) {
                 // console.log("idCheck - response : ", response.data);
-                if(response.data != null) {
+                if (response.data != null) {
                     alert("중복된 ID 입니다.");
                     vm.userIdCheck_boolean = false;
                     return false;
                 } else {
-                alert("사용가능한 ID 입니다.");
+                    alert("사용가능한 ID 입니다.");
                     vm.userIdCheck_boolean = true;
                     return true;
                 }
-            }).catch( function (error) {
+            }).catch(function (error) {
                 console.log("userIdCheck - error : ", error);
                 alert("중복검사 오류, 다시 시도해주세요.");
             });
         },
 
         userInsert: function () {
-            this.user.user_auth=this.selectedMembership;
+            this.user.user_auth = this.selectedMembership;
             const vm = this;
             axios({
                 url: "/user/userInsert.json",

                 console.log("companyInsert - error : ", error);
             });
         },
-        joinInsert:function(){
-            if(this.selectedMembership=="company"){
+        joinInsert: function () {
+            if (this.selectedMembership == "company") {
                 this.companyInsert();
             }
-            else{
+            else {
                 this.userInsert();
             }
         },

             //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()) {

         }
     },
     watch: {
-        "email_id":function(){
-            this.user["user_eml"]=this.email_id+"@"+this.email_dns;
+        "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;
+        "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;
+        "select_email_dns": function () {
+            this.user["user_eml"] = this.email_id + "@" + this.select_email_dns;
         },
     },
     computed: {

 
 .background {
     background-color: #000000;
+
 }
 
 .join-b-button button:nth-child(1).background {

 .joinsub0-1 {
     padding: 1rem;
     display: grid;
-    grid-template-columns: 200px 2fr;
+    grid-template-columns: 209px 2fr;
 
 }
 

 
 
 
-@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: 767px) and (max-width: 1023px) {}
 
 @media all and (min-width: 1023px) and (max-width: 1268px) {
     .email-sec {

799ba68

d468db6

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

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

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


                                 </div>
                             </div>
                             <div class="main-partner-logo">
-                                <div class="main-partner-img lo1"></div>
-                                <div class="main-partner-img lo2"></div>
-                                <div class="main-partner-img lo3"></div>
-                                <div class="main-partner-img lo4"></div>
-                                <div class="main-partner-img lo5"></div>
+                                <div class="main-partner-img lo1">
+                                </div>
+                                <div class="main-partner-img lo2">
+
+                                </div>
+                                <div class="main-partner-img lo3">
+
+                                </div>
+                                <div class="main-partner-img lo4">
+
+
+                                </div>
+                                <div class="main-partner-img lo5">
+
+
+                                </div>
+
                             </div>
-
                         </div>
-                    </div>
 
+                    </div>
                 </div>
             </div>
 

 </script>
 
 <style scoped>
+/* 스와이퍼--------------------------------------- */
 .swiper-button-prev:after,
 .swiper-button-next:after {
     color: aliceblue;

     padding: 50px;
 }
 
-
 .swiper-div {
     display: flex;
     align-items: center;

     color: white;
 }
 
-
-
 .swiper-slide img {
     width: 40%;
 }

     height: 100px;
     transition-timing-function: linear;
 }
+
+/*--------------------------------------- */
 </style>

799ba68

d468db6

client/views/pages/user/mypage/Info.vue

--- client/views/pages/user/mypage/Info.vue

+++ client/views/pages/user/mypage/Info.vue


 }
 </script>
 
-<style scoped>
-div {
-    width: 100%;
-    background-color: white;
-}
-
-.info-box-button {
-    width: 60%;
-    margin: 0 auto;
-    display: grid;
-    padding: 0 0 6rem 0;
-    grid-template-columns: 1fr 1fr;
-}
-
-.info-sec-bt {
-    /* border: 1px solid red; */
-    width: 60%;
-    margin: 0 auto;
-    padding: 6rem;
-    text-align: right;
-}
-
-.info-sec-bt button {
-    width: 30%;
-    padding: 2rem;
-    color: white;
-    border-radius: 1.5rem;
-    background-color: #3f87f7;
-}
-
-.info-box-button button {
-    padding: 3rem 2rem 3rem 2rem;
-    margin-right: 3rem;
-    color: white;
-    border-radius: 2rem;
-}
-
-.info-sec,
-.info-sec-1 {
-    padding: 6rem;
-    margin: 0 auto;
-    border: 1px soli/d #333;
-    width: 60%;
-}
-
-.info-sec div,
-.info-sec-1 div {
-    display: grid;
-
-    border-bottom: 1px solid #333;
-    grid-template-columns: 30% 2fr;
-}
-
-.info-sec div p {
-    padding: 3rem;
-    font-size: 1.5rem;
-
-}
-
-.info-sec-1 div a {
-    padding: 3rem;
-}
-
-.info-sec-1 div p {
-    padding: 3rem;
-    font-size: 1.5rem;
-
-    /* border-bottom: 1px solid #333; */
-}
-
-.info-sec-1 section {
-    padding: 3rem;
-}
-
-.info-sec-1 section img {
-
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    /* border: 1px solid red; */
-    margin: 0 auto;
-    box-shadow: 2px 2px 5px #33333345;
-
-}
-
-.info-td {
-    /* border: 1px solid red; */
-    height: 250px;
-}
-</style>
 
 

799ba68

d468db6

client/views/pages/user/mypage/Infosub.vue

--- client/views/pages/user/mypage/Infosub.vue

+++ client/views/pages/user/mypage/Infosub.vue


 }
 </script>
 
-<style scoped>
-div {
-    width: 100%;
-    background-color: white;
-}
 
-.info-pw {
-    display: grid;
-    grid-template-columns: 30% 1fr 1fr !important;
-}
-
-.info-pw button {
-    margin: 2rem;
-    border-radius: 0.5rem;
-    background-color: #3f87f7;
-    color: white;
-}
-
-.info-box-button {
-    width: 60%;
-    margin: 0 auto;
-    display: grid;
-    padding: 0 0 6rem 0;
-    grid-template-columns: 1fr 1fr;
-}
-
-.info-sec-bt {
-    /* border: 1px solid red; */
-    width: 60%;
-    margin: 0 auto;
-    padding: 6rem;
-    text-align: right;
-}
-
-.info-sec-bt button {
-    width: 30%;
-    padding: 2rem;
-    color: white;
-    border-radius: 1.5rem;
-    background-color: #3f87f7;
-}
-
-.info-box-button button {
-    padding: 3rem 2rem 3rem 2rem;
-    margin-right: 3rem;
-    color: white;
-    border-radius: 2rem;
-}
-
-.info-sec,
-.info-sec-1 {
-    padding: 6rem;
-    margin: 0 auto;
-    border: 1px soli/d #333;
-    width: 60%;
-}
-
-.info-sec div,
-.info-sec-1 div {
-    display: grid;
-
-    border-bottom: 1px solid #333;
-    grid-template-columns: 30% 2fr;
-}
-
-.info-sec div p {
-    /* border-bottom: 1px solid #333; */
-    padding: 3rem;
-    font-size: 1.5rem;
-
-}
-
-.info-sec-1 div p {
-    padding: 3rem;
-    font-size: 1.5rem;
-
-}
-
-.info-sec-1 section {
-    margin: 0 auto;
-    width: 30%;
-    text-align: center;
-}
-
-.info-sec-1 section img {
-    width: 100%;
-    margin: 0 auto;
-}
-
-
-.info-td {
-    /* border: 1px solid red; */
-    height: 250px;
-}
-
-.info-input {
-    width: 100%;
-    padding: 2rem;
-    border-radius: 0.5rem;
-}
-
-.info-td input {
-    height: 100%;
-    width: 100%;
-    padding: 2rem;
-    border-radius: 0.5rem;
-}
-</style>
 
 

799ba68

d468db6

client/views/pages/user/networking/Matching.vue

--- client/views/pages/user/networking/Matching.vue

+++ client/views/pages/user/networking/Matching.vue


 }
 </script>
 
-<style scoped>
-.matching-box-wrap {
-    width: 100%;
-    background: linear-gradient(#5dadf6, #2e87da, #5dadf6);
-}
-
-.matching-wrap {
-    padding: 30px 30px;
-    display: grid;
-    width: 100%;
-    /* border: 1px solid red; */
-    justify-content: center;
-    grid-template-columns: 1fr 1fr 1fr;
-}
-
-.matching-wrap div {
-    /* width: 40%; */
-    width: 100%;
-    /* border: 1px solid red; */
-}
-
-.matching-wrap img {
-    width: 100%;
-    margin: 0 auto;
-    /* text-align: center; */
-    justify-content: center;
-}
-
-.matching-text {
-    margin: 0 auto;
-    text-align: center;
-    font-size: 5rem;
-    /* padding-bottom: 50px; */
-    font-family: SBaggroM;
-    color: white;
-}
-
-.matching-box-wrap-one {
-    width: 100%;
-    height: 100%;
-    padding: 3rem;
-    margin: 0 auto;
-    text-align: center;
-    color: #3f87f7;
-    background-color: #e2e2e2;
-}
-
-.matching-box-grid>h3 {
-    font-size: 2.6rem;
-    padding: 3rem;
-    font-family: SBaggroM;
-}
-
-.matching-box-bos {
-    width: 100%;
-    place-items: center;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-}
-
-.matchingbox {
-    width: 90%;
-    padding: 2rem;
-}
-
-.matchingbox h3 {
-    padding: 1rem;
-    font-size: 2rem;
-    color: #3f87f7;
-    font-family: "Pretendard-Regular";
-}
-
-.matchingbox img {
-    /* padding: 2rem; */
-    height: 119px;
-    width: 80%;
-    margin: 0 auto;
-    object-fit: contain;
-}
-
-.matchingbox p:nth-child(3) {
-    text-align: left;
-    color: #333;
-    font-size: 1.5rem;
-    padding: 1rem;
-}
-
-.matchingbox p:nth-child(4) {
-    text-align: right;
-    font-size: 1.5rem;
-    color: #333;
-
-    padding: 1rem;
-}
-
-.matchingbox div {
-    padding: 1rem;
-    background-color: #ffffff;
-    box-shadow: 2px 2px 2px #33333332;
-    position: relative;
-}
-
-.matchingbox div:nth-child(1):before {
-    position: absolute;
-    content: "AA등급";
-    line-height: 40px;
-    color: white;
-    font-size: 1.5rem;
-    font-weight: 800;
-    width: 90px;
-    height: 40px;
-    top: -25px;
-    right: -5%;
-    background-color: #3f87f7;
-    border-radius: 45px;
-    transform: translateX(-50%);
-}
-
-.matchingbox-1 {
-    display: flex;
-    box-shadow: 0px 0px 0px white !important;
-    flex-direction: row;
-    justify-content: flex-end;
-}
-
-.matchingbox-1 p {
-    text-align: right;
-    font-size: 1.5rem;
-    padding: 1rem;
-    color: rgb(6, 6, 6);
-}
-
-.matchingbox-text {
-    text-align: right;
-    font-size: 1.3rem;
-    padding: 1rem;
-    font-weight: 700;
-    color: rgb(6, 6, 6);
-}
-
-.matchingbox-text span {
-    font-weight: 400;
-}
-
-.matching-box-main-two {
-    width: 100%;
-    margin: 0 auto;
-}
-
-.matching-box-grid-two {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    margin: 0 auto;
-    place-items: center;
-
-    padding: 3rem;
-}
-
-.matching-box-2 {
-    padding: 2rem;
-    margin: 1rem;
-    background-color: #f9f9f9;
-    box-shadow: 2px 2px 5px #33333332;
-}
-
-.matching-box-2 div {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.matching-box-2 h5 {
-    width: 100%;
-    font-size: 1.5rem;
-    font-family: "Pretendard-Regular";
-}
-
-.matching-box-2 p {
-    width: 100%;
-    font-size: 1.5rem;
-    text-align: right;
-    justify-content: right;
-    font-family: "Pretendard-Regular";
-}
-
-.matchingbox-2 {
-    width: 100%;
-
-    display: flex;
-    padding: 1.5rem 0px;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    flex-direction: row !important;
-}
-
-.matchingbox-2 p {
-    width: 25%;
-}
-
-@media all and (max-width:479px) {
-    .matching-box img {
-        width: 100%;
-    }
-
-    .matching-span span {
-        padding: 1rem 1.5rem 1rem 1.5rem;
-    }
-
-    .matching-box-bos {
-        grid-template-columns: 1fr;
-    }
-
-    .matching-box-grid-two {
-        grid-template-columns: 1fr;
-        width: 100%;
-    }
-
-    .matching-text {
-        /* display: none; */
-        padding-top: 3rem;
-        font-size: 2rem;
-    }
-}
-
-@media all and (min-width: 480px) and (max-width: 767px) {
-    .matching-box img {
-        width: 100%;
-    }
-
-    .matching-box-bos {
-        grid-template-columns: 1fr;
-    }
-
-    .matching-box-grid-two {
-        grid-template-columns: 1fr;
-    }
-
-    .mat-sec-b {
-        width: 90%;
-    }
-
-    .matching-text {
-        font-size: 3rem;
-    }
-}
-
-@media all and (min-width: 767px) and (max-width: 1023px) {
-    .matching-box img {
-        width: 100%;
-    }
-
-    .matching-box-bos {
-        width: 100%;
-        grid-template-columns: 1fr 1fr;
-    }
-
-    .matching-box-grid-two {
-        grid-template-columns: 1fr 1fr;
-    }
-
-    .mat-sec-b {
-        width: 90%;
-    }
-}
-
-@media all and (min-width: 1023px) and (max-width: 1268px) {}
-</style>

799ba68

d468db6

client/views/pages/user/networking/MatchingOne.vue

--- client/views/pages/user/networking/MatchingOne.vue

+++ client/views/pages/user/networking/MatchingOne.vue


 </script>
 
 <style scoped>
-.mat-bos {
-    padding: 6rem 6rem 1rem 6rem;
-    width: 100%;
-}
-
-.mat-bos img {
-    width: 50px;
-    /* transform: translateY(10px);/ */
-    z-index: -1;
-}
-
-.mat-bos h1 {
-    font-size: 2.7rem;
-    z-index: 100 !important;
-    font-family: SBaggroM;
-}
-
-.matDtail-sec {
-    width: 100%;
-    padding: 0rem 6rem 6rem 6rem;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.mat-sec1 {
-    display: grid;
-    grid-template-columns: 85% 15%;
-    padding: 2rem 3rem 1rem 3rem;
-    background-color: #f4f4f4;
-    border-top: 1px solid rgb(199, 199, 199);
-}
-
-.mat-sec1 h2 {
-    font-size: 2rem;
-    color: #3f87f7;
-}
-
-.mat-sec1 h2 span {
-    color: #90baff;
-    font-size: 1.5rem;
-}
-
-.mat-sec1 div {
-    padding: 1rem;
-    border-radius: 0.5rem;
-    margin-top: 3rem;
-    /* text-align: right; */
-    text-align: center;
-    background-color: #3f87f7;
-
-}
-
-.mat-sec1 div label {
-    color: white;
-    font-size: 1.5rem;
-    margin-right: 1rem;
-}
-
-.mat-sec1 div i {
-    font-size: 1.5rem;
-}
-
-.mat-sec2 {
-
-    border-top: 1px solid rgb(199, 199, 199);
-    border-bottom: 1px solid rgb(199, 199, 199);
-}
-
-.mat-sec2 div {
-    padding: 2rem 0;
-}
-
-.mat-sec2-end {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-}
-
-.mat-sec2 p {
-    font-size: 1.7rem;
-
-}
-
-.mat-sec2-end p {
-    font-size: 1.5rem;
-}
-
-.mat-sec2-end p span {
-    color: #3f87f7;
-    margin-right: 1rem;
-}
-
-.mat-sec2-end p:nth-child(2) {
-    text-align: right;
-}
-
-.mat-sec2-bt {
-    text-align: right;
-    width: 100%;
-    padding: 2rem 0;
-}
-
-.mat-sec2-bt button {
-    width: 15%;
-    padding: 1rem;
-    background-color: #3f87f7;
-    color: white;
-    border-radius: 0.5rem;
-    font-family: "Pretendard-Regular";
-
-}
-
-@media all and (max-width:479px) {
-    .mat-bos {
-        width: 100%;
-        padding: 2rem;
-    }
-
-    .mat-bos h1,
-    .mat-bos img {
-        text-align: center;
-        margin: 0 auto;
-    }
-
-    .mat-sec1 {
-        grid-template-columns: 1fr;
-    }
-
-    .matDtail-sec {
-        width: 100%;
-        padding: 2rem;
-    }
-
-    .mat-span span {
-        padding: 1rem 1.5rem 1rem 1.5rem;
-    }
-
-}
-
-@media all and (min-width: 480px) and (max-width: 767px) {
-    .mat-bos {
-        width: 100%;
-        padding: 2rem;
-    }
-
-    .mat-bos h1,
-    .mat-bos img {
-        text-align: center;
-        margin: 0 auto;
-    }
-
-    .mat-sec1 {
-        grid-template-columns: 1fr;
-
-    }
-
-    .matDtail-sec {
-        width: 100%;
-        padding: 2rem;
-    }
-}
-
-@media all and (min-width: 767px) and (max-width: 1023px) {
-    .mat-sec1 {
-        grid-template-columns: 75% 25%;
-
-    }
-}
-
 @media all and (min-width: 1023px) and (max-width: 1268px) {
     .mat-sec1 {
         grid-template-columns: 80% 20%;

799ba68

d468db6

webpack.config.js

--- webpack.config.js

+++ webpack.config.js


 const { VueLoaderPlugin } = require("vue-loader");
-const {PROJECT_NAME, BASE_DIR, SERVICE_STATUS} = require('./Global');
+const { PROJECT_NAME, BASE_DIR, SERVICE_STATUS } = require("./Global");
 
 module.exports = {
   name: PROJECT_NAME,
   mode: SERVICE_STATUS,
-  devtool: 'eval',
+  devtool: "eval",
 
   entry: {
-    app: [`${BASE_DIR}/client/views/index.js`]
+    app: [`${BASE_DIR}/client/views/index.js`],
   },
 
   module: {
-    rules: [{
-      test: /\.vue?$/,
-      loader: 'vue-loader',
-    }, {
-      test: /\.(js|jsx)?$/,
-      loader: 'babel-loader',
-    }, {
-      test: /\.css$/,
-      use: ['vue-style-loader', 'css-loader']
-    }, {
-      test: /\.(jpe?g|png|gif|svg|ttf|eot|woff|woff2)$/i,
-      use: [{
-        loader:'url-loader',
-        options:{
-          limit:8192,
-          fallback:require.resolve('file-loader')
-        }
-      }]
-    }],
+    rules: [
+      {
+        test: /\.vue?$/,
+        loader: "vue-loader",
+      },
+      {
+        test: /\.(js|jsx)?$/,
+        loader: "babel-loader",
+      },
+      {
+        test: /\.css$/,
+        use: ["vue-style-loader", "css-loader"],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg|ttf|eot|woff|woff2)$/i,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 8192,
+              fallback: require.resolve("file-loader"),
+            },
+          },
+        ],
+      },
+    ],
   },
 
   plugins: [new VueLoaderPlugin()],
 
   output: {
-    path: `${BASE_DIR}/client/build`,	// __dirname: webpack.config.js 파일이 위치한 경로
-    filename: 'bundle.js'
+    path: `${BASE_DIR}/client/build`, // __dirname: webpack.config.js 파일이 위치한 경로
+    filename: "bundle.js",
   },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'), // @를 src 디렉토리로 연결
-    },
-  },
-}
+};

Add a comment

Open 0
Closed 0

List

...	...	@@ -300,16 +300,27 @@
300	300	</div>
301	301	</div>
302	302	<div class="main-partner-logo">
303		- <div class="main-partner-img lo1"></div>
304		- <div class="main-partner-img lo2"></div>
305		- <div class="main-partner-img lo3"></div>
306		- <div class="main-partner-img lo4"></div>
307		- <div class="main-partner-img lo5"></div>
	303	+ <div class="main-partner-img lo1">
	304	+ </div>
	305	+ <div class="main-partner-img lo2">
	306	+
	307	+ </div>
	308	+ <div class="main-partner-img lo3">
	309	+
	310	+ </div>
	311	+ <div class="main-partner-img lo4">
	312	+
	313	+
	314	+ </div>
	315	+ <div class="main-partner-img lo5">
	316	+
	317	+
	318	+ </div>
	319	+
308	320	</div>
309		-
310	321	</div>
311		- </div>
312	322
	323	+ </div>
313	324	</div>
314	325	</div>
315	326
...	...	@@ -365,6 +376,7 @@
365	376	</script>
366	377
367	378	<style scoped>
	379	+/* 스와이퍼--------------------------------------- */
368	380	.swiper-button-prev:after,
369	381	.swiper-button-next:after {
370	382	color: aliceblue;
...	...	@@ -385,7 +397,6 @@
385	397	padding: 50px;
386	398	}
387	399
388		-
389	400	.swiper-div {
390	401	display: flex;
391	402	align-items: center;
...	...	@@ -403,8 +414,6 @@
403	414	color: white;
404	415	}
405	416
406		-
407		-
408	417	.swiper-slide img {
409	418	width: 40%;
410	419	}
...	...	@@ -413,4 +422,6 @@
413	422	height: 100px;
414	423	transition-timing-function: linear;
415	424	}
	425	+
	426	+/--------------------------------------- /
416	427	</style>

...	...	@@ -24,7 +24,7 @@
24	24	}
25	25
26	26
27		-/* 테블릿 세로*/
	27	+/* 테블릿 세로*/
28	28	@media all and (min-width: 767px) and (max-width: 1023px) {
29	29
30	30	html {
...	...	@@ -262,7 +262,97 @@
262	262	.mat-text {
263	263	font-size: 5rem;
264	264	}
265		-
	265	+ /* Matching */
	266	+ .mat-sec1 {
	267	+ grid-template-columns: 75% 25%;
	268	+
	269	+}
	270	+.matching-box img {
	271	+ width: 100%;
	272	+}
	273	+
	274	+.matching-box-bos {
	275	+ width: 100%;
	276	+ grid-template-columns: 1fr 1fr;
	277	+}
	278	+
	279	+.matching-box-grid-two {
	280	+ grid-template-columns: 1fr 1fr;
	281	+}
	282	+
	283	+.mat-sec-b {
	284	+ width: 90%;
	285	+}
	286	+
	287	+.matching-text {
	288	+ margin-top: 25%;
	289	+}
	290	+
	291	+/* introduction */
	292	+.intro-img {
	293	+ grid-template-columns: 1fr;
	294	+}
	295	+/* join */
	296	+.join-b-button {
	297	+ width: 80%;
	298	+}
	299	+
	300	+.login-info {
	301	+ width: 80%;
	302	+ padding: 3rem 0;
	303	+}
	304	+
	305	+.email-sec {
	306	+ width: 100%;
	307	+ display: grid;
	308	+ /* border: 1px solid red; */
	309	+
	310	+ grid-template-columns: 1fr 30px 1fr 1fr;
	311	+}
	312	+
	313	+.email-sec div {
	314	+ /* padding: 2rem; */
	315	+ padding: 1rem 0;
	316	+ font-size: 1.5rem;
	317	+ font-family: "Pretendard-Regular";
	318	+ /* border: 1px solid red; */
	319	+ text-align: center;
	320	+ gap: 1rem;
	321	+}
	322	+
	323	+.email-sec div:nth-child(2) {
	324	+ padding: 2rem 0;
	325	+}
	326	+
	327	+.login-info2 {
	328	+ width: 80%;
	329	+}
	330	+
	331	+.join-w1400 {
	332	+ width: 80%;
	333	+}
	334	+/* technology */
	335	+.tech-sec1 {
	336	+ grid-template-columns: 75% 25%;
	337	+}
	338	+
	339	+.tech-logo {
	340	+ width: 100%;
	341	+ text-align: center;
	342	+
	343	+}
	344	+
	345	+.tech-logo img {
	346	+ margin: 0 auto;
	347	+
	348	+}
	349	+
	350	+.tech-bos {
	351	+ width: 90%;
	352	+ grid-template-columns: 1fr 1fr;
	353	+}
	354	+
	355	+
266	356	}
267	357	/* 모바일 가로, 테블릿 세로 */
268	358	@media all and (min-width: 480px) and (max-width: 767px) {
...	...	@@ -370,6 +460,26 @@
370	460	.router-link:hover {
371	461	background-color: #e0e0e0;
372	462	}
	463	+ .main-puzzle-container{
	464	+ grid-template-columns: 1fr;
	465	+ }
	466	+ .main-history-box{
	467	+ grid-template-columns: 1fr;
	468	+
	469	+ }
	470	+ .main-partner-logo{
	471	+ height: 50rem;
	472	+ grid-template-columns: 1fr;
	473	+ row-gap: 10px;
	474	+ }
	475	+ .main-partner-img{
	476	+ width: 80%;
	477	+ margin: 0 auto;
	478	+ }
	479	+ .main-notice{
	480	+ width: 90%;
	481	+ /* grid-column: 1; */
	482	+ }
373	483	/* 햄버거 끝! */
374	484	.mobile1 {
375	485	flex: 0 0 10%;
...	...	@@ -440,7 +550,19 @@
440	550	.lo5 {
441	551	background-size: contain;
442	552	}
443		-
	553	+ /* 매칭서비스 */
	554	+ .mat-b-g-g {
	555	+ grid-template-columns: 1fr;
	556	+ }
	557	+ .mat-sec-a-1 {
	558	+ grid-template-columns: 1fr;
	559	+ }
	560	+ .mat-sec-b {
	561	+ width: 90%;
	562	+ }
	563	+ .mat-text {
	564	+ font-size: 3rem;
	565	+ }
444	566	/* 자료집 */
445	567	.data-main {
446	568	width: 100%;
...	...	@@ -485,6 +607,235 @@
485	607	text-align: center;
486	608	margin: 0 auto;
487	609	}
	610	+
	611	+ /* news */
	612	+ .news-bos {
	613	+ grid-template-columns: 1fr 1fr;
	614	+
	615	+}
	616	+
	617	+.new-logo {
	618	+ width: 100%;
	619	+ text-align: center;
	620	+
	621	+}
	622	+
	623	+.new-logo img {
	624	+ margin: 0 auto;
	625	+ text-align: center;
	626	+}
	627	+/* matching */
	628	+.mat-bos {
	629	+ width: 100%;
	630	+ padding: 2rem;
	631	+}
	632	+
	633	+.mat-bos h1,
	634	+.mat-bos img {
	635	+ text-align: center;
	636	+ margin: 0 auto;
	637	+}
	638	+
	639	+.mat-sec1 {
	640	+ grid-template-columns: 1fr;
	641	+
	642	+}
	643	+
	644	+.matDtail-sec {
	645	+ width: 100%;
	646	+ padding: 2rem;
	647	+}
	648	+.matching-box img {
	649	+ width: 100%;
	650	+}
	651	+
	652	+.matching-box-bos {
	653	+ grid-template-columns: 1fr;
	654	+}
	655	+
	656	+.matching-box-grid-two {
	657	+ grid-template-columns: 1fr;
	658	+}
	659	+
	660	+.mat-sec-b {
	661	+ width: 90%;
	662	+}
	663	+
	664	+.matching-text {
	665	+ font-size: 3rem;
	666	+}
	667	+
	668	+.matching-text {
	669	+ margin-top: 25%;
	670	+}
	671	+/* join */
	672	+.join-logo h1 {
	673	+ font-size: 2.2rem;
	674	+}
	675	+
	676	+.login-info,
	677	+.login-info2 {
	678	+ width: 100%;
	679	+ padding: 1rem;
	680	+}
	681	+
	682	+.join-b-button {
	683	+ padding: 4rem;
	684	+ /* gap: 1rem; */
	685	+ width: 100%;
	686	+}
	687	+
	688	+.login-info {
	689	+ width: 100%;
	690	+}
	691	+
	692	+.joinsub0 {
	693	+ grid-template-columns: 1fr;
	694	+}
	695	+
	696	+.joinsub {
	697	+ grid-template-columns: 1fr;
	698	+
	699	+}
	700	+
	701	+.join-sec6 {
	702	+
	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	+/* inrtoduction */
	781	+.intro {
	782	+ width: 100%;
	783	+ padding: 3rem;
	784	+
	785	+}
	786	+
	787	+.intro-logo {
	788	+ width: 100%;
	789	+}
	790	+
	791	+.intro-text {
	792	+ width: 100%;
	793	+ padding: 2rem;
	794	+}
	795	+
	796	+.intro-img {
	797	+ grid-template-columns: 1fr;
	798	+}
	799	+/* technology */
	800	+.tech-logo {
	801	+ width: 100%;
	802	+ text-align: center;
	803	+
	804	+}
	805	+
	806	+.tech-logo img {
	807	+ margin: 0 auto;
	808	+
	809	+}
	810	+
	811	+.tech-bos {
	812	+ width: 90%;
	813	+ gap: 1rem;
	814	+ grid-template-columns: 1fr 1fr;
	815	+}
	816	+.tech-logo,
	817	+ .tech-logo img {
	818	+ /* width: 100%; */
	819	+ margin: 0 auto;
	820	+ text-align: center;
	821	+ }
	822	+
	823	+ .tech-sec1 {
	824	+ grid-template-columns: 1fr;
	825	+ }
	826	+
	827	+ .tech-sec2 section {
	828	+
	829	+ grid-template-columns: 1fr;
	830	+ }
	831	+
	832	+ .tech-sec2 section img {
	833	+ padding: 0rem;
	834	+ }
	835	+
	836	+ .tech-sec2 section div:nth-child(1) {
	837	+ padding: 5rem 2rem;
	838	+ }
488	839	}
489	840
490	841	/* 모바일 가로, 테블릿 세로 */
...	...	@@ -546,6 +897,59 @@
546	897	height: 10px;
547	898
548	899	}
	900	+ .mobile1 {
	901	+ flex: 0 0 10%;
	902	+ text-align: center;
	903	+ font-size: 3rem;
	904	+ color: #2c407f;
	905	+ /* border: 1px solid red; */
	906	+}
	907	+
	908	+/* 메뉴 반응형 */
	909	+.sub-nav {
	910	+ position: relative;
	911	+ height: 100%;
	912	+ opacity: 1;
	913	+}
	914	+
	915	+
	916	+
	917	+.logo-toggle {
	918	+ width: 100%;
	919	+ display: flex;
	920	+}
	921	+
	922	+.logo {
	923	+ flex: 0 0 80%;
	924	+ transform: translateY(0px);
	925	+}
	926	+
	927	+.logo span {
	928	+ font-family: "Pretendard-Regular";
	929	+ width: 100%;
	930	+ text-align: center;
	931	+ font-size: 1.7rem;
	932	+ flex: 0 0 90%;
	933	+ margin: 1rem;
	934	+ /* border: 1px solid red; */
	935	+}
	936	+
	937	+.main-menu-1 {
	938	+ display: none !important;
	939	+}
	940	+
	941	+.main-sub-menu {
	942	+ flex: 0 0 100% !important;
	943	+ flex-direction: column;
	944	+ justify-content: end;
	945	+ list-style: none;
	946	+ padding: 5rem;
	947	+ display: none;
	948	+}
	949	+
	950	+.main-sub-menu.open {
	951	+ display: block;
	952	+}
549	953
550	954	.main-menu-1 {
551	955	display: none !important;
...	...	@@ -561,65 +965,34 @@
561	965	.main-sub-menu.open {
562	966	display: block;
563	967	}
564		- .m-text {
565		- display: none;
	968	+ .main-box-wrap{
	969	+ width: 90%;
	970	+ margin: 0 auto;
	971	+ grid-template-columns: 1fr;
566	972	}
567		- .m-text p {
568		- font-size: 1rem;
	973	+ .main-benner{
	974	+ width: 90%;
	975	+
569	976	}
570		- .m-b {
571		- background: url(../jpg/main.png) no-repeat center center;
572		- background-size: cover;
573		- height: auto;
	977	+ .main-puzzle-container{
	978	+ grid-template-columns: 1fr;
574	979	}
575		- .m-text span {
576		- font-size: 25px;
577		- }
	980	+ .main-history-box{
	981	+ grid-template-columns: 1fr;
578	982
579		- .m-p {
580		- padding: 3rem;
581	983	}
582		- .m-b-b {
583		- flex-direction: column;
584		- padding-top: 0;
585		- height: 40rem;
586		- }
587		- .m-benner {
588		- width: 100%;
589		- flex: 100%;
590		- background-size: cover;
591		- box-shadow: 0px 0px 0px;
592		- display: none;
593		- }
594		- .m-p-container {
	984	+ .main-partner-logo{
	985	+ height: 50rem;
595	986	grid-template-columns: 1fr;
	987	+ row-gap: 10px;
596	988	}
597		- .m-h-g {
598		- grid-template-columns: 1fr;
	989	+ .main-partner-img{
	990	+ width: 80%;
	991	+ margin: 0 auto;
599	992	}
600		- .m-pa-pa {
601		- width: 100%;
602		- flex-direction: column;
603		- }
604		- .m-pa-pa div {
605		- justify-content: center;
606		- }
607		- .m-p-c-3 {
608		- background: url(../jpg/m3-1.png) no-repeat;
609		- background-size: cover;
610		- }
611		- .m-pa-logo {
612		- width: 100%;
613		- align-items: center;
614		- height: 5rem;
615		- margin: 2rem;
616		- }
617		- .lo1,
618		- .lo2,
619		- .lo3,
620		- .lo4,
621		- .lo5 {
622		- background-size: contain;
	993	+ .main-notice{
	994	+ width: 90%;
	995	+ grid-column: 1;
623	996	}
624	997	.call p {
625	998	flex: 0 0 100%;
...	...	@@ -629,8 +1002,19 @@
629	1002	margin-top: 30px;
630	1003	margin-left: -213px;
631	1004	}
632		-
633		-
	1005	+ /* 매칭서비스 */
	1006	+ .mat-b-g-g {
	1007	+ grid-template-columns: 1fr;
	1008	+ }
	1009	+ .mat-sec-a-1 {
	1010	+ grid-template-columns: 1fr;
	1011	+ width: 100%;
	1012	+ }
	1013	+ .mat-text {
	1014	+ /* display: none; */
	1015	+ padding-top: 3rem;
	1016	+ font-size: 2rem;
	1017	+ }
634	1018
635	1019	/* 자료집 */
636	1020	.data-main {
...	...	@@ -712,5 +1096,287 @@
712	1096	.mat-span{
713	1097	grid-template-columns: 1fr;
714	1098	}
	1099	+
	1100	+ /* news */
	1101	+ .news-bos {
	1102	+ grid-template-columns: 1fr;
	1103	+
	1104	+}
	1105	+
	1106	+.new-logo {
	1107	+ width: 100%;
	1108	+ text-align: center;
	1109	+
	1110	+}
	1111	+
	1112	+.new-logo img {
	1113	+ margin: 0 auto;
	1114	+ text-align: center;
	1115	+}
	1116	+
	1117	+.modal-content {
	1118	+ height: 50%;
	1119	+ width: 90%;
	1120	+}
	1121	+
	1122	+
	1123	+/* technology */
	1124	+.tech-logo {
	1125	+ width: 100%;
	1126	+ text-align: center;
	1127	+
	1128	+}
	1129	+
	1130	+.tech-logo img {
	1131	+ margin: 0 auto;
	1132	+
	1133	+}
	1134	+
	1135	+.tech-bos {
	1136	+ width: 90%;
	1137	+ grid-template-columns: 1fr;
	1138	+}
	1139	+
	1140	+.tech-logo,
	1141	+.tech-logo img {
	1142	+ /* width: 100%; */
	1143	+ margin: 0 auto;
	1144	+ text-align: center;
	1145	+}
	1146	+
	1147	+.tech-sec1 {
	1148	+ grid-template-columns: 1fr;
	1149	+}
	1150	+
	1151	+.tech-sec2 section {
	1152	+
	1153	+ grid-template-columns: 1fr;
	1154	+}
	1155	+
	1156	+.tech-sec2 section img {
	1157	+ padding: 0rem;
	1158	+}
	1159	+
	1160	+.tech-sec2 section div:nth-child(1) {
	1161	+ padding: 5rem 2rem;
	1162	+}
	1163	+
	1164	+/* introduction */
	1165	+.intro {
	1166	+ width: 100%;
	1167	+ padding: 3rem;
	1168	+
	1169	+}
	1170	+
	1171	+.intro-logo {
	1172	+ width: 100%;
	1173	+}
	1174	+
	1175	+.intro-text {
	1176	+ width: 100%;
	1177	+ padding: 2rem;
	1178	+}
	1179	+
	1180	+.intro-img {
	1181	+ grid-template-columns: 1fr;
	1182	+}
	1183	+
	1184	+/* join */
	1185	+.join-logo h1 {
	1186	+ font-size: 3rem;
	1187	+ }
	1188	+
	1189	+ .join-b {
	1190	+ /* border: 1px solid red; */
	1191	+ width: 100%;
	1192	+ }
	1193	+
	1194	+
	1195	+
	1196	+ .join-b-button {
	1197	+ padding: 2rem;
	1198	+ gap: 2rem;
	1199	+ width: 100%;
	1200	+ }
	1201	+
	1202	+ .login-info {
	1203	+ width: 90%;
	1204	+ }
	1205	+
	1206	+ .login-info2 {
	1207	+ width: 90%;
	1208	+ }
	1209	+
	1210	+ hr {
	1211	+ display: none;
	1212	+ }
	1213	+
	1214	+ .joinsub0 {
	1215	+ grid-template-columns: 1fr;
	1216	+ }
	1217	+
	1218	+ .joinsub {
	1219	+ grid-template-columns: 1fr;
	1220	+
	1221	+ }
	1222	+
	1223	+ .join-sec6 {
	1224	+
	1225	+ grid-template-columns: 1fr;
	1226	+
	1227	+ }
	1228	+
	1229	+ .login-info-grid {
	1230	+ grid-template-columns: 1fr;
	1231	+ }
	1232	+
	1233	+ .join-sec0 {
	1234	+ place-items: center;
	1235	+ }
	1236	+
	1237	+ .joinsub0-1 {
	1238	+ grid-template-columns: 1fr;
	1239	+
	1240	+ }
	1241	+
	1242	+ .j-s-3 input {
	1243	+ height: 100%;
	1244	+ }
	1245	+
	1246	+ .join-w1400 {
	1247	+ width: 100%;
	1248	+ padding: 1rem;
	1249	+ }
	1250	+
	1251	+ .login-info h3,
	1252	+ .login-info2 h3 {
	1253	+ font-size: 1.8rem;
	1254	+ text-align: center;
	1255	+ }
	1256	+
	1257	+ section div {}
	1258	+
	1259	+ section div input {
	1260	+ width: 100%;
	1261	+ /* border: 1px solid red; */
	1262	+ }
	1263	+
	1264	+ .join-email-bt {
	1265	+ text-align: center;
	1266	+ }
	1267	+
	1268	+ .email-sec {
	1269	+ display: grid;
	1270	+
	1271	+ grid-template-columns: 1fr 30px 1fr 1fr;
	1272	+ }
	1273	+
	1274	+ .email-sec div {
	1275	+ /* padding: 2rem; */
	1276	+ padding: 1rem 0;
	1277	+ font-size: 1.5rem;
	1278	+ font-family: "Pretendard-Regular";
	1279	+ /* border: 1px solid red; */
	1280	+ text-align: center;
	1281	+ gap: 1rem;
	1282	+ }
	1283	+
	1284	+ .email-sec div:nth-child(2) {
	1285	+ padding: 2rem 0;
	1286	+ }
	1287	+
	1288	+ .join-sec-sub {
	1289	+ margin: 0 auto;
	1290	+ }
	1291	+
	1292	+ .join-sec-1 span br {
	1293	+ display: none;
	1294	+ }
	1295	+
	1296	+ .j-s-3 {
	1297	+ display: grid;
	1298	+ gap: 0;
	1299	+ height: 50rem;
	1300	+ grid-template-rows: 4rem;
	1301	+ }
	1302	+/* matching */
	1303	+.matching-box img {
	1304	+ width: 100%;
	1305	+}
	1306	+
	1307	+.matching-span span {
	1308	+ padding: 1rem 1.5rem 1rem 1.5rem;
	1309	+}
	1310	+
	1311	+.matching-box-bos {
	1312	+ grid-template-columns: 1fr;
	1313	+}
	1314	+
	1315	+.matching-box-grid-two {
	1316	+ grid-template-columns: 1fr;
	1317	+ width: 100%;
	1318	+}
	1319	+
	1320	+.matching-text {
	1321	+ /* display: none; */
	1322	+ padding-top: 3rem;
	1323	+ font-size: 2rem;
	1324	+}
	1325	+
	1326	+.matching-text {
	1327	+ margin-top: 25%;
	1328	+}
	1329	+.mat-bos {
	1330	+ width: 100%;
	1331	+ padding: 2rem;
	1332	+}
	1333	+
	1334	+.mat-bos h1,
	1335	+.mat-bos img {
	1336	+ text-align: center;
	1337	+ margin: 0 auto;
	1338	+}
	1339	+
	1340	+.mat-sec1 {
	1341	+ grid-template-columns: 1fr;
	1342	+}
	1343	+
	1344	+.matDtail-sec {
	1345	+ width: 100%;
	1346	+ padding: 2rem;
	1347	+}
	1348	+
	1349	+.mat-span span {
	1350	+ padding: 1rem 1.5rem 1rem 1.5rem;
	1351	+}
715	1352
716	1353	}
	1354	+@media all and (min-width: 250px) and (max-width: 480px)
	1355	+ {
	1356	+.w1400{
	1357	+ width: 100%;
	1358	+ padding: 1rem;
	1359	+ margin: 0 auto;
	1360	+}
	1361	+.main-notice{
	1362	+ width: 50%;
	1363	+}.main-text{
	1364	+ width: 50%;
	1365	+}
	1366	+.main-text p{
	1367	+ font-size: 1.2rem;
	1368	+}
	1369	+.main-text span{
	1370	+ font-size: 1.8rem;
	1371	+}
	1372	+.main-benner{
	1373	+ width: 50%;
	1374	+ background-position: center;
	1375	+}
	1376	+.main-content-wrap{
	1377	+ padding: 0px;
	1378	+}
	1379	+.main-grid-name::after{
	1380	+ display: none;
	1381	+}
	1382	+}

...	...	@@ -13,15 +13,13 @@
13	13	<link rel="stylesheet" href="/client/resources/css/common.css">
14	14	<link rel="stylesheet" href="/client/resources/css/footer.css">
15	15	<link rel="stylesheet" href="/client/resources/css/header.css">
16		- <link rel="stylesheet" href="/client/resources/css/matching.css">
17		- <link rel="stylesheet" href="/client/resources/css/Data.css">
18	16	<link rel="stylesheet" href="/client/resources/css/responsive.css">
19	17
20	18	<script type="text/javascript" charset="utf-8" src="/client/smarteditor2-2.8.2.3/js/HuskyEZCreator.js"></script>
21	19	<script src="https://kit.fontawesome.com/9f862d56b3.js" crossorigin="anonymous"></script>
22	20	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
23	21	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
24		-
	22	+
25	23
26	24	<title>KERIS</title>
27	25

...	...	@@ -65,13 +65,14 @@
65	65	<div class="w1400">
66	66	<div class="data-select">
67	67	<select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
68		- <option :value = null selected>전체</option>
	68	+ <option :value=null selected>전체</option>
69	69	<option value="title">제목</option>
70	70	<option value="user">작성자</option>
71	71	<option value="조회순">조회순</option>
72	72	</select>
73	73	<div class="input-group">
74		- <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
	74	+ <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
	75	+ @keyup.enter="postSelectList()">
75	76	<input class="button--submit" value="검색" type="submit" @click="postSelectList()">
76	77	</div>
77	78	</div>
...	...	@@ -120,9 +121,9 @@
120	121	}
121	122	},
122	123	methods: {
123		- postSelectList: function() {
	124	+ postSelectList: function () {
124	125	const vm = this;
125		-
	126	+
126	127	axios({
127	128	url: '/post/postSelectList.json',
128	129	method: 'post',
...	...	@@ -130,11 +131,11 @@
130	131	'Content-Type': "application/json; charset=UTF-8",
131	132	},
132	133	data: vm.postListSearch
133		- }).then(function(response) {
	134	+ }).then(function (response) {
134	135	vm.postList = response.data.postSelectList;
135	136	vm.postListCount = response.data.postSelectListCount;
136	137	vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
137		- }).catch(function(error) {
	138	+ }).catch(function (error) {
138	139	alert('자료집 목록 조회 오류, 관리자에게 문의하세요.');
139	140	})
140	141	},
...	...	@@ -143,10 +144,10 @@
143	144	yyyymmdd: function (date) {
144	145	return COMMON_UTIL.yyyymmdd(date);
145	146	},
146		-
	147	+
147	148	//게시글 상세조회 페이지로 이동
148	149	postSelectOnePage: function (item) {
149		- this.$router.push({ path: '/', query: {'post_id': item.post_id}});
	150	+ this.$router.push({ path: '/', query: { 'post_id': item.post_id } });
150	151	},
151	152	},
152	153	watch: {
...	...	@@ -162,32 +163,3 @@
162	163	}
163	164	</script>
164	165
165		-<style scoped>
166		-.data-t p {
167		- width: 80%;
168		- padding: 0rem 0rem 1rem 3rem !important;
169		-
170		-}
171		-
172		-.data-t2 p {
173		-
174		- padding: 0rem 0rem 0rem 0rem !important;
175		- margin: 0 auto;
176		-}
177		-
178		-.guide-logo-bt {
179		- float: right;
180		- /* margin: 0 auto; */
181		- font-size: 3rem;
182		- width: 70%;
183		- padding-right: 3rem;
184		- font-family: SBaggroM;
185		- text-align: right;
186		-
187		- cursor: pointer;
188		-}
189		-
190		-.guide-logo-bt a {
191		- color: #e07e27;
192		-}
193		-</style> (No newline at end of file)

...	...	@@ -46,41 +46,6 @@
46	46	}
47	47	}
48	48	</script>
49		-<style scoped>
50		-div {
51		- background-color: white;
52		- width: 100%;
53		- height: 100%;
54		-}
55	49
56		-.guide-bos {
57		- width: 100%;
58		- height: 100%;
59		-}
60		-
61		-.guide-logo {
62		- width: 100%;
63		- display: grid;
64		- grid-template-columns: 80% 20%;
65		-}
66		-
67		-.guide-logo-bt {
68		- background-color: hsl(217, 92%, 61%);
69		- margin: 0 auto;
70		- padding: 1.5rem;
71		- border-radius: 2rem;
72		- text-align: center;
73		-}
74		-
75		-.guide-logo-bt i,
76		-.guide-logo-bt a {
77		-
78		- color: white;
79		-}
80		-
81		-.guide-sec {
82		- padding: 3rem;
83		-}
84		-</style>
85	50
86	51

...	...	@@ -185,140 +185,5 @@
185	185	}
186	186	</script>
187	187
188		-<style scoped>
189		-.tech-logo {
190		- padding: 6rem 2rem 2rem 2rem;
191		- width: 85%;
192		-}
193		-
194		-.tech-logo h1 {
195		- font-size: 4rem;
196		- font-family: SBaggroM;
197		- font-weight: 500;
198		- color: #0e0077;
199		- /* position: relative; */
200		-
201		-}
202		-
203		-.tech-logo img {
204		- width: 10rem;
205		-}
206		-
207		-
208		-
209		-.tech-bos {
210		- width: 90%;
211		- margin: 0 auto;
212		- /* place-items: center; */
213		-
214		- display: grid;
215		- grid-template-columns: 1fr 1fr 1fr;
216		- gap: 4rem;
217		- padding: 6rem 3rem 6rem 3rem;
218		- text-align: center;
219		- /* border: 1px solid red; */
220		-}
221		-
222		-.tech-box-sec {
223		- padding: 2rem;
224		- /* border-radius: 2rem; */
225		- background-color: #f9f9f9;
226		- box-shadow: 2px 2px 5px rgba(191, 191, 191, 0.447);
227		- /* border: 1px solid rgb(191, 191, 191); */
228		-}
229		-
230		-.tech-box-sec-h3 {
231		- padding: 1rem;
232		- font-size: 1.7rem;
233		- font-family: "Pretendard-Regular";
234		-
235		-}
236		-
237		-.tech-box-sec div img {
238		- /* border: 1px solid blue; */
239		- box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
240		- width: 85%;
241		- height: 15rem;
242		- margin: 0 auto;
243		- background-size: cover;
244		- border-radius: 1.5rem;
245		-}
246		-
247		-.tech-box-sec div p {
248		- width: 85%;
249		- padding: 1rem;
250		- margin: 0 auto;
251		- font-size: 1.5rem;
252		- font-family: "Pretendard-Regular";
253		-
254		-}
255		-
256		-.tech-box-sec div button {
257		- width: 85%;
258		- border-radius: 2rem;
259		- padding: 2rem;
260		- font-size: 1.5rem;
261		- color: white;
262		- font-family: "Pretendard-Regular";
263		-
264		- background-color: #3f87f7;
265		-}
266		-
267		-@media all and (max-width: 479px) {
268		- .tech-logo {
269		- width: 100%;
270		- text-align: center;
271		-
272		- }
273		-
274		- .tech-logo img {
275		- margin: 0 auto;
276		-
277		- }
278		-
279		- .tech-bos {
280		- width: 90%;
281		- grid-template-columns: 1fr;
282		- }
283		-
284		-}
285		-
286		-@media all and (min-width: 480px) and (max-width: 767px) {
287		- .tech-logo {
288		- width: 100%;
289		- text-align: center;
290		-
291		- }
292		-
293		- .tech-logo img {
294		- margin: 0 auto;
295		-
296		- }
297		-
298		- .tech-bos {
299		- width: 90%;
300		- gap: 1rem;
301		- grid-template-columns: 1fr 1fr;
302		- }
303		-}
304		-
305		-@media all and (min-width: 767px) and (max-width: 1023px) {
306		- .tech-logo {
307		- width: 100%;
308		- text-align: center;
309		-
310		- }
311		-
312		- .tech-logo img {
313		- margin: 0 auto;
314		-
315		- }
316		-
317		- .tech-bos {
318		- width: 90%;
319		- grid-template-columns: 1fr 1fr;
320		- }
321		-}
322		-</style>
323	188
324	189

...	...	@@ -66,212 +66,6 @@
66	66	}
67	67	</script>
68	68	<style scoped>
69		-.tech-logo {
70		- padding: 6rem 2rem 2rem 2rem;
71		- width: 85%;
72		-}
73		-
74		-.tech-logo h1 {
75		- font-size: 4rem;
76		- font-family: SBaggroM;
77		- font-weight: 500;
78		- color: #0e0077;
79		- /* position: relative; */
80		-
81		-}
82		-
83		-.tech-logo img {
84		- width: 10rem;
85		-}
86		-
87		-.tech-sec {
88		- width: 100%;
89		- padding: 2rem;
90		-}
91		-
92		-.tech-sec1 {
93		- display: grid;
94		- grid-template-columns: 85% 15%;
95		- padding: 2rem 3rem 1rem 3rem;
96		- background-color: #f4f4f4;
97		- border-top: 1px solid rgb(199, 199, 199);
98		-}
99		-
100		-.tech-sec1 h2 {
101		- font-size: 2rem;
102		- color: #3f87f7;
103		-}
104		-
105		-
106		-.tech-sec1 div {
107		- padding: 1rem;
108		- border-radius: 0.5rem;
109		- margin-top: 3rem;
110		- /* text-align: right; */
111		- text-align: center;
112		- background-color: #3f87f7;
113		-
114		-}
115		-
116		-.tech-sec1 div label {
117		- color: white;
118		- font-size: 1.5rem;
119		- margin-right: 1rem;
120		-}
121		-
122		-.tech-sec1 div i {
123		- font-size: 1.5rem;
124		-}
125		-
126		-.tech-sec2 {
127		-
128		- border-top: 1px solid rgb(199, 199, 199);
129		- border-bottom: 1px solid rgb(199, 199, 199);
130		-}
131		-
132		-.tech-sec2 section {
133		- display: grid;
134		- grid-template-columns: 50% 1fr;
135		-}
136		-
137		-.tech-sec2 section div:nth-child(1) {
138		- /* background-color: gainsboro; */
139		- padding: 6rem;
140		- /* border: 1px solid red; */
141		-
142		- /* justify-content: space-between; */
143		- text-align: right;
144		-}
145		-
146		-.tech-sec2 section div:nth-child(2) {
147		- /* border: 1px solid red; */
148		- padding: 6rem;
149		- display: grid;
150		- grid-template-columns: 1fr;
151		-}
152		-
153		-.tech-sec2 section div:nth-child(2) p {
154		- border-top: 1px solid gainsboro;
155		- padding: 4rem;
156		-}
157		-
158		-.tech-sec2 section div:nth-child(2) span {
159		- color: #3f87f7;
160		- font-size: 2rem;
161		- font-weight: 700;
162		-}
163		-
164		-.tech-sec2 section img {
165		- padding: 5rem;
166		- margin: 0 auto;
167		- box-shadow: 1px 1px 5px 5px #b2b2b236;
168		- background-color: rgb(190, 190, 190);
169		- /* border: 1px solid red; */
170		- width: 50%;
171		-}
172		-
173		-.tech-sec2 div {
174		- padding: 2rem 0;
175		-}
176		-
177		-
178		-
179		-.tech-sec2 p {
180		- font-size: 1.7rem;
181		-
182		-}
183		-
184		-.tech-sec2-end p {
185		- text-align: right;
186		- font-size: 1.5rem;
187		-}
188		-
189		-.tech-sec2-end p span {
190		- color: #3f87f7;
191		- margin-right: 1rem;
192		-}
193		-
194		-.tech-sec2-end p:nth-child(2) {
195		- text-align: right;
196		-}
197		-
198		-
199		-.tech-sec2-bt {
200		- text-align: right;
201		- width: 100%;
202		- padding: 2rem 0 6rem 0;
203		-}
204		-
205		-.tech-sec2-bt button {
206		- width: 15%;
207		- padding: 1rem;
208		- background-color: #3f87f7;
209		- color: white;
210		- border-radius: 0.5rem;
211		- font-family: "Pretendard-Regular";
212		-
213		-}
214		-
215		-@media all and (max-width: 479px) {
216		-
217		- .tech-logo,
218		- .tech-logo img {
219		- /* width: 100%; */
220		- margin: 0 auto;
221		- text-align: center;
222		- }
223		-
224		- .tech-sec1 {
225		- grid-template-columns: 1fr;
226		- }
227		-
228		- .tech-sec2 section {
229		-
230		- grid-template-columns: 1fr;
231		- }
232		-
233		- .tech-sec2 section img {
234		- padding: 0rem;
235		- }
236		-
237		- .tech-sec2 section div:nth-child(1) {
238		- padding: 5rem 2rem;
239		- }
240		-}
241		-
242		-@media all and (min-width: 480px) and (max-width: 767px) {
243		-
244		- .tech-logo,
245		- .tech-logo img {
246		- /* width: 100%; */
247		- margin: 0 auto;
248		- text-align: center;
249		- }
250		-
251		- .tech-sec1 {
252		- grid-template-columns: 1fr;
253		- }
254		-
255		- .tech-sec2 section {
256		-
257		- grid-template-columns: 1fr;
258		- }
259		-
260		- .tech-sec2 section img {
261		- padding: 0rem;
262		- }
263		-
264		- .tech-sec2 section div:nth-child(1) {
265		- padding: 5rem 2rem;
266		- }
267		-}
268		-
269		-@media all and (min-width: 767px) and (max-width: 1023px) {
270		- .tech-sec1 {
271		- grid-template-columns: 75% 25%;
272		- }
273		-}
274		-
275	69	@media all and (min-width: 1023px) and (max-width: 1268px) {
276	70	.tech-sec1 {
277	71	grid-template-columns: 80% 20%;

...	...	@@ -116,171 +116,4 @@
116	116	}
117	117	</script>
118	118
119		-<style scoped>
120		-.new-logo img {
121		- width: 50px;
122		- height: 50px;
123		- z-index: -1;
124		- /* transform: translateY(-40px); */
125		-}
126		-
127		-/* 모달 */
128		-.modal {
129		- position: fixed;
130		- top: 0;
131		- left: 0;
132		- width: 100%;
133		- height: 100%;
134		- background-color: rgba(0, 0, 0, 0.5);
135		- z-index: 9998;
136		-}
137		-
138		-.modal-content {
139		- top: 50%;
140		- left: 50%;
141		- position: fixed;
142		- z-index: 9999;
143		- /* bottom: auto; */
144		- padding: 4rem;
145		- border-radius: 2rem;
146		- background-color: #f9f9f9;
147		- transform: translate(-50%, -50%);
148		- /* margin: 0 auto; */
149		- box-shadow: 2px 2px 5px #86868644;
150		- width: 70%;
151		- margin: 0 auto;
152		-
153		- height: 70%;
154		-}
155		-
156		-.modal-content button {
157		- position: relative;
158		- /* margin: 50%; */
159		- transform: translate(-52%, 0);
160		- top: 10%;
161		- left: 50%;
162		- padding: 2rem 6rem 2rem;
163		- background-color: #007aff;
164		- border-radius: 2rem;
165		-
166		- color: white;
167		- font-family: "Pretendard-Regular";
168		-
169		-}
170		-
171		-/* ----------------------------------- */
172		-.news-bos {
173		- width: 100%;
174		- display: grid;
175		- gap: 3rem;
176		- grid-template-columns: 1fr 1fr 1fr;
177		- padding: 6rem 6rem 12rem 6rem;
178		- /* border: 1px solid red; */
179		-}
180		-
181		-.news-bos-box {
182		- display: grid;
183		- grid-template-columns: 1fr;
184		- margin: 0 auto;
185		- border-radius: 2rem;
186		- padding: 2rem;
187		- background-color: #f7f7f7;
188		- box-shadow: 2px 2px 5px #8484847c;
189		-}
190		-
191		-.news-bos-box div {
192		- padding: 1rem;
193		-}
194		-
195		-.modal-img {
196		- width: 100%;
197		- height: 195px;
198		- /* border: 1px solid/ red; */
199		-}
200		-
201		-.news-bos-box div h3 {
202		- font-size: 1.7rem;
203		- padding: 1rem;
204		-}
205		-
206		-.news-bos-box img {
207		- width: 100%;
208		- height: 100%;
209		- object-fit: cover;
210		- border-radius: 2.5rem;
211		- box-shadow: 2px 2px 5px #8484847c;
212		-
213		-}
214		-
215		-.news-box-end {
216		- display: grid;
217		- grid-template-columns: 1fr 1fr;
218		-
219		-}
220		-
221		-.news-box-sed p {
222		- font-size: 1.5rem;
223		- /* padding: 1rem; */
224		- /* background-color: aquamarine; */
225		-}
226		-
227		-.news-box-end p {
228		- font-size: 1.5rem;
229		- color: #3f87f7;
230		- /* padding: 1rem; */
231		-}
232		-
233		-.news-box-end p span {
234		- color: #333;
235		-
236		-}
237		-
238		-.news-box-end p:nth-child(2) {
239		-
240		- text-align: right;
241		-}
242		-
243		-
244		-@media all and (max-width: 479px) {
245		- .news-bos {
246		- grid-template-columns: 1fr;
247		-
248		- }
249		-
250		- .new-logo {
251		- width: 100%;
252		- text-align: center;
253		-
254		- }
255		-
256		- .new-logo img {
257		- margin: 0 auto;
258		- text-align: center;
259		- }
260		-
261		- .modal-content {
262		- height: 50%;
263		- width: 90%;
264		- }
265		-}
266		-
267		-@media all and (min-width: 480px) and (max-width: 767px) {
268		- .news-bos {
269		- grid-template-columns: 1fr 1fr;
270		-
271		- }
272		-
273		- .new-logo {
274		- width: 100%;
275		- text-align: center;
276		-
277		- }
278		-
279		- .new-logo img {
280		- margin: 0 auto;
281		- text-align: center;
282		- }
283		-}
284		-</style>
285		-
286	119

...	...	@@ -20,13 +20,14 @@
20	20	</section>
21	21	<div class="data-select">
22	22	<select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
23		- <option :value = null selected>전체</option>
	23	+ <option :value=null selected>전체</option>
24	24	<option value="title">제목</option>
25	25	<option value="user">작성자</option>
26	26	<option value="조회순">조회순</option>
27	27	</select>
28	28	<div class="input-group">
29		- <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
	29	+ <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
	30	+ @keyup.enter="postSelectList()">
30	31	<input class="button--submit" value="검색" type="submit" @click="postSelectList()">
31	32	</div>
32	33	</div>
...	...	@@ -47,7 +48,7 @@
47	48	<td>{{ item.view_cnt }}</td>
48	49	</tr>
49	50	<tr v-if="postListCount == 0">
50		- <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
	51	+ <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
51	52	</tr>
52	53	</table>
53	54	</div>
...	...	@@ -75,9 +76,9 @@
75	76	}
76	77	},
77	78	methods: {
78		- postSelectList: function() {
	79	+ postSelectList: function () {
79	80	const vm = this;
80		-
	81	+
81	82	axios({
82	83	url: '/post/postSelectList.json',
83	84	method: 'post',
...	...	@@ -85,11 +86,11 @@
85	86	'Content-Type': "application/json; charset=UTF-8",
86	87	},
87	88	data: vm.postListSearch
88		- }).then(function(response) {
	89	+ }).then(function (response) {
89	90	vm.postList = response.data.postSelectList;
90	91	vm.postListCount = response.data.postSelectListCount;
91	92	vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
92		- }).catch(function(error) {
	93	+ }).catch(function (error) {
93	94	alert('공지사항 목록 조회 오류, 관리자에게 문의하세요.');
94	95	})
95	96	},
...	...	@@ -98,10 +99,10 @@
98	99	yyyymmdd: function (date) {
99	100	return COMMON_UTIL.yyyymmdd(date);
100	101	},
101		-
	102	+
102	103	//게시글 상세조회 페이지로 이동
103	104	postSelectOnePage: function (item) {
104		- this.$router.push({ path: '/', query: {'post_id': item.post_id}});
	105	+ this.$router.push({ path: '/', query: { 'post_id': item.post_id } });
105	106	},
106	107	},
107	108	watch: {
...	...	@@ -116,38 +117,6 @@
116	117	}
117	118	</script>
118	119
119		-<style scoped>
120		-.noti-bos {
121		- width: 100%;
122		-}
123	120
124		-
125		-
126		-.noti-sec {
127		- width: 100%;
128		- padding: 12rem 3rem;
129		-}
130		-
131		-.noti-sec-table table {
132		- background-color: white;
133		- border-bottom: 1px solid #cccccc;
134		-
135		-}
136		-
137		-.noti-sec-table th {
138		- padding: 1.5rem;
139		- color: white;
140		- background-color: #007aff;
141		- font-size: 1.5rem;
142		-}
143		-
144		-.noti-sec-table td {
145		- padding: 1.5rem;
146		- font-size: 1.5rem;
147		- cursor: pointer;
148		- border-bottom: 1px solid #cccccc;
149		- text-align: center;
150		-}
151		-</style>
152	121
153	122

...	...	@@ -53,119 +53,5 @@
53	53	}
54	54	</script>
55	55
56		-<style scoped>
57		-.intro {
58		- width: 100%;
59		- padding: 6rem;
60		-}
61		-
62		-.intro-logo {
63		- width: 100%;
64		- padding: 6rem 2rem;
65		-
66		-}
67		-
68		-.intro-logo h1 {
69		- font-size: 3rem;
70		- font-family: SBaggroM;
71		- font-weight: 500;
72		- color: #2c407f;
73		-}
74		-
75		-.intro-text {
76		- padding: 3rem;
77		-}
78		-
79		-.intro-text h3 {
80		- padding: 1rem 1rem 3rem;
81		- font-size: 2rem;
82		- color: #00335a;
83		- font-family: "Pretendard-Regular";
84		-
85		-}
86		-
87		-.intro-text i {
88		- padding: 1rem;
89		- color: #00335a;
90		- font-family: "Pretendard-Regular";
91		-
92		-
93		-}
94		-
95		-.intro-text p {
96		- padding: 1rem;
97		- font-size: 1.5rem;
98		- color: #00335a;
99		- font-family: "Pretendard-Regular";
100		-
101		-
102		-}
103		-
104		-.intro-img {
105		- padding: 3rem;
106		- display: grid;
107		- gap: 0;
108		- grid-template-columns: 1fr 1fr 1fr;
109		-}
110		-
111		-.intro-img img:nth-child(2) {
112		- transform: translateY(-4.8rem);
113		-}
114		-
115		-.intro-img img:nth-child(3) {
116		- transform: translateY(-9.7rem);
117		-}
118		-
119		-@media all and (max-width: 479px) {
120		-
121		- .intro {
122		- width: 100%;
123		- padding: 3rem;
124		-
125		- }
126		-
127		- .intro-logo {
128		- width: 100%;
129		- }
130		-
131		- .intro-text {
132		- width: 100%;
133		- padding: 2rem;
134		- }
135		-
136		- .intro-img {
137		- grid-template-columns: 1fr;
138		- }
139		-
140		-}
141		-
142		-@media all and (min-width: 480px) and (max-width: 767px) {
143		- .intro {
144		- width: 100%;
145		- padding: 3rem;
146		-
147		- }
148		-
149		- .intro-logo {
150		- width: 100%;
151		- }
152		-
153		- .intro-text {
154		- width: 100%;
155		- padding: 2rem;
156		- }
157		-
158		- .intro-img {
159		- grid-template-columns: 1fr;
160		- }
161		-}
162		-
163		-@media all and (min-width: 767px) and (max-width: 1023px) {
164		-
165		- .intro-img {
166		- grid-template-columns: 1fr;
167		- }
168		-}
169		-</style>
170	56
171	57

...	...	@@ -28,8 +28,8 @@
28	28	<p id="logoImg" ref="logoImg">logo</p>
29	29	<img id="logoImg" ref="logoImg" style="height:250px;" />
30	30
31		- <input type="file" accept="image/*" name="logoImg" id="logoImg" ref="logoImg"
32		- @change="logoUpload" />
	31	+ <input type="file" accept="image/*" name="logoImg" id="logoImg" style="display: none;" />
	32	+ <label for="logoImg">파일선택</label>
33	33	</div>
34	34	</section>
35	35	</div>
...	...	@@ -78,7 +78,7 @@
78	78	</div>
79	79	<div class="join-sub-input">
80	80	<input type="file" name="companyProfile" id="companyProfile" ref="companyProfile"
81		- @change="companyProfileUpload"/>
	81	+ @change="companyProfileUpload" />
82	82	</div>
83	83	</section>
84	84	</div>
...	...	@@ -129,14 +129,14 @@
129	129	</div>
130	130	</section>
131	131	<section class="join-sec4 joinsub">
132		- <div class="join-sec-sub join-sec-1">
133		- <span>담당자 명함</span>
134		- </div>
135		- <div class="join-sub-input">
136		- <input type="file" accept="image/*" name="imgFile" id="businessCardImg" ref="businessCardImg"
137		- @change="businessCardUpload" />
138		- </div>
139		- </section>
	132	+ <div class="join-sec-sub join-sec-1">
	133	+ <span>담당자 명함</span>
	134	+ </div>
	135	+ <div class="join-sub-input">
	136	+ <input type="file" accept="image/*" name="imgFile" id="businessCardImg" ref="businessCardImg"
	137	+ @change="businessCardUpload" />
	138	+ </div>
	139	+ </section>
140	140	<section class="join-sec6">
141	141	<div class="join-sec-sub">
142	142	<span>이메일<span>(필수)</span></span>
...	...	@@ -147,7 +147,8 @@
147	147	</div>
148	148	<div>@</div>
149	149	<div>
150		- <input v-if="select_email_dns==null" type="text" name="email_dns" id="email_dns" v-model="email_dns">
	150	+ <input v-if="select_email_dns == null" type="text" name="email_dns" id="email_dns"
	151	+ v-model="email_dns">
151	152	<input v-else type="text" name="email_dns" id="email_dns" v-model="select_email_dns">
152	153	</div>
153	154	<div>
...	...	@@ -227,8 +228,10 @@
227	228	</div>
228	229	<div>@</div>
229	230	<div>
230		- <input v-if="select_email_dns==null" type="text" name="email_dns" id="email_dns" v-model="email_dns">
231		- <input v-else type="text" name="email_dns" id="email_dns" v-model="select_email_dns"> </div>
	231	+ <input v-if="select_email_dns == null" type="text" name="email_dns" id="email_dns"
	232	+ v-model="email_dns">
	233	+ <input v-else type="text" name="email_dns" id="email_dns" v-model="select_email_dns">
	234	+ </div>
232	235	<div>
233	236	<select name="email_sel" id="email_sel" v-model="select_email_dns">
234	237	<option value="">직접 입력</option>
...	...	@@ -296,35 +299,35 @@
296	299	export default {
297	300	data() {
298	301	return {
299		- company:{
300		- company_id:null,
301		- company_nm:null,
302		- company_info:null,
303		- file_id:null,
	302	+ company: {
	303	+ company_id: null,
	304	+ company_nm: null,
	305	+ company_info: null,
	306	+ file_id: null,
304	307	},
305		- user:{
306		- user_id:null,
307		- user_pw:null,
308		- user_eml:null,
309		- user_auth:null,
	308	+ user: {
	309	+ user_id: null,
	310	+ user_pw: null,
	311	+ user_eml: null,
	312	+ user_auth: null,
310	313	},
311		- file:null,
312		- keyword:{
	314	+ file: null,
	315	+ keyword: {
313	316
314	317	},
315		- logo_img:null,
316		- business_card_img:null,
317		- company_profile:null,
	318	+ logo_img: null,
	319	+ business_card_img: null,
	320	+ company_profile: null,
318	321	//기업 ID 중복 확인
319		- companyIdCheck_boolean:null,
	322	+ companyIdCheck_boolean: null,
320	323	//사용자 ID 중복 확인
321		- userIdCheck_boolean:null,
	324	+ userIdCheck_boolean: null,
322	325	//PW 확인
323		- pwCheck:null,
324		- passwordCheckFlag:null,
325		- email_id:null,
326		- email_dns:null,
327		- select_email_dns:null,
	326	+ pwCheck: null,
	327	+ passwordCheckFlag: null,
	328	+ email_id: null,
	329	+ email_dns: null,
	330	+ select_email_dns: null,
328	331	selectedMembership: 'company',
329	332	isVisible: false,
330	333	}
...	...	@@ -339,18 +342,18 @@
339	342	else this.passwordCheckFlag = true;
340	343	},
341	344	//company ID 중복 검사
342		- companyIdCheck: function() {
	345	+ companyIdCheck: function () {
343	346	const vm = this;
344	347	axios({
345	348	url: '/company/companySelectOne.json',
346	349	method: 'post',
347	350	herders: {
348		- 'Content-Type': "application/json; charset=UTF-8",
	351	+ 'Content-Type': "application/json; charset=UTF-8",
349	352	},
350	353	data: vm.company
351		- }).then( function (response) {
	354	+ }).then(function (response) {
352	355	// console.log("idCheck - response : ", response.data);
353		- if(response.data != null) {
	356	+ if (response.data != null) {
354	357	alert("중복된 사업자등록번호 입니다.");
355	358	vm.companyIdCheck_boolean = false;
356	359	return false;
...	...	@@ -359,41 +362,41 @@
359	362	vm.companyIdCheck_boolean = true;
360	363	return true;
361	364	}
362		- }).catch( function (error) {
	365	+ }).catch(function (error) {
363	366	console.log("companyIdCheck - error : ", error);
364	367	alert("중복검사 오류, 다시 시도해주세요.");
365	368	});
366	369	},
367	370
368	371	//user ID 중복 검사
369		- userIdCheck: function() {
	372	+ userIdCheck: function () {
370	373	const vm = this;
371	374	axios({
372	375	url: '/user/userSelectOne.json',
373	376	method: 'post',
374	377	herders: {
375		- 'Content-Type': "application/json; charset=UTF-8",
	378	+ 'Content-Type': "application/json; charset=UTF-8",
376	379	},
377	380	data: vm.user
378		- }).then( function (response) {
	381	+ }).then(function (response) {
379	382	// console.log("idCheck - response : ", response.data);
380		- if(response.data != null) {
	383	+ if (response.data != null) {
381	384	alert("중복된 ID 입니다.");
382	385	vm.userIdCheck_boolean = false;
383	386	return false;
384	387	} else {
385		- alert("사용가능한 ID 입니다.");
	388	+ alert("사용가능한 ID 입니다.");
386	389	vm.userIdCheck_boolean = true;
387	390	return true;
388	391	}
389		- }).catch( function (error) {
	392	+ }).catch(function (error) {
390	393	console.log("userIdCheck - error : ", error);
391	394	alert("중복검사 오류, 다시 시도해주세요.");
392	395	});
393	396	},
394	397
395	398	userInsert: function () {
396		- this.user.user_auth=this.selectedMembership;
	399	+ this.user.user_auth = this.selectedMembership;
397	400	const vm = this;
398	401	axios({
399	402	url: "/user/userInsert.json",
...	...	@@ -428,11 +431,11 @@
428	431	console.log("companyInsert - error : ", error);
429	432	});
430	433	},
431		- joinInsert:function(){
432		- if(this.selectedMembership=="company"){
	434	+ joinInsert: function () {
	435	+ if (this.selectedMembership == "company") {
433	436	this.companyInsert();
434	437	}
435		- else{
	438	+ else {
436	439	this.userInsert();
437	440	}
438	441	},
...	...	@@ -442,7 +445,7 @@
442	445	//this.post를 문자열로 변경 후, 바이너리 형태로 변형한 다음, FormData에 담을 필요 없음
443	446	//vm.formData.append('params', new Blob([JSON.stringify(this.post)],{type: 'application/json'}));
444	447	//문자열로만 변경한 후, FormData에 담기
445		-
	448	+
446	449	vm.file.append('params', JSON.stringify(this.company));
447	450
448	451	// if (this.joinInsertCheck()) {
...	...	@@ -545,14 +548,14 @@
545	548	}
546	549	},
547	550	watch: {
548		- "email_id":function(){
549		- this.user["user_eml"]=this.email_id+"@"+this.email_dns;
	551	+ "email_id": function () {
	552	+ this.user["user_eml"] = this.email_id + "@" + this.email_dns;
550	553	},
551		- "email_dns":function(){
552		- this.user["user_eml"]=this.email_id+"@"+this.email_dns;
	554	+ "email_dns": function () {
	555	+ this.user["user_eml"] = this.email_id + "@" + this.email_dns;
553	556	},
554		- "select_email_dns":function(){
555		- this.user["user_eml"]=this.email_id+"@"+this.select_email_dns;
	557	+ "select_email_dns": function () {
	558	+ this.user["user_eml"] = this.email_id + "@" + this.select_email_dns;
556	559	},
557	560	},
558	561	computed: {
...	...	@@ -685,6 +688,7 @@
685	688
686	689	.background {
687	690	background-color: #000000;
	691	+
688	692	}
689	693
690	694	.join-b-button button:nth-child(1).background {
...	...	@@ -898,7 +902,7 @@
898	902	.joinsub0-1 {
899	903	padding: 1rem;
900	904	display: grid;
901		- grid-template-columns: 200px 2fr;
	905	+ grid-template-columns: 209px 2fr;
902	906
903	907	}
904	908
...	...	@@ -975,279 +979,10 @@
975	979
976	980
977	981
978		-@media all and (max-width:479px) {
979		- .join-logo h1 {
980		- font-size: 3rem;
981		- }
982	982
983		- .join-b {
984		- /* border: 1px solid red; */
985		- width: 100%;
986		- }
987	983
988	984
989		-
990		- .join-b-button {
991		- padding: 2rem;
992		- gap: 2rem;
993		- width: 100%;
994		- }
995		-
996		- .login-info {
997		- width: 90%;
998		- }
999		-
1000		- .login-info2 {
1001		- width: 90%;
1002		- }
1003		-
1004		- hr {
1005		- display: none;
1006		- }
1007		-
1008		- .joinsub0 {
1009		- grid-template-columns: 1fr;
1010		- }
1011		-
1012		- .joinsub {
1013		- grid-template-columns: 1fr;
1014		-
1015		- }
1016		-
1017		- .join-sec6 {
1018		-
1019		- grid-template-columns: 1fr;
1020		-
1021		- }
1022		-
1023		- .login-info-grid {
1024		- grid-template-columns: 1fr;
1025		- }
1026		-
1027		- .join-sec0 {
1028		- place-items: center;
1029		- }
1030		-
1031		- .joinsub0-1 {
1032		- grid-template-columns: 1fr;
1033		-
1034		- }
1035		-
1036		- .j-s-3 input {
1037		- height: 100%;
1038		- }
1039		-
1040		- .join-w1400 {
1041		- width: 100%;
1042		- padding: 1rem;
1043		- }
1044		-
1045		- .login-info h3,
1046		- .login-info2 h3 {
1047		- font-size: 1.8rem;
1048		- text-align: center;
1049		- }
1050		-
1051		- section div {}
1052		-
1053		- section div input {
1054		- width: 100%;
1055		- /* border: 1px solid red; */
1056		- }
1057		-
1058		- .join-email-bt {
1059		- text-align: center;
1060		- }
1061		-
1062		- .email-sec {
1063		- display: grid;
1064		-
1065		- grid-template-columns: 1fr 30px 1fr 1fr;
1066		- }
1067		-
1068		- .email-sec div {
1069		- /* padding: 2rem; */
1070		- padding: 1rem 0;
1071		- font-size: 1.5rem;
1072		- font-family: "Pretendard-Regular";
1073		- /* border: 1px solid red; */
1074		- text-align: center;
1075		- gap: 1rem;
1076		- }
1077		-
1078		- .email-sec div:nth-child(2) {
1079		- padding: 2rem 0;
1080		- }
1081		-
1082		- .join-sec-sub {
1083		- margin: 0 auto;
1084		- }
1085		-
1086		- .join-sec-1 span br {
1087		- display: none;
1088		- }
1089		-
1090		- .j-s-3 {
1091		- display: grid;
1092		- gap: 0;
1093		- height: 50rem;
1094		- grid-template-rows: 4rem;
1095		- }
1096		-
1097		-
1098		-}
1099		-
1100		-@media all and (min-width: 479px) and (max-width: 767px) {
1101		- .join-logo h1 {
1102		- font-size: 2.2rem;
1103		- }
1104		-
1105		- .login-info,
1106		- .login-info2 {
1107		- width: 100%;
1108		- padding: 1rem;
1109		- }
1110		-
1111		- .join-b-button {
1112		- padding: 4rem;
1113		- /* gap: 1rem; */
1114		- width: 100%;
1115		- }
1116		-
1117		- .login-info {
1118		- width: 100%;
1119		- }
1120		-
1121		- .joinsub0 {
1122		- grid-template-columns: 1fr;
1123		- }
1124		-
1125		- .joinsub {
1126		- grid-template-columns: 1fr;
1127		-
1128		- }
1129		-
1130		- .join-sec6 {
1131		-
1132		- grid-template-columns: 1fr;
1133		-
1134		- }
1135		-
1136		- .login-info-grid {
1137		- grid-template-columns: 1fr;
1138		- }
1139		-
1140		- .join-sec0 {
1141		- place-items: center;
1142		- }
1143		-
1144		- .joinsub0-1 {
1145		- grid-template-columns: 1fr;
1146		-
1147		- }
1148		-
1149		- .j-s-3 input {
1150		- height: 100%;
1151		- }
1152		-
1153		- .join-w1400 {
1154		- width: 100%;
1155		- padding: 1rem;
1156		- }
1157		-
1158		- .login-info h3,
1159		- .login-info2 h3 {
1160		- font-size: 1.8rem;
1161		- text-align: center;
1162		- }
1163		-
1164		- section div {}
1165		-
1166		- section div input {
1167		- width: 100%;
1168		- /* border: 1px solid red; */
1169		- }
1170		-
1171		- .join-email-bt {
1172		- text-align: center;
1173		- }
1174		-
1175		- .email-sec {
1176		- display: grid;
1177		-
1178		- grid-template-columns: 1fr 30px 1fr 1fr;
1179		- }
1180		-
1181		- .email-sec div {
1182		- /* padding: 2rem; */
1183		- padding: 1rem 0;
1184		- font-size: 1.5rem;
1185		- font-family: "Pretendard-Regular";
1186		- /* border: 1px solid red; */
1187		- text-align: center;
1188		- gap: 1rem;
1189		- }
1190		-
1191		- .email-sec div:nth-child(2) {
1192		- padding: 2rem 0;
1193		- }
1194		-
1195		- .join-sec-sub {
1196		- margin: 0 auto;
1197		- }
1198		-
1199		- .join-sec-1 span br {
1200		- display: none;
1201		- }
1202		-
1203		- .j-s-3 {
1204		- display: grid;
1205		- gap: 0;
1206		- height: 50rem;
1207		- grid-template-rows: 4rem;
1208		- }
1209		-}
1210		-
1211		-@media all and (min-width: 767px) and (max-width: 1023px) {
1212		- .join-b-button {
1213		- width: 80%;
1214		- }
1215		-
1216		- .login-info {
1217		- width: 80%;
1218		- padding: 3rem 0;
1219		- }
1220		-
1221		- .email-sec {
1222		- width: 100%;
1223		- display: grid;
1224		- /* border: 1px solid red; */
1225		-
1226		- grid-template-columns: 1fr 30px 1fr 1fr;
1227		- }
1228		-
1229		- .email-sec div {
1230		- /* padding: 2rem; */
1231		- padding: 1rem 0;
1232		- font-size: 1.5rem;
1233		- font-family: "Pretendard-Regular";
1234		- /* border: 1px solid red; */
1235		- text-align: center;
1236		- gap: 1rem;
1237		- }
1238		-
1239		- .email-sec div:nth-child(2) {
1240		- padding: 2rem 0;
1241		- }
1242		-
1243		- .login-info2 {
1244		- width: 80%;
1245		- }
1246		-
1247		- .join-w1400 {
1248		- width: 80%;
1249		- }
1250		-}
	985	+@media all and (min-width: 767px) and (max-width: 1023px) {}
1251	986
1252	987	@media all and (min-width: 1023px) and (max-width: 1268px) {
1253	988	.email-sec {

...	...	@@ -116,95 +116,5 @@
116	116	}
117	117	</script>
118	118
119		-<style scoped>
120		-div {
121		- width: 100%;
122		- background-color: white;
123		-}
124		-
125		-.info-box-button {
126		- width: 60%;
127		- margin: 0 auto;
128		- display: grid;
129		- padding: 0 0 6rem 0;
130		- grid-template-columns: 1fr 1fr;
131		-}
132		-
133		-.info-sec-bt {
134		- /* border: 1px solid red; */
135		- width: 60%;
136		- margin: 0 auto;
137		- padding: 6rem;
138		- text-align: right;
139		-}
140		-
141		-.info-sec-bt button {
142		- width: 30%;
143		- padding: 2rem;
144		- color: white;
145		- border-radius: 1.5rem;
146		- background-color: #3f87f7;
147		-}
148		-
149		-.info-box-button button {
150		- padding: 3rem 2rem 3rem 2rem;
151		- margin-right: 3rem;
152		- color: white;
153		- border-radius: 2rem;
154		-}
155		-
156		-.info-sec,
157		-.info-sec-1 {
158		- padding: 6rem;
159		- margin: 0 auto;
160		- border: 1px soli/d #333;
161		- width: 60%;
162		-}
163		-
164		-.info-sec div,
165		-.info-sec-1 div {
166		- display: grid;
167		-
168		- border-bottom: 1px solid #333;
169		- grid-template-columns: 30% 2fr;
170		-}
171		-
172		-.info-sec div p {
173		- padding: 3rem;
174		- font-size: 1.5rem;
175		-
176		-}
177		-
178		-.info-sec-1 div a {
179		- padding: 3rem;
180		-}
181		-
182		-.info-sec-1 div p {
183		- padding: 3rem;
184		- font-size: 1.5rem;
185		-
186		- /* border-bottom: 1px solid #333; */
187		-}
188		-
189		-.info-sec-1 section {
190		- padding: 3rem;
191		-}
192		-
193		-.info-sec-1 section img {
194		-
195		- width: 200px;
196		- height: 200px;
197		- border-radius: 50%;
198		- /* border: 1px solid red; */
199		- margin: 0 auto;
200		- box-shadow: 2px 2px 5px #33333345;
201		-
202		-}
203		-
204		-.info-td {
205		- /* border: 1px solid red; */
206		- height: 250px;
207		-}
208		-</style>
209	119
210	120

...	...	@@ -118,113 +118,6 @@
118	118	}
119	119	</script>
120	120
121		-<style scoped>
122		-div {
123		- width: 100%;
124		- background-color: white;
125		-}
126	121
127		-.info-pw {
128		- display: grid;
129		- grid-template-columns: 30% 1fr 1fr !important;
130		-}
131		-
132		-.info-pw button {
133		- margin: 2rem;
134		- border-radius: 0.5rem;
135		- background-color: #3f87f7;
136		- color: white;
137		-}
138		-
139		-.info-box-button {
140		- width: 60%;
141		- margin: 0 auto;
142		- display: grid;
143		- padding: 0 0 6rem 0;
144		- grid-template-columns: 1fr 1fr;
145		-}
146		-
147		-.info-sec-bt {
148		- /* border: 1px solid red; */
149		- width: 60%;
150		- margin: 0 auto;
151		- padding: 6rem;
152		- text-align: right;
153		-}
154		-
155		-.info-sec-bt button {
156		- width: 30%;
157		- padding: 2rem;
158		- color: white;
159		- border-radius: 1.5rem;
160		- background-color: #3f87f7;
161		-}
162		-
163		-.info-box-button button {
164		- padding: 3rem 2rem 3rem 2rem;
165		- margin-right: 3rem;
166		- color: white;
167		- border-radius: 2rem;
168		-}
169		-
170		-.info-sec,
171		-.info-sec-1 {
172		- padding: 6rem;
173		- margin: 0 auto;
174		- border: 1px soli/d #333;
175		- width: 60%;
176		-}
177		-
178		-.info-sec div,
179		-.info-sec-1 div {
180		- display: grid;
181		-
182		- border-bottom: 1px solid #333;
183		- grid-template-columns: 30% 2fr;
184		-}
185		-
186		-.info-sec div p {
187		- /* border-bottom: 1px solid #333; */
188		- padding: 3rem;
189		- font-size: 1.5rem;
190		-
191		-}
192		-
193		-.info-sec-1 div p {
194		- padding: 3rem;
195		- font-size: 1.5rem;
196		-
197		-}
198		-
199		-.info-sec-1 section {
200		- margin: 0 auto;
201		- width: 30%;
202		- text-align: center;
203		-}
204		-
205		-.info-sec-1 section img {
206		- width: 100%;
207		- margin: 0 auto;
208		-}
209		-
210		-
211		-.info-td {
212		- /* border: 1px solid red; */
213		- height: 250px;
214		-}
215		-
216		-.info-input {
217		- width: 100%;
218		- padding: 2rem;
219		- border-radius: 0.5rem;
220		-}
221		-
222		-.info-td input {
223		- height: 100%;
224		- width: 100%;
225		- padding: 2rem;
226		- border-radius: 0.5rem;
227		-}
228		-</style>
229	122
230	123

...	...	@@ -384,271 +384,3 @@
384	384	}
385	385	</script>
386	386
387		-<style scoped>
388		-.matching-box-wrap {
389		- width: 100%;
390		- background: linear-gradient(#5dadf6, #2e87da, #5dadf6);
391		-}
392		-
393		-.matching-wrap {
394		- padding: 30px 30px;
395		- display: grid;
396		- width: 100%;
397		- /* border: 1px solid red; */
398		- justify-content: center;
399		- grid-template-columns: 1fr 1fr 1fr;
400		-}
401		-
402		-.matching-wrap div {
403		- /* width: 40%; */
404		- width: 100%;
405		- /* border: 1px solid red; */
406		-}
407		-
408		-.matching-wrap img {
409		- width: 100%;
410		- margin: 0 auto;
411		- /* text-align: center; */
412		- justify-content: center;
413		-}
414		-
415		-.matching-text {
416		- margin: 0 auto;
417		- text-align: center;
418		- font-size: 5rem;
419		- /* padding-bottom: 50px; */
420		- font-family: SBaggroM;
421		- color: white;
422		-}
423		-
424		-.matching-box-wrap-one {
425		- width: 100%;
426		- height: 100%;
427		- padding: 3rem;
428		- margin: 0 auto;
429		- text-align: center;
430		- color: #3f87f7;
431		- background-color: #e2e2e2;
432		-}
433		-
434		-.matching-box-grid>h3 {
435		- font-size: 2.6rem;
436		- padding: 3rem;
437		- font-family: SBaggroM;
438		-}
439		-
440		-.matching-box-bos {
441		- width: 100%;
442		- place-items: center;
443		- margin: 0 auto;
444		- display: grid;
445		- grid-template-columns: 1fr 1fr 1fr;
446		-}
447		-
448		-.matchingbox {
449		- width: 90%;
450		- padding: 2rem;
451		-}
452		-
453		-.matchingbox h3 {
454		- padding: 1rem;
455		- font-size: 2rem;
456		- color: #3f87f7;
457		- font-family: "Pretendard-Regular";
458		-}
459		-
460		-.matchingbox img {
461		- /* padding: 2rem; */
462		- height: 119px;
463		- width: 80%;
464		- margin: 0 auto;
465		- object-fit: contain;
466		-}
467		-
468		-.matchingbox p:nth-child(3) {
469		- text-align: left;
470		- color: #333;
471		- font-size: 1.5rem;
472		- padding: 1rem;
473		-}
474		-
475		-.matchingbox p:nth-child(4) {
476		- text-align: right;
477		- font-size: 1.5rem;
478		- color: #333;
479		-
480		- padding: 1rem;
481		-}
482		-
483		-.matchingbox div {
484		- padding: 1rem;
485		- background-color: #ffffff;
486		- box-shadow: 2px 2px 2px #33333332;
487		- position: relative;
488		-}
489		-
490		-.matchingbox div:nth-child(1):before {
491		- position: absolute;
492		- content: "AA등급";
493		- line-height: 40px;
494		- color: white;
495		- font-size: 1.5rem;
496		- font-weight: 800;
497		- width: 90px;
498		- height: 40px;
499		- top: -25px;
500		- right: -5%;
501		- background-color: #3f87f7;
502		- border-radius: 45px;
503		- transform: translateX(-50%);
504		-}
505		-
506		-.matchingbox-1 {
507		- display: flex;
508		- box-shadow: 0px 0px 0px white !important;
509		- flex-direction: row;
510		- justify-content: flex-end;
511		-}
512		-
513		-.matchingbox-1 p {
514		- text-align: right;
515		- font-size: 1.5rem;
516		- padding: 1rem;
517		- color: rgb(6, 6, 6);
518		-}
519		-
520		-.matchingbox-text {
521		- text-align: right;
522		- font-size: 1.3rem;
523		- padding: 1rem;
524		- font-weight: 700;
525		- color: rgb(6, 6, 6);
526		-}
527		-
528		-.matchingbox-text span {
529		- font-weight: 400;
530		-}
531		-
532		-.matching-box-main-two {
533		- width: 100%;
534		- margin: 0 auto;
535		-}
536		-
537		-.matching-box-grid-two {
538		- width: 100%;
539		- display: grid;
540		- grid-template-columns: 1fr 1fr 1fr;
541		- margin: 0 auto;
542		- place-items: center;
543		-
544		- padding: 3rem;
545		-}
546		-
547		-.matching-box-2 {
548		- padding: 2rem;
549		- margin: 1rem;
550		- background-color: #f9f9f9;
551		- box-shadow: 2px 2px 5px #33333332;
552		-}
553		-
554		-.matching-box-2 div {
555		- display: flex;
556		- flex-wrap: wrap;
557		-}
558		-
559		-.matching-box-2 h5 {
560		- width: 100%;
561		- font-size: 1.5rem;
562		- font-family: "Pretendard-Regular";
563		-}
564		-
565		-.matching-box-2 p {
566		- width: 100%;
567		- font-size: 1.5rem;
568		- text-align: right;
569		- justify-content: right;
570		- font-family: "Pretendard-Regular";
571		-}
572		-
573		-.matchingbox-2 {
574		- width: 100%;
575		-
576		- display: flex;
577		- padding: 1.5rem 0px;
578		- flex-wrap: nowrap;
579		- justify-content: flex-end;
580		- flex-direction: row !important;
581		-}
582		-
583		-.matchingbox-2 p {
584		- width: 25%;
585		-}
586		-
587		-@media all and (max-width:479px) {
588		- .matching-box img {
589		- width: 100%;
590		- }
591		-
592		- .matching-span span {
593		- padding: 1rem 1.5rem 1rem 1.5rem;
594		- }
595		-
596		- .matching-box-bos {
597		- grid-template-columns: 1fr;
598		- }
599		-
600		- .matching-box-grid-two {
601		- grid-template-columns: 1fr;
602		- width: 100%;
603		- }
604		-
605		- .matching-text {
606		- /* display: none; */
607		- padding-top: 3rem;
608		- font-size: 2rem;
609		- }
610		-}
611		-
612		-@media all and (min-width: 480px) and (max-width: 767px) {
613		- .matching-box img {
614		- width: 100%;
615		- }
616		-
617		- .matching-box-bos {
618		- grid-template-columns: 1fr;
619		- }
620		-
621		- .matching-box-grid-two {
622		- grid-template-columns: 1fr;
623		- }
624		-
625		- .mat-sec-b {
626		- width: 90%;
627		- }
628		-
629		- .matching-text {
630		- font-size: 3rem;
631		- }
632		-}
633		-
634		-@media all and (min-width: 767px) and (max-width: 1023px) {
635		- .matching-box img {
636		- width: 100%;
637		- }
638		-
639		- .matching-box-bos {
640		- width: 100%;
641		- grid-template-columns: 1fr 1fr;
642		- }
643		-
644		- .matching-box-grid-two {
645		- grid-template-columns: 1fr 1fr;
646		- }
647		-
648		- .mat-sec-b {
649		- width: 90%;
650		- }
651		-}
652		-
653		-@media all and (min-width: 1023px) and (max-width: 1268px) {}
654		-</style> (No newline at end of file)

...	...	@@ -96,174 +96,6 @@
96	96	</script>
97	97
98	98	<style scoped>
99		-.mat-bos {
100		- padding: 6rem 6rem 1rem 6rem;
101		- width: 100%;
102		-}
103		-
104		-.mat-bos img {
105		- width: 50px;
106		- /* transform: translateY(10px);/ */
107		- z-index: -1;
108		-}
109		-
110		-.mat-bos h1 {
111		- font-size: 2.7rem;
112		- z-index: 100 !important;
113		- font-family: SBaggroM;
114		-}
115		-
116		-.matDtail-sec {
117		- width: 100%;
118		- padding: 0rem 6rem 6rem 6rem;
119		- display: grid;
120		- grid-template-columns: 1fr;
121		-}
122		-
123		-.mat-sec1 {
124		- display: grid;
125		- grid-template-columns: 85% 15%;
126		- padding: 2rem 3rem 1rem 3rem;
127		- background-color: #f4f4f4;
128		- border-top: 1px solid rgb(199, 199, 199);
129		-}
130		-
131		-.mat-sec1 h2 {
132		- font-size: 2rem;
133		- color: #3f87f7;
134		-}
135		-
136		-.mat-sec1 h2 span {
137		- color: #90baff;
138		- font-size: 1.5rem;
139		-}
140		-
141		-.mat-sec1 div {
142		- padding: 1rem;
143		- border-radius: 0.5rem;
144		- margin-top: 3rem;
145		- /* text-align: right; */
146		- text-align: center;
147		- background-color: #3f87f7;
148		-
149		-}
150		-
151		-.mat-sec1 div label {
152		- color: white;
153		- font-size: 1.5rem;
154		- margin-right: 1rem;
155		-}
156		-
157		-.mat-sec1 div i {
158		- font-size: 1.5rem;
159		-}
160		-
161		-.mat-sec2 {
162		-
163		- border-top: 1px solid rgb(199, 199, 199);
164		- border-bottom: 1px solid rgb(199, 199, 199);
165		-}
166		-
167		-.mat-sec2 div {
168		- padding: 2rem 0;
169		-}
170		-
171		-.mat-sec2-end {
172		- display: grid;
173		- grid-template-columns: 1fr 1fr;
174		-}
175		-
176		-.mat-sec2 p {
177		- font-size: 1.7rem;
178		-
179		-}
180		-
181		-.mat-sec2-end p {
182		- font-size: 1.5rem;
183		-}
184		-
185		-.mat-sec2-end p span {
186		- color: #3f87f7;
187		- margin-right: 1rem;
188		-}
189		-
190		-.mat-sec2-end p:nth-child(2) {
191		- text-align: right;
192		-}
193		-
194		-.mat-sec2-bt {
195		- text-align: right;
196		- width: 100%;
197		- padding: 2rem 0;
198		-}
199		-
200		-.mat-sec2-bt button {
201		- width: 15%;
202		- padding: 1rem;
203		- background-color: #3f87f7;
204		- color: white;
205		- border-radius: 0.5rem;
206		- font-family: "Pretendard-Regular";
207		-
208		-}
209		-
210		-@media all and (max-width:479px) {
211		- .mat-bos {
212		- width: 100%;
213		- padding: 2rem;
214		- }
215		-
216		- .mat-bos h1,
217		- .mat-bos img {
218		- text-align: center;
219		- margin: 0 auto;
220		- }
221		-
222		- .mat-sec1 {
223		- grid-template-columns: 1fr;
224		- }
225		-
226		- .matDtail-sec {
227		- width: 100%;
228		- padding: 2rem;
229		- }
230		-
231		- .mat-span span {
232		- padding: 1rem 1.5rem 1rem 1.5rem;
233		- }
234		-
235		-}
236		-
237		-@media all and (min-width: 480px) and (max-width: 767px) {
238		- .mat-bos {
239		- width: 100%;
240		- padding: 2rem;
241		- }
242		-
243		- .mat-bos h1,
244		- .mat-bos img {
245		- text-align: center;
246		- margin: 0 auto;
247		- }
248		-
249		- .mat-sec1 {
250		- grid-template-columns: 1fr;
251		-
252		- }
253		-
254		- .matDtail-sec {
255		- width: 100%;
256		- padding: 2rem;
257		- }
258		-}
259		-
260		-@media all and (min-width: 767px) and (max-width: 1023px) {
261		- .mat-sec1 {
262		- grid-template-columns: 75% 25%;
263		-
264		- }
265		-}
266		-
267	99	@media all and (min-width: 1023px) and (max-width: 1268px) {
268	100	.mat-sec1 {
269	101	grid-template-columns: 80% 20%;

...	...	@@ -1,46 +1,48 @@
1	1	const { VueLoaderPlugin } = require("vue-loader");
2		-const {PROJECT_NAME, BASE_DIR, SERVICE_STATUS} = require('./Global');
	2	+const { PROJECT_NAME, BASE_DIR, SERVICE_STATUS } = require("./Global");
3	3
4	4	module.exports = {
5	5	name: PROJECT_NAME,
6	6	mode: SERVICE_STATUS,
7		- devtool: 'eval',
	7	+ devtool: "eval",
8	8
9	9	entry: {
10		- app: [`${BASE_DIR}/client/views/index.js`]
	10	+ app: [`${BASE_DIR}/client/views/index.js`],
11	11	},
12	12
13	13	module: {
14		- rules: [{
15		- test: /\.vue?$/,
16		- loader: 'vue-loader',
17		- }, {
18		- test: /\.(js\|jsx)?$/,
19		- loader: 'babel-loader',
20		- }, {
21		- test: /\.css$/,
22		- use: ['vue-style-loader', 'css-loader']
23		- }, {
24		- test: /\.(jpe?g\|png\|gif\|svg\|ttf\|eot\|woff\|woff2)$/i,
25		- use: [{
26		- loader:'url-loader',
27		- options:{
28		- limit:8192,
29		- fallback:require.resolve('file-loader')
30		- }
31		- }]
32		- }],
	14	+ rules: [
	15	+ {
	16	+ test: /\.vue?$/,
	17	+ loader: "vue-loader",
	18	+ },
	19	+ {
	20	+ test: /\.(js\|jsx)?$/,
	21	+ loader: "babel-loader",
	22	+ },
	23	+ {
	24	+ test: /\.css$/,
	25	+ use: ["vue-style-loader", "css-loader"],
	26	+ },
	27	+ {
	28	+ test: /\.(jpe?g\|png\|gif\|svg\|ttf\|eot\|woff\|woff2)$/i,
	29	+ use: [
	30	+ {
	31	+ loader: "url-loader",
	32	+ options: {
	33	+ limit: 8192,
	34	+ fallback: require.resolve("file-loader"),
	35	+ },
	36	+ },
	37	+ ],
	38	+ },
	39	+ ],
33	40	},
34	41
35	42	plugins: [new VueLoaderPlugin()],
36	43
37	44	output: {
38		- path: `${BASE_DIR}/client/build`, // __dirname: webpack.config.js 파일이 위치한 경로
39		- filename: 'bundle.js'
	45	+ path: `${BASE_DIR}/client/build`, // __dirname: webpack.config.js 파일이 위치한 경로
	46	+ filename: "bundle.js",
40	47	},
41		- resolve: {
42		- alias: {
43		- '@': path.resolve(__dirname, 'src'), // @를 src 디렉토리로 연결
44		- },
45		- },
46		-} (No newline at end of file)
	48	+};

Delete comment